A list of all styles included in Basscss
Selectors | Declarations |
---|---|
body, button | margin: 0; |
button, input, select, textarea | font-family: inherit; font-size: 100%; |
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 | 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] | -moz-box-sizing: border-box; box-sizing: border-box; height: 2.25em; padding: .25em 1rem; -webkit-appearance: none; |
select | -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.75; padding: .25em 1rem; |
select:not([multiple]) | height: 2.25em; |
textarea | -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.75; padding: .25em 1rem; |
.fieldset-reset | padding: 0; margin-left: 0; margin-right: 0; border: 0; |
.fieldset-reset legend | padding: 0; |
.button, button | font-weight: 700; text-decoration: none; cursor: pointer; display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.125; padding: .5em 1rem; margin: 0; height: auto; border: 1px solid transparent; -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: .25em 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; |
.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; |
.button-small | padding: .25em .5rem; |
.button-big | line-height: 1.625; |
.button-narrow | padding-left: .5rem; padding-right: .5rem; |
.x-group-item | margin-left: -1px; |
.x-group-item:first-of-type | margin-left: 0; |
.y-group-item | margin-top: -1px; |
.y-group-item:first-of-type | margin-top: 0; |
.x-group-item-2 | margin-left: -2px; |
.x-group-item-2:first-of-type | margin-left: 0; |
.y-group-item-2 | margin-top: -2px; |
.y-group-item-2:first-of-type | margin-top: 0; |
.x-group-item-2:focus, .x-group-item:focus, .y-group-item-2:focus, .y-group-item:focus | position: relative; z-index: 1; |
.disclosure-group .disclosure-show | display: none; |
.disclosure-group.is-active .disclosure-show | display: block!important; |
.container | max-width: 64em; margin-left: auto; margin-right: auto; |
.col | float: left; -moz-box-sizing: border-box; box-sizing: border-box; |
.col-right | float: right; -moz-box-sizing: border-box; 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; -moz-box-sizing: border-box; box-sizing: border-box; |
.sm-col-right | (min-width:40em) float: right; -moz-box-sizing: border-box; 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; -moz-box-sizing: border-box; box-sizing: border-box; |
.md-col-right | (min-width:52em) float: right; -moz-box-sizing: border-box; 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; -moz-box-sizing: border-box; box-sizing: border-box; |
.lg-col-right | (min-width:64em) float: right; -moz-box-sizing: border-box; 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: #f95020; |
.field-light.is-success | border-color: #00cf26; |
.field-light.is-warning | border-color: #efcc00; |
.field-light.is-error | border-color: #f95020; |
.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: #f95020; |
.field-dark.is-success | border-color: #00cf26; |
.field-dark.is-warning | border-color: #efcc00; |
.field-dark.is-error | border-color: #f95020; |
.table-light td, .table-light th | border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc; |
.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: 1; 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: #f95020; 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(249,80,32,.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: #f95020; |
.green | color: #00cf26; |
.yellow | color: #efcc00; |
.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: #f95020; |
.bg-green | background-color: #00cf26; |
.bg-yellow | background-color: #efcc00; |
.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; |