Add files
This commit is contained in:
+113
@@ -0,0 +1,113 @@
|
||||
// Base element style overrides
|
||||
// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
|
||||
|
||||
:root {
|
||||
color-scheme: $color-scheme;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
@include fs-4;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-size: inherit;
|
||||
line-height: $body-line-height;
|
||||
color: $body-text-color;
|
||||
background-color: $body-background-color;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
pre,
|
||||
address,
|
||||
blockquote,
|
||||
table,
|
||||
div,
|
||||
hr,
|
||||
form,
|
||||
fieldset,
|
||||
noscript .table-wrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
#toctitle {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
font-weight: 500;
|
||||
line-height: $body-heading-line-height;
|
||||
color: $body-heading-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $border-color;
|
||||
text-underline-offset: 2px;
|
||||
|
||||
&:hover {
|
||||
text-decoration-color: rgba($link-color, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: $mono-font-family;
|
||||
font-size: 0.75em;
|
||||
line-height: $body-line-height;
|
||||
}
|
||||
|
||||
figure,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $border-color;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// adds a GitHub-style sidebar to blockquotes
|
||||
blockquote {
|
||||
margin: 10px 0;
|
||||
|
||||
// resets user-agent stylesheets for blockquotes
|
||||
margin-block-start: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-left: 1rem;
|
||||
border-left: 3px solid $border-color;
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
// Buttons and things that look like buttons
|
||||
// stylelint-disable color-named
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0.3em 1em;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
background-color: $base-button-color;
|
||||
border-width: 0;
|
||||
border-radius: $border-radius;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:focus:hover,
|
||||
&.selected:focus {
|
||||
box-shadow: 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: darken($link-color, 2%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
text-decoration: none;
|
||||
background-color: darken($base-button-color, 1%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: darken($base-button-color, 3%);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken(#dcdcdc, 5%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: rgba(102, 102, 102, 0.5);
|
||||
cursor: default;
|
||||
background-color: rgba(229, 229, 229, 0.5);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
color: $link-color;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 2px $grey-lt-300;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: darken($link-color, 4%);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 0 0 3px $grey-lt-300;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow:
|
||||
inset 0 0 0 2px $grey-dk-100,
|
||||
0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:focus:hover,
|
||||
&.selected:focus {
|
||||
box-shadow: inset 0 0 0 2px $grey-dk-100;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@include btn-color($white, $btn-primary-color);
|
||||
}
|
||||
|
||||
.btn-purple {
|
||||
@include btn-color($white, $purple-100);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@include btn-color($white, $blue-000);
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
@include btn-color($white, $green-100);
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
text-align: inherit;
|
||||
font: inherit;
|
||||
border-radius: 0;
|
||||
appearance: none;
|
||||
}
|
||||
+246
@@ -0,0 +1,246 @@
|
||||
// Code and syntax highlighting
|
||||
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type, scss/comment-no-empty
|
||||
|
||||
// {% raw %}
|
||||
|
||||
// This instruction applies to all queues not within 'pre' or 'figure', avoiding 'code' generated by the highlight.
|
||||
:not(pre, figure) {
|
||||
& > code {
|
||||
padding: 0.2em 0.15em;
|
||||
font-weight: 400;
|
||||
background-color: $code-background-color;
|
||||
border: $border $border-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Avoid appearance of dark border around visited code links in Safari
|
||||
a:visited code {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
// Content structure for highlighted code blocks using fences or Liquid
|
||||
//
|
||||
// ```[LANG]...```, no kramdown line_numbers:
|
||||
// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
|
||||
//
|
||||
// ```[LANG]...```, kramdown line_numbers = true:
|
||||
// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
|
||||
// > div.table-wrapper > table.rouge-table > tbody > tr
|
||||
// > td.rouge-gutter.gl > pre.lineno
|
||||
// | td.rouge-code > pre
|
||||
//
|
||||
// {% highlight LANG %}...{% endhighlight %}:
|
||||
// figure.highlight > pre > code.language-LANG
|
||||
//
|
||||
// {% highlight LANG linenos %}...{% endhighlight %}:
|
||||
// figure.highlight > pre > code.language-LANG
|
||||
// > div.table-wrapper > table.rouge-table > tbody > tr
|
||||
// > td.gutter.gl > pre.lineno
|
||||
// | td.code > pre
|
||||
//
|
||||
// ----...---- (AsciiDoc)
|
||||
// div.listingblock > div.content > pre.rouge.highlight
|
||||
//
|
||||
// fix_linenos removes the outermost pre when it encloses table.rouge-table
|
||||
//
|
||||
// See docs/index-test.md for some tests.
|
||||
//
|
||||
// No kramdown line_numbers: fences and Liquid highlighting look the same.
|
||||
// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
|
||||
|
||||
// ```[LANG]...```
|
||||
// or in AsciiDoc:
|
||||
//
|
||||
// ----
|
||||
// ...
|
||||
// ----
|
||||
|
||||
// the code may appear with 3 different types:
|
||||
// container \ case: default case, code with line number, code with html rendering
|
||||
// top level: div.highlighter-rouge, figure.highlight, figure.highlight
|
||||
// second level: div.highlight, div.table-wrapper, pre.highlight
|
||||
// third level: pre.highlight, td.code, absent
|
||||
// last level: code, pre, code (optionality)
|
||||
// highlighter level: span, span, span
|
||||
// the spacing are only in the second level for case 1, 3 and in the third level for case 2
|
||||
// in AsciiDoc, there is a parent container that contains optionally a title and the content.
|
||||
|
||||
// select top level container
|
||||
div.highlighter-rouge,
|
||||
div.listingblock > div.content,
|
||||
figure.highlight {
|
||||
margin-top: 0;
|
||||
margin-bottom: $sp-3;
|
||||
background-color: $code-background-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
// copy button (or other button)
|
||||
// the button appear only when there is a hover on the code or focus on button
|
||||
> button {
|
||||
width: $sp-3;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: $sp-3 solid $code-background-color;
|
||||
background-color: $code-background-color;
|
||||
color: $body-text-color;
|
||||
box-sizing: content-box;
|
||||
|
||||
svg {
|
||||
fill: $body-text-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// the button can be seen by doing a simple hover in the code, there is no need to go over the location of the button
|
||||
&:hover {
|
||||
> button {
|
||||
cursor: copy;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// setting the spacing and scrollbar on the second level for the first case
|
||||
// remove all space on the second and third level
|
||||
// this is a mixin to accommodate for the slightly different structures generated via Markdown vs AsciiDoc
|
||||
@mixin scroll-and-spacing($code-div, $pre-select) {
|
||||
#{$code-div} {
|
||||
overflow-x: auto;
|
||||
padding: $sp-3;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#{$pre-select},
|
||||
code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// for Markdown
|
||||
div.highlighter-rouge {
|
||||
@include scroll-and-spacing("div.highlight", "pre.highlight");
|
||||
}
|
||||
|
||||
// for AsciiDoc. we also need to fix the margins for its parent container.
|
||||
div.listingblock {
|
||||
margin-top: 0;
|
||||
margin-bottom: $sp-3;
|
||||
|
||||
@include scroll-and-spacing("div.content", "div.content > pre");
|
||||
}
|
||||
|
||||
// {% highlight LANG %}...{% endhighlight %},
|
||||
// {% highlight LANG linenos %}...{% endhighlight %}:
|
||||
|
||||
// setting the spacing and scrollbar on the second level for the thirt case
|
||||
// the css rule are apply only to the last code enviroment
|
||||
// setting the scroolbar
|
||||
figure.highlight {
|
||||
pre,
|
||||
:not(pre) > code {
|
||||
overflow-x: auto;
|
||||
padding: $sp-3;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ```[LANG]...```, kramdown line_numbers = true,
|
||||
// {% highlight LANG linenos %}...{% endhighlight %}:
|
||||
|
||||
// setting the spacing and scrollbar on the thirt level for the second case
|
||||
.highlight .table-wrapper {
|
||||
padding: $sp-3 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
td,
|
||||
pre {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
background-color: $code-background-color;
|
||||
border: 0;
|
||||
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
td.gl {
|
||||
width: 1em;
|
||||
padding-right: $sp-3;
|
||||
padding-left: $sp-3;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Code examples: html render of a code
|
||||
.code-example,
|
||||
.listingblock > .title {
|
||||
padding: $sp-3;
|
||||
margin-bottom: $sp-3;
|
||||
overflow: auto;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
+ .highlighter-rouge,
|
||||
+ .sectionbody .listingblock,
|
||||
+ .content,
|
||||
+ figure.highlight {
|
||||
position: relative;
|
||||
margin-top: -$sp-4;
|
||||
border-right: 1px solid $border-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-left: 1px solid $border-color;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Mermaid diagram code blocks should be left unstyled.
|
||||
code.language-mermaid {
|
||||
padding: 0;
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Override OneDarkJekyll Colors for Code Blocks
|
||||
.highlight,
|
||||
pre.highlight {
|
||||
background: $code-background-color; // Code Background
|
||||
// For Backwards Compatibility Before $code-linenumber-color was added
|
||||
@if variable-exists(code-linenumber-color) {
|
||||
color: $code-linenumber-color; // Code Line Numbers
|
||||
} @else {
|
||||
color: $body-text-color; // Code Line Numbers
|
||||
}
|
||||
}
|
||||
|
||||
// Override OneDarkJekyll Colors for Code Blocks
|
||||
.highlight pre {
|
||||
background: $code-background-color; // Code Background
|
||||
}
|
||||
|
||||
// {% endraw %}
|
||||
@@ -0,0 +1,18 @@
|
||||
$color-scheme: dark;
|
||||
$body-background-color: $grey-dk-300;
|
||||
$body-heading-color: $grey-lt-000;
|
||||
$body-text-color: $grey-lt-300;
|
||||
$link-color: $blue-000;
|
||||
$nav-child-link-color: $grey-dk-000;
|
||||
$sidebar-color: $grey-dk-300;
|
||||
$base-button-color: $grey-dk-250;
|
||||
$btn-primary-color: $blue-200;
|
||||
$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
|
||||
$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid
|
||||
$feedback-color: darken($sidebar-color, 3%);
|
||||
$table-background-color: $grey-dk-250;
|
||||
$search-background-color: $grey-dk-250;
|
||||
$search-result-preview-color: $grey-dk-000;
|
||||
$border-color: $grey-dk-200;
|
||||
|
||||
@import "./vendor/OneDarkJekyll/syntax"; // this is the one-dark-vivid atom syntax theme
|
||||
@@ -0,0 +1,208 @@
|
||||
// Moved from _sass/code.scss
|
||||
|
||||
.highlight .c {
|
||||
color: #586e75;
|
||||
} // comment //
|
||||
.highlight .err {
|
||||
color: #93a1a1;
|
||||
} // error //
|
||||
.highlight .g {
|
||||
color: #93a1a1;
|
||||
} // generic //
|
||||
.highlight .k {
|
||||
color: #859900;
|
||||
} // keyword //
|
||||
.highlight .l {
|
||||
color: #93a1a1;
|
||||
} // literal //
|
||||
.highlight .n {
|
||||
color: #93a1a1;
|
||||
} // name //
|
||||
.highlight .o {
|
||||
color: #859900;
|
||||
} // operator //
|
||||
.highlight .x {
|
||||
color: #cb4b16;
|
||||
} // other //
|
||||
.highlight .p {
|
||||
color: #93a1a1;
|
||||
} // punctuation //
|
||||
.highlight .cm {
|
||||
color: #586e75;
|
||||
} // comment.multiline //
|
||||
.highlight .cp {
|
||||
color: #859900;
|
||||
} // comment.preproc //
|
||||
.highlight .c1 {
|
||||
color: #586e75;
|
||||
} // comment.single //
|
||||
.highlight .cs {
|
||||
color: #859900;
|
||||
} // comment.special //
|
||||
.highlight .gd {
|
||||
color: #2aa198;
|
||||
} // generic.deleted //
|
||||
.highlight .ge {
|
||||
font-style: italic;
|
||||
color: #93a1a1;
|
||||
} // generic.emph //
|
||||
.highlight .gr {
|
||||
color: #dc322f;
|
||||
} // generic.error //
|
||||
.highlight .gh {
|
||||
color: #cb4b16;
|
||||
} // generic.heading //
|
||||
.highlight .gi {
|
||||
color: #859900;
|
||||
} // generic.inserted //
|
||||
.highlight .go {
|
||||
color: #93a1a1;
|
||||
} // generic.output //
|
||||
.highlight .gp {
|
||||
color: #93a1a1;
|
||||
} // generic.prompt //
|
||||
.highlight .gs {
|
||||
font-weight: bold;
|
||||
color: #93a1a1;
|
||||
} // generic.strong //
|
||||
.highlight .gu {
|
||||
color: #cb4b16;
|
||||
} // generic.subheading //
|
||||
.highlight .gt {
|
||||
color: #93a1a1;
|
||||
} // generic.traceback //
|
||||
.highlight .kc {
|
||||
color: #cb4b16;
|
||||
} // keyword.constant //
|
||||
.highlight .kd {
|
||||
color: #268bd2;
|
||||
} // keyword.declaration //
|
||||
.highlight .kn {
|
||||
color: #859900;
|
||||
} // keyword.namespace //
|
||||
.highlight .kp {
|
||||
color: #859900;
|
||||
} // keyword.pseudo //
|
||||
.highlight .kr {
|
||||
color: #268bd2;
|
||||
} // keyword.reserved //
|
||||
.highlight .kt {
|
||||
color: #dc322f;
|
||||
} // keyword.type //
|
||||
.highlight .ld {
|
||||
color: #93a1a1;
|
||||
} // literal.date //
|
||||
.highlight .m {
|
||||
color: #2aa198;
|
||||
} // literal.number //
|
||||
.highlight .s {
|
||||
color: #2aa198;
|
||||
} // literal.string //
|
||||
.highlight .na {
|
||||
color: #555;
|
||||
} // name.attribute //
|
||||
.highlight .nb {
|
||||
color: #b58900;
|
||||
} // name.builtin //
|
||||
.highlight .nc {
|
||||
color: #268bd2;
|
||||
} // name.class //
|
||||
.highlight .no {
|
||||
color: #cb4b16;
|
||||
} // name.constant //
|
||||
.highlight .nd {
|
||||
color: #268bd2;
|
||||
} // name.decorator //
|
||||
.highlight .ni {
|
||||
color: #cb4b16;
|
||||
} // name.entity //
|
||||
.highlight .ne {
|
||||
color: #cb4b16;
|
||||
} // name.exception //
|
||||
.highlight .nf {
|
||||
color: #268bd2;
|
||||
} // name.function //
|
||||
.highlight .nl {
|
||||
color: #555;
|
||||
} // name.label //
|
||||
.highlight .nn {
|
||||
color: #93a1a1;
|
||||
} // name.namespace //
|
||||
.highlight .nx {
|
||||
color: #555;
|
||||
} // name.other //
|
||||
.highlight .py {
|
||||
color: #93a1a1;
|
||||
} // name.property //
|
||||
.highlight .nt {
|
||||
color: #268bd2;
|
||||
} // name.tag //
|
||||
.highlight .nv {
|
||||
color: #268bd2;
|
||||
} // name.variable //
|
||||
.highlight .ow {
|
||||
color: #859900;
|
||||
} // operator.word //
|
||||
.highlight .w {
|
||||
color: #93a1a1;
|
||||
} // text.whitespace //
|
||||
.highlight .mf {
|
||||
color: #2aa198;
|
||||
} // literal.number.float //
|
||||
.highlight .mh {
|
||||
color: #2aa198;
|
||||
} // literal.number.hex //
|
||||
.highlight .mi {
|
||||
color: #2aa198;
|
||||
} // literal.number.integer //
|
||||
.highlight .mo {
|
||||
color: #2aa198;
|
||||
} // literal.number.oct //
|
||||
.highlight .sb {
|
||||
color: #586e75;
|
||||
} // literal.string.backtick //
|
||||
.highlight .sc {
|
||||
color: #2aa198;
|
||||
} // literal.string.char //
|
||||
.highlight .sd {
|
||||
color: #93a1a1;
|
||||
} // literal.string.doc //
|
||||
.highlight .s2 {
|
||||
color: #2aa198;
|
||||
} // literal.string.double //
|
||||
.highlight .se {
|
||||
color: #cb4b16;
|
||||
} // literal.string.escape //
|
||||
.highlight .sh {
|
||||
color: #93a1a1;
|
||||
} // literal.string.heredoc //
|
||||
.highlight .si {
|
||||
color: #2aa198;
|
||||
} // literal.string.interpol //
|
||||
.highlight .sx {
|
||||
color: #2aa198;
|
||||
} // literal.string.other //
|
||||
.highlight .sr {
|
||||
color: #dc322f;
|
||||
} // literal.string.regex //
|
||||
.highlight .s1 {
|
||||
color: #2aa198;
|
||||
} // literal.string.single //
|
||||
.highlight .ss {
|
||||
color: #2aa198;
|
||||
} // literal.string.symbol //
|
||||
.highlight .bp {
|
||||
color: #268bd2;
|
||||
} // name.builtin.pseudo //
|
||||
.highlight .vc {
|
||||
color: #268bd2;
|
||||
} // name.variable.class //
|
||||
.highlight .vg {
|
||||
color: #268bd2;
|
||||
} // name.variable.global //
|
||||
.highlight .vi {
|
||||
color: #268bd2;
|
||||
} // name.variable.instance //
|
||||
.highlight .il {
|
||||
color: #2aa198;
|
||||
} // literal.number.integer.long //
|
||||
@@ -0,0 +1,16 @@
|
||||
$color-scheme: light !default;
|
||||
$body-background-color: $white !default;
|
||||
$body-heading-color: $grey-dk-300 !default;
|
||||
$body-text-color: $grey-dk-100 !default;
|
||||
$link-color: $purple-000 !default;
|
||||
$nav-child-link-color: $grey-dk-100 !default;
|
||||
$sidebar-color: $grey-lt-000 !default;
|
||||
$base-button-color: #f7f7f7 !default;
|
||||
$btn-primary-color: $purple-100 !default;
|
||||
$code-background-color: $grey-lt-000 !default;
|
||||
$feedback-color: darken($sidebar-color, 3%) !default;
|
||||
$table-background-color: $white !default;
|
||||
$search-background-color: $white !default;
|
||||
$search-result-preview-color: $grey-dk-000 !default;
|
||||
|
||||
@import "./vendor/OneLightJekyll/syntax";
|
||||
@@ -0,0 +1,239 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Styles for rendered markdown in the .main-content container
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id
|
||||
|
||||
.main-content {
|
||||
line-height: $content-line-height;
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
pre,
|
||||
address,
|
||||
blockquote,
|
||||
.table-wrapper {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
li {
|
||||
.highlight {
|
||||
margin-top: $sp-1;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: step-counter;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: -1.6em;
|
||||
color: $grey-dk-000;
|
||||
content: counter(step-counter);
|
||||
counter-increment: step-counter;
|
||||
@include fs-3;
|
||||
|
||||
@include mq(sm) {
|
||||
top: 0.11em;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: sub-counter;
|
||||
|
||||
> li {
|
||||
&::before {
|
||||
content: counter(sub-counter, lower-alpha);
|
||||
counter-increment: sub-counter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
&::before {
|
||||
position: absolute;
|
||||
margin-left: -1.4em;
|
||||
color: $grey-dk-000;
|
||||
content: "•";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.task-list-item-checkbox {
|
||||
margin-right: 0.6em;
|
||||
margin-left: -1.4em;
|
||||
|
||||
// The same margin-left is used above for ul > li::before
|
||||
}
|
||||
|
||||
hr + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1:first-of-type {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template: auto / 10em 1fr;
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
grid-column: 1;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
grid-column: 2;
|
||||
margin-bottom: 0;
|
||||
margin-left: 1em;
|
||||
|
||||
blockquote,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
li,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul,
|
||||
.table-wrapper {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dd,
|
||||
ol,
|
||||
ul {
|
||||
dl:first-child {
|
||||
dt:first-child,
|
||||
dd:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-heading {
|
||||
position: absolute;
|
||||
right: -$sp-4;
|
||||
width: $sp-5;
|
||||
height: 100%;
|
||||
padding-right: $sp-1;
|
||||
padding-left: $sp-1;
|
||||
overflow: visible;
|
||||
|
||||
@include mq(md) {
|
||||
right: auto;
|
||||
left: -$sp-5;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $link-color;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-heading:hover,
|
||||
.anchor-heading:focus,
|
||||
h1:hover > .anchor-heading,
|
||||
h2:hover > .anchor-heading,
|
||||
h3:hover > .anchor-heading,
|
||||
h4:hover > .anchor-heading,
|
||||
h5:hover > .anchor-heading,
|
||||
h6:hover > .anchor-heading {
|
||||
svg {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
#toctitle {
|
||||
position: relative;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
+ table,
|
||||
+ .table-wrapper,
|
||||
+ .code-example,
|
||||
+ .highlighter-rouge,
|
||||
+ .sectionbody .listingblock {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
+ p:not(.label) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> h1:first-child,
|
||||
> h2:first-child,
|
||||
> h3:first-child,
|
||||
> h4:first-child,
|
||||
> h5:first-child,
|
||||
> h6:first-child,
|
||||
> .sect1:first-child > h2,
|
||||
> .sect2:first-child > h3,
|
||||
> .sect3:first-child > h4,
|
||||
> .sect4:first-child > h5,
|
||||
> .sect5:first-child > h6 {
|
||||
margin-top: $sp-2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
// custom SCSS (or CSS) goes here
|
||||
@@ -0,0 +1 @@
|
||||
// custom setup code goes here
|
||||
@@ -0,0 +1,37 @@
|
||||
// Labels (not the form kind)
|
||||
|
||||
// this :not() prevents a style clash with Mermaid.js's
|
||||
// diagram labels, which also use .label
|
||||
// for more, see https://github.com/just-the-docs/just-the-docs/issues/1272
|
||||
// and the accompanying PR
|
||||
.label:not(g),
|
||||
.label-blue:not(g) {
|
||||
display: inline-block;
|
||||
padding: 0.16em 0.56em;
|
||||
margin-right: $sp-2;
|
||||
margin-left: $sp-2;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
background-color: $blue-100;
|
||||
border-radius: 12px;
|
||||
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.label-green:not(g) {
|
||||
background-color: $green-200;
|
||||
}
|
||||
|
||||
.label-purple:not(g) {
|
||||
background-color: $purple-100;
|
||||
}
|
||||
|
||||
.label-red:not(g) {
|
||||
background-color: $red-200;
|
||||
}
|
||||
|
||||
.label-yellow:not(g) {
|
||||
color: $grey-dk-200;
|
||||
background-color: $yellow-200;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
// The basic two column layout
|
||||
|
||||
.side-bar {
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
flex-flow: column nowrap;
|
||||
position: fixed;
|
||||
width: $nav-width-md;
|
||||
height: 100%;
|
||||
border-right: $border $border-color;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
|
||||
min-width: $nav-width;
|
||||
}
|
||||
|
||||
& + .main {
|
||||
@include mq(md) {
|
||||
margin-left: $nav-width-md;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
// stylelint-disable function-name-case
|
||||
// disable for Max(), we want to use the CSS max() function
|
||||
margin-left: Max(
|
||||
#{$nav-width},
|
||||
calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
|
||||
);
|
||||
// stylelint-enable function-name-case
|
||||
}
|
||||
|
||||
.main-header {
|
||||
display: none;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: auto;
|
||||
|
||||
@include mq(md) {
|
||||
position: relative;
|
||||
max-width: $content-width;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content-wrap {
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
|
||||
@include container;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: $gutter-spacing;
|
||||
padding-bottom: $gutter-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
z-index: 0;
|
||||
border-bottom: $border $border-color;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav,
|
||||
.site-header,
|
||||
.site-footer {
|
||||
width: 100%;
|
||||
|
||||
@include mq(lg) {
|
||||
width: $nav-width;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
padding-top: $sp-8;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
min-height: $header-height;
|
||||
align-items: center;
|
||||
|
||||
@include mq(md) {
|
||||
height: $header-height;
|
||||
max-height: $header-height;
|
||||
border-bottom: $border $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding-top: $sp-3;
|
||||
padding-bottom: $sp-3;
|
||||
color: $body-heading-color;
|
||||
|
||||
@include container;
|
||||
|
||||
@include fs-6;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: $sp-2;
|
||||
padding-bottom: $sp-2;
|
||||
}
|
||||
}
|
||||
|
||||
@if variable-exists(logo) {
|
||||
.site-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url($logo);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.site-button {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: $gutter-spacing-sm;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
.site-header .site-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title:hover {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 80%,
|
||||
rgba($feedback-color, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.site-button:hover {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 100%
|
||||
);
|
||||
}
|
||||
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
padding-bottom: $sp-10;
|
||||
overflow-y: scroll;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-enable selector-max-type
|
||||
|
||||
.site-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: $sp-4;
|
||||
padding-bottom: $sp-4;
|
||||
color: $grey-dk-000;
|
||||
|
||||
@include container;
|
||||
|
||||
@include fs-2;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $sp-5;
|
||||
height: $sp-5;
|
||||
color: $link-color;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// Import external dependencies
|
||||
@import "./vendor/normalize.scss/normalize";
|
||||
|
||||
// Modules
|
||||
@import "./base";
|
||||
@import "./layout";
|
||||
@import "./content";
|
||||
@import "./navigation";
|
||||
@import "./typography";
|
||||
@import "./labels";
|
||||
@import "./buttons";
|
||||
@import "./search";
|
||||
@import "./tables";
|
||||
@import "./code";
|
||||
@import "./utilities/utilities";
|
||||
@import "./print";
|
||||
@import "./skiptomain";
|
||||
@@ -0,0 +1,235 @@
|
||||
// Main nav, breadcrumb, etc...
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
|
||||
|
||||
.nav-list {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
.nav-list-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
|
||||
@include fs-4;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.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;
|
||||
} @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;
|
||||
} @else {
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $nav-list-item-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.external > svg {
|
||||
width: $sp-4;
|
||||
height: $sp-4;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 80%,
|
||||
rgba($feedback-color, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.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: #{$nav-list-item-height-sm * 0.25};
|
||||
color: $link-color;
|
||||
|
||||
@include mq(md) {
|
||||
width: $nav-list-item-height;
|
||||
height: $nav-list-item-height;
|
||||
padding: #{$nav-list-item-height * 0.25};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-list {
|
||||
display: none;
|
||||
padding-left: $sp-3;
|
||||
list-style: none;
|
||||
|
||||
.nav-list-item {
|
||||
position: relative;
|
||||
|
||||
.nav-list-link {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
|
||||
.nav-list-expander {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-list-expander svg {
|
||||
@if $nav-list-expander-right {
|
||||
transform: rotate(-90deg);
|
||||
} @else {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-category {
|
||||
padding: $sp-2 $gutter-spacing-sm;
|
||||
font-weight: 600;
|
||||
text-align: start;
|
||||
text-transform: uppercase;
|
||||
border-bottom: $border $border-color;
|
||||
@include fs-2;
|
||||
|
||||
@include mq(md) {
|
||||
padding: $sp-2 $gutter-spacing;
|
||||
margin-top: $gutter-spacing-sm;
|
||||
text-align: start;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list.nav-category-list {
|
||||
> .nav-list-item {
|
||||
margin: 0;
|
||||
|
||||
> .nav-list {
|
||||
padding: 0;
|
||||
|
||||
> .nav-list-item {
|
||||
> .nav-list-link {
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
> .nav-list-expander {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Aux nav
|
||||
|
||||
.aux-nav {
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
@include fs-2;
|
||||
|
||||
.aux-nav-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.aux-nav-list-item {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
padding-right: $gutter-spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb nav
|
||||
|
||||
.breadcrumb-nav {
|
||||
@include mq(md) {
|
||||
margin-top: -$sp-4;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-nav-list {
|
||||
padding-left: 0;
|
||||
margin-bottom: $sp-3;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.breadcrumb-nav-list-item {
|
||||
display: table-cell;
|
||||
@include fs-2;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-right: $sp-2;
|
||||
margin-left: $sp-2;
|
||||
color: $grey-dk-000;
|
||||
content: "/";
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type
|
||||
|
||||
@media print {
|
||||
.site-footer,
|
||||
.site-button,
|
||||
#edit-this-page,
|
||||
#back-to-top,
|
||||
.site-nav,
|
||||
.main-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 1rem !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: 8pt !important;
|
||||
}
|
||||
|
||||
pre.highlight {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
// Search input and autocomplete
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-grow: 1;
|
||||
height: $sp-10;
|
||||
padding: $sp-2;
|
||||
transition: padding linear #{$transition-duration * 0.5};
|
||||
|
||||
@include mq(md) {
|
||||
position: relative !important;
|
||||
width: auto !important;
|
||||
height: 100% !important;
|
||||
padding: 0;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: $sp-8;
|
||||
overflow: hidden;
|
||||
border-radius: $border-radius;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
transition: height linear #{$transition-duration * 0.5};
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: $search-results-width;
|
||||
height: 100% !important;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
transition: width ease $transition-duration;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing-sm + $sp-5};
|
||||
font-size: 1rem;
|
||||
color: $body-text-color;
|
||||
background-color: $search-background-color;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
|
||||
@include mq(md) {
|
||||
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing + $sp-5};
|
||||
font-size: 0.875rem;
|
||||
background-color: $body-background-color;
|
||||
transition: padding-left linear #{$transition-duration * 0.5};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
||||
+ .search-label .search-icon {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-label {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-left: $gutter-spacing-sm;
|
||||
|
||||
@include mq(md) {
|
||||
padding-left: $gutter-spacing;
|
||||
transition: padding-left linear #{$transition-duration * 0.5};
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: #{$sp-4 * 1.2};
|
||||
height: #{$sp-4 * 1.2};
|
||||
align-self: center;
|
||||
color: $grey-dk-000;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
max-height: calc(100% - #{$sp-10});
|
||||
overflow-y: auto;
|
||||
background-color: $search-background-color;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
|
||||
@include mq(md) {
|
||||
top: 100%;
|
||||
width: $search-results-width;
|
||||
max-height: calc(100vh - 200%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-list {
|
||||
padding-left: 0;
|
||||
margin-bottom: $sp-1;
|
||||
list-style: none;
|
||||
@include fs-4;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-3;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-list-item {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-result {
|
||||
display: block;
|
||||
padding: $sp-1 $sp-3;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $feedback-color;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-title {
|
||||
display: block;
|
||||
padding-top: $sp-2;
|
||||
padding-bottom: $sp-2;
|
||||
|
||||
@include mq(sm) {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
padding-right: $sp-2;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-doc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.search-result-doc-parent {
|
||||
opacity: 0.5;
|
||||
@include fs-3;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-2;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-icon {
|
||||
width: $sp-4;
|
||||
height: $sp-4;
|
||||
margin-right: $sp-2;
|
||||
color: $link-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-result-doc-title {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-section {
|
||||
margin-left: #{$sp-4 + $sp-2};
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.search-result-rel-url {
|
||||
display: block;
|
||||
margin-left: #{$sp-4 + $sp-2};
|
||||
overflow: hidden;
|
||||
color: $search-result-preview-color;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@include fs-1;
|
||||
}
|
||||
|
||||
.search-result-previews {
|
||||
display: block;
|
||||
padding-top: $sp-2;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: $sp-4;
|
||||
margin-left: $sp-2;
|
||||
color: $search-result-preview-color;
|
||||
word-wrap: break-word;
|
||||
border-left: $border;
|
||||
border-left-color: $border-color;
|
||||
@include fs-2;
|
||||
|
||||
@include mq(sm) {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
padding-left: $sp-2;
|
||||
margin-left: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-preview + .search-result-preview {
|
||||
margin-top: $sp-1;
|
||||
}
|
||||
|
||||
.search-result-highlight {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search-no-result {
|
||||
padding: $sp-2 $sp-3;
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: fixed;
|
||||
right: $sp-4;
|
||||
bottom: $sp-4;
|
||||
display: flex;
|
||||
width: $sp-9;
|
||||
height: $sp-9;
|
||||
background-color: $search-background-color;
|
||||
border: 1px solid rgba($link-color, 0.3);
|
||||
border-radius: #{$sp-9 * 0.5};
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity ease $transition-duration,
|
||||
width 0s $transition-duration,
|
||||
height 0s $transition-duration;
|
||||
}
|
||||
|
||||
.search-active {
|
||||
.search {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
height: $sp-10;
|
||||
border-radius: 0;
|
||||
|
||||
@include mq(md) {
|
||||
width: $search-results-width;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background-color: $search-background-color;
|
||||
|
||||
@include mq(md) {
|
||||
padding-left: 2.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-label {
|
||||
@include mq(md) {
|
||||
padding-left: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition:
|
||||
opacity ease $transition-duration,
|
||||
width 0s,
|
||||
height 0s;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
.main {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding-top: $sp-10;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// Skipnav
|
||||
// Skip to main content
|
||||
|
||||
a.skip-to-main {
|
||||
left: -999px;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
z-index: -999;
|
||||
}
|
||||
|
||||
a.skip-to-main:focus,
|
||||
a.skip-to-main:active {
|
||||
color: $link-color;
|
||||
background-color: $body-background-color;
|
||||
left: auto;
|
||||
top: auto;
|
||||
width: 30%;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
margin: 10px 35%;
|
||||
padding: 5px;
|
||||
border-radius: 15px;
|
||||
border: 4px solid $btn-primary-color;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
z-index: 999;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
// Typography
|
||||
|
||||
// prettier-ignore
|
||||
$body-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
|
||||
roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji" !default;
|
||||
$mono-font-family: "SFMono-Regular", menlo, consolas, monospace !default;
|
||||
$root-font-size: 16px !default; // DEPRECATED: previously base font-size for rems
|
||||
$body-line-height: 1.4 !default;
|
||||
$content-line-height: 1.6 !default;
|
||||
$body-heading-line-height: 1.25 !default;
|
||||
|
||||
// Font size
|
||||
// `-sm` suffix is the size at the small (and above) media query
|
||||
|
||||
$font-size-1: 0.5625rem !default;
|
||||
$font-size-1-sm: 0.625rem !default;
|
||||
$font-size-2: 0.6875rem !default; // h4 - uppercased!, h6 not uppercased, text-small
|
||||
$font-size-3: 0.75rem !default; // h5
|
||||
$font-size-4: 0.875rem !default;
|
||||
$font-size-5: 1rem !default; // h3
|
||||
$font-size-6: 1.125rem !default; // h2
|
||||
$font-size-7: 1.5rem !default;
|
||||
$font-size-8: 2rem !default; // h1
|
||||
$font-size-9: 2.25rem !default;
|
||||
$font-size-10: 2.625rem !default;
|
||||
$font-size-10-sm: 3rem !default;
|
||||
|
||||
// Colors
|
||||
|
||||
$white: #fff !default;
|
||||
$grey-dk-000: #959396 !default;
|
||||
$grey-dk-100: #5c5962 !default;
|
||||
$grey-dk-200: #44434d !default;
|
||||
$grey-dk-250: #302d36 !default;
|
||||
$grey-dk-300: #27262b !default;
|
||||
$grey-lt-000: #f5f6fa !default;
|
||||
$grey-lt-100: #eeebee !default;
|
||||
$grey-lt-200: #ecebed !default;
|
||||
$grey-lt-300: #e6e1e8 !default;
|
||||
$purple-000: #7253ed !default;
|
||||
$purple-100: #5e41d0 !default;
|
||||
$purple-200: #4e26af !default;
|
||||
$purple-300: #381885 !default;
|
||||
$blue-000: #2c84fa !default;
|
||||
$blue-100: #2869e6 !default;
|
||||
$blue-200: #264caf !default;
|
||||
$blue-300: #183385 !default;
|
||||
$green-000: #41d693 !default;
|
||||
$green-100: #11b584 !default;
|
||||
$green-200: #009c7b !default;
|
||||
$green-300: #026e57 !default;
|
||||
$yellow-000: #ffeb82 !default;
|
||||
$yellow-100: #fadf50 !default;
|
||||
$yellow-200: #f7d12e !default;
|
||||
$yellow-300: #e7af06 !default;
|
||||
$red-000: #f77e7e !default;
|
||||
$red-100: #f96e65 !default;
|
||||
$red-200: #e94c4c !default;
|
||||
$red-300: #dd2e2e !default;
|
||||
|
||||
// Spacing
|
||||
|
||||
$spacing-unit: 1rem; // 1rem == 16px
|
||||
|
||||
$spacers: (
|
||||
sp-0: 0,
|
||||
sp-1: $spacing-unit * 0.25,
|
||||
sp-2: $spacing-unit * 0.5,
|
||||
sp-3: $spacing-unit * 0.75,
|
||||
sp-4: $spacing-unit,
|
||||
sp-5: $spacing-unit * 1.5,
|
||||
sp-6: $spacing-unit * 2,
|
||||
sp-7: $spacing-unit * 2.5,
|
||||
sp-8: $spacing-unit * 3,
|
||||
sp-9: $spacing-unit * 3.5,
|
||||
sp-10: $spacing-unit * 4,
|
||||
) !default;
|
||||
$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
|
||||
$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px
|
||||
$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
|
||||
$sp-4: map-get($spacers, sp-4) !default; // 1 rem == 16px
|
||||
$sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
|
||||
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
|
||||
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
|
||||
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
|
||||
$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
|
||||
$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
|
||||
|
||||
// Borders
|
||||
|
||||
$border: 1px solid !default;
|
||||
$border-radius: 4px !default;
|
||||
$border-color: $grey-lt-100 !default;
|
||||
|
||||
// Grid system
|
||||
|
||||
$gutter-spacing: $sp-6 !default;
|
||||
$gutter-spacing-sm: $sp-4 !default;
|
||||
$nav-width: 16.5rem !default;
|
||||
$nav-width-md: 15.5rem !default;
|
||||
$nav-list-item-height: $sp-6 !default;
|
||||
$nav-list-item-height-sm: $sp-8 !default;
|
||||
$nav-list-expander-right: true;
|
||||
$content-width: 50rem !default;
|
||||
$header-height: 3.75rem !default;
|
||||
$search-results-width: $content-width - $nav-width !default;
|
||||
$transition-duration: 400ms;
|
||||
|
||||
// Media queries in pixels
|
||||
|
||||
$media-queries: (
|
||||
xs: 20rem,
|
||||
sm: 31.25rem,
|
||||
md: $content-width,
|
||||
lg: $content-width + $nav-width,
|
||||
xl: 87.5rem,
|
||||
) !default;
|
||||
@@ -0,0 +1,29 @@
|
||||
// Colored button
|
||||
|
||||
@mixin btn-color($fg, $bg) {
|
||||
color: $fg;
|
||||
background-color: darken($bg, 2%);
|
||||
background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.25),
|
||||
0 4px 10px rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: $fg;
|
||||
background-color: darken($bg, 4%);
|
||||
background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: darken($bg, 5%);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken($bg, 10%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// Media query
|
||||
|
||||
// Media query mixin
|
||||
// Usage:
|
||||
// @include mq(md) {
|
||||
// ..medium and up styles
|
||||
// }
|
||||
@mixin mq($name) {
|
||||
// Retrieves the value from the key
|
||||
$value: map-get($media-queries, $name);
|
||||
|
||||
// If the key exists in the map
|
||||
@if $value {
|
||||
// Prints a media query based on the value
|
||||
@media (min-width: $value) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "No value could be retrieved from `#{$media-query}`. Please make sure it is defined in `$media-queries` map.";
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive container
|
||||
|
||||
@mixin container {
|
||||
padding-right: $gutter-spacing-sm;
|
||||
padding-left: $gutter-spacing-sm;
|
||||
|
||||
@include mq(md) {
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $gutter-spacing;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
@mixin fs-1 {
|
||||
& {
|
||||
font-size: $font-size-1 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-1-sm !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-2 {
|
||||
& {
|
||||
font-size: $font-size-2 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-3 {
|
||||
& {
|
||||
font-size: $font-size-3 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-4 {
|
||||
& {
|
||||
font-size: $font-size-4 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-5 {
|
||||
& {
|
||||
font-size: $font-size-5 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-6 {
|
||||
& {
|
||||
font-size: $font-size-6 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-7 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-7 {
|
||||
& {
|
||||
font-size: $font-size-7 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-8 {
|
||||
& {
|
||||
font-size: $font-size-8 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-9 {
|
||||
& {
|
||||
font-size: $font-size-9 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-10 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-10 {
|
||||
& {
|
||||
font-size: $font-size-10 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-10-sm !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "./layout";
|
||||
@import "./buttons";
|
||||
@import "./typography";
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "./variables";
|
||||
@import "./mixins/mixins";
|
||||
@@ -0,0 +1,56 @@
|
||||
// Tables
|
||||
// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
|
||||
|
||||
.table-wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $sp-5;
|
||||
overflow-x: auto;
|
||||
border-radius: $border-radius;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
table {
|
||||
display: table;
|
||||
min-width: 100%;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
min-width: 7.5rem;
|
||||
padding: $sp-2 $sp-3;
|
||||
background-color: $table-background-color;
|
||||
border-bottom: $border rgba($border-color, 0.5);
|
||||
border-left: $border $border-color;
|
||||
|
||||
@include fs-3;
|
||||
|
||||
&:first-of-type {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:last-of-type {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-bottom: $sp-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
border-bottom: $border $border-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// Typography
|
||||
// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
|
||||
|
||||
h1,
|
||||
.text-alpha {
|
||||
font-weight: 300;
|
||||
|
||||
@include fs-8;
|
||||
}
|
||||
|
||||
h2,
|
||||
.text-beta,
|
||||
#toctitle {
|
||||
@include fs-6;
|
||||
}
|
||||
|
||||
h3,
|
||||
.text-gamma {
|
||||
@include fs-5;
|
||||
}
|
||||
|
||||
h4,
|
||||
.text-delta {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
h4 code {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h5,
|
||||
.text-epsilon {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
h6,
|
||||
.text-zeta {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: $mono-font-family !important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
// Utility classes for colors
|
||||
|
||||
// Text colors
|
||||
|
||||
.text-grey-dk-000 {
|
||||
color: $grey-dk-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-100 {
|
||||
color: $grey-dk-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-200 {
|
||||
color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-250 {
|
||||
color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-000 {
|
||||
color: $grey-lt-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-100 {
|
||||
color: $grey-lt-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-200 {
|
||||
color: $grey-lt-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-300 {
|
||||
color: $grey-lt-300 !important;
|
||||
}
|
||||
|
||||
.text-blue-000 {
|
||||
color: $blue-000 !important;
|
||||
}
|
||||
|
||||
.text-blue-100 {
|
||||
color: $blue-100 !important;
|
||||
}
|
||||
|
||||
.text-blue-200 {
|
||||
color: $blue-200 !important;
|
||||
}
|
||||
|
||||
.text-blue-300 {
|
||||
color: $blue-300 !important;
|
||||
}
|
||||
|
||||
.text-green-000 {
|
||||
color: $green-000 !important;
|
||||
}
|
||||
|
||||
.text-green-100 {
|
||||
color: $green-100 !important;
|
||||
}
|
||||
|
||||
.text-green-200 {
|
||||
color: $green-200 !important;
|
||||
}
|
||||
|
||||
.text-green-300 {
|
||||
color: $green-300 !important;
|
||||
}
|
||||
|
||||
.text-purple-000 {
|
||||
color: $purple-000 !important;
|
||||
}
|
||||
|
||||
.text-purple-100 {
|
||||
color: $purple-100 !important;
|
||||
}
|
||||
|
||||
.text-purple-200 {
|
||||
color: $purple-200 !important;
|
||||
}
|
||||
|
||||
.text-purple-300 {
|
||||
color: $purple-300 !important;
|
||||
}
|
||||
|
||||
.text-yellow-000 {
|
||||
color: $yellow-000 !important;
|
||||
}
|
||||
|
||||
.text-yellow-100 {
|
||||
color: $yellow-100 !important;
|
||||
}
|
||||
|
||||
.text-yellow-200 {
|
||||
color: $yellow-200 !important;
|
||||
}
|
||||
|
||||
.text-yellow-300 {
|
||||
color: $yellow-300 !important;
|
||||
}
|
||||
|
||||
.text-red-000 {
|
||||
color: $red-000 !important;
|
||||
}
|
||||
|
||||
.text-red-100 {
|
||||
color: $red-100 !important;
|
||||
}
|
||||
|
||||
.text-red-200 {
|
||||
color: $red-200 !important;
|
||||
}
|
||||
|
||||
.text-red-300 {
|
||||
color: $red-300 !important;
|
||||
}
|
||||
|
||||
// Background colors
|
||||
|
||||
.bg-grey-dk-000 {
|
||||
background-color: $grey-dk-000 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-100 {
|
||||
background-color: $grey-dk-100 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-200 {
|
||||
background-color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-250 {
|
||||
background-color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-300 {
|
||||
background-color: $grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-000 {
|
||||
background-color: $grey-lt-000 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-100 {
|
||||
background-color: $grey-lt-100 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-200 {
|
||||
background-color: $grey-lt-200 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-300 {
|
||||
background-color: $grey-lt-300 !important;
|
||||
}
|
||||
|
||||
.bg-blue-000 {
|
||||
background-color: $blue-000 !important;
|
||||
}
|
||||
|
||||
.bg-blue-100 {
|
||||
background-color: $blue-100 !important;
|
||||
}
|
||||
|
||||
.bg-blue-200 {
|
||||
background-color: $blue-200 !important;
|
||||
}
|
||||
|
||||
.bg-blue-300 {
|
||||
background-color: $blue-300 !important;
|
||||
}
|
||||
|
||||
.bg-green-000 {
|
||||
background-color: $green-000 !important;
|
||||
}
|
||||
|
||||
.bg-green-100 {
|
||||
background-color: $green-100 !important;
|
||||
}
|
||||
|
||||
.bg-green-200 {
|
||||
background-color: $green-200 !important;
|
||||
}
|
||||
|
||||
.bg-green-300 {
|
||||
background-color: $green-300 !important;
|
||||
}
|
||||
|
||||
.bg-purple-000 {
|
||||
background-color: $purple-000 !important;
|
||||
}
|
||||
|
||||
.bg-purple-100 {
|
||||
background-color: $purple-100 !important;
|
||||
}
|
||||
|
||||
.bg-purple-200 {
|
||||
background-color: $purple-200 !important;
|
||||
}
|
||||
|
||||
.bg-purple-300 {
|
||||
background-color: $purple-300 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-000 {
|
||||
background-color: $yellow-000 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-100 {
|
||||
background-color: $yellow-100 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-200 {
|
||||
background-color: $yellow-200 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-300 {
|
||||
background-color: $yellow-300 !important;
|
||||
}
|
||||
|
||||
.bg-red-000 {
|
||||
background-color: $red-000 !important;
|
||||
}
|
||||
|
||||
.bg-red-100 {
|
||||
background-color: $red-100 !important;
|
||||
}
|
||||
|
||||
.bg-red-200 {
|
||||
background-color: $red-200 !important;
|
||||
}
|
||||
|
||||
.bg-red-300 {
|
||||
background-color: $red-300 !important;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
// Utility classes for layout
|
||||
|
||||
// Display
|
||||
|
||||
.d-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.d-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .d-sm-block, .d-md-none, .d-lg-inline
|
||||
.d-#{$media-query}-block {
|
||||
display: block !important;
|
||||
}
|
||||
.d-#{$media-query}-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
.d-#{$media-query}-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
.d-#{$media-query}-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.d-#{$media-query}-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal alignment
|
||||
|
||||
.float-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.flex-justify-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.flex-justify-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.flex-justify-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.flex-justify-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
// Vertical alignment
|
||||
|
||||
.v-align-baseline {
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
|
||||
.v-align-bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
.v-align-middle {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.v-align-text-bottom {
|
||||
vertical-align: text-bottom !important;
|
||||
}
|
||||
|
||||
.v-align-text-top {
|
||||
vertical-align: text-top !important;
|
||||
}
|
||||
|
||||
.v-align-top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// Utility classes for lists
|
||||
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
.list-style-none {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
|
||||
li {
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
// Utility classes for margins and padding
|
||||
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
|
||||
|
||||
// Margin spacer utilities
|
||||
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-0, .m-1, .m-2...
|
||||
.m-#{$scale} {
|
||||
margin: #{$size} !important;
|
||||
}
|
||||
.mt-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
}
|
||||
.mr-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
}
|
||||
.mb-#{$scale} {
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
.ml-#{$scale} {
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.mx-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.mxn-#{$scale} {
|
||||
margin-right: -#{$size} !important;
|
||||
margin-left: -#{$size} !important;
|
||||
}
|
||||
.mx-#{$scale}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-sm-0, .m-md-1, .m-lg-2...
|
||||
.m-#{$media-query}-#{$scale} {
|
||||
margin: #{$size} !important;
|
||||
}
|
||||
.mt-#{$media-query}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
}
|
||||
.mr-#{$media-query}-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
}
|
||||
.mb-#{$media-query}-#{$scale} {
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
.ml-#{$media-query}-#{$scale} {
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.mx-#{$media-query}-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$media-query}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.mxn-#{$media-query}-#{$scale} {
|
||||
margin-right: -#{$size} !important;
|
||||
margin-left: -#{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Padding spacer utilities
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-0, .p-1, .p-2...
|
||||
.p-#{$scale} {
|
||||
padding: #{$size} !important;
|
||||
}
|
||||
.pt-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
}
|
||||
.pr-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
}
|
||||
.pb-#{$scale} {
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
.pl-#{$scale} {
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.px-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@include mq($media-query) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-sm-0, .p-md-1, .p-lg-2...
|
||||
.p-#{$media-query}-#{$scale} {
|
||||
padding: #{$size} !important;
|
||||
}
|
||||
.pt-#{$media-query}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
}
|
||||
.pr-#{$media-query}-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
}
|
||||
.pb-#{$media-query}-#{$scale} {
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
.pl-#{$media-query}-#{$scale} {
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.px-#{$media-query}-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$media-query}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
// Utility classes for typography
|
||||
|
||||
.fs-1 {
|
||||
@include fs-1;
|
||||
}
|
||||
|
||||
.fs-2 {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.fs-3 {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.fs-4 {
|
||||
@include fs-4;
|
||||
}
|
||||
|
||||
.fs-5 {
|
||||
@include fs-5;
|
||||
}
|
||||
|
||||
.fs-6 {
|
||||
@include fs-6;
|
||||
}
|
||||
|
||||
.fs-7 {
|
||||
@include fs-7;
|
||||
}
|
||||
|
||||
.fs-8 {
|
||||
@include fs-8;
|
||||
}
|
||||
|
||||
.fs-9 {
|
||||
@include fs-9;
|
||||
}
|
||||
|
||||
.fs-10 {
|
||||
@include fs-10;
|
||||
}
|
||||
|
||||
.fw-300 {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.fw-400 {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.fw-500 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.lh-0 {
|
||||
line-height: 0 !important;
|
||||
}
|
||||
|
||||
.lh-default {
|
||||
line-height: $body-line-height;
|
||||
}
|
||||
|
||||
.lh-tight {
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
.ls-5 {
|
||||
letter-spacing: 0.05em !important;
|
||||
}
|
||||
|
||||
.ls-10 {
|
||||
letter-spacing: 0.1em !important;
|
||||
}
|
||||
|
||||
.ls-0 {
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "./colors";
|
||||
@import "./layout";
|
||||
@import "./typography";
|
||||
@import "./lists";
|
||||
@import "./spacing";
|
||||
Reference in New Issue
Block a user