mirror of https://github.com/AMT-Cheif/drift.git
Use github pygments theme
This commit is contained in:
Simon Binder
parent
f28eb13b4c
commit
4a40796c90
|
|
@ -0,0 +1,110 @@
|
|||
//
|
||||
// Base element style overrides
|
||||
//
|
||||
// stylelint-disable selector-no-type, selector-max-type
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: $white;
|
||||
background: $link-color;
|
||||
}
|
||||
|
||||
html {
|
||||
@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;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
ol,
|
||||
ul,
|
||||
pre,
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
div,
|
||||
fieldset,
|
||||
form,
|
||||
hr,
|
||||
noscript,
|
||||
table {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.2em;
|
||||
margin-bottom: 0.8em;
|
||||
font-weight: 500;
|
||||
line-height: $body-heading-line-height;
|
||||
color: $body-heading-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient($border-color 0%, $border-color 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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: $mono-font-family;
|
||||
font-size: 12px;
|
||||
line-height: $body-line-height;
|
||||
}
|
||||
|
||||
figure {
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
//
|
||||
// Buttons and things that look like buttons
|
||||
//
|
||||
// stylelint-disable color-named
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.3em;
|
||||
padding-right: 1em;
|
||||
padding-bottom: 0.3em;
|
||||
padding-left: 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: 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: 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);
|
||||
}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
//
|
||||
// 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
|
||||
|
||||
code {
|
||||
padding: 0.2em 0.15em;
|
||||
font-weight: 400;
|
||||
background-color: $code-background-color;
|
||||
border: $border $border-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
pre.highlight {
|
||||
padding: $sp-3;
|
||||
margin-bottom: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: $code-background-color;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
margin-bottom: $sp-3;
|
||||
overflow: hidden;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.highlight .c { color: #999988; font-style: italic } /* Comment */
|
||||
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
||||
.highlight .k { color: #000000; font-weight: bold } /* Keyword */
|
||||
.highlight .o { color: #000000; font-weight: bold } /* Operator */
|
||||
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
||||
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #aa0000 } /* Generic.Error */
|
||||
.highlight .gh { color: #999999 } /* Generic.Heading */
|
||||
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
||||
.highlight .go { color: #888888 } /* Generic.Output */
|
||||
.highlight .gp { color: #555555 } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
|
||||
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: #009999 } /* Literal.Number */
|
||||
.highlight .s { color: #d01040 } /* Literal.String */
|
||||
.highlight .na { color: #008080 } /* Name.Attribute */
|
||||
.highlight .nb { color: #0086B3 } /* Name.Builtin */
|
||||
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: #008080 } /* Name.Constant */
|
||||
.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
||||
.highlight .ni { color: #800080 } /* Name.Entity */
|
||||
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
|
||||
.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
|
||||
.highlight .nn { color: #555555 } /* Name.Namespace */
|
||||
.highlight .nt { color: #000080 } /* Name.Tag */
|
||||
.highlight .nv { color: #008080 } /* Name.Variable */
|
||||
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #009999 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #d01040 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #d01040 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #d01040 } /* Literal.String.Double */
|
||||
.highlight .se { color: #d01040 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #d01040 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #d01040 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #009926 } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #d01040 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #008080 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #008080 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
|
||||
//
|
||||
// Code examples (rendered)
|
||||
//
|
||||
|
||||
.code-example {
|
||||
padding: $sp-3;
|
||||
margin-bottom: $sp-3;
|
||||
overflow: auto;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
+ .highlighter-rouge,
|
||||
+ 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
$body-background-color: $grey-dk-300;
|
||||
$sidebar-color: $grey-dk-300;
|
||||
$border-color: $grey-dk-200;
|
||||
|
||||
$body-text-color: $grey-lt-300;
|
||||
$body-heading-color: $grey-lt-000;
|
||||
$nav-child-link-color: $grey-dk-000;
|
||||
|
||||
$link-color: $blue-000;
|
||||
$btn-primary-color: $blue-200;
|
||||
$base-button-color: $grey-dk-250;
|
||||
|
||||
$code-background-color: $grey-dk-250;
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
@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
|
||||
|
||||
.page-content {
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
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 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.task-list-item-checkbox {
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
hr + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1:first-of-type {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
// //
|
||||
// // Typography
|
||||
// //
|
||||
//
|
||||
// $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
|
||||
// $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
|
||||
// $root-font-size: 16px; // Base font-size for rems
|
||||
// $body-line-height: 1.4;
|
||||
// $body-heading-line-height: 1.15;
|
||||
//
|
||||
// //
|
||||
// // Colors
|
||||
// //
|
||||
//
|
||||
// $white: #fff;
|
||||
//
|
||||
// $grey-dk-000: #959396;
|
||||
// $grey-dk-100: #5c5962;
|
||||
// $grey-dk-200: #44434d;
|
||||
// $grey-dk-250: #302d36 !default;
|
||||
// $grey-dk-300: #27262b;
|
||||
//
|
||||
// $grey-lt-000: #f5f6fa;
|
||||
// $grey-lt-100: #eeebee;
|
||||
// $grey-lt-200: #ecebed;
|
||||
// $grey-lt-300: #e6e1e8;
|
||||
//
|
||||
// $purple-000: #7253ed;
|
||||
// $purple-100: #5e41d0;
|
||||
// $purple-200: #4e26af;
|
||||
// $purple-300: #381885;
|
||||
//
|
||||
// $blue-000: #2c84fa;
|
||||
// $blue-100: #2869e6;
|
||||
// $blue-200: #264caf;
|
||||
// $blue-300: #183385;
|
||||
//
|
||||
// $green-000: #41d693;
|
||||
// $green-100: #11b584;
|
||||
// $green-200: #009c7b;
|
||||
// $green-300: #026e57;
|
||||
//
|
||||
// $body-background-color: $white !default;
|
||||
// $sidebar-color: $grey-lt-000 !default;
|
||||
// $code-background-color: $grey-lt-000 !default;
|
||||
|
||||
// $body-text-color: $grey-dk-100 !default;
|
||||
// $body-heading-color: $grey-dk-300 !default;
|
||||
// $nav-child-link-color: $grey-dk-100 !default;
|
||||
// $link-color: $purple-000 !default;
|
||||
// $btn-primary-color: $purple-100 !default;
|
||||
// $base-button-color: #f7f7f7 !default;
|
||||
//
|
||||
// //
|
||||
// // Media queries in pixels
|
||||
// //
|
||||
//
|
||||
// $media-queries: (
|
||||
// xs: 320px,
|
||||
// sm: 500px,
|
||||
// md: 740px,
|
||||
// lg: 1120px,
|
||||
// xl: 1400px
|
||||
// );
|
||||
//
|
||||
// //
|
||||
// // 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
|
||||
// );
|
||||
//
|
||||
// $sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
|
||||
// $sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
|
||||
// $sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
|
||||
// $sp-4: map-get($spacers, sp-4); // 1 rem == 16px
|
||||
// $sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
|
||||
// $sp-6: map-get($spacers, sp-6); // 2 rem == 32px
|
||||
// $sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
|
||||
// $sp-8: map-get($spacers, sp-8); // 3 rem == 48px
|
||||
// $sp-9: map-get($spacers, sp-9); // 4 rem == 48px
|
||||
// $sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px
|
||||
//
|
||||
// //
|
||||
// // Borders
|
||||
// //
|
||||
//
|
||||
// $border: 1px solid;
|
||||
// $border-radius: 4px;
|
||||
// $border-color: $grey-lt-100;
|
||||
//
|
||||
// //
|
||||
// // Grid system
|
||||
// //
|
||||
//
|
||||
// $gutter-spacing: $sp-6;
|
||||
// $gutter-spacing-sm: $sp-4;
|
||||
// $nav-width: 232px;
|
||||
// $content-width: 800px;
|
||||
//
|
||||
// $media-queries: (
|
||||
// xs: 320px,
|
||||
// sm: 500px,
|
||||
// md: 740px,
|
||||
// lg: 800px,
|
||||
// xl: 1316px
|
||||
// );
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
//
|
||||
// Labels (not the form kind)
|
||||
//
|
||||
|
||||
.label,
|
||||
.label-blue {
|
||||
display: inline-block;
|
||||
padding-top: 0.16em;
|
||||
padding-right: 0.42em;
|
||||
padding-bottom: 0.16em;
|
||||
padding-left: 0.42em;
|
||||
margin-right: $sp-1;
|
||||
margin-left: $sp-1;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
background-color: $blue-100;
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.label-green {
|
||||
background-color: $green-200;
|
||||
}
|
||||
|
||||
.label-purple {
|
||||
background-color: $purple-100;
|
||||
}
|
||||
|
||||
.label-red {
|
||||
background-color: $red-200;
|
||||
}
|
||||
|
||||
.label-yellow {
|
||||
color: $grey-dk-200;
|
||||
background-color: $yellow-200;
|
||||
}
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
//
|
||||
// The basic two column layout
|
||||
//
|
||||
|
||||
.page-wrap {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
flex-wrap: nowrap;
|
||||
position: absolute;
|
||||
width: $nav-width + 16px;
|
||||
height: 100%;
|
||||
padding-top: $gutter-spacing * 2;
|
||||
padding-bottom: 0;
|
||||
flex-direction: column;
|
||||
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-content-wrap {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: $gutter-spacing-sm;
|
||||
@include container;
|
||||
|
||||
@include mq(md) {
|
||||
position: relative;
|
||||
max-width: $content-width;
|
||||
padding-top: $gutter-spacing;
|
||||
padding-bottom: $gutter-spacing;
|
||||
padding-left: $gutter-spacing * 1.5;
|
||||
margin-left: $nav-width;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
padding-left: $gutter-spacing;
|
||||
margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
|
||||
}
|
||||
}
|
||||
|
||||
.js-main-content:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 0;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
height: 60px;
|
||||
padding-top: $sp-4;
|
||||
padding-bottom: $sp-4;
|
||||
border-bottom: $border $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation,
|
||||
.site-title,
|
||||
.site-footer {
|
||||
|
||||
@include container;
|
||||
|
||||
width: 100%;
|
||||
|
||||
@include mq(lg) {
|
||||
width: $nav-width + 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@include mq(md) {
|
||||
padding-top: $sp-8;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-no-type
|
||||
body {
|
||||
position: relative;
|
||||
padding-bottom: $sp-10;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
// stylelint-enable selector-no-type
|
||||
|
||||
.site-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-top: $sp-4;
|
||||
padding-bottom: $sp-4;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
align-self: flex-end;
|
||||
justify-self: end;
|
||||
background-color: $sidebar-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
//
|
||||
// Main nav, breadcrumb, etc...
|
||||
//
|
||||
|
||||
.site-title {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
color: $body-heading-color;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
height: 60px;
|
||||
padding-top: $sp-4;
|
||||
border-bottom: $border $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list {
|
||||
padding: 0;
|
||||
margin-top: $sp-4;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
@include mq(md) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-child-list {
|
||||
padding-left: $sp-3;
|
||||
list-style: none;
|
||||
|
||||
.navigation-list-link {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
margin-top: 0.3em;
|
||||
margin-left: -0.8em;
|
||||
color: rgba($body-text-color, 0.3);
|
||||
content: "- ";
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
color: $body-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
@include fs-4;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.navigation-list-child-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.navigation-list-child-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-link {
|
||||
display: block;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $body-heading-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Small screen nav
|
||||
|
||||
.main-nav,
|
||||
.aux-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-toggle {
|
||||
position: absolute;
|
||||
right: $sp-4;
|
||||
|
||||
@include mq(md) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 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,114 @@
|
|||
//
|
||||
// Search input and autocomplete
|
||||
//
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
display: none;
|
||||
flex-grow: 1;
|
||||
padding: $sp-2;
|
||||
margin-bottom: $sp-3;
|
||||
background-color: $white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
padding-top: $sp-1;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-wrap {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
position: absolute;
|
||||
top: $sp-1;
|
||||
z-index: 100;
|
||||
display: block;
|
||||
width: 300px;
|
||||
margin-top: $gutter-spacing;
|
||||
background: lighten($body-background-color, 1%);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
display: flex;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
background-color: $body-background-color;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
order: 2;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
|
||||
+ .search-icon {
|
||||
fill: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include fs-5;
|
||||
|
||||
@include mq(sm) {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-2;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
align-self: center;
|
||||
margin-right: $sp-2;
|
||||
fill: $grey-dk-000;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.search-results-list {
|
||||
padding-left: 0;
|
||||
margin-top: $sp-1;
|
||||
margin-bottom: $sp-1;
|
||||
list-style: none;
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.search-results-list-item {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-results-link {
|
||||
display: block;
|
||||
padding-top: $sp-1;
|
||||
padding-right: $sp-3;
|
||||
padding-bottom: $sp-1;
|
||||
padding-left: $sp-3;
|
||||
|
||||
&:hover {
|
||||
color: $body-heading-color;
|
||||
background-color: darken($body-background-color, 2%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@function rem($size, $unit:"") {
|
||||
$remSize: $size / $root-font-size;
|
||||
|
||||
@if ($unit == false) {
|
||||
@return #{$remSize};
|
||||
}
|
||||
@else {
|
||||
@return #{$remSize}rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
//
|
||||
// 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 !default;
|
||||
$body-heading-line-height: 1.15 !default !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;
|
||||
|
||||
$body-background-color: $white !default;
|
||||
$sidebar-color: $grey-lt-000 !default;
|
||||
$code-background-color: $grey-lt-000 !default;
|
||||
|
||||
$body-text-color: $grey-dk-100 !default;
|
||||
$body-heading-color: $grey-dk-300 !default;
|
||||
$nav-child-link-color: $grey-dk-100 !default;
|
||||
$link-color: $purple-000 !default;
|
||||
$btn-primary-color: $purple-100 !default;
|
||||
$base-button-color: #f7f7f7 !default;
|
||||
|
||||
//
|
||||
// Media queries in pixels
|
||||
//
|
||||
|
||||
$media-queries: (
|
||||
xs: 320px,
|
||||
sm: 500px,
|
||||
md: 740px,
|
||||
lg: 1120px,
|
||||
xl: 1400px
|
||||
) !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; // 4 rem == 48px
|
||||
$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px
|
||||
|
||||
//
|
||||
// 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: 232px !default;
|
||||
$content-width: 800px !default;
|
||||
|
||||
$media-queries: (
|
||||
xs: 320px,
|
||||
sm: 500px,
|
||||
md: 740px,
|
||||
lg: 800px,
|
||||
xl: 1316px
|
||||
) !default;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// 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,36 @@
|
|||
// 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 != null {
|
||||
// Prints a media query based on the value
|
||||
@media (min-width: rem($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,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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import "./layout";
|
||||
@import "./buttons";
|
||||
@import "./typography";
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import "./variables";
|
||||
@import "./functions";
|
||||
@import "./mixins/mixins";
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
//
|
||||
// Tables
|
||||
//
|
||||
// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $sp-5;
|
||||
overflow-x: auto;
|
||||
border-collapse: separate;
|
||||
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,
|
||||
td {
|
||||
@include fs-3;
|
||||
min-width: 120px;
|
||||
padding-top: $sp-2;
|
||||
padding-right: $sp-3;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: $sp-3;
|
||||
background-color: lighten($body-background-color, 2%);
|
||||
border-bottom: $border rgba($border-color, 0.5);
|
||||
border-left: $border $border-color;
|
||||
|
||||
&:first-of-type {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody:first-child {
|
||||
tr {
|
||||
&:first-of-type {
|
||||
th,
|
||||
td {
|
||||
&:first-of-type {
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:last-of-type {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 0;
|
||||
|
||||
&:first-of-type {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
//
|
||||
// Typography
|
||||
//
|
||||
// stylelint-disable primer/selector-no-utility, selector-no-type, selector-max-type
|
||||
|
||||
h1,
|
||||
.text-alpha {
|
||||
@include fs-8;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2,
|
||||
.text-beta {
|
||||
@include fs-6;
|
||||
}
|
||||
|
||||
h3,
|
||||
.text-gamma {
|
||||
@include fs-5;
|
||||
}
|
||||
|
||||
h4,
|
||||
.text-delta {
|
||||
@include fs-2;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
h5,
|
||||
.text-epsilon {
|
||||
@include fs-3;
|
||||
color: $grey-dk-200;
|
||||
}
|
||||
|
||||
h6,
|
||||
.text-zeta {
|
||||
@include fs-2;
|
||||
color: $grey-dk-200;
|
||||
}
|
||||
|
||||
li {
|
||||
.highlight {
|
||||
margin-top: $sp-2;
|
||||
}
|
||||
}
|
||||
|
||||
.text-small {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: $mono-font-family !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
//
|
||||
// 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,38 @@
|
|||
// stylelint-disable primer/selector-no-utility
|
||||
//
|
||||
// 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; }
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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,11 @@
|
|||
//
|
||||
// Utility classes for lists
|
||||
//
|
||||
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
.list-style-none {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
//
|
||||
// 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) {
|
||||
$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-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,91 @@
|
|||
//
|
||||
// Utility classes for typography
|
||||
//
|
||||
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// stylelint-enable primer/selector-no-utility
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import "./colors";
|
||||
@import "./layout";
|
||||
@import "./typography";
|
||||
@import "./lists";
|
||||
@import "./spacing";
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
# normalize.scss v0.1.0
|
||||
|
||||
Normalize.scss is the SCSS version of [normalize.css](http://necolas.github.io/normalize.css), a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
|
||||
|
||||
[View the normalize.css test file](http://necolas.github.io/normalize.css/latest/test.html)
|
||||
|
||||
## Install
|
||||
|
||||
* [npm](http://npmjs.org/): `npm install --save normalize.scss`
|
||||
* [Component(1)](https://github.com/component/component/): `component install guerrero/normalize.scss`
|
||||
* [Bower](http://bower.io/): `bower install --save normalize.scss`
|
||||
* Download: Go to [this link](https://raw.githubusercontent.com/guerrero/normalize.scss/master/normalize.scss), press right-click on the page and choose "Save as..."
|
||||
|
||||
No other styles should come before Normalize.scss.
|
||||
|
||||
It's recommendable to modify `normalize.scss` to suit it to your project
|
||||
|
||||
## What does it do?
|
||||
|
||||
* Preserves useful defaults, unlike many CSS resets.
|
||||
* Normalizes styles for a wide range of elements.
|
||||
* Corrects bugs and common browser inconsistencies.
|
||||
* Improves usability with subtle improvements.
|
||||
* Explains what code does using detailed comments.
|
||||
|
||||
## Browser support
|
||||
|
||||
* Google Chrome (latest)
|
||||
* Mozilla Firefox (latest)
|
||||
* Mozilla Firefox 4
|
||||
* Opera (latest)
|
||||
* Apple Safari 6+
|
||||
* Internet Explorer 8+
|
||||
|
||||
[Normalize.css v1 provides legacy browser
|
||||
support](https://github.com/necolas/normalize.css/tree/v1) (IE 6+, Safari 4+),
|
||||
but is no longer actively developed.
|
||||
|
||||
## Extended details
|
||||
|
||||
Additional detail and explanation of the esoteric parts of normalize.css.
|
||||
|
||||
#### `pre, code, kbd, samp`
|
||||
|
||||
The `font-family: monospace, monospace` hack fixes the inheritance and scaling
|
||||
of font-size for preformated text. The duplication of `monospace` is
|
||||
intentional. [Source](http://en.wikipedia.org/wiki/User:Davidgothberg/Test59).
|
||||
|
||||
#### `sub, sup`
|
||||
|
||||
Normally, using `sub` or `sup` affects the line-box height of text in all
|
||||
browsers. [Source](http://gist.github.com/413930).
|
||||
|
||||
#### `svg:not(:root)`
|
||||
|
||||
Adding `overflow: hidden` fixes IE9's SVG rendering. Earlier versions of IE
|
||||
don't support SVG, so we can safely use the `:not()` and `:root` selectors that
|
||||
modern browsers use in the default UA stylesheets to apply this style. [SVG
|
||||
Mailing List discussion](http://lists.w3.org/Archives/Public/public-svg-wg/2008JulSep/0339.html)
|
||||
|
||||
#### `input[type="search"]`
|
||||
|
||||
The search input is not fully stylable by default. In Chrome and Safari on
|
||||
OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
|
||||
Chrome and Safari on Windows you can't control `border` properly. It will apply
|
||||
`border-width` but will only show a border color (which cannot be controlled)
|
||||
for the outer 1px of that border. Applying `-webkit-appearance: textfield`
|
||||
addresses these issues without removing the benefits of search inputs (e.g.
|
||||
showing past searches).
|
||||
|
||||
#### `legend`
|
||||
|
||||
Adding `border: 0` corrects an IE 8–11 bug where `color` (yes, `color`) is not
|
||||
inherited by `legend`.
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
Normalize.scss is a project by [Alex Guerrero](https://github.com/guerrero) based on [normalize.css](http://necolas.github.io/normalize.css) from [Nicolas Gallagher](https://github.com/necolas), co-created with [Jonathan Neal](https://github.com/jonathantneal).
|
||||
|
|
@ -0,0 +1,427 @@
|
|||
/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
{
|
||||
"_args": [
|
||||
[
|
||||
"normalize.scss",
|
||||
"/Users/pmarsceill/_projects/just-the-docs"
|
||||
]
|
||||
],
|
||||
"_from": "normalize.scss@*",
|
||||
"_id": "normalize.scss@0.1.0",
|
||||
"_inCache": true,
|
||||
"_installable": true,
|
||||
"_location": "/normalize.scss",
|
||||
"_nodeVersion": "0.10.32",
|
||||
"_npmUser": {
|
||||
"email": "alexguerrero1092@gmail.com",
|
||||
"name": "alexguerrero"
|
||||
},
|
||||
"_npmVersion": "2.0.2",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"name": "normalize.scss",
|
||||
"raw": "normalize.scss",
|
||||
"rawSpec": "",
|
||||
"scope": null,
|
||||
"spec": "*",
|
||||
"type": "range"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#DEV:/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/normalize.scss/-/normalize.scss-0.1.0.tgz",
|
||||
"_shasum": "4a21dc25bd4c019c857785f829b658aba2a8f9ab",
|
||||
"_shrinkwrap": null,
|
||||
"_spec": "normalize.scss",
|
||||
"_where": "/Users/pmarsceill/_projects/just-the-docs",
|
||||
"author": "",
|
||||
"bugs": {
|
||||
"url": "https://github.com/guerrero/normalize.scss/issues"
|
||||
},
|
||||
"dependencies": {},
|
||||
"description": "Normalize.scss as a node packaged module",
|
||||
"devDependencies": {},
|
||||
"directories": {},
|
||||
"dist": {
|
||||
"shasum": "4a21dc25bd4c019c857785f829b658aba2a8f9ab",
|
||||
"tarball": "https://registry.npmjs.org/normalize.scss/-/normalize.scss-0.1.0.tgz"
|
||||
},
|
||||
"files": [
|
||||
"normalize.scss"
|
||||
],
|
||||
"gitHead": "d67d517e28615a873066438af1d4845c157c9baf",
|
||||
"homepage": "https://github.com/guerrero/normalize.scss",
|
||||
"license": "MIT",
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "alexguerrero",
|
||||
"email": "alexguerrero1092@gmail.com"
|
||||
}
|
||||
],
|
||||
"name": "normalize.scss",
|
||||
"optionalDependencies": {},
|
||||
"readme": "ERROR: No README data found!",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/guerrero/normalize.scss.git"
|
||||
},
|
||||
"scripts": {},
|
||||
"style": "normalize.scss",
|
||||
"version": "0.1.0"
|
||||
}
|
||||
Loading…
Reference in New Issue