Last active
May 16, 2018 17:19
-
-
Save kristoferjoseph/c27f3d4affb402984cb233c993b7e286 to your computer and use it in GitHub Desktop.
Example styleguide css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "base": 18, | |
| "scale": { | |
| "ratio": "perfectFourth", | |
| "steps": 8 | |
| }, | |
| "colors": { | |
| "primary": [ | |
| { | |
| "label": "transparent", | |
| "value": "transparent" | |
| }, | |
| { | |
| "label": "white", | |
| "value": "#ffffff" | |
| }, | |
| { | |
| "label": "white-1", | |
| "value": "#ebebeb" | |
| }, | |
| { | |
| "label": "cerulean", | |
| "value": "#0077cc" | |
| }, | |
| { | |
| "label": "greyish", | |
| "value": "#a8a8a8" | |
| }, | |
| { | |
| "label": "brownish-grey", | |
| "value": "#666666" | |
| }, | |
| { | |
| "label": "greyish-brown", | |
| "value": "#444444" | |
| }, | |
| { | |
| "label": "pink-red", | |
| "value": "#eb0052" | |
| }, | |
| { | |
| "label": "charcoal-grey", | |
| "value": "#434346" | |
| }, | |
| { | |
| "label": "blackish", | |
| "value": "#333333" | |
| }, | |
| { | |
| "label": "vibrant-green", | |
| "value": "#0cd000" | |
| }, | |
| { | |
| "label": "watermelon", | |
| "value": "#ff455a" | |
| }, | |
| { | |
| "label": "well-gray", | |
| "value": "#f7f7f9" | |
| }, | |
| { | |
| "label": "pale-grey", | |
| "value": "#ededf0" | |
| }, | |
| { | |
| "label": "pale-grey-2", | |
| "value": "#f5f5f7" | |
| }, | |
| { | |
| "label": "pale-grey-3", | |
| "value": "#fafafc" | |
| }, | |
| { | |
| "label": "white-3", | |
| "value": "#f0f0f0" | |
| }, | |
| { | |
| "label": "butterscotch", | |
| "value": "#ffc245" | |
| }, | |
| { | |
| "label": "silver-two", | |
| "value": "#dedee0" | |
| }, | |
| { | |
| "label": "silver", | |
| "value": "#c5c5c7" | |
| }, | |
| { | |
| "label": "cool-grey", | |
| "value": "#97979c" | |
| }, | |
| { | |
| "label": "light-pink", | |
| "value": "#ffe8f0" | |
| } | |
| ], | |
| "hover": [ | |
| { | |
| "label": "azure", | |
| "value": "#0094ff" | |
| }, | |
| { | |
| "label": "pink-red-2", | |
| "value": "#ff1164" | |
| }, | |
| { | |
| "label": "white-3", | |
| "value": "#f0f0f0" | |
| } | |
| ], | |
| "active": [ | |
| { | |
| "label": "ocean-blue", | |
| "value": "#0057b8" | |
| }, | |
| { | |
| "label": "white-2", | |
| "value": "#d8d8d8" | |
| }, | |
| { | |
| "label": "ruby", | |
| "value": "#d6004b" | |
| }, | |
| { | |
| "label": "pale-grey", | |
| "value": "#ededf0" | |
| } | |
| ], | |
| "disabled": [ | |
| { | |
| "label": "white-5", | |
| "value": "#eaeaea" | |
| }, | |
| { | |
| "label": "greyish", | |
| "value": "#a8a8a8" | |
| } | |
| ] | |
| }, | |
| "queries": { | |
| "lg": "48em" | |
| }, | |
| "radii": [ | |
| 4, | |
| 6, | |
| 15 | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ----- THEME ----- */ | |
| /* VARIABLES */ | |
| :root { | |
| --p0:transparent;/* transparent */ | |
| --p1:#ffffff;/* white */ | |
| --p2:#ebebeb;/* white-1 */ | |
| --p3:#0077cc;/* cerulean */ | |
| --p4:#a8a8a8;/* greyish */ | |
| --p5:#666666;/* brownish-grey */ | |
| --p6:#444444;/* greyish-brown */ | |
| --p7:#eb0052;/* pink-red */ | |
| --p8:#434346;/* charcoal-grey */ | |
| --p9:#333333;/* blackish */ | |
| --p10:#0cd000;/* vibrant-green */ | |
| --p11:#ff455a;/* watermelon */ | |
| --p12:#f7f7f9;/* well-gray */ | |
| --p13:#ededf0;/* pale-grey */ | |
| --p14:#f5f5f7;/* pale-grey-2 */ | |
| --p15:#fafafc;/* pale-grey-3 */ | |
| --p16:#f0f0f0;/* white-3 */ | |
| --p17:#ffc245;/* butterscotch */ | |
| --p18:#dedee0;/* silver-two */ | |
| --p19:#c5c5c7;/* silver */ | |
| --p20:#97979c;/* cool-grey */ | |
| --p21:#ffe8f0;/* light-pink */ | |
| --h0:#0094ff;/* azure */ | |
| --h1:#ff1164;/* pink-red-2 */ | |
| --h2:#f0f0f0;/* white-3 */ | |
| --a0:#0057b8;/* ocean-blue */ | |
| --a1:#d8d8d8;/* white-2 */ | |
| --a2:#d6004b;/* ruby */ | |
| --a3:#ededf0;/* pale-grey */ | |
| --d0:#eaeaea;/* white-5 */ | |
| --d1:#a8a8a8;/* greyish */ | |
| } | |
| /* RESET */ | |
| *, | |
| *:before, | |
| *:after { | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| box-sizing: border-box; | |
| } | |
| *:focus {outline: none;} | |
| a {text-decoration: none;} | |
| li {list-style: none;} | |
| button {user-select: none;} | |
| img {max-width: 100%;} | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| vertical-align: top; | |
| } | |
| select, | |
| textarea, | |
| button, | |
| input {font-family: inherit;} | |
| *:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--p0) inset} | |
| ::-webkit-scrollbar { | |
| -webkit-appearance: none; | |
| width: 0; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| border-radius: 4px; | |
| background: var(--p3); | |
| opacity: 0; | |
| } | |
| /* TYPEFACE */ | |
| html {font-size: 18px;} | |
| body { | |
| font-weight: normal; | |
| line-height: 1.333; | |
| text-rendering: geometricPrecision; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* COLOR */ | |
| .c-p0{color:var(--p0);}/* transparent */ | |
| .c-p1{color:var(--p1);}/* white */ | |
| .c-p2{color:var(--p2);}/* white-1 */ | |
| .c-p3{color:var(--p3);}/* cerulean */ | |
| .c-p4{color:var(--p4);}/* greyish */ | |
| .c-p5{color:var(--p5);}/* brownish-grey */ | |
| .c-p6{color:var(--p6);}/* greyish-brown */ | |
| .c-p7{color:var(--p7);}/* pink-red */ | |
| .c-p8{color:var(--p8);}/* charcoal-grey */ | |
| .c-p9{color:var(--p9);}/* blackish */ | |
| .c-p10{color:var(--p10);}/* vibrant-green */ | |
| .c-p11{color:var(--p11);}/* watermelon */ | |
| .c-p12{color:var(--p12);}/* well-gray */ | |
| .c-p13{color:var(--p13);}/* pale-grey */ | |
| .c-p14{color:var(--p14);}/* pale-grey-2 */ | |
| .c-p15{color:var(--p15);}/* pale-grey-3 */ | |
| .c-p16{color:var(--p16);}/* white-3 */ | |
| .c-p17{color:var(--p17);}/* butterscotch */ | |
| .c-p18{color:var(--p18);}/* silver-two */ | |
| .c-p19{color:var(--p19);}/* silver */ | |
| .c-p20{color:var(--p20);}/* cool-grey */ | |
| .c-p21{color:var(--p21);}/* light-pink */ | |
| .c-h0:hover{color:var(--h0);}/* azure */ | |
| .c-h1:hover{color:var(--h1);}/* pink-red-2 */ | |
| .c-h2:hover{color:var(--h2);}/* white-3 */ | |
| .c-a0:active{color:var(--a0);}/* ocean-blue */ | |
| .c-a0.active{color:var(--a0);}/* ocean-blue */ | |
| .c-a1:active{color:var(--a1);}/* white-2 */ | |
| .c-a1.active{color:var(--a1);}/* white-2 */ | |
| .c-a2:active{color:var(--a2);}/* ruby */ | |
| .c-a2.active{color:var(--a2);}/* ruby */ | |
| .c-a3:active{color:var(--a3);}/* pale-grey */ | |
| .c-a3.active{color:var(--a3);}/* pale-grey */ | |
| .c-d0:disabled{color:var(--d0);}/* white-5 */ | |
| .c-d1:disabled{color:var(--d1);}/* greyish */ | |
| /* BACKGROUND */ | |
| .bg-none{background-color:none;} | |
| .bg-p0{background-color:var(--p0);}/* transparent */ | |
| .bg-p1{background-color:var(--p1);}/* white */ | |
| .bg-p2{background-color:var(--p2);}/* white-1 */ | |
| .bg-p3{background-color:var(--p3);}/* cerulean */ | |
| .bg-p4{background-color:var(--p4);}/* greyish */ | |
| .bg-p5{background-color:var(--p5);}/* brownish-grey */ | |
| .bg-p6{background-color:var(--p6);}/* greyish-brown */ | |
| .bg-p7{background-color:var(--p7);}/* pink-red */ | |
| .bg-p8{background-color:var(--p8);}/* charcoal-grey */ | |
| .bg-p9{background-color:var(--p9);}/* blackish */ | |
| .bg-p10{background-color:var(--p10);}/* vibrant-green */ | |
| .bg-p11{background-color:var(--p11);}/* watermelon */ | |
| .bg-p12{background-color:var(--p12);}/* well-gray */ | |
| .bg-p13{background-color:var(--p13);}/* pale-grey */ | |
| .bg-p14{background-color:var(--p14);}/* pale-grey-2 */ | |
| .bg-p15{background-color:var(--p15);}/* pale-grey-3 */ | |
| .bg-p16{background-color:var(--p16);}/* white-3 */ | |
| .bg-p17{background-color:var(--p17);}/* butterscotch */ | |
| .bg-p18{background-color:var(--p18);}/* silver-two */ | |
| .bg-p19{background-color:var(--p19);}/* silver */ | |
| .bg-p20{background-color:var(--p20);}/* cool-grey */ | |
| .bg-p21{background-color:var(--p21);}/* light-pink */ | |
| .bg-h0:hover{background-color:var(--h0);}/* azure */ | |
| .bg-h1:hover{background-color:var(--h1);}/* pink-red-2 */ | |
| .bg-h2:hover{background-color:var(--h2);}/* white-3 */ | |
| .bg-a0:active{background-color:var(--a0);}/* ocean-blue */ | |
| .bg-a0.active{background-color:var(--a0);}/* ocean-blue */ | |
| .bg-a1:active{background-color:var(--a1);}/* white-2 */ | |
| .bg-a1.active{background-color:var(--a1);}/* white-2 */ | |
| .bg-a2:active{background-color:var(--a2);}/* ruby */ | |
| .bg-a2.active{background-color:var(--a2);}/* ruby */ | |
| .bg-a3:active{background-color:var(--a3);}/* pale-grey */ | |
| .bg-a3.active{background-color:var(--a3);}/* pale-grey */ | |
| .bg-d0:disabled{background-color:var(--d0);}/* white-5 */ | |
| .bg-d1:disabled{background-color:var(--d1);}/* greyish */ | |
| /* BORDER */ | |
| .b-none{border:none;} | |
| .bt-none{border-top:none;} | |
| .br-none{border-right:none;} | |
| .bb-none{border-bottom:none;} | |
| .bl-none{border-left:none;} | |
| .b{border: 1px solid;} | |
| .bt{border-top: 1px solid;} | |
| .br{border-right: 1px solid;} | |
| .bb{border-bottom: 1px solid;} | |
| .bl{border-left: 1px solid;} | |
| .b-p0{border-color:var(--p0);}/* transparent */ | |
| .b-p1{border-color:var(--p1);}/* white */ | |
| .b-p2{border-color:var(--p2);}/* white-1 */ | |
| .b-p3{border-color:var(--p3);}/* cerulean */ | |
| .b-p4{border-color:var(--p4);}/* greyish */ | |
| .b-p5{border-color:var(--p5);}/* brownish-grey */ | |
| .b-p6{border-color:var(--p6);}/* greyish-brown */ | |
| .b-p7{border-color:var(--p7);}/* pink-red */ | |
| .b-p8{border-color:var(--p8);}/* charcoal-grey */ | |
| .b-p9{border-color:var(--p9);}/* blackish */ | |
| .b-p10{border-color:var(--p10);}/* vibrant-green */ | |
| .b-p11{border-color:var(--p11);}/* watermelon */ | |
| .b-p12{border-color:var(--p12);}/* well-gray */ | |
| .b-p13{border-color:var(--p13);}/* pale-grey */ | |
| .b-p14{border-color:var(--p14);}/* pale-grey-2 */ | |
| .b-p15{border-color:var(--p15);}/* pale-grey-3 */ | |
| .b-p16{border-color:var(--p16);}/* white-3 */ | |
| .b-p17{border-color:var(--p17);}/* butterscotch */ | |
| .b-p18{border-color:var(--p18);}/* silver-two */ | |
| .b-p19{border-color:var(--p19);}/* silver */ | |
| .b-p20{border-color:var(--p20);}/* cool-grey */ | |
| .b-p21{border-color:var(--p21);}/* light-pink */ | |
| .b-h0:hover{border-color:var(--h0);}/* azure */ | |
| .b-h1:hover{border-color:var(--h1);}/* pink-red-2 */ | |
| .b-h2:hover{border-color:var(--h2);}/* white-3 */ | |
| .b-a0:active{border-color:var(--a0);}/* ocean-blue */ | |
| .b-a0.active{border-color:var(--a0);}/* ocean-blue */ | |
| .b-a1:active{border-color:var(--a1);}/* white-2 */ | |
| .b-a1.active{border-color:var(--a1);}/* white-2 */ | |
| .b-a2:active{border-color:var(--a2);}/* ruby */ | |
| .b-a2.active{border-color:var(--a2);}/* ruby */ | |
| .b-a3:active{border-color:var(--a3);}/* pale-grey */ | |
| .b-a3.active{border-color:var(--a3);}/* pale-grey */ | |
| .b-d0:disabled{border-color:var(--d0);}/* white-5 */ | |
| .b-d1:disabled{border-color:var(--d1);}/* greyish */ | |
| /* RADIUS */ | |
| .br-100{border-radius:100%;} | |
| .br-tr0{border-top-right-radius:0;} | |
| .br-br0{border-bottom-right-radius:0;} | |
| .br-tl0{border-top-left-radius:0;} | |
| .br-bl0{border-bottom-left-radius:0;} | |
| .br0{border-radius:4px;} | |
| .br1{border-radius:6px;} | |
| .br2{border-radius:15px;} | |
| /* FILL */ | |
| .f-none{fill:none;} | |
| .f-p0{fill:var(--p0);}/* transparent */ | |
| .f-p1{fill:var(--p1);}/* white */ | |
| .f-p2{fill:var(--p2);}/* white-1 */ | |
| .f-p3{fill:var(--p3);}/* cerulean */ | |
| .f-p4{fill:var(--p4);}/* greyish */ | |
| .f-p5{fill:var(--p5);}/* brownish-grey */ | |
| .f-p6{fill:var(--p6);}/* greyish-brown */ | |
| .f-p7{fill:var(--p7);}/* pink-red */ | |
| .f-p8{fill:var(--p8);}/* charcoal-grey */ | |
| .f-p9{fill:var(--p9);}/* blackish */ | |
| .f-p10{fill:var(--p10);}/* vibrant-green */ | |
| .f-p11{fill:var(--p11);}/* watermelon */ | |
| .f-p12{fill:var(--p12);}/* well-gray */ | |
| .f-p13{fill:var(--p13);}/* pale-grey */ | |
| .f-p14{fill:var(--p14);}/* pale-grey-2 */ | |
| .f-p15{fill:var(--p15);}/* pale-grey-3 */ | |
| .f-p16{fill:var(--p16);}/* white-3 */ | |
| .f-p17{fill:var(--p17);}/* butterscotch */ | |
| .f-p18{fill:var(--p18);}/* silver-two */ | |
| .f-p19{fill:var(--p19);}/* silver */ | |
| .f-p20{fill:var(--p20);}/* cool-grey */ | |
| .f-p21{fill:var(--p21);}/* light-pink */ | |
| .f-h0:hover{fill:var(--h0);}/* azure */ | |
| .f-h1:hover{fill:var(--h1);}/* pink-red-2 */ | |
| .f-h2:hover{fill:var(--h2);}/* white-3 */ | |
| .f-a0:active{fill:var(--a0);}/* ocean-blue */ | |
| .f-a0.active{fill:var(--a0);}/* ocean-blue */ | |
| .f-a1:active{fill:var(--a1);}/* white-2 */ | |
| .f-a1.active{fill:var(--a1);}/* white-2 */ | |
| .f-a2:active{fill:var(--a2);}/* ruby */ | |
| .f-a2.active{fill:var(--a2);}/* ruby */ | |
| .f-a3:active{fill:var(--a3);}/* pale-grey */ | |
| .f-a3.active{fill:var(--a3);}/* pale-grey */ | |
| .f-d0:disabled{fill:var(--d0);}/* white-5 */ | |
| .f-d1:disabled{fill:var(--d1);}/* greyish */ | |
| /* STROKE */ | |
| .s-p0{stroke:var(--p0);}/* transparent */ | |
| .s-p1{stroke:var(--p1);}/* white */ | |
| .s-p2{stroke:var(--p2);}/* white-1 */ | |
| .s-p3{stroke:var(--p3);}/* cerulean */ | |
| .s-p4{stroke:var(--p4);}/* greyish */ | |
| .s-p5{stroke:var(--p5);}/* brownish-grey */ | |
| .s-p6{stroke:var(--p6);}/* greyish-brown */ | |
| .s-p7{stroke:var(--p7);}/* pink-red */ | |
| .s-p8{stroke:var(--p8);}/* charcoal-grey */ | |
| .s-p9{stroke:var(--p9);}/* blackish */ | |
| .s-p10{stroke:var(--p10);}/* vibrant-green */ | |
| .s-p11{stroke:var(--p11);}/* watermelon */ | |
| .s-p12{stroke:var(--p12);}/* well-gray */ | |
| .s-p13{stroke:var(--p13);}/* pale-grey */ | |
| .s-p14{stroke:var(--p14);}/* pale-grey-2 */ | |
| .s-p15{stroke:var(--p15);}/* pale-grey-3 */ | |
| .s-p16{stroke:var(--p16);}/* white-3 */ | |
| .s-p17{stroke:var(--p17);}/* butterscotch */ | |
| .s-p18{stroke:var(--p18);}/* silver-two */ | |
| .s-p19{stroke:var(--p19);}/* silver */ | |
| .s-p20{stroke:var(--p20);}/* cool-grey */ | |
| .s-p21{stroke:var(--p21);}/* light-pink */ | |
| .s-h0:hover{stroke:var(--h0);}/* azure */ | |
| .s-h1:hover{stroke:var(--h1);}/* pink-red-2 */ | |
| .s-h2:hover{stroke:var(--h2);}/* white-3 */ | |
| .s-a0:active{stroke:var(--a0);}/* ocean-blue */ | |
| .s-a0.active{stroke:var(--a0);}/* ocean-blue */ | |
| .s-a1:active{stroke:var(--a1);}/* white-2 */ | |
| .s-a1.active{stroke:var(--a1);}/* white-2 */ | |
| .s-a2:active{stroke:var(--a2);}/* ruby */ | |
| .s-a2.active{stroke:var(--a2);}/* ruby */ | |
| .s-a3:active{stroke:var(--a3);}/* pale-grey */ | |
| .s-a3.active{stroke:var(--a3);}/* pale-grey */ | |
| .s-d0:disabled{stroke:var(--d0);}/* white-5 */ | |
| .s-d1:disabled{stroke:var(--d1);}/* greyish */ | |
| /* UTILS */ | |
| .truncate { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| }/* CURSOR */ | |
| .cu-pointer{cursor: pointer;} | |
| .cu-grab{cursor: grab;} | |
| .cu-grabbing{cursor: grabbing;} | |
| /* SIZES */ | |
| .fs4{font-size:3.157rem;} | |
| .fs3{font-size:2.369rem;} | |
| .fs2{font-size:1.777rem;} | |
| .fs1{font-size:1.333rem;} | |
| .fs0{font-size:1rem;} | |
| .fs-1{font-size:0.75rem;} | |
| .fs-2{font-size:0.563rem;} | |
| .fs-3{font-size:0.422rem;} | |
| .fs-4{font-size:0.317rem;} | |
| /* LINE HEIGHT */ | |
| /* WEIGHTS */ | |
| .fw-light{font-weight:200;} | |
| .fw-book{font-weight:300;} | |
| .fw-normal{font-weight:400;} | |
| .fw-medium{font-weight:500;} | |
| .fw-bold{font-weight:700;} | |
| /* ALIGN */ | |
| .ta-i{text-align:inherit;} | |
| .ta-c{text-align:center;} | |
| .ta-l{text-align:left;} | |
| .ta-r{text-align:right;} | |
| /* DECORATION */ | |
| .td-n{text-decoration: none;} | |
| .td-u{text-decoration: underline;} | |
| .td-lt{text-decoration: line-through;} | |
| /* ----- LAYOUT ----- */ | |
| /* POSITION */ | |
| .p-static{position:static;} | |
| .p-absolute{position:absolute;} | |
| .p-relative{position:relative;} | |
| .p-fixed{position:fixed;} | |
| /* DISPLAY */ | |
| .d-none{display:none;} | |
| .d-block{display:block;} | |
| .d-inline-block{display:block;} | |
| .d-flex{display:flex;} | |
| .d-inline-flex{display:inline-flex;} | |
| /* DIMENSIONS */ | |
| .w-100{width:100%;} | |
| .h-100{height:100%;} | |
| .vw-100{width:100vw;} | |
| .vh-100{height:100vh;} | |
| /* FLEX */ | |
| .fd-r{flex-direction: row;} | |
| .fd-rr{flex-direction: row-reverse;} | |
| .fd-c{flex-direction: column;} | |
| .fd-cr{flex-direction: column-reverse;} | |
| .fd-i{flex-direction: inherit;} | |
| .ai-s{align-items:flex-start;} | |
| .ai-e{align-items:flex-end;} | |
| .ai-c{align-items:center;} | |
| .jc-s{justify-content: flex-start;} | |
| .jc-e{justify-content: flex-end;} | |
| .jc-a{justify-content:space-around;} | |
| .jc-b{justify-content:space-between;} | |
| .jc-c{justify-content:center;} | |
| .fg-0{flex-grow:0;} | |
| .fg-1{flex-grow:1;} | |
| /* MARGIN */ | |
| .m-none{margin:none;} | |
| .mt-none{margin-top:none;} | |
| .mr-none{margin-right:none;} | |
| .mb-none{margin-bottom:none;} | |
| .ml-none{margin-left:none;} | |
| .m-auto{ | |
| margin-right:auto; | |
| margin-left:auto; | |
| } | |
| .mr-auto{margin-right:auto;} | |
| .ml-auto{margin-left:auto;} | |
| .m4{margin:3.157rem;} | |
| .mt4{margin-top:3.157rem;} | |
| .mr4{margin-right:3.157rem;} | |
| .mb4{margin-bottom:3.157rem;} | |
| .ml4{margin-left:3.157rem;} | |
| .m3{margin:2.369rem;} | |
| .mt3{margin-top:2.369rem;} | |
| .mr3{margin-right:2.369rem;} | |
| .mb3{margin-bottom:2.369rem;} | |
| .ml3{margin-left:2.369rem;} | |
| .m2{margin:1.777rem;} | |
| .mt2{margin-top:1.777rem;} | |
| .mr2{margin-right:1.777rem;} | |
| .mb2{margin-bottom:1.777rem;} | |
| .ml2{margin-left:1.777rem;} | |
| .m1{margin:1.333rem;} | |
| .mt1{margin-top:1.333rem;} | |
| .mr1{margin-right:1.333rem;} | |
| .mb1{margin-bottom:1.333rem;} | |
| .ml1{margin-left:1.333rem;} | |
| .m0{margin:1rem;} | |
| .mt0{margin-top:1rem;} | |
| .mr0{margin-right:1rem;} | |
| .mb0{margin-bottom:1rem;} | |
| .ml0{margin-left:1rem;} | |
| .m-1{margin:0.75rem;} | |
| .mt-1{margin-top:0.75rem;} | |
| .mr-1{margin-right:0.75rem;} | |
| .mb-1{margin-bottom:0.75rem;} | |
| .ml-1{margin-left:0.75rem;} | |
| .m-2{margin:0.563rem;} | |
| .mt-2{margin-top:0.563rem;} | |
| .mr-2{margin-right:0.563rem;} | |
| .mb-2{margin-bottom:0.563rem;} | |
| .ml-2{margin-left:0.563rem;} | |
| .m-3{margin:0.422rem;} | |
| .mt-3{margin-top:0.422rem;} | |
| .mr-3{margin-right:0.422rem;} | |
| .mb-3{margin-bottom:0.422rem;} | |
| .ml-3{margin-left:0.422rem;} | |
| .m-4{margin:0.317rem;} | |
| .mt-4{margin-top:0.317rem;} | |
| .mr-4{margin-right:0.317rem;} | |
| .mb-4{margin-bottom:0.317rem;} | |
| .ml-4{margin-left:0.317rem;} | |
| /* PADDING */ | |
| .p-none{padding:none;} | |
| .pt-none{padding-top:none;} | |
| .pr-none{padding-right:none;} | |
| .pb-none{padding-bottom:none;} | |
| .pl-none{padding-left:none;} | |
| .p4{padding:3.157rem;} | |
| .pt4{padding-top:3.157rem;} | |
| .pr4{padding-right:3.157rem;} | |
| .pb4{padding-bottom:3.157rem;} | |
| .pl4{padding-left:3.157rem;} | |
| .p3{padding:2.369rem;} | |
| .pt3{padding-top:2.369rem;} | |
| .pr3{padding-right:2.369rem;} | |
| .pb3{padding-bottom:2.369rem;} | |
| .pl3{padding-left:2.369rem;} | |
| .p2{padding:1.777rem;} | |
| .pt2{padding-top:1.777rem;} | |
| .pr2{padding-right:1.777rem;} | |
| .pb2{padding-bottom:1.777rem;} | |
| .pl2{padding-left:1.777rem;} | |
| .p1{padding:1.333rem;} | |
| .pt1{padding-top:1.333rem;} | |
| .pr1{padding-right:1.333rem;} | |
| .pb1{padding-bottom:1.333rem;} | |
| .pl1{padding-left:1.333rem;} | |
| .p0{padding:1rem;} | |
| .pt0{padding-top:1rem;} | |
| .pr0{padding-right:1rem;} | |
| .pb0{padding-bottom:1rem;} | |
| .pl0{padding-left:1rem;} | |
| .p-1{padding:0.75rem;} | |
| .pt-1{padding-top:0.75rem;} | |
| .pr-1{padding-right:0.75rem;} | |
| .pb-1{padding-bottom:0.75rem;} | |
| .pl-1{padding-left:0.75rem;} | |
| .p-2{padding:0.563rem;} | |
| .pt-2{padding-top:0.563rem;} | |
| .pr-2{padding-right:0.563rem;} | |
| .pb-2{padding-bottom:0.563rem;} | |
| .pl-2{padding-left:0.563rem;} | |
| .p-3{padding:0.422rem;} | |
| .pt-3{padding-top:0.422rem;} | |
| .pr-3{padding-right:0.422rem;} | |
| .pb-3{padding-bottom:0.422rem;} | |
| .pl-3{padding-left:0.422rem;} | |
| .p-4{padding:0.317rem;} | |
| .pt-4{padding-top:0.317rem;} | |
| .pr-4{padding-right:0.317rem;} | |
| .pb-4{padding-bottom:0.317rem;} | |
| .pl-4{padding-left:0.317rem;} | |
| /* OVERFLOW */ | |
| .o-scroll{overflow:scroll;-webkit-overflow-scrolling: touch;} | |
| .o-hidden{overflow:hidden;} | |
| .o-scroll-x{overflow-x:scroll;-webkit-overflow-scrolling: touch;} | |
| .o-hidden-x{overflow-x:hidden;} | |
| .o-scroll-y{overflow-y:scroll;-webkit-overflow-scrolling: touch;} | |
| .o-hidden-y{overflow-y:hidden;} | |
| /* VISIBILITY */ | |
| .v-hidden{visibility:hidden;} | |
| .v-visible{visibility:visible;} | |
| @media only screen and (min-width:48em) { | |
| /* SIZES */ | |
| .fs4-lg{font-size:3.157rem;} | |
| .fs3-lg{font-size:2.369rem;} | |
| .fs2-lg{font-size:1.777rem;} | |
| .fs1-lg{font-size:1.333rem;} | |
| .fs0-lg{font-size:1rem;} | |
| .fs-1-lg{font-size:0.75rem;} | |
| .fs-2-lg{font-size:0.563rem;} | |
| .fs-3-lg{font-size:0.422rem;} | |
| .fs-4-lg{font-size:0.317rem;} | |
| /* LINE HEIGHT */ | |
| /* WEIGHTS */ | |
| .fw-light-lg{font-weight:200;} | |
| .fw-book-lg{font-weight:300;} | |
| .fw-normal-lg{font-weight:400;} | |
| .fw-medium-lg{font-weight:500;} | |
| .fw-bold-lg{font-weight:700;} | |
| /* ALIGN */ | |
| .ta-i-lg{text-align:inherit;} | |
| .ta-c-lg{text-align:center;} | |
| .ta-l-lg{text-align:left;} | |
| .ta-r-lg{text-align:right;} | |
| /* DECORATION */ | |
| .td-n{text-decoration: none;} | |
| .td-u{text-decoration: underline;} | |
| .td-lt{text-decoration: line-through;} | |
| /* ----- LAYOUT ----- */ | |
| /* POSITION */ | |
| .p-static-lg{position:static;} | |
| .p-absolute-lg{position:absolute;} | |
| .p-relative-lg{position:relative;} | |
| .p-fixed-lg{position:fixed;} | |
| /* DISPLAY */ | |
| .d-none-lg{display:none;} | |
| .d-block-lg{display:block;} | |
| .d-inline-block-lg{display:block;} | |
| .d-flex-lg{display:flex;} | |
| .d-inline-flex-lg{display:inline-flex;} | |
| /* DIMENSIONS */ | |
| .w-100-lg{width:100%;} | |
| .h-100-lg{height:100%;} | |
| .vw-100-lg{width:100vw;} | |
| .vh-100-lg{height:100vh;} | |
| /* FLEX */ | |
| .fd-r-lg{flex-direction: row;} | |
| .fd-rr-lg{flex-direction: row-reverse;} | |
| .fd-c-lg{flex-direction: column;} | |
| .fd-cr-lg{flex-direction: column-reverse;} | |
| .fd-i-lg{flex-direction: inherit;} | |
| .ai-s-lg{align-items:flex-start;} | |
| .ai-e-lg{align-items:flex-end;} | |
| .ai-c-lg{align-items:center;} | |
| .jc-s-lg{justify-content: flex-start;} | |
| .jc-e-lg{justify-content: flex-end;} | |
| .jc-a-lg{justify-content:space-around;} | |
| .jc-b-lg{justify-content:space-between;} | |
| .jc-c-lg{justify-content:center;} | |
| .fg-0-lg{flex-grow:0;} | |
| .fg-1-lg{flex-grow:1;} | |
| /* MARGIN */ | |
| .m-none-lg{margin:none;} | |
| .mt-none-lg{margin-top:none;} | |
| .mr-none-lg{margin-right:none;} | |
| .mb-none-lg{margin-bottom:none;} | |
| .ml-none-lg{margin-left:none;} | |
| .m-auto-lg{ | |
| margin-right:auto; | |
| margin-left:auto; | |
| } | |
| .mr-auto-lg{margin-right:auto;} | |
| .ml-auto-lg{margin-left:auto;} | |
| .m4-lg{margin:3.157rem;} | |
| .mt4-lg{margin-top:3.157rem;} | |
| .mr4-lg{margin-right:3.157rem;} | |
| .mb4-lg{margin-bottom:3.157rem;} | |
| .ml4-lg{margin-left:3.157rem;} | |
| .m3-lg{margin:2.369rem;} | |
| .mt3-lg{margin-top:2.369rem;} | |
| .mr3-lg{margin-right:2.369rem;} | |
| .mb3-lg{margin-bottom:2.369rem;} | |
| .ml3-lg{margin-left:2.369rem;} | |
| .m2-lg{margin:1.777rem;} | |
| .mt2-lg{margin-top:1.777rem;} | |
| .mr2-lg{margin-right:1.777rem;} | |
| .mb2-lg{margin-bottom:1.777rem;} | |
| .ml2-lg{margin-left:1.777rem;} | |
| .m1-lg{margin:1.333rem;} | |
| .mt1-lg{margin-top:1.333rem;} | |
| .mr1-lg{margin-right:1.333rem;} | |
| .mb1-lg{margin-bottom:1.333rem;} | |
| .ml1-lg{margin-left:1.333rem;} | |
| .m0-lg{margin:1rem;} | |
| .mt0-lg{margin-top:1rem;} | |
| .mr0-lg{margin-right:1rem;} | |
| .mb0-lg{margin-bottom:1rem;} | |
| .ml0-lg{margin-left:1rem;} | |
| .m-1-lg{margin:0.75rem;} | |
| .mt-1-lg{margin-top:0.75rem;} | |
| .mr-1-lg{margin-right:0.75rem;} | |
| .mb-1-lg{margin-bottom:0.75rem;} | |
| .ml-1-lg{margin-left:0.75rem;} | |
| .m-2-lg{margin:0.563rem;} | |
| .mt-2-lg{margin-top:0.563rem;} | |
| .mr-2-lg{margin-right:0.563rem;} | |
| .mb-2-lg{margin-bottom:0.563rem;} | |
| .ml-2-lg{margin-left:0.563rem;} | |
| .m-3-lg{margin:0.422rem;} | |
| .mt-3-lg{margin-top:0.422rem;} | |
| .mr-3-lg{margin-right:0.422rem;} | |
| .mb-3-lg{margin-bottom:0.422rem;} | |
| .ml-3-lg{margin-left:0.422rem;} | |
| .m-4-lg{margin:0.317rem;} | |
| .mt-4-lg{margin-top:0.317rem;} | |
| .mr-4-lg{margin-right:0.317rem;} | |
| .mb-4-lg{margin-bottom:0.317rem;} | |
| .ml-4-lg{margin-left:0.317rem;} | |
| /* PADDING */ | |
| .p-none-lg{padding:none;} | |
| .pt-none-lg{padding-top:none;} | |
| .pr-none-lg{padding-right:none;} | |
| .pb-none-lg{padding-bottom:none;} | |
| .pl-none-lg{padding-left:none;} | |
| .p4-lg{padding:3.157rem;} | |
| .pt4-lg{padding-top:3.157rem;} | |
| .pr4-lg{padding-right:3.157rem;} | |
| .pb4-lg{padding-bottom:3.157rem;} | |
| .pl4-lg{padding-left:3.157rem;} | |
| .p3-lg{padding:2.369rem;} | |
| .pt3-lg{padding-top:2.369rem;} | |
| .pr3-lg{padding-right:2.369rem;} | |
| .pb3-lg{padding-bottom:2.369rem;} | |
| .pl3-lg{padding-left:2.369rem;} | |
| .p2-lg{padding:1.777rem;} | |
| .pt2-lg{padding-top:1.777rem;} | |
| .pr2-lg{padding-right:1.777rem;} | |
| .pb2-lg{padding-bottom:1.777rem;} | |
| .pl2-lg{padding-left:1.777rem;} | |
| .p1-lg{padding:1.333rem;} | |
| .pt1-lg{padding-top:1.333rem;} | |
| .pr1-lg{padding-right:1.333rem;} | |
| .pb1-lg{padding-bottom:1.333rem;} | |
| .pl1-lg{padding-left:1.333rem;} | |
| .p0-lg{padding:1rem;} | |
| .pt0-lg{padding-top:1rem;} | |
| .pr0-lg{padding-right:1rem;} | |
| .pb0-lg{padding-bottom:1rem;} | |
| .pl0-lg{padding-left:1rem;} | |
| .p-1-lg{padding:0.75rem;} | |
| .pt-1-lg{padding-top:0.75rem;} | |
| .pr-1-lg{padding-right:0.75rem;} | |
| .pb-1-lg{padding-bottom:0.75rem;} | |
| .pl-1-lg{padding-left:0.75rem;} | |
| .p-2-lg{padding:0.563rem;} | |
| .pt-2-lg{padding-top:0.563rem;} | |
| .pr-2-lg{padding-right:0.563rem;} | |
| .pb-2-lg{padding-bottom:0.563rem;} | |
| .pl-2-lg{padding-left:0.563rem;} | |
| .p-3-lg{padding:0.422rem;} | |
| .pt-3-lg{padding-top:0.422rem;} | |
| .pr-3-lg{padding-right:0.422rem;} | |
| .pb-3-lg{padding-bottom:0.422rem;} | |
| .pl-3-lg{padding-left:0.422rem;} | |
| .p-4-lg{padding:0.317rem;} | |
| .pt-4-lg{padding-top:0.317rem;} | |
| .pr-4-lg{padding-right:0.317rem;} | |
| .pb-4-lg{padding-bottom:0.317rem;} | |
| .pl-4-lg{padding-left:0.317rem;} | |
| /* OVERFLOW */ | |
| .o-scroll-lg{overflow:scroll;-webkit-overflow-scrolling: touch;} | |
| .o-hidden-lg{overflow:hidden;} | |
| .o-scroll-x-lg{overflow-x:scroll;-webkit-overflow-scrolling: touch;} | |
| .o-hidden-x-lg{overflow-x:hidden;} | |
| .o-scroll-y-lg{overflow-y:scroll;-webkit-overflow-scrolling: touch;} | |
| .o-hidden-y-lg{overflow-y:hidden;} | |
| /* VISIBILITY */ | |
| .v-hidden-lg{visibility:hidden;} | |
| .v-visible-lg{visibility:visible;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment