milligram/dist/milligram.css

532 lines
8.3 KiB
CSS
Raw Normal View History

/*!
* Milligram v1.0.2
* http://milligram.github.io
*
* Copyright (c) 2015, 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;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.6em;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.6;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
blockquote {
border-left: 0.3rem solid #d1d1d1;
margin-left: 0;
margin-right: 0;
padding: 1rem 1.5rem;
}
blockquote *:last-child {
margin: 0;
}
.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;
border-radius: 0.4rem;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-size: 1.1rem;
font-weight: 700;
height: 3.8rem;
letter-spacing: 0.1rem;
line-height: 3.8rem;
padding: 0 3rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
.button:hover, .button:focus,
button:hover,
button:focus,
2015-12-27 17:43:13 +00:00
input[type='button']:hover,
input[type='button']:focus,
2015-12-26 01:59:46 +00:00
input[type='reset']:hover,
input[type='reset']:focus,
2015-12-27 17:43:13 +00:00
input[type='submit']:hover,
input[type='submit']:focus {
2015-12-26 01:59:46 +00:00
background-color: #606c76;
border-color: #606c76;
color: #ffffff;
outline: 0;
}
.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;
}
.button.button-outline:hover, .button.button-outline:focus,
button.button-outline:hover,
button.button-outline:focus,
2015-12-27 17:43:13 +00:00
input[type='button'].button-outline:hover,
input[type='button'].button-outline:focus,
2015-12-26 01:59:46 +00:00
input[type='reset'].button-outline:hover,
input[type='reset'].button-outline:focus,
2015-12-27 17:43:13 +00:00
input[type='submit'].button-outline:hover,
input[type='submit'].button-outline:focus {
2015-12-26 01:59:46 +00:00
color: #606c76;
background-color: transparent;
border-color: #606c76;
}
.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;
}
.button.button-clear:hover, .button.button-clear:focus,
button.button-clear:hover,
button.button-clear:focus,
2015-12-27 17:43:13 +00:00
input[type='button'].button-clear:hover,
input[type='button'].button-clear:focus,
2015-12-26 01:59:46 +00:00
input[type='reset'].button-clear:hover,
input[type='reset'].button-clear:focus,
2015-12-27 17:43:13 +00:00
input[type='submit'].button-clear:hover,
input[type='submit'].button-clear:focus {
2015-12-26 01:59:46 +00:00
color: #606c76;
background-color: transparent;
border-color: transparent;
}
pre {
background: #f4f5f6;
border-left: 0.3rem solid #9b4dca;
font-family: Menlo, Consolas, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
}
code {
background: #f4f5f6;
border-radius: 0.4rem;
font-size: 86%;
padding: 0.2rem 0.5rem;
margin: 0 0.2rem;
white-space: nowrap;
}
pre > code {
background: transparent;
border-radius: 0;
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
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;
border-radius: 0.4rem;
box-shadow: none;
box-sizing: border-box;
height: 3.8rem;
padding: 0.6rem 1rem;
width: 100%;
}
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;
}
textarea {
padding-bottom: 0.6rem;
padding-top: 0.6rem;
min-height: 6.5rem;
}
label,
legend {
font-size: 1.6rem;
font-weight: 700;
display: block;
margin-bottom: 0.5rem;
}
fieldset {
border-width: 0;
padding: 0;
}
input[type='checkbox'],
input[type='radio'] {
display: inline;
}
.label-inline {
font-weight: normal;
display: inline-block;
margin-left: 0.5rem;
}
.container {
box-sizing: border-box;
margin: 0 auto;
max-width: 112rem;
padding: 0 2rem;
position: relative;
width: 100%;
}
.row {
display: flex;
flex-direction: column;
2015-12-26 01:59:46 +00:00
padding: 0;
width: 100%;
}
.row .row-wrap {
flex-wrap: wrap;
2015-12-26 01:59:46 +00:00
}
.row .row-no-padding {
padding: 0;
}
.row .row-no-padding > .column {
padding: 0;
}
.row .row-top {
align-items: flex-start;
2015-12-26 01:59:46 +00:00
}
.row .row-bottom {
align-items: flex-end;
2015-12-26 01:59:46 +00:00
}
.row .row-center {
align-items: center;
2015-12-26 01:59:46 +00:00
}
.row .row-stretch {
align-items: stretch;
2015-12-26 01:59:46 +00:00
}
.row .row-baseline {
align-items: baseline;
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%;
}
.row .column .col-top {
align-self: flex-start;
2015-12-26 01:59:46 +00:00
}
.row .column .col-bottom {
align-self: flex-end;
2015-12-26 01:59:46 +00:00
}
.row .column .col-center {
align-self: center;
2015-12-26 01:59:46 +00:00
}
.row .column.column-offset-10 {
margin-left: 10%;
}
.row .column.column-offset-20 {
margin-left: 20%;
}
.row .column.column-offset-25 {
margin-left: 25%;
}
.row .column.column-offset-33, .row .column.column-offset-34 {
margin-left: 33.3333%;
}
.row .column.column-offset-50 {
margin-left: 50%;
}
.row .column.column-offset-66, .row .column.column-offset-67 {
margin-left: 66.6666%;
}
.row .column.column-offset-75 {
margin-left: 75%;
}
.row .column.column-offset-80 {
margin-left: 80%;
}
.row .column.column-offset-90 {
margin-left: 90%;
}
.row .column.column-10 {
flex: 0 0 10%;
2015-12-26 01:59:46 +00:00
max-width: 10%;
}
.row .column.column-20 {
flex: 0 0 20%;
2015-12-26 01:59:46 +00:00
max-width: 20%;
}
.row .column.column-25 {
flex: 0 0 25%;
2015-12-26 01:59:46 +00:00
max-width: 25%;
}
.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%;
}
.row .column.column-40 {
flex: 0 0 40%;
2015-12-26 01:59:46 +00:00
max-width: 40%;
}
.row .column.column-50 {
flex: 0 0 50%;
2015-12-26 01:59:46 +00:00
max-width: 50%;
}
.row .column.column-60 {
flex: 0 0 60%;
2015-12-26 01:59:46 +00:00
max-width: 60%;
}
.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%;
}
.row .column.column-75 {
flex: 0 0 75%;
2015-12-26 01:59:46 +00:00
max-width: 75%;
}
.row .column.column-80 {
flex: 0 0 80%;
2015-12-26 01:59:46 +00:00
max-width: 80%;
}
.row .column.column-90 {
flex: 0 0 90%;
2015-12-26 01:59:46 +00:00
max-width: 90%;
}
@media (min-width: 40rem) {
.row {
flex-direction: row;
2015-12-26 01:59:46 +00:00
margin-left: -1rem;
width: calc(100% + 2.0rem);
}
.row .column {
margin-bottom: inherit;
padding: 0 1rem;
}
}
a {
color: #9b4dca;
text-decoration: none;
}
a:hover {
color: #606c76;
}
dl,
ol,
ul {
margin-top: 0;
padding-left: 0;
}
dl ul,
dl ol,
ol ul,
ol ol,
ul ul,
ul ol {
font-size: 90%;
margin: 1.5rem 0 1.5rem 3rem;
}
dl {
list-style: none;
}
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
dt,
dd,
li {
margin-bottom: 1rem;
}
hr {
border-top: 0.1rem solid #f4f5f6;
border-width: 0;
margin-bottom: 3.5rem;
margin-top: 3rem;
}
2015-12-27 17:43:13 +00:00
.button,
button {
2015-12-26 01:59:46 +00:00
margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem;
}
table {
width: 100%;
}
th,
td {
border-bottom: 0.1rem solid #e1e1e1;
padding: 1.2rem 1.5rem;
text-align: left;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
p {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
margin-bottom: 2rem;
margin-top: 0;
}
h1 {
font-size: 4rem;
letter-spacing: -0.1rem;
line-height: 1.2;
}
h2 {
font-size: 3.6rem;
letter-spacing: -0.1rem;
line-height: 1.25;
}
h3 {
font-size: 3rem;
letter-spacing: -0.1rem;
line-height: 1.3;
}
h4 {
font-size: 2.4rem;
letter-spacing: -0.08rem;
line-height: 1.35;
}
h5 {
font-size: 1.8rem;
letter-spacing: -0.05rem;
line-height: 1.5;
}
h6 {
font-size: 1.6rem;
letter-spacing: 0;
line-height: 1.4;
}
@media (min-width: 40rem) {
h1 {
font-size: 5rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3rem;
}
h5 {
font-size: 2.4rem;
}
h6 {
font-size: 1.5rem;
}
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.clearfix {
*zoom: 1;
}
.clearfix:after, .clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}