refactor: replace deprecated sass global imports (#965)
This commit is contained in:
Robert Kaussow
GitHub
parent
540fa3585e
commit
939ec0f269
16 changed files with 313 additions and 291 deletions
1
layouts/shortcodes/gist.html
Normal file
1
layouts/shortcodes/gist.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<script src="https://gist.github.com/{{ index .Params 0 }}/{{ index .Params 1 }}.js{{if len .Params | eq 3 }}?file={{ index .Params 2 }}{{end}}"></script>
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
@use "sass:color";
|
||||
@use "defaults";
|
||||
|
||||
.admonitionblock {
|
||||
@each $name, $color in $hint-colors {
|
||||
@each $name, $color in defaults.$hint-colors {
|
||||
&.#{$name} {
|
||||
border-left-color: $color;
|
||||
background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
|
||||
color: $body-font-color;
|
||||
color: defaults.$body-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
& {
|
||||
margin: $padding-16 0;
|
||||
margin: defaults.$padding-16 0;
|
||||
padding: 0;
|
||||
|
||||
border-left: $border-4 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
border-left: defaults.$border-4 solid var(--accent-color);
|
||||
border-radius: defaults.$border-radius;
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -25,10 +28,10 @@
|
|||
|
||||
td {
|
||||
display: block;
|
||||
padding: $padding-4 $padding-16 !important;
|
||||
padding: defaults.$padding-4 defaults.$padding-16 !important;
|
||||
|
||||
&:first-child {
|
||||
background-color: color.scale($gray-600, $alpha: -95%);
|
||||
background-color: color.scale(defaults.$gray-600, $alpha: -95%);
|
||||
font-weight: bold;
|
||||
|
||||
&.icon {
|
||||
|
|
@ -40,18 +43,18 @@
|
|||
i.fa::after {
|
||||
content: attr(title);
|
||||
font-style: normal;
|
||||
padding-left: $padding-24;
|
||||
padding-left: defaults.$padding-24;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
color: $black;
|
||||
color: defaults.$black;
|
||||
background-size: auto 90%;
|
||||
background-repeat: no-repeat;
|
||||
filter: invert(30%);
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
@each $name, $icon in $hint-icons {
|
||||
@each $name, $icon in defaults.$hint-icons {
|
||||
i.fa.icon-#{$name} {
|
||||
background-image: url(img/geekdoc-stack.svg##{$icon});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,47 @@
|
|||
@use "sass:meta";
|
||||
@use "sass:map";
|
||||
@use "color_mode";
|
||||
@use "defaults";
|
||||
|
||||
:root {
|
||||
--code-max-height: none;
|
||||
|
||||
--header-font-family: #{meta.inspect($header-font-family)};
|
||||
--body-font-family: #{meta.inspect($body-font-family)};
|
||||
--code-font-family: #{meta.inspect($code-font-family)};
|
||||
--header-font-family: #{meta.inspect(defaults.$header-font-family)};
|
||||
--body-font-family: #{meta.inspect(defaults.$body-font-family)};
|
||||
--code-font-family: #{meta.inspect(defaults.$code-font-family)};
|
||||
}
|
||||
|
||||
:root,
|
||||
:root[color-theme="light"] {
|
||||
@include color_theme_light;
|
||||
@include code_theme_light;
|
||||
@include color_mode.color_theme_light;
|
||||
@include color_mode.code_theme_light;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
@include color_theme_light;
|
||||
@include code_theme_light;
|
||||
@include color_mode.color_theme_light;
|
||||
@include color_mode.code_theme_light;
|
||||
}
|
||||
}
|
||||
|
||||
:root[color-theme="dark"] {
|
||||
@include color_theme_dark;
|
||||
@include code_theme_dark;
|
||||
@include color_mode.color_theme_dark;
|
||||
@include color_mode.code_theme_dark;
|
||||
}
|
||||
|
||||
:root[code-theme="dark"] {
|
||||
@include code_theme_dark;
|
||||
@include color_mode.code_theme_dark;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
@include color_theme_dark;
|
||||
@include code_theme_dark;
|
||||
@include color_mode.color_theme_dark;
|
||||
@include color_mode.code_theme_dark;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: $font-size-base;
|
||||
font-size: defaults.$font-size-base;
|
||||
letter-spacing: 0.33px;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
|
|
@ -87,7 +92,7 @@ html {
|
|||
|
||||
html,
|
||||
body {
|
||||
min-width: $body-min-width;
|
||||
min-width: defaults.$body-min-width;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +113,7 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: $body-font-weight;
|
||||
font-weight: defaults.$body-font-weight;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -116,7 +121,7 @@ h6 {
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: $font-size-16 !important;
|
||||
font-size: defaults.$font-size-16 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -161,20 +166,20 @@ img {
|
|||
color: var(--body-font-color);
|
||||
background: var(--body-background);
|
||||
|
||||
font-weight: $body-font-weight;
|
||||
font-weight: defaults.$body-font-weight;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: $container-max-width;
|
||||
max-width: defaults.$container-max-width;
|
||||
margin: 0 auto;
|
||||
padding: $padding-20;
|
||||
padding: defaults.$padding-20;
|
||||
}
|
||||
|
||||
svg.gdoc-icon {
|
||||
display: inline-block;
|
||||
width: $font-size-20;
|
||||
height: $font-size-20;
|
||||
width: defaults.$font-size-20;
|
||||
height: defaults.$font-size-20;
|
||||
vertical-align: middle;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
|
|
@ -197,19 +202,19 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
svg.gdoc-icon {
|
||||
width: $font-size-32;
|
||||
height: $font-size-32;
|
||||
width: defaults.$font-size-32;
|
||||
height: defaults.$font-size-32;
|
||||
}
|
||||
}
|
||||
|
||||
.gdoc-brand {
|
||||
font-size: $font-size-32;
|
||||
line-height: $font-size-32;
|
||||
font-size: defaults.$font-size-32;
|
||||
line-height: defaults.$font-size-32;
|
||||
|
||||
&__img {
|
||||
margin-right: $padding-16;
|
||||
width: $padding-32;
|
||||
height: $padding-32;
|
||||
margin-right: defaults.$padding-16;
|
||||
width: defaults.$padding-32;
|
||||
height: defaults.$padding-32;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -218,7 +223,7 @@ svg.gdoc-icon {
|
|||
display: flex;
|
||||
|
||||
> span {
|
||||
margin-left: $padding-8;
|
||||
margin-left: defaults.$padding-8;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -233,18 +238,18 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
.gdoc-nav {
|
||||
flex: 0 0 $menu-width;
|
||||
flex: 0 0 defaults.$menu-width;
|
||||
|
||||
nav {
|
||||
width: $menu-width;
|
||||
padding: $padding-16 $padding-32 $padding-16 0;
|
||||
width: defaults.$menu-width;
|
||||
padding: defaults.$padding-16 defaults.$padding-32 defaults.$padding-16 0;
|
||||
|
||||
> ul > li > * {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: $padding-32;
|
||||
margin-top: defaults.$padding-32;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -267,22 +272,22 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
&__list {
|
||||
padding-left: $padding-16;
|
||||
padding-left: defaults.$padding-16;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
|
||||
ul {
|
||||
padding-left: $padding-16;
|
||||
padding-left: defaults.$padding-16;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: $padding-12 0;
|
||||
margin: defaults.$padding-12 0;
|
||||
}
|
||||
|
||||
svg.gdoc-icon {
|
||||
margin-right: $padding-4;
|
||||
margin-right: defaults.$padding-4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -293,8 +298,8 @@ svg.gdoc-icon {
|
|||
cursor: pointer;
|
||||
|
||||
svg.gdoc-icon.toggle {
|
||||
width: $font-size-16;
|
||||
height: $font-size-16;
|
||||
width: defaults.$font-size-16;
|
||||
height: defaults.$font-size-16;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -347,22 +352,22 @@ svg.gdoc-icon {
|
|||
.gdoc-search__list,
|
||||
.gdoc-language__list {
|
||||
background: var(--body-background);
|
||||
border-radius: $border-radius;
|
||||
border-radius: defaults.$border-radius;
|
||||
box-shadow:
|
||||
0 1px 3px 0 var(--accent-color-dark),
|
||||
0 1px 2px 0 var(--accent-color);
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: $padding-8 $padding-4 !important;
|
||||
padding: defaults.$padding-8 defaults.$padding-4 !important;
|
||||
list-style: none;
|
||||
top: calc(100% + #{$padding-8});
|
||||
top: calc(100% + #{defaults.$padding-8});
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.gdoc-page {
|
||||
min-width: calc($body-min-width - $padding-32);
|
||||
min-width: calc(defaults.$body-min-width - defaults.$padding-32);
|
||||
flex-grow: 1;
|
||||
padding: $padding-16 0;
|
||||
padding: defaults.$padding-16 0;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -375,7 +380,7 @@ svg.gdoc-icon {
|
|||
|
||||
&__header,
|
||||
&__footer {
|
||||
margin-bottom: $padding-24;
|
||||
margin-bottom: defaults.$padding-24;
|
||||
|
||||
svg.gdoc-icon {
|
||||
color: var(--control-icons);
|
||||
|
|
@ -389,8 +394,8 @@ svg.gdoc-icon {
|
|||
|
||||
&__header {
|
||||
background: var(--accent-color-lite);
|
||||
padding: $padding-8 $padding-16;
|
||||
border-radius: $border-radius;
|
||||
padding: defaults.$padding-8 defaults.$padding-16;
|
||||
border-radius: defaults.$border-radius;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
|
|
@ -425,7 +430,7 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
&__footer {
|
||||
margin-top: $padding-32;
|
||||
margin-top: defaults.$padding-32;
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
|
|
@ -435,8 +440,8 @@ svg.gdoc-icon {
|
|||
|
||||
.gdoc-post {
|
||||
word-wrap: break-word;
|
||||
border-top: 1px dashed $gray-600;
|
||||
padding: $padding-32 0;
|
||||
border-top: 1px dashed defaults.$gray-600;
|
||||
padding: defaults.$padding-32 0;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: 0;
|
||||
|
|
@ -469,7 +474,7 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
&__readmore {
|
||||
margin: $padding-32 0;
|
||||
margin: defaults.$padding-32 0;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
|
|
@ -485,22 +490,22 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
> span {
|
||||
margin: $padding-4 0;
|
||||
margin: defaults.$padding-4 0;
|
||||
&:not(:last-child) {
|
||||
margin-right: $padding-8;
|
||||
margin-right: defaults.$padding-8;
|
||||
}
|
||||
}
|
||||
|
||||
svg.gdoc-icon {
|
||||
font-size: $font-size-20;
|
||||
font-size: defaults.$font-size-20;
|
||||
}
|
||||
|
||||
.gdoc-button {
|
||||
margin: 0 $padding-2 0 0;
|
||||
margin: 0 defaults.$padding-2 0 0;
|
||||
}
|
||||
|
||||
&--head {
|
||||
margin-bottom: $padding-32;
|
||||
margin-bottom: defaults.$padding-32;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -515,19 +520,19 @@ svg.gdoc-icon {
|
|||
&__codecopy {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: $padding-8;
|
||||
right: $padding-8;
|
||||
top: defaults.$padding-8;
|
||||
right: defaults.$padding-8;
|
||||
|
||||
border: $border-2 solid var(--code-copy-border-color);
|
||||
border-radius: $border-radius;
|
||||
border: defaults.$border-2 solid var(--code-copy-border-color);
|
||||
border-radius: defaults.$border-radius;
|
||||
background: var(--code-copy-background);
|
||||
width: $padding-32;
|
||||
height: $padding-32;
|
||||
width: defaults.$padding-32;
|
||||
height: defaults.$padding-32;
|
||||
|
||||
svg.gdoc-icon {
|
||||
top: 0;
|
||||
width: $font-size-20;
|
||||
height: $font-size-20;
|
||||
width: defaults.$font-size-20;
|
||||
height: defaults.$font-size-20;
|
||||
color: var(--code-copy-font-color);
|
||||
}
|
||||
|
||||
|
|
@ -562,10 +567,10 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
&__item {
|
||||
line-height: $padding-32;
|
||||
line-height: defaults.$padding-32;
|
||||
|
||||
&--row {
|
||||
margin-right: $padding-16;
|
||||
margin-right: defaults.$padding-16;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -584,10 +589,10 @@ svg.gdoc-icon {
|
|||
|
||||
svg.gdoc-icon {
|
||||
position: absolute;
|
||||
left: $padding-8;
|
||||
left: defaults.$padding-8;
|
||||
color: var(--control-icons);
|
||||
width: $font-size-20;
|
||||
height: $font-size-20;
|
||||
width: defaults.$font-size-20;
|
||||
height: defaults.$font-size-20;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -598,14 +603,14 @@ svg.gdoc-icon {
|
|||
|
||||
&__input {
|
||||
width: 100%;
|
||||
padding: $padding-8;
|
||||
padding-left: $padding-32;
|
||||
padding: defaults.$padding-8;
|
||||
padding-left: defaults.$padding-32;
|
||||
|
||||
transition:
|
||||
border-color 0.15s ease-in-out,
|
||||
box-shadow 0.15s ease-in-out;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $border-radius;
|
||||
border-radius: defaults.$border-radius;
|
||||
|
||||
background: var(--accent-color-lite);
|
||||
color: var(--body-font-color);
|
||||
|
|
@ -631,26 +636,26 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
> li + li {
|
||||
margin-top: $padding-4;
|
||||
margin-top: defaults.$padding-4;
|
||||
}
|
||||
|
||||
svg.gdoc-icon {
|
||||
margin-right: $padding-4;
|
||||
margin-right: defaults.$padding-4;
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $padding-4 !important;
|
||||
padding: defaults.$padding-4 !important;
|
||||
}
|
||||
|
||||
&__entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--body-font-color);
|
||||
padding: $padding-4 !important;
|
||||
border-radius: $border-radius;
|
||||
padding: defaults.$padding-4 !important;
|
||||
border-radius: defaults.$border-radius;
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
|
|
@ -668,7 +673,7 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
&--description {
|
||||
font-size: $font-size-14;
|
||||
font-size: defaults.$font-size-14;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
|
@ -707,7 +712,7 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
.gdoc-paging {
|
||||
padding: $padding-16 0;
|
||||
padding: defaults.$padding-16 0;
|
||||
|
||||
&__item {
|
||||
flex: 1 1 0;
|
||||
|
|
@ -719,7 +724,7 @@ svg.gdoc-icon {
|
|||
a:hover,
|
||||
a:visited:hover {
|
||||
background: var(--link-color);
|
||||
color: $gray-100;
|
||||
color: defaults.$gray-100;
|
||||
}
|
||||
|
||||
&--next {
|
||||
|
|
@ -733,13 +738,13 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
.gdoc-error {
|
||||
padding: $padding-96 $padding-16;
|
||||
padding: defaults.$padding-96 defaults.$padding-16;
|
||||
margin: 0 auto;
|
||||
max-width: 45em;
|
||||
|
||||
svg.gdoc-icon {
|
||||
width: $font-size-128;
|
||||
height: $font-size-128;
|
||||
width: defaults.$font-size-128;
|
||||
height: defaults.$font-size-128;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
|
||||
|
|
@ -750,15 +755,15 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
&__message {
|
||||
padding-left: $padding-64;
|
||||
padding-left: defaults.$padding-64;
|
||||
}
|
||||
|
||||
&__line {
|
||||
padding: $padding-8 0;
|
||||
padding: defaults.$padding-8 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $font-size-64;
|
||||
font-size: defaults.$font-size-64;
|
||||
}
|
||||
|
||||
&__code {
|
||||
|
|
@ -767,10 +772,10 @@ svg.gdoc-icon {
|
|||
}
|
||||
|
||||
.gdoc-toc {
|
||||
margin: $padding-16 0;
|
||||
margin: defaults.$padding-16 0;
|
||||
|
||||
li {
|
||||
margin: $padding-4 0;
|
||||
margin: defaults.$padding-4 0;
|
||||
}
|
||||
|
||||
// Classes to hide nested levels of ToC/Menu
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "defaults";
|
||||
|
||||
@mixin chroma_base {
|
||||
.chroma {
|
||||
color: var(--code-font-color);
|
||||
|
|
@ -18,8 +20,8 @@
|
|||
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border: $border-1 solid var(--code-accent-color);
|
||||
border-radius: $border-radius;
|
||||
border: defaults.$border-1 solid var(--code-accent-color);
|
||||
border-radius: defaults.$border-radius;
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -37,7 +39,7 @@
|
|||
.chroma .lntable td:first-child {
|
||||
code {
|
||||
background-color: var(--code-accent-color-lite);
|
||||
border-right: $border-1 solid var(--code-accent-color);
|
||||
border-right: defaults.$border-1 solid var(--code-accent-color);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-radius: 0;
|
||||
|
|
@ -45,6 +47,6 @@
|
|||
}
|
||||
.chroma .lntable td:nth-child(2) {
|
||||
width: 100%;
|
||||
margin-left: $padding-32;
|
||||
margin-left: defaults.$padding-32;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
@use "chroma_base";
|
||||
|
||||
@mixin chroma_dark {
|
||||
/* Theme: Dracula */
|
||||
/* Background */
|
||||
@include chroma_base;
|
||||
@include chroma_base.chroma_base;
|
||||
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
@use "chroma_base";
|
||||
|
||||
@mixin chroma_github {
|
||||
/* Theme: GitHub */
|
||||
/* Background */
|
||||
@include chroma_base;
|
||||
@include chroma_base.chroma_base;
|
||||
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
|
|
|
|||
|
|
@ -1,31 +1,37 @@
|
|||
@use "sass:color";
|
||||
@use "sass:map";
|
||||
@use "chroma_dark";
|
||||
@use "chroma_light";
|
||||
@use "defaults";
|
||||
|
||||
@mixin color_theme_light {
|
||||
--header-background: #{$main-color};
|
||||
--header-font-color: #{$white};
|
||||
--header-background: #{defaults.$main-color};
|
||||
--header-font-color: #{defaults.$white};
|
||||
|
||||
--body-background: #{$body-background};
|
||||
--body-font-color: #{$body-font-color};
|
||||
--body-background: #{defaults.$body-background};
|
||||
--body-font-color: #{defaults.$body-font-color};
|
||||
|
||||
--mark-color: #{$mark-color};
|
||||
--mark-color: #{defaults.$mark-color};
|
||||
|
||||
--button-background: #{color.scale($main-color, $lightness: 15%)};
|
||||
--button-border-color: #{$main-color};
|
||||
--button-background: #{color.scale(defaults.$main-color, $lightness: 15%)};
|
||||
--button-border-color: #{defaults.$main-color};
|
||||
|
||||
--link-color: #{$link-color};
|
||||
--link-color-visited: #{$link-color-visited};
|
||||
--link-color: #{defaults.$link-color};
|
||||
--link-color-visited: #{defaults.$link-color-visited};
|
||||
|
||||
--hint-link-color: #{$link-color};
|
||||
--hint-link-color-visited: #{$link-color-visited};
|
||||
--hint-link-color: #{defaults.$link-color};
|
||||
--hint-link-color-visited: #{defaults.$link-color-visited};
|
||||
|
||||
--accent-color-dark: #{$gray-400};
|
||||
--accent-color: #{$gray-200};
|
||||
--accent-color-lite: #{$gray-100};
|
||||
--accent-color-dark: #{defaults.$gray-400};
|
||||
--accent-color: #{defaults.$gray-200};
|
||||
--accent-color-lite: #{defaults.$gray-100};
|
||||
|
||||
--control-icons: #{color.scale($body-font-color, $lightness: 40%)};
|
||||
--control-icons: #{color.scale(defaults.$body-font-color, $lightness: 40%)};
|
||||
|
||||
--footer-background: #{$second-color};
|
||||
--footer-font-color: #{$white};
|
||||
--footer-link-color: #{$link-color-footer};
|
||||
--footer-link-color-visited: #{$link-color-footer};
|
||||
--footer-background: #{defaults.$second-color};
|
||||
--footer-font-color: #{defaults.$white};
|
||||
--footer-link-color: #{defaults.$link-color-footer};
|
||||
--footer-link-color-visited: #{defaults.$link-color-footer};
|
||||
|
||||
.dark-mode-dim .gdoc-markdown {
|
||||
img {
|
||||
|
|
@ -42,39 +48,39 @@
|
|||
|
||||
.gdoc-hint__title,
|
||||
.admonitionblock table td:first-child {
|
||||
background-color: color.scale($gray-600, $alpha: -95%);
|
||||
background-color: color.scale(defaults.$gray-600, $alpha: -95%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin color_theme_dark {
|
||||
--header-background: #{$main-color};
|
||||
--header-font-color: #{$white};
|
||||
--header-background: #{defaults.$main-color};
|
||||
--header-font-color: #{defaults.$white};
|
||||
|
||||
--body-background: #{$body-background-dark};
|
||||
--body-font-color: #{color.scale($body-background-dark, $lightness: 70%)};
|
||||
--body-background: #{defaults.$body-background-dark};
|
||||
--body-font-color: #{color.scale(defaults.$body-background-dark, $lightness: 70%)};
|
||||
|
||||
--mark-color: #{$mark-color};
|
||||
--mark-color: #{defaults.$mark-color};
|
||||
|
||||
--button-background: #{color.scale($main-color, $lightness: 15%)};
|
||||
--button-border-color: #{$main-color};
|
||||
--button-background: #{color.scale(defaults.$main-color, $lightness: 15%)};
|
||||
--button-border-color: #{defaults.$main-color};
|
||||
|
||||
--link-color: #{$link-color-dark};
|
||||
--link-color-visited: #{$link-color-visited-dark};
|
||||
--link-color: #{defaults.$link-color-dark};
|
||||
--link-color-visited: #{defaults.$link-color-visited-dark};
|
||||
|
||||
--hint-link-color: #{$link-color};
|
||||
--hint-link-color-visited: #{$link-color-visited};
|
||||
--hint-link-color: #{defaults.$link-color};
|
||||
--hint-link-color-visited: #{defaults.$link-color-visited};
|
||||
|
||||
--accent-color-dark: #{color.scale($body-background-dark, $lightness: -60%)};
|
||||
--accent-color: #{color.scale($body-background-dark, $lightness: -30%)};
|
||||
--accent-color-lite: #{color.scale($body-background-dark, $lightness: -15%)};
|
||||
--accent-color-dark: #{color.scale(defaults.$body-background-dark, $lightness: -60%)};
|
||||
--accent-color: #{color.scale(defaults.$body-background-dark, $lightness: -30%)};
|
||||
--accent-color-lite: #{color.scale(defaults.$body-background-dark, $lightness: -15%)};
|
||||
|
||||
--control-icons: #{color.scale($body-font-color, $lightness: 40%)};
|
||||
--control-icons: #{color.scale(defaults.$body-font-color, $lightness: 40%)};
|
||||
|
||||
--footer-background: #{$second-color};
|
||||
--footer-font-color: #{$white};
|
||||
--footer-link-color: #{$link-color-footer};
|
||||
--footer-link-color-visited: #{$link-color-footer};
|
||||
--footer-background: #{defaults.$second-color};
|
||||
--footer-font-color: #{defaults.$white};
|
||||
--footer-link-color: #{defaults.$link-color-footer};
|
||||
--footer-link-color-visited: #{defaults.$link-color-footer};
|
||||
|
||||
.dark-mode-dim {
|
||||
.gdoc-markdown img {
|
||||
|
|
@ -102,39 +108,39 @@
|
|||
|
||||
.gdoc-hint__title,
|
||||
.admonitionblock table td:first-child {
|
||||
background-color: color.scale($gray-600, $alpha: -85%);
|
||||
background-color: color.scale(defaults.$gray-600, $alpha: -85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin code_theme_dark {
|
||||
@include chroma_dark;
|
||||
@include chroma_dark.chroma_dark;
|
||||
|
||||
& {
|
||||
--code-background: #{$code-background-dark};
|
||||
--code-accent-color: #{color.scale($code-background-dark, $lightness: -30%)};
|
||||
--code-accent-color-lite: #{color.scale($code-background-dark, $lightness: -15%)};
|
||||
--code-font-color: #{$code-font-color-dark};
|
||||
--code-background: #{defaults.$code-background-dark};
|
||||
--code-accent-color: #{color.scale(defaults.$code-background-dark, $lightness: -30%)};
|
||||
--code-accent-color-lite: #{color.scale(defaults.$code-background-dark, $lightness: -15%)};
|
||||
--code-font-color: #{defaults.$code-font-color-dark};
|
||||
|
||||
--code-copy-background: #{$code-background-dark};
|
||||
--code-copy-font-color: #{color.scale($code-font-color-dark, $lightness: -15%)};
|
||||
--code-copy-border-color: #{color.scale($code-font-color-dark, $lightness: -20%)};
|
||||
--code-copy-success-color: #{color.scale(map.get($hint-colors, "ok"), $alpha: -55%)};
|
||||
--code-copy-background: #{defaults.$code-background-dark};
|
||||
--code-copy-font-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -15%)};
|
||||
--code-copy-border-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -20%)};
|
||||
--code-copy-success-color: #{color.scale(map.get(defaults.$hint-colors, "ok"), $alpha: -55%)};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin code_theme_light {
|
||||
@include chroma_github;
|
||||
@include chroma_light.chroma_github;
|
||||
|
||||
& {
|
||||
--code-background: #{$code-background};
|
||||
--code-accent-color: #{color.scale($code-background, $lightness: -45%)};
|
||||
--code-accent-color-lite: #{color.scale($code-background, $lightness: -15%)};
|
||||
--code-font-color: #{$code-font-color};
|
||||
--code-background: #{defaults.$code-background};
|
||||
--code-accent-color: #{color.scale(defaults.$code-background, $lightness: -45%)};
|
||||
--code-accent-color-lite: #{color.scale(defaults.$code-background, $lightness: -15%)};
|
||||
--code-font-color: #{defaults.$code-font-color};
|
||||
|
||||
--code-copy-background: #{$code-background};
|
||||
--code-copy-font-color: #{color.scale($code-font-color, $lightness: 20%)};
|
||||
--code-copy-border-color: #{color.scale($code-font-color, $lightness: 40%)};
|
||||
--code-copy-success-color: #{map.get($hint-colors, "ok")};
|
||||
--code-copy-background: #{defaults.$code-background};
|
||||
--code-copy-font-color: #{color.scale(defaults.$code-font-color, $lightness: 20%)};
|
||||
--code-copy-border-color: #{color.scale(defaults.$code-font-color, $lightness: 40%)};
|
||||
--code-copy-success-color: #{map.get(defaults.$hint-colors, "ok")};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "sass:color";
|
||||
|
||||
// Used in layout
|
||||
$padding-2: 0.125rem !default;
|
||||
$padding-4: 0.25rem !default;
|
||||
|
|
@ -61,7 +63,7 @@ $main-color: rgba(32, 83, 117, 1) !default;
|
|||
$second-color: rgba(17, 43, 60, 1) !default;
|
||||
$mark-color: rgba(255, 171, 0, 1) !default;
|
||||
|
||||
$body-background-dark: mix(invert($body-background, 75%), $second-color) !default;
|
||||
$body-background-dark: color.mix(color.invert($body-background, 75%), $second-color) !default;
|
||||
$body-font-color-dark: $gray-100 !default;
|
||||
|
||||
$link-color-dark: rgba(110, 168, 212, 1) !default;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "defaults";
|
||||
|
||||
.gdoc-markdown {
|
||||
line-height: 1.6rem;
|
||||
|
||||
|
|
@ -10,8 +12,8 @@
|
|||
font-weight: 600;
|
||||
|
||||
> code {
|
||||
border-top: $border-4 solid var(--accent-color);
|
||||
font-size: $font-size-12 !important;
|
||||
border-top: defaults.$border-4 solid var(--accent-color);
|
||||
font-size: defaults.$font-size-12 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -19,7 +21,7 @@
|
|||
h5,
|
||||
h6 {
|
||||
> code {
|
||||
font-size: $font-size-14 !important;
|
||||
font-size: defaults.$font-size-14 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +34,7 @@
|
|||
a,
|
||||
&__link {
|
||||
text-decoration: underline;
|
||||
border-bottom: $border-1 solid transparent;
|
||||
border-bottom: defaults.$border-1 solid transparent;
|
||||
line-height: normal;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -42,14 +44,14 @@
|
|||
|
||||
&__link--raw {
|
||||
text-decoration: none !important;
|
||||
color: $body-font-color !important;
|
||||
color: defaults.$body-font-color !important;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $body-font-color !important;
|
||||
color: defaults.$body-font-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,12 +74,12 @@
|
|||
}
|
||||
|
||||
&__figure {
|
||||
padding: $padding-4;
|
||||
margin: $padding-16 0;
|
||||
padding: defaults.$padding-4;
|
||||
margin: defaults.$padding-16 0;
|
||||
background-color: var(--accent-color);
|
||||
display: table;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-top-left-radius: defaults.$border-radius;
|
||||
border-top-right-radius: defaults.$border-radius;
|
||||
|
||||
&--round,
|
||||
&--round img {
|
||||
|
|
@ -88,10 +90,10 @@
|
|||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
background-color: var(--accent-color);
|
||||
padding: 0 $padding-4 $padding-4;
|
||||
padding: 0 defaults.$padding-4 defaults.$padding-4;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: defaults.$border-radius;
|
||||
border-bottom-right-radius: defaults.$border-radius;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -102,37 +104,37 @@
|
|||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: $border-radius;
|
||||
border-radius: defaults.$border-radius;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: $padding-16 0;
|
||||
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
|
||||
margin: defaults.$padding-16 0;
|
||||
padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8 (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
|
||||
|
||||
border-left: $border-4 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
border-left: defaults.$border-4 solid var(--accent-color);
|
||||
border-radius: defaults.$border-radius;
|
||||
}
|
||||
|
||||
table:not(.lntable):not(.highlight) {
|
||||
display: table;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin-top: $padding-16;
|
||||
margin-bottom: $padding-16;
|
||||
margin-top: defaults.$padding-16;
|
||||
margin-bottom: defaults.$padding-16;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
thead {
|
||||
border-bottom: $border-4 solid var(--accent-color);
|
||||
border-bottom: defaults.$border-4 solid var(--accent-color);
|
||||
}
|
||||
|
||||
tr th,
|
||||
tr td {
|
||||
padding: $padding-8 $padding-16;
|
||||
padding: defaults.$padding-8 defaults.$padding-16;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: $border-2 solid var(--accent-color);
|
||||
border-bottom: defaults.$border-2 solid var(--accent-color);
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
|
|
@ -141,43 +143,43 @@
|
|||
}
|
||||
|
||||
hr {
|
||||
height: $border-2;
|
||||
height: defaults.$border-2;
|
||||
border: none;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $padding-32;
|
||||
padding-left: defaults.$padding-32;
|
||||
}
|
||||
|
||||
dl {
|
||||
dt {
|
||||
font-weight: bolder;
|
||||
margin-top: $padding-16;
|
||||
margin-top: defaults.$padding-16;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: $padding-32;
|
||||
margin-left: defaults.$padding-32;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: $padding-4 $padding-8;
|
||||
padding: defaults.$padding-4 defaults.$padding-8;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
background-color: var(--code-background);
|
||||
border-radius: $border-radius;
|
||||
border-radius: defaults.$border-radius;
|
||||
color: var(--code-font-color);
|
||||
font-size: $font-size-14;
|
||||
line-height: $padding-16;
|
||||
font-size: defaults.$font-size-14;
|
||||
line-height: defaults.$padding-16;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
padding: $padding-16;
|
||||
padding: defaults.$padding-16;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
@media screen and (max-width: $sm-breakpoint) {
|
||||
@use "defaults";
|
||||
|
||||
@media screen and (max-width: defaults.$sm-breakpoint) {
|
||||
.gdoc-nav {
|
||||
margin-left: -$menu-width;
|
||||
font-size: $font-size-base;
|
||||
margin-left: -(defaults.$menu-width);
|
||||
font-size: defaults.$font-size-base;
|
||||
|
||||
&__control {
|
||||
display: inline-block;
|
||||
|
|
@ -10,14 +12,14 @@
|
|||
|
||||
.gdoc-header {
|
||||
svg.gdoc-icon {
|
||||
width: $font-size-24;
|
||||
height: $font-size-24;
|
||||
width: defaults.$font-size-24;
|
||||
height: defaults.$font-size-24;
|
||||
}
|
||||
}
|
||||
|
||||
.gdoc-brand {
|
||||
font-size: $font-size-24;
|
||||
line-height: $font-size-24;
|
||||
font-size: defaults.$font-size-24;
|
||||
line-height: defaults.$font-size-24;
|
||||
|
||||
&__img {
|
||||
display: none;
|
||||
|
|
@ -36,23 +38,23 @@
|
|||
}
|
||||
|
||||
.gdoc-error {
|
||||
padding: $padding-96 $padding-16;
|
||||
padding: defaults.$padding-96 defaults.$padding-16;
|
||||
|
||||
svg.gdoc-icon {
|
||||
width: $font-size-96;
|
||||
height: $font-size-96;
|
||||
width: defaults.$font-size-96;
|
||||
height: defaults.$font-size-96;
|
||||
}
|
||||
|
||||
&__message {
|
||||
padding-left: $padding-32;
|
||||
padding-left: defaults.$padding-32;
|
||||
}
|
||||
|
||||
&__line {
|
||||
padding: $padding-4 0;
|
||||
padding: defaults.$padding-4 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $font-size-32;
|
||||
font-size: defaults.$font-size-32;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,7 +67,7 @@
|
|||
flex-direction: column;
|
||||
|
||||
&.gdoc-columns {
|
||||
margin: $padding-32 0;
|
||||
margin: defaults.$padding-32 0;
|
||||
}
|
||||
|
||||
.gdoc-columns__content {
|
||||
|
|
@ -77,7 +79,7 @@
|
|||
#menu-control:checked ~ main {
|
||||
.gdoc-nav nav,
|
||||
.gdoc-page {
|
||||
transform: translateX($menu-width);
|
||||
transform: translateX(defaults.$menu-width);
|
||||
}
|
||||
|
||||
.gdoc-page {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "defaults";
|
||||
|
||||
@media print {
|
||||
.gdoc-nav,
|
||||
.gdoc-footer .container span:not(:first-child),
|
||||
|
|
@ -7,7 +9,7 @@
|
|||
}
|
||||
|
||||
.gdoc-footer {
|
||||
border-top: $border-1 solid $gray-300;
|
||||
border-top: defaults.$border-1 solid defaults.$gray-300;
|
||||
}
|
||||
|
||||
.gdoc-markdown pre {
|
||||
|
|
@ -16,8 +18,8 @@
|
|||
}
|
||||
|
||||
.chroma code {
|
||||
border: $border-1 solid $gray-300;
|
||||
padding: $padding-8 !important;
|
||||
border: defaults.$border-1 solid defaults.$gray-300;
|
||||
padding: defaults.$padding-8 !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,24 @@
|
|||
@use "sass:color";
|
||||
@use "defaults";
|
||||
|
||||
// {{< expand "Label" "icon" >}}
|
||||
.gdoc-expand {
|
||||
margin: $padding-16 0;
|
||||
margin: defaults.$padding-16 0;
|
||||
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
border: defaults.$border-1 solid var(--accent-color);
|
||||
border-radius: defaults.$border-radius;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&__head {
|
||||
background: var(--accent-color-lite);
|
||||
padding: $padding-8 $padding-16;
|
||||
padding: defaults.$padding-8 defaults.$padding-16;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: none;
|
||||
padding: 0 $padding-16;
|
||||
padding: 0 defaults.$padding-16;
|
||||
}
|
||||
|
||||
&__control:checked + &__content {
|
||||
|
|
@ -29,10 +32,10 @@
|
|||
|
||||
// {{< tabs >}}
|
||||
.gdoc-tabs {
|
||||
margin: $padding-16 0;
|
||||
margin: defaults.$padding-16 0;
|
||||
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
border: defaults.$border-1 solid var(--accent-color);
|
||||
border-radius: defaults.$border-radius;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -41,21 +44,21 @@
|
|||
|
||||
&__label {
|
||||
display: inline-block;
|
||||
padding: $padding-8 $padding-16;
|
||||
border-bottom: $border-1 transparent;
|
||||
padding: defaults.$padding-8 defaults.$padding-16;
|
||||
border-bottom: defaults.$border-1 transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__content {
|
||||
order: 999; //Move content blocks to the end
|
||||
width: 100%;
|
||||
border-top: $border-1 solid var(--accent-color-lite);
|
||||
padding: 0 $padding-16;
|
||||
border-top: defaults.$border-1 solid var(--accent-color-lite);
|
||||
padding: 0 defaults.$padding-16;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__control:checked + &__label {
|
||||
border-bottom: $border-2 solid var(--link-color);
|
||||
border-bottom: defaults.$border-2 solid var(--link-color);
|
||||
}
|
||||
&__control:checked + &__label + &__content {
|
||||
display: block;
|
||||
|
|
@ -68,7 +71,7 @@
|
|||
|
||||
// {{< columns >}}
|
||||
.gdoc-columns {
|
||||
margin: $padding-16 0;
|
||||
margin: defaults.$padding-16 0;
|
||||
|
||||
&--regular > :first-child {
|
||||
flex: 1;
|
||||
|
|
@ -76,17 +79,17 @@
|
|||
|
||||
&--small > :first-child {
|
||||
flex: 0.35;
|
||||
min-width: $body-min-width * 0.35;
|
||||
min-width: defaults.$body-min-width * 0.35;
|
||||
}
|
||||
|
||||
&--large > :first-child {
|
||||
flex: 1.65;
|
||||
min-width: $body-min-width * 1.65;
|
||||
min-width: defaults.$body-min-width * 1.65;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1 1;
|
||||
min-width: $body-min-width * 0.66;
|
||||
min-width: defaults.$body-min-width * 0.66;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -98,12 +101,12 @@
|
|||
// {{< button >}}
|
||||
.gdoc-button {
|
||||
$root: &;
|
||||
margin: $padding-16 0;
|
||||
margin: defaults.$padding-16 0;
|
||||
|
||||
display: inline-block;
|
||||
background: var(--accent-color-lite);
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
border: defaults.$border-1 solid var(--accent-color);
|
||||
border-radius: defaults.$border-radius;
|
||||
cursor: pointer;
|
||||
|
||||
&__link {
|
||||
|
|
@ -115,78 +118,78 @@
|
|||
&:hover {
|
||||
background: var(--button-background);
|
||||
border-color: var(--button-border-color);
|
||||
color: $gray-100;
|
||||
color: defaults.$gray-100;
|
||||
}
|
||||
|
||||
&--regular {
|
||||
font-size: $font-size-base;
|
||||
font-size: defaults.$font-size-base;
|
||||
|
||||
#{$root}__link {
|
||||
padding: $padding-4 $padding-8;
|
||||
padding: defaults.$padding-4 defaults.$padding-8;
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
font-size: $font-size-20;
|
||||
font-size: defaults.$font-size-20;
|
||||
|
||||
#{$root}__link {
|
||||
padding: $padding-8 $padding-16;
|
||||
padding: defaults.$padding-8 defaults.$padding-16;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// {{< hint >}}
|
||||
.gdoc-hint {
|
||||
@each $name, $color in $hint-colors {
|
||||
@each $name, $color in defaults.$hint-colors {
|
||||
&.#{$name} {
|
||||
border-left-color: $color;
|
||||
background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
|
||||
color: $body-font-color;
|
||||
color: defaults.$body-font-color;
|
||||
padding: 0;
|
||||
|
||||
code,
|
||||
pre {
|
||||
background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
|
||||
color: $code-font-color;
|
||||
color: defaults.$code-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding: $padding-4 $padding-16;
|
||||
background-color: color.scale($gray-600, $alpha: -95%);
|
||||
padding: defaults.$padding-4 defaults.$padding-16;
|
||||
background-color: color.scale(defaults.$gray-600, $alpha: -95%);
|
||||
font-weight: bold;
|
||||
color: color.scale($body-font-color, $alpha: -15%);
|
||||
color: color.scale(defaults.$body-font-color, $alpha: -15%);
|
||||
|
||||
i.fa::after {
|
||||
content: attr(title);
|
||||
font-style: normal;
|
||||
padding-left: $padding-24;
|
||||
padding-left: defaults.$padding-24;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
color: $black;
|
||||
color: defaults.$black;
|
||||
background-size: auto 90%;
|
||||
background-repeat: no-repeat;
|
||||
filter: invert(30%);
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
@each $name, $icon in $hint-icons {
|
||||
@each $name, $icon in defaults.$hint-icons {
|
||||
i.fa.#{$name} {
|
||||
background-image: url(img/geekdoc-stack.svg##{$icon});
|
||||
}
|
||||
}
|
||||
|
||||
.gdoc-icon {
|
||||
width: $font-size-24;
|
||||
height: $font-size-24;
|
||||
width: defaults.$font-size-24;
|
||||
height: defaults.$font-size-24;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding: $padding-4 $padding-16;
|
||||
padding: defaults.$padding-4 defaults.$padding-16;
|
||||
}
|
||||
|
||||
.gdoc-page__anchor {
|
||||
|
|
@ -201,7 +204,7 @@
|
|||
// Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481)
|
||||
> svg {
|
||||
height: 100%;
|
||||
padding: $padding-8;
|
||||
padding: defaults.$padding-8;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -217,14 +220,14 @@
|
|||
&__meta {
|
||||
gap: 0.5em;
|
||||
line-height: normal;
|
||||
margin-bottom: $padding-4;
|
||||
margin-bottom: defaults.$padding-4;
|
||||
|
||||
&:hover .gdoc-page__anchor svg.gdoc-icon {
|
||||
color: var(--control-icons);
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $hint-colors {
|
||||
@each $name, $color in defaults.$hint-colors {
|
||||
&__tag.#{$name} {
|
||||
border-color: color.scale($color, $lightness: 90%, $saturation: -30%);
|
||||
background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
|
||||
|
|
@ -232,26 +235,26 @@
|
|||
}
|
||||
|
||||
&__tag {
|
||||
font-size: $font-size-14;
|
||||
font-size: defaults.$font-size-14;
|
||||
font-weight: normal;
|
||||
background-color: $gray-100;
|
||||
border: $border-1 solid $gray-200;
|
||||
border-radius: $border-radius;
|
||||
padding: $padding-2 $padding-4;
|
||||
color: $body-font-color;
|
||||
background-color: defaults.$gray-100;
|
||||
border: defaults.$border-1 solid defaults.$gray-200;
|
||||
border-radius: defaults.$border-radius;
|
||||
padding: defaults.$padding-2 defaults.$padding-4;
|
||||
color: defaults.$body-font-color;
|
||||
}
|
||||
|
||||
&__default {
|
||||
font-size: $font-size-14;
|
||||
font-size: defaults.$font-size-14;
|
||||
}
|
||||
}
|
||||
|
||||
// {{% progress %}}
|
||||
.gdoc-progress {
|
||||
margin-bottom: $padding-16;
|
||||
margin-bottom: defaults.$padding-16;
|
||||
|
||||
&__label {
|
||||
padding: $padding-4 0;
|
||||
padding: defaults.$padding-4 0;
|
||||
|
||||
&--name {
|
||||
font-weight: bold;
|
||||
|
|
@ -261,7 +264,7 @@
|
|||
&__wrap {
|
||||
background-color: var(--accent-color-lite);
|
||||
border-radius: 1em;
|
||||
box-shadow: inset 0 0 0 $border-1 var(--accent-color);
|
||||
box-shadow: inset 0 0 0 defaults.$border-1 var(--accent-color);
|
||||
}
|
||||
|
||||
&__bar {
|
||||
|
|
@ -278,6 +281,6 @@
|
|||
transparent
|
||||
);
|
||||
background-size: 2.5em 2.5em;
|
||||
background-color: $main-color !important;
|
||||
background-color: defaults.$main-color !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "defaults";
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -24,14 +26,14 @@
|
|||
|
||||
.flex-grid {
|
||||
flex-direction: column;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
border: defaults.$border-1 solid var(--accent-color);
|
||||
border-radius: defaults.$border-radius;
|
||||
background: var(--accent-color-lite);
|
||||
}
|
||||
|
||||
.flex-gap {
|
||||
flex-wrap: wrap;
|
||||
gap: $padding-16;
|
||||
gap: defaults.$padding-16;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
|
|
@ -83,7 +85,7 @@
|
|||
|
||||
.table-wrap {
|
||||
overflow: auto;
|
||||
margin: $padding-16 0;
|
||||
margin: defaults.$padding-16 0;
|
||||
|
||||
> table {
|
||||
margin: 0 !important;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,8 @@
|
|||
@use "sass:map";
|
||||
@use "sass:meta";
|
||||
@use "sass:color";
|
||||
@use "_normalize";
|
||||
@use "_utils";
|
||||
@use "_fonts";
|
||||
@use "_base";
|
||||
|
||||
@import "_defaults";
|
||||
@import "_color_mode";
|
||||
@import "_chroma_base";
|
||||
@import "_chroma_light";
|
||||
@import "_chroma_dark";
|
||||
|
||||
@import "_normalize";
|
||||
@import "_utils";
|
||||
@import "_fonts";
|
||||
@import "_base";
|
||||
|
||||
@import "_markdown";
|
||||
@import "_asciidoc";
|
||||
@import "_shortcodes";
|
||||
@use "_markdown";
|
||||
@use "_asciidoc";
|
||||
@use "_shortcodes";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use "sass:color";
|
||||
|
||||
@import "_defaults";
|
||||
|
||||
@import "_mobile";
|
||||
@use "_defaults";
|
||||
@use "_mobile";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use "sass:color";
|
||||
|
||||
@import "_defaults";
|
||||
|
||||
@import "_print";
|
||||
@use "_defaults";
|
||||
@use "_print";
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue