Selectors | Declarations |
---|---|
body, button | margin: 0; |
button, input, select, textarea | font-family: inherit; font-size: 100%; |
img | max-width: 100%; |
svg | max-height: 100%; |
Selectors | Declarations |
---|---|
body | font-family: var(--font-family); line-height: var(--line-height); font-size: 100%; |
h1, h2, h3, h4, h5, h6 | font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); line-height: var(--heading-line-height); margin-top: 1em; margin-bottom: .5em; |
p, dl, ol, ul | font-size: var(--h4); margin-top: 0; margin-bottom: var(--space-2); |
ol, ul | padding-left: var(--space-3); |
pre, code, samp | font-family: var(--monospace-font-family); font-size: inherit; |
pre | margin-top: 0; margin-bottom: var(--space-2); overflow-x: scroll; |
hr | margin-top: var(--space-3); margin-bottom: var(--space-3); |
blockquote | margin-top: var(--space-3); margin-bottom: var(--space-3); margin-left: 0; padding-left: var(--space-2); padding-right: var(--space-2); |
blockquote, blockquote p | font-size: var(--h3); font-style: italic; |
h1, .h1 | font-size: var(--h1); |
h2, .h2 | font-size: var(--h2); |
h3, .h3 | font-size: var(--h3); |
h4, .h4 | font-size: var(--h4); |
h5, .h5 | font-size: var(--h5); |
h6, .h6 | font-size: var(--h6); |
.list-reset | list-style: none; padding-left: 0; |
Selectors | Declarations |
---|---|
input, select, textarea, fieldset | font-size: var(--form-field-font-size); margin-top: 0; margin-bottom: var(--space-1, .5rem); |
input[type=text], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=week] | box-sizing: border-box; height: var(--form-field-height); padding: var(--form-field-padding-y) var(--form-field-padding-x); vertical-align: middle; -webkit-appearance: none; |
select | box-sizing: border-box; line-height: 1.75; padding: var(--form-field-padding-y) var(--form-field-padding-x); |
select:not([multiple]) | height: var(--form-field-height); vertical-align: middle; |
textarea | box-sizing: border-box; line-height: 1.75; padding: var(--form-field-padding-y) var(--form-field-padding-x); |
.fieldset-reset | padding: 0; margin-left: 0; margin-right: 0; border: 0; |
.fieldset-reset legend | padding: 0; |
Selectors | Declarations |
---|---|
button, .button | font-size: var(--button-font-size); font-weight: var(--button-font-weight); text-decoration: none; cursor: pointer; display: inline-block; box-sizing: border-box; line-height: var(--button-line-height); padding: var(--button-padding-y) var(--button-padding-x); margin: 0; height: auto; border: 1px solid transparent; vertical-align: middle; -webkit-appearance: none; |
button:after, button:before, .button:after, .button:before | box-sizing: border-box; |
::-moz-focus-inner | border: 0; padding: 0; |
.button:hover | text-decoration: none; |
Selectors | Declarations |
---|---|
table | border-collapse: separate; border-spacing: 0; max-width: 100%; width: 100%; |
th | text-align: left; font-weight: var(--table-header-font-weight); |
th, td | padding: var(--table-cell-padding-y) var(--table-cell-padding-x); line-height: inherit; |
th | vertical-align: bottom; |
td | vertical-align: top; |
Selectors | Declarations |
---|---|
.inline | display: inline; |
.block | display: block; |
.inline-block | display: inline-block; |
.overflow-hidden | overflow: hidden; |
.overflow-scroll | overflow: scroll; |
.overflow-auto | overflow: auto; |
.clearfix:before, .clearfix:after | 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%; |
Selectors | Declarations |
---|---|
.bold | font-weight: var(--bold-font-weight); |
.regular | font-weight: normal; |
.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; |
Selectors | Declarations |
---|---|
.m0 | margin: 0; |
.mt0 | margin-top: 0; |
.mr0 | margin-right: 0; |
.mb0 | margin-bottom: 0; |
.ml0 | margin-left: 0; |
.m1 | margin: var(--space-1); |
.mt1 | margin-top: var(--space-1); |
.mr1 | margin-right: var(--space-1); |
.mb1 | margin-bottom: var(--space-1); |
.ml1 | margin-left: var(--space-1); |
.m2 | margin: var(--space-2); |
.mt2 | margin-top: var(--space-2); |
.mr2 | margin-right: var(--space-2); |
.mb2 | margin-bottom: var(--space-2); |
.ml2 | margin-left: var(--space-2); |
.m3 | margin: var(--space-3); |
.mt3 | margin-top: var(--space-3); |
.mr3 | margin-right: var(--space-3); |
.mb3 | margin-bottom: var(--space-3); |
.ml3 | margin-left: var(--space-3); |
.m4 | margin: var(--space-4); |
.mt4 | margin-top: var(--space-4); |
.mr4 | margin-right: var(--space-4); |
.mb4 | margin-bottom: var(--space-4); |
.ml4 | margin-left: var(--space-4); |
.mxn1 | margin-left: -var(--space-1); margin-right: -var(--space-1); |
.mxn2 | margin-left: -var(--space-2); margin-right: -var(--space-2); |
.mxn3 | margin-left: -var(--space-3); margin-right: -var(--space-3); |
.mxn4 | margin-left: -var(--space-4); margin-right: -var(--space-4); |
.mx-auto | margin-left: auto; margin-right: auto; |
.p1 | padding: var(--space-1); |
.py1 | padding-top: var(--space-1); padding-bottom: var(--space-1); |
.px1 | padding-left: var(--space-1); padding-right: var(--space-1); |
.p2 | padding: var(--space-2); |
.py2 | padding-top: var(--space-2); padding-bottom: var(--space-2); |
.px2 | padding-left: var(--space-2); padding-right: var(--space-2); |
.p3 | padding: var(--space-3); |
.py3 | padding-top: var(--space-3); padding-bottom: var(--space-3); |
.px3 | padding-left: var(--space-3); padding-right: var(--space-3); |
.p4 | padding: var(--space-4); |
.py4 | padding-top: var(--space-4); padding-bottom: var(--space-4); |
.px4 | padding-left: var(--space-4); padding-right: var(--space-4); |
Selectors | Declarations |
---|---|
.sm-show, .md-show, .lg-show | display: none; |
.sm-show | display: block; |
.md-show | display: block; |
.lg-show | display: block; |
.sm-hide | display: none; |
.md-hide | display: none; |
.lg-hide | display: none; |
.display-none | display: none; |
.hide | position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); |
Selectors | Declarations |
---|---|
.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; |
Selectors | Declarations |
---|---|
.button-small | padding: var(--button-small-padding-y) var(--button-small-padding-x); |
.button-big | padding: var(--button-big-padding-y) var(--button-big-padding-x); |
.button-narrow | padding-left: var(--space-1); padding-right: var(--space-1); |
Selectors | Declarations |
---|---|
.container | max-width: var(--container-width); margin-left: auto; margin-right: auto; |
.col | float: left; box-sizing: border-box; |
.col-right | float: right; box-sizing: border-box; |
.col-1 | width: calc(1/12 * 100%); |
.col-2 | width: calc(2/12 * 100%); |
.col-3 | width: calc(3/12 * 100%); |
.col-4 | width: calc(4/12 * 100%); |
.col-5 | width: calc(5/12 * 100%); |
.col-6 | width: calc(6/12 * 100%); |
.col-7 | width: calc(7/12 * 100%); |
.col-8 | width: calc(8/12 * 100%); |
.col-9 | width: calc(9/12 * 100%); |
.col-10 | width: calc(10/12 * 100%); |
.col-11 | width: calc(11/12 * 100%); |
.col-12 | width: 100%; |
.sm-col | float: left; box-sizing: border-box; |
.sm-col-right | float: right; box-sizing: border-box; |
.sm-col-1 | width: calc(1/12 * 100%); |
.sm-col-2 | width: calc(2/12 * 100%); |
.sm-col-3 | width: calc(3/12 * 100%); |
.sm-col-4 | width: calc(4/12 * 100%); |
.sm-col-5 | width: calc(5/12 * 100%); |
.sm-col-6 | width: calc(6/12 * 100%); |
.sm-col-7 | width: calc(7/12 * 100%); |
.sm-col-8 | width: calc(8/12 * 100%); |
.sm-col-9 | width: calc(9/12 * 100%); |
.sm-col-10 | width: calc(10/12 * 100%); |
.sm-col-11 | width: calc(11/12 * 100%); |
.sm-col-12 | width: 100%; |
.md-col | float: left; box-sizing: border-box; |
.md-col-right | float: right; box-sizing: border-box; |
.md-col-1 | width: calc(1/12 * 100%); |
.md-col-2 | width: calc(2/12 * 100%); |
.md-col-3 | width: calc(3/12 * 100%); |
.md-col-4 | width: calc(4/12 * 100%); |
.md-col-5 | width: calc(5/12 * 100%); |
.md-col-6 | width: calc(6/12 * 100%); |
.md-col-7 | width: calc(7/12 * 100%); |
.md-col-8 | width: calc(8/12 * 100%); |
.md-col-9 | width: calc(9/12 * 100%); |
.md-col-10 | width: calc(10/12 * 100%); |
.md-col-11 | width: calc(11/12 * 100%); |
.md-col-12 | width: 100%; |
.lg-col | float: left; box-sizing: border-box; |
.lg-col-right | float: right; box-sizing: border-box; |
.lg-col-1 | width: calc(1/12 * 100%); |
.lg-col-2 | width: calc(2/12 * 100%); |
.lg-col-3 | width: calc(3/12 * 100%); |
.lg-col-4 | width: calc(4/12 * 100%); |
.lg-col-5 | width: calc(5/12 * 100%); |
.lg-col-6 | width: calc(6/12 * 100%); |
.lg-col-7 | width: calc(7/12 * 100%); |
.lg-col-8 | width: calc(8/12 * 100%); |
.lg-col-9 | width: calc(9/12 * 100%); |
.lg-col-10 | width: calc(10/12 * 100%); |
.lg-col-11 | width: calc(11/12 * 100%); |
.lg-col-12 | width: 100%; |
Selectors | Declarations |
---|---|
.flex | display: flex; |
.flex-column | flex-direction: column; |
.flex-wrap | flex-wrap: wrap; |
.flex-center | align-items: center; |
.flex-baseline | align-items: baseline; |
.flex-stretch | align-items: stretch; |
.flex-start | align-items: flex-start; |
.flex-end | align-items: flex-end; |
.flex-first | order: -1; |
.flex-last | order: 1024; |
.flex-auto | flex: 1 1 auto; |
.flex-grow | flex: 1 0 auto; |
.flex-none | flex: none; |
.flex > div | box-sizing: border-box; |
.sm-flex | display: flex; |
.sm-flex > div | box-sizing: border-box; |
.md-flex | display: flex; |
.md-flex > div | box-sizing: border-box; |
.lg-flex | display: flex; |
.lg-flex > div | box-sizing: border-box; |
Selectors | Declarations |
---|---|
body | color: var(--black); background-color: white; |
a | color: var(--link-color, var(--blue) ); text-decoration: none; |
a:hover | text-decoration: underline; |
pre, code | background-color: var(--pre-background-color, var(--silver) ); border-radius: var(--border-radius); |
hr | border: 0; border-bottom-style: solid; border-bottom-width: var(--border-width); border-bottom-color: var(--border-color); |
.button | color: white; background-color: var(--button-background-color, var(--blue) ); border-radius: var(--border-radius); transition-duration: .05s; transition-timing-function: ease-out; transition-property: box-shadow, background-color; |
.button:hover | box-shadow: inset 0 0 0 20rem var(--darken-1); |
.button:focus | outline: none; border-color: var(--darken-2); box-shadow: 0 0 2px 1px var(--darken-3); |
.button:active, .button.is-active | box-shadow: inset 0 0 0 20rem var(--darken-2), inset 0 3px 4px 0 var(--darken-3), 0 0 1px var(--darken-2); |
.button:disabled, .button.is-disabled | opacity: .5; |
Selectors | Declarations |
---|---|
.button-outline | position: relative; z-index: 2; color: inherit; background-color: transparent; border-radius: var(--border-radius); border: var(--border-width) solid currentcolor; transition-duration: .1s; transition-timing-function: ease-out; transition-property: box-shadow, background-color; |
.button-outline:before | content: ''; width: 100%; height: 100%; display: block; position: absolute; z-index: -1; top: -1px; left: -1px; border: 1px solid transparent; background-color: currentcolor; border-radius: var(--border-radius); transition-duration: .1s; transition-timing-function: ease-out; transition-property: opacity; opacity: 0; |
.button-outline:hover | box-shadow: none; |
.button-outline:hover:before | opacity: .125; |
.button-outline:focus | outline: none; border: var(--border-width) solid currentcolor; box-shadow: 0 0 3px 1px; |
.button-outline:active, .button-outline.is-active | box-shadow: inset 0 1px 5px 0, 0 0 1px; |
.button-outline:disabled, .button-outline.is-disabled | opacity: .5; |
Selectors | Declarations |
---|---|
.button-transparent | position: relative; z-index: 2; color: inherit; background-color: transparent; border-radius: 0; border: var(--border-width) solid transparent; transition-duration: .1s; transition-timing-function: ease-out; transition-property: box-shadow; |
.button-transparent:before | content: ''; width: 100%; height: 100%; display: block; position: absolute; z-index: -1; top: -1px; left: -1px; border: 1px solid transparent; background-color: currentcolor; transition-duration: .1s; transition-timing-function: ease-out; transition-property: opacity; opacity: 0; |
.button-transparent:hover | box-shadow: none; |
.button-transparent:hover:before | opacity: .0625; opacity: .09375; |
.button-transparent:focus | outline: none; border-color: transparent; box-shadow: 0 0 3px; |
.button-transparent:active:before, .button-transparent.is-active:before | opacity: .0625; |
.button-transparent:disabled, .button-transparent.is-disabled | opacity: .5; |
Selectors | Declarations |
---|---|
.black, .dark-gray | color: var(--black); |
.gray, .mid-gray | color: var(--gray); |
.silver, .light-gray | color: var(--silver); |
.white | color: var(--white); |
.aqua | color: var(--aqua); |
.blue | color: var(--blue); |
.navy | color: var(--navy); |
.teal | color: var(--teal); |
.green | color: var(--green); |
.olive | color: var(--olive); |
.lime | color: var(--lime); |
.yellow | color: var(--yellow); |
.orange | color: var(--orange); |
.red | color: var(--red); |
.fuchsia | color: var(--fuchsia); |
.purple | color: var(--purple); |
.maroon | color: var(--maroon); |
.bg-black, .bg-dark-gray | background-color: var(--black); |
.bg-gray, .bg-mid-gray | background-color: var(--gray); |
.bg-silver, .bg-light-gray | background-color: var(--silver); |
.bg-white | background-color: var(--white); |
.bg-aqua | background-color: var(--aqua); |
.bg-blue | background-color: var(--blue); |
.bg-navy | background-color: var(--navy); |
.bg-teal | background-color: var(--teal); |
.bg-green | background-color: var(--green); |
.bg-olive | background-color: var(--olive); |
.bg-lime | background-color: var(--lime); |
.bg-yellow | background-color: var(--yellow); |
.bg-orange | background-color: var(--orange); |
.bg-red | background-color: var(--red); |
.bg-fuchsia | background-color: var(--fuchsia); |
.bg-purple | background-color: var(--purple); |
.bg-maroon | background-color: var(--maroon); |
.bg-darken-1 | background-color: var(--darken-1); |
.bg-darken-2 | background-color: var(--darken-2); |
.bg-darken-3 | background-color: var(--darken-3); |
.bg-darken-4 | background-color: var(--darken-4); |
.border-aqua | border-color: var(--aqua); |
.border-blue | border-color: var(--blue); |
.border-navy | border-color: var(--navy); |
.border-teal | border-color: var(--teal); |
.border-green | border-color: var(--green); |
.border-olive | border-color: var(--olive); |
.border-lime | border-color: var(--lime); |
.border-yellow | border-color: var(--yellow); |
.border-orange | border-color: var(--orange); |
.border-red | border-color: var(--red); |
.border-fuchsia | border-color: var(--fuchsia); |
.border-purple | border-color: var(--purple); |
.border-maroon | border-color: var(--maroon); |
.border-black | border-color: var(--black); |
.border-gray | border-color: var(--gray); |
.border-silver | border-color: var(--silver); |
.border-white | border-color: var(--white); |
.border-darken-1 | border-color: var(--darken-1); |
.border-darken-2 | border-color: var(--darken-2); |
.border-darken-3 | border-color: var(--darken-3); |
.border-darken-4 | border-color: var(--darken-4); |
.muted | opacity: .5; |
Selectors | Declarations |
---|---|
.border | border-style: solid; border-width: var(--border-width); border-color: var(--border-color); |
.border-top | border-top-style: solid; border-top-width: var(--border-width); border-top-color: var(--border-color); |
.border-right | border-right-style: solid; border-right-width: var(--border-width); border-right-color: var(--border-color); |
.border-bottom | border-bottom-style: solid; border-bottom-width: var(--border-width); border-bottom-color: var(--border-color); |
.border-left | border-left-style: solid; border-left-width: var(--border-width); border-left-color: var(--border-color); |
.rounded | border-radius: var(--border-radius); |
.circle | border-radius: 50%; |
.rounded-top | border-radius: var(--border-radius) var(--border-radius) 0 0; |
.rounded-right | border-radius: 0 var(--border-radius) var(--border-radius) 0; |
.rounded-bottom | border-radius: 0 0 var(--border-radius) var(--border-radius); |
.rounded-left | border-radius: var(--border-radius) 0 0 var(--border-radius); |
.not-rounded | border-radius: 0; |
Selectors | Declarations |
---|---|
.field-light | background-color: white; transition: box-shadow .2s ease; border-style: solid; border-width: var(--border-width); border-color: var(--border-color); border-radius: var(--border-radius); |
.field-light:focus | outline: none; border-color: var(--blue); box-shadow: 0 0 2px color(var(--blue) alpha(.5)); |
.field-light:disabled | color: var(--mid-gray); background-color: var(--darken-2); |
.field-light:read-only:not(select) | background-color: var(--darken-2); |
.field-light:invalid | border-color: var(--red); |
.field-light.is-success | border-color: var(--green); |
.field-light.is-warning | border-color: var(--yellow); |
.field-light.is-error | border-color: var(--red); |
.radio-light, .checkbox-light | transition: box-shadow .2s ease; |
.radio-light | border-radius: 50%; |
.radio-light:focus, .checkbox-light:focus | outline: none; box-shadow: 0 0 2px color(var(--blue) alpha(.5)); |
Selectors | Declarations |
---|---|
.field-dark | color: white; background-color: var(--darken-3); border: 1px solid var(--darken-1); border-radius: var(--border-radius, 3px); |
.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: var(--red); |
.field-dark.is-success | border-color: var(--green); |
.field-dark.is-warning | border-color: var(--yellow); |
.field-dark.is-error | border-color: var(--red); |
Selectors | Declarations |
---|---|
input[type=range] | vertical-align: middle; background-color: transparent; |
.range-light | color: inherit; -webkit-appearance: none; padding-top: var(--form-field-padding-y); padding-bottom: var(--form-field-padding-y); |
.range-light::-webkit-slider-thumb | -webkit-appearance: none; position: relative; width: var(--range-thumb-width); height: var(--range-thumb-height); border-radius: var(--border-radius); background-color: currentcolor; cursor: pointer; margin-top: var(--range-thumb-offset); |
.range-light::-webkit-slider-thumb:before | content: ''; display: block; position: absolute; top: calc( -.5 * var(--range-thumb-pseudo-size) + (.5 * var(--range-thumb-height)) ); left: calc( (-.5 * var(--range-thumb-pseudo-size)) + (.5 * var(--range-thumb-width)) ); width: var(--range-thumb-pseudo-size); height: var(--range-thumb-pseudo-size); opacity: 0; |
.range-light::-moz-range-thumb | width: var(--range-thumb-width); height: var(--range-thumb-height); border-radius: var(--border-radius); border-color: transparent; border-width: 0; background-color: currentcolor; cursor: pointer; |
.range-light::-webkit-slider-runnable-track | height: var(--range-track-height); cursor: pointer; border-radius: var(--border-radius); background-color: var(--darken-3); |
.range-light::-moz-range-track | height: var(--range-track-height); cursor: pointer; border-radius: var(--border-radius); background-color: var(--darken-3); |
.range-light:focus | outline: none; |
.range-light:focus::-webkit-slider-thumb | outline: none; border: 0; box-shadow: 0 0 1px 2px currentcolor; |
.range-light:focus::-moz-range-thumb | outline: none; border: 0; box-shadow: 0 0 1px 2px currentcolor; |
Selectors | Declarations |
---|---|
.progress | display: block; width: 100%; height: calc( var(--form-field-height) / 4 ); margin: var(--form-field-padding-y) 0; background-color: var(--darken-2); border: 0; border-radius: 10000px; overflow: hidden; -webkit-appearance: none; cursor: pointer; |
.progress::-webkit-progress-bar | -webkit-appearance: none; background-color: var(--darken-2); |
.progress::-webkit-progress-value | -webkit-appearance: none; background-color: currentColor; |
.progress::-moz-progress-bar | background-color: currentColor; |
Selectors | Declarations |
---|---|
.table-light th, .table-light td | border-bottom-style: solid; border-bottom-width: var(--border-width); border-bottom-color: var(--border-color); |
.table-light tr:last-child td | border-bottom: 0; |
Selectors | Declarations |
---|---|
.bg-cover | background-size: cover; |
.bg-contain | background-size: contain; |
.bg-center | background-position: center; |
.bg-top | background-position: top; |
.bg-right | background-position: right; |
.bg-bottom | background-position: bottom; |
.bg-left | background-position: left; |