279
Styles
14.0KB
minified
2.9KB
gzipped

Selectors | Declarations
--- | ---
body, button | margin: 0;
button, input, select, textarea | font-family: inherit;
img | max-width: 100%;
svg | max-height: 100%;
body | font-family: 'Helvetica Neue',Helvetica,sans-serif; line-height: 1.5; font-size: 100%;
h1, h2, h3, h4, h5, h6 | font-family: 'Helvetica Neue',Helvetica,sans-serif; font-weight: 700; line-height: 1.25; margin-top: 1em; margin-bottom: .5em;
dl, ol, p, ul | font-size: 1rem; margin-top: 0; margin-bottom: 1rem;
ol, ul | padding-left: 2rem;
code, pre, samp | font-family: 'Source Code Pro',Consolas,monospace; font-size: inherit;
pre | margin-top: 0; margin-bottom: 1rem; overflow-x: scroll;
hr | margin-top: 2rem; margin-bottom: 2rem;
blockquote | margin-top: 2rem; margin-bottom: 2rem; margin-left: 0; padding-left: 1rem; padding-right: 1rem;
blockquote, blockquote p | font-size: 1.25rem; font-style: italic;
.h1, h1 | font-size: 2rem;
.h2, h2 | font-size: 1.5rem;
.h3, h3 | font-size: 1.25rem;
.h4, h4 | font-size: 1rem;
.h5, h5 | font-size: .875rem;
.h6, h6 | font-size: .75rem;
.list-reset | list-style: none; padding-left: 0;
fieldset, input, select, textarea | font-size: 1rem; margin-top: 0; margin-bottom: .5rem;
input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] | box-sizing: border-box; height: 2.25rem; padding: .5rem; vertical-align: middle; -webkit-appearance: none;
select | box-sizing: border-box; line-height: 1.75; padding: .5rem;
select:not([multiple]) | height: 2.25rem; vertical-align: middle;
textarea | box-sizing: border-box; line-height: 1.75; padding: .5rem;
.fieldset-reset | padding: 0; margin-left: 0; margin-right: 0; border: 0;
.fieldset-reset legend | padding: 0;
.button, button | font-size: inherit; font-weight: 700; text-decoration: none; cursor: pointer; display: inline-block; box-sizing: border-box; line-height: 1.125rem; padding: .5rem 1rem; margin: 0; height: auto; border: 1px solid transparent; vertical-align: middle; -webkit-appearance: none;
::-moz-focus-inner | border: 0; padding: 0;
.button:hover | text-decoration: none;
table | border-collapse: collapse; border-spacing: 0; max-width: 100%; width: 100%;
th | text-align: left; font-weight: 700;
td, th | padding: .25rem 1rem; line-height: inherit;
th | vertical-align: bottom;
td | vertical-align: top;
.inline | display: inline;
.block | display: block;
.inline-block | display: inline-block;
.overflow-hidden | overflow: hidden;
.overflow-scroll | overflow: scroll;
.overflow-auto | overflow: auto;
.clearfix:after, .clearfix:before | content: " "; display: table;
.clearfix:after | clear: both;
.left | float: left;
.right | float: right;
.fit | max-width: 100%;
.half-width | width: 50%;
.full-width | width: 100%;
.bold | font-weight: 700;
.regular | font-weight: 400;
.italic | font-style: italic;
.caps | text-transform: uppercase; letter-spacing: .2em;
.left-align | text-align: left;
.center | text-align: center;
.right-align | text-align: right;
.justify | text-align: justify;
.nowrap | white-space: nowrap;
.m0 | margin: 0;
.mt0 | margin-top: 0;
.mr0 | margin-right: 0;
.mb0 | margin-bottom: 0;
.ml0 | margin-left: 0;
.m1 | margin: .5rem;
.mt1 | margin-top: .5rem;
.mr1 | margin-right: .5rem;
.mb1 | margin-bottom: .5rem;
.ml1 | margin-left: .5rem;
.m2 | margin: 1rem;
.mt2 | margin-top: 1rem;
.mr2 | margin-right: 1rem;
.mb2 | margin-bottom: 1rem;
.ml2 | margin-left: 1rem;
.m3 | margin: 2rem;
.mt3 | margin-top: 2rem;
.mr3 | margin-right: 2rem;
.mb3 | margin-bottom: 2rem;
.ml3 | margin-left: 2rem;
.m4 | margin: 4rem;
.mt4 | margin-top: 4rem;
.mr4 | margin-right: 4rem;
.mb4 | margin-bottom: 4rem;
.ml4 | margin-left: 4rem;
.mxn1 | margin-left: -.5rem; margin-right: -.5rem;
.mxn2 | margin-left: -1rem; margin-right: -1rem;
.mxn3 | margin-left: -2rem; margin-right: -2rem;
.mxn4 | margin-left: -4rem; margin-right: -4rem;
.mx-auto | margin-left: auto; margin-right: auto;
.p1 | padding: .5rem;
.py1 | padding-top: .5rem; padding-bottom: .5rem;
.px1 | padding-left: .5rem; padding-right: .5rem;
.p2 | padding: 1rem;
.py2 | padding-top: 1rem; padding-bottom: 1rem;
.px2 | padding-left: 1rem; padding-right: 1rem;
.p3 | padding: 2rem;
.py3 | padding-top: 2rem; padding-bottom: 2rem;
.px3 | padding-left: 2rem; padding-right: 2rem;
.p4 | padding: 4rem;
.py4 | padding-top: 4rem; padding-bottom: 4rem;
.px4 | padding-left: 4rem; padding-right: 4rem;
.display-none, .lg-show, .md-show, .sm-show | display: none!important;
.sm-show | (min-width:40em) display: block!important;
.md-show | (min-width:52em) display: block!important;
.lg-show | (min-width:64em) display: block!important;
.sm-hide | (min-width:40em) display: none!important;
.md-hide | (min-width:52em) display: none!important;
.lg-hide | (min-width:64em) display: none!important;
.hide | position: absolute!important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px);
.relative | position: relative;
.absolute | position: absolute;
.fixed | position: fixed;
.top-0 | top: 0;
.right-0 | right: 0;
.bottom-0 | bottom: 0;
.left-0 | left: 0;
.z1 | z-index: 1;
.z2 | z-index: 2;
.z3 | z-index: 3;
.z4 | z-index: 4;
.absolute-center | top: 0; right: 0; bottom: 0; left: 0; margin: auto; display: table;
.container | max-width: 64em; margin-left: auto; margin-right: auto;
.col | float: left; box-sizing: border-box;
.col-right | float: right; box-sizing: border-box;
.col-1 | width: 8.333333333333332%;
.col-2 | width: 16.666666666666664%;
.col-3 | width: 25%;
.col-4 | width: 33.33333333333333%;
.col-5 | width: 41.66666666666667%;
.col-6 | width: 50%;
.col-7 | width: 58.333333333333336%;
.col-8 | width: 66.66666666666666%;
.col-9 | width: 75%;
.col-10 | width: 83.33333333333334%;
.col-11 | width: 91.66666666666666%;
.col-12 | width: 100%;
.sm-col | (min-width:40em) float: left; box-sizing: border-box;
.sm-col-right | (min-width:40em) float: right; box-sizing: border-box;
.sm-col-1 | (min-width:40em) width: 8.333333333333332%;
.sm-col-2 | (min-width:40em) width: 16.666666666666664%;
.sm-col-3 | (min-width:40em) width: 25%;
.sm-col-4 | (min-width:40em) width: 33.33333333333333%;
.sm-col-5 | (min-width:40em) width: 41.66666666666667%;
.sm-col-6 | (min-width:40em) width: 50%;
.sm-col-7 | (min-width:40em) width: 58.333333333333336%;
.sm-col-8 | (min-width:40em) width: 66.66666666666666%;
.sm-col-9 | (min-width:40em) width: 75%;
.sm-col-10 | (min-width:40em) width: 83.33333333333334%;
.sm-col-11 | (min-width:40em) width: 91.66666666666666%;
.sm-col-12 | (min-width:40em) width: 100%;
.md-col | (min-width:52em) float: left; box-sizing: border-box;
.md-col-right | (min-width:52em) float: right; box-sizing: border-box;
.md-col-1 | (min-width:52em) width: 8.333333333333332%;
.md-col-2 | (min-width:52em) width: 16.666666666666664%;
.md-col-3 | (min-width:52em) width: 25%;
.md-col-4 | (min-width:52em) width: 33.33333333333333%;
.md-col-5 | (min-width:52em) width: 41.66666666666667%;
.md-col-6 | (min-width:52em) width: 50%;
.md-col-7 | (min-width:52em) width: 58.333333333333336%;
.md-col-8 | (min-width:52em) width: 66.66666666666666%;
.md-col-9 | (min-width:52em) width: 75%;
.md-col-10 | (min-width:52em) width: 83.33333333333334%;
.md-col-11 | (min-width:52em) width: 91.66666666666666%;
.md-col-12 | (min-width:52em) width: 100%;
.lg-col | (min-width:64em) float: left; box-sizing: border-box;
.lg-col-right | (min-width:64em) float: right; box-sizing: border-box;
.lg-col-1 | (min-width:64em) width: 8.333333333333332%;
.lg-col-2 | (min-width:64em) width: 16.666666666666664%;
.lg-col-3 | (min-width:64em) width: 25%;
.lg-col-4 | (min-width:64em) width: 33.33333333333333%;
.lg-col-5 | (min-width:64em) width: 41.66666666666667%;
.lg-col-6 | (min-width:64em) width: 50%;
.lg-col-7 | (min-width:64em) width: 58.333333333333336%;
.lg-col-8 | (min-width:64em) width: 66.66666666666666%;
.lg-col-9 | (min-width:64em) width: 75%;
.lg-col-10 | (min-width:64em) width: 83.33333333333334%;
.lg-col-11 | (min-width:64em) width: 91.66666666666666%;
.lg-col-12 | (min-width:64em) width: 100%;
.table | display: table; width: 100%;
.table-cell | display: table-cell; vertical-align: middle;
.table-fixed | table-layout: fixed;
.sm-table | (min-width:40em) display: table; width: 100%;
.sm-table-cell | (min-width:40em) display: table-cell; vertical-align: middle;
.md-table | (min-width:52em) display: table; width: 100%;
.md-table-cell | (min-width:52em) display: table-cell; vertical-align: middle;
.lg-table | (min-width:64em) display: table; width: 100%;
.lg-table-cell | (min-width:64em) display: table-cell; vertical-align: middle;
body | color: #333; background-color: #fff;
a | color: #0076df; text-decoration: none;
a:hover | text-decoration: underline;
code, pre | background-color: #eee; border-radius: 3px;
hr | border: 0; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc;
.field-light | background-color: #fff; -webkit-transition: box-shadow .2s ease; transition: box-shadow .2s ease; border-style: solid; border-width: 1px; border-color: #ccc; border-radius: 3px;
.field-light:focus | outline: 0; border-color: #0076df; box-shadow: 0 0 2px rgba(0,118,223,.5);
.field-light:disabled | color: #777; background-color: rgba(0,0,0,.125);
.field-light:read-only:not(select) | background-color: rgba(0,0,0,.125);
.field-light:invalid | border-color: #ff4919;
.field-light.is-success | border-color: #00df3f;
.field-light.is-warning | border-color: #ffcf00;
.field-light.is-error | border-color: #ff4919;
.checkbox-light, .radio-light | -webkit-transition: box-shadow .2s ease; transition: box-shadow .2s ease;
.radio-light | border-radius: 50%;
.checkbox-light:focus, .radio-light:focus | outline: 0; box-shadow: 0 0 2px rgba(0,118,223,.5);
.field-dark | color: #fff; background-color: rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.0625); border-radius: 3px;
.field-dark::-webkit-input-placeholder | color: rgba(255,255,255,.75);
.field-dark::-moz-placeholder | color: rgba(255,255,255,.75);
.field-dark:-ms-input-placeholder | color: rgba(255,255,255,.75);
.field-dark::placeholder | color: rgba(255,255,255,.75);
.field-dark:focus | outline: 0; border: 1px solid rgba(255,255,255,.5);
.field-dark:read-only:not(select) | background-color: rgba(255,255,255,.25);
.field-dark:invalid | border-color: #ff4919;
.field-dark.is-success | border-color: #00df3f;
.field-dark.is-warning | border-color: #ffcf00;
.field-dark.is-error | border-color: #ff4919;
.table-light td, .table-light th | border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc;
.button-light-gray | color: #333; background-color: #ccc; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
.button-light-gray:hover | opacity: .875;
.button-light-gray:active, .button-light-gray:is-active | box-shadow: inset 0 0 0 32px rgba(0,0,0,.125),inset 0 2px 3px 0 rgba(0,0,0,.25);
.button-light-gray:focus | outline: 0; box-shadow: 0 0 0 2px white,0 0 1px 4px rgba(0,118,223,.5);
.button-light-gray.is-disabled, .button-light-gray:disabled | opacity: .5;
.button-blue | color: #fff; background-color: #0076df; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
.button-blue:hover | opacity: .875;
.button-blue.is-active, .button-blue:active | box-shadow: inset 0 0 0 32px rgba(0,0,0,.125),inset 0 2px 3px 0 rgba(0,0,0,.25);
.button-blue:focus | outline: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.5),0 0 1px 4px rgba(0,118,223,.5);
.button-blue.is-disabled, .button-blue:disabled | opacity: .5;
.button-blue-outline | line-height: 1rem; color: #0076df; background-color: transparent; border-radius: 3px; border: 2px solid #0076df; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
.button-blue-outline.is-active, .button-blue-outline:hover | color: #fff; background-color: #0076df;
.button-blue-outline:active | box-shadow: inset 0 3px 3px 0 rgba(0,0,0,.25);
.button-blue-outline:focus | outline: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.5),0 0 1px 4px rgba(0,118,223,.5);
.button-blue-outline.is-disabled, .button-blue-outline:disabled | color: #0076df; background-color: transparent; opacity: .5;
.button-gray | color: #fff; background-color: #777; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
.button-gray:hover | opacity: .875;
.button-gray:active, .button-gray:is-active | box-shadow: inset 0 0 0 32px rgba(0,0,0,.125),inset 0 2px 3px 0 rgba(0,0,0,.25);
.button-gray:focus | outline: 0; box-shadow: 0 0 0 2px white,0 0 1px 4px rgba(0,118,223,.5);
.button-gray.is-disabled, .button-gray:disabled | opacity: .5;
.button-red | color: #fff; background-color: #ff4919; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
.button-red:hover | opacity: .875;
.button-red.is-active, .button-red:active | box-shadow: inset 0 0 0 32px rgba(0,0,0,.125),inset 0 2px 3px 0 rgba(0,0,0,.25);
.button-red:focus | outline: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.5),0 0 1px 4px rgba(255,73,25,.5);
.button-red.is-disabled, .button-red:disabled | opacity: .5;
.button-nav-light:hover | background-color: rgba(0,0,0,.0625);
.button-nav-light.is-active, .button-nav-light:active | color: #333;
.button-nav-dark | color: #fff;
.button-nav-dark.is-active, .button-nav-dark:active, .button-nav-dark:hover | background-color: rgba(0,0,0,.125);
.button-nav-tab | margin-bottom: -1px; border-radius: 3px 3px 0 0; border-bottom: 1px solid #ccc;
.button-nav-tab:hover | background-color: rgba(0,0,0,.0625);
.button-nav-tab.is-active | background-color: #fff; border-bottom: 1px solid #fff; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;
.dark-gray | color: #333;
.white | color: #fff;
.blue | color: #0076df;
.mid-gray | color: #777;
.light-gray | color: #ccc;
.lighter-gray | color: #eee;
.red | color: #ff4919;
.green | color: #00df3f;
.yellow | color: #ffcf00;
.bg-dark-gray | background-color: #333;
.bg-white | background-color: #fff;
.bg-blue | background-color: #0076df;
.bg-mid-gray | background-color: #777;
.bg-light-gray | background-color: #ccc;
.bg-lighter-gray | background-color: #eee;
.bg-red | background-color: #ff4919;
.bg-green | background-color: #00df3f;
.bg-yellow | background-color: #ffcf00;
.bg-darken-1 | background-color: rgba(0,0,0,.0625);
.bg-darken-2 | background-color: rgba(0,0,0,.125);
.bg-darken-3 | background-color: rgba(0,0,0,.25);
.bg-darken-4 | background-color: rgba(0,0,0,.5);
.border | border-style: solid; border-width: 1px; border-color: #ccc;
.border-top | border-top-style: solid; border-top-width: 1px; border-top-color: #ccc;
.border-right | border-right-style: solid; border-right-width: 1px; border-right-color: #ccc;
.border-bottom | border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc;
.border-left | border-left-style: solid; border-left-width: 1px; border-left-color: #ccc;
.rounded | border-radius: 3px;
.circle | border-radius: 50%;
.rounded-top | border-radius: 3px 3px 0 0;
.rounded-right | border-radius: 0 3px 3px 0;
.rounded-bottom | border-radius: 0 0 3px 3px;
.rounded-left | border-radius: 3px 0 0 3px;
.not-rounded | border-radius: 0;