mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
use own grid for showcase
This commit is contained in:
parent
88df5fce34
commit
b8fbde98fa
@ -9,7 +9,10 @@ const Home = require('../home');
|
||||
const Item = require('../item/');
|
||||
|
||||
const {
|
||||
Base
|
||||
Base,
|
||||
Container,
|
||||
Row,
|
||||
Column
|
||||
} = require('../../../src');
|
||||
|
||||
const {
|
||||
@ -19,16 +22,24 @@ const {
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Base>
|
||||
<Navigation />
|
||||
<Match
|
||||
component={Home}
|
||||
exactly
|
||||
pattern='/'
|
||||
/>
|
||||
<Match
|
||||
component={Item}
|
||||
pattern='/:parent?/:name'
|
||||
/>
|
||||
<Container fluid>
|
||||
<Row>
|
||||
<Column xs={12} md={2}>
|
||||
<Navigation />
|
||||
</Column>
|
||||
<Column xs={12} md={10}>
|
||||
<Match
|
||||
component={Home}
|
||||
exactly
|
||||
pattern='/'
|
||||
/>
|
||||
<Match
|
||||
component={Item}
|
||||
pattern='/:parent?/:name'
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
</Base>
|
||||
);
|
||||
};
|
||||
|
@ -4,7 +4,6 @@ const React = require('react');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const Docs = require('../../../src/docs');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const {
|
||||
Link
|
||||
@ -21,19 +20,15 @@ const getList = (items, parent) => {
|
||||
isNested = (typeof item !== 'string');
|
||||
|
||||
return (
|
||||
<li className={styles.item} key={href}>
|
||||
<li key={href}>
|
||||
<Link to={href}>{name}</Link>
|
||||
{isNested ? getList(item, href) : null}
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
const cn = classNames(
|
||||
isNested ? styles['is-nested'] : ''
|
||||
);
|
||||
|
||||
return (
|
||||
<ul className={cn}>
|
||||
<ul>
|
||||
{lis}
|
||||
</ul>
|
||||
);
|
||||
@ -42,7 +37,7 @@ const getList = (items, parent) => {
|
||||
const Navigation = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.navigation}>
|
||||
<div>
|
||||
<nav role='navigation'>
|
||||
{getList(Docs)}
|
||||
</nav>
|
||||
|
@ -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
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user