-moz-appearance | .input-reset: none | forms |
-moz-osx-font-smoothing | .grow: grayscale
.grow-large: grayscale | hovers |
-webkit-appearance | .input-reset: none | forms |
align-content | .content-around: space-around
.content-around-l: space-around
.content-around-m: space-around
.content-around-ns: space-around
.content-between: space-between
.content-between-l: space-between
.content-between-m: space-between
.content-between-ns: space-between
.content-center: center
.content-center-l: center
.content-center-m: center
.content-center-ns: center
.content-end: flex-end
.content-end-l: flex-end
.content-end-m: flex-end
.content-end-ns: flex-end
.content-start: flex-start
.content-start-l: flex-start
.content-start-m: flex-start
.content-start-ns: flex-start
.content-stretch: stretch
.content-stretch-l: stretch
.content-stretch-m: stretch
.content-stretch-ns: stretch | flexbox |
align-items | .items-baseline: baseline
.items-baseline-l: baseline
.items-baseline-m: baseline
.items-baseline-ns: baseline
.items-center: center
.items-center-l: center
.items-center-m: center
.items-center-ns: center
.items-end: flex-end
.items-end-l: flex-end
.items-end-m: flex-end
.items-end-ns: flex-end
.items-start: flex-start
.items-start-l: flex-start
.items-start-m: flex-start
.items-start-ns: flex-start
.items-stretch: stretch
.items-stretch-l: stretch
.items-stretch-m: stretch
.items-stretch-ns: stretch | flexbox |
align-self | .self-baseline: baseline
.self-baseline-l: baseline
.self-baseline-m: baseline
.self-baseline-ns: baseline
.self-center: center
.self-center-l: center
.self-center-m: center
.self-center-ns: center
.self-end: flex-end
.self-end-l: flex-end
.self-end-m: flex-end
.self-end-ns: flex-end
.self-start: flex-start
.self-start-l: flex-start
.self-start-m: flex-start
.self-start-ns: flex-start
.self-stretch: stretch
.self-stretch-l: stretch
.self-stretch-m: stretch
.self-stretch-ns: stretch | flexbox |
backface-visibility | .grow: hidden
.grow-large: hidden | hovers |
background | .debug-grid: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left
.debug-grid-16: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left
.debug-grid-16-solid: white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left
.debug-grid-8-solid: white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left | debug-grid |
background-color | .bg-black: var(--black)
.bg-black-05: var(--black-05)
.bg-black-10: var(--black-10)
.bg-black-20: var(--black-20)
.bg-black-30: var(--black-30)
.bg-black-40: var(--black-40)
.bg-black-50: var(--black-50)
.bg-black-60: var(--black-60)
.bg-black-70: var(--black-70)
.bg-black-80: var(--black-80)
.bg-black-90: var(--black-90)
.bg-blue: var(--blue)
.bg-dark-blue: var(--dark-blue)
.bg-dark-gray: var(--dark-gray)
.bg-dark-green: var(--dark-green)
.bg-dark-pink: var(--dark-pink)
.bg-dark-red: var(--dark-red)
.bg-gold: var(--gold)
.bg-gray: var(--gray)
.bg-green: var(--green)
.bg-hot-pink: var(--hot-pink)
.bg-inherit: inherit
.bg-light-blue: var(--light-blue)
.bg-light-gray: var(--light-gray)
.bg-light-green: var(--light-green)
.bg-light-pink: var(--light-pink)
.bg-light-purple: var(--light-purple)
.bg-light-red: var(--light-red)
.bg-light-silver: var(--light-silver)
.bg-light-yellow: var(--light-yellow)
.bg-lightest-blue: var(--lightest-blue)
.bg-mid-gray: var(--mid-gray)
.bg-moon-gray: var(--moon-gray)
.bg-navy: var(--navy)
.bg-near-black: var(--near-black)
.bg-near-white: var(--near-white)
.bg-orange: var(--orange)
.bg-pink: var(--pink)
.bg-purple: var(--purple)
.bg-red: var(--red)
.bg-silver: var(--silver)
.bg-transparent: var(--transparent)
.bg-washed-blue: var(--washed-blue)
.bg-washed-green: var(--washed-green)
.bg-washed-red: var(--washed-red)
.bg-washed-yellow: var(--washed-yellow)
.bg-white: var(--white)
.bg-white-10: var(--white-10)
.bg-white-20: var(--white-20)
.bg-white-30: var(--white-30)
.bg-white-40: var(--white-40)
.bg-white-50: var(--white-50)
.bg-white-60: var(--white-60)
.bg-white-70: var(--white-70)
.bg-white-80: var(--white-80)
.bg-white-90: var(--white-90)
.bg-yellow: var(--yellow)
.hover-bg-black-10:hover,
.hover-bg-black-10:focus: var(--black-10)
.hover-bg-black-20:hover,
.hover-bg-black-20:focus: var(--black-20)
.hover-bg-black-30:hover,
.hover-bg-black-30:focus: var(--black-30)
.hover-bg-black-40:hover,
.hover-bg-black-40:focus: var(--black-40)
.hover-bg-black-50:hover,
.hover-bg-black-50:focus: var(--black-50)
.hover-bg-black-60:hover,
.hover-bg-black-60:focus: var(--black-60)
.hover-bg-black-70:hover,
.hover-bg-black-70:focus: var(--black-70)
.hover-bg-black-80:hover,
.hover-bg-black-80:focus: var(--black-80)
.hover-bg-black-90:hover,
.hover-bg-black-90:focus: var(--black-90)
.hover-bg-black:hover,
.hover-bg-black:focus: var(--black)
.hover-bg-blue:hover,
.hover-bg-blue:focus: var(--blue)
.hover-bg-dark-blue:hover,
.hover-bg-dark-blue:focus: var(--dark-blue)
.hover-bg-dark-gray:hover,
.hover-bg-dark-gray:focus: var(--dark-gray)
.hover-bg-dark-green:hover,
.hover-bg-dark-green:focus: var(--dark-green)
.hover-bg-dark-pink:hover,
.hover-bg-dark-pink:focus: var(--dark-pink)
.hover-bg-dark-red:hover,
.hover-bg-dark-red:focus: var(--dark-red)
.hover-bg-gold:hover,
.hover-bg-gold:focus: var(--gold)
.hover-bg-gray:hover,
.hover-bg-gray:focus: var(--gray)
.hover-bg-green:hover,
.hover-bg-green:focus: var(--green)
.hover-bg-hot-pink:hover,
.hover-bg-hot-pink:focus: var(--hot-pink)
.hover-bg-inherit:hover,
.hover-bg-inherit:focus: inherit
.hover-bg-light-blue:hover,
.hover-bg-light-blue:focus: var(--light-blue)
.hover-bg-light-gray:hover,
.hover-bg-light-gray:focus: var(--light-gray)
.hover-bg-light-green:hover,
.hover-bg-light-green:focus: var(--light-green)
.hover-bg-light-pink:hover,
.hover-bg-light-pink:focus: var(--light-pink)
.hover-bg-light-purple:hover,
.hover-bg-light-purple:focus: var(--light-purple)
.hover-bg-light-red:hover,
.hover-bg-light-red:focus: var(--light-red)
.hover-bg-light-silver:hover,
.hover-bg-light-silver:focus: var(--light-silver)
.hover-bg-light-yellow:hover,
.hover-bg-light-yellow:focus: var(--light-yellow)
.hover-bg-lightest-blue:hover,
.hover-bg-lightest-blue:focus: var(--lightest-blue)
.hover-bg-mid-gray:hover,
.hover-bg-mid-gray:focus: var(--mid-gray)
.hover-bg-moon-gray:hover,
.hover-bg-moon-gray:focus: var(--moon-gray)
.hover-bg-navy:hover,
.hover-bg-navy:focus: var(--navy)
.hover-bg-near-black:hover,
.hover-bg-near-black:focus: var(--near-black)
.hover-bg-near-white:hover,
.hover-bg-near-white:focus: var(--near-white)
.hover-bg-orange:hover,
.hover-bg-orange:focus: var(--orange)
.hover-bg-pink:hover,
.hover-bg-pink:focus: var(--pink)
.hover-bg-purple:hover,
.hover-bg-purple:focus: var(--purple)
.hover-bg-red:hover,
.hover-bg-red:focus: var(--red)
.hover-bg-silver:hover,
.hover-bg-silver:focus: var(--silver)
.hover-bg-transparent:hover,
.hover-bg-transparent:focus: var(--transparent)
.hover-bg-washed-blue:hover,
.hover-bg-washed-blue:focus: var(--washed-blue)
.hover-bg-washed-green:hover,
.hover-bg-washed-green:focus: var(--washed-green)
.hover-bg-washed-red:hover,
.hover-bg-washed-red:focus: var(--washed-red)
.hover-bg-washed-yellow:hover,
.hover-bg-washed-yellow:focus: var(--washed-yellow)
.hover-bg-white-10:hover,
.hover-bg-white-10:focus: var(--white-10)
.hover-bg-white-20:hover,
.hover-bg-white-20:focus: var(--white-20)
.hover-bg-white-30:hover,
.hover-bg-white-30:focus: var(--white-30)
.hover-bg-white-40:hover,
.hover-bg-white-40:focus: var(--white-40)
.hover-bg-white-50:hover,
.hover-bg-white-50:focus: var(--white-50)
.hover-bg-white-60:hover,
.hover-bg-white-60:focus: var(--white-60)
.hover-bg-white-70:hover,
.hover-bg-white-70:focus: var(--white-70)
.hover-bg-white-80:hover,
.hover-bg-white-80:focus: var(--white-80)
.hover-bg-white-90:hover,
.hover-bg-white-90:focus: var(--white-90)
.hover-bg-white:hover,
.hover-bg-white:focus: var(--white)
.hover-bg-yellow:hover,
.hover-bg-yellow:focus: var(--yellow)
.stripe-dark:nth-child(odd): var(--black-10)
.stripe-light:nth-child(odd): var(--white-10)
.striped--light-gray:nth-child(odd): var(--light-gray)
.striped--light-silver:nth-child(odd): var(--light-silver)
.striped--moon-gray:nth-child(odd): var(--moon-gray)
.striped--near-white:nth-child(odd): var(--near-white) | skins
skins-pseudo
tables |
background-position | .bg-bottom: bottom center
.bg-bottom-l: bottom center
.bg-bottom-m: bottom center
.bg-bottom-ns: bottom center
.bg-center: center center
.bg-center-l: center center
.bg-center-m: center center
.bg-center-ns: center center
.bg-left: center left
.bg-left-l: center left
.bg-left-m: center left
.bg-left-ns: center left
.bg-right: center right
.bg-right-l: center right
.bg-right-m: center right
.bg-right-ns: center right
.bg-top: top center
.bg-top-l: top center
.bg-top-m: top center
.bg-top-ns: top center | background-position |
background-repeat | .bg-bottom: no-repeat
.bg-bottom-l: no-repeat
.bg-bottom-m: no-repeat
.bg-bottom-ns: no-repeat
.bg-center: no-repeat
.bg-center-l: no-repeat
.bg-center-m: no-repeat
.bg-center-ns: no-repeat
.bg-left: no-repeat
.bg-left-l: no-repeat
.bg-left-m: no-repeat
.bg-left-ns: no-repeat
.bg-right: no-repeat
.bg-right-l: no-repeat
.bg-right-m: no-repeat
.bg-right-ns: no-repeat
.bg-top: no-repeat
.bg-top-l: no-repeat
.bg-top-m: no-repeat
.bg-top-ns: no-repeat | background-position |
background-size | .contain: contain
.contain-l: contain
.contain-m: contain
.contain-ns: contain
.cover: cover
.cover-l: cover
.cover-m: cover
.cover-ns: cover | background-size |
border | .button-reset::-moz-focus-inner,
.input-reset::-moz-focus-inner: 0 | forms |
border-bottom-left-radius | .br--right: 0
.br--right-l: 0
.br--right-m: 0
.br--right-ns: 0
.br--top: 0
.br--top-l: 0
.br--top-m: 0
.br--top-ns: 0 | border-radius |
border-bottom-right-radius | .br--left: 0
.br--left-l: 0
.br--left-m: 0
.br--left-ns: 0
.br--top: 0
.br--top-l: 0
.br--top-m: 0
.br--top-ns: 0 | border-radius |
border-bottom-style | .bb: solid
.bb-l: solid
.bb-m: solid
.bb-ns: solid | borders |
border-bottom-width | .bb: 1px
.bb-0: 0
.bb-0-l: 0
.bb-0-m: 0
.bb-0-ns: 0
.bb-l: 1px
.bb-m: 1px
.bb-ns: 1px | borders
border-widths |
border-collapse | .collapse: collapse | tables |
border-color | .b--black: var(--black)
.b--black-0125: var(--black-0125)
.b--black-025: var(--black-025)
.b--black-05: var(--black-05)
.b--black-10: var(--black-10)
.b--black-20: var(--black-20)
.b--black-30: var(--black-30)
.b--black-40: var(--black-40)
.b--black-50: var(--black-50)
.b--black-60: var(--black-60)
.b--black-70: var(--black-70)
.b--black-80: var(--black-80)
.b--black-90: var(--black-90)
.b--blue: var(--blue)
.b--dark-blue: var(--dark-blue)
.b--dark-gray: var(--dark-gray)
.b--dark-green: var(--dark-green)
.b--dark-pink: var(--dark-pink)
.b--dark-red: var(--dark-red)
.b--gold: var(--gold)
.b--gray: var(--gray)
.b--green: var(--green)
.b--hot-pink: var(--hot-pink)
.b--inherit: inherit
.b--light-blue: var(--light-blue)
.b--light-gray: var(--light-gray)
.b--light-green: var(--light-green)
.b--light-pink: var(--light-pink)
.b--light-purple: var(--light-purple)
.b--light-red: var(--light-red)
.b--light-silver: var(--light-silver)
.b--light-yellow: var(--light-yellow)
.b--lightest-blue: var(--lightest-blue)
.b--mid-gray: var(--mid-gray)
.b--moon-gray: var(--moon-gray)
.b--navy: var(--navy)
.b--near-black: var(--near-black)
.b--near-white: var(--near-white)
.b--orange: var(--orange)
.b--pink: var(--pink)
.b--purple: var(--purple)
.b--red: var(--red)
.b--silver: var(--silver)
.b--transparent: var(--transparent)
.b--washed-blue: var(--washed-blue)
.b--washed-green: var(--washed-green)
.b--washed-red: var(--washed-red)
.b--washed-yellow: var(--washed-yellow)
.b--white: var(--white)
.b--white-0125: var(--white-0125)
.b--white-025: var(--white-025)
.b--white-05: var(--white-05)
.b--white-10: var(--white-10)
.b--white-20: var(--white-20)
.b--white-30: var(--white-30)
.b--white-40: var(--white-40)
.b--white-50: var(--white-50)
.b--white-60: var(--white-60)
.b--white-70: var(--white-70)
.b--white-80: var(--white-80)
.b--white-90: var(--white-90)
.b--yellow: var(--yellow) | border-colors |
border-left-style | .bl: solid
.bl-l: solid
.bl-m: solid
.bl-ns: solid | borders |
border-left-width | .bl: 1px
.bl-0: 0
.bl-0-l: 0
.bl-0-m: 0
.bl-0-ns: 0
.bl-l: 1px
.bl-m: 1px
.bl-ns: 1px | borders
border-widths |
border-radius | .br-100: 100%
.br-100-l: 100%
.br-100-m: 100%
.br-100-ns: 100%
.br-pill: 9999px
.br-pill-l: 9999px
.br-pill-m: 9999px
.br-pill-ns: 9999px
.br0: 0
.br0-l: 0
.br0-m: 0
.br0-ns: 0
.br1: .125rem
.br1-l: .125rem
.br1-m: .125rem
.br1-ns: .125rem
.br2: .25rem
.br2-l: .25rem
.br2-m: .25rem
.br2-ns: .25rem
.br3: .5rem
.br3-l: .5rem
.br3-m: .5rem
.br3-ns: .5rem
.br4: 1rem
.br4-l: 1rem
.br4-m: 1rem
.br4-ns: 1rem
.shadow-hover::after: inherit | border-radius
hovers |
border-right-style | .br: solid
.br-l: solid
.br-m: solid
.br-ns: solid | borders |
border-right-width | .br: 1px
.br-0: 0
.br-0-l: 0
.br-0-m: 0
.br-0-ns: 0
.br-l: 1px
.br-m: 1px
.br-ns: 1px | borders
border-widths |
border-spacing | .collapse: 0 | tables |
border-style | .b--dashed: dashed
.b--dashed-l: dashed
.b--dashed-m: dashed
.b--dashed-ns: dashed
.b--dotted: dotted
.b--dotted-l: dotted
.b--dotted-m: dotted
.b--dotted-ns: dotted
.b--none: none
.b--none-l: none
.b--none-m: none
.b--none-ns: none
.b--solid: solid
.b--solid-l: solid
.b--solid-m: solid
.b--solid-ns: solid
.ba: solid
.ba-l: solid
.ba-m: solid
.ba-ns: solid
.bn: none
.bn-l: none
.bn-m: none
.bn-ns: none | borders
border-style |
border-top-left-radius | .br--bottom: 0
.br--bottom-l: 0
.br--bottom-m: 0
.br--bottom-ns: 0
.br--right: 0
.br--right-l: 0
.br--right-m: 0
.br--right-ns: 0 | border-radius |
border-top-right-radius | .br--bottom: 0
.br--bottom-l: 0
.br--bottom-m: 0
.br--bottom-ns: 0
.br--left: 0
.br--left-l: 0
.br--left-m: 0
.br--left-ns: 0 | border-radius |
border-top-style | .bt: solid
.bt-l: solid
.bt-m: solid
.bt-ns: solid | borders |
border-top-width | .bt: 1px
.bt-0: 0
.bt-0-l: 0
.bt-0-m: 0
.bt-0-ns: 0
.bt-l: 1px
.bt-m: 1px
.bt-ns: 1px | borders
border-widths |
border-width | .ba: 1px
.ba-l: 1px
.ba-m: 1px
.ba-ns: 1px
.bn: 0
.bn-l: 0
.bn-m: 0
.bn-ns: 0
.bw0: 0
.bw0-l: 0
.bw0-m: 0
.bw0-ns: 0
.bw1: .125rem
.bw1-l: .125rem
.bw1-m: .125rem
.bw1-ns: .125rem
.bw2: .25rem
.bw2-l: .25rem
.bw2-m: .25rem
.bw2-ns: .25rem
.bw3: .5rem
.bw3-l: .5rem
.bw3-m: .5rem
.bw3-ns: .5rem
.bw4: 1rem
.bw4-l: 1rem
.bw4-m: 1rem
.bw4-ns: 1rem
.bw5: 2rem
.bw5-l: 2rem
.bw5-m: 2rem
.bw5-ns: 2rem | borders
border-widths |
bottom | .absolute--fill: 0
.absolute--fill-l: 0
.absolute--fill-m: 0
.absolute--fill-ns: 0
.aspect-ratio--object: 0
.aspect-ratio--object-l: 0
.aspect-ratio--object-m: 0
.aspect-ratio--object-ns: 0
.bottom--1: -1rem
.bottom--1-l: -1rem
.bottom--1-m: -1rem
.bottom--1-ns: -1rem
.bottom--2: -2rem
.bottom--2-l: -2rem
.bottom--2-m: -2rem
.bottom--2-ns: -2rem
.bottom-0: 0
.bottom-0-l: 0
.bottom-0-m: 0
.bottom-0-ns: 0
.bottom-1: 1rem
.bottom-1-l: 1rem
.bottom-1-m: 1rem
.bottom-1-ns: 1rem
.bottom-2: 2rem
.bottom-2-l: 2rem
.bottom-2-m: 2rem
.bottom-2-ns: 2rem | aspect-ratios
coordinates |
box-shadow | .shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 )
.shadow-1-l: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 )
.shadow-1-m: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 )
.shadow-1-ns: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 )
.shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 )
.shadow-2-l: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 )
.shadow-2-m: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 )
.shadow-2-ns: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 )
.shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 )
.shadow-3-l: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 )
.shadow-3-m: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 )
.shadow-3-ns: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 )
.shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 )
.shadow-4-l: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 )
.shadow-4-m: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 )
.shadow-4-ns: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 )
.shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 )
.shadow-5-l: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 )
.shadow-5-m: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 )
.shadow-5-ns: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 )
.shadow-hover::after: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ) | box-shadow
hovers |
box-sizing | html,
body,
div,
article,
section,
main,
footer,
header,
form,
fieldset,
legend,
pre,
code,
a,
h1,h2,h3,h4,h5,h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
textarea,
table,
td,
th,
tr,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="url"],
.border-box: border-box | box-sizing |
clear | .cb: both
.cb-l: both
.cb-m: both
.cb-ns: both
.cf:after: both
.cl: left
.cl-l: left
.cl-m: left
.cl-ns: left
.cn: none
.cn-l: none
.cn-m: none
.cn-ns: none
.cr: right
.cr-l: right
.cr-m: right
.cr-ns: right | clears |
clip | .clip: rect(1px, 1px, 1px, 1px)
.clip-l: rect(1px, 1px, 1px, 1px)
.clip-m: rect(1px, 1px, 1px, 1px)
.clip-ns: rect(1px, 1px, 1px, 1px) | visibility |
color | .black: var(--black)
.black-05: var(--black-05)
.black-10: var(--black-10)
.black-20: var(--black-20)
.black-30: var(--black-30)
.black-40: var(--black-40)
.black-50: var(--black-50)
.black-60: var(--black-60)
.black-70: var(--black-70)
.black-80: var(--black-80)
.black-90: var(--black-90)
.blue: var(--blue)
.color-inherit: inherit
.dark-blue: var(--dark-blue)
.dark-gray: var(--dark-gray)
.dark-green: var(--dark-green)
.dark-pink: var(--dark-pink)
.dark-red: var(--dark-red)
.gold: var(--gold)
.gray: var(--gray)
.green: var(--green)
.hot-pink: var(--hot-pink)
.hover-black-10:hover,
.hover-black-10:focus: var(--black-10)
.hover-black-20:hover,
.hover-black-20:focus: var(--black-20)
.hover-black-30:hover,
.hover-black-30:focus: var(--black-30)
.hover-black-40:hover,
.hover-black-40:focus: var(--black-40)
.hover-black-50:hover,
.hover-black-50:focus: var(--black-50)
.hover-black-60:hover,
.hover-black-60:focus: var(--black-60)
.hover-black-70:hover,
.hover-black-70:focus: var(--black-70)
.hover-black-80:hover,
.hover-black-80:focus: var(--black-80)
.hover-black-90:hover,
.hover-black-90:focus: var(--black-90)
.hover-black:hover,
.hover-black:focus: var(--black)
.hover-blue:hover,
.hover-blue:focus: var(--blue)
.hover-dark-blue:hover,
.hover-dark-blue:focus: var(--dark-blue)
.hover-dark-gray:hover,
.hover-dark-gray:focus: var(--dark-gray)
.hover-dark-green:hover,
.hover-dark-green:focus: var(--dark-green)
.hover-dark-pink:hover,
.hover-dark-pink:focus: var(--dark-pink)
.hover-dark-red:hover,
.hover-dark-red:focus: var(--dark-red)
.hover-gold:hover,
.hover-gold:focus: var(--gold)
.hover-gray:hover,
.hover-gray:focus: var(--gray)
.hover-green:hover,
.hover-green:focus: var(--green)
.hover-hot-pink:hover,
.hover-hot-pink:focus: var(--hot-pink)
.hover-inherit:hover,
.hover-inherit:focus: inherit
.hover-light-blue:hover,
.hover-light-blue:focus: var(--light-blue)
.hover-light-gray:hover,
.hover-light-gray:focus: var(--light-gray)
.hover-light-green:hover,
.hover-light-green:focus: var(--light-green)
.hover-light-pink:hover,
.hover-light-pink:focus: var(--light-pink)
.hover-light-purple:hover,
.hover-light-purple:focus: var(--light-purple)
.hover-light-red:hover,
.hover-light-red:focus: var(--light-red)
.hover-light-silver:hover,
.hover-light-silver:focus: var(--light-silver)
.hover-light-yellow:hover,
.hover-light-yellow:focus: var(--light-yellow)
.hover-lightest-blue:hover,
.hover-lightest-blue:focus: var(--lightest-blue)
.hover-mid-gray:hover,
.hover-mid-gray:focus: var(--mid-gray)
.hover-moon-gray:hover,
.hover-moon-gray:focus: var(--moon-gray)
.hover-navy:hover,
.hover-navy:focus: var(--navy)
.hover-near-black:hover,
.hover-near-black:focus: var(--near-black)
.hover-near-white:hover,
.hover-near-white:focus: var(--near-white)
.hover-orange:hover,
.hover-orange:focus: var(--orange)
.hover-pink:hover,
.hover-pink:focus: var(--pink)
.hover-purple:hover,
.hover-purple:focus: var(--purple)
.hover-red:hover,
.hover-red:focus: var(--red)
.hover-silver:hover,
.hover-silver:focus: var(--silver)
.hover-washed-blue:hover,
.hover-washed-blue:focus: var(--washed-blue)
.hover-washed-green:hover,
.hover-washed-green:focus: var(--washed-green)
.hover-washed-red:hover,
.hover-washed-red:focus: var(--washed-red)
.hover-washed-yellow:hover,
.hover-washed-yellow:focus: var(--washed-yellow)
.hover-white-10:hover,
.hover-white-10:focus: var(--white-10)
.hover-white-20:hover,
.hover-white-20:focus: var(--white-20)
.hover-white-30:hover,
.hover-white-30:focus: var(--white-30)
.hover-white-40:hover,
.hover-white-40:focus: var(--white-40)
.hover-white-50:hover,
.hover-white-50:focus: var(--white-50)
.hover-white-60:hover,
.hover-white-60:focus: var(--white-60)
.hover-white-70:hover,
.hover-white-70:focus: var(--white-70)
.hover-white-80:hover,
.hover-white-80:focus: var(--white-80)
.hover-white-90:hover,
.hover-white-90:focus: var(--white-90)
.hover-white:hover,
.hover-white:focus: var(--white)
.hover-yellow:hover,
.hover-yellow:focus: var(--yellow)
.light-blue: var(--light-blue)
.light-gray: var(--light-gray)
.light-green: var(--light-green)
.light-pink: var(--light-pink)
.light-purple: var(--light-purple)
.light-red: var(--light-red)
.light-silver: var(--light-silver)
.light-yellow: var(--light-yellow)
.lightest-blue: var(--lightest-blue)
.mid-gray: var(--mid-gray)
.moon-gray: var(--moon-gray)
.navy: var(--navy)
.near-black: var(--near-black)
.near-white: var(--near-white)
.nested-links a: var(--blue)
.nested-links a:hover,
.nested-links a:focus: var(--light-blue)
.orange: var(--orange)
.pink: var(--pink)
.purple: var(--purple)
.red: var(--red)
.silver: var(--silver)
.washed-blue: var(--washed-blue)
.washed-green: var(--washed-green)
.washed-red: var(--washed-red)
.washed-yellow: var(--washed-yellow)
.white: var(--white)
.white-10: var(--white-10)
.white-20: var(--white-20)
.white-30: var(--white-30)
.white-40: var(--white-40)
.white-50: var(--white-50)
.white-60: var(--white-60)
.white-70: var(--white-70)
.white-80: var(--white-80)
.white-90: var(--white-90)
.yellow: var(--yellow) | skins
skins-pseudo
nested |
content | .cf:before,
.cf:after: " "
.shadow-hover::after: '' | clears
hovers |
cursor | .pointer:hover: pointer
.shadow-hover: pointer | hovers |
display | .cf:before,
.cf:after: table
.db: block
.db-l: block
.db-m: block
.db-ns: block
.di: inline
.di-l: inline
.di-m: inline
.di-ns: inline
.dib: inline-block
.dib-l: inline-block
.dib-m: inline-block
.dib-ns: inline-block
.dit: inline-table
.dit-l: inline-table
.dit-m: inline-table
.dit-ns: inline-table
.dn: none
.dn-l: none
.dn-m: none
.dn-ns: none
.dt: table
.dt-column: table-column
.dt-column-group: table-column-group
.dt-column-group-l: table-column-group
.dt-column-group-m: table-column-group
.dt-column-group-ns: table-column-group
.dt-column-l: table-column
.dt-column-m: table-column
.dt-column-ns: table-column
.dt-l: table
.dt-m: table
.dt-ns: table
.dt-row: table-row
.dt-row-group: table-row-group
.dt-row-group-l: table-row-group
.dt-row-group-m: table-row-group
.dt-row-group-ns: table-row-group
.dt-row-l: table-row
.dt-row-m: table-row
.dt-row-ns: table-row
.dtc: table-cell
.dtc-l: table-cell
.dtc-m: table-cell
.dtc-ns: table-cell
.fl: inline
.fl-l: inline
.fl-m: inline
.fl-ns: inline
.flex: flex
.flex-l: flex
.flex-m: flex
.flex-ns: flex
.fr: inline
.fr-l: inline
.fr-m: inline
.fr-ns: inline
.inline-flex: inline-flex
.inline-flex-l: inline-flex
.inline-flex-m: inline-flex
.inline-flex-ns: inline-flex
.nested-img img: block | clears
display
flexbox
floats
nested |
flex | .flex-auto: 1 1 auto
.flex-auto-l: 1 1 auto
.flex-auto-m: 1 1 auto
.flex-auto-ns: 1 1 auto
.flex-none: none
.flex-none-l: none
.flex-none-m: none
.flex-none-ns: none | flexbox |
flex-direction | .flex-column: column
.flex-column-l: column
.flex-column-m: column
.flex-column-ns: column
.flex-column-reverse: column-reverse
.flex-column-reverse-l: column-reverse
.flex-column-reverse-m: column-reverse
.flex-column-reverse-ns: column-reverse
.flex-row: row
.flex-row-l: row
.flex-row-m: row
.flex-row-ns: row
.flex-row-reverse: row-reverse
.flex-row-reverse-l: row-reverse
.flex-row-reverse-m: row-reverse
.flex-row-reverse-ns: row-reverse | flexbox |
flex-wrap | .flex-nowrap: nowrap
.flex-nowrap-l: nowrap
.flex-nowrap-m: nowrap
.flex-nowrap-ns: nowrap
.flex-wrap: wrap
.flex-wrap-l: wrap
.flex-wrap-m: wrap
.flex-wrap-ns: wrap
.flex-wrap-reverse: wrap-reverse
.flex-wrap-reverse-l: wrap-reverse
.flex-wrap-reverse-m: wrap-reverse
.flex-wrap-reverse-ns: wrap-reverse | flexbox |
float | .fl: left
.fl-l: left
.fl-m: left
.fl-ns: left
.fn: none
.fn-l: none
.fn-m: none
.fn-ns: none
.fr: right
.fr-l: right
.fr-m: right
.fr-ns: right | floats |
font-family | .athelas: athelas,
georgia,
serif
.avenir: 'avenir next', avenir,
sans-serif
.baskerville: baskerville,
serif
.bodoni: "Bodoni MT",
serif
.calisto: "Calisto MT",
serif
.courier: 'Courier Next',
courier,
monospace
.garamond: garamond,
serif
.georgia: georgia,
serif
.helvetica: 'helvetica neue', helvetica,
sans-serif
.sans-serif: -apple-system, BlinkMacSystemFont,
'avenir next', avenir,
'helvetica neue', helvetica,
ubuntu,
roboto, noto,
'segoe ui', arial,
sans-serif
.serif: georgia,
times,
serif
.system-sans-serif: sans-serif
.system-serif: serif
.times: times,
serif
code, .code: Consolas,
monaco,
monospace | font-family |
font-size | .f-5,
.f-subheadline: 5rem
.f-5-l,
.f-subheadline-l: 5rem
.f-5-m,
.f-subheadline-m: 5rem
.f-5-ns,
.f-subheadline-ns: 5rem
.f-6,
.f-headline: 6rem
.f-6-l,
.f-headline-l: 6rem
.f-6-m,
.f-headline-m: 6rem
.f-6-ns,
.f-headline-ns: 6rem
.f1: 3rem
.f1-l: 3rem
.f1-m: 3rem
.f1-ns: 3rem
.f2: 2.25rem
.f2-l: 2.25rem
.f2-m: 2.25rem
.f2-ns: 2.25rem
.f3: 1.5rem
.f3-l: 1.5rem
.f3-m: 1.5rem
.f3-ns: 1.5rem
.f4: 1.25rem
.f4-l: 1.25rem
.f4-m: 1.25rem
.f4-ns: 1.25rem
.f5: 1rem
.f5-l: 1rem
.f5-m: 1rem
.f5-ns: 1rem
.f6: .875rem
.f6-l: .875rem
.f6-m: .875rem
.f6-ns: .875rem
.f7: .75rem
.f7-l: .75rem
.f7-m: .75rem
.f7-ns: .75rem | type-scale |
font-style | .fs-normal: normal
.fs-normal-l: normal
.fs-normal-m: normal
.fs-normal-ns: normal
.i: italic
.i-l: italic
.i-m: italic
.i-ns: italic | font-style |
font-variant | .small-caps: small-caps
.small-caps-l: small-caps
.small-caps-m: small-caps
.small-caps-ns: small-caps | typography |
font-weight | .b: bold
.b-l: bold
.b-m: bold
.b-ns: bold
.fw1: 100
.fw1-l: 100
.fw1-m: 100
.fw1-ns: 100
.fw2: 200
.fw2-l: 200
.fw2-m: 200
.fw2-ns: 200
.fw3: 300
.fw3-l: 300
.fw3-m: 300
.fw3-ns: 300
.fw4: 400
.fw4-l: 400
.fw4-m: 400
.fw4-ns: 400
.fw5: 500
.fw5-l: 500
.fw5-m: 500
.fw5-ns: 500
.fw6: 600
.fw6-l: 600
.fw6-m: 600
.fw6-ns: 600
.fw7: 700
.fw7-l: 700
.fw7-m: 700
.fw7-ns: 700
.fw8: 800
.fw8-l: 800
.fw8-m: 800
.fw8-ns: 800
.fw9: 900
.fw9-l: 900
.fw9-m: 900
.fw9-ns: 900
.normal: normal
.normal-l: normal
.normal-m: normal
.normal-ns: normal | font-weight |
height | .aspect-ratio: 0
.aspect-ratio--object: 100%
.aspect-ratio--object-l: 100%
.aspect-ratio--object-m: 100%
.aspect-ratio--object-ns: 100%
.aspect-ratio-l: 0
.aspect-ratio-m: 0
.aspect-ratio-ns: 0
.h-100: 100%
.h-100-l: 100%
.h-100-m: 100%
.h-100-ns: 100%
.h-25: 25%
.h-25-l: 25%
.h-25-m: 25%
.h-25-ns: 25%
.h-50: 50%
.h-50-l: 50%
.h-50-m: 50%
.h-50-ns: 50%
.h-75: 75%
.h-75-l: 75%
.h-75-m: 75%
.h-75-ns: 75%
.h-auto: auto
.h-auto-l: auto
.h-auto-m: auto
.h-auto-ns: auto
.h-inherit: inherit
.h-inherit-l: inherit
.h-inherit-m: inherit
.h-inherit-ns: inherit
.h1: 1rem
.h1-l: 1rem
.h1-m: 1rem
.h1-ns: 1rem
.h2: 2rem
.h2-l: 2rem
.h2-m: 2rem
.h2-ns: 2rem
.h3: 4rem
.h3-l: 4rem
.h3-m: 4rem
.h3-ns: 4rem
.h4: 8rem
.h4-l: 8rem
.h4-m: 8rem
.h4-ns: 8rem
.h5: 16rem
.h5-l: 16rem
.h5-m: 16rem
.h5-ns: 16rem
.shadow-hover::after: 100%
.vh-100: 100vh
.vh-100-l: 100vh
.vh-100-m: 100vh
.vh-100-ns: 100vh
.vh-25: 25vh
.vh-25-l: 25vh
.vh-25-m: 25vh
.vh-25-ns: 25vh
.vh-50: 50vh
.vh-50-l: 50vh
.vh-50-m: 50vh
.vh-50-ns: 50vh
.vh-75: 75vh
.vh-75-l: 75vh
.vh-75-m: 75vh
.vh-75-ns: 75vh | aspect-ratios
heights
hovers |
justify-content | .justify-around: space-around
.justify-around-l: space-around
.justify-around-m: space-around
.justify-around-ns: space-around
.justify-between: space-between
.justify-between-l: space-between
.justify-between-m: space-between
.justify-between-ns: space-between
.justify-center: center
.justify-center-l: center
.justify-center-m: center
.justify-center-ns: center
.justify-end: flex-end
.justify-end-l: flex-end
.justify-end-m: flex-end
.justify-end-ns: flex-end
.justify-start: flex-start
.justify-start-l: flex-start
.justify-start-m: flex-start
.justify-start-ns: flex-start | flexbox |
left | .absolute--fill: 0
.absolute--fill-l: 0
.absolute--fill-m: 0
.absolute--fill-ns: 0
.aspect-ratio--object: 0
.aspect-ratio--object-l: 0
.aspect-ratio--object-m: 0
.aspect-ratio--object-ns: 0
.left--1: -1rem
.left--1-l: -1rem
.left--1-m: -1rem
.left--1-ns: -1rem
.left--2: -2rem
.left--2-l: -2rem
.left--2-m: -2rem
.left--2-ns: -2rem
.left-0: 0
.left-0-l: 0
.left-0-m: 0
.left-0-ns: 0
.left-1: 1rem
.left-1-l: 1rem
.left-1-m: 1rem
.left-1-ns: 1rem
.left-2: 2rem
.left-2-l: 2rem
.left-2-m: 2rem
.left-2-ns: 2rem
.shadow-hover::after: 0 | aspect-ratios
coordinates
hovers |
letter-spacing | .tracked: .1em
.tracked-l: .1em
.tracked-m: .1em
.tracked-mega: .25em
.tracked-mega-l: .25em
.tracked-mega-m: .25em
.tracked-mega-ns: .25em
.tracked-ns: .1em
.tracked-tight: -.05em
.tracked-tight-l: -.05em
.tracked-tight-m: -.05em
.tracked-tight-ns: -.05em | letter-spacing |
line-height | .lh-copy: 1.5
.lh-copy-l: 1.5
.lh-copy-m: 1.5
.lh-copy-ns: 1.5
.lh-solid: 1
.lh-solid-l: 1
.lh-solid-m: 1
.lh-solid-ns: 1
.lh-title: 1.25
.lh-title-l: 1.25
.lh-title-m: 1.25
.lh-title-ns: 1.25
.nested-copy-line-height p,
.nested-copy-line-height ul,
.nested-copy-line-height ol: 1.5
.nested-headline-line-height h1,
.nested-headline-line-height h2,
.nested-headline-line-height h3,
.nested-headline-line-height h4,
.nested-headline-line-height h5,
.nested-headline-line-height h6: 1.25 | line-height
nested |
list-style-type | .list: none
.nested-list-reset ul,
.nested-list-reset ol: none | lists
nested |
margin | .ma0: var(--spacing-none)
.ma0-l: var(--spacing-none)
.ma0-m: var(--spacing-none)
.ma0-ns: var(--spacing-none)
.ma1: var(--spacing-extra-small)
.ma1-l: var(--spacing-extra-small)
.ma1-m: var(--spacing-extra-small)
.ma1-ns: var(--spacing-extra-small)
.ma2: var(--spacing-small)
.ma2-l: var(--spacing-small)
.ma2-m: var(--spacing-small)
.ma2-ns: var(--spacing-small)
.ma3: var(--spacing-medium)
.ma3-l: var(--spacing-medium)
.ma3-m: var(--spacing-medium)
.ma3-ns: var(--spacing-medium)
.ma4: var(--spacing-large)
.ma4-l: var(--spacing-large)
.ma4-m: var(--spacing-large)
.ma4-ns: var(--spacing-large)
.ma5: var(--spacing-extra-large)
.ma5-l: var(--spacing-extra-large)
.ma5-m: var(--spacing-extra-large)
.ma5-ns: var(--spacing-extra-large)
.ma6: var(--spacing-extra-extra-large)
.ma6-l: var(--spacing-extra-extra-large)
.ma6-m: var(--spacing-extra-extra-large)
.ma6-ns: var(--spacing-extra-extra-large)
.ma7: var(--spacing-extra-extra-extra-large)
.ma7-l: var(--spacing-extra-extra-extra-large)
.ma7-m: var(--spacing-extra-extra-extra-large)
.ma7-ns: var(--spacing-extra-extra-extra-large)
.na1: -var(--spacing-extra-small)
.na1-l: -var(--spacing-extra-small)
.na1-m: -var(--spacing-extra-small)
.na1-ns: -var(--spacing-extra-small)
.na2: -var(--spacing-small)
.na2-l: -var(--spacing-small)
.na2-m: -var(--spacing-small)
.na2-ns: -var(--spacing-small)
.na3: -var(--spacing-medium)
.na3-l: -var(--spacing-medium)
.na3-m: -var(--spacing-medium)
.na3-ns: -var(--spacing-medium)
.na4: -var(--spacing-large)
.na4-l: -var(--spacing-large)
.na4-m: -var(--spacing-large)
.na4-ns: -var(--spacing-large)
.na5: -var(--spacing-extra-large)
.na5-l: -var(--spacing-extra-large)
.na5-m: -var(--spacing-extra-large)
.na5-ns: -var(--spacing-extra-large)
.na6: -var(--spacing-extra-extra-large)
.na6-l: -var(--spacing-extra-extra-large)
.na6-m: -var(--spacing-extra-extra-large)
.na6-ns: -var(--spacing-extra-extra-large)
.na7: -var(--spacing-extra-extra-extra-large)
.na7-l: -var(--spacing-extra-extra-extra-large)
.na7-m: -var(--spacing-extra-extra-extra-large)
.na7-ns: -var(--spacing-extra-extra-extra-large) | spacing
negative-margins |
margin-bottom | .indent: 0
.indent-l: 0
.indent-m: 0
.indent-ns: 0
.mb0: var(--spacing-none)
.mb0-l: var(--spacing-none)
.mb0-m: var(--spacing-none)
.mb0-ns: var(--spacing-none)
.mb1: var(--spacing-extra-small)
.mb1-l: var(--spacing-extra-small)
.mb1-m: var(--spacing-extra-small)
.mb1-ns: var(--spacing-extra-small)
.mb2: var(--spacing-small)
.mb2-l: var(--spacing-small)
.mb2-m: var(--spacing-small)
.mb2-ns: var(--spacing-small)
.mb3: var(--spacing-medium)
.mb3-l: var(--spacing-medium)
.mb3-m: var(--spacing-medium)
.mb3-ns: var(--spacing-medium)
.mb4: var(--spacing-large)
.mb4-l: var(--spacing-large)
.mb4-m: var(--spacing-large)
.mb4-ns: var(--spacing-large)
.mb5: var(--spacing-extra-large)
.mb5-l: var(--spacing-extra-large)
.mb5-m: var(--spacing-extra-large)
.mb5-ns: var(--spacing-extra-large)
.mb6: var(--spacing-extra-extra-large)
.mb6-l: var(--spacing-extra-extra-large)
.mb6-m: var(--spacing-extra-extra-large)
.mb6-ns: var(--spacing-extra-extra-large)
.mb7: var(--spacing-extra-extra-extra-large)
.mb7-l: var(--spacing-extra-extra-extra-large)
.mb7-m: var(--spacing-extra-extra-extra-large)
.mb7-ns: var(--spacing-extra-extra-extra-large)
.mv0: var(--spacing-none)
.mv0-l: var(--spacing-none)
.mv0-m: var(--spacing-none)
.mv0-ns: var(--spacing-none)
.mv1: var(--spacing-extra-small)
.mv1-l: var(--spacing-extra-small)
.mv1-m: var(--spacing-extra-small)
.mv1-ns: var(--spacing-extra-small)
.mv2: var(--spacing-small)
.mv2-l: var(--spacing-small)
.mv2-m: var(--spacing-small)
.mv2-ns: var(--spacing-small)
.mv3: var(--spacing-medium)
.mv3-l: var(--spacing-medium)
.mv3-m: var(--spacing-medium)
.mv3-ns: var(--spacing-medium)
.mv4: var(--spacing-large)
.mv4-l: var(--spacing-large)
.mv4-m: var(--spacing-large)
.mv4-ns: var(--spacing-large)
.mv5: var(--spacing-extra-large)
.mv5-l: var(--spacing-extra-large)
.mv5-m: var(--spacing-extra-large)
.mv5-ns: var(--spacing-extra-large)
.mv6: var(--spacing-extra-extra-large)
.mv6-l: var(--spacing-extra-extra-large)
.mv6-m: var(--spacing-extra-extra-large)
.mv6-ns: var(--spacing-extra-extra-large)
.mv7: var(--spacing-extra-extra-extra-large)
.mv7-l: var(--spacing-extra-extra-extra-large)
.mv7-m: var(--spacing-extra-extra-extra-large)
.mv7-ns: var(--spacing-extra-extra-extra-large)
.nb1: -var(--spacing-extra-small)
.nb1-l: -var(--spacing-extra-small)
.nb1-m: -var(--spacing-extra-small)
.nb1-ns: -var(--spacing-extra-small)
.nb2: -var(--spacing-small)
.nb2-l: -var(--spacing-small)
.nb2-m: -var(--spacing-small)
.nb2-ns: -var(--spacing-small)
.nb3: -var(--spacing-medium)
.nb3-l: -var(--spacing-medium)
.nb3-m: -var(--spacing-medium)
.nb3-ns: -var(--spacing-medium)
.nb4: -var(--spacing-large)
.nb4-l: -var(--spacing-large)
.nb4-m: -var(--spacing-large)
.nb4-ns: -var(--spacing-large)
.nb5: -var(--spacing-extra-large)
.nb5-l: -var(--spacing-extra-large)
.nb5-m: -var(--spacing-extra-large)
.nb5-ns: -var(--spacing-extra-large)
.nb6: -var(--spacing-extra-extra-large)
.nb6-l: -var(--spacing-extra-extra-large)
.nb6-m: -var(--spacing-extra-extra-large)
.nb6-ns: -var(--spacing-extra-extra-large)
.nb7: -var(--spacing-extra-extra-extra-large)
.nb7-l: -var(--spacing-extra-extra-extra-large)
.nb7-m: -var(--spacing-extra-extra-extra-large)
.nb7-ns: -var(--spacing-extra-extra-extra-large)
.nested-copy-indent p+p: 0 | spacing
negative-margins
typography
nested |
margin-left | .center: auto
.center-l: auto
.center-m: auto
.center-ns: auto
.mh0: var(--spacing-none)
.mh0-l: var(--spacing-none)
.mh0-m: var(--spacing-none)
.mh0-ns: var(--spacing-none)
.mh1: var(--spacing-extra-small)
.mh1-l: var(--spacing-extra-small)
.mh1-m: var(--spacing-extra-small)
.mh1-ns: var(--spacing-extra-small)
.mh2: var(--spacing-small)
.mh2-l: var(--spacing-small)
.mh2-m: var(--spacing-small)
.mh2-ns: var(--spacing-small)
.mh3: var(--spacing-medium)
.mh3-l: var(--spacing-medium)
.mh3-m: var(--spacing-medium)
.mh3-ns: var(--spacing-medium)
.mh4: var(--spacing-large)
.mh4-l: var(--spacing-large)
.mh4-m: var(--spacing-large)
.mh4-ns: var(--spacing-large)
.mh5: var(--spacing-extra-large)
.mh5-l: var(--spacing-extra-large)
.mh5-m: var(--spacing-extra-large)
.mh5-ns: var(--spacing-extra-large)
.mh6: var(--spacing-extra-extra-large)
.mh6-l: var(--spacing-extra-extra-large)
.mh6-m: var(--spacing-extra-extra-large)
.mh6-ns: var(--spacing-extra-extra-large)
.mh7: var(--spacing-extra-extra-extra-large)
.mh7-l: var(--spacing-extra-extra-extra-large)
.mh7-m: var(--spacing-extra-extra-extra-large)
.mh7-ns: var(--spacing-extra-extra-extra-large)
.ml-auto: auto
.ml-auto-l: auto
.ml-auto-m: auto
.ml-auto-ns: auto
.ml0: var(--spacing-none)
.ml0-l: var(--spacing-none)
.ml0-m: var(--spacing-none)
.ml0-ns: var(--spacing-none)
.ml1: var(--spacing-extra-small)
.ml1-l: var(--spacing-extra-small)
.ml1-m: var(--spacing-extra-small)
.ml1-ns: var(--spacing-extra-small)
.ml2: var(--spacing-small)
.ml2-l: var(--spacing-small)
.ml2-m: var(--spacing-small)
.ml2-ns: var(--spacing-small)
.ml3: var(--spacing-medium)
.ml3-l: var(--spacing-medium)
.ml3-m: var(--spacing-medium)
.ml3-ns: var(--spacing-medium)
.ml4: var(--spacing-large)
.ml4-l: var(--spacing-large)
.ml4-m: var(--spacing-large)
.ml4-ns: var(--spacing-large)
.ml5: var(--spacing-extra-large)
.ml5-l: var(--spacing-extra-large)
.ml5-m: var(--spacing-extra-large)
.ml5-ns: var(--spacing-extra-large)
.ml6: var(--spacing-extra-extra-large)
.ml6-l: var(--spacing-extra-extra-large)
.ml6-m: var(--spacing-extra-extra-large)
.ml6-ns: var(--spacing-extra-extra-large)
.ml7: var(--spacing-extra-extra-extra-large)
.ml7-l: var(--spacing-extra-extra-extra-large)
.ml7-m: var(--spacing-extra-extra-extra-large)
.ml7-ns: var(--spacing-extra-extra-extra-large)
.nested-list-reset ul,
.nested-list-reset ol: 0
.nl1: -var(--spacing-extra-small)
.nl1-l: -var(--spacing-extra-small)
.nl1-m: -var(--spacing-extra-small)
.nl1-ns: -var(--spacing-extra-small)
.nl2: -var(--spacing-small)
.nl2-l: -var(--spacing-small)
.nl2-m: -var(--spacing-small)
.nl2-ns: -var(--spacing-small)
.nl3: -var(--spacing-medium)
.nl3-l: -var(--spacing-medium)
.nl3-m: -var(--spacing-medium)
.nl3-ns: -var(--spacing-medium)
.nl4: -var(--spacing-large)
.nl4-l: -var(--spacing-large)
.nl4-m: -var(--spacing-large)
.nl4-ns: -var(--spacing-large)
.nl5: -var(--spacing-extra-large)
.nl5-l: -var(--spacing-extra-large)
.nl5-m: -var(--spacing-extra-large)
.nl5-ns: -var(--spacing-extra-large)
.nl6: -var(--spacing-extra-extra-large)
.nl6-l: -var(--spacing-extra-extra-large)
.nl6-m: -var(--spacing-extra-extra-large)
.nl6-ns: -var(--spacing-extra-extra-large)
.nl7: -var(--spacing-extra-extra-extra-large)
.nl7-l: -var(--spacing-extra-extra-extra-large)
.nl7-m: -var(--spacing-extra-extra-extra-large)
.nl7-ns: -var(--spacing-extra-extra-extra-large) | spacing
negative-margins
utilities
nested |
margin-right | .center: auto
.center-l: auto
.center-m: auto
.center-ns: auto
.mh0: var(--spacing-none)
.mh0-l: var(--spacing-none)
.mh0-m: var(--spacing-none)
.mh0-ns: var(--spacing-none)
.mh1: var(--spacing-extra-small)
.mh1-l: var(--spacing-extra-small)
.mh1-m: var(--spacing-extra-small)
.mh1-ns: var(--spacing-extra-small)
.mh2: var(--spacing-small)
.mh2-l: var(--spacing-small)
.mh2-m: var(--spacing-small)
.mh2-ns: var(--spacing-small)
.mh3: var(--spacing-medium)
.mh3-l: var(--spacing-medium)
.mh3-m: var(--spacing-medium)
.mh3-ns: var(--spacing-medium)
.mh4: var(--spacing-large)
.mh4-l: var(--spacing-large)
.mh4-m: var(--spacing-large)
.mh4-ns: var(--spacing-large)
.mh5: var(--spacing-extra-large)
.mh5-l: var(--spacing-extra-large)
.mh5-m: var(--spacing-extra-large)
.mh5-ns: var(--spacing-extra-large)
.mh6: var(--spacing-extra-extra-large)
.mh6-l: var(--spacing-extra-extra-large)
.mh6-m: var(--spacing-extra-extra-large)
.mh6-ns: var(--spacing-extra-extra-large)
.mh7: var(--spacing-extra-extra-extra-large)
.mh7-l: var(--spacing-extra-extra-extra-large)
.mh7-m: var(--spacing-extra-extra-extra-large)
.mh7-ns: var(--spacing-extra-extra-extra-large)
.mr-auto: auto
.mr-auto-l: auto
.mr-auto-m: auto
.mr-auto-ns: auto
.mr0: var(--spacing-none)
.mr0-l: var(--spacing-none)
.mr0-m: var(--spacing-none)
.mr0-ns: var(--spacing-none)
.mr1: var(--spacing-extra-small)
.mr1-l: var(--spacing-extra-small)
.mr1-m: var(--spacing-extra-small)
.mr1-ns: var(--spacing-extra-small)
.mr2: var(--spacing-small)
.mr2-l: var(--spacing-small)
.mr2-m: var(--spacing-small)
.mr2-ns: var(--spacing-small)
.mr3: var(--spacing-medium)
.mr3-l: var(--spacing-medium)
.mr3-m: var(--spacing-medium)
.mr3-ns: var(--spacing-medium)
.mr4: var(--spacing-large)
.mr4-l: var(--spacing-large)
.mr4-m: var(--spacing-large)
.mr4-ns: var(--spacing-large)
.mr5: var(--spacing-extra-large)
.mr5-l: var(--spacing-extra-large)
.mr5-m: var(--spacing-extra-large)
.mr5-ns: var(--spacing-extra-large)
.mr6: var(--spacing-extra-extra-large)
.mr6-l: var(--spacing-extra-extra-large)
.mr6-m: var(--spacing-extra-extra-large)
.mr6-ns: var(--spacing-extra-extra-large)
.mr7: var(--spacing-extra-extra-extra-large)
.mr7-l: var(--spacing-extra-extra-extra-large)
.mr7-m: var(--spacing-extra-extra-extra-large)
.mr7-ns: var(--spacing-extra-extra-extra-large)
.nr1: -var(--spacing-extra-small)
.nr1-l: -var(--spacing-extra-small)
.nr1-m: -var(--spacing-extra-small)
.nr1-ns: -var(--spacing-extra-small)
.nr2: -var(--spacing-small)
.nr2-l: -var(--spacing-small)
.nr2-m: -var(--spacing-small)
.nr2-ns: -var(--spacing-small)
.nr3: -var(--spacing-medium)
.nr3-l: -var(--spacing-medium)
.nr3-m: -var(--spacing-medium)
.nr3-ns: -var(--spacing-medium)
.nr4: -var(--spacing-large)
.nr4-l: -var(--spacing-large)
.nr4-m: -var(--spacing-large)
.nr4-ns: -var(--spacing-large)
.nr5: -var(--spacing-extra-large)
.nr5-l: -var(--spacing-extra-large)
.nr5-m: -var(--spacing-extra-large)
.nr5-ns: -var(--spacing-extra-large)
.nr6: -var(--spacing-extra-extra-large)
.nr6-l: -var(--spacing-extra-extra-large)
.nr6-m: -var(--spacing-extra-extra-large)
.nr6-ns: -var(--spacing-extra-extra-large)
.nr7: -var(--spacing-extra-extra-extra-large)
.nr7-l: -var(--spacing-extra-extra-extra-large)
.nr7-m: -var(--spacing-extra-extra-extra-large)
.nr7-ns: -var(--spacing-extra-extra-extra-large) | spacing
negative-margins
utilities |
margin-top | .indent: 0
.indent-l: 0
.indent-m: 0
.indent-ns: 0
.mt0: var(--spacing-none)
.mt0-l: var(--spacing-none)
.mt0-m: var(--spacing-none)
.mt0-ns: var(--spacing-none)
.mt1: var(--spacing-extra-small)
.mt1-l: var(--spacing-extra-small)
.mt1-m: var(--spacing-extra-small)
.mt1-ns: var(--spacing-extra-small)
.mt2: var(--spacing-small)
.mt2-l: var(--spacing-small)
.mt2-m: var(--spacing-small)
.mt2-ns: var(--spacing-small)
.mt3: var(--spacing-medium)
.mt3-l: var(--spacing-medium)
.mt3-m: var(--spacing-medium)
.mt3-ns: var(--spacing-medium)
.mt4: var(--spacing-large)
.mt4-l: var(--spacing-large)
.mt4-m: var(--spacing-large)
.mt4-ns: var(--spacing-large)
.mt5: var(--spacing-extra-large)
.mt5-l: var(--spacing-extra-large)
.mt5-m: var(--spacing-extra-large)
.mt5-ns: var(--spacing-extra-large)
.mt6: var(--spacing-extra-extra-large)
.mt6-l: var(--spacing-extra-extra-large)
.mt6-m: var(--spacing-extra-extra-large)
.mt6-ns: var(--spacing-extra-extra-large)
.mt7: var(--spacing-extra-extra-extra-large)
.mt7-l: var(--spacing-extra-extra-extra-large)
.mt7-m: var(--spacing-extra-extra-extra-large)
.mt7-ns: var(--spacing-extra-extra-extra-large)
.mv0: var(--spacing-none)
.mv0-l: var(--spacing-none)
.mv0-m: var(--spacing-none)
.mv0-ns: var(--spacing-none)
.mv1: var(--spacing-extra-small)
.mv1-l: var(--spacing-extra-small)
.mv1-m: var(--spacing-extra-small)
.mv1-ns: var(--spacing-extra-small)
.mv2: var(--spacing-small)
.mv2-l: var(--spacing-small)
.mv2-m: var(--spacing-small)
.mv2-ns: var(--spacing-small)
.mv3: var(--spacing-medium)
.mv3-l: var(--spacing-medium)
.mv3-m: var(--spacing-medium)
.mv3-ns: var(--spacing-medium)
.mv4: var(--spacing-large)
.mv4-l: var(--spacing-large)
.mv4-m: var(--spacing-large)
.mv4-ns: var(--spacing-large)
.mv5: var(--spacing-extra-large)
.mv5-l: var(--spacing-extra-large)
.mv5-m: var(--spacing-extra-large)
.mv5-ns: var(--spacing-extra-large)
.mv6: var(--spacing-extra-extra-large)
.mv6-l: var(--spacing-extra-extra-large)
.mv6-m: var(--spacing-extra-extra-large)
.mv6-ns: var(--spacing-extra-extra-large)
.mv7: var(--spacing-extra-extra-extra-large)
.mv7-l: var(--spacing-extra-extra-extra-large)
.mv7-m: var(--spacing-extra-extra-extra-large)
.mv7-ns: var(--spacing-extra-extra-extra-large)
.nested-copy-indent p+p: 0
.nested-copy-separator p+p: 1.5em
.nt1: -var(--spacing-extra-small)
.nt1-l: -var(--spacing-extra-small)
.nt1-m: -var(--spacing-extra-small)
.nt1-ns: -var(--spacing-extra-small)
.nt2: -var(--spacing-small)
.nt2-l: -var(--spacing-small)
.nt2-m: -var(--spacing-small)
.nt2-ns: -var(--spacing-small)
.nt3: -var(--spacing-medium)
.nt3-l: -var(--spacing-medium)
.nt3-m: -var(--spacing-medium)
.nt3-ns: -var(--spacing-medium)
.nt4: -var(--spacing-large)
.nt4-l: -var(--spacing-large)
.nt4-m: -var(--spacing-large)
.nt4-ns: -var(--spacing-large)
.nt5: -var(--spacing-extra-large)
.nt5-l: -var(--spacing-extra-large)
.nt5-m: -var(--spacing-extra-large)
.nt5-ns: -var(--spacing-extra-large)
.nt6: -var(--spacing-extra-extra-large)
.nt6-l: -var(--spacing-extra-extra-large)
.nt6-m: -var(--spacing-extra-extra-large)
.nt6-ns: -var(--spacing-extra-extra-large)
.nt7: -var(--spacing-extra-extra-extra-large)
.nt7-l: -var(--spacing-extra-extra-extra-large)
.nt7-m: -var(--spacing-extra-extra-extra-large)
.nt7-ns: -var(--spacing-extra-extra-extra-large) | spacing
negative-margins
typography
nested |
max-width | .measure: 30em
.measure-l: 30em
.measure-m: 30em
.measure-narrow: 20em
.measure-narrow-l: 20em
.measure-narrow-m: 20em
.measure-narrow-ns: 20em
.measure-ns: 30em
.measure-wide: 34em
.measure-wide-l: 34em
.measure-wide-m: 34em
.measure-wide-ns: 34em
.mw-100: 100%
.mw-100-l: 100%
.mw-100-m: 100%
.mw-100-ns: 100%
.mw-none: none
.mw-none-l: none
.mw-none-m: none
.mw-none-ns: none
.mw1: 1rem
.mw1-l: 1rem
.mw1-m: 1rem
.mw1-ns: 1rem
.mw2: 2rem
.mw2-l: 2rem
.mw2-m: 2rem
.mw2-ns: 2rem
.mw3: 4rem
.mw3-l: 4rem
.mw3-m: 4rem
.mw3-ns: 4rem
.mw4: 8rem
.mw4-l: 8rem
.mw4-m: 8rem
.mw4-ns: 8rem
.mw5: 16rem
.mw5-l: 16rem
.mw5-m: 16rem
.mw5-ns: 16rem
.mw6: 32rem
.mw6-l: 32rem
.mw6-m: 32rem
.mw6-ns: 32rem
.mw7: 48rem
.mw7-l: 48rem
.mw7-m: 48rem
.mw7-ns: 48rem
.mw8: 64rem
.mw8-l: 64rem
.mw8-m: 64rem
.mw8-ns: 64rem
.mw9: 96rem
.mw9-l: 96rem
.mw9-m: 96rem
.mw9-ns: 96rem
.nested-img img: 100%
img: 100% | images
max-widths
typography
nested |
min-height | .flex-auto: 0
.flex-auto-l: 0
.flex-auto-m: 0
.flex-auto-ns: 0
.min-h-100: 100%
.min-h-100-l: 100%
.min-h-100-m: 100%
.min-h-100-ns: 100%
.min-vh-100: 100vh
.min-vh-100-l: 100vh
.min-vh-100-m: 100vh
.min-vh-100-ns: 100vh | flexbox
heights |
min-width | .flex-auto: 0
.flex-auto-l: 0
.flex-auto-m: 0
.flex-auto-ns: 0 | flexbox |
opacity | .dim: 1
.dim:active: .8
.dim:hover,
.dim:focus: .5
.glow:hover,
.glow:focus: 1
.hide-child .child: 0
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child: 1
.o-0: 0
.o-025: .025
.o-05: .05
.o-10: .1
.o-100: 1
.o-20: .2
.o-30: .3
.o-40: .4
.o-50: .5
.o-60: .6
.o-70: .7
.o-80: .8
.o-90: .9
.shadow-hover::after: 0
.shadow-hover:hover::after,
.shadow-hover:focus::after: 1 | opacity
hovers |
order | .order-0: 0
.order-0-l: 0
.order-0-m: 0
.order-0-ns: 0
.order-1: 1
.order-1-l: 1
.order-1-m: 1
.order-1-ns: 1
.order-2: 2
.order-2-l: 2
.order-2-m: 2
.order-2-ns: 2
.order-3: 3
.order-3-l: 3
.order-3-m: 3
.order-3-ns: 3
.order-4: 4
.order-4-l: 4
.order-4-m: 4
.order-4-ns: 4
.order-5: 5
.order-5-l: 5
.order-5-m: 5
.order-5-ns: 5
.order-6: 6
.order-6-l: 6
.order-6-m: 6
.order-6-ns: 6
.order-7: 7
.order-7-l: 7
.order-7-m: 7
.order-7-ns: 7
.order-8: 8
.order-8-l: 8
.order-8-m: 8
.order-8-ns: 8
.order-last: 99999
.order-last-l: 99999
.order-last-m: 99999
.order-last-ns: 99999 | flexbox |
outline | .debug *: 1px solid gold
.debug-black *: 1px solid black
.debug-white *: 1px solid white
.link:focus: 1px dotted currentColor
.outline: 1px solid
.outline-0: 0
.outline-0-l: 0
.outline-0-m: 0
.outline-0-ns: 0
.outline-l: 1px solid
.outline-m: 1px solid
.outline-ns: 1px solid
.outline-transparent: 1px solid transparent
.outline-transparent-l: 1px solid transparent
.outline-transparent-m: 1px solid transparent
.outline-transparent-ns: 1px solid transparent | outlines
links
debug-children |
overflow | .overflow-auto: auto
.overflow-auto-l: auto
.overflow-auto-m: auto
.overflow-auto-ns: auto
.overflow-hidden: hidden
.overflow-hidden-l: hidden
.overflow-hidden-m: hidden
.overflow-hidden-ns: hidden
.overflow-scroll: scroll
.overflow-scroll-l: scroll
.overflow-scroll-m: scroll
.overflow-scroll-ns: scroll
.overflow-visible: visible
.overflow-visible-l: visible
.overflow-visible-m: visible
.overflow-visible-ns: visible
.pre: scroll
.truncate: hidden
.truncate-l: hidden
.truncate-m: hidden
.truncate-ns: hidden | code
overflow
typography |
overflow-x | .overflow-x-auto: auto
.overflow-x-auto-l: auto
.overflow-x-auto-m: auto
.overflow-x-auto-ns: auto
.overflow-x-hidden: hidden
.overflow-x-hidden-l: hidden
.overflow-x-hidden-m: hidden
.overflow-x-hidden-ns: hidden
.overflow-x-scroll: scroll
.overflow-x-scroll-l: scroll
.overflow-x-scroll-m: scroll
.overflow-x-scroll-ns: scroll
.overflow-x-visible: visible
.overflow-x-visible-l: visible
.overflow-x-visible-m: visible
.overflow-x-visible-ns: visible
.pre: auto | code
overflow |
overflow-y | .overflow-container: scroll
.overflow-y-auto: auto
.overflow-y-auto-l: auto
.overflow-y-auto-m: auto
.overflow-y-auto-ns: auto
.overflow-y-hidden: hidden
.overflow-y-hidden-l: hidden
.overflow-y-hidden-m: hidden
.overflow-y-hidden-ns: hidden
.overflow-y-scroll: scroll
.overflow-y-scroll-l: scroll
.overflow-y-scroll-m: scroll
.overflow-y-scroll-ns: scroll
.overflow-y-visible: visible
.overflow-y-visible-l: visible
.overflow-y-visible-m: visible
.overflow-y-visible-ns: visible
.pre: hidden | code
overflow
utilities |
padding | .button-reset::-moz-focus-inner,
.input-reset::-moz-focus-inner: 0
.pa0: var(--spacing-none)
.pa0-l: var(--spacing-none)
.pa0-m: var(--spacing-none)
.pa0-ns: var(--spacing-none)
.pa1: var(--spacing-extra-small)
.pa1-l: var(--spacing-extra-small)
.pa1-m: var(--spacing-extra-small)
.pa1-ns: var(--spacing-extra-small)
.pa2: var(--spacing-small)
.pa2-l: var(--spacing-small)
.pa2-m: var(--spacing-small)
.pa2-ns: var(--spacing-small)
.pa3: var(--spacing-medium)
.pa3-l: var(--spacing-medium)
.pa3-m: var(--spacing-medium)
.pa3-ns: var(--spacing-medium)
.pa4: var(--spacing-large)
.pa4-l: var(--spacing-large)
.pa4-m: var(--spacing-large)
.pa4-ns: var(--spacing-large)
.pa5: var(--spacing-extra-large)
.pa5-l: var(--spacing-extra-large)
.pa5-m: var(--spacing-extra-large)
.pa5-ns: var(--spacing-extra-large)
.pa6: var(--spacing-extra-extra-large)
.pa6-l: var(--spacing-extra-extra-large)
.pa6-m: var(--spacing-extra-extra-large)
.pa6-ns: var(--spacing-extra-extra-large)
.pa7: var(--spacing-extra-extra-extra-large)
.pa7-l: var(--spacing-extra-extra-extra-large)
.pa7-m: var(--spacing-extra-extra-extra-large)
.pa7-ns: var(--spacing-extra-extra-extra-large) | forms
spacing |
padding-bottom | .aspect-ratio--16x9: 56.25%
.aspect-ratio--16x9-l: 56.25%
.aspect-ratio--16x9-m: 56.25%
.aspect-ratio--16x9-ns: 56.25%
.aspect-ratio--1x1: 100%
.aspect-ratio--1x1-l: 100%
.aspect-ratio--1x1-m: 100%
.aspect-ratio--1x1-ns: 100%
.aspect-ratio--3x4: 133.33%
.aspect-ratio--3x4-l: 133.33%
.aspect-ratio--3x4-m: 133.33%
.aspect-ratio--3x4-ns: 133.33%
.aspect-ratio--4x3: 75%
.aspect-ratio--4x3-l: 75%
.aspect-ratio--4x3-m: 75%
.aspect-ratio--4x3-ns: 75%
.aspect-ratio--4x6: 150%
.aspect-ratio--4x6-l: 150%
.aspect-ratio--4x6-m: 150%
.aspect-ratio--4x6-ns: 150%
.aspect-ratio--5x7: 140%
.aspect-ratio--5x7-l: 140%
.aspect-ratio--5x7-m: 140%
.aspect-ratio--5x7-ns: 140%
.aspect-ratio--5x8: 160%
.aspect-ratio--5x8-l: 160%
.aspect-ratio--5x8-m: 160%
.aspect-ratio--5x8-ns: 160%
.aspect-ratio--6x4: 66.6%
.aspect-ratio--6x4-l: 66.6%
.aspect-ratio--6x4-m: 66.6%
.aspect-ratio--6x4-ns: 66.6%
.aspect-ratio--7x5: 71.42%
.aspect-ratio--7x5-l: 71.42%
.aspect-ratio--7x5-m: 71.42%
.aspect-ratio--7x5-ns: 71.42%
.aspect-ratio--8x5: 62.5%
.aspect-ratio--8x5-l: 62.5%
.aspect-ratio--8x5-m: 62.5%
.aspect-ratio--8x5-ns: 62.5%
.aspect-ratio--9x16: 177.77%
.aspect-ratio--9x16-l: 177.77%
.aspect-ratio--9x16-m: 177.77%
.aspect-ratio--9x16-ns: 177.77%
.pb0: var(--spacing-none)
.pb0-l: var(--spacing-none)
.pb0-m: var(--spacing-none)
.pb0-ns: var(--spacing-none)
.pb1: var(--spacing-extra-small)
.pb1-l: var(--spacing-extra-small)
.pb1-m: var(--spacing-extra-small)
.pb1-ns: var(--spacing-extra-small)
.pb2: var(--spacing-small)
.pb2-l: var(--spacing-small)
.pb2-m: var(--spacing-small)
.pb2-ns: var(--spacing-small)
.pb3: var(--spacing-medium)
.pb3-l: var(--spacing-medium)
.pb3-m: var(--spacing-medium)
.pb3-ns: var(--spacing-medium)
.pb4: var(--spacing-large)
.pb4-l: var(--spacing-large)
.pb4-m: var(--spacing-large)
.pb4-ns: var(--spacing-large)
.pb5: var(--spacing-extra-large)
.pb5-l: var(--spacing-extra-large)
.pb5-m: var(--spacing-extra-large)
.pb5-ns: var(--spacing-extra-large)
.pb6: var(--spacing-extra-extra-large)
.pb6-l: var(--spacing-extra-extra-large)
.pb6-m: var(--spacing-extra-extra-large)
.pb6-ns: var(--spacing-extra-extra-large)
.pb7: var(--spacing-extra-extra-extra-large)
.pb7-l: var(--spacing-extra-extra-extra-large)
.pb7-m: var(--spacing-extra-extra-extra-large)
.pb7-ns: var(--spacing-extra-extra-extra-large)
.pv0: var(--spacing-none)
.pv0-l: var(--spacing-none)
.pv0-m: var(--spacing-none)
.pv0-ns: var(--spacing-none)
.pv1: var(--spacing-extra-small)
.pv1-l: var(--spacing-extra-small)
.pv1-m: var(--spacing-extra-small)
.pv1-ns: var(--spacing-extra-small)
.pv2: var(--spacing-small)
.pv2-l: var(--spacing-small)
.pv2-m: var(--spacing-small)
.pv2-ns: var(--spacing-small)
.pv3: var(--spacing-medium)
.pv3-l: var(--spacing-medium)
.pv3-m: var(--spacing-medium)
.pv3-ns: var(--spacing-medium)
.pv4: var(--spacing-large)
.pv4-l: var(--spacing-large)
.pv4-m: var(--spacing-large)
.pv4-ns: var(--spacing-large)
.pv5: var(--spacing-extra-large)
.pv5-l: var(--spacing-extra-large)
.pv5-m: var(--spacing-extra-large)
.pv5-ns: var(--spacing-extra-large)
.pv6: var(--spacing-extra-extra-large)
.pv6-l: var(--spacing-extra-extra-large)
.pv6-m: var(--spacing-extra-extra-large)
.pv6-ns: var(--spacing-extra-extra-large)
.pv7: var(--spacing-extra-extra-extra-large)
.pv7-l: var(--spacing-extra-extra-extra-large)
.pv7-m: var(--spacing-extra-extra-extra-large)
.pv7-ns: var(--spacing-extra-extra-extra-large) | aspect-ratios
spacing |
padding-left | .nested-list-reset ul,
.nested-list-reset ol: 0
.ph0: var(--spacing-none)
.ph0-l: var(--spacing-none)
.ph0-m: var(--spacing-none)
.ph0-ns: var(--spacing-none)
.ph1: var(--spacing-extra-small)
.ph1-l: var(--spacing-extra-small)
.ph1-m: var(--spacing-extra-small)
.ph1-ns: var(--spacing-extra-small)
.ph2: var(--spacing-small)
.ph2-l: var(--spacing-small)
.ph2-m: var(--spacing-small)
.ph2-ns: var(--spacing-small)
.ph3: var(--spacing-medium)
.ph3-l: var(--spacing-medium)
.ph3-m: var(--spacing-medium)
.ph3-ns: var(--spacing-medium)
.ph4: var(--spacing-large)
.ph4-l: var(--spacing-large)
.ph4-m: var(--spacing-large)
.ph4-ns: var(--spacing-large)
.ph5: var(--spacing-extra-large)
.ph5-l: var(--spacing-extra-large)
.ph5-m: var(--spacing-extra-large)
.ph5-ns: var(--spacing-extra-large)
.ph6: var(--spacing-extra-extra-large)
.ph6-l: var(--spacing-extra-extra-large)
.ph6-m: var(--spacing-extra-extra-large)
.ph6-ns: var(--spacing-extra-extra-large)
.ph7: var(--spacing-extra-extra-extra-large)
.ph7-l: var(--spacing-extra-extra-extra-large)
.ph7-m: var(--spacing-extra-extra-extra-large)
.ph7-ns: var(--spacing-extra-extra-extra-large)
.pl0: var(--spacing-none)
.pl0-l: var(--spacing-none)
.pl0-m: var(--spacing-none)
.pl0-ns: var(--spacing-none)
.pl1: var(--spacing-extra-small)
.pl1-l: var(--spacing-extra-small)
.pl1-m: var(--spacing-extra-small)
.pl1-ns: var(--spacing-extra-small)
.pl2: var(--spacing-small)
.pl2-l: var(--spacing-small)
.pl2-m: var(--spacing-small)
.pl2-ns: var(--spacing-small)
.pl3: var(--spacing-medium)
.pl3-l: var(--spacing-medium)
.pl3-m: var(--spacing-medium)
.pl3-ns: var(--spacing-medium)
.pl4: var(--spacing-large)
.pl4-l: var(--spacing-large)
.pl4-m: var(--spacing-large)
.pl4-ns: var(--spacing-large)
.pl5: var(--spacing-extra-large)
.pl5-l: var(--spacing-extra-large)
.pl5-m: var(--spacing-extra-large)
.pl5-ns: var(--spacing-extra-large)
.pl6: var(--spacing-extra-extra-large)
.pl6-l: var(--spacing-extra-extra-large)
.pl6-m: var(--spacing-extra-extra-large)
.pl6-ns: var(--spacing-extra-extra-large)
.pl7: var(--spacing-extra-extra-extra-large)
.pl7-l: var(--spacing-extra-extra-extra-large)
.pl7-m: var(--spacing-extra-extra-extra-large)
.pl7-ns: var(--spacing-extra-extra-extra-large) | spacing
nested |
padding-right | .ph0: var(--spacing-none)
.ph0-l: var(--spacing-none)
.ph0-m: var(--spacing-none)
.ph0-ns: var(--spacing-none)
.ph1: var(--spacing-extra-small)
.ph1-l: var(--spacing-extra-small)
.ph1-m: var(--spacing-extra-small)
.ph1-ns: var(--spacing-extra-small)
.ph2: var(--spacing-small)
.ph2-l: var(--spacing-small)
.ph2-m: var(--spacing-small)
.ph2-ns: var(--spacing-small)
.ph3: var(--spacing-medium)
.ph3-l: var(--spacing-medium)
.ph3-m: var(--spacing-medium)
.ph3-ns: var(--spacing-medium)
.ph4: var(--spacing-large)
.ph4-l: var(--spacing-large)
.ph4-m: var(--spacing-large)
.ph4-ns: var(--spacing-large)
.ph5: var(--spacing-extra-large)
.ph5-l: var(--spacing-extra-large)
.ph5-m: var(--spacing-extra-large)
.ph5-ns: var(--spacing-extra-large)
.ph6: var(--spacing-extra-extra-large)
.ph6-l: var(--spacing-extra-extra-large)
.ph6-m: var(--spacing-extra-extra-large)
.ph6-ns: var(--spacing-extra-extra-large)
.ph7: var(--spacing-extra-extra-extra-large)
.ph7-l: var(--spacing-extra-extra-extra-large)
.ph7-m: var(--spacing-extra-extra-extra-large)
.ph7-ns: var(--spacing-extra-extra-extra-large)
.pr0: var(--spacing-none)
.pr0-l: var(--spacing-none)
.pr0-m: var(--spacing-none)
.pr0-ns: var(--spacing-none)
.pr1: var(--spacing-extra-small)
.pr1-l: var(--spacing-extra-small)
.pr1-m: var(--spacing-extra-small)
.pr1-ns: var(--spacing-extra-small)
.pr2: var(--spacing-small)
.pr2-l: var(--spacing-small)
.pr2-m: var(--spacing-small)
.pr2-ns: var(--spacing-small)
.pr3: var(--spacing-medium)
.pr3-l: var(--spacing-medium)
.pr3-m: var(--spacing-medium)
.pr3-ns: var(--spacing-medium)
.pr4: var(--spacing-large)
.pr4-l: var(--spacing-large)
.pr4-m: var(--spacing-large)
.pr4-ns: var(--spacing-large)
.pr5: var(--spacing-extra-large)
.pr5-l: var(--spacing-extra-large)
.pr5-m: var(--spacing-extra-large)
.pr5-ns: var(--spacing-extra-large)
.pr6: var(--spacing-extra-extra-large)
.pr6-l: var(--spacing-extra-extra-large)
.pr6-m: var(--spacing-extra-extra-large)
.pr6-ns: var(--spacing-extra-extra-large)
.pr7: var(--spacing-extra-extra-extra-large)
.pr7-l: var(--spacing-extra-extra-extra-large)
.pr7-m: var(--spacing-extra-extra-extra-large)
.pr7-ns: var(--spacing-extra-extra-extra-large) | spacing |
padding-top | .pt0: var(--spacing-none)
.pt0-l: var(--spacing-none)
.pt0-m: var(--spacing-none)
.pt0-ns: var(--spacing-none)
.pt1: var(--spacing-extra-small)
.pt1-l: var(--spacing-extra-small)
.pt1-m: var(--spacing-extra-small)
.pt1-ns: var(--spacing-extra-small)
.pt2: var(--spacing-small)
.pt2-l: var(--spacing-small)
.pt2-m: var(--spacing-small)
.pt2-ns: var(--spacing-small)
.pt3: var(--spacing-medium)
.pt3-l: var(--spacing-medium)
.pt3-m: var(--spacing-medium)
.pt3-ns: var(--spacing-medium)
.pt4: var(--spacing-large)
.pt4-l: var(--spacing-large)
.pt4-m: var(--spacing-large)
.pt4-ns: var(--spacing-large)
.pt5: var(--spacing-extra-large)
.pt5-l: var(--spacing-extra-large)
.pt5-m: var(--spacing-extra-large)
.pt5-ns: var(--spacing-extra-large)
.pt6: var(--spacing-extra-extra-large)
.pt6-l: var(--spacing-extra-extra-large)
.pt6-m: var(--spacing-extra-extra-large)
.pt6-ns: var(--spacing-extra-extra-large)
.pt7: var(--spacing-extra-extra-extra-large)
.pt7-l: var(--spacing-extra-extra-extra-large)
.pt7-m: var(--spacing-extra-extra-extra-large)
.pt7-ns: var(--spacing-extra-extra-extra-large)
.pv0: var(--spacing-none)
.pv0-l: var(--spacing-none)
.pv0-m: var(--spacing-none)
.pv0-ns: var(--spacing-none)
.pv1: var(--spacing-extra-small)
.pv1-l: var(--spacing-extra-small)
.pv1-m: var(--spacing-extra-small)
.pv1-ns: var(--spacing-extra-small)
.pv2: var(--spacing-small)
.pv2-l: var(--spacing-small)
.pv2-m: var(--spacing-small)
.pv2-ns: var(--spacing-small)
.pv3: var(--spacing-medium)
.pv3-l: var(--spacing-medium)
.pv3-m: var(--spacing-medium)
.pv3-ns: var(--spacing-medium)
.pv4: var(--spacing-large)
.pv4-l: var(--spacing-large)
.pv4-m: var(--spacing-large)
.pv4-ns: var(--spacing-large)
.pv5: var(--spacing-extra-large)
.pv5-l: var(--spacing-extra-large)
.pv5-m: var(--spacing-extra-large)
.pv5-ns: var(--spacing-extra-large)
.pv6: var(--spacing-extra-extra-large)
.pv6-l: var(--spacing-extra-extra-large)
.pv6-m: var(--spacing-extra-extra-large)
.pv6-ns: var(--spacing-extra-extra-large)
.pv7: var(--spacing-extra-extra-extra-large)
.pv7-l: var(--spacing-extra-extra-extra-large)
.pv7-m: var(--spacing-extra-extra-extra-large)
.pv7-ns: var(--spacing-extra-extra-extra-large) | spacing |
position | .absolute: absolute
.absolute-l: absolute
.absolute-m: absolute
.absolute-ns: absolute
.aspect-ratio: relative
.aspect-ratio--object: absolute
.aspect-ratio--object-l: absolute
.aspect-ratio--object-m: absolute
.aspect-ratio--object-ns: absolute
.aspect-ratio-l: relative
.aspect-ratio-m: relative
.aspect-ratio-ns: relative
.clip: absolute
.clip-l: absolute
.clip-m: absolute
.clip-ns: absolute
.fixed: fixed
.fixed-l: fixed
.fixed-m: fixed
.fixed-ns: fixed
.relative: relative
.relative-l: relative
.relative-m: relative
.relative-ns: relative
.shadow-hover: relative
.shadow-hover::after: absolute
.static: static
.static-l: static
.static-m: static
.static-ns: static | aspect-ratios
position
visibility
hovers |
right | .absolute--fill: 0
.absolute--fill-l: 0
.absolute--fill-m: 0
.absolute--fill-ns: 0
.aspect-ratio--object: 0
.aspect-ratio--object-l: 0
.aspect-ratio--object-m: 0
.aspect-ratio--object-ns: 0
.right--1: -1rem
.right--1-l: -1rem
.right--1-m: -1rem
.right--1-ns: -1rem
.right--2: -2rem
.right--2-l: -2rem
.right--2-m: -2rem
.right--2-ns: -2rem
.right-0: 0
.right-0-l: 0
.right-0-m: 0
.right-0-ns: 0
.right-1: 1rem
.right-1-l: 1rem
.right-1-m: 1rem
.right-1-ns: 1rem
.right-2: 2rem
.right-2-l: 2rem
.right-2-m: 2rem
.right-2-ns: 2rem | aspect-ratios
coordinates |
table-layout | .dt--fixed: fixed
.dt--fixed-l: fixed
.dt--fixed-m: fixed
.dt--fixed-ns: fixed | display |
text-align | .tc: center
.tc-l: center
.tc-m: center
.tc-ns: center
.tj: justify
.tj-l: justify
.tj-m: justify
.tj-ns: justify
.tl: left
.tl-l: left
.tl-m: left
.tl-ns: left
.tr: right
.tr-l: right
.tr-m: right
.tr-ns: right | text-align |
text-decoration | .link: none
.no-underline: none
.no-underline-l: none
.no-underline-m: none
.no-underline-ns: none
.strike: line-through
.strike-l: line-through
.strike-m: line-through
.strike-ns: line-through
.underline: underline
.underline-hover:hover,
.underline-hover:focus: underline
.underline-l: underline
.underline-m: underline
.underline-ns: underline | links
text-decoration
hovers |
text-indent | .indent: 1em
.indent-l: 1em
.indent-m: 1em
.indent-ns: 1em
.nested-copy-indent p+p: 1em | typography
nested |
text-overflow | .truncate: ellipsis
.truncate-l: ellipsis
.truncate-m: ellipsis
.truncate-ns: ellipsis | typography |
text-transform | .ttc: capitalize
.ttc-l: capitalize
.ttc-m: capitalize
.ttc-ns: capitalize
.ttl: lowercase
.ttl-l: lowercase
.ttl-m: lowercase
.ttl-ns: lowercase
.ttn: none
.ttn-l: none
.ttn-m: none
.ttn-ns: none
.ttu: uppercase
.ttu-l: uppercase
.ttu-m: uppercase
.ttu-ns: uppercase | text-transform |
top | .absolute--fill: 0
.absolute--fill-l: 0
.absolute--fill-m: 0
.absolute--fill-ns: 0
.aspect-ratio--object: 0
.aspect-ratio--object-l: 0
.aspect-ratio--object-m: 0
.aspect-ratio--object-ns: 0
.shadow-hover::after: 0
.top--1: -1rem
.top--1-l: -1rem
.top--1-m: -1rem
.top--1-ns: -1rem
.top--2: -2rem
.top--2-l: -2rem
.top--2-m: -2rem
.top--2-ns: -2rem
.top-0: 0
.top-0-l: 0
.top-0-m: 0
.top-0-ns: 0
.top-1: 1rem
.top-1-l: 1rem
.top-1-m: 1rem
.top-1-ns: 1rem
.top-2: 2rem
.top-2-l: 2rem
.top-2-m: 2rem
.top-2-ns: 2rem | aspect-ratios
coordinates
hovers |
transform | .grow: translateZ(0)
.grow-large: translateZ(0)
.grow-large:active: scale(.95)
.grow-large:hover,
.grow-large:focus: scale(1.2)
.grow:active: scale(.90)
.grow:hover,
.grow:focus: scale(1.05)
.rotate-135: rotate(135deg)
.rotate-135-l: rotate(135deg)
.rotate-135-m: rotate(135deg)
.rotate-135-ns: rotate(135deg)
.rotate-180: rotate(180deg)
.rotate-180-l: rotate(180deg)
.rotate-180-m: rotate(180deg)
.rotate-180-ns: rotate(180deg)
.rotate-225: rotate(225deg)
.rotate-225-l: rotate(225deg)
.rotate-225-m: rotate(225deg)
.rotate-225-ns: rotate(225deg)
.rotate-270: rotate(270deg)
.rotate-270-l: rotate(270deg)
.rotate-270-m: rotate(270deg)
.rotate-270-ns: rotate(270deg)
.rotate-315: rotate(315deg)
.rotate-315-l: rotate(315deg)
.rotate-315-m: rotate(315deg)
.rotate-315-ns: rotate(315deg)
.rotate-45: rotate(45deg)
.rotate-45-l: rotate(45deg)
.rotate-45-m: rotate(45deg)
.rotate-45-ns: rotate(45deg)
.rotate-90: rotate(90deg)
.rotate-90-l: rotate(90deg)
.rotate-90-m: rotate(90deg)
.rotate-90-ns: rotate(90deg) | rotations
hovers |
transition | .bg-animate,
.bg-animate:hover,
.bg-animate:focus: background-color .15s ease-in-out
.dim: opacity .15s ease-in
.dim:active: opacity .15s ease-out
.dim:hover,
.dim:focus: opacity .15s ease-in
.glow: opacity .15s ease-in
.glow:hover,
.glow:focus: opacity .15s ease-in
.grow: transform 0.25s ease-out
.grow-large: transform .25s ease-in-out
.hide-child .child: opacity .15s ease-in
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child: opacity .15s ease-in
.link: color .15s ease-in
.link:active: color .15s ease-in
.link:focus: color .15s ease-in
.link:hover: color .15s ease-in
.link:link,
.link:visited: color .15s ease-in
.nested-links a: color .15s ease-in
.nested-links a:hover,
.nested-links a:focus: color .15s ease-in
.shadow-hover: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
.shadow-hover::after: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) | links
hovers
nested |
vertical-align | .v-base: baseline
.v-base-l: baseline
.v-base-m: baseline
.v-base-ns: baseline
.v-btm: bottom
.v-btm-l: bottom
.v-btm-m: bottom
.v-btm-ns: bottom
.v-mid: middle
.v-mid-l: middle
.v-mid-m: middle
.v-mid-ns: middle
.v-top: top
.v-top-l: top
.v-top-m: top
.v-top-ns: top | vertical-align |
white-space | .nowrap: nowrap
.nowrap-l: nowrap
.nowrap-m: nowrap
.nowrap-ns: nowrap
.pre: pre
.pre-l: pre
.pre-m: pre
.pre-ns: pre
.truncate: nowrap
.truncate-l: nowrap
.truncate-m: nowrap
.truncate-ns: nowrap
.ws-normal: normal
.ws-normal-l: normal
.ws-normal-m: normal
.ws-normal-ns: normal | typography
white-space |
width | .aspect-ratio--object: 100%
.aspect-ratio--object-l: 100%
.aspect-ratio--object-m: 100%
.aspect-ratio--object-ns: 100%
.dt--fixed: 100%
.dt--fixed-l: 100%
.dt--fixed-m: 100%
.dt--fixed-ns: 100%
.nested-img img: 100%
.shadow-hover::after: 100%
.w-10: 10%
.w-10-l: 10%
.w-10-m: 10%
.w-10-ns: 10%
.w-100: 100%
.w-100-l: 100%
.w-100-m: 100%
.w-100-ns: 100%
.w-20: 20%
.w-20-l: 20%
.w-20-m: 20%
.w-20-ns: 20%
.w-25: 25%
.w-25-l: 25%
.w-25-m: 25%
.w-25-ns: 25%
.w-30: 30%
.w-30-l: 30%
.w-30-m: 30%
.w-30-ns: 30%
.w-33: 33%
.w-33-l: 33%
.w-33-m: 33%
.w-33-ns: 33%
.w-34: 34%
.w-34-l: 34%
.w-34-m: 34%
.w-34-ns: 34%
.w-40: 40%
.w-40-l: 40%
.w-40-m: 40%
.w-40-ns: 40%
.w-50: 50%
.w-50-l: 50%
.w-50-m: 50%
.w-50-ns: 50%
.w-60: 60%
.w-60-l: 60%
.w-60-m: 60%
.w-60-ns: 60%
.w-70: 70%
.w-70-l: 70%
.w-70-m: 70%
.w-70-ns: 70%
.w-75: 75%
.w-75-l: 75%
.w-75-m: 75%
.w-75-ns: 75%
.w-80: 80%
.w-80-l: 80%
.w-80-m: 80%
.w-80-ns: 80%
.w-90: 90%
.w-90-l: 90%
.w-90-m: 90%
.w-90-ns: 90%
.w-auto: auto
.w-auto-l: auto
.w-auto-m: auto
.w-auto-ns: auto
.w-third: calc(100% / 3)
.w-third-l: calc(100% / 3)
.w-third-m: calc(100% / 3)
.w-third-ns: calc(100% / 3)
.w-two-thirds: calc(100% / 1.5)
.w-two-thirds-l: calc(100% / 1.5)
.w-two-thirds-m: calc(100% / 1.5)
.w-two-thirds-ns: calc(100% / 1.5)
.w1: 1rem
.w1-l: 1rem
.w1-m: 1rem
.w1-ns: 1rem
.w2: 2rem
.w2-l: 2rem
.w2-m: 2rem
.w2-ns: 2rem
.w3: 4rem
.w3-l: 4rem
.w3-m: 4rem
.w3-ns: 4rem
.w4: 8rem
.w4-l: 8rem
.w4-m: 8rem
.w4-ns: 8rem
.w5: 16rem
.w5-l: 16rem
.w5-m: 16rem
.w5-ns: 16rem | aspect-ratios
display
widths
hovers
nested |
z-index | .aspect-ratio--object: 100
.aspect-ratio--object-l: 100
.aspect-ratio--object-m: 100
.aspect-ratio--object-ns: 100
.shadow-hover::after: -1
.z-0: 0
.z-1: 1
.z-2: 2
.z-3: 3
.z-4: 4
.z-5: 5
.z-999: 999
.z-9999: 9999
.z-inherit: inherit
.z-initial: initial
.z-max: 2147483647
.z-unset: unset | aspect-ratios
hovers
z-index |
zoom | .cf: 1 | clears |