mirror of
https://github.com/valentineus/popov.link.git
synced 2025-11-04 06:49:45 +03:00
Complete redesign of site styles
Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
1
_scss/base/_bootstrap.scss
Normal file
1
_scss/base/_bootstrap.scss
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import 'bootstrap/assets/stylesheets/bootstrap';
|
||||||
File diff suppressed because one or more lines are too long
@@ -1,6 +1,3 @@
|
|||||||
/*! pygments-css | github.com/richleland/pygments-css */
|
|
||||||
|
|
||||||
// Tango theme
|
|
||||||
$color01: #000;
|
$color01: #000;
|
||||||
$color02: #000080;
|
$color02: #000080;
|
||||||
$color03: #0000cf;
|
$color03: #0000cf;
|
||||||
|
|||||||
@@ -1,27 +1,2 @@
|
|||||||
@import 'components/variables';
|
@import 'components/core';
|
||||||
|
@import 'components/image';
|
||||||
// Basic styles
|
|
||||||
@import 'components/core/basis';
|
|
||||||
@import 'components/core/grid';
|
|
||||||
|
|
||||||
// Styles of the main theme
|
|
||||||
@import 'components/theme/background';
|
|
||||||
@import 'components/theme/blockquote';
|
|
||||||
@import 'components/theme/buttons';
|
|
||||||
@import 'components/theme/code';
|
|
||||||
@import 'components/theme/divider';
|
|
||||||
@import 'components/theme/form';
|
|
||||||
@import 'components/theme/image';
|
|
||||||
@import 'components/theme/link';
|
|
||||||
@import 'components/theme/list';
|
|
||||||
@import 'components/theme/spacing';
|
|
||||||
@import 'components/theme/table';
|
|
||||||
@import 'components/theme/typography';
|
|
||||||
|
|
||||||
// Individual styles
|
|
||||||
@import 'components/elements/comments';
|
|
||||||
@import 'components/elements/content';
|
|
||||||
@import 'components/elements/footer';
|
|
||||||
@import 'components/elements/listposts';
|
|
||||||
@import 'components/elements/navigation';
|
|
||||||
@import 'components/elements/sociallinks';
|
|
||||||
|
|||||||
@@ -1,371 +0,0 @@
|
|||||||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
|
||||||
|
|
||||||
/* Document
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the line height in all browsers.
|
|
||||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
line-height: 1.15;
|
|
||||||
/* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sections
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the margin in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the font size and margin on `h1` elements within `section` and
|
|
||||||
* `article` contexts in Chrome, Firefox, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grouping content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Add the correct box sizing in Firefox.
|
|
||||||
* 2. Show the overflow in Edge and IE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box;
|
|
||||||
/* 1 */
|
|
||||||
height: 0;
|
|
||||||
/* 1 */
|
|
||||||
overflow: visible;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-family: monospace, monospace;
|
|
||||||
/* 1 */
|
|
||||||
font-size: 1em;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text-level semantics
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the gray background on active links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Remove the bottom border in Chrome 57-
|
|
||||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: none;
|
|
||||||
/* 1 */
|
|
||||||
text-decoration: underline;
|
|
||||||
/* 2 */
|
|
||||||
text-decoration: underline dotted;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace;
|
|
||||||
/* 1 */
|
|
||||||
font-size: 1em;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font size in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
|
||||||
* all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Embedded content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the border on images inside links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forms
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Change the font styles in all browsers.
|
|
||||||
* 2. Remove the margin in Firefox and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
/* 1 */
|
|
||||||
font-size: 100%;
|
|
||||||
/* 1 */
|
|
||||||
line-height: 1.15;
|
|
||||||
/* 1 */
|
|
||||||
margin: 0;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Show the overflow in IE.
|
|
||||||
* 1. Show the overflow in Edge.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input {
|
|
||||||
/* 1 */
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
||||||
* 1. Remove the inheritance of text transform in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
/* 1 */
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type="button"],
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inner border and padding in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
[type="button"]::-moz-focus-inner,
|
|
||||||
[type="reset"]::-moz-focus-inner,
|
|
||||||
[type="submit"]::-moz-focus-inner {
|
|
||||||
border-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Restore the focus styles unset by the previous rule.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button:-moz-focusring,
|
|
||||||
[type="button"]:-moz-focusring,
|
|
||||||
[type="reset"]:-moz-focusring,
|
|
||||||
[type="submit"]:-moz-focusring {
|
|
||||||
outline: 1px dotted ButtonText;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the padding in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
padding: 0.35em 0.75em 0.625em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the text wrapping in Edge and IE.
|
|
||||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
|
||||||
* 3. Remove the padding so developers are not caught out when they zero out
|
|
||||||
* `fieldset` elements in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
legend {
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* 1 */
|
|
||||||
color: inherit;
|
|
||||||
/* 2 */
|
|
||||||
display: table;
|
|
||||||
/* 1 */
|
|
||||||
max-width: 100%;
|
|
||||||
/* 1 */
|
|
||||||
padding: 0;
|
|
||||||
/* 3 */
|
|
||||||
white-space: normal;
|
|
||||||
/* 1 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
||||||
*/
|
|
||||||
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the default vertical scrollbar in IE 10+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Add the correct box sizing in IE 10.
|
|
||||||
* 2. Remove the padding in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="checkbox"],
|
|
||||||
[type="radio"] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* 1 */
|
|
||||||
padding: 0;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the odd appearance in Chrome and Safari.
|
|
||||||
* 2. Correct the outline style in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"] {
|
|
||||||
-webkit-appearance: textfield;
|
|
||||||
/* 1 */
|
|
||||||
outline-offset: -2px;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inner padding in Chrome and Safari on macOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
* 2. Change font properties to `inherit` in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
/* 1 */
|
|
||||||
font: inherit;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Interactive
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
details {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Misc
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct display in IE 10+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct display in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
18
_scss/components/_core.scss
Normal file
18
_scss/components/_core.scss
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
@import 'utilities/boxsizing';
|
||||||
|
@import 'utilities/textsizeadjust';
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::after,
|
||||||
|
*::before {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
@include text-size-adjust(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
4
_scss/components/_image.scss
Normal file
4
_scss/components/_image.scss
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
// ...
|
|
||||||
$color-initial: #fff;
|
|
||||||
$color-primary: #9b4dca;
|
|
||||||
$color-quaternary: #d1d1d1;
|
|
||||||
$color-quinary: #e1e1e1;
|
|
||||||
$color-secondary: #606c76;
|
|
||||||
$color-tertiary: #f4f5f6;
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
@import 'utilities/boxsizing';
|
|
||||||
@import 'utilities/textsizeadjust';
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::after,
|
|
||||||
*::before {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
@include text-size-adjust(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 62.5%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: $color-secondary;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Roboto, Cantarell, 'Droid Sans', 'Fira Sans', Helvetica, 'Helvetica Neue', 'Helvetica Neue', Oxygen, 'Segoe UI', Ubuntu, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
letter-spacing: .01em;
|
|
||||||
line-height: 1.6;
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 128rem;
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 2rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
@import 'utilities/flexbox';
|
|
||||||
|
|
||||||
body {
|
|
||||||
@include flexbox();
|
|
||||||
@include flex-basis(auto);
|
|
||||||
@include flex-direction(column);
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
@include flexbox();
|
|
||||||
@include flex-basis(auto);
|
|
||||||
@include flex-grow(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation {
|
|
||||||
@include flexbox();
|
|
||||||
@include flex-shrink(0);
|
|
||||||
@include justify-content(flex-end);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
@include flexbox();
|
|
||||||
@include flex-basis(auto);
|
|
||||||
@include flex-direction(column);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
@include flexbox();
|
|
||||||
@include flex-shrink(0);
|
|
||||||
@include justify-content(center);
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
.comments {
|
|
||||||
border-top: .1rem solid $color-tertiary;
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
.content {
|
|
||||||
min-width: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
.footer {
|
|
||||||
padding-top: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: 0 .5rem;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
.post-item {
|
|
||||||
border-left: .3rem solid $color-primary;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
.navigation {
|
|
||||||
padding: 0 .5rem 1rem;
|
|
||||||
text-align: right;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: 0 .5rem;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
.social-links {
|
|
||||||
padding-bottom: 4rem;
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
@@ -1,10 +0,0 @@
|
|||||||
blockquote {
|
|
||||||
border-left: .3rem solid $color-quaternary;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
@import 'utilities/borderradius';
|
|
||||||
|
|
||||||
.button,
|
|
||||||
button,
|
|
||||||
input[type='button'],
|
|
||||||
input[type='reset'],
|
|
||||||
input[type='submit'] {
|
|
||||||
background-color: $color-primary;
|
|
||||||
border: .1rem solid $color-primary;
|
|
||||||
color: $color-initial;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
height: 3.8rem;
|
|
||||||
letter-spacing: .1rem;
|
|
||||||
line-height: 3.8rem;
|
|
||||||
padding: 0 3rem;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: uppercase;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
@include border-radius(.4rem);
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-secondary;
|
|
||||||
border-color: $color-secondary;
|
|
||||||
color: $color-initial;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled] {
|
|
||||||
cursor: default;
|
|
||||||
opacity: .5;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-primary;
|
|
||||||
border-color: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.button-outline {
|
|
||||||
background-color: transparent;
|
|
||||||
color: $color-primary;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: $color-secondary;
|
|
||||||
color: $color-secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled] {
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
border-color: inherit;
|
|
||||||
color: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.button-clear {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: $color-primary;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: $color-secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled] {
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
color: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
@import 'utilities/borderradius';
|
|
||||||
|
|
||||||
code {
|
|
||||||
background: $color-tertiary;
|
|
||||||
font-size: 86%;
|
|
||||||
margin: 0 .2rem;
|
|
||||||
padding: .2rem .5rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
@include border-radius(.4rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
background: $color-tertiary;
|
|
||||||
border-left: .3rem solid $color-primary;
|
|
||||||
overflow-x: auto;
|
|
||||||
|
|
||||||
& > code {
|
|
||||||
display: block;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
white-space: pre;
|
|
||||||
|
|
||||||
@include border-radius(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
hr {
|
|
||||||
border: 0;
|
|
||||||
border-top: .1rem solid $color-tertiary;
|
|
||||||
margin: 3rem 0;
|
|
||||||
}
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
@import 'utilities/appearance';
|
|
||||||
@import 'utilities/borderradius';
|
|
||||||
@import 'utilities/boxshadow';
|
|
||||||
@import 'utilities/boxsizing';
|
|
||||||
|
|
||||||
input:not([type]),
|
|
||||||
input[type='color'],
|
|
||||||
input[type='date'],
|
|
||||||
input[type='datetime'],
|
|
||||||
input[type='datetime-local'],
|
|
||||||
input[type='email'],
|
|
||||||
input[type='month'],
|
|
||||||
input[type='number'],
|
|
||||||
input[type='password'],
|
|
||||||
input[type='search'],
|
|
||||||
input[type='tel'],
|
|
||||||
input[type='text'],
|
|
||||||
input[type='url'],
|
|
||||||
input[type='week'],
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
background-color: transparent;
|
|
||||||
border: .1rem solid $color-quaternary;
|
|
||||||
height: 3.8rem;
|
|
||||||
padding: .6rem 1rem;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include appearance(none);
|
|
||||||
@include border-radius(.4rem);
|
|
||||||
@include box-shadow(none);
|
|
||||||
@include box-sizing(inherit);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: $color-primary;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
padding-right: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
min-height: 6.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
label,
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='checkbox'],
|
|
||||||
input[type='radio'] {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-inline {
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: normal;
|
|
||||||
margin-left: .5rem;
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
@import 'utilities/boxshadow';
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include box-shadow(0 0 10px rgba(0, 0, 0, .5));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullscreen {
|
|
||||||
background: rgba(0, 0, 0, .5);
|
|
||||||
display: none;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
position: fixed;
|
|
||||||
text-align: center;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:target {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-top: 10rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
a {
|
|
||||||
color: $color-primary;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
color: $color-secondary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
dl,
|
|
||||||
ol,
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
dl,
|
|
||||||
ol,
|
|
||||||
ul {
|
|
||||||
font-size: 90%;
|
|
||||||
margin: 1.5rem 0 1.5rem 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style: decimal inside;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: circle inside;
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
.button,
|
|
||||||
button,
|
|
||||||
dd,
|
|
||||||
dt,
|
|
||||||
li {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote,
|
|
||||||
dl,
|
|
||||||
figure,
|
|
||||||
form,
|
|
||||||
ol,
|
|
||||||
p,
|
|
||||||
pre,
|
|
||||||
table,
|
|
||||||
ul {
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
table {
|
|
||||||
border-spacing: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
border-bottom: .1rem solid $color-quinary;
|
|
||||||
padding: 1.2rem 1.5rem;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-weight: 300;
|
|
||||||
letter-spacing: .01em;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 4.6rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 3.6rem;
|
|
||||||
line-height: 1.25;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 2.8rem;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
line-height: 1.35;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
// Appearance
|
|
||||||
//
|
|
||||||
// The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.
|
|
||||||
//
|
|
||||||
// Values: auto | none
|
|
||||||
// Default: auto
|
|
||||||
//
|
|
||||||
// http://www.w3.org/TR/css3-ui/#appearance
|
|
||||||
@mixin appearance($value: auto) {
|
|
||||||
-webkit-appearance: $value;
|
|
||||||
-moz-appearance: $value;
|
|
||||||
appearance: $value;
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
// Border Radius
|
|
||||||
//
|
|
||||||
// The border-radius CSS property lets you round the corners of an element's outer border edge. You can specify a single radius to make circular corners, or two radii to make elliptical corners.
|
|
||||||
//
|
|
||||||
// Values: <length-percentage> | <length-percentage>
|
|
||||||
// Default: 0
|
|
||||||
//
|
|
||||||
// https://www.w3.org/TR/css-backgrounds-3/#propdef-border-radius
|
|
||||||
@mixin border-radius($value: 0) {
|
|
||||||
-webkit-border-radius: $value;
|
|
||||||
-moz-border-radius: $value;
|
|
||||||
border-radius: $value;
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
// Box Shadow
|
|
||||||
//
|
|
||||||
// The box-shadow CSS property is used to add shadow effects around an element's frame. You can specify multiple effects separated by commas if you wish to do so. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
|
|
||||||
//
|
|
||||||
// Values: offset-x | offset-y | blur-radius | spread-radius | color
|
|
||||||
// Default: none
|
|
||||||
//
|
|
||||||
// https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow
|
|
||||||
@mixin box-shadow($value: none) {
|
|
||||||
-webkit-box-shadow: $value;
|
|
||||||
-moz-box-shadow: $value;
|
|
||||||
box-shadow: $value;
|
|
||||||
}
|
|
||||||
@@ -1,307 +0,0 @@
|
|||||||
// Flexbox Containers
|
|
||||||
//
|
|
||||||
// The 'flex' value causes an element to generate a block-level flex
|
|
||||||
// container box.
|
|
||||||
//
|
|
||||||
// Display: flex
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#flex-containers
|
|
||||||
@mixin flexbox() {
|
|
||||||
display: -moz-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox 'Flex' (shorthand)
|
|
||||||
//
|
|
||||||
// The 'flex' property specifies the components of a flexible length: the
|
|
||||||
// flex grow factor and flex shrink factor, and the flex basis. When an
|
|
||||||
// element is a flex item, 'flex' is consulted instead of the main size
|
|
||||||
// property to determine the main size of the element. If an element is
|
|
||||||
// not a flex item, 'flex' has no effect.
|
|
||||||
//
|
|
||||||
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
|
|
||||||
// Default: See individual properties (1 1 0)
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#flex-property
|
|
||||||
|
|
||||||
@mixin flex($fg: 1, $fs: null, $fb: null) {
|
|
||||||
|
|
||||||
$fg-boxflex: $fg;
|
|
||||||
|
|
||||||
@if type-of($fg) == 'list' {
|
|
||||||
$fg-boxflex: nth($fg, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
-webkit-box-flex: $fg-boxflex;
|
|
||||||
-moz-box-flex: $fg-boxflex;
|
|
||||||
-webkit-flex: $fg $fs $fb;
|
|
||||||
-moz-flex: $fg $fs $fb;
|
|
||||||
-ms-flex: $fg $fs $fb;
|
|
||||||
flex: $fg $fs $fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Direction
|
|
||||||
//
|
|
||||||
// The 'flex-direction' property specifies how flex items are placed in
|
|
||||||
// the flex container, by setting the direction of the flex container's
|
|
||||||
// main axis. This determines the direction that flex items are laid out in.
|
|
||||||
//
|
|
||||||
// Values: row | row-reverse | column | column-reverse
|
|
||||||
// Default: row
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#flex-direction-property
|
|
||||||
|
|
||||||
@mixin flex-direction($value: row) {
|
|
||||||
@if $value == 'row-reverse' {
|
|
||||||
-webkit-box-direction: reverse;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
} @else if $value == 'column' {
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
} @else if $value == 'column-reverse' {
|
|
||||||
-webkit-box-direction: reverse;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
} @else {
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
}
|
|
||||||
|
|
||||||
-webkit-flex-direction: $value;
|
|
||||||
-moz-flex-direction: $value;
|
|
||||||
-ms-flex-direction: $value;
|
|
||||||
flex-direction: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Wrap
|
|
||||||
//
|
|
||||||
// The 'flex-wrap' property controls whether the flex container is single-line
|
|
||||||
// or multi-line, and the direction of the cross-axis, which determines
|
|
||||||
// the direction new lines are stacked in.
|
|
||||||
//
|
|
||||||
// Values: nowrap | wrap | wrap-reverse
|
|
||||||
// Default: nowrap
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#flex-wrap-property
|
|
||||||
|
|
||||||
@mixin flex-wrap($value: nowrap) {
|
|
||||||
@if $value == 'nowrap' {
|
|
||||||
-ms-flex-wrap: none;
|
|
||||||
} @else {
|
|
||||||
-ms-flex-wrap: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
-webkit-flex-wrap: $value;
|
|
||||||
-moz-flex-wrap: $value;
|
|
||||||
flex-wrap: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Flow (shorthand)
|
|
||||||
//
|
|
||||||
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
|
|
||||||
// and 'flex-wrap' properties, which together define the flex container's
|
|
||||||
// main and cross axes.
|
|
||||||
//
|
|
||||||
// Values: <flex-direction> | <flex-wrap>
|
|
||||||
// Default: row nowrap
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#flex-flow-property
|
|
||||||
|
|
||||||
@mixin flex-flow($values: (row nowrap)) {
|
|
||||||
-webkit-flex-flow: $values;
|
|
||||||
-moz-flex-flow: $values;
|
|
||||||
-ms-flex-flow: $values;
|
|
||||||
flex-flow: $values;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Order
|
|
||||||
//
|
|
||||||
// The 'order' property controls the order in which flex items appear within
|
|
||||||
// their flex container, by assigning them to ordinal groups.
|
|
||||||
//
|
|
||||||
// Default: 0
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#order-property
|
|
||||||
|
|
||||||
@mixin flex-order($int: 0) {
|
|
||||||
-webkit-box-ordinal-group: $int;
|
|
||||||
-moz-box-ordinal-group: $int;
|
|
||||||
-ms-flex-order: $int;
|
|
||||||
-webkit-order: $int;
|
|
||||||
-moz-order: $int;
|
|
||||||
order: $int;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Grow
|
|
||||||
//
|
|
||||||
// The 'flex-grow' property sets the flex grow factor. Negative numbers
|
|
||||||
// are invalid.
|
|
||||||
//
|
|
||||||
// Default: 0
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#flex-grow-property
|
|
||||||
|
|
||||||
@mixin flex-grow($int: 0) {
|
|
||||||
-webkit-flex-grow: $int;
|
|
||||||
-ms-flex-positive: $int;
|
|
||||||
-webkit-box-flex: $int;
|
|
||||||
-moz-flex-grow: $int;
|
|
||||||
-ms-flex-grow: $int;
|
|
||||||
flex-grow: $int;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Shrink
|
|
||||||
//
|
|
||||||
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
|
|
||||||
// are invalid.
|
|
||||||
//
|
|
||||||
// Default: 1
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#flex-shrink-property
|
|
||||||
|
|
||||||
@mixin flex-shrink($int: 1) {
|
|
||||||
-webkit-flex-shrink: $int;
|
|
||||||
-ms-flex-negative: $int;
|
|
||||||
-moz-flex-shrink: $int;
|
|
||||||
-ms-flex-shrink: $int;
|
|
||||||
flex-shrink: $int;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Basis
|
|
||||||
//
|
|
||||||
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
|
|
||||||
//
|
|
||||||
// Values: Like 'width'
|
|
||||||
// Default: auto
|
|
||||||
//
|
|
||||||
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
|
|
||||||
|
|
||||||
@mixin flex-basis($value: auto) {
|
|
||||||
-ms-flex-preferred-size: $value;
|
|
||||||
-webkit-flex-basis: $value;
|
|
||||||
-moz-flex-basis: $value;
|
|
||||||
-ms-flex-basis: $value;
|
|
||||||
flex-basis: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Justify Content
|
|
||||||
//
|
|
||||||
// The 'justify-content' property aligns flex items along the main axis
|
|
||||||
// of the current line of the flex container. This is done after any flexible
|
|
||||||
// lengths and any auto margins have been resolved. Typically it helps distribute
|
|
||||||
// extra free space leftover when either all the flex items on a line are
|
|
||||||
// inflexible, or are flexible but have reached their maximum size. It also
|
|
||||||
// exerts some control over the alignment of items when they overflow the line.
|
|
||||||
//
|
|
||||||
// Note: 'space-*' values not supported in older syntaxes.
|
|
||||||
//
|
|
||||||
// Values: flex-start | flex-end | center | space-between | space-around
|
|
||||||
// Default: flex-start
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#justify-content-property
|
|
||||||
|
|
||||||
@mixin justify-content($value: flex-start) {
|
|
||||||
@if $value == 'flex-start' {
|
|
||||||
-webkit-box-pack: start;
|
|
||||||
-ms-flex-pack: start;
|
|
||||||
} @else if $value == 'flex-end' {
|
|
||||||
-webkit-box-pack: end;
|
|
||||||
-ms-flex-pack: end;
|
|
||||||
} @else if $value == 'space-between' {
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
-ms-flex-pack: justify;
|
|
||||||
} @else if $value == 'space-around' {
|
|
||||||
-ms-flex-pack: distribute;
|
|
||||||
} @else {
|
|
||||||
-webkit-box-pack: $value;
|
|
||||||
-ms-flex-pack: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
-webkit-justify-content: $value;
|
|
||||||
-moz-justify-content: $value;
|
|
||||||
-ms-justify-content: $value;
|
|
||||||
justify-content: $value;
|
|
||||||
-ms-flex-pack: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Align Content
|
|
||||||
//
|
|
||||||
// The 'align-content' property aligns a flex container's lines within the
|
|
||||||
// flex container when there is extra space in the cross-axis, similar to
|
|
||||||
// how 'justify-content' aligns individual items within the main-axis. Note,
|
|
||||||
// this property has no effect when the flexbox has only a single line.
|
|
||||||
//
|
|
||||||
// Values: flex-start | flex-end | center | space-between | space-around | stretch
|
|
||||||
// Default: stretch
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#align-content-property
|
|
||||||
|
|
||||||
@mixin align-content($value: stretch) {
|
|
||||||
@if $value == 'flex-start' {
|
|
||||||
-ms-flex-line-pack: start;
|
|
||||||
} @else if $value == 'flex-end' {
|
|
||||||
-ms-flex-line-pack: end;
|
|
||||||
} @else {
|
|
||||||
-ms-flex-line-pack: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
-webkit-align-content: $value;
|
|
||||||
-moz-align-content: $value;
|
|
||||||
-ms-align-content: $value;
|
|
||||||
align-content: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Align Items
|
|
||||||
//
|
|
||||||
// Flex items can be aligned in the cross axis of the current line of the
|
|
||||||
// flex container, similar to 'justify-content' but in the perpendicular
|
|
||||||
// direction. 'align-items' sets the default alignment for all of the flex
|
|
||||||
// container's items, including anonymous flex items. 'align-self' allows
|
|
||||||
// this default alignment to be overridden for individual flex items. (For
|
|
||||||
// anonymous flex items, 'align-self' always matches the value of 'align-items'
|
|
||||||
// on their associated flex container.)
|
|
||||||
//
|
|
||||||
// Values: flex-start | flex-end | center | baseline | stretch
|
|
||||||
// Default: stretch
|
|
||||||
//
|
|
||||||
// http://w3.org/tr/css3-flexbox/#align-items-property
|
|
||||||
|
|
||||||
@mixin align-items($value: stretch) {
|
|
||||||
@if $value == 'flex-start' {
|
|
||||||
-webkit-box-align: start;
|
|
||||||
-ms-flex-align: start;
|
|
||||||
} @else if $value == 'flex-end' {
|
|
||||||
-webkit-box-align: end;
|
|
||||||
-ms-flex-align: end;
|
|
||||||
} @else {
|
|
||||||
-webkit-box-align: $value;
|
|
||||||
-ms-flex-align: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
-webkit-align-items: $value;
|
|
||||||
-moz-align-items: $value;
|
|
||||||
-ms-align-items: $value;
|
|
||||||
align-items: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flexbox Align Self
|
|
||||||
//
|
|
||||||
// Values: auto | flex-start | flex-end | center | baseline | stretch
|
|
||||||
// Default: auto
|
|
||||||
|
|
||||||
@mixin align-self($value: auto) {
|
|
||||||
@if $value == 'flex-start' {
|
|
||||||
-ms-flex-item-align: start;
|
|
||||||
} @else if $value == 'flex-end' {
|
|
||||||
-ms-flex-item-align: end;
|
|
||||||
} @else {
|
|
||||||
-ms-flex-item-align: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
-webkit-align-self: $value;
|
|
||||||
-moz-align-self: $value;
|
|
||||||
-ms-align-self: $value;
|
|
||||||
align-self: $value;
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
# Use the web font.
|
|
||||||
---
|
|
||||||
|
|
||||||
@import 'base/fonts';
|
|
||||||
@@ -2,6 +2,6 @@
|
|||||||
# Loading site styles.
|
# Loading site styles.
|
||||||
---
|
---
|
||||||
|
|
||||||
@import 'base/normalize';
|
@import 'base/bootstrap';
|
||||||
@import 'base/highlight';
|
@import 'base/highlight';
|
||||||
@import 'base/main';
|
@import 'base/main';
|
||||||
Reference in New Issue
Block a user