mirror of
https://github.com/CoderSherlock/CoderSherlock.github.io.git
synced 2026-06-13 08:08:10 -07:00
Updated to new theme of TeXt
This commit is contained in:
@@ -0,0 +1,163 @@
|
||||
@mixin button() {
|
||||
display: inline-block;
|
||||
font-weight: map-get($button, font-weight);
|
||||
line-height: 1 !important;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
@include user-select(none);
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
@include disabled() {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button();
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
@include clickable($text-color-1, $main-color-1);
|
||||
}
|
||||
|
||||
.button--secondary {
|
||||
@include clickable($text-color-3, $main-color-3);
|
||||
}
|
||||
|
||||
.button--success {
|
||||
@include clickable($text-color-function, $green);
|
||||
}
|
||||
|
||||
.button--info {
|
||||
@include clickable($text-color-function, $blue);
|
||||
}
|
||||
|
||||
.button--warning {
|
||||
@include clickable($text-color-function, $yellow);
|
||||
}
|
||||
|
||||
.button--error {
|
||||
@include clickable($text-color-function, $red);
|
||||
}
|
||||
|
||||
.button--theme-light {
|
||||
@include clickable($text-color-theme-dark, $main-color-theme-light);
|
||||
}
|
||||
|
||||
.button--theme-dark {
|
||||
@include clickable($text-color-theme-light, $main-color-theme-dark);
|
||||
}
|
||||
|
||||
.button--outline-primary {
|
||||
color: $main-color-1;
|
||||
border: 1px solid $main-color-1;
|
||||
@include clickable($main-color-1, transparent, $text-color-1, $main-color-1);
|
||||
}
|
||||
|
||||
.button--outline-secondary {
|
||||
color: $main-color-3;
|
||||
border: 1px solid $main-color-3;
|
||||
@include clickable($main-color-3, transparent, $text-color-3, $main-color-3);
|
||||
}
|
||||
|
||||
.button--outline-success {
|
||||
color: $green;
|
||||
border: 1px solid $green;
|
||||
@include clickable($green, transparent, $text-color-function, $green);
|
||||
}
|
||||
|
||||
.button--outline-info {
|
||||
color: $blue;
|
||||
border: 1px solid $blue;
|
||||
@include clickable($blue, transparent, $text-color-function, $blue);
|
||||
}
|
||||
|
||||
.button--outline-warning {
|
||||
color: $yellow;
|
||||
border: 1px solid $yellow;
|
||||
@include clickable($yellow, transparent, $text-color-function, $yellow);
|
||||
}
|
||||
|
||||
.button--outline-error {
|
||||
color: $red;
|
||||
border: 1px solid $red;
|
||||
@include clickable($red, transparent, $text-color-function, $red);
|
||||
}
|
||||
|
||||
.button--outline-theme-light {
|
||||
color: $main-color-theme-light;
|
||||
border: 1px solid $main-color-theme-light;
|
||||
@include clickable($main-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light);
|
||||
}
|
||||
|
||||
.button--outline-theme-dark {
|
||||
color: $main-color-theme-dark;
|
||||
border: 1px solid $main-color-theme-dark;
|
||||
@include clickable($main-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark);
|
||||
}
|
||||
|
||||
.button--pill {
|
||||
border-radius: map-get($button, pill-radius);
|
||||
@extend .button--md;
|
||||
}
|
||||
|
||||
.button--rounded {
|
||||
border-radius: map-get($base, border-radius);
|
||||
@extend .button--md;
|
||||
}
|
||||
|
||||
.button--circle {
|
||||
@include inline-flex();
|
||||
@include justify-content(center);
|
||||
@include align-items(center);
|
||||
border-radius: 50%;
|
||||
@extend .button--md;
|
||||
}
|
||||
|
||||
.button--md {
|
||||
padding: map-get($button, padding-y) map-get($button, padding-x);
|
||||
font-size: map-get($base, font-size);
|
||||
&.button--circle {
|
||||
width: map-get($button, circle-diameter);
|
||||
height: map-get($button, circle-diameter);
|
||||
}
|
||||
}
|
||||
|
||||
.button--xs {
|
||||
padding: map-get($button, padding-y-xs) map-get($button, padding-x-xs);
|
||||
font-size: map-get($base, font-size-xs);
|
||||
&.button--circle {
|
||||
width: map-get($button, circle-diameter-xs);
|
||||
height: map-get($button, circle-diameter-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.button--sm {
|
||||
padding: map-get($button, padding-y-sm) map-get($button, padding-x-sm);
|
||||
font-size: map-get($base, font-size-sm);
|
||||
&.button--circle {
|
||||
width: map-get($button, circle-diameter-sm);
|
||||
height: map-get($button, circle-diameter-sm);
|
||||
}
|
||||
}
|
||||
|
||||
.button--lg {
|
||||
padding: map-get($button, padding-y-lg) map-get($button, padding-x-lg);
|
||||
font-size: map-get($base, font-size-lg);
|
||||
&.button--circle {
|
||||
width: map-get($button, circle-diameter-lg);
|
||||
height: map-get($button, circle-diameter-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.button--xl {
|
||||
padding: map-get($button, padding-y-xl) map-get($button, padding-x-xl);
|
||||
font-size: map-get($base, font-size-xl);
|
||||
&.button--circle {
|
||||
width: map-get($button, circle-diameter-xl);
|
||||
height: map-get($button, circle-diameter-xl);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
|
||||
.card {
|
||||
max-width: 18rem;
|
||||
border-radius: map-get($base, border-radius);
|
||||
@include box-shadow();
|
||||
@include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
|
||||
& > :first-child {
|
||||
border-top-left-radius: map-get($base, border-radius);
|
||||
border-top-right-radius: map-get($base, border-radius);
|
||||
}
|
||||
& > :last-child {
|
||||
border-bottom-right-radius: map-get($base, border-radius);
|
||||
border-bottom-left-radius: map-get($base, border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
& > .card {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.card__content {
|
||||
padding: map-get($spacers, 2) map-get($spacers, 3);
|
||||
}
|
||||
|
||||
.card__header, .card__header > a {
|
||||
@include link-colors($text-color-d, $main-color-1);
|
||||
}
|
||||
|
||||
.card__image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
& > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: inherit;
|
||||
}
|
||||
& > .overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
padding: map-get($spacers, 2);
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
& > .overlay, & > .overlay--top {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
& > .overlay--bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
& > .overlay--full {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
& > .overlay, & > .overlay--dark {
|
||||
@extend .text--dark;
|
||||
background-color: rgba(#000, .4);
|
||||
}
|
||||
& > .overlay--light {
|
||||
@extend .text--light;
|
||||
background: rgba(#fff, .4);
|
||||
}
|
||||
}
|
||||
|
||||
.card--clickable {
|
||||
cursor: pointer;
|
||||
@include hover() {
|
||||
@include box-shadow(2);
|
||||
.card__image {
|
||||
& > img {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include transition(map-get($clickable, transition));
|
||||
}
|
||||
|
||||
.card--flat {
|
||||
@include box-shadow(0);
|
||||
.card__image {
|
||||
& > img {
|
||||
border-radius: map-get($base, border-radius);
|
||||
}
|
||||
}
|
||||
.card__content {
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.gallery {
|
||||
height: 100%;
|
||||
@include flexbox();
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
.gallery__swiper {
|
||||
@include flex(1);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-item__main {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
.hero {
|
||||
background-position: 50% 50%;
|
||||
@include flexbox();
|
||||
@include flex-direction(column);
|
||||
@include justify-content(center);
|
||||
h1 { font-size: map-get($base, font-size-h1-xl); }
|
||||
h2 { font-size: map-get($base, font-size-h2-xl); }
|
||||
h3 { font-size: map-get($base, font-size-h3-xl); }
|
||||
h4 { font-size: map-get($base, font-size-h4-xl); }
|
||||
h5 { font-size: map-get($base, font-size-h5-xl); }
|
||||
h6 { font-size: map-get($base, font-size-h6-xl); }
|
||||
p { font-size: map-get($base, font-size-xl); }
|
||||
@include media-breakpoint-down(lg) {
|
||||
h1 { font-size: map-get($base, font-size-h1-lg); }
|
||||
h2 { font-size: map-get($base, font-size-h2-lg); }
|
||||
h3 { font-size: map-get($base, font-size-h3-lg); }
|
||||
h4 { font-size: map-get($base, font-size-h4-lg); }
|
||||
h5 { font-size: map-get($base, font-size-h5-lg); }
|
||||
h6 { font-size: map-get($base, font-size-h6-lg); }
|
||||
p { font-size: map-get($base, font-size-lg); }
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
h1 { font-size: map-get($base, font-size-h1-sm); }
|
||||
h2 { font-size: map-get($base, font-size-h2-sm); }
|
||||
h3 { font-size: map-get($base, font-size-h3-sm); }
|
||||
h4 { font-size: map-get($base, font-size-h4-sm); }
|
||||
h5 { font-size: map-get($base, font-size-h5-sm); }
|
||||
h6 { font-size: map-get($base, font-size-h6-sm); }
|
||||
p { font-size: map-get($base, font-size); }
|
||||
}
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
|
||||
.hero--center {
|
||||
text-align: center;
|
||||
.menu {
|
||||
@extend .menu--center;
|
||||
}
|
||||
}
|
||||
|
||||
.hero--light {
|
||||
@extend .text--light;
|
||||
}
|
||||
|
||||
.hero--dark {
|
||||
@extend .text--dark;
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
margin: map-get($spacers, 5);
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin: map-get($spacers, 5) map-get($spacers, 4);
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: map-get($spacers, 4) map-get($spacers, 3);
|
||||
}
|
||||
}
|
||||
|
||||
.heros {
|
||||
& > .hero {
|
||||
margin: map-get($spacers, 5);
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin: map-get($spacers, 3);
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: map-get($spacers, 2) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.image {
|
||||
max-width: 100%;
|
||||
@extend .image--md;
|
||||
}
|
||||
.image--md {
|
||||
width: map-get($image, width);
|
||||
}
|
||||
.image--xl {
|
||||
width: map-get($image, width-xl);
|
||||
}
|
||||
.image--lg {
|
||||
width: map-get($image, width-lg);
|
||||
}
|
||||
.image--sm {
|
||||
width: map-get($image, width-sm);
|
||||
}
|
||||
.image--xs {
|
||||
width: map-get($image, width-xs);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
.item {
|
||||
@include flexbox();
|
||||
@include media-breakpoint-down(md) {
|
||||
@include flex-direction(column);
|
||||
}
|
||||
}
|
||||
|
||||
.item__image {
|
||||
margin-right: map-get($spacers, 3);
|
||||
& + .item__content {
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item__content {
|
||||
@include flex(1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
a > .item__header, a.item__header, .item__header > a {
|
||||
@include link-colors($text-color-d, $main-color-1);
|
||||
}
|
||||
|
||||
.item__meta {
|
||||
color: $text-color-l;
|
||||
}
|
||||
|
||||
.item__description {
|
||||
&, .article__content {
|
||||
font-size: map-get($base, font-size-sm);
|
||||
line-height: map-get($base, line-height);
|
||||
@include block-elements() {
|
||||
margin-top: map-get($spacers, 2);
|
||||
margin-bottom: map-get($spacers, 2);
|
||||
}
|
||||
@include heading-elements() {
|
||||
margin-top: map-get($spacers, 3);
|
||||
}
|
||||
h1, h2, h3 {
|
||||
color: $text-color;
|
||||
}
|
||||
h1, h2 {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
h1 {
|
||||
font-size: map-get($base, font-size-h1-xs);
|
||||
}
|
||||
h2 {
|
||||
font-size: map-get($base, font-size-h2-xs);
|
||||
}
|
||||
h3 {
|
||||
font-size: map-get($base, font-size-h3-xs);
|
||||
}
|
||||
h4 {
|
||||
font-size: map-get($base, font-size-h4-xs);
|
||||
}
|
||||
h5 {
|
||||
font-size: map-get($base, font-size-h5-xs);
|
||||
}
|
||||
h6 {
|
||||
font-size: map-get($base, font-size-h6-xs);
|
||||
}
|
||||
img {
|
||||
max-height: 32rem;
|
||||
@include media-breakpoint-down(md) {
|
||||
max-height: 14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
& > .item {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: map-get($spacers, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items--divided {
|
||||
& > .item {
|
||||
&:not(:first-child) {
|
||||
padding-top: map-get($spacers, 4);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
padding-bottom: map-get($spacers, 4);
|
||||
@include split-line(bottom);
|
||||
}
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
@mixin menu-direction($direction: default) {
|
||||
@if $direction == default {
|
||||
$direction: "horizontal";
|
||||
}
|
||||
@if $direction == "vertical" {
|
||||
@include flex-direction(column);
|
||||
} @else {
|
||||
@include flex-direction(row);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin menu($horizontal-spacer: default, $horizontal-item-vertical-spacer: default, $wrap: default) {
|
||||
@if $horizontal-spacer == default {
|
||||
$horizontal-spacer: map-get($menu, horizontal-spacer);
|
||||
}
|
||||
@if $horizontal-item-vertical-spacer == default {
|
||||
$horizontal-item-vertical-spacer: map-get($menu, horizontal-item-vertical-spacer);
|
||||
}
|
||||
@if $wrap == default {
|
||||
$wrap: wrap;
|
||||
}
|
||||
@include flexbox();
|
||||
@include flex-wrap($wrap);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
& > li {
|
||||
@if $horizontal-item-vertical-spacer {
|
||||
margin-top: map-get($spacers, $horizontal-item-vertical-spacer);
|
||||
margin-bottom: map-get($spacers, $horizontal-item-vertical-spacer);
|
||||
}
|
||||
margin-right: map-get($spacers, $horizontal-spacer);
|
||||
list-style-type: none;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
@include menu();
|
||||
@include menu-direction();
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
.menu--vertical {
|
||||
@include menu-direction("vertical");
|
||||
@include align-items(normal);
|
||||
& > li {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu--inline {
|
||||
@include inline-flex();
|
||||
}
|
||||
|
||||
.menu--center {
|
||||
@include justify-content(center);
|
||||
}
|
||||
|
||||
.menu--nowrap {
|
||||
@include flex-wrap(nowrap);
|
||||
}
|
||||
|
||||
.menu--grow {
|
||||
@include flex-grow(1);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
@mixin modal($z-index: default, $color: default, $background-color: default) {
|
||||
@if $z-index == default {
|
||||
$z-index: map-get($z-indexes, modal);
|
||||
}
|
||||
@if $color == default {
|
||||
$color: $text-color-theme-dark;
|
||||
}
|
||||
@if $background-color == default {
|
||||
$background-color: $mask-color;
|
||||
}
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $z-index;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $color;
|
||||
touch-action: none;
|
||||
background-color: $background-color;
|
||||
opacity: 0;
|
||||
@include transform(translate(100%, 0));
|
||||
@include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function),
|
||||
transform 0s map-get($animation, duration) map-get($animation, timing-function)});
|
||||
}
|
||||
@mixin modal--show() {
|
||||
opacity: 1;
|
||||
@include transform(translate(0, 0));
|
||||
@include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function)});
|
||||
}
|
||||
|
||||
.modal {
|
||||
@include modal();
|
||||
}
|
||||
.modal--show {
|
||||
@include modal--show();
|
||||
}
|
||||
.modal--overflow {
|
||||
@include overflow(auto);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.swiper {
|
||||
position: relative;
|
||||
@include overflow(hidden);
|
||||
}
|
||||
|
||||
.swiper__wrapper, .swiper__slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper__wrapper {
|
||||
@include flexbox();
|
||||
}
|
||||
|
||||
.swiper__wrapper--animation {
|
||||
@include transition(transform map-get($animation, duration) map-get($animation, timing-function));
|
||||
}
|
||||
|
||||
.swiper__slide {
|
||||
@include flex-shrink(0);
|
||||
& > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper__button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@extend .button, .button--circle;
|
||||
@include transform(translate(0, -50%));
|
||||
@include clickable($text-color-d, rgba($main-color-3, .4));
|
||||
}
|
||||
|
||||
.swiper--light .swiper__button {
|
||||
@include clickable($text-color-theme-light, rgba($main-color-theme-dark, .4));
|
||||
}
|
||||
|
||||
.swiper--dark .swiper__button {
|
||||
@include clickable($text-color-theme-dark, rgba($main-color-theme-light, .4));
|
||||
}
|
||||
|
||||
.swiper__button--prev {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.swiper__button--next {
|
||||
right: 10px;
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
ul.toc {
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $text-color;
|
||||
list-style-type: none;
|
||||
& > li {
|
||||
margin: map-get($spacers, 1) / 2 0;
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: map-get($spacers, 1) / 4 0;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
.toc-h1,
|
||||
.toc-h2,
|
||||
.toc-h3,
|
||||
.toc-h4,
|
||||
.toc-h5,
|
||||
.toc-h6 {
|
||||
a {
|
||||
@include link-colors($text-color, $main-color-1);
|
||||
}
|
||||
&.active {
|
||||
a {
|
||||
@include link-colors($main-color-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toc-h2,
|
||||
.toc-h3,
|
||||
.toc-h4,
|
||||
.toc-h5,
|
||||
.toc-h6 {
|
||||
&, a {
|
||||
font-size: map-get($base, font-size-xs);
|
||||
font-weight: map-get($base, font-weight);
|
||||
line-height: map-get($base, line-height-xs);
|
||||
}
|
||||
}
|
||||
.toc-h1 {
|
||||
@include split-line(bottom);
|
||||
padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0;
|
||||
margin-bottom: map-get($spacers, 2);
|
||||
color: $text-color-d;
|
||||
&, a {
|
||||
font-size: map-get($base, font-size-sm);
|
||||
font-weight: map-get($base, font-weight-bold);
|
||||
line-height: map-get($base, line-height-sm);
|
||||
}
|
||||
a {
|
||||
@include link-colors($text-color-d, $main-color-1);
|
||||
}
|
||||
}
|
||||
.toc-h2 {
|
||||
&, a {
|
||||
font-weight: map-get($base, font-weight-bold);
|
||||
}
|
||||
}
|
||||
.toc-h3 {
|
||||
margin-left: map-get($spacers, 3);
|
||||
}
|
||||
.toc-h4 {
|
||||
margin-left: map-get($spacers, 3) * 2;
|
||||
}
|
||||
.toc-h5,
|
||||
.toc-h6 {
|
||||
margin-left: map-get($spacers, 3) * 3;
|
||||
}
|
||||
.toc-h6 {
|
||||
color: $text-color-l;
|
||||
a {
|
||||
@include link-colors($text-color-l, $main-color-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.toc--ellipsis {
|
||||
& > li {
|
||||
@include overflow(hidden);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
ul.toc--navigator {
|
||||
& > li {
|
||||
a {
|
||||
padding-left: map-get($spacers, 2);
|
||||
margin: map-get($spacers, 1) 0;
|
||||
}
|
||||
&.active {
|
||||
a {
|
||||
margin-left: -4px;
|
||||
@include split-line(left, 4px, $main-color-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.toc-h2,
|
||||
.toc-h3,
|
||||
.toc-h4 {
|
||||
color: $text-color-l;
|
||||
a {
|
||||
@include link-colors($text-color-l);
|
||||
}
|
||||
}
|
||||
.toc-h1 {
|
||||
&, a {
|
||||
font-size: map-get($base, font-size);
|
||||
line-height: map-get($base, line-height);
|
||||
}
|
||||
color: $text-color;
|
||||
a {
|
||||
@include link-colors($text-color-d);
|
||||
}
|
||||
}
|
||||
.toc-h2 {
|
||||
&, a {
|
||||
font-size: map-get($base, font-size-sm);
|
||||
font-weight: map-get($base, font-weight-bold);
|
||||
line-height: map-get($base, line-height-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user