mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-13 05:13:33 -06:00
initial commit
This commit is contained in:
Patrick Marsceill
@@ -1,3 +1,7 @@
|
||||
//
|
||||
// Base element style overrides
|
||||
//
|
||||
|
||||
// stylelint-disable selector-no-type
|
||||
|
||||
* {
|
||||
@@ -5,36 +9,16 @@
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: $root-font-size;
|
||||
@include fs-4;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-size: inherit;
|
||||
line-height: 1.4;
|
||||
line-height: $body-line-height;
|
||||
color: $body-text-color;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
color: $body-heading-color;
|
||||
line-height: 1.1;
|
||||
margin-bottom: .8em;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1.2 em;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
@@ -57,18 +41,54 @@ table {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
color: $body-heading-color;
|
||||
line-height: $body-heading-line-height;
|
||||
margin-bottom: .8em;
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%);
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 100%;
|
||||
background-size: 1px 1px;
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(rgba($link-color, 0.45) 0%, rgba($link-color, 0.45) 100%);
|
||||
background-size: 1px 1px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-size: 90%;
|
||||
line-height: 1.3;
|
||||
line-height: $body-line-height;
|
||||
font-family: $mono-font-family;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
@@ -77,3 +97,11 @@ img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $grey-lt-100;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
112
_sass/buttons.scss
Normal file
112
_sass/buttons.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
//
|
||||
// Buttons and things that look like buttons
|
||||
//
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.25em;
|
||||
padding-right: 1em;
|
||||
padding-bottom: 0.25em;
|
||||
padding-left: 1em;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: 1.5;
|
||||
color: $purple-200;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
background-color: #f7f7f7;
|
||||
border-width: 0;
|
||||
border-radius: 3px;
|
||||
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: $purple-300;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
text-decoration: none;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: #ededed;
|
||||
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 {
|
||||
box-shadow: inset 0 0 0 2px $grey-lt-300;
|
||||
background: transparent;
|
||||
color: $blue-100;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
box-shadow: inset 0 0 0 3px $grey-lt-300;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
color: $grey-dk-100;
|
||||
}
|
||||
|
||||
&: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-purple {
|
||||
@include btn-color($white, $purple-100);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@include btn-color($white, $blue-000);
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
@include btn-color($white, $green-100);
|
||||
}
|
||||
@@ -1,13 +1,19 @@
|
||||
//
|
||||
// Code and syntax highlighting
|
||||
//
|
||||
|
||||
code {
|
||||
background-color: $grey-lt-000;
|
||||
padding: 0.2em 0.15em;
|
||||
border: $border $border-color;
|
||||
border-radius: $border-radius;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: $grey-lt-000;
|
||||
padding: $sp-3;
|
||||
margin-bottom: 0;
|
||||
|
||||
code {
|
||||
border: 0;
|
||||
@@ -15,6 +21,12 @@ code {
|
||||
}
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
margin-bottom: $sp-3;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.highlight .c { color: #586E75 } /* Comment */
|
||||
.highlight .err { color: #93A1A1 } /* Error */
|
||||
.highlight .g { color: #93A1A1 } /* Generic */
|
||||
@@ -83,3 +95,27 @@ code {
|
||||
.highlight .vg { color: #268BD2 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */
|
||||
|
||||
//
|
||||
// Code examples (rendered)
|
||||
//
|
||||
|
||||
.code-example {
|
||||
border: 1px solid $border-color;
|
||||
padding: $sp-3;
|
||||
border-radius: $border-radius;
|
||||
margin-bottom: $sp-3;
|
||||
overflow: scroll;
|
||||
|
||||
+ .highlighter-rouge,
|
||||
+ figure.highlight {
|
||||
position: relative;
|
||||
border-left: 1px solid $border-color;
|
||||
border-right: 1px solid $border-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
margin-top: -$sp-4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
48
_sass/content.scss
Normal file
48
_sass/content.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
//
|
||||
// Styles for rendered markdown in the .main-content container
|
||||
//
|
||||
|
||||
// stylelint-disable selector-no-type
|
||||
|
||||
.page-content {
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: step-counter;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
counter-increment: step-counter;
|
||||
content: counter(step-counter);
|
||||
left: -1.5em;
|
||||
top: 0.11em;
|
||||
position: absolute;
|
||||
color: $grey-dk-000;
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: sub-counter;
|
||||
|
||||
li {
|
||||
&::before {
|
||||
counter-increment: sub-counter;
|
||||
content: counter(sub-counter, lower-alpha);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr + *,
|
||||
h1:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
//
|
||||
// The basic two column layout
|
||||
//
|
||||
|
||||
.page-wrap {
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
@@ -12,9 +16,8 @@
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
|
||||
padding-top: $gutter-spacing;
|
||||
padding-bottom: $gutter-spacing;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
background-color: $grey-lt-000;
|
||||
z-index: 100;
|
||||
|
||||
@@ -28,6 +31,7 @@
|
||||
align-items: flex-end;
|
||||
width: $nav-width + 16px;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
@@ -41,6 +45,7 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@@ -50,14 +55,14 @@
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: $gutter-spacing;
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $gutter-spacing;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
@include container;
|
||||
|
||||
@include mq(md) {
|
||||
position: relative;
|
||||
margin-left: $nav-width;
|
||||
max-width: $content-width;
|
||||
padding-right: $gutter-spacing;
|
||||
padding-top: $gutter-spacing;
|
||||
padding-left: $gutter-spacing * 1.5;
|
||||
padding-bottom: $gutter-spacing;
|
||||
}
|
||||
@@ -68,23 +73,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
display: block;
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: $gutter-spacing;
|
||||
right: 0;
|
||||
width: $nav-width;
|
||||
z-index: 101;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation,
|
||||
.site-title,
|
||||
.site-footer {
|
||||
padding-left: $gutter-spacing;
|
||||
padding-right: $gutter-spacing;
|
||||
.site-title {
|
||||
|
||||
@include container;
|
||||
|
||||
width: 100%;
|
||||
|
||||
@include mq(lg) {
|
||||
@@ -95,21 +88,22 @@
|
||||
.navigation {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: $sp-8;
|
||||
padding-top: $sp-8;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: $sp-8;
|
||||
right: 0;
|
||||
bottom: $sp-8;
|
||||
z-index: 100;
|
||||
|
||||
@include container;
|
||||
}
|
||||
}
|
||||
|
||||
.img-logo {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,21 @@
|
||||
//
|
||||
// Main nav, breadcrumb, etc...
|
||||
//
|
||||
|
||||
.site-title {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: $gutter-spacing;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -11,6 +29,8 @@
|
||||
.navigation-list-child-list {
|
||||
list-style: none;
|
||||
padding-left: $sp-3;
|
||||
margin-top: $sp-2;
|
||||
margin-bottom: $sp-2;
|
||||
|
||||
.navigation-list-link {
|
||||
color: $grey-dk-100;
|
||||
@@ -23,6 +43,12 @@
|
||||
margin-left: -0.8em;
|
||||
color: $grey-dk-000;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
color: $grey-dk-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,6 +66,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Small screen nav
|
||||
|
||||
.main-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-toggle {
|
||||
position: absolute;
|
||||
right: $sp-4;
|
||||
|
||||
@include mq(md) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb nav
|
||||
|
||||
.breadcrumb-nav-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
@@ -51,6 +110,10 @@
|
||||
display: table-cell;
|
||||
@include fs-2;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: $sp-2;
|
||||
@@ -65,3 +128,25 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table of contents
|
||||
|
||||
#markdown-toc {
|
||||
counter-reset: toc-counter;
|
||||
li {
|
||||
&::before {
|
||||
counter-increment: toc-counter;
|
||||
content: counter(toc-counter, upper-roman);
|
||||
}
|
||||
ol {
|
||||
counter-reset: toc-sub-counter;
|
||||
}
|
||||
|
||||
li {
|
||||
&::before {
|
||||
counter-increment: toc-sub-counter;
|
||||
content: counter(toc-sub-counter, lower-roman);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
6
_sass/search.scss
Normal file
6
_sass/search.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.search-results-wrap {
|
||||
position: absolute;
|
||||
background: $white;
|
||||
width: 400px;
|
||||
z-index: 100;
|
||||
}
|
||||
@@ -1,31 +1,47 @@
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
|
||||
$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
|
||||
$root-font-size: 16px !default; // Base font-size for rems
|
||||
$body-line-height: 1.4;
|
||||
$body-heading-line-height: 1.15;
|
||||
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
$grey-dk-000: #959396;
|
||||
$grey-dk-100: #5c5962;
|
||||
$grey-dk-200: #44434d;
|
||||
$grey-dk-300: #27262b;
|
||||
$white: #fff !default;
|
||||
|
||||
$grey-lt-000: #f5f6fa;
|
||||
$grey-lt-100: #efebf0;
|
||||
$grey-lt-200: #ecebed;
|
||||
$grey-lt-300: #e6e1e8;
|
||||
$grey-dk-000: #959396 !default;
|
||||
$grey-dk-100: #5c5962 !default;
|
||||
$grey-dk-200: #44434d !default;
|
||||
$grey-dk-300: #27262b !default;
|
||||
|
||||
$purple-000: #7253ed;
|
||||
$purple-100: #5e41d0;
|
||||
$purple-200: #4e26af;
|
||||
$purple-300: #381885;
|
||||
$grey-lt-000: #f5f6fa !default;
|
||||
$grey-lt-100: #eeebee !default;
|
||||
$grey-lt-200: #ecebed !default;
|
||||
$grey-lt-300: #e6e1e8 !default;
|
||||
|
||||
$green-000: #41d66f;
|
||||
$green-100: #2bb45a;
|
||||
$green-200: #299950;
|
||||
$green-300: #156f49;
|
||||
$purple-000: #7253ed !default;
|
||||
$purple-100: #5e41d0 !default;
|
||||
$purple-200: #4e26af !default;
|
||||
$purple-300: #381885 !default;
|
||||
|
||||
$body-text-color: $grey-dk-100;
|
||||
$body-heading-color: $grey-dk-300;
|
||||
$root-font-size: 16px; // Base font-size for rems
|
||||
$link-color: $purple-000;
|
||||
$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;
|
||||
|
||||
$body-text-color: $grey-dk-100 !default;
|
||||
$body-heading-color: $grey-dk-300 !default;
|
||||
$link-color: $purple-000 !default;
|
||||
|
||||
//
|
||||
// Media queries in pixels
|
||||
@@ -36,7 +52,7 @@ $media-queries: (
|
||||
sm: 500px,
|
||||
md: 740px,
|
||||
lg: 1120px,
|
||||
xl: 1200px
|
||||
xl: 1400px
|
||||
) !default;
|
||||
|
||||
//
|
||||
@@ -55,7 +71,7 @@ $spacers: (
|
||||
sp-6: $spacing-unit * 2,
|
||||
sp-7: $spacing-unit * 2.5,
|
||||
sp-8: $spacing-unit * 3
|
||||
);
|
||||
) !default;
|
||||
|
||||
$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
|
||||
$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
|
||||
@@ -70,17 +86,18 @@ $sp-8: map-get($spacers, sp-8); // 3 rem == 48px
|
||||
// Borders
|
||||
//
|
||||
|
||||
$border: 1px solid;
|
||||
$border-radius: 4px;
|
||||
$border-color: $grey-lt-100;
|
||||
$border: 1px solid !default;
|
||||
$border-radius: 4px !default;
|
||||
$border-color: $grey-lt-100 !default;
|
||||
|
||||
//
|
||||
// Grid system
|
||||
//
|
||||
|
||||
$gutter-spacing: $sp-6;
|
||||
$nav-width: 232px;
|
||||
$content-width: 800px;
|
||||
$gutter-spacing: $sp-6 !default;
|
||||
$gutter-spacing-sm: $sp-4 !default;
|
||||
$nav-width: 232px !default;
|
||||
$content-width: 800px !default;
|
||||
|
||||
$media-queries: (
|
||||
xs: 320px,
|
||||
@@ -89,11 +106,3 @@ $media-queries: (
|
||||
lg: 800px,
|
||||
xl: 1316px
|
||||
) !default;
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
|
||||
|
||||
$mono-font-family: Menlo, Consolas, Monospace;
|
||||
|
||||
25
_sass/support/mixins/_buttons.scss
Normal file
25
_sass/support/mixins/_buttons.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
// Colored button
|
||||
|
||||
@mixin btn-color($fg, $bg) {
|
||||
color: $fg;
|
||||
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-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%);
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,3 @@
|
||||
// Font size
|
||||
|
||||
@mixin fs-1 {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
@mixin fs-2 {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
@mixin fs-3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
@mixin fs-4 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
@mixin fs-5 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
@mixin fs-6 {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
@mixin fs-7 {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
|
||||
@mixin fs-8 {
|
||||
font-size: 36px !important;
|
||||
}
|
||||
|
||||
@mixin fs-9 {
|
||||
font-size: 42px !important;
|
||||
}
|
||||
|
||||
@mixin fs-10 {
|
||||
font-size: 48px !important;
|
||||
}
|
||||
|
||||
// Media query
|
||||
|
||||
// Media query mixin
|
||||
@@ -62,3 +20,15 @@
|
||||
+ "Please make sure it is defined in `$media-queries` map.";
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive container
|
||||
|
||||
@mixin container {
|
||||
padding-left: $gutter-spacing-sm;
|
||||
padding-right: $gutter-spacing-sm;
|
||||
|
||||
@include mq(md) {
|
||||
padding-left: $gutter-spacing;
|
||||
padding-right: $gutter-spacing;
|
||||
}
|
||||
}
|
||||
81
_sass/support/mixins/_typography.scss
Normal file
81
_sass/support/mixins/_typography.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
// Font size
|
||||
|
||||
@mixin fs-1 {
|
||||
font-size: 9px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-2 {
|
||||
font-size: 11px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-3 {
|
||||
font-size: 12px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-4 {
|
||||
font-size: 14px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-5 {
|
||||
font-size: 16px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-6 {
|
||||
font-size: 18px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-7 {
|
||||
font-size: 24px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-8 {
|
||||
font-size: 32px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-9 {
|
||||
font-size: 36px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 42px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-10 {
|
||||
font-size: 42px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 48px !important;
|
||||
}
|
||||
}
|
||||
3
_sass/support/mixins/mixins.scss
Normal file
3
_sass/support/mixins/mixins.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "./layout";
|
||||
@import "./buttons";
|
||||
@import "./typography";
|
||||
@@ -1,3 +1,3 @@
|
||||
@import "./variables";
|
||||
@import "./functions";
|
||||
@import "./mixins";
|
||||
@import "./mixins/mixins";
|
||||
|
||||
@@ -1,8 +1,19 @@
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
margin-bottom: $sp-5;
|
||||
border-collapse: separate;
|
||||
box-shadow: 0 3px 12px 0 transparentize($grey-dk-300, 0.9);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
|
||||
|
||||
@include mq(sm) {
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
@@ -14,6 +25,7 @@ td {
|
||||
padding-right: $sp-3;
|
||||
border-bottom: $border $grey-lt-000;
|
||||
border-left: $border $border-color;
|
||||
min-width: 120px;
|
||||
|
||||
&:first-of-type {
|
||||
border-left: 0;
|
||||
@@ -54,11 +66,8 @@ tbody {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
thead {
|
||||
th {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
h1,
|
||||
.text-alpha {
|
||||
@include fs-8;
|
||||
@@ -29,7 +33,7 @@ h5,
|
||||
}
|
||||
|
||||
h6,
|
||||
.text-epsilon {
|
||||
.text-zeta {
|
||||
@include fs-2;
|
||||
color: $grey-dk-200;
|
||||
}
|
||||
@@ -40,14 +44,10 @@ li {
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $grey-lt-100;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: $mono-font-family;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,23 @@
|
||||
.text-purple-000 {
|
||||
color: $purple-000 !important;
|
||||
//
|
||||
// Utility classes for colors
|
||||
//
|
||||
|
||||
// Text colors
|
||||
|
||||
.text-grey-dk-000 {
|
||||
color: $grey-dk-000 !important;
|
||||
}
|
||||
|
||||
.text-purple-100 {
|
||||
color: $purple-100 !important;
|
||||
.text-grey-dk-100 {
|
||||
color: $grey-dk-100 !important;
|
||||
}
|
||||
|
||||
.text-purple-200 {
|
||||
color: $purple-200 !important;
|
||||
.text-grey-dk-200 {
|
||||
color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.text-purple-300 {
|
||||
color: $purple-300 !important;
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-000 {
|
||||
@@ -30,18 +36,50 @@
|
||||
color: $grey-lt-300 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-000 {
|
||||
color: $grey-dk-000 !important;
|
||||
.text-blue-000 {
|
||||
color: $blue-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-100 {
|
||||
color: $grey-dk-100 !important;
|
||||
.text-blue-100 {
|
||||
color: $blue-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-200 {
|
||||
color: $grey-dk-200 !important;
|
||||
.text-blue-200 {
|
||||
color: $blue-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
//
|
||||
// Utility classes for layout and spacing
|
||||
//
|
||||
|
||||
.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; }
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
//
|
||||
// Utility classes for lists
|
||||
//
|
||||
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
.list-style-none {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
// scss-lint:disable SpaceAfterPropertyName
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
|
||||
// Margin spacer utilities
|
||||
//
|
||||
// Utility classes for margins and padding
|
||||
//
|
||||
|
||||
// scss-lint:disable SpaceAfterPropertyName
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
|
||||
// Margin spacer utilities
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
@@ -42,7 +42,7 @@
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, spacer#{$i - 1})};
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-sm-0, .m-md-1, .m-lg-2...
|
||||
@@ -97,7 +97,7 @@
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@include mq($media-query) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, spacer#{$i - 1})};
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-sm-0, .p-md-1, .p-lg-2...
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
//
|
||||
// Utility classes for typography
|
||||
//
|
||||
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
.fs-1 {
|
||||
@include fs-1;
|
||||
}
|
||||
@@ -53,3 +59,33 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
// stylelint-enable primer/selector-no-utility
|
||||
|
||||
Reference in New Issue
Block a user