782 lines
54 KiB
CSS
782 lines
54 KiB
CSS
|
* {
|
||
|
border: 0;
|
||
|
font: inherit;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
text-rendering: geometricPrecision; }
|
||
|
|
||
|
html {
|
||
|
box-sizing: border-box;
|
||
|
font-size: 62.5%;
|
||
|
height: 100%; }
|
||
|
@media screen and (min-width: 960px) {
|
||
|
html {
|
||
|
font-size: 78.125%; } }
|
||
|
|
||
|
body {
|
||
|
box-sizing: border-box;
|
||
|
color: #3c3c3d;
|
||
|
font-family: "Avenir", "Avenir Next", "Helvetica Neue", "Segoe UI", "Verdana", sans-serif;
|
||
|
font-size: 1.6rem;
|
||
|
line-height: 2.4rem;
|
||
|
min-height: 100%;
|
||
|
position: relative; }
|
||
|
|
||
|
h1, h2, h3, h4, h5, h6 {
|
||
|
font-family: "Avenir", "Avenir Next", "Helvetica Neue", "Segoe UI", "Verdana", sans-serif;
|
||
|
font-weight: 500; }
|
||
|
|
||
|
h1, h2, h3 {
|
||
|
line-height: 4.8rem;
|
||
|
padding: .8rem 0 1.6rem; }
|
||
|
|
||
|
h4, h5, h6 {
|
||
|
padding: 2.4rem 0; }
|
||
|
|
||
|
h1 {
|
||
|
font-size: 3.6rem; }
|
||
|
|
||
|
h2 {
|
||
|
font-size: 3.2rem; }
|
||
|
|
||
|
h3 {
|
||
|
font-size: 2.8rem; }
|
||
|
|
||
|
h4 {
|
||
|
font-size: 2.0rem; }
|
||
|
|
||
|
h5 {
|
||
|
font-size: 1.8rem; }
|
||
|
|
||
|
h6 {
|
||
|
font-size: 1.6rem; }
|
||
|
|
||
|
p {
|
||
|
padding-bottom: 2.4rem; }
|
||
|
|
||
|
form {
|
||
|
padding: 2.4rem 0; }
|
||
|
|
||
|
pre,
|
||
|
code,
|
||
|
samp,
|
||
|
kbd {
|
||
|
background-color: #efeff0;
|
||
|
font-size: 1.2rem;
|
||
|
color: #e528b0;
|
||
|
font-family: "Consolas", "Monaco", "Courier New", monospace;
|
||
|
line-height: 1; }
|
||
|
|
||
|
code,
|
||
|
samp,
|
||
|
kbd {
|
||
|
border-radius: 2px;
|
||
|
overflow-y: hidden;
|
||
|
overflow-x: auto;
|
||
|
padding: .4rem .4rem .2rem; }
|
||
|
|
||
|
pre {
|
||
|
border-radius: 2px;
|
||
|
line-height: 2.4rem;
|
||
|
overflow-y: hidden;
|
||
|
overflow-x: auto;
|
||
|
padding: 1.2rem 1rem;
|
||
|
margin: 0 0 2.4rem; }
|
||
|
pre code,
|
||
|
pre samp,
|
||
|
pre kbd {
|
||
|
background-color: transparent;
|
||
|
border: none;
|
||
|
border-radius: 0;
|
||
|
padding: 0; }
|
||
|
|
||
|
a:link {
|
||
|
color: #4076D4; }
|
||
|
|
||
|
a:visited {
|
||
|
color: #9140D4; }
|
||
|
|
||
|
a:hover,
|
||
|
a:focus {
|
||
|
color: #2e68cc; }
|
||
|
|
||
|
a:active {
|
||
|
color: #D44076; }
|
||
|
|
||
|
img,
|
||
|
video {
|
||
|
max-width: 100%;
|
||
|
display: table; }
|
||
|
|
||
|
hr {
|
||
|
height: 4.8rem;
|
||
|
margin-bottom: 2.4rem;
|
||
|
position: relative; }
|
||
|
hr:before {
|
||
|
background-color: #cdcdce;
|
||
|
content: '';
|
||
|
height: 1px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
width: 100%; }
|
||
|
|
||
|
ol,
|
||
|
ul {
|
||
|
margin-left: 2rem;
|
||
|
padding: 0 0 2.4rem; }
|
||
|
|
||
|
ol {
|
||
|
list-style-type: decimal; }
|
||
|
|
||
|
ol ol {
|
||
|
padding-bottom: 0; }
|
||
|
|
||
|
ul {
|
||
|
list-style-type: disc; }
|
||
|
|
||
|
ul ul {
|
||
|
padding-bottom: 0; }
|
||
|
|
||
|
dt {
|
||
|
font-style: italic; }
|
||
|
|
||
|
dd {
|
||
|
text-indent: 2rem; }
|
||
|
|
||
|
blockquote {
|
||
|
margin: 0 0 2.4rem 1.2rem;
|
||
|
border-left: 0.3rem solid #cdcdce;
|
||
|
padding: 2.4rem 1.2rem; }
|
||
|
blockquote p:last-child {
|
||
|
padding-bottom: 0; }
|
||
|
|
||
|
figure {
|
||
|
margin: 0 auto;
|
||
|
padding-bottom: 2.4rem; }
|
||
|
figure img {
|
||
|
display: table;
|
||
|
margin: 0 auto; }
|
||
|
|
||
|
small,
|
||
|
sub,
|
||
|
sup {
|
||
|
font-size: 1.2rem;
|
||
|
line-height: 1; }
|
||
|
|
||
|
caption,
|
||
|
figcaption {
|
||
|
font-size: 1.2rem;
|
||
|
font-style: italic;
|
||
|
text-align: center; }
|
||
|
|
||
|
em,
|
||
|
cite,
|
||
|
i {
|
||
|
font-style: italic; }
|
||
|
|
||
|
strong,
|
||
|
var,
|
||
|
b {
|
||
|
font-weight: bold; }
|
||
|
|
||
|
q:before {
|
||
|
content: "'"; }
|
||
|
|
||
|
q:after {
|
||
|
content: "'"; }
|
||
|
|
||
|
q > q {
|
||
|
font-style: italic; }
|
||
|
|
||
|
dfn,
|
||
|
abbr {
|
||
|
border-bottom: 0.1rem dotted #5a5a5b;
|
||
|
cursor: default; }
|
||
|
|
||
|
table {
|
||
|
border-radius: 2px;
|
||
|
border-collapse: separate;
|
||
|
border-spacing: 0;
|
||
|
margin-bottom: 2.4rem;
|
||
|
width: 100%; }
|
||
|
table th {
|
||
|
font-weight: 500;
|
||
|
text-align: left; }
|
||
|
table th, table td {
|
||
|
padding: 0 .6rem; }
|
||
|
|
||
|
label {
|
||
|
color: #7d7d7e; }
|
||
|
|
||
|
input,
|
||
|
label,
|
||
|
select,
|
||
|
button,
|
||
|
textarea {
|
||
|
display: block;
|
||
|
resize: none;
|
||
|
-webkit-appearance: none;
|
||
|
-moz-appearance: none; }
|
||
|
|
||
|
/* remove yellow from chrome auto-fill background */
|
||
|
input:-webkit-autofill,
|
||
|
textarea:-webkit-autofill,
|
||
|
select:-webkit-autofill {
|
||
|
color: #3c3c3d;
|
||
|
-webkit-text-fill-color: #3c3c3d;
|
||
|
-webkit-box-shadow: 0 0 0px 1000px white inset !important; }
|
||
|
|
||
|
/*
|
||
|
|
||
|
Utilities
|
||
|
|
||
|
These utility classes have one or two CSS properties that are meant to save you from creating several identical classes to do the same thing, like just centering some text.
|
||
|
|
||
|
Markup:
|
||
|
<div class="{{modifier_class}}" style="background-color: #ddd">
|
||
|
Example Text
|
||
|
</div>
|
||
|
|
||
|
.disabled - Disable an Element
|
||
|
.smooth - Smoothed font rendering
|
||
|
.clearfix - Clear floats to keep the parent container in shape
|
||
|
.f-none - float: none;
|
||
|
.f-left - float: left;
|
||
|
.f-right - float: right;
|
||
|
.ta-left - text-align: left;
|
||
|
.ta-center - text-align: center;
|
||
|
.ta-right - text-align: right;
|
||
|
|
||
|
Styleguide 4.0
|
||
|
|
||
|
*/
|
||
|
.disabled, .radio [disabled],
|
||
|
.checkbox [disabled],
|
||
|
.select [disabled],
|
||
|
.textfield [disabled], .radio [disabled] + *,
|
||
|
.checkbox [disabled] + *,
|
||
|
.select [disabled] + *,
|
||
|
.textfield [disabled] + *, [type=button][disabled],
|
||
|
[type=submit][disabled],
|
||
|
button[disabled] {
|
||
|
cursor: default;
|
||
|
opacity: .5;
|
||
|
pointer-events: none; }
|
||
|
|
||
|
.smooth {
|
||
|
-webkit-font-smoothing: antialiased;
|
||
|
-moz-osx-font-smoothing: grayscale; }
|
||
|
|
||
|
.f-none {
|
||
|
float: none; }
|
||
|
|
||
|
.f-left {
|
||
|
float: left; }
|
||
|
|
||
|
.f-right {
|
||
|
float: right; }
|
||
|
|
||
|
.clearfix {
|
||
|
clear: both;
|
||
|
overflow: hidden; }
|
||
|
|
||
|
.ta-left {
|
||
|
text-align: left; }
|
||
|
|
||
|
.ta-center {
|
||
|
text-align: center; }
|
||
|
|
||
|
.ta-right {
|
||
|
text-align: right; }
|
||
|
|
||
|
/*
|
||
|
|
||
|
Type Utilities
|
||
|
|
||
|
These are specific typography related utilities
|
||
|
|
||
|
Markup:
|
||
|
<div class="type {{modifier_class}}">
|
||
|
The quick brown fox jumps over the lazy dog.
|
||
|
</div>
|
||
|
|
||
|
.fs-small - Smaller than the default font size
|
||
|
.fs-base - Exactly the default font size
|
||
|
.fs-large - Larger than the default font size
|
||
|
.fw-light - Changes the type to be 300 weight
|
||
|
.fw-normal - Changes the type to be 400 weight
|
||
|
.fw-semibold - Changes the type to be 600 weight
|
||
|
.fw-bold - Changes the type to be 700 weight
|
||
|
|
||
|
Styleguide 4.1
|
||
|
|
||
|
*/
|
||
|
.fs-small {
|
||
|
font-size: 1.2rem; }
|
||
|
|
||
|
.fs-base {
|
||
|
font-size: 1.6rem; }
|
||
|
|
||
|
.fs-large {
|
||
|
font-size: 2rem; }
|
||
|
|
||
|
.fw-light {
|
||
|
font-weight: 300; }
|
||
|
|
||
|
.fw-normal {
|
||
|
font-weight: 400; }
|
||
|
|
||
|
.fw-semibold {
|
||
|
font-weight: 600; }
|
||
|
|
||
|
.fw-bold {
|
||
|
font-weight: 700; }
|
||
|
|
||
|
/*
|
||
|
|
||
|
Buttons
|
||
|
|
||
|
Buttons and their variations
|
||
|
|
||
|
Markup:
|
||
|
<a href="#" class="btn {{modifier_class}}">Button</a>
|
||
|
|
||
|
.btn--secondary - A link that's sized like a button
|
||
|
.btn--link - A link that's sized like a button
|
||
|
|
||
|
Styleguide 2.0
|
||
|
|
||
|
*/
|
||
|
.btn, [type=button],
|
||
|
[type=submit],
|
||
|
button {
|
||
|
background-color: #E83FB8;
|
||
|
border: none;
|
||
|
border-radius: .2rem;
|
||
|
box-sizing: border-box;
|
||
|
color: #ffffff;
|
||
|
cursor: pointer;
|
||
|
display: inline-block;
|
||
|
height: 4.8rem;
|
||
|
line-height: 4.8rem;
|
||
|
max-width: 100%;
|
||
|
-webkit-transition-property: background-color;
|
||
|
transition-property: background-color;
|
||
|
-webkit-transition-duration: 200ms;
|
||
|
transition-duration: 200ms;
|
||
|
margin: 0 auto;
|
||
|
padding: 0 3rem;
|
||
|
text-align: center;
|
||
|
-webkit-user-select: none;
|
||
|
-moz-user-select: none;
|
||
|
-ms-user-select: none;
|
||
|
user-select: none;
|
||
|
width: auto; }
|
||
|
.btn:link, [type=button]:link,
|
||
|
[type=submit]:link,
|
||
|
button:link, .btn:visited, [type=button]:visited,
|
||
|
[type=submit]:visited,
|
||
|
button:visited {
|
||
|
color: #ffffff;
|
||
|
text-decoration: none; }
|
||
|
.btn:focus, [type=button]:focus,
|
||
|
[type=submit]:focus,
|
||
|
button:focus, .btn:hover, [type=button]:hover,
|
||
|
[type=submit]:hover,
|
||
|
button:hover {
|
||
|
background-color: #e528b0;
|
||
|
color: #ffffff; }
|
||
|
.btn:focus, [type=button]:focus,
|
||
|
[type=submit]:focus,
|
||
|
button:focus {
|
||
|
outline: 0.1rem dotted #7d7d7e; }
|
||
|
.btn:active, [type=button]:active,
|
||
|
[type=submit]:active,
|
||
|
button:active {
|
||
|
background-color: #E83FB8; }
|
||
|
|
||
|
.btn--secondary {
|
||
|
background-color: #efeff0;
|
||
|
color: #3c3c3d; }
|
||
|
.btn--secondary:link, .btn--secondary:visited {
|
||
|
color: #3c3c3d; }
|
||
|
.btn--secondary:focus, .btn--secondary:hover {
|
||
|
background-color: #dededf;
|
||
|
color: #3c3c3d; }
|
||
|
.btn--secondary:active {
|
||
|
color: #7d7d7e; }
|
||
|
|
||
|
.btn--link {
|
||
|
background-color: transparent;
|
||
|
color: #4076D4;
|
||
|
text-decoration: underline; }
|
||
|
.btn--link:link {
|
||
|
color: #4076D4; }
|
||
|
.btn--link:visited {
|
||
|
color: #9140D4; }
|
||
|
.btn--link:focus, .btn--link:hover {
|
||
|
color: #2e68cc;
|
||
|
background-color: transparent; }
|
||
|
.btn--link:active {
|
||
|
color: #D44076;
|
||
|
background-color: transparent; }
|
||
|
|
||
|
/*
|
||
|
|
||
|
Forms
|
||
|
|
||
|
Markup:
|
||
|
<form>
|
||
|
<label class="textfield">
|
||
|
<input type="text" />
|
||
|
<span class="textfield__label">Name</span>
|
||
|
</label>
|
||
|
<label class="radio">
|
||
|
<input type="radio" name="example" />
|
||
|
<span class="radio__label">Desktop</span>
|
||
|
</label>
|
||
|
<label class="radio">
|
||
|
<input type="radio" name="example" />
|
||
|
<span class="radio__label">Mobile</span>
|
||
|
</label>
|
||
|
<label class="select">
|
||
|
<select name="select">
|
||
|
<option disabled="disabled" selected="selected">Flavors</option>
|
||
|
<option>Chocolate</option>
|
||
|
</select>
|
||
|
<span class="select__label" for="select">Favorite Ice Cream</span>
|
||
|
</label>
|
||
|
<label class="textfield">
|
||
|
<textarea></textarea>
|
||
|
<span class="textfield__label">Comments</span>
|
||
|
</label>
|
||
|
<label class="checkbox">
|
||
|
<input type="checkbox" />
|
||
|
<span class="checkbox__label">I Lied</span>
|
||
|
</label>
|
||
|
<br/>
|
||
|
<input type="submit" value="Cross My Heart" />
|
||
|
<button>okay</button>
|
||
|
<button>not okay</button>
|
||
|
</form>
|
||
|
|
||
|
Styleguide 3.0
|
||
|
|
||
|
*/
|
||
|
.radio,
|
||
|
.checkbox {
|
||
|
cursor: pointer;
|
||
|
display: inline-block;
|
||
|
margin-bottom: 2.4rem;
|
||
|
padding: 0 1rem 0 3rem;
|
||
|
position: relative; }
|
||
|
.radio:before,
|
||
|
.checkbox:before {
|
||
|
background-color: #fff;
|
||
|
border: 2px solid #7d7d7e;
|
||
|
content: '';
|
||
|
height: 16px;
|
||
|
left: 0;
|
||
|
margin-top: -10px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
width: 16px; }
|
||
|
|
||
|
.checkbox input[type=checkbox],
|
||
|
.radio input[type=radio] {
|
||
|
opacity: 0;
|
||
|
position: absolute;
|
||
|
z-index: -1; }
|
||
|
|
||
|
.radio__label,
|
||
|
.checkbox__label {
|
||
|
color: #7d7d7e;
|
||
|
font-size: 1.2rem;
|
||
|
line-height: 1; }
|
||
|
|
||
|
.radio__label:after,
|
||
|
.checkbox__label:after {
|
||
|
border: 1px solid transparent;
|
||
|
content: '';
|
||
|
height: 18px;
|
||
|
left: 0;
|
||
|
margin-top: -10px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
width: 18px; }
|
||
|
|
||
|
.radio input[type=radio]:focus + .radio__label:after,
|
||
|
.checkbox input[type=checkbox]:focus + .checkbox__label:after {
|
||
|
border-color: #E83FB8;
|
||
|
box-shadow: 0 1px 2px 1px #dededf inset; }
|
||
|
|
||
|
.textfield,
|
||
|
.select {
|
||
|
background-color: #ffffff;
|
||
|
display: block;
|
||
|
margin-top: -2px;
|
||
|
margin-bottom: 2.4rem;
|
||
|
position: relative; }
|
||
|
|
||
|
.textfield__label,
|
||
|
.select__label {
|
||
|
background-color: #ffffff;
|
||
|
font-size: 1.2rem;
|
||
|
position: absolute;
|
||
|
left: 1px;
|
||
|
line-height: 1;
|
||
|
padding: .5rem;
|
||
|
right: 1px;
|
||
|
top: 1px; }
|
||
|
|
||
|
.textfield input,
|
||
|
.textfield textarea,
|
||
|
.select select {
|
||
|
background-color: transparent;
|
||
|
border: 1px solid #7d7d7e;
|
||
|
border-radius: 2px;
|
||
|
box-sizing: border-box;
|
||
|
padding: 1.8rem .5rem .6rem;
|
||
|
position: relative;
|
||
|
width: 100%; }
|
||
|
|
||
|
.textfield *:focus,
|
||
|
.select select:focus {
|
||
|
border-color: #E83FB8;
|
||
|
box-shadow: 0 1px 2px 0 #dededf inset;
|
||
|
outline: none; }
|
||
|
|
||
|
/*
|
||
|
|
||
|
Radio
|
||
|
|
||
|
Markup:
|
||
|
<label class="radio {{modifier_class}}">
|
||
|
<input type="radio" />
|
||
|
<span class="radio__label">Radio</span>
|
||
|
</label>
|
||
|
|
||
|
Styleguide 3.1
|
||
|
|
||
|
*/
|
||
|
.radio:before,
|
||
|
.radio__label:after {
|
||
|
border-radius: 20px; }
|
||
|
|
||
|
.radio input[type=radio]:checked + .radio__label:before {
|
||
|
background-color: #e528b0;
|
||
|
border-radius: 20px;
|
||
|
content: '';
|
||
|
height: 10px;
|
||
|
left: 5px;
|
||
|
margin-top: -5px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
width: 10px; }
|
||
|
|
||
|
/*
|
||
|
|
||
|
Checkbox
|
||
|
|
||
|
Markup:
|
||
|
<label class="checkbox {{modifier_class}}">
|
||
|
<input type="checkbox" />
|
||
|
<span class="checkbox__label">Checkbox</span>
|
||
|
</label>
|
||
|
|
||
|
Styleguide 3.2
|
||
|
|
||
|
*/
|
||
|
.checkbox:before,
|
||
|
.checkbox__label:after {
|
||
|
border-radius: 2px; }
|
||
|
|
||
|
.checkbox input[type=checkbox]:checked + .checkbox__label:after {
|
||
|
color: #e528b0;
|
||
|
content: '\2714';
|
||
|
font-size: 14px;
|
||
|
line-height: 18px;
|
||
|
text-align: center; }
|
||
|
|
||
|
/*
|
||
|
|
||
|
Input and text areas
|
||
|
|
||
|
Markup:
|
||
|
<label class="textfield {{modifier_class}}">
|
||
|
<input type="text" />
|
||
|
<span class="textfield__label">Input</span>
|
||
|
</label>
|
||
|
<label class="textfield {{modifier_class}}">
|
||
|
<textarea></textarea>
|
||
|
<span class="textfield__label">Textarea</span>
|
||
|
</label>
|
||
|
|
||
|
Styleguide 3.3
|
||
|
|
||
|
*/
|
||
|
/*
|
||
|
|
||
|
Select
|
||
|
|
||
|
Markup:
|
||
|
<label class="select {{modifier_class}}">
|
||
|
<select>
|
||
|
<option disabled="disabled" selected="selected">Select</option>
|
||
|
<option>Option 1</option>
|
||
|
<option>Option 2</option>
|
||
|
<option>Option 3</option>
|
||
|
</select>
|
||
|
<span class="select__label">Select Label</span>
|
||
|
</label>
|
||
|
|
||
|
Styleguide 3.4
|
||
|
|
||
|
*/
|
||
|
.select:after {
|
||
|
content: '';
|
||
|
border-left: .6rem solid transparent;
|
||
|
border-right: .6rem solid transparent;
|
||
|
border-top: 0.6rem solid #7d7d7e;
|
||
|
height: 0;
|
||
|
margin-top: -.5rem;
|
||
|
position: absolute;
|
||
|
right: 1rem;
|
||
|
bottom: 1.3rem;
|
||
|
width: 0; }
|
||
|
|
||
|
.select select {
|
||
|
z-index: 100; }
|
||
|
|
||
|
.select option[disabled] {
|
||
|
background-color: #efeff0;
|
||
|
color: #5a5a5b; }
|
||
|
|
||
|
/*
|
||
|
|
||
|
Grid
|
||
|
|
||
|
Basic grid made using flexbox. By default, the grid is collapsed on small screens.
|
||
|
|
||
|
Markup:
|
||
|
<main class="grid {{modifier_class}}">
|
||
|
<section class="">
|
||
|
Cell 1
|
||
|
</section>
|
||
|
<article class="grid">
|
||
|
Cell 2
|
||
|
</article>
|
||
|
</main>
|
||
|
|
||
|
.grid--medium - Grid starts at medium sized screens
|
||
|
.grid--large - Grid starts at large and up screens
|
||
|
|
||
|
Styleguide 1.0
|
||
|
|
||
|
*/
|
||
|
/*
|
||
|
|
||
|
Direct children of `.grid` are columns.
|
||
|
|
||
|
Markup:
|
||
|
<main class="grid">
|
||
|
<section class="{{modifier_class}}">
|
||
|
Cell 1
|
||
|
</section>
|
||
|
<article class="grid">
|
||
|
<p class="grid {{modifier_class}}">
|
||
|
Cell 2.1
|
||
|
</p>
|
||
|
<div>
|
||
|
<p>Cell 2.2</p>
|
||
|
</div>
|
||
|
</article>
|
||
|
</main>
|
||
|
|
||
|
.column--light - Less important column
|
||
|
.column--heavy - More important column
|
||
|
|
||
|
Styleguide 1.1
|
||
|
|
||
|
*/
|
||
|
.grid {
|
||
|
display: -ms-flexbox;
|
||
|
display: -webkit-box;
|
||
|
display: flex; }
|
||
|
|
||
|
.grid > * {
|
||
|
-webkit-box-flex: 1;
|
||
|
-ms-flex: 1;
|
||
|
flex: 1;
|
||
|
-webkit-box-flex: 4;
|
||
|
-ms-flex-positive: 4;
|
||
|
flex-grow: 4;
|
||
|
padding-left: 1rem;
|
||
|
padding-right: 1rem; }
|
||
|
.grid > *:first-child {
|
||
|
margin-left: -1rem; }
|
||
|
.grid > *:last-child {
|
||
|
margin-right: -1rem; }
|
||
|
.grid > *.column--light {
|
||
|
-webkit-box-flex: 2;
|
||
|
-ms-flex-positive: 2;
|
||
|
flex-grow: 2; }
|
||
|
.grid > *.column--heavy {
|
||
|
-webkit-box-flex: 8;
|
||
|
-ms-flex-positive: 8;
|
||
|
flex-grow: 8; }
|
||
|
|
||
|
@media (max-width: 599px) {
|
||
|
.grid--medium {
|
||
|
display: block; }
|
||
|
.grid--medium > * {
|
||
|
padding-left: 0;
|
||
|
padding-right: 0; }
|
||
|
.grid--medium > *:first-child {
|
||
|
margin-left: 0; }
|
||
|
.grid--medium > *:last-child {
|
||
|
margin-right: 0; } }
|
||
|
|
||
|
@media (max-width: 959px) {
|
||
|
.grid--large {
|
||
|
display: block; }
|
||
|
.grid--large > * {
|
||
|
padding-left: 0;
|
||
|
padding-right: 0; }
|
||
|
.grid--large > *:first-child {
|
||
|
margin-left: 0; }
|
||
|
.grid--large > *:last-child {
|
||
|
margin-right: 0; } }
|
||
|
|
||
|
/*
|
||
|
|
||
|
Wrappers
|
||
|
|
||
|
Use wrappers when you need a content area that is a standardized width and centered on the page.
|
||
|
|
||
|
Markup:
|
||
|
<div class="wrapper {{modifier_class}}">Wrapper</div>
|
||
|
|
||
|
.wrapper-small - Small Wrapper
|
||
|
.wrapper-large - Large Wrapper
|
||
|
|
||
|
Styleguide 1.2
|
||
|
|
||
|
*/
|
||
|
.wrapper {
|
||
|
margin: 0 auto;
|
||
|
max-width: 960px;
|
||
|
padding: 4.8rem 2rem; }
|
||
|
|
||
|
.wrapper-large {
|
||
|
margin: 0 auto;
|
||
|
max-width: 1200px;
|
||
|
padding: 7.2rem 2rem; }
|
||
|
|
||
|
.wrapper-small {
|
||
|
margin: 0 auto;
|
||
|
max-width: 640px;
|
||
|
padding: 2.4rem 2rem; }
|
||
|
|
||
|
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3V0ZXN0cmFwLmNzcyIsInNvdXJjZXMiOlsiY3V0ZXN0cmFwLnNjc3MiLCJfdmFyaWFibGVzLnNjc3MiLCJ2YXJpYWJsZXMvX2NvbG9ycy5zY3NzIiwidmFyaWFibGVzL190eXBlLnNjc3MiLCJ2YXJpYWJsZXMvX3pfaW5kZXguc2NzcyIsIl9zdXBwb3J0LnNjc3MiLCJzdXBwb3J0L19iYXNlLnNjc3MiLCJzdXBwb3J0L191dGlsaXRpZXMuc2NzcyIsIl9jb21wb25lbnRzLnNjc3MiLCJjb21wb25lbnRzL19idXR0b25zLnNjc3MiLCJjb21wb25lbnRzL19mb3Jtcy5zY3NzIiwiY29tcG9uZW50cy9fZ3JpZC5zY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgXCJ2YXJpYWJsZXNcIjtcbkBpbXBvcnQgXCJzdXBwb3J0XCI7XG5AaW1wb3J0IFwiY29tcG9uZW50c1wiO1xuIiwiLy8gIHZhcmlhYmxlcy9cblxuQGltcG9ydCBcInZhcmlhYmxlcy9jb2xvcnNcIjtcbkBpbXBvcnQgXCJ2YXJpYWJsZXMvdHlwZVwiO1xuQGltcG9ydCBcInZhcmlhYmxlcy96X2luZGV4XCI7XG4iLCIvLyBBIGJlYXV0aWZ1bCBzZWxlY3Rpb24gb2Ygb3VyIGJyYW5kZWQgY29sb3JzXG4vL1xuLy8gU3R5bGVndWlkZVxuXG4vLyBwcmltYXJ5IGNvbG9yc1xuJHByaW1hcnk6ICAgICAgICNFODNGQjggIWRlZmF1bHQ7XG4kcHJpbWFyeS1kYXJrOiAgZGFya2VuKCRwcmltYXJ5LCA1JSkgIWRlZmF1bHQ7XG5cbiRsaW5rOiAgICAgICAgICAjNDA3NkQ0ICFkZWZhdWx0O1xuJGxpbmstLXZpc2l0ZWQ6ICM5MTQwRDQgIWRlZmF1bHQ7XG4kbGluay0taG92ZXI6ICAgZGFya2VuKCRsaW5rLCA1JSkgIWRlZmF1bHQ7XG4kbGluay0tYWN0aXZlOiAgI0Q0NDA3NiAhZGVmYXVsdDtcblxuLy8gZGFyayBzaGFkZXNcbiRncmF5MTogICAgICAgICAjM2MzYzNkICFkZWZhdWx0O1xuJGdyYXkyOiAgICAgICAgICM1YTVhNWIgIWRlZmF1bHQ7XG4kZ3JheTM6ICAgICAgICAgIzdkN2Q3ZSAhZGVmYXVsdDtcblxuLy8gbGlnaHQgc2hhZGVzXG4kZ3JheTQ6ICAgICAgICAgI2NkY2RjZSAhZGVmYXVsdDtcbiRncmF5NTogICAgICAgICAjZGVkZWRmICFkZWZhdWx0O1xuJGdyYXk2OiAgICAgICAgICNlZmVmZjAgIWRlZmF1bHQ7XG5cbiR3aGl0ZTogICAgICAgICAjZmZmZmZmICFkZWZhdWx0O1xuIiwiLy8gRm9udCBiYXNlZCB2YXJpYWJsZXNcbi8vXG4vLyBTdHlsZWd1aWRlXG5cbiRiYXNlLWZvbnQ6ICAgICAgICdBdmVuaXInLCAnQXZlbmlyIE5leHQnLCdIZWx2ZXRpY2EgTmV1ZScsJ1NlZ29lIFVJJywgJ1ZlcmRhbmEnLCBzYW5zLXNlcmlmICFkZWZhdWx0O1xuJG1vbm9zcGFjZS1mb250OiAgJ0NvbnNvbGFzJywgJ01vbmFjbycsICdDb3VyaWVyIE5ldycsIG1vbm9zcGFjZSAhZGVmYXVsdDtcblxuJGhlYWRpbmc6ICAgICAgICAgJGJhc2UtZm9udCAhZGVmYXVsdDtcbiRib2R5OiAgICAgICAgICAgICRiYXNlLWZvbnQgIWRlZmF1bHQ7XG4kbW9ub3NwYWNlOiAgICAgICAkbW9ub3NwYWNlLWZvbnQgIWRlZmF1bHQ7XG5cbiRmb250LXNpemU6IDEuNnJlbSAhZGVmYXVsdDtcbiRsaW5lLWhlaWdodDogMi40cmVtICFkZWZhdWx0O1xuXG4kZm9udC1zaXplLS1zbWFsbDogMS4ycmVtICFkZWZhdWx0O1xuJGZvbnQtc2l6ZS0tbGFyZ2U6IDJyZW0gIWRlZmF1bHQ7XG4iLCIvLyB6LWluZGV4IHZhcmlhYmxlc1xuLy9cbi8vIFN0eWxlZ3VpZGVcblxuJHotaW5kZXgtMDogICAtMTtcbiR6LWluZGV4LTE6ICAgMTAwO1xuJHotaW5kZXgtMjogICAyMDA7XG4kei1pbmRleC0zOiAgIDMwMDtcbiR6LWluZGV4LTQ6ICAgNDAwO1xuJHotaW5kZXgtNTogICA1MDA7XG4kei1pbmRleC02OiAgIDYwMDtcbiR6LWluZGV4LTc6ICAgNzAwO1xuJHotaW5kZXgtODogICA4MDA7XG4kei1pbmRleC05OiAgIDkwMDtcbiR6LWluZGV4LTEwOiAxMDAwO1xuIiwiLy8gc3VwcG9ydC9cblxuQGltcG9ydCBcInN1cHBvcnQvYmFzZVwiO1xuQGltcG9ydCBcInN1cHBvcnQvdXRpbGl0aWVzXCI7XG4iLCIqe1xuICBib3JkZXI6IDA7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbiAgdGV4dC1yZW5kZXJpbmc6IGdlb21ldHJpY1ByZWNpc2lvbjtcbn1cblxuaHRtbHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZm9udC1zaXplOiA2Mi41JTtcbiAgaGVpZ2h0OiAxMDAlO1xuXG4gIEBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDk2MHB4KXtcbiAgICBmb250LXNpemU6IDc4LjEyNSU7XG4gIH1cbn1cblxuYm9keXtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgY29sb3I6ICRncmF5MTtcbiAgZm9udC1mYW1pbHk6ICRiYXNlLWZvbnQ7XG4gIGZvbnQtc2l6ZTogJGZvbnQtc2l6ZTtcbiAgbGluZS1oZWlnaHQ6ICRsaW5lLWhlaWdodDtcbiAgbWluLWhlaWdodDogMTAwJTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuXG5oMSwgaDIsIGgzLCBoNCwgaDUsIGg2e1xuICBmb250LWZhbWlseTogJGhlYWRpbmc7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbmgxLCBoMiwgaDN7XG4gIGxpbmUtaGVpZ2h0OiA0LjhyZW07XG4gIHBhZGRpbmc6IC44cmVtIDAgMS42cmVtO1xufVxuXG5oNCwgaDUsIGg2e1xuICBwYWRkaW5nOiAyLjRyZW0gMDtcbn1cblxuaDF7XG4gIGZvbnQtc2l6ZTogMy42cmVtO1xufVxuXG5oMntcbiAgZm9udC1zaXplOiAzLjJyZW07XG59XG5cbmgze1xuICBmb250LXNpemU6IDIuOHJlbTtcbn1cblxuaDR7XG4gIGZvbnQtc2l6ZTogMi4wcmVtO1xufVxuXG5oNXtcbiAgZm9udC1zaXplOiAxLjhyZW07XG59XG5cbmg2e1xuICBmb250LXNpemU6IDEuNnJlbTtcbn1cblxucHtcbiAgcGFkZGluZy1ib3R0b206IDIuNHJlbTtcbn1cblxuZm9ybXtcbiAgcGFkZGluZzogMi40cmVtIDA7XG59XG5cbnByZSxcbmNvZGUsXG5zYW1wLFxua2Jke1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkZ3JheTY7XG4gIGZvbnQtc2l6ZTogJGZvbnQtc2l6ZS0tc21hbGw7XG4gIGNvbG9yOiAkcHJpbWFyeS1kYXJrO1xuICBmb250LWZhbWlseTogJG1vbm9zcGFjZTtcbiAgbGluZS1oZWlnaHQ6IDE7XG59XG5cbmNvZGUsXG5zY
|