1
0
mirror of https://github.com/thangisme/notes.git synced 2024-11-12 13:26:06 -05:00
notes/_sass/navigation.scss

134 lines
1.8 KiB
SCSS
Raw Normal View History

2017-03-24 09:47:37 -04:00
//
// Main nav, breadcrumb, etc...
//
.site-title {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
2017-03-26 21:09:19 -04:00
background-color: $grey-lt-000;
2017-03-24 09:47:37 -04:00
@include mq(md) {
position: absolute;
top: $gutter-spacing;
right: 0;
z-index: 101;
}
}
2017-03-09 13:16:08 -05:00
.navigation-list {
padding: 0;
margin-top: $sp-4;
2017-03-26 21:09:19 -04:00
list-style: none;
2017-03-09 13:16:08 -05:00
@include mq(md) {
margin-top: $sp-8;
}
}
.navigation-list-child-list {
padding-left: $sp-3;
2017-03-26 21:09:19 -04:00
list-style: none;
2017-03-09 13:16:08 -05:00
.navigation-list-link {
color: $grey-dk-100;
}
.navigation-list-item {
&::before {
position: absolute;
2017-03-26 21:09:19 -04:00
margin-top: 0.3em;
2017-03-09 13:16:08 -05:00
margin-left: -0.8em;
color: $grey-dk-000;
2017-03-26 21:09:19 -04:00
content: "- ";
2017-03-09 13:16:08 -05:00
}
2017-03-24 09:47:37 -04:00
&.active {
&::before {
color: $grey-dk-100;
}
}
2017-03-09 13:16:08 -05:00
}
}
.navigation-list-item {
@include fs-3;
2017-03-26 21:09:19 -04:00
margin: 0;
2017-03-09 13:16:08 -05:00
}
.navigation-list-link {
display: block;
2017-03-26 21:09:19 -04:00
padding-top: $sp-1;
padding-bottom: $sp-1;
2017-03-09 13:16:08 -05:00
&.active {
2017-03-26 21:09:19 -04:00
font-weight: 600;
2017-03-09 13:16:08 -05:00
color: $grey-dk-200;
text-decoration: none;
}
}
2017-03-24 09:47:37 -04:00
// Small screen nav
.main-nav {
display: none;
&.nav-open {
display: block;
}
@include mq(md) {
display: block;
}
}
.side-bar {
display: flex;
flex-wrap: wrap;
@include mq(md) {
display: block;
2017-03-26 21:09:19 -04:00
overflow-y: auto;
2017-03-24 09:47:37 -04:00
}
}
.navigation-list-toggle {
position: absolute;
right: $sp-4;
@include mq(md) {
display: none !important;
}
}
// Breadcrumb nav
2017-03-09 13:16:08 -05:00
.breadcrumb-nav-list {
padding-left: 0;
2017-03-26 21:09:19 -04:00
margin-bottom: $sp-3;
list-style: none;
2017-03-09 13:16:08 -05:00
}
.breadcrumb-nav-list-item {
display: table-cell;
@include fs-2;
2017-03-24 09:47:37 -04:00
&::before {
display: none;
}
2017-03-09 13:16:08 -05:00
&::after {
display: inline-block;
margin-right: $sp-2;
2017-03-26 21:09:19 -04:00
margin-left: $sp-2;
2017-03-09 13:16:08 -05:00
color: $grey-dk-000;
2017-03-26 21:09:19 -04:00
content: "/";
2017-03-09 13:16:08 -05:00
}
&:last-child {
&::after {
content: "";
}
}
}