milligram/dist/milligram.css

639 lines
10 KiB
CSS
Raw Normal View History

/*!
2016-01-31 06:43:38 +00:00
* Milligram v1.1.0
* http://milligram.github.io
*
2016-01-08 13:49:44 +00:00
* Copyright (c) 2016 CJ Patoilo
* Licensed under the MIT license
*/
2015-12-26 01:59:46 +00:00
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
color: #606c76;
2016-07-30 03:30:31 +00:00
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
2015-12-26 01:59:46 +00:00
font-size: 1.6em;
font-weight: 300;
2016-07-30 03:30:31 +00:00
letter-spacing: .01em;
2015-12-26 01:59:46 +00:00
line-height: 1.6;
}
*,
*:after,
*:before {
2016-01-08 13:49:44 +00:00
box-sizing: inherit;
2015-12-26 01:59:46 +00:00
}
blockquote {
border-left: 0.3rem solid #d1d1d1;
margin-left: 0;
margin-right: 0;
padding: 1rem 1.5rem;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
blockquote *:last-child {
margin-bottom: 0;
2015-12-26 01:59:46 +00:00
}
.button,
button,
2015-12-27 17:43:13 +00:00
input[type='button'],
2015-12-26 01:59:46 +00:00
input[type='reset'],
2015-12-27 17:43:13 +00:00
input[type='submit'] {
2015-12-26 01:59:46 +00:00
background-color: #9b4dca;
border: 0.1rem solid #9b4dca;
2016-07-30 03:30:31 +00:00
border-radius: .4rem;
2016-01-31 06:43:38 +00:00
color: #fff;
2015-12-26 01:59:46 +00:00
cursor: pointer;
display: inline-block;
font-size: 1.1rem;
font-weight: 700;
height: 3.8rem;
2016-07-30 03:30:31 +00:00
letter-spacing: .1rem;
2015-12-26 01:59:46 +00:00
line-height: 3.8rem;
2016-07-30 03:30:31 +00:00
padding: 0 3.0rem;
2015-12-26 01:59:46 +00:00
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
2016-07-30 03:30:31 +00:00
.button:focus, .button:hover,
2015-12-26 01:59:46 +00:00
button:focus,
button:hover,
2015-12-27 17:43:13 +00:00
input[type='button']:focus,
input[type='button']:hover,
2015-12-26 01:59:46 +00:00
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
2015-12-26 01:59:46 +00:00
background-color: #606c76;
border-color: #606c76;
2016-01-31 06:43:38 +00:00
color: #fff;
2015-12-26 01:59:46 +00:00
outline: 0;
}
2016-07-30 03:30:31 +00:00
.button[disabled],
2016-01-31 06:43:38 +00:00
button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
2016-07-30 03:30:31 +00:00
opacity: .5;
2016-01-31 06:43:38 +00:00
cursor: default;
}
2016-07-30 03:30:31 +00:00
.button[disabled]:focus, .button[disabled]:hover,
2016-01-31 06:43:38 +00:00
button[disabled]:focus,
button[disabled]:hover,
2016-01-31 06:43:38 +00:00
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
2016-01-31 06:43:38 +00:00
input[type='reset'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus,
input[type='submit'][disabled]:hover {
2016-01-31 06:43:38 +00:00
background-color: #9b4dca;
border-color: #9b4dca;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.button.button-outline,
button.button-outline,
2015-12-27 17:43:13 +00:00
input[type='button'].button-outline,
2015-12-26 01:59:46 +00:00
input[type='reset'].button-outline,
2015-12-27 17:43:13 +00:00
input[type='submit'].button-outline {
2015-12-26 01:59:46 +00:00
color: #9b4dca;
background-color: transparent;
}
2016-07-30 03:30:31 +00:00
.button.button-outline:focus, .button.button-outline:hover,
2015-12-26 01:59:46 +00:00
button.button-outline:focus,
button.button-outline:hover,
2015-12-27 17:43:13 +00:00
input[type='button'].button-outline:focus,
input[type='button'].button-outline:hover,
2015-12-26 01:59:46 +00:00
input[type='reset'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus,
input[type='submit'].button-outline:hover {
2015-12-26 01:59:46 +00:00
color: #606c76;
background-color: transparent;
border-color: #606c76;
}
2016-07-30 03:30:31 +00:00
.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
2016-01-31 06:43:38 +00:00
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
2016-01-31 06:43:38 +00:00
input[type='button'].button-outline[disabled]:focus,
input[type='button'].button-outline[disabled]:hover,
2016-01-31 06:43:38 +00:00
input[type='reset'].button-outline[disabled]:focus,
input[type='reset'].button-outline[disabled]:hover,
input[type='submit'].button-outline[disabled]:focus,
input[type='submit'].button-outline[disabled]:hover {
2016-01-31 06:43:38 +00:00
color: #9b4dca;
border-color: inherit;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.button.button-clear,
button.button-clear,
2015-12-27 17:43:13 +00:00
input[type='button'].button-clear,
2015-12-26 01:59:46 +00:00
input[type='reset'].button-clear,
2015-12-27 17:43:13 +00:00
input[type='submit'].button-clear {
2015-12-26 01:59:46 +00:00
color: #9b4dca;
background-color: transparent;
border-color: transparent;
}
2016-07-30 03:30:31 +00:00
.button.button-clear:focus, .button.button-clear:hover,
2015-12-26 01:59:46 +00:00
button.button-clear:focus,
button.button-clear:hover,
2015-12-27 17:43:13 +00:00
input[type='button'].button-clear:focus,
input[type='button'].button-clear:hover,
2015-12-26 01:59:46 +00:00
input[type='reset'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='submit'].button-clear:focus,
input[type='submit'].button-clear:hover {
2015-12-26 01:59:46 +00:00
color: #606c76;
background-color: transparent;
border-color: transparent;
}
2016-07-30 03:30:31 +00:00
.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
2016-01-31 06:43:38 +00:00
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
2016-01-31 06:43:38 +00:00
input[type='button'].button-clear[disabled]:focus,
input[type='button'].button-clear[disabled]:hover,
2016-01-31 06:43:38 +00:00
input[type='reset'].button-clear[disabled]:focus,
input[type='reset'].button-clear[disabled]:hover,
input[type='submit'].button-clear[disabled]:focus,
input[type='submit'].button-clear[disabled]:hover {
2016-01-31 06:43:38 +00:00
color: #9b4dca;
}
2015-12-26 01:59:46 +00:00
code {
background: #f4f5f6;
2016-07-30 03:30:31 +00:00
border-radius: .4rem;
2015-12-26 01:59:46 +00:00
font-size: 86%;
2016-07-30 03:30:31 +00:00
margin: 0 .2rem;
padding: .2rem .5rem;
2015-12-26 01:59:46 +00:00
white-space: nowrap;
}
2016-01-08 13:49:44 +00:00
pre {
background: #f4f5f6;
border-left: 0.3rem solid #9b4dca;
2016-07-30 03:30:31 +00:00
font-family: 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', monospace;
2016-01-08 13:49:44 +00:00
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
pre > code {
background: transparent;
border-radius: 0;
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
2016-01-31 06:43:38 +00:00
hr {
border: 0;
border-top: 0.1rem solid #f4f5f6;
margin-bottom: 3.5rem;
2016-07-30 03:30:31 +00:00
margin-top: 3.0rem;
2016-01-31 06:43:38 +00:00
}
2015-12-26 01:59:46 +00:00
input[type='email'],
input[type='number'],
2015-12-27 17:43:13 +00:00
input[type='password'],
2015-12-26 01:59:46 +00:00
input[type='search'],
input[type='tel'],
2015-12-27 17:43:13 +00:00
input[type='text'],
2015-12-26 01:59:46 +00:00
input[type='url'],
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 0.1rem solid #d1d1d1;
2016-07-30 03:30:31 +00:00
border-radius: .4rem;
2015-12-26 01:59:46 +00:00
box-shadow: none;
height: 3.8rem;
2016-07-30 03:30:31 +00:00
padding: .6rem 1.0rem;
2015-12-26 01:59:46 +00:00
width: 100%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
input[type='email']:focus,
input[type='number']:focus,
2015-12-27 17:43:13 +00:00
input[type='password']:focus,
2015-12-26 01:59:46 +00:00
input[type='search']:focus,
input[type='tel']:focus,
2015-12-27 17:43:13 +00:00
input[type='text']:focus,
2015-12-26 01:59:46 +00:00
input[type='url']:focus,
textarea:focus,
select:focus {
border: 0.1rem solid #9b4dca;
outline: 0;
}
2016-01-31 06:43:38 +00:00
select {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
padding-right: 3.0rem;
2016-01-31 06:43:38 +00:00
}
2016-07-30 03:30:31 +00:00
2016-01-31 06:43:38 +00:00
select:focus {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
2016-01-31 06:43:38 +00:00
}
2015-12-26 01:59:46 +00:00
textarea {
min-height: 6.5rem;
2016-07-30 03:30:31 +00:00
padding-bottom: .6rem;
padding-top: .6rem;
2015-12-26 01:59:46 +00:00
}
label,
legend {
display: block;
2015-12-26 01:59:46 +00:00
font-size: 1.6rem;
font-weight: 700;
2016-07-30 03:30:31 +00:00
margin-bottom: .5rem;
2015-12-26 01:59:46 +00:00
}
fieldset {
border-width: 0;
padding: 0;
}
input[type='checkbox'],
input[type='radio'] {
display: inline;
}
.label-inline {
display: inline-block;
font-weight: normal;
2016-07-30 03:30:31 +00:00
margin-left: .5rem;
2015-12-26 01:59:46 +00:00
}
.container {
margin: 0 auto;
2016-07-30 03:30:31 +00:00
max-width: 112.0rem;
padding: 0 2.0rem;
2015-12-26 01:59:46 +00:00
position: relative;
width: 100%;
}
.row {
display: flex;
flex-direction: column;
2015-12-26 01:59:46 +00:00
padding: 0;
width: 100%;
}
2016-07-30 03:30:31 +00:00
2016-07-30 03:44:11 +00:00
.row.row-no-padding {
2015-12-26 01:59:46 +00:00
padding: 0;
}
2016-07-30 03:30:31 +00:00
2016-07-30 03:44:11 +00:00
.row.row-no-padding > .column {
2015-12-26 01:59:46 +00:00
padding: 0;
}
2016-07-30 03:30:31 +00:00
.row.row-wrap {
flex-wrap: wrap;
}
2016-07-30 03:44:11 +00:00
.row.row-top {
2016-07-30 03:30:31 +00:00
-ms-grid-row-align: flex-start;
align-items: flex-start;
2015-12-26 01:59:46 +00:00
}
2016-07-30 03:30:31 +00:00
2016-07-30 03:44:11 +00:00
.row.row-bottom {
2016-07-30 03:30:31 +00:00
-ms-grid-row-align: flex-end;
align-items: flex-end;
2015-12-26 01:59:46 +00:00
}
2016-07-30 03:30:31 +00:00
2016-07-30 03:44:11 +00:00
.row.row-center {
2016-07-30 03:30:31 +00:00
-ms-grid-row-align: center;
align-items: center;
2015-12-26 01:59:46 +00:00
}
2016-07-30 03:30:31 +00:00
2016-07-30 03:44:11 +00:00
.row.row-stretch {
2016-07-30 03:30:31 +00:00
-ms-grid-row-align: stretch;
align-items: stretch;
2015-12-26 01:59:46 +00:00
}
2016-07-30 03:30:31 +00:00
2016-07-30 03:44:11 +00:00
.row.row-baseline {
2016-07-30 03:30:31 +00:00
-ms-grid-row-align: baseline;
align-items: baseline;
2015-12-26 01:59:46 +00:00
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column {
display: block;
flex: 1;
2015-12-26 01:59:46 +00:00
margin-left: 0;
max-width: 100%;
width: 100%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column .col-top {
align-self: flex-start;
2015-12-26 01:59:46 +00:00
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column .col-bottom {
align-self: flex-end;
2015-12-26 01:59:46 +00:00
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column .col-center {
align-self: center;
2015-12-26 01:59:46 +00:00
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-offset-10 {
margin-left: 10%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-offset-20 {
margin-left: 20%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-offset-25 {
margin-left: 25%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-offset-33, .row .column.column-offset-34 {
margin-left: 33.3333%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-offset-50 {
margin-left: 50%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-offset-66, .row .column.column-offset-67 {
margin-left: 66.6666%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-offset-75 {
margin-left: 75%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-offset-80 {
margin-left: 80%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-offset-90 {
margin-left: 90%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-10 {
flex: 0 0 10%;
2015-12-26 01:59:46 +00:00
max-width: 10%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-20 {
flex: 0 0 20%;
2015-12-26 01:59:46 +00:00
max-width: 20%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-25 {
flex: 0 0 25%;
2015-12-26 01:59:46 +00:00
max-width: 25%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-33, .row .column.column-34 {
flex: 0 0 33.3333%;
2015-12-26 01:59:46 +00:00
max-width: 33.3333%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-40 {
flex: 0 0 40%;
2015-12-26 01:59:46 +00:00
max-width: 40%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-50 {
flex: 0 0 50%;
2015-12-26 01:59:46 +00:00
max-width: 50%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-60 {
flex: 0 0 60%;
2015-12-26 01:59:46 +00:00
max-width: 60%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-66, .row .column.column-67 {
flex: 0 0 66.6666%;
2015-12-26 01:59:46 +00:00
max-width: 66.6666%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-75 {
flex: 0 0 75%;
2015-12-26 01:59:46 +00:00
max-width: 75%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-80 {
flex: 0 0 80%;
2015-12-26 01:59:46 +00:00
max-width: 80%;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
.row .column.column-90 {
flex: 0 0 90%;
2015-12-26 01:59:46 +00:00
max-width: 90%;
}
@media (min-width: 640px) {
2015-12-26 01:59:46 +00:00
.row {
flex-direction: row;
2016-07-30 03:30:31 +00:00
margin-left: -1.0rem;
2015-12-26 01:59:46 +00:00
width: calc(100% + 2.0rem);
}
.row .column {
margin-bottom: inherit;
2016-07-30 03:30:31 +00:00
padding: 0 1.0rem;
2015-12-26 01:59:46 +00:00
}
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
a {
color: #9b4dca;
text-decoration: none;
}
2016-07-30 03:30:31 +00:00
2015-12-26 01:59:46 +00:00
a:hover {
color: #606c76;
}
dl,
ol,
ul {
margin-top: 0;
padding-left: 0;
}
2016-07-30 03:30:31 +00:00
2016-07-30 03:44:11 +00:00
dl dl,
2015-12-26 01:59:46 +00:00
dl ol,
dl ul,
2016-07-30 03:44:11 +00:00
ol dl,
2015-12-26 01:59:46 +00:00
ol ol,
ol ul,
2016-07-30 03:44:11 +00:00
ul dl,
ul ol,
ul ul {
2015-12-26 01:59:46 +00:00
font-size: 90%;
2016-07-30 03:30:31 +00:00
margin: 1.5rem 0 1.5rem 3.0rem;
2015-12-26 01:59:46 +00:00
}
dl {
list-style: none;
}
ol {
list-style: decimal inside;
}
ul {
list-style: circle inside;
}
2015-12-26 01:59:46 +00:00
dd,
dt,
2015-12-26 01:59:46 +00:00
li {
2016-07-30 03:30:31 +00:00
margin-bottom: 1.0rem;
2015-12-26 01:59:46 +00:00
}
button,
.button {
2016-07-30 03:30:31 +00:00
margin-bottom: 1.0rem;
2015-12-26 01:59:46 +00:00
}
fieldset,
2015-12-26 01:59:46 +00:00
input,
select,
textarea {
2015-12-26 01:59:46 +00:00
margin-bottom: 1.5rem;
}
blockquote,
dl,
figure,
form,
2015-12-26 01:59:46 +00:00
ol,
p,
pre,
table,
ul {
2015-12-26 01:59:46 +00:00
margin-bottom: 2.5rem;
}
table {
width: 100%;
}
td,
th {
border-bottom: 0.1rem solid #f4f5f6;
2015-12-26 01:59:46 +00:00
padding: 1.2rem 1.5rem;
text-align: left;
}
2016-07-30 03:30:31 +00:00
td:first-child,
th:first-child {
2015-12-26 01:59:46 +00:00
padding-left: 0;
}
2016-07-30 03:30:31 +00:00
td:last-child,
th:last-child {
2015-12-26 01:59:46 +00:00
padding-right: 0;
}
p {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
2016-07-30 03:30:31 +00:00
margin-bottom: 2.0rem;
2015-12-26 01:59:46 +00:00
margin-top: 0;
}
h1 {
2016-07-30 03:30:31 +00:00
font-size: 4.0rem;
letter-spacing: -.1rem;
2015-12-26 01:59:46 +00:00
line-height: 1.2;
}
h2 {
font-size: 3.6rem;
2016-07-30 03:30:31 +00:00
letter-spacing: -.1rem;
2015-12-26 01:59:46 +00:00
line-height: 1.25;
}
h3 {
2016-07-30 03:30:31 +00:00
font-size: 3.0rem;
letter-spacing: -.1rem;
2015-12-26 01:59:46 +00:00
line-height: 1.3;
}
h4 {
font-size: 2.4rem;
2016-07-30 03:30:31 +00:00
letter-spacing: -.08rem;
2015-12-26 01:59:46 +00:00
line-height: 1.35;
}
h5 {
font-size: 1.8rem;
2016-07-30 03:30:31 +00:00
letter-spacing: -.05rem;
2015-12-26 01:59:46 +00:00
line-height: 1.5;
}
h6 {
font-size: 1.6rem;
letter-spacing: 0;
line-height: 1.4;
}
@media (min-width: 640px) {
2015-12-26 01:59:46 +00:00
h1 {
2016-07-30 03:30:31 +00:00
font-size: 5.0rem;
2015-12-26 01:59:46 +00:00
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
2016-07-30 03:30:31 +00:00
font-size: 3.0rem;
2015-12-26 01:59:46 +00:00
}
h5 {
font-size: 2.4rem;
}
h6 {
font-size: 1.5rem;
}
}
2016-07-30 03:30:31 +00:00
2016-08-01 03:59:43 +00:00
img {
max-width: 100%;
}
2015-12-26 01:59:46 +00:00
.clearfix {
*zoom: 1;
}
2016-07-30 03:30:31 +00:00
.clearfix:after {
clear: both;
}
2015-12-26 01:59:46 +00:00
.clearfix:after, .clearfix:before {
2016-07-30 03:30:31 +00:00
content: '';
2015-12-26 01:59:46 +00:00
display: table;
}
2016-07-30 03:30:31 +00:00
.float-left {
float: left;
}
.float-right {
float: right;
2015-12-26 01:59:46 +00:00
}
2016-07-30 03:30:31 +00:00
/*# sourceMappingURL=milligram.css.map */