├── README.md ├── src ├── _layout.scss ├── _variables.scss ├── _cards.scss ├── index.scss ├── _list-sections.scss ├── _buttons.scss ├── _typography.scss ├── _inputs.scss ├── _selects.scss ├── _checkbox.scss ├── _radio.scss ├── _utilities.scss ├── _demo.scss ├── index.css.map └── index.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # unit. 2 | 8px grid based design system 3 | -------------------------------------------------------------------------------- /src/_layout.scss: -------------------------------------------------------------------------------- 1 | .layout { 2 | display: flex; 3 | } 4 | 5 | .col { 6 | flex: auto; 7 | } -------------------------------------------------------------------------------- /src/_variables.scss: -------------------------------------------------------------------------------- 1 | $u: 8px; 2 | 3 | $orange: #FF3A00; 4 | $orange-light: transparentize($orange, .5); 5 | $orange-lighter: transparentize($orange, .8); -------------------------------------------------------------------------------- /src/_cards.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | box-shadow: inset 0 0 0 1px $orange; 3 | } 4 | 5 | .card-section { 6 | padding: 2*$u 3*$u; 7 | 8 | &:not(:last-of-type) { 9 | box-shadow: inset 0 -1px $orange; 10 | } 11 | } -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'demo'; 3 | @import 'layout'; 4 | @import 'inputs'; 5 | @import 'selects'; 6 | @import 'typography'; 7 | @import 'buttons'; 8 | @import 'checkbox'; 9 | @import 'radio'; 10 | @import 'cards'; 11 | @import 'list-sections'; 12 | @import 'utilities'; -------------------------------------------------------------------------------- /src/_list-sections.scss: -------------------------------------------------------------------------------- 1 | .list-section { 2 | padding-top: $u; 3 | padding-bottom: $u; 4 | box-shadow: inset 0 -1px rgba(0,0,0,.15); 5 | 6 | &:first-of-type { 7 | padding-top: 0; 8 | } 9 | &:last-of-type { 10 | padding-bottom: 0; 11 | box-shadow: none; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/_buttons.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | border: 0; 3 | background-color: $orange-lighter; 4 | color: inherit; 5 | padding: $u 2*$u; 6 | display: inline-block; 7 | cursor: pointer; 8 | 9 | &:focus { 10 | outline: 0; 11 | box-shadow: 0 0 8px 0 $orange-light; 12 | } 13 | } 14 | 15 | .button-primary { 16 | background-color: $orange; 17 | color: #fff; 18 | } -------------------------------------------------------------------------------- /src/_typography.scss: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-osx-font-smoothing: grayscale; 4 | } 5 | 6 | body { 7 | font-size: 1.75*$u; 8 | line-height: 3*$u; 9 | font-family: 'Karla', sans-serif; 10 | color: $orange; 11 | } 12 | 13 | .size-1 { 14 | font-size: 3*$u; 15 | line-height: 4*$u; 16 | } 17 | 18 | .size-2 { 19 | font-size: 4*$u; 20 | line-height: 5*$u; 21 | } 22 | 23 | .size-3 { 24 | font-size: 5*$u; 25 | line-height: 6*$u; 26 | } 27 | 28 | .caps { 29 | font-size: 1.5*$u; 30 | line-height: 2*$u; 31 | text-transform: uppercase; 32 | letter-spacing: 1px; 33 | font-weight: 700; 34 | } 35 | 36 | p { 37 | margin-top: 0; 38 | margin-bottom: $u; 39 | } -------------------------------------------------------------------------------- /src/_inputs.scss: -------------------------------------------------------------------------------- 1 | input, textarea { 2 | color: inherit; 3 | } 4 | 5 | .input-groups { 6 | .input-group { 7 | margin-bottom: 2*$u; 8 | } 9 | } 10 | 11 | .input-label { 12 | display: block; 13 | margin-bottom: $u; 14 | } 15 | 16 | .input-field { 17 | height: 5*$u; 18 | padding: 0 1.5*$u; 19 | width: 32*$u; 20 | border: 1px solid $orange-light; 21 | margin: 0; 22 | 23 | &:focus { 24 | border-color: $orange; 25 | outline: none; 26 | } 27 | } 28 | 29 | .input-field-small { 30 | width: 16*$u; 31 | } 32 | 33 | .input-field-large { 34 | width: 48*$u; 35 | } 36 | 37 | .input-field-full { 38 | width: 100%; 39 | } 40 | 41 | .input-helper { 42 | opacity: .5; 43 | margin-top: $u; 44 | } 45 | 46 | .input-field-textarea { 47 | padding-top: $u; 48 | padding-bottom: $u; 49 | min-height: 11*$u; 50 | } -------------------------------------------------------------------------------- /src/_selects.scss: -------------------------------------------------------------------------------- 1 | .select-trigger { 2 | -webkit-appearance: none; 3 | -moz-appearance: none; 4 | appearance: none; 5 | color: inherit; 6 | border: 1px solid $orange-light; 7 | border-radius: 0; 8 | background-color: white; 9 | height: 5*$u; 10 | padding: 0 4*$u 0 1.5*$u; 11 | background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='10px' height='6px' viewBox='0 0 10 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolyline id='Path-2' stroke='%23FF3A00' stroke-width='1.5' points='9 1 5 5 1 1'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E"); 12 | background-repeat: no-repeat; 13 | background-position: center right 1.5*$u; 14 | cursor: pointer; 15 | 16 | &:focus { 17 | outline: 0; 18 | border-color: $orange; 19 | } 20 | } -------------------------------------------------------------------------------- /src/_checkbox.scss: -------------------------------------------------------------------------------- 1 | .checkbox-group { 2 | display: flex; 3 | align-items: center; 4 | cursor: pointer; 5 | } 6 | 7 | .checkbox-group-icon { 8 | width: 2*$u; 9 | height: 2*$u; 10 | border: 1px solid $orange-light; 11 | position: relative; 12 | margin-right: $u; 13 | } 14 | 15 | .checkbox-group-input { 16 | opacity: 0; 17 | position: absolute; 18 | 19 | &:checked + .checkbox-group-icon { 20 | background-color: $orange; 21 | border: 0; 22 | 23 | &:after { 24 | content: ''; 25 | width: 6px; 26 | height: 10px; 27 | box-shadow: 2px 2px white; 28 | transform: rotate(45deg); 29 | position: absolute; 30 | left: 5px; 31 | top: -1px; 32 | } 33 | } 34 | &:focus + .checkbox-group-icon { 35 | border-color: $orange; 36 | box-shadow: 0 0 8px 0 $orange-light; 37 | } 38 | &:active + .checkbox-group-icon { 39 | border-color: $orange; 40 | box-shadow: 0 0 8px 0 $orange-light; 41 | } 42 | } -------------------------------------------------------------------------------- /src/_radio.scss: -------------------------------------------------------------------------------- 1 | .radio-group { 2 | display: flex; 3 | align-items: center; 4 | cursor: pointer; 5 | } 6 | 7 | .radio-group-icon { 8 | width: 2*$u; 9 | height: 2*$u; 10 | border: 1px solid $orange-light; 11 | position: relative; 12 | margin-right: $u; 13 | border-radius: 50%; 14 | } 15 | 16 | .radio-group-input { 17 | opacity: 0; 18 | position: absolute; 19 | 20 | &:checked + .radio-group-icon { 21 | background-color: $orange; 22 | border: 0; 23 | 24 | &:after { 25 | content: ''; 26 | width: 8px; 27 | height: 8px; 28 | position: absolute; 29 | background-color: white; 30 | border-radius: 50%; 31 | left: 0; 32 | right: 0; 33 | top: 0; 34 | bottom: 0; 35 | margin: auto; 36 | } 37 | } 38 | &:focus + .radio-group-icon { 39 | box-shadow: 0 0 8px 0 $orange-light; 40 | } 41 | &:active + .radio-group-icon { 42 | box-shadow: 0 0 8px 0 $orange-light; 43 | } 44 | } -------------------------------------------------------------------------------- /src/_utilities.scss: -------------------------------------------------------------------------------- 1 | $u: 8px; 2 | 3 | .mt-1 { margin-top: $u } 4 | .mb-1 { margin-bottom: $u } 5 | .ml-1 { margin-left: $u } 6 | .mr-1 { margin-right: $u } 7 | 8 | .mt-2 { margin-top: 2*$u } 9 | .mb-2 { margin-bottom: 2*$u } 10 | .ml-2 { margin-left: 2*$u } 11 | .mr-2 { margin-right: 2*$u } 12 | 13 | .mt-3 { margin-top: 3*$u } 14 | .mb-3 { margin-bottom: 3*$u } 15 | .ml-3 { margin-left: 3*$u } 16 | .mr-3 { margin-right: 3*$u } 17 | 18 | .mt-4 { margin-top: 4*$u } 19 | .mb-4 { margin-bottom: 4*$u } 20 | .ml-4 { margin-left: 4*$u } 21 | .mr-4 { margin-right: 4*$u } 22 | 23 | .mt-5 { margin-top: 5*$u } 24 | .mb-5 { margin-bottom: 5*$u } 25 | .ml-5 { margin-left: 5*$u } 26 | .mr-5 { margin-right: 5*$u } 27 | 28 | .mt-6 { margin-top: 6*$u } 29 | .mb-6 { margin-bottom: 6*$u } 30 | .ml-6 { margin-left: 6*$u } 31 | .mr-6 { margin-right: 6*$u } 32 | 33 | .mt-7 { margin-top: 7*$u } 34 | .mb-7 { margin-bottom: 7*$u } 35 | .ml-7 { margin-left: 7*$u } 36 | .mr-7 { margin-right: 7*$u } 37 | 38 | .mt-8 { margin-top: 8*$u } 39 | .mb-8 { margin-bottom: 8*$u } 40 | .ml-8 { margin-left: 8*$u } 41 | .mr-8 { margin-right: 8*$u } 42 | 43 | .pt-1 { padding-top: $u } 44 | .pb-1 { padding-bottom: $u } 45 | .pl-1 { padding-left: $u } 46 | .pr-1 { padding-right: $u } 47 | 48 | .pt-2 { padding-top: 2*$u } 49 | .pb-2 { padding-bottom: 2*$u } 50 | .pl-2 { padding-left: 2*$u } 51 | .pr-2 { padding-right: 2*$u } 52 | 53 | .pt-3 { padding-top: 3*$u } 54 | .pb-3 { padding-bottom: 3*$u } 55 | .pl-3 { padding-left: 3*$u } 56 | .pr-3 { padding-right: 3*$u } 57 | 58 | .pt-4 { padding-top: 4*$u } 59 | .pb-4 { padding-bottom: 4*$u } 60 | .pl-4 { padding-left: 4*$u } 61 | .pr-4 { padding-right: 4*$u } 62 | 63 | .pt-5 { padding-top: 5*$u } 64 | .pb-5 { padding-bottom: 5*$u } 65 | .pl-5 { padding-left: 5*$u } 66 | .pr-5 { padding-right: 5*$u } 67 | 68 | .pt-6 { padding-top: 6*$u } 69 | .pb-6 { padding-bottom: 6*$u } 70 | .pl-6 { padding-left: 6*$u } 71 | .pr-6 { padding-right: 6*$u } 72 | 73 | .pt-7 { padding-top: 7*$u } 74 | .pb-7 { padding-bottom: 7*$u } 75 | .pl-7 { padding-left: 7*$u } 76 | .pr-7 { padding-right: 7*$u } 77 | 78 | .pt-8 { padding-top: 8*$u } 79 | .pb-8 { padding-bottom: 8*$u } 80 | .pl-8 { padding-left: 8*$u } 81 | .pr-8 { padding-right: 8*$u } 82 | 83 | .w-sm { width: 16*$u } 84 | .w-md { width: 32*$u } 85 | .w-lg { width: 48*$u } 86 | 87 | .minw-sm { min-width: 16*$u } 88 | .minw-md { min-width: 32*$u } 89 | .minw-lg { min-width: 48*$u } 90 | 91 | .maxw-sm { max-width: 16*$u } 92 | .maxw-md { max-width: 32*$u } 93 | .maxw-lg { max-width: 48*$u } 94 | 95 | .flex { 96 | display: flex; 97 | } 98 | 99 | .flex-auto { 100 | flex: auto; 101 | } 102 | 103 | .flex-wrap { 104 | flex-wrap: wrap; 105 | } 106 | 107 | .flex-row { 108 | flex-direction: row; 109 | } 110 | 111 | .flex-column { 112 | flex-direction: column; 113 | } 114 | 115 | .align-start { 116 | align-items: flex-start; 117 | } 118 | 119 | .align-end { 120 | align-items: flex-end; 121 | } 122 | 123 | .col-sm-1 { width: (100% / (12 / 1)) } 124 | .col-sm-2 { width: (100% / (12 / 2)) } 125 | .col-sm-3 { width: (100% / (12 / 3)) } 126 | .col-sm-4 { width: (100% / (12 / 4)) } 127 | .col-sm-5 { width: (100% / (12 / 5)) } 128 | .col-sm-6 { width: (100% / (12 / 6)) } 129 | .col-sm-7 { width: (100% / (12 / 7)) } 130 | .col-sm-8 { width: (100% / (12 / 8)) } 131 | .col-sm-9 { width: (100% / (12 / 9)) } 132 | .col-sm-10 { width: (100% / (12 / 10)) } 133 | .col-sm-11 { width: (100% / (12 / 11)) } 134 | .col-sm-12 { width: (100% / (12 / 12)) } 135 | 136 | .col-1 { width: 100% } 137 | .col-2 { width: 100% } 138 | .col-3 { width: 100% } 139 | .col-4 { width: 100% } 140 | .col-5 { width: 100% } 141 | .col-6 { width: 100% } 142 | .col-7 { width: 100% } 143 | .col-8 { width: 100% } 144 | .col-9 { width: 100% } 145 | .col-10 { width: 100% } 146 | .col-11 { width: 100% } 147 | .col-12 { width: 100% } 148 | 149 | @media(min-width:768px) { 150 | .col-1 { width: (100% / (12 / 1)) } 151 | .col-2 { width: (100% / (12 / 2)) } 152 | .col-3 { width: (100% / (12 / 3)) } 153 | .col-4 { width: (100% / (12 / 4)) } 154 | .col-5 { width: (100% / (12 / 5)) } 155 | .col-6 { width: (100% / (12 / 6)) } 156 | .col-7 { width: (100% / (12 / 7)) } 157 | .col-8 { width: (100% / (12 / 8)) } 158 | .col-9 { width: (100% / (12 / 9)) } 159 | .col-10 { width: (100% / (12 / 10)) } 160 | .col-11 { width: (100% / (12 / 11)) } 161 | .col-12 { width: (100% / (12 / 12)) } 162 | } -------------------------------------------------------------------------------- /src/_demo.scss: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: border-box; 3 | } 4 | 5 | a { 6 | text-decoration: none; 7 | } 8 | 9 | .link { 10 | color: inherit; 11 | display: inline-block; 12 | box-shadow: 0 1px $orange-light; 13 | } 14 | 15 | .container{ 16 | padding-left: 8*$u; 17 | padding-right: 8*$u; 18 | max-width: 136*$u; 19 | margin: 0 auto; 20 | 21 | @media(max-width: 768px) { 22 | padding-left: 2*$u; 23 | padding-right: 2*$u; 24 | overflow: hidden; 25 | } 26 | } 27 | 28 | .main-subtitle { 29 | color: $orange-light; 30 | } 31 | 32 | .demo-container { 33 | background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='8px' height='8px' viewBox='0 0 8 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 42 %2836781%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EArtboard 2%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard-2' fill='%23FEEDE8'%3E%3Cpath d='M7.5,8 L8,8 L8,-3.55271368e-15 L7,-3.55271368e-15 L7,7 L1.77635684e-15,7 L1.77635684e-15,8 L7.5,8 Z' id='Combined-Shape' transform='translate%284.000000, 4.000000%29 rotate%28-180.000000%29 translate%28-4.000000, -4.000000%29 '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 34 | max-width: 160*$u; 35 | margin: 0 auto; 36 | 37 | @media(max-width: 192*$u) { 38 | max-width: 144*$u; 39 | } 40 | } 41 | 42 | .demo-section { 43 | padding-top: 8*$u; 44 | padding-bottom: 8*$u; 45 | 46 | &:not(:last-of-type) { 47 | box-shadow: 0 1px $orange-lighter; 48 | } 49 | } 50 | 51 | .demo-section-column { 52 | flex: 1 0 50%; 53 | } 54 | 55 | .demo-type-intro { 56 | font-size: 288px; 57 | line-height: 208px; 58 | color: $orange-lighter; 59 | -webkit-text-stroke-width: 1px; 60 | -webkit-text-stroke-color: $orange; 61 | 62 | @media(max-width: 768px) { 63 | font-size: 144px; 64 | line-height: 1; 65 | } 66 | } 67 | 68 | ::selection { 69 | background: $orange; 70 | color: white; 71 | } 72 | 73 | ::-moz-selection { 74 | background: $orange; 75 | color: white; 76 | } 77 | 78 | .demo-width { 79 | background-color: $orange-lighter; 80 | box-shadow: inset 1px 0 $orange, inset -1px 0 $orange; 81 | height: 2*$u; 82 | flex-shrink: 0; 83 | } 84 | 85 | .demo-width-title { 86 | width: 12*$u; 87 | flex-shrink: 0; 88 | } 89 | 90 | .demo-width-group { 91 | display: flex; 92 | 93 | @media(max-width: 768px) { 94 | flex-direction: column; 95 | margin-bottom: $u; 96 | } 97 | } 98 | 99 | .demo-spacer-title { 100 | width: 6*$u; 101 | } 102 | 103 | .demo-spacer { 104 | height: 3*$u; 105 | background-color: transparentize($orange, .8); 106 | box-shadow: inset -1px 0 $orange; 107 | position: relative; 108 | overflow: hidden; 109 | 110 | &:before { 111 | content: ''; 112 | position: absolute; 113 | height: 1px; 114 | background-color: $orange; 115 | top: 0; 116 | bottom: 0; 117 | right: 2px; 118 | left: 0; 119 | margin: auto; 120 | } 121 | 122 | &:after { 123 | content: ''; 124 | position: absolute; 125 | width: 7px; 126 | height: 7px; 127 | box-shadow: 1px 1px $orange; 128 | top: 0; 129 | bottom: 0; 130 | right: 4px; 131 | transform: rotate(-45deg); 132 | margin: auto; 133 | } 134 | } 135 | 136 | .demo-spacer-left { 137 | box-shadow: inset 1px 0 $orange; 138 | 139 | &:before { 140 | right: 0; 141 | left: 2px; 142 | } 143 | 144 | &:after { 145 | transform: rotate(135deg); 146 | left: 4px; 147 | right: auto; 148 | } 149 | } 150 | 151 | .demo-spacer-1 { width: $u } 152 | .demo-spacer-2 { width: 2*$u } 153 | .demo-spacer-3 { width: 3*$u } 154 | .demo-spacer-4 { width: 4*$u } 155 | .demo-spacer-5 { width: 5*$u } 156 | .demo-spacer-6 { width: 6*$u } 157 | .demo-spacer-7 { width: 7*$u } 158 | .demo-spacer-8 { width: 8*$u } 159 | 160 | .demo-mr-column { 161 | text-align: right; 162 | } 163 | 164 | .demo-spacer-top { 165 | box-shadow: inset 0 1px $orange; 166 | width: 5*$u; 167 | 168 | &:before { 169 | width: 1px; 170 | height: 100%; 171 | top: 4px; 172 | bottom: 0; 173 | right: 0; 174 | left: 0; 175 | margin: auto; 176 | } 177 | 178 | &:after { 179 | box-shadow: 1px 1px $orange; 180 | left: 0; 181 | right: 0; 182 | bottom: auto; 183 | top: 4px; 184 | transform: rotate(-135deg); 185 | margin: auto; 186 | } 187 | 188 | &.demo-spacer-1 { height: $u } 189 | &.demo-spacer-2 { height: 2*$u } 190 | &.demo-spacer-3 { height: 3*$u } 191 | &.demo-spacer-4 { height: 4*$u } 192 | &.demo-spacer-5 { height: 5*$u } 193 | &.demo-spacer-6 { height: 6*$u } 194 | &.demo-spacer-7 { height: 7*$u } 195 | &.demo-spacer-8 { height: 8*$u } 196 | } 197 | 198 | .demo-spacer-bottom { 199 | box-shadow: inset 0 -1px $orange; 200 | width: 5*$u; 201 | 202 | &:before { 203 | width: 1px; 204 | height: 100%; 205 | top: 0; 206 | bottom: 4px; 207 | right: 0; 208 | left: 0; 209 | margin: auto; 210 | } 211 | 212 | &:after { 213 | box-shadow: 1px 1px $orange; 214 | left: 0; 215 | right: 0; 216 | top: auto; 217 | bottom: 4px; 218 | transform: rotate(45deg); 219 | margin: auto; 220 | } 221 | 222 | &.demo-spacer-1 { height: $u } 223 | &.demo-spacer-2 { height: 2*$u } 224 | &.demo-spacer-3 { height: 3*$u } 225 | &.demo-spacer-4 { height: 4*$u } 226 | &.demo-spacer-5 { height: 5*$u } 227 | &.demo-spacer-6 { height: 6*$u } 228 | &.demo-spacer-7 { height: 7*$u } 229 | &.demo-spacer-8 { height: 8*$u } 230 | } 231 | 232 | .demo-spacers-horizonal { 233 | display: flex; 234 | 235 | @media(max-width: 768px) { 236 | width: 100%; 237 | justify-content: space-between; 238 | margin-bottom: 4*$u; 239 | } 240 | } 241 | 242 | .demo-spacers-left { 243 | margin-right: 8*$u; 244 | } 245 | 246 | .demo-spacers-right { 247 | display: flex; 248 | flex-direction: column; 249 | align-items: flex-end; 250 | } 251 | 252 | .demo-spacer-vertical { 253 | display: flex; 254 | 255 | @media(max-width: 768px) { 256 | flex-direction: column; 257 | overflow: scroll; 258 | margin-right: -2*$u; 259 | } 260 | } 261 | 262 | .demo-spacer-vertical-group { 263 | display: flex; 264 | 265 | @media(max-width: 768px) { 266 | margin-bottom: 2*$u; 267 | } 268 | } 269 | 270 | .demo-spacer-vertical-bottom { 271 | .demo-spacer-vertical-group { 272 | align-items: flex-end; 273 | } 274 | 275 | @media(min-width: 768px) { 276 | margin-top: 7*$u; 277 | } 278 | } -------------------------------------------------------------------------------- /src/index.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["_demo.scss","_variables.scss","_layout.scss","_inputs.scss","_selects.scss","_typography.scss","_buttons.scss","_checkbox.scss","_radio.scss","_cards.scss","_list-sections.scss","_utilities.scss"], 5 | "names": [], 6 | "file": "index.css" 7 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | unit. design system 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
unit .
21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 | Typography
— 30 |
31 |
32 |
33 |
34 | Aa. 35 |
36 |
37 |
38 |
39 | 40/48 — size 3 40 |
41 |
42 | 32/40 — size 2 43 |
44 |
45 | 24/32 — size 1 46 |
47 |
48 | 14/24 — size 0 49 |
50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 |
58 | Buttons
— 59 |
60 |
61 | 62 |
63 |
64 |
65 |
66 | Widths
— 67 |
68 |
69 |
70 |
large
71 |
72 |
73 |
74 |
75 |
76 |
medium
77 |
78 |
79 |
80 |
81 |
82 |
small
83 |
84 |
85 |
86 |
87 |
88 |
89 | 90 |
91 |
92 | Form elements
— 93 |
94 |
95 |
96 |
input medium
97 | 98 |
99 |
100 |
input small
101 | 102 |
103 |
104 |
input large
105 | 106 |
107 |
108 |
109 | 115 |
116 |
117 |
118 | 123 | 128 |
129 |
130 | 135 | 140 |
141 |
142 |
143 | 144 |
145 |
146 | Spacers
— 147 |
148 | 149 |
150 | 151 |
152 |
153 |
154 |
155 |
.ml-1
156 |
157 |
158 | 159 |
160 |
.ml-2
161 |
162 |
163 | 164 |
165 |
.ml-3
166 |
167 |
168 | 169 |
170 |
.ml-4
171 |
172 |
173 | 174 |
175 |
.ml-5
176 |
177 |
178 | 179 |
180 |
.ml-6
181 |
182 |
183 | 184 |
185 |
.ml-7
186 |
187 |
188 | 189 |
190 |
.ml-8
191 |
192 |
193 |
194 | 195 |
196 |
197 |
198 |
.mr-1
199 |
200 | 201 |
202 |
203 |
.mr-2
204 |
205 | 206 |
207 |
208 |
.mr-3
209 |
210 | 211 |
212 |
213 |
.mr-4
214 |
215 | 216 |
217 |
218 |
.mr-5
219 |
220 | 221 |
222 |
223 |
.mr-6
224 |
225 | 226 |
227 |
228 |
.mr-7
229 |
230 | 231 |
232 |
233 |
.mr-8
234 |
235 |
236 |
237 |
238 | 239 |
240 |
241 |
242 |
243 |
.mt-1
244 |
245 |
246 | 247 |
248 |
.mt-2
249 |
250 |
251 | 252 |
253 |
.mt-3
254 |
255 |
256 | 257 |
258 |
.mt-4
259 |
260 |
261 | 262 |
263 |
.mt-5
264 |
265 |
266 | 267 |
268 |
.mt-6
269 |
270 |
271 | 272 |
273 |
.mt-7
274 |
275 |
276 | 277 |
278 |
.mt-8
279 |
280 |
281 |
282 |
283 | 284 |
285 |
286 |
287 |
288 |
.mb-1
289 |
290 | 291 |
292 |
293 |
.mb-2
294 |
295 | 296 |
297 |
298 |
.mb-3
299 |
300 | 301 |
302 |
303 |
.mb-4
304 |
305 | 306 |
307 |
308 |
.mb-5
309 |
310 | 311 |
312 |
313 |
.mb-6
314 |
315 | 316 |
317 |
318 |
.mb-7
319 |
320 | 321 |
322 |
323 |
.mb-8
324 |
325 |
326 |
327 |
328 | 329 |
330 |
331 | 332 |
333 |
334 | Cards
— 335 |
336 |
337 |
338 |
339 | card 340 |
341 | card section 342 |
343 |
344 | card section 345 |
346 |
347 |
348 | 349 |
350 |
351 | Columns
— 352 |
353 |
354 |
1
355 |
1
356 |
1
357 |
1
358 |
1
359 |
1
360 |
1
361 |
1
362 |
1
363 |
1
364 |
1
365 |
1
366 |
367 |
368 |
2
369 |
2
370 |
2
371 |
2
372 |
2
373 |
2
374 |
375 |
376 |
3
377 |
3
378 |
3
379 |
3
380 |
381 |
382 |
6
383 |
6
384 |
385 |
386 | 387 |
388 |
389 | 390 |
391 |
392 | made by 393 | hayk 394 | 395 | github 396 |
397 |
398 | 399 | 400 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: border-box; } 3 | 4 | a { 5 | text-decoration: none; } 6 | 7 | .link { 8 | color: inherit; 9 | display: inline-block; 10 | box-shadow: 0 1px rgba(255, 58, 0, 0.5); } 11 | 12 | .container { 13 | padding-left: 64px; 14 | padding-right: 64px; 15 | max-width: 1088px; 16 | margin: 0 auto; } 17 | @media (max-width: 768px) { 18 | .container { 19 | padding-left: 16px; 20 | padding-right: 16px; 21 | overflow: hidden; } } 22 | 23 | .main-subtitle { 24 | color: rgba(255, 58, 0, 0.5); } 25 | 26 | .demo-container { 27 | background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='8px' height='8px' viewBox='0 0 8 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 42 %2836781%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EArtboard 2%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard-2' fill='%23FEEDE8'%3E%3Cpath d='M7.5,8 L8,8 L8,-3.55271368e-15 L7,-3.55271368e-15 L7,7 L1.77635684e-15,7 L1.77635684e-15,8 L7.5,8 Z' id='Combined-Shape' transform='translate%284.000000, 4.000000%29 rotate%28-180.000000%29 translate%28-4.000000, -4.000000%29 '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 28 | max-width: 1280px; 29 | margin: 0 auto; } 30 | @media (max-width: 1536px) { 31 | .demo-container { 32 | max-width: 1152px; } } 33 | 34 | .demo-section { 35 | padding-top: 64px; 36 | padding-bottom: 64px; } 37 | .demo-section:not(:last-of-type) { 38 | box-shadow: 0 1px rgba(255, 58, 0, 0.2); } 39 | 40 | .demo-section-column { 41 | flex: 1 0 50%; } 42 | 43 | .demo-type-intro { 44 | font-size: 288px; 45 | line-height: 208px; 46 | color: rgba(255, 58, 0, 0.2); 47 | -webkit-text-stroke-width: 1px; 48 | -webkit-text-stroke-color: #FF3A00; } 49 | @media (max-width: 768px) { 50 | .demo-type-intro { 51 | font-size: 144px; 52 | line-height: 1; } } 53 | 54 | ::selection { 55 | background: #FF3A00; 56 | color: white; } 57 | 58 | ::-moz-selection { 59 | background: #FF3A00; 60 | color: white; } 61 | 62 | .demo-width { 63 | background-color: rgba(255, 58, 0, 0.2); 64 | box-shadow: inset 1px 0 #FF3A00, inset -1px 0 #FF3A00; 65 | height: 16px; 66 | flex-shrink: 0; } 67 | 68 | .demo-width-title { 69 | width: 96px; 70 | flex-shrink: 0; } 71 | 72 | .demo-width-group { 73 | display: flex; } 74 | @media (max-width: 768px) { 75 | .demo-width-group { 76 | flex-direction: column; 77 | margin-bottom: 8px; } } 78 | 79 | .demo-spacer-title { 80 | width: 48px; } 81 | 82 | .demo-spacer { 83 | height: 24px; 84 | background-color: rgba(255, 58, 0, 0.2); 85 | box-shadow: inset -1px 0 #FF3A00; 86 | position: relative; 87 | overflow: hidden; } 88 | .demo-spacer:before { 89 | content: ''; 90 | position: absolute; 91 | height: 1px; 92 | background-color: #FF3A00; 93 | top: 0; 94 | bottom: 0; 95 | right: 2px; 96 | left: 0; 97 | margin: auto; } 98 | .demo-spacer:after { 99 | content: ''; 100 | position: absolute; 101 | width: 7px; 102 | height: 7px; 103 | box-shadow: 1px 1px #FF3A00; 104 | top: 0; 105 | bottom: 0; 106 | right: 4px; 107 | transform: rotate(-45deg); 108 | margin: auto; } 109 | 110 | .demo-spacer-left { 111 | box-shadow: inset 1px 0 #FF3A00; } 112 | .demo-spacer-left:before { 113 | right: 0; 114 | left: 2px; } 115 | .demo-spacer-left:after { 116 | transform: rotate(135deg); 117 | left: 4px; 118 | right: auto; } 119 | 120 | .demo-spacer-1 { 121 | width: 8px; } 122 | 123 | .demo-spacer-2 { 124 | width: 16px; } 125 | 126 | .demo-spacer-3 { 127 | width: 24px; } 128 | 129 | .demo-spacer-4 { 130 | width: 32px; } 131 | 132 | .demo-spacer-5 { 133 | width: 40px; } 134 | 135 | .demo-spacer-6 { 136 | width: 48px; } 137 | 138 | .demo-spacer-7 { 139 | width: 56px; } 140 | 141 | .demo-spacer-8 { 142 | width: 64px; } 143 | 144 | .demo-mr-column { 145 | text-align: right; } 146 | 147 | .demo-spacer-top { 148 | box-shadow: inset 0 1px #FF3A00; 149 | width: 40px; } 150 | .demo-spacer-top:before { 151 | width: 1px; 152 | height: 100%; 153 | top: 4px; 154 | bottom: 0; 155 | right: 0; 156 | left: 0; 157 | margin: auto; } 158 | .demo-spacer-top:after { 159 | box-shadow: 1px 1px #FF3A00; 160 | left: 0; 161 | right: 0; 162 | bottom: auto; 163 | top: 4px; 164 | transform: rotate(-135deg); 165 | margin: auto; } 166 | .demo-spacer-top.demo-spacer-1 { 167 | height: 8px; } 168 | .demo-spacer-top.demo-spacer-2 { 169 | height: 16px; } 170 | .demo-spacer-top.demo-spacer-3 { 171 | height: 24px; } 172 | .demo-spacer-top.demo-spacer-4 { 173 | height: 32px; } 174 | .demo-spacer-top.demo-spacer-5 { 175 | height: 40px; } 176 | .demo-spacer-top.demo-spacer-6 { 177 | height: 48px; } 178 | .demo-spacer-top.demo-spacer-7 { 179 | height: 56px; } 180 | .demo-spacer-top.demo-spacer-8 { 181 | height: 64px; } 182 | 183 | .demo-spacer-bottom { 184 | box-shadow: inset 0 -1px #FF3A00; 185 | width: 40px; } 186 | .demo-spacer-bottom:before { 187 | width: 1px; 188 | height: 100%; 189 | top: 0; 190 | bottom: 4px; 191 | right: 0; 192 | left: 0; 193 | margin: auto; } 194 | .demo-spacer-bottom:after { 195 | box-shadow: 1px 1px #FF3A00; 196 | left: 0; 197 | right: 0; 198 | top: auto; 199 | bottom: 4px; 200 | transform: rotate(45deg); 201 | margin: auto; } 202 | .demo-spacer-bottom.demo-spacer-1 { 203 | height: 8px; } 204 | .demo-spacer-bottom.demo-spacer-2 { 205 | height: 16px; } 206 | .demo-spacer-bottom.demo-spacer-3 { 207 | height: 24px; } 208 | .demo-spacer-bottom.demo-spacer-4 { 209 | height: 32px; } 210 | .demo-spacer-bottom.demo-spacer-5 { 211 | height: 40px; } 212 | .demo-spacer-bottom.demo-spacer-6 { 213 | height: 48px; } 214 | .demo-spacer-bottom.demo-spacer-7 { 215 | height: 56px; } 216 | .demo-spacer-bottom.demo-spacer-8 { 217 | height: 64px; } 218 | 219 | .demo-spacers-horizonal { 220 | display: flex; } 221 | @media (max-width: 768px) { 222 | .demo-spacers-horizonal { 223 | width: 100%; 224 | justify-content: space-between; 225 | margin-bottom: 32px; } } 226 | 227 | .demo-spacers-left { 228 | margin-right: 64px; } 229 | 230 | .demo-spacers-right { 231 | display: flex; 232 | flex-direction: column; 233 | align-items: flex-end; } 234 | 235 | .demo-spacer-vertical { 236 | display: flex; } 237 | @media (max-width: 768px) { 238 | .demo-spacer-vertical { 239 | flex-direction: column; 240 | overflow: scroll; 241 | margin-right: -16px; } } 242 | 243 | .demo-spacer-vertical-group { 244 | display: flex; } 245 | @media (max-width: 768px) { 246 | .demo-spacer-vertical-group { 247 | margin-bottom: 16px; } } 248 | 249 | .demo-spacer-vertical-bottom .demo-spacer-vertical-group { 250 | align-items: flex-end; } 251 | @media (min-width: 768px) { 252 | .demo-spacer-vertical-bottom { 253 | margin-top: 56px; } } 254 | 255 | .layout { 256 | display: flex; } 257 | 258 | .col { 259 | flex: auto; } 260 | 261 | input, textarea { 262 | color: inherit; } 263 | 264 | .input-groups .input-group { 265 | margin-bottom: 16px; } 266 | 267 | .input-label { 268 | display: block; 269 | margin-bottom: 8px; } 270 | 271 | .input-field { 272 | height: 40px; 273 | padding: 0 12px; 274 | width: 256px; 275 | border: 1px solid rgba(255, 58, 0, 0.5); 276 | margin: 0; } 277 | .input-field:focus { 278 | border-color: #FF3A00; 279 | outline: none; } 280 | 281 | .input-field-small { 282 | width: 128px; } 283 | 284 | .input-field-large { 285 | width: 384px; } 286 | 287 | .input-field-full { 288 | width: 100%; } 289 | 290 | .input-helper { 291 | opacity: .5; 292 | margin-top: 8px; } 293 | 294 | .input-field-textarea { 295 | padding-top: 8px; 296 | padding-bottom: 8px; 297 | min-height: 88px; } 298 | 299 | .select-trigger { 300 | -webkit-appearance: none; 301 | -moz-appearance: none; 302 | appearance: none; 303 | color: inherit; 304 | border: 1px solid rgba(255, 58, 0, 0.5); 305 | border-radius: 0; 306 | background-color: white; 307 | height: 40px; 308 | padding: 0 32px 0 12px; 309 | background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='10px' height='6px' viewBox='0 0 10 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolyline id='Path-2' stroke='%23FF3A00' stroke-width='1.5' points='9 1 5 5 1 1'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E"); 310 | background-repeat: no-repeat; 311 | background-position: center right 12px; 312 | cursor: pointer; } 313 | .select-trigger:focus { 314 | outline: 0; 315 | border-color: #FF3A00; } 316 | 317 | * { 318 | -webkit-font-smoothing: antialiased; 319 | -moz-osx-font-smoothing: grayscale; } 320 | 321 | body { 322 | font-size: 14px; 323 | line-height: 24px; 324 | font-family: 'Karla', sans-serif; 325 | color: #FF3A00; } 326 | 327 | .size-1 { 328 | font-size: 24px; 329 | line-height: 32px; } 330 | 331 | .size-2 { 332 | font-size: 32px; 333 | line-height: 40px; } 334 | 335 | .size-3 { 336 | font-size: 40px; 337 | line-height: 48px; } 338 | 339 | .caps { 340 | font-size: 12px; 341 | line-height: 16px; 342 | text-transform: uppercase; 343 | letter-spacing: 1px; 344 | font-weight: 700; } 345 | 346 | p { 347 | margin-top: 0; 348 | margin-bottom: 8px; } 349 | 350 | .button { 351 | border: 0; 352 | background-color: rgba(255, 58, 0, 0.2); 353 | color: inherit; 354 | padding: 8px 16px; 355 | display: inline-block; 356 | cursor: pointer; } 357 | .button:focus { 358 | outline: 0; 359 | box-shadow: 0 0 8px 0 rgba(255, 58, 0, 0.5); } 360 | 361 | .button-primary { 362 | background-color: #FF3A00; 363 | color: #fff; } 364 | 365 | .checkbox-group { 366 | display: flex; 367 | align-items: center; 368 | cursor: pointer; } 369 | 370 | .checkbox-group-icon { 371 | width: 16px; 372 | height: 16px; 373 | border: 1px solid rgba(255, 58, 0, 0.5); 374 | position: relative; 375 | margin-right: 8px; } 376 | 377 | .checkbox-group-input { 378 | opacity: 0; 379 | position: absolute; } 380 | .checkbox-group-input:checked + .checkbox-group-icon { 381 | background-color: #FF3A00; 382 | border: 0; } 383 | .checkbox-group-input:checked + .checkbox-group-icon:after { 384 | content: ''; 385 | width: 6px; 386 | height: 10px; 387 | box-shadow: 2px 2px white; 388 | transform: rotate(45deg); 389 | position: absolute; 390 | left: 5px; 391 | top: -1px; } 392 | .checkbox-group-input:focus + .checkbox-group-icon { 393 | border-color: #FF3A00; 394 | box-shadow: 0 0 8px 0 rgba(255, 58, 0, 0.5); } 395 | .checkbox-group-input:active + .checkbox-group-icon { 396 | border-color: #FF3A00; 397 | box-shadow: 0 0 8px 0 rgba(255, 58, 0, 0.5); } 398 | 399 | .radio-group { 400 | display: flex; 401 | align-items: center; 402 | cursor: pointer; } 403 | 404 | .radio-group-icon { 405 | width: 16px; 406 | height: 16px; 407 | border: 1px solid rgba(255, 58, 0, 0.5); 408 | position: relative; 409 | margin-right: 8px; 410 | border-radius: 50%; } 411 | 412 | .radio-group-input { 413 | opacity: 0; 414 | position: absolute; } 415 | .radio-group-input:checked + .radio-group-icon { 416 | background-color: #FF3A00; 417 | border: 0; } 418 | .radio-group-input:checked + .radio-group-icon:after { 419 | content: ''; 420 | width: 8px; 421 | height: 8px; 422 | position: absolute; 423 | background-color: white; 424 | border-radius: 50%; 425 | left: 0; 426 | right: 0; 427 | top: 0; 428 | bottom: 0; 429 | margin: auto; } 430 | .radio-group-input:focus + .radio-group-icon { 431 | box-shadow: 0 0 8px 0 rgba(255, 58, 0, 0.5); } 432 | .radio-group-input:active + .radio-group-icon { 433 | box-shadow: 0 0 8px 0 rgba(255, 58, 0, 0.5); } 434 | 435 | .card { 436 | box-shadow: inset 0 0 0 1px #FF3A00; } 437 | 438 | .card-section { 439 | padding: 16px 24px; } 440 | .card-section:not(:last-of-type) { 441 | box-shadow: inset 0 -1px #FF3A00; } 442 | 443 | .list-section { 444 | padding-top: 8px; 445 | padding-bottom: 8px; 446 | box-shadow: inset 0 -1px rgba(0, 0, 0, 0.15); } 447 | .list-section:first-of-type { 448 | padding-top: 0; } 449 | .list-section:last-of-type { 450 | padding-bottom: 0; 451 | box-shadow: none; } 452 | 453 | .mt-1 { 454 | margin-top: 8px; } 455 | 456 | .mb-1 { 457 | margin-bottom: 8px; } 458 | 459 | .ml-1 { 460 | margin-left: 8px; } 461 | 462 | .mr-1 { 463 | margin-right: 8px; } 464 | 465 | .mt-2 { 466 | margin-top: 16px; } 467 | 468 | .mb-2 { 469 | margin-bottom: 16px; } 470 | 471 | .ml-2 { 472 | margin-left: 16px; } 473 | 474 | .mr-2 { 475 | margin-right: 16px; } 476 | 477 | .mt-3 { 478 | margin-top: 24px; } 479 | 480 | .mb-3 { 481 | margin-bottom: 24px; } 482 | 483 | .ml-3 { 484 | margin-left: 24px; } 485 | 486 | .mr-3 { 487 | margin-right: 24px; } 488 | 489 | .mt-4 { 490 | margin-top: 32px; } 491 | 492 | .mb-4 { 493 | margin-bottom: 32px; } 494 | 495 | .ml-4 { 496 | margin-left: 32px; } 497 | 498 | .mr-4 { 499 | margin-right: 32px; } 500 | 501 | .mt-5 { 502 | margin-top: 40px; } 503 | 504 | .mb-5 { 505 | margin-bottom: 40px; } 506 | 507 | .ml-5 { 508 | margin-left: 40px; } 509 | 510 | .mr-5 { 511 | margin-right: 40px; } 512 | 513 | .mt-6 { 514 | margin-top: 48px; } 515 | 516 | .mb-6 { 517 | margin-bottom: 48px; } 518 | 519 | .ml-6 { 520 | margin-left: 48px; } 521 | 522 | .mr-6 { 523 | margin-right: 48px; } 524 | 525 | .mt-7 { 526 | margin-top: 56px; } 527 | 528 | .mb-7 { 529 | margin-bottom: 56px; } 530 | 531 | .ml-7 { 532 | margin-left: 56px; } 533 | 534 | .mr-7 { 535 | margin-right: 56px; } 536 | 537 | .mt-8 { 538 | margin-top: 64px; } 539 | 540 | .mb-8 { 541 | margin-bottom: 64px; } 542 | 543 | .ml-8 { 544 | margin-left: 64px; } 545 | 546 | .mr-8 { 547 | margin-right: 64px; } 548 | 549 | .pt-1 { 550 | padding-top: 8px; } 551 | 552 | .pb-1 { 553 | padding-bottom: 8px; } 554 | 555 | .pl-1 { 556 | padding-left: 8px; } 557 | 558 | .pr-1 { 559 | padding-right: 8px; } 560 | 561 | .pt-2 { 562 | padding-top: 16px; } 563 | 564 | .pb-2 { 565 | padding-bottom: 16px; } 566 | 567 | .pl-2 { 568 | padding-left: 16px; } 569 | 570 | .pr-2 { 571 | padding-right: 16px; } 572 | 573 | .pt-3 { 574 | padding-top: 24px; } 575 | 576 | .pb-3 { 577 | padding-bottom: 24px; } 578 | 579 | .pl-3 { 580 | padding-left: 24px; } 581 | 582 | .pr-3 { 583 | padding-right: 24px; } 584 | 585 | .pt-4 { 586 | padding-top: 32px; } 587 | 588 | .pb-4 { 589 | padding-bottom: 32px; } 590 | 591 | .pl-4 { 592 | padding-left: 32px; } 593 | 594 | .pr-4 { 595 | padding-right: 32px; } 596 | 597 | .pt-5 { 598 | padding-top: 40px; } 599 | 600 | .pb-5 { 601 | padding-bottom: 40px; } 602 | 603 | .pl-5 { 604 | padding-left: 40px; } 605 | 606 | .pr-5 { 607 | padding-right: 40px; } 608 | 609 | .pt-6 { 610 | padding-top: 48px; } 611 | 612 | .pb-6 { 613 | padding-bottom: 48px; } 614 | 615 | .pl-6 { 616 | padding-left: 48px; } 617 | 618 | .pr-6 { 619 | padding-right: 48px; } 620 | 621 | .pt-7 { 622 | padding-top: 56px; } 623 | 624 | .pb-7 { 625 | padding-bottom: 56px; } 626 | 627 | .pl-7 { 628 | padding-left: 56px; } 629 | 630 | .pr-7 { 631 | padding-right: 56px; } 632 | 633 | .pt-8 { 634 | padding-top: 64px; } 635 | 636 | .pb-8 { 637 | padding-bottom: 64px; } 638 | 639 | .pl-8 { 640 | padding-left: 64px; } 641 | 642 | .pr-8 { 643 | padding-right: 64px; } 644 | 645 | .w-sm { 646 | width: 128px; } 647 | 648 | .w-md { 649 | width: 256px; } 650 | 651 | .w-lg { 652 | width: 384px; } 653 | 654 | .minw-sm { 655 | min-width: 128px; } 656 | 657 | .minw-md { 658 | min-width: 256px; } 659 | 660 | .minw-lg { 661 | min-width: 384px; } 662 | 663 | .maxw-sm { 664 | max-width: 128px; } 665 | 666 | .maxw-md { 667 | max-width: 256px; } 668 | 669 | .maxw-lg { 670 | max-width: 384px; } 671 | 672 | .flex { 673 | display: flex; } 674 | 675 | .flex-auto { 676 | flex: auto; } 677 | 678 | .flex-wrap { 679 | flex-wrap: wrap; } 680 | 681 | .flex-row { 682 | flex-direction: row; } 683 | 684 | .flex-column { 685 | flex-direction: column; } 686 | 687 | .align-start { 688 | align-items: flex-start; } 689 | 690 | .align-end { 691 | align-items: flex-end; } 692 | 693 | .col-sm-1 { 694 | width: 8.33333%; } 695 | 696 | .col-sm-2 { 697 | width: 16.66667%; } 698 | 699 | .col-sm-3 { 700 | width: 25%; } 701 | 702 | .col-sm-4 { 703 | width: 33.33333%; } 704 | 705 | .col-sm-5 { 706 | width: 41.66667%; } 707 | 708 | .col-sm-6 { 709 | width: 50%; } 710 | 711 | .col-sm-7 { 712 | width: 58.33333%; } 713 | 714 | .col-sm-8 { 715 | width: 66.66667%; } 716 | 717 | .col-sm-9 { 718 | width: 75%; } 719 | 720 | .col-sm-10 { 721 | width: 83.33333%; } 722 | 723 | .col-sm-11 { 724 | width: 91.66667%; } 725 | 726 | .col-sm-12 { 727 | width: 100%; } 728 | 729 | .col-1 { 730 | width: 100%; } 731 | 732 | .col-2 { 733 | width: 100%; } 734 | 735 | .col-3 { 736 | width: 100%; } 737 | 738 | .col-4 { 739 | width: 100%; } 740 | 741 | .col-5 { 742 | width: 100%; } 743 | 744 | .col-6 { 745 | width: 100%; } 746 | 747 | .col-7 { 748 | width: 100%; } 749 | 750 | .col-8 { 751 | width: 100%; } 752 | 753 | .col-9 { 754 | width: 100%; } 755 | 756 | .col-10 { 757 | width: 100%; } 758 | 759 | .col-11 { 760 | width: 100%; } 761 | 762 | .col-12 { 763 | width: 100%; } 764 | 765 | @media (min-width: 768px) { 766 | .col-1 { 767 | width: 8.33333%; } 768 | 769 | .col-2 { 770 | width: 16.66667%; } 771 | 772 | .col-3 { 773 | width: 25%; } 774 | 775 | .col-4 { 776 | width: 33.33333%; } 777 | 778 | .col-5 { 779 | width: 41.66667%; } 780 | 781 | .col-6 { 782 | width: 50%; } 783 | 784 | .col-7 { 785 | width: 58.33333%; } 786 | 787 | .col-8 { 788 | width: 66.66667%; } 789 | 790 | .col-9 { 791 | width: 75%; } 792 | 793 | .col-10 { 794 | width: 83.33333%; } 795 | 796 | .col-11 { 797 | width: 91.66667%; } 798 | 799 | .col-12 { 800 | width: 100%; } } 801 | 802 | /*# sourceMappingURL=index.css.map */ 803 | --------------------------------------------------------------------------------