UNPKG

preons

Version:

Functional css library and utility belt

2,203 lines 86 kB
preons: baseline: 1.6rem rules: theme-colors: &a1 black: "#000000" white: "#ffffff" transparent: transparent hotpinkxl: "#f188bc" hotpinkl: "#f36fb0" hotpink: "#ea2889" hotpinkd: "#cc0f6d" hotpinkxd: "#900148" greyxl: "#f0f2ff" greyl: "#dedbe2" grey: "#b2b6ca" greyd: "#5a5573" greyxd: "#4d4c51" yellowxl: "#f8f8b7" yellowl: "#f1f16f" yellow: "#eaea28" yellowd: "#d6d615" yellowxd: "#b2b211" redxl: "#f3a6a6" redl: "#ec7272" red: "#e53e3e" redd: "#cd1c1c" redxd: "#991515" purplexl: "#c493f4" purplel: "#a65eef" purple: "#8928ea" purpled: "#6c13c4" purplexd: "#5810a0" orangexl: "#f4c493" orangel: "#efa65e" orange: "#ea8928" oranged: "#d67515" orangexd: "#b26211" limexl: "#c4f493" limel: "#a6ef5e" lime: "#89ea28" limed: "#6cc413" limexd: "#4e8e0e" lilacxl: "#f3effd" lilacl: "#e6dff7" lilac: "#c4b4ea" lilacd: "#b3a0de" lilacxd: "#988bb7" greenxl: "#00ce00" greenl: "#00a700" green: "#008000" greend: "#006c00" greenxd: "#005900" bluexl: "#99c8fb" bluel: "#68a9f1" blue: "#2889ea" blued: "#126eca" bluexd: "#0c59a7" off-whitel: "#fbfbff" off-white: "#f3f3f7" off-whited: "#e4e7f7" border-style: &a4 solid: solid dotted: dotted dashed: dashed list-style: &a6 circle: circle disc: disc square: square decimal: decimal none: none decimal-leading-zero: decimal-leading-zero overflow: &a8 scroll: scroll hidden: hidden visible: visible auto: auto none: none scaled: "0": 0 "1": $baseline * 1 "2": $baseline * 2 "3": $baseline * 3 "4": $baseline * 4 "5": $baseline * 5 "6": $baseline * 6 "7": $baseline * 7 "8": $baseline * 8 "9": $baseline * 9 "10": $baseline * 10 "11": $baseline * 11 "12": $baseline * 12 negative-scaled: 1x: -1rem 2x: -2rem 3x: -3rem 4x: -4rem 5x: -5rem 6x: -6rem 7x: -7rem 8x: -8rem 9x: -9rem 10x: -10rem baselined: &a5 "1": $baseline * 0.5 "2": $baseline * 1 "3": $baseline * 1.5 "4": $baseline * 2 "5": $baseline * 2.5 "6": $baseline * 3 "7": $baseline * 3.5 "8": $baseline * 4 "9": $baseline * 4.5 "10": $baseline * 5 "11": $baseline * 5.5 "12": $baseline * 6 decimal: &a7 "0": 0 "-10": 0.1 "-20": 0.2 "-30": 0.3 "-40": 0.4 "-50": 0.5 "-60": 0.6 "-70": 0.7 "-80": 0.8 "-90": 0.9 "-100": 1 percentaged: "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% discrete-percentage: -1-12: 100% / 12 -2-12: 100% / 12 * 2 -3-12: 100% / 12 * 3 -4-12: 100% / 12 * 4 -5-12: 100% / 12 * 5 -6-12: 100% / 12 * 6 -7-12: 100% / 12 * 7 -8-12: 100% / 12 * 8 -9-12: 100% / 12 * 9 -10-12: 100% / 12 * 10 -11-12: 100% / 12 * 11 -12-12: 100% / 12 * 12 special-sizes: n: none -au: auto tiny: &a3 "0": 0 "1": 1px "2": 2px "3": 3px "4": 4px "5": 5px "6": 6px "7": 7px "8": 8px "9": 9px "10": 10px discrete: -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem vh: -10vh: 10vh -20vh: 20vh -30vh: 30vh -40vh: 40vh -50vh: 50vh -60vh: 60vh -70vh: 70vh -80vh: 80vh -90vh: 90vh -100vh: 100vh vw: -10vw: 10vw -20vw: 20vw -30vw: 30vw -40vw: 40vw -50vw: 50vw -60vw: 60vw -70vw: 70vw -80vw: 80vw -90vw: 90vw -100vw: 100vw negative-discrete: -bigx: -16rem -xbigx: 22rem -xxbigx: -32rem -xxxbigx: -44rem -superx: -56rem -xsuperx: -68rem -xxsuperx: -80rem -xxxsuperx: -100rem alignment: &a2 center: center right: right left: left override: &a9 "0": 0 "1": 1 "2": 2 "3": 3 "4": 4 "5": 5 "10": 10 "20": 20 "30": 30 "999": 999 "9999": 9999 properties: background-attachment: class: bga- values: sc: scroll fi: fixed lo: local in: initial inherit: inherit mappings: bga-sc: scroll bga-fi: fixed bga-lo: local bga-in: initial bga-inherit: inherit background-color: class: bg- rule: theme-colors values: *a1 mappings: bg-black: "#000000" bg-white: "#ffffff" bg-transparent: transparent bg-hotpinkxl: "#f188bc" bg-hotpinkl: "#f36fb0" bg-hotpink: "#ea2889" bg-hotpinkd: "#cc0f6d" bg-hotpinkxd: "#900148" bg-greyxl: "#f0f2ff" bg-greyl: "#dedbe2" bg-grey: "#b2b6ca" bg-greyd: "#5a5573" bg-greyxd: "#4d4c51" bg-yellowxl: "#f8f8b7" bg-yellowl: "#f1f16f" bg-yellow: "#eaea28" bg-yellowd: "#d6d615" bg-yellowxd: "#b2b211" bg-redxl: "#f3a6a6" bg-redl: "#ec7272" bg-red: "#e53e3e" bg-redd: "#cd1c1c" bg-redxd: "#991515" bg-purplexl: "#c493f4" bg-purplel: "#a65eef" bg-purple: "#8928ea" bg-purpled: "#6c13c4" bg-purplexd: "#5810a0" bg-orangexl: "#f4c493" bg-orangel: "#efa65e" bg-orange: "#ea8928" bg-oranged: "#d67515" bg-orangexd: "#b26211" bg-limexl: "#c4f493" bg-limel: "#a6ef5e" bg-lime: "#89ea28" bg-limed: "#6cc413" bg-limexd: "#4e8e0e" bg-lilacxl: "#f3effd" bg-lilacl: "#e6dff7" bg-lilac: "#c4b4ea" bg-lilacd: "#b3a0de" bg-lilacxd: "#988bb7" bg-greenxl: "#00ce00" bg-greenl: "#00a700" bg-green: "#008000" bg-greend: "#006c00" bg-greenxd: "#005900" bg-bluexl: "#99c8fb" bg-bluel: "#68a9f1" bg-blue: "#2889ea" bg-blued: "#126eca" bg-bluexd: "#0c59a7" bg-off-whitel: "#fbfbff" bg-off-white: "#f3f3f7" bg-off-whited: "#e4e7f7" background-size: class: bs- values: auto: auto inherit: inherit cover: cover contain: contain initial: initial mappings: bs-auto: auto bs-inherit: inherit bs-cover: cover bs-contain: contain bs-initial: initial background-position: class: bgp- rule: alignment values: *a2 mappings: bgp-center: center bgp-right: right bgp-left: left background-position-x: class: bgpx- rule: alignment values: *a2 mappings: bgpx-center: center bgpx-right: right bgpx-left: left background-position-y: class: bgpy- rule: alignment values: *a2 mappings: bgpy-center: center bgpy-right: right bgpy-left: left background-repeat: class: bgr- values: rx: repeat-x rp: repeat sp: space ro: round nr: no-repeat mappings: bgr-rx: repeat-x bgr-rp: repeat bgr-sp: space bgr-ro: round bgr-nr: no-repeat border-bottom-width: class: bwb rule: tiny values: *a3 mappings: bwb0: 0 bwb1: 1px bwb2: 2px bwb3: 3px bwb4: 4px bwb5: 5px bwb6: 6px bwb7: 7px bwb8: 8px bwb9: 9px bwb10: 10px border-top-width: class: bwt rule: tiny values: *a3 mappings: bwt0: 0 bwt1: 1px bwt2: 2px bwt3: 3px bwt4: 4px bwt5: 5px bwt6: 6px bwt7: 7px bwt8: 8px bwt9: 9px bwt10: 10px border-right-width: class: bwr rule: tiny values: *a3 mappings: bwr0: 0 bwr1: 1px bwr2: 2px bwr3: 3px bwr4: 4px bwr5: 5px bwr6: 6px bwr7: 7px bwr8: 8px bwr9: 9px bwr10: 10px border-left-width: class: bwl rule: tiny values: *a3 mappings: bwl0: 0 bwl1: 1px bwl2: 2px bwl3: 3px bwl4: 4px bwl5: 5px bwl6: 6px bwl7: 7px bwl8: 8px bwl9: 9px bwl10: 10px border-width: class: bwa rule: tiny values: *a3 mappings: bwa0: 0 bwa1: 1px bwa2: 2px bwa3: 3px bwa4: 4px bwa5: 5px bwa6: 6px bwa7: 7px bwa8: 8px bwa9: 9px bwa10: 10px border-bottom-color: class: bcb- rule: theme-colors values: *a1 mappings: bcb-black: "#000000" bcb-white: "#ffffff" bcb-transparent: transparent bcb-hotpinkxl: "#f188bc" bcb-hotpinkl: "#f36fb0" bcb-hotpink: "#ea2889" bcb-hotpinkd: "#cc0f6d" bcb-hotpinkxd: "#900148" bcb-greyxl: "#f0f2ff" bcb-greyl: "#dedbe2" bcb-grey: "#b2b6ca" bcb-greyd: "#5a5573" bcb-greyxd: "#4d4c51" bcb-yellowxl: "#f8f8b7" bcb-yellowl: "#f1f16f" bcb-yellow: "#eaea28" bcb-yellowd: "#d6d615" bcb-yellowxd: "#b2b211" bcb-redxl: "#f3a6a6" bcb-redl: "#ec7272" bcb-red: "#e53e3e" bcb-redd: "#cd1c1c" bcb-redxd: "#991515" bcb-purplexl: "#c493f4" bcb-purplel: "#a65eef" bcb-purple: "#8928ea" bcb-purpled: "#6c13c4" bcb-purplexd: "#5810a0" bcb-orangexl: "#f4c493" bcb-orangel: "#efa65e" bcb-orange: "#ea8928" bcb-oranged: "#d67515" bcb-orangexd: "#b26211" bcb-limexl: "#c4f493" bcb-limel: "#a6ef5e" bcb-lime: "#89ea28" bcb-limed: "#6cc413" bcb-limexd: "#4e8e0e" bcb-lilacxl: "#f3effd" bcb-lilacl: "#e6dff7" bcb-lilac: "#c4b4ea" bcb-lilacd: "#b3a0de" bcb-lilacxd: "#988bb7" bcb-greenxl: "#00ce00" bcb-greenl: "#00a700" bcb-green: "#008000" bcb-greend: "#006c00" bcb-greenxd: "#005900" bcb-bluexl: "#99c8fb" bcb-bluel: "#68a9f1" bcb-blue: "#2889ea" bcb-blued: "#126eca" bcb-bluexd: "#0c59a7" bcb-off-whitel: "#fbfbff" bcb-off-white: "#f3f3f7" bcb-off-whited: "#e4e7f7" border-top-color: class: bct- rule: theme-colors values: *a1 mappings: bct-black: "#000000" bct-white: "#ffffff" bct-transparent: transparent bct-hotpinkxl: "#f188bc" bct-hotpinkl: "#f36fb0" bct-hotpink: "#ea2889" bct-hotpinkd: "#cc0f6d" bct-hotpinkxd: "#900148" bct-greyxl: "#f0f2ff" bct-greyl: "#dedbe2" bct-grey: "#b2b6ca" bct-greyd: "#5a5573" bct-greyxd: "#4d4c51" bct-yellowxl: "#f8f8b7" bct-yellowl: "#f1f16f" bct-yellow: "#eaea28" bct-yellowd: "#d6d615" bct-yellowxd: "#b2b211" bct-redxl: "#f3a6a6" bct-redl: "#ec7272" bct-red: "#e53e3e" bct-redd: "#cd1c1c" bct-redxd: "#991515" bct-purplexl: "#c493f4" bct-purplel: "#a65eef" bct-purple: "#8928ea" bct-purpled: "#6c13c4" bct-purplexd: "#5810a0" bct-orangexl: "#f4c493" bct-orangel: "#efa65e" bct-orange: "#ea8928" bct-oranged: "#d67515" bct-orangexd: "#b26211" bct-limexl: "#c4f493" bct-limel: "#a6ef5e" bct-lime: "#89ea28" bct-limed: "#6cc413" bct-limexd: "#4e8e0e" bct-lilacxl: "#f3effd" bct-lilacl: "#e6dff7" bct-lilac: "#c4b4ea" bct-lilacd: "#b3a0de" bct-lilacxd: "#988bb7" bct-greenxl: "#00ce00" bct-greenl: "#00a700" bct-green: "#008000" bct-greend: "#006c00" bct-greenxd: "#005900" bct-bluexl: "#99c8fb" bct-bluel: "#68a9f1" bct-blue: "#2889ea" bct-blued: "#126eca" bct-bluexd: "#0c59a7" bct-off-whitel: "#fbfbff" bct-off-white: "#f3f3f7" bct-off-whited: "#e4e7f7" border-left-color: class: bcl- rule: theme-colors values: *a1 mappings: bcl-black: "#000000" bcl-white: "#ffffff" bcl-transparent: transparent bcl-hotpinkxl: "#f188bc" bcl-hotpinkl: "#f36fb0" bcl-hotpink: "#ea2889" bcl-hotpinkd: "#cc0f6d" bcl-hotpinkxd: "#900148" bcl-greyxl: "#f0f2ff" bcl-greyl: "#dedbe2" bcl-grey: "#b2b6ca" bcl-greyd: "#5a5573" bcl-greyxd: "#4d4c51" bcl-yellowxl: "#f8f8b7" bcl-yellowl: "#f1f16f" bcl-yellow: "#eaea28" bcl-yellowd: "#d6d615" bcl-yellowxd: "#b2b211" bcl-redxl: "#f3a6a6" bcl-redl: "#ec7272" bcl-red: "#e53e3e" bcl-redd: "#cd1c1c" bcl-redxd: "#991515" bcl-purplexl: "#c493f4" bcl-purplel: "#a65eef" bcl-purple: "#8928ea" bcl-purpled: "#6c13c4" bcl-purplexd: "#5810a0" bcl-orangexl: "#f4c493" bcl-orangel: "#efa65e" bcl-orange: "#ea8928" bcl-oranged: "#d67515" bcl-orangexd: "#b26211" bcl-limexl: "#c4f493" bcl-limel: "#a6ef5e" bcl-lime: "#89ea28" bcl-limed: "#6cc413" bcl-limexd: "#4e8e0e" bcl-lilacxl: "#f3effd" bcl-lilacl: "#e6dff7" bcl-lilac: "#c4b4ea" bcl-lilacd: "#b3a0de" bcl-lilacxd: "#988bb7" bcl-greenxl: "#00ce00" bcl-greenl: "#00a700" bcl-green: "#008000" bcl-greend: "#006c00" bcl-greenxd: "#005900" bcl-bluexl: "#99c8fb" bcl-bluel: "#68a9f1" bcl-blue: "#2889ea" bcl-blued: "#126eca" bcl-bluexd: "#0c59a7" bcl-off-whitel: "#fbfbff" bcl-off-white: "#f3f3f7" bcl-off-whited: "#e4e7f7" border-right-color: class: bcr- rule: theme-colors values: *a1 mappings: bcr-black: "#000000" bcr-white: "#ffffff" bcr-transparent: transparent bcr-hotpinkxl: "#f188bc" bcr-hotpinkl: "#f36fb0" bcr-hotpink: "#ea2889" bcr-hotpinkd: "#cc0f6d" bcr-hotpinkxd: "#900148" bcr-greyxl: "#f0f2ff" bcr-greyl: "#dedbe2" bcr-grey: "#b2b6ca" bcr-greyd: "#5a5573" bcr-greyxd: "#4d4c51" bcr-yellowxl: "#f8f8b7" bcr-yellowl: "#f1f16f" bcr-yellow: "#eaea28" bcr-yellowd: "#d6d615" bcr-yellowxd: "#b2b211" bcr-redxl: "#f3a6a6" bcr-redl: "#ec7272" bcr-red: "#e53e3e" bcr-redd: "#cd1c1c" bcr-redxd: "#991515" bcr-purplexl: "#c493f4" bcr-purplel: "#a65eef" bcr-purple: "#8928ea" bcr-purpled: "#6c13c4" bcr-purplexd: "#5810a0" bcr-orangexl: "#f4c493" bcr-orangel: "#efa65e" bcr-orange: "#ea8928" bcr-oranged: "#d67515" bcr-orangexd: "#b26211" bcr-limexl: "#c4f493" bcr-limel: "#a6ef5e" bcr-lime: "#89ea28" bcr-limed: "#6cc413" bcr-limexd: "#4e8e0e" bcr-lilacxl: "#f3effd" bcr-lilacl: "#e6dff7" bcr-lilac: "#c4b4ea" bcr-lilacd: "#b3a0de" bcr-lilacxd: "#988bb7" bcr-greenxl: "#00ce00" bcr-greenl: "#00a700" bcr-green: "#008000" bcr-greend: "#006c00" bcr-greenxd: "#005900" bcr-bluexl: "#99c8fb" bcr-bluel: "#68a9f1" bcr-blue: "#2889ea" bcr-blued: "#126eca" bcr-bluexd: "#0c59a7" bcr-off-whitel: "#fbfbff" bcr-off-white: "#f3f3f7" bcr-off-whited: "#e4e7f7" border-color: class: bca- rule: theme-colors values: *a1 mappings: bca-black: "#000000" bca-white: "#ffffff" bca-transparent: transparent bca-hotpinkxl: "#f188bc" bca-hotpinkl: "#f36fb0" bca-hotpink: "#ea2889" bca-hotpinkd: "#cc0f6d" bca-hotpinkxd: "#900148" bca-greyxl: "#f0f2ff" bca-greyl: "#dedbe2" bca-grey: "#b2b6ca" bca-greyd: "#5a5573" bca-greyxd: "#4d4c51" bca-yellowxl: "#f8f8b7" bca-yellowl: "#f1f16f" bca-yellow: "#eaea28" bca-yellowd: "#d6d615" bca-yellowxd: "#b2b211" bca-redxl: "#f3a6a6" bca-redl: "#ec7272" bca-red: "#e53e3e" bca-redd: "#cd1c1c" bca-redxd: "#991515" bca-purplexl: "#c493f4" bca-purplel: "#a65eef" bca-purple: "#8928ea" bca-purpled: "#6c13c4" bca-purplexd: "#5810a0" bca-orangexl: "#f4c493" bca-orangel: "#efa65e" bca-orange: "#ea8928" bca-oranged: "#d67515" bca-orangexd: "#b26211" bca-limexl: "#c4f493" bca-limel: "#a6ef5e" bca-lime: "#89ea28" bca-limed: "#6cc413" bca-limexd: "#4e8e0e" bca-lilacxl: "#f3effd" bca-lilacl: "#e6dff7" bca-lilac: "#c4b4ea" bca-lilacd: "#b3a0de" bca-lilacxd: "#988bb7" bca-greenxl: "#00ce00" bca-greenl: "#00a700" bca-green: "#008000" bca-greend: "#006c00" bca-greenxd: "#005900" bca-bluexl: "#99c8fb" bca-bluel: "#68a9f1" bca-blue: "#2889ea" bca-blued: "#126eca" bca-bluexd: "#0c59a7" bca-off-whitel: "#fbfbff" bca-off-white: "#f3f3f7" bca-off-whited: "#e4e7f7" border-style: class: bsa- rule: border-style values: *a4 mappings: bsa-solid: solid bsa-dotted: dotted bsa-dashed: dashed border-bottom-style: class: bsb- rule: border-style values: *a4 mappings: bsb-solid: solid bsb-dotted: dotted bsb-dashed: dashed border-top-style: class: bst- rule: border-style values: *a4 mappings: bst-solid: solid bst-dotted: dotted bst-dashed: dashed border-right-style: class: bsr- rule: border-style values: *a4 mappings: bsr-solid: solid bsr-dotted: dotted bsr-dashed: dashed border-left-style: class: bsl- rule: border-style values: *a4 mappings: bsl-solid: solid bsl-dotted: dotted bsl-dashed: dashed border-radius: class: bra values: "1": .5rem "2": 1rem "3": 2rem "4": 3rem "5": 4rem "6": 5rem "-50": 50% mappings: bra1: .5rem bra2: 1rem bra3: 2rem bra4: 3rem bra5: 4rem bra6: 5rem bra-50: 50% clear: class: c values: b: both mappings: cb: both color: class: null rule: theme-colors values: *a1 mappings: black: "#000000" white: "#ffffff" transparent: transparent hotpinkxl: "#f188bc" hotpinkl: "#f36fb0" hotpink: "#ea2889" hotpinkd: "#cc0f6d" hotpinkxd: "#900148" greyxl: "#f0f2ff" greyl: "#dedbe2" grey: "#b2b6ca" greyd: "#5a5573" greyxd: "#4d4c51" yellowxl: "#f8f8b7" yellowl: "#f1f16f" yellow: "#eaea28" yellowd: "#d6d615" yellowxd: "#b2b211" redxl: "#f3a6a6" redl: "#ec7272" red: "#e53e3e" redd: "#cd1c1c" redxd: "#991515" purplexl: "#c493f4" purplel: "#a65eef" purple: "#8928ea" purpled: "#6c13c4" purplexd: "#5810a0" orangexl: "#f4c493" orangel: "#efa65e" orange: "#ea8928" oranged: "#d67515" orangexd: "#b26211" limexl: "#c4f493" limel: "#a6ef5e" lime: "#89ea28" limed: "#6cc413" limexd: "#4e8e0e" lilacxl: "#f3effd" lilacl: "#e6dff7" lilac: "#c4b4ea" lilacd: "#b3a0de" lilacxd: "#988bb7" greenxl: "#00ce00" greenl: "#00a700" green: "#008000" greend: "#006c00" greenxd: "#005900" bluexl: "#99c8fb" bluel: "#68a9f1" blue: "#2889ea" blued: "#126eca" bluexd: "#0c59a7" off-whitel: "#fbfbff" off-white: "#f3f3f7" off-whited: "#e4e7f7" cursor: class: null values: pointer: pointer help: help wait: wait crosshair: crosshair not-allowed: not-allowed zoom-in: zoom-in grab: grab mappings: pointer: pointer help: help wait: wait crosshair: crosshair not-allowed: not-allowed zoom-in: zoom-in grab: grab display: class: d- values: bl: block in: inline inbl: inline-block ta: table fl: flex infl: inline-flex no: none mappings: d-bl: block d-in: inline d-inbl: inline-block d-ta: table d-fl: flex d-infl: inline-flex d-no: none float: class: fl values: r: right l: left n: none mappings: flr: right fll: left fln: none font-family: class: ff- values: raleway: "#{Raleway, sans-serif}" exo: "#{Exo, sans-serif}" josefin: "#{'Josefin Sans', sans-serif}" kanit: "#{'Kanit', sans-serif}" martel: "#{'Martel', serif}" prompt: "#{'Prompt', sans-serif}" roboto-mono: "#{'Roboto Monp', monospace}" mappings: ff-raleway: "#{Raleway, sans-serif}" ff-exo: "#{Exo, sans-serif}" ff-josefin: "#{'Josefin Sans', sans-serif}" ff-kanit: "#{'Kanit', sans-serif}" ff-martel: "#{'Martel', serif}" ff-prompt: "#{'Prompt', sans-serif}" ff-roboto-mono: "#{'Roboto Monp', monospace}" font-size: class: fs values: "1": .90rem "2": 1.2rem "3": 1.60rem "4": 2.133rem "5": 2.843rem "6": 3.790rem "7": 5.522rem "8": 6.734rem "9": 8.976rem "10": 11.966rem mappings: fs1: .90rem fs2: 1.2rem fs3: 1.60rem fs4: 2.133rem fs5: 2.843rem fs6: 3.790rem fs7: 5.522rem fs8: 6.734rem fs9: 8.976rem fs10: 11.966rem font-style: class: fst- values: no: normal it: italic mappings: fst-no: normal fst-it: italic font-weight: class: fw values: "1": 100 "2": 200 "3": 300 "4": 400 "5": 500 "6": 600 "7": 700 "8": 800 "9": 900 l: 300 n: 400 b: 700 mappings: fw1: 100 fw2: 200 fw3: 300 fw4: 400 fw5: 500 fw6: 600 fw7: 700 fw8: 800 fw9: 900 fwl: 300 fwn: 400 fwb: 700 height: class: h rule: - scaled - percentaged - discrete-percentage - discrete - special-sizes - vh values: "0": 0 "1": $baseline * 1 "2": $baseline * 2 "3": $baseline * 3 "4": $baseline * 4 "5": $baseline * 5 "6": $baseline * 6 "7": $baseline * 7 "8": $baseline * 8 "9": $baseline * 9 "10": $baseline * 10 "11": $baseline * 11 "12": $baseline * 12 "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -1-12: 100% / 12 -2-12: 100% / 12 * 2 -3-12: 100% / 12 * 3 -4-12: 100% / 12 * 4 -5-12: 100% / 12 * 5 -6-12: 100% / 12 * 6 -7-12: 100% / 12 * 7 -8-12: 100% / 12 * 8 -9-12: 100% / 12 * 9 -10-12: 100% / 12 * 10 -11-12: 100% / 12 * 11 -12-12: 100% / 12 * 12 -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem n: none -au: auto -10vh: 10vh -20vh: 20vh -30vh: 30vh -40vh: 40vh -50vh: 50vh -60vh: 60vh -70vh: 70vh -80vh: 80vh -90vh: 90vh -100vh: 100vh mappings: h0: 0 h1: $baseline * 1 h2: $baseline * 2 h3: $baseline * 3 h4: $baseline * 4 h5: $baseline * 5 h6: $baseline * 6 h7: $baseline * 7 h8: $baseline * 8 h9: $baseline * 9 h10: $baseline * 10 h11: $baseline * 11 h12: $baseline * 12 h-5: 5% h-10: 10% h-15: 15% h-20: 20% h-25: 25% h-30: 30% h-35: 35% h-40: 40% h-45: 45% h-50: 50% h-55: 55% h-60: 60% h-65: 65% h-70: 70% h-75: 75% h-80: 80% h-85: 85% h-90: 90% h-95: 95% h-100: 100% h-1-12: 100% / 12 h-2-12: 100% / 12 * 2 h-3-12: 100% / 12 * 3 h-4-12: 100% / 12 * 4 h-5-12: 100% / 12 * 5 h-6-12: 100% / 12 * 6 h-7-12: 100% / 12 * 7 h-8-12: 100% / 12 * 8 h-9-12: 100% / 12 * 9 h-10-12: 100% / 12 * 10 h-11-12: 100% / 12 * 11 h-12-12: 100% / 12 * 12 h-wire: 1px h-xthin: 2px h-thin: 3px h-xxxsmall: 5px h-xxsmall: 0.8rem h-xsmall: 1rem h-small: 1.6rem h-icon: 2.4rem h-medium: 7rem h-big: 16rem h-xbig: 22rem h-xxbig: 32rem h-xxxbig: 44rem h-super: 58rem h-xsuper: 72rem h-xxsuper: 90rem h-xxxsuper: 116rem hn: none h-au: auto h-10vh: 10vh h-20vh: 20vh h-30vh: 30vh h-40vh: 40vh h-50vh: 50vh h-60vh: 60vh h-70vh: 70vh h-80vh: 80vh h-90vh: 90vh h-100vh: 100vh max-height: class: maxh rule: - percentaged - discrete - special-sizes values: "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem n: none -au: auto mappings: maxh-5: 5% maxh-10: 10% maxh-15: 15% maxh-20: 20% maxh-25: 25% maxh-30: 30% maxh-35: 35% maxh-40: 40% maxh-45: 45% maxh-50: 50% maxh-55: 55% maxh-60: 60% maxh-65: 65% maxh-70: 70% maxh-75: 75% maxh-80: 80% maxh-85: 85% maxh-90: 90% maxh-95: 95% maxh-100: 100% maxh-wire: 1px maxh-xthin: 2px maxh-thin: 3px maxh-xxxsmall: 5px maxh-xxsmall: 0.8rem maxh-xsmall: 1rem maxh-small: 1.6rem maxh-icon: 2.4rem maxh-medium: 7rem maxh-big: 16rem maxh-xbig: 22rem maxh-xxbig: 32rem maxh-xxxbig: 44rem maxh-super: 58rem maxh-xsuper: 72rem maxh-xxsuper: 90rem maxh-xxxsuper: 116rem maxhn: none maxh-au: auto min-height: class: minh rule: - percentaged - discrete - special-sizes values: "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem n: none -au: auto mappings: minh-5: 5% minh-10: 10% minh-15: 15% minh-20: 20% minh-25: 25% minh-30: 30% minh-35: 35% minh-40: 40% minh-45: 45% minh-50: 50% minh-55: 55% minh-60: 60% minh-65: 65% minh-70: 70% minh-75: 75% minh-80: 80% minh-85: 85% minh-90: 90% minh-95: 95% minh-100: 100% minh-wire: 1px minh-xthin: 2px minh-thin: 3px minh-xxxsmall: 5px minh-xxsmall: 0.8rem minh-xsmall: 1rem minh-small: 1.6rem minh-icon: 2.4rem minh-medium: 7rem minh-big: 16rem minh-xbig: 22rem minh-xxbig: 32rem minh-xxxbig: 44rem minh-super: 58rem minh-xsuper: 72rem minh-xxsuper: 90rem minh-xxxsuper: 116rem minhn: none minh-au: auto width: class: w rule: - scaled - percentaged - discrete-percentage - discrete - special-sizes - vw values: "0": 0 "1": $baseline * 1 "2": $baseline * 2 "3": $baseline * 3 "4": $baseline * 4 "5": $baseline * 5 "6": $baseline * 6 "7": $baseline * 7 "8": $baseline * 8 "9": $baseline * 9 "10": $baseline * 10 "11": $baseline * 11 "12": $baseline * 12 "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -1-12: 100% / 12 -2-12: 100% / 12 * 2 -3-12: 100% / 12 * 3 -4-12: 100% / 12 * 4 -5-12: 100% / 12 * 5 -6-12: 100% / 12 * 6 -7-12: 100% / 12 * 7 -8-12: 100% / 12 * 8 -9-12: 100% / 12 * 9 -10-12: 100% / 12 * 10 -11-12: 100% / 12 * 11 -12-12: 100% / 12 * 12 -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem n: none -au: auto -10vw: 10vw -20vw: 20vw -30vw: 30vw -40vw: 40vw -50vw: 50vw -60vw: 60vw -70vw: 70vw -80vw: 80vw -90vw: 90vw -100vw: 100vw mappings: w0: 0 w1: $baseline * 1 w2: $baseline * 2 w3: $baseline * 3 w4: $baseline * 4 w5: $baseline * 5 w6: $baseline * 6 w7: $baseline * 7 w8: $baseline * 8 w9: $baseline * 9 w10: $baseline * 10 w11: $baseline * 11 w12: $baseline * 12 w-5: 5% w-10: 10% w-15: 15% w-20: 20% w-25: 25% w-30: 30% w-35: 35% w-40: 40% w-45: 45% w-50: 50% w-55: 55% w-60: 60% w-65: 65% w-70: 70% w-75: 75% w-80: 80% w-85: 85% w-90: 90% w-95: 95% w-100: 100% w-1-12: 100% / 12 w-2-12: 100% / 12 * 2 w-3-12: 100% / 12 * 3 w-4-12: 100% / 12 * 4 w-5-12: 100% / 12 * 5 w-6-12: 100% / 12 * 6 w-7-12: 100% / 12 * 7 w-8-12: 100% / 12 * 8 w-9-12: 100% / 12 * 9 w-10-12: 100% / 12 * 10 w-11-12: 100% / 12 * 11 w-12-12: 100% / 12 * 12 w-wire: 1px w-xthin: 2px w-thin: 3px w-xxxsmall: 5px w-xxsmall: 0.8rem w-xsmall: 1rem w-small: 1.6rem w-icon: 2.4rem w-medium: 7rem w-big: 16rem w-xbig: 22rem w-xxbig: 32rem w-xxxbig: 44rem w-super: 58rem w-xsuper: 72rem w-xxsuper: 90rem w-xxxsuper: 116rem wn: none w-au: auto w-10vw: 10vw w-20vw: 20vw w-30vw: 30vw w-40vw: 40vw w-50vw: 50vw w-60vw: 60vw w-70vw: 70vw w-80vw: 80vw w-90vw: 90vw w-100vw: 100vw max-width: class: maxw rule: - percentaged - discrete - special-sizes values: "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem n: none -au: auto mappings: maxw-5: 5% maxw-10: 10% maxw-15: 15% maxw-20: 20% maxw-25: 25% maxw-30: 30% maxw-35: 35% maxw-40: 40% maxw-45: 45% maxw-50: 50% maxw-55: 55% maxw-60: 60% maxw-65: 65% maxw-70: 70% maxw-75: 75% maxw-80: 80% maxw-85: 85% maxw-90: 90% maxw-95: 95% maxw-100: 100% maxw-wire: 1px maxw-xthin: 2px maxw-thin: 3px maxw-xxxsmall: 5px maxw-xxsmall: 0.8rem maxw-xsmall: 1rem maxw-small: 1.6rem maxw-icon: 2.4rem maxw-medium: 7rem maxw-big: 16rem maxw-xbig: 22rem maxw-xxbig: 32rem maxw-xxxbig: 44rem maxw-super: 58rem maxw-xsuper: 72rem maxw-xxsuper: 90rem maxw-xxxsuper: 116rem maxwn: none maxw-au: auto min-width: class: minw rule: - scaled - percentaged - discrete - special-sizes values: "0": 0 "1": $baseline * 1 "2": $baseline * 2 "3": $baseline * 3 "4": $baseline * 4 "5": $baseline * 5 "6": $baseline * 6 "7": $baseline * 7 "8": $baseline * 8 "9": $baseline * 9 "10": $baseline * 10 "11": $baseline * 11 "12": $baseline * 12 "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem n: none -au: auto mappings: minw0: 0 minw1: $baseline * 1 minw2: $baseline * 2 minw3: $baseline * 3 minw4: $baseline * 4 minw5: $baseline * 5 minw6: $baseline * 6 minw7: $baseline * 7 minw8: $baseline * 8 minw9: $baseline * 9 minw10: $baseline * 10 minw11: $baseline * 11 minw12: $baseline * 12 minw-5: 5% minw-10: 10% minw-15: 15% minw-20: 20% minw-25: 25% minw-30: 30% minw-35: 35% minw-40: 40% minw-45: 45% minw-50: 50% minw-55: 55% minw-60: 60% minw-65: 65% minw-70: 70% minw-75: 75% minw-80: 80% minw-85: 85% minw-90: 90% minw-95: 95% minw-100: 100% minw-wire: 1px minw-xthin: 2px minw-thin: 3px minw-xxxsmall: 5px minw-xxsmall: 0.8rem minw-xsmall: 1rem minw-small: 1.6rem minw-icon: 2.4rem minw-medium: 7rem minw-big: 16rem minw-xbig: 22rem minw-xxbig: 32rem minw-xxxbig: 44rem minw-super: 58rem minw-xsuper: 72rem minw-xxsuper: 90rem minw-xxxsuper: 116rem minwn: none minw-au: auto bottom: class: b rule: - scaled - negative-scaled - percentaged - discrete values: "0": 0 "1": $baseline * 1 "2": $baseline * 2 "3": $baseline * 3 "4": $baseline * 4 "5": $baseline * 5 "6": $baseline * 6 "7": $baseline * 7 "8": $baseline * 8 "9": $baseline * 9 "10": $baseline * 10 "11": $baseline * 11 "12": $baseline * 12 1x: -1rem 2x: -2rem 3x: -3rem 4x: -4rem 5x: -5rem 6x: -6rem 7x: -7rem 8x: -8rem 9x: -9rem 10x: -10rem "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem mappings: b0: 0 b1: $baseline * 1 b2: $baseline * 2 b3: $baseline * 3 b4: $baseline * 4 b5: $baseline * 5 b6: $baseline * 6 b7: $baseline * 7 b8: $baseline * 8 b9: $baseline * 9 b10: $baseline * 10 b11: $baseline * 11 b12: $baseline * 12 b1x: -1rem b2x: -2rem b3x: -3rem b4x: -4rem b5x: -5rem b6x: -6rem b7x: -7rem b8x: -8rem b9x: -9rem b10x: -10rem b-5: 5% b-10: 10% b-15: 15% b-20: 20% b-25: 25% b-30: 30% b-35: 35% b-40: 40% b-45: 45% b-50: 50% b-55: 55% b-60: 60% b-65: 65% b-70: 70% b-75: 75% b-80: 80% b-85: 85% b-90: 90% b-95: 95% b-100: 100% b-wire: 1px b-xthin: 2px b-thin: 3px b-xxxsmall: 5px b-xxsmall: 0.8rem b-xsmall: 1rem b-small: 1.6rem b-icon: 2.4rem b-medium: 7rem b-big: 16rem b-xbig: 22rem b-xxbig: 32rem b-xxxbig: 44rem b-super: 58rem b-xsuper: 72rem b-xxsuper: 90rem b-xxxsuper: 116rem left: class: l rule: - scaled - negative-scaled - percentaged - discrete values: "0": 0 "1": $baseline * 1 "2": $baseline * 2 "3": $baseline * 3 "4": $baseline * 4 "5": $baseline * 5 "6": $baseline * 6 "7": $baseline * 7 "8": $baseline * 8 "9": $baseline * 9 "10": $baseline * 10 "11": $baseline * 11 "12": $baseline * 12 1x: -1rem 2x: -2rem 3x: -3rem 4x: -4rem 5x: -5rem 6x: -6rem 7x: -7rem 8x: -8rem 9x: -9rem 10x: -10rem "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem mappings: l0: 0 l1: $baseline * 1 l2: $baseline * 2 l3: $baseline * 3 l4: $baseline * 4 l5: $baseline * 5 l6: $baseline * 6 l7: $baseline * 7 l8: $baseline * 8 l9: $baseline * 9 l10: $baseline * 10 l11: $baseline * 11 l12: $baseline * 12 l1x: -1rem l2x: -2rem l3x: -3rem l4x: -4rem l5x: -5rem l6x: -6rem l7x: -7rem l8x: -8rem l9x: -9rem l10x: -10rem l-5: 5% l-10: 10% l-15: 15% l-20: 20% l-25: 25% l-30: 30% l-35: 35% l-40: 40% l-45: 45% l-50: 50% l-55: 55% l-60: 60% l-65: 65% l-70: 70% l-75: 75% l-80: 80% l-85: 85% l-90: 90% l-95: 95% l-100: 100% l-wire: 1px l-xthin: 2px l-thin: 3px l-xxxsmall: 5px l-xxsmall: 0.8rem l-xsmall: 1rem l-small: 1.6rem l-icon: 2.4rem l-medium: 7rem l-big: 16rem l-xbig: 22rem l-xxbig: 32rem l-xxxbig: 44rem l-super: 58rem l-xsuper: 72rem l-xxsuper: 90rem l-xxxsuper: 116rem top: class: t rule: - scaled - negative-scaled - percentaged - discrete values: "0": 0 "1": $baseline * 1 "2": $baseline * 2 "3": $baseline * 3 "4": $baseline * 4 "5": $baseline * 5 "6": $baseline * 6 "7": $baseline * 7 "8": $baseline * 8 "9": $baseline * 9 "10": $baseline * 10 "11": $baseline * 11 "12": $baseline * 12 1x: -1rem 2x: -2rem 3x: -3rem 4x: -4rem 5x: -5rem 6x: -6rem 7x: -7rem 8x: -8rem 9x: -9rem 10x: -10rem "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem mappings: t0: 0 t1: $baseline * 1 t2: $baseline * 2 t3: $baseline * 3 t4: $baseline * 4 t5: $baseline * 5 t6: $baseline * 6 t7: $baseline * 7 t8: $baseline * 8 t9: $baseline * 9 t10: $baseline * 10 t11: $baseline * 11 t12: $baseline * 12 t1x: -1rem t2x: -2rem t3x: -3rem t4x: -4rem t5x: -5rem t6x: -6rem t7x: -7rem t8x: -8rem t9x: -9rem t10x: -10rem t-5: 5% t-10: 10% t-15: 15% t-20: 20% t-25: 25% t-30: 30% t-35: 35% t-40: 40% t-45: 45% t-50: 50% t-55: 55% t-60: 60% t-65: 65% t-70: 70% t-75: 75% t-80: 80% t-85: 85% t-90: 90% t-95: 95% t-100: 100% t-wire: 1px t-xthin: 2px t-thin: 3px t-xxxsmall: 5px t-xxsmall: 0.8rem t-xsmall: 1rem t-small: 1.6rem t-icon: 2.4rem t-medium: 7rem t-big: 16rem t-xbig: 22rem t-xxbig: 32rem t-xxxbig: 44rem t-super: 58rem t-xsuper: 72rem t-xxsuper: 90rem t-xxxsuper: 116rem right: class: r rule: - scaled - negative-scaled - percentaged - discrete values: "0": 0 "1": $baseline * 1 "2": $baseline * 2 "3": $baseline * 3 "4": $baseline * 4 "5": $baseline * 5 "6": $baseline * 6 "7": $baseline * 7 "8": $baseline * 8 "9": $baseline * 9 "10": $baseline * 10 "11": $baseline * 11 "12": $baseline * 12 1x: -1rem 2x: -2rem 3x: -3rem 4x: -4rem 5x: -5rem 6x: -6rem 7x: -7rem 8x: -8rem 9x: -9rem 10x: -10rem "-5": 5% "-10": 10% "-15": 15% "-20": 20% "-25": 25% "-30": 30% "-35": 35% "-40": 40% "-45": 45% "-50": 50% "-55": 55% "-60": 60% "-65": 65% "-70": 70% "-75": 75% "-80": 80% "-85": 85% "-90": 90% "-95": 95% "-100": 100% -wire: 1px -xthin: 2px -thin: 3px -xxxsmall: 5px -xxsmall: 0.8rem -xsmall: 1rem -small: 1.6rem -icon: 2.4rem -medium: 7rem -big: 16rem -xbig: 22rem -xxbig: 32rem -xxxbig: 44rem -super: 58rem -xsuper: 72rem -xxsuper: 90rem -xxxsuper: 116rem mappings: r0: 0 r1: $baseline * 1 r2: $baseline * 2 r3: $baseline * 3 r4: $baseline * 4 r5: $baseline * 5 r6: $baseline * 6 r7: $baseline * 7 r8: $baseline * 8 r9: $baseline * 9 r10: $baseline * 10 r11: $baseline * 11 r12: $baseline * 12 r1x: -1rem r2x: -2rem r3x: -3rem r4x: -4rem r5x: -5rem r6x: -6rem r7x: -7rem r8x: -8rem r9x: -9rem r10x: -10rem r-5: 5% r-10: 10% r-15: 15% r-20: 20% r-25: 25% r-30: 30% r-35: 35% r-40: 40% r-45: 45% r-50: 50% r-55: 55% r-60: 60% r-65: 65% r-70: 70% r-75: 75% r-80: 80% r-85: 85% r-90: 90% r-95: 95% r-100: 100% r-wire: 1px r-xthin: 2px r-th