mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00
Code Issues Releases Wiki Activity

use own grid for showcase

Browse Source
This commit is contained in:
Sérgio Ramos 2016-10-26 14:05:07 +01:00
parent 88df5fce34
commit b8fbde98fa
3 changed files with 25 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/docs/containers/app/index.js
View File

@ -9,7 +9,10 @@ const Home = require('../home');
const Item = require('../item/'); const Item = require('../item/');
const { const {
Base Base,
Container,
Row,
Column
} = require('../../../src'); } = require('../../../src');
const { const {
@ -19,7 +22,12 @@ const {
module.exports = () => { module.exports = () => {
return ( return (
<Base> <Base>
<Container fluid>
<Row>
<Column xs={12} md={2}>
<Navigation /> <Navigation />
</Column>
<Column xs={12} md={10}>
<Match <Match
component={Home} component={Home}
exactly exactly
@ -29,6 +37,9 @@ module.exports = () => {
component={Item} component={Item}
pattern='/:parent?/:name' pattern='/:parent?/:name'
/> />
</Column>
</Row>
</Container>
</Base> </Base>
); );
}; };

11
ui/docs/containers/app/navigation.js
View File

@ -4,7 +4,6 @@ const React = require('react');
const ReactRouter = require('react-router'); const ReactRouter = require('react-router');
const Docs = require('../../../src/docs'); const Docs = require('../../../src/docs');
const styles = require('./style.css');
const { const {
Link Link
@ -21,19 +20,15 @@ const getList = (items, parent) => {
isNested = (typeof item !== 'string'); isNested = (typeof item !== 'string');
return ( return (
<li className={styles.item} key={href}> <li key={href}>
<Link to={href}>{name}</Link> <Link to={href}>{name}</Link>
{isNested ? getList(item, href) : null} {isNested ? getList(item, href) : null}
</li> </li>
); );
}); });
const cn = classNames(
isNested ? styles['is-nested'] : ''
);
return ( return (
<ul className={cn}> <ul>
{lis} {lis}
</ul> </ul>
); );
@ -42,7 +37,7 @@ const getList = (items, parent) => {
const Navigation = () => { const Navigation = () => {
return ( return (
<div> <div>
<div className={styles.navigation}> <div>
<nav role='navigation'> <nav role='navigation'>
{getList(Docs)} {getList(Docs)}
</nav> </nav>

108
ui/docs/containers/app/style.css
View File

@ -1,108 +0,0 @@
/* based on:
*
* salesforce-ux/design-system v2.1.3
* BSD License Clause 2
* github.com/salesforce-ux/design-system
*/
.navigation {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
/* Arrow Icon */
& .icon_svg {
width: .5rem;
height: .5rem;
display: inline-block;
opacity: .5;
}
/* Hide closed menu items */
& .is-closed ul {
display: none;
}
/* Links */
& a {
display: block;
padding: .75rem 2rem;
line-height: 1.28571428571429;
color: #16325c;
&:hover {
background-color: rgba(244, 246, 249, .5);
}
}
/* Active Link */
& .is-active > a {
background-color: #eef1f6;
color: #0070d2;
}
/* Open Menu Items */
& .is-open {
padding-bottom: .5rem;
}
/* Section Selected */
& .is-selected {
background-color: #f4f6f9;
& a:hover {
background-color: #eceff5;
}
& .icon__svg {
opacity: 1;
}
}
/* Nested List */
& .is-nested {
margin-left: 0;
& a {
padding-top: .5rem;
padding-bottom: .5rem;
padding-left: 3.5rem;
}
& .is-nested a {
padding-left: 5rem;
}
}
@media (min-width: 48em) {
position: fixed;
top: 6rem;
bottom: 0;
border-right: 1px solid #f4f6f9;
padding-top: 0;
width: 15rem;
& nav {
position: absolute;
width: 15rem;
height: 100%;
overflow: hidden;
overflow-y: auto;
outline: 0;
}
&.navigation--has-search nav {
top: calc(2.5rem + 2px);
bottom: 0;
height: auto;
}
&.site-navigation--internal {
top: 8rem;
}
}
& .item {
margin: 0 .5rem
}
}