191 lines
3.0 KiB
SCSS
191 lines
3.0 KiB
SCSS
@import "~normalize.css";
|
|
@import "./base";
|
|
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
|
|
|
|
html {
|
|
font-size: 62.5%;
|
|
}
|
|
|
|
body {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: Roboto, sans-serif;
|
|
font-size: 1.6rem;
|
|
user-select: none;
|
|
-webkit-touch-callout: none;
|
|
* {
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
|
|
a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite,
|
|
code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1,
|
|
h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label,
|
|
legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span,
|
|
strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
|
|
font-smoothing: antialiased;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]), button {
|
|
outline: none;
|
|
appearance: none;
|
|
-webkit-touch-callout: none;
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
// -- Material design font sizes
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
@include typo-display-3($color-contrast: true);
|
|
}
|
|
|
|
h1 {
|
|
@include typo-display-3;
|
|
}
|
|
|
|
h2 {
|
|
@include typo-display-2;
|
|
}
|
|
|
|
h3 {
|
|
@include typo-display-1;
|
|
}
|
|
|
|
h4 {
|
|
@include typo-headline;
|
|
}
|
|
|
|
h5 {
|
|
@include typo-title;
|
|
}
|
|
|
|
h6 {
|
|
@include typo-subhead;
|
|
}
|
|
|
|
p {
|
|
@include typo-body-1;
|
|
}
|
|
|
|
//-- Flex
|
|
[data-flex] {
|
|
display: flex;
|
|
}
|
|
|
|
body[data-flex] {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// -- Direction
|
|
[data-flex^="horizontal"] {
|
|
flex-direction: row;
|
|
}
|
|
|
|
[data-flex^="vertical"] {
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
// -- Size {
|
|
[data-flex*="grow"] {
|
|
> *:not([data-column]):not([data-flex-grow]) {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
[data-flex-grow="min"] {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
[data-flex-grow="max"] {
|
|
flex-grow: 2;
|
|
}
|
|
|
|
// -- Container properties
|
|
[data-flex*="wrap"] {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
[data-flex*="center"] {
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
[data-flex-justify="start"] {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
[data-flex-justify="center"] {
|
|
justify-content: center;
|
|
}
|
|
|
|
[data-flex-justify="end"] {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
[data-flex-content="start"] {
|
|
align-content: flex-start;
|
|
}
|
|
|
|
[data-flex-content="center"] {
|
|
align-content: center;
|
|
}
|
|
|
|
[data-flex-content="end"] {
|
|
align-content: flex-end;
|
|
}
|
|
|
|
[data-flex-items="center"] {
|
|
align-items: center;
|
|
}
|
|
|
|
[data-flex-items="start"] {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
[data-flex-items="end"] {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
// -- Children properties
|
|
[data-flex-order="first"] {
|
|
order: -1;
|
|
}
|
|
|
|
[data-flex-order="last"] {
|
|
order: 999999;
|
|
}
|