1
0
mirror of https://github.com/thangisme/notes.git synced 2024-06-15 17:45:35 +00:00
notes/_sass/navigation.scss

220 lines
4.4 KiB
SCSS
Raw Normal View History

2017-03-24 13:47:37 +00:00
//
// Main nav, breadcrumb, etc...
//
2019-11-27 11:52:44 +00:00
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
.nav-list {
2017-03-09 18:16:08 +00:00
padding: 0;
margin-top: 0;
2018-10-23 15:40:39 +00:00
margin-bottom: 0;
2017-03-27 01:09:19 +00:00
list-style: none;
2017-03-09 18:16:08 +00:00
.nav-list-item {
@include fs-4;
position: relative;
margin: 0;
2018-11-15 20:12:12 +00:00
@include mq(md) {
@include fs-3;
2017-03-09 18:16:08 +00:00
}
2017-03-24 13:47:37 +00:00
.nav-list-link {
display: block;
min-height: $nav-list-item-height-sm;
padding-top: $sp-1;
padding-bottom: $sp-1;
line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
@if $nav-list-expander-right {
padding-right: $nav-list-item-height-sm;
padding-left: $gutter-spacing-sm;
2020-06-25 19:42:41 +00:00
} @else {
padding-right: $gutter-spacing-sm;
padding-left: $nav-list-item-height-sm;
}
@include mq(md) {
min-height: $nav-list-item-height;
line-height: #{$nav-list-item-height - 2 * $sp-1};
@if $nav-list-expander-right {
padding-right: $nav-list-item-height;
padding-left: $gutter-spacing;
2020-06-25 19:42:41 +00:00
} @else {
padding-right: $gutter-spacing;
padding-left: $nav-list-item-height;
}
}
&.active {
font-weight: 600;
text-decoration: none;
}
&:hover,
&.active {
2020-06-25 19:42:41 +00:00
background-image: linear-gradient(
-90deg,
rgba($feedback-color, 1) 0%,
rgba($feedback-color, 0.8) 80%,
rgba($feedback-color, 0) 100%
);
2017-03-24 13:47:37 +00:00
}
}
2017-03-09 18:16:08 +00:00
.nav-list-expander {
position: absolute;
@if $nav-list-expander-right {
right: 0;
}
width: $nav-list-item-height-sm;
height: $nav-list-item-height-sm;
padding-top: #{$nav-list-item-height-sm / 4};
padding-right: #{$nav-list-item-height-sm / 4};
padding-bottom: #{$nav-list-item-height-sm / 4};
padding-left: #{$nav-list-item-height-sm / 4};
2020-06-25 21:48:24 +00:00
color: $link-color;
@include mq(md) {
width: $nav-list-item-height;
height: $nav-list-item-height;
padding-top: #{$nav-list-item-height / 4};
padding-right: #{$nav-list-item-height / 4};
padding-bottom: #{$nav-list-item-height / 4};
padding-left: #{$nav-list-item-height / 4};
}
&:hover {
2020-06-25 19:42:41 +00:00
background-image: linear-gradient(
-90deg,
rgba($feedback-color, 1) 0%,
rgba($feedback-color, 0.8) 100%
);
}
@if $nav-list-expander-right {
svg {
transform: rotate(90deg);
}
}
}
2018-10-23 15:40:39 +00:00
> .nav-list {
display: none;
padding-left: $sp-3;
list-style: none;
2018-11-19 18:28:59 +00:00
.nav-list-item {
position: relative;
2018-11-19 18:28:59 +00:00
.nav-list-link {
color: $nav-child-link-color;
}
.nav-list-expander {
2020-06-25 21:48:24 +00:00
color: $nav-child-link-color;
}
}
2018-11-19 18:28:59 +00:00
}
2017-03-09 18:16:08 +00:00
&.active {
> .nav-list-expander svg {
@if $nav-list-expander-right {
transform: rotate(-90deg);
2020-06-25 19:42:41 +00:00
} @else {
transform: rotate(90deg);
}
}
2017-03-09 18:16:08 +00:00
> .nav-list {
display: block;
}
}
2017-03-09 18:16:08 +00:00
}
}
2020-07-09 19:07:24 +00:00
.nav-category {
padding-top: $sp-2;
padding-right: $gutter-spacing-sm;
padding-bottom: $sp-2;
padding-left: $gutter-spacing-sm;
font-weight: 600;
text-align: end;
text-transform: uppercase;
border-bottom: $border $border-color;
@include fs-2;
@include mq(md) {
padding-right: $gutter-spacing;
padding-left: $gutter-spacing;
margin-top: $gutter-spacing-sm;
text-align: start;
&:first-child {
margin-top: 0;
}
}
}
2019-12-03 08:12:54 +00:00
// Aux nav
2017-03-24 13:47:37 +00:00
.aux-nav {
2019-12-03 08:12:54 +00:00
height: 100%;
overflow-x: auto;
@include fs-2;
.aux-nav-list {
2019-12-03 08:12:54 +00:00
display: flex;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
}
.aux-nav-list-item {
display: inline-block;
2019-12-03 08:12:54 +00:00
height: 100%;
padding: 0;
margin: 0;
}
2019-12-03 08:12:54 +00:00
@include mq(md) {
padding-right: $gutter-spacing-sm;
}
2017-03-24 13:47:37 +00:00
}
// Breadcrumb nav
2018-11-19 18:29:17 +00:00
.breadcrumb-nav {
@include mq(md) {
margin-top: -$sp-4;
}
}
2017-03-24 13:47:37 +00:00
2017-03-09 18:16:08 +00:00
.breadcrumb-nav-list {
padding-left: 0;
2017-03-27 01:09:19 +00:00
margin-bottom: $sp-3;
list-style: none;
2017-03-09 18:16:08 +00:00
}
.breadcrumb-nav-list-item {
display: table-cell;
@include fs-2;
2017-03-24 13:47:37 +00:00
&::before {
display: none;
}
2017-03-09 18:16:08 +00:00
&::after {
display: inline-block;
margin-right: $sp-2;
2017-03-27 01:09:19 +00:00
margin-left: $sp-2;
2017-03-09 18:16:08 +00:00
color: $grey-dk-000;
2017-03-27 01:09:19 +00:00
content: "/";
2017-03-09 18:16:08 +00:00
}
&:last-child {
&::after {
content: "";
}
}
}