diff options
IMPORTANT: Replace all rem units to px
47 files changed, 388 insertions, 372 deletions
diff --git a/src/accordions.less b/src/accordions.less index 45d40b9..df630ea 100644 --- a/src/accordions.less +++ b/src/accordions.less @@ -10,7 +10,7 @@ } } & ~ .accordion-body { - max-height: 100rem; + max-height: 1000px; transition: max-height 3s ease; } } @@ -18,7 +18,7 @@ .accordion-header { display: block; - padding: 1rem; + padding: @layout-spacing; .icon { transition: all .25s ease; @@ -26,7 +26,7 @@ } .accordion-body { - margin-bottom: 1rem; + margin-bottom: @layout-spacing; max-height: 0; overflow: hidden; transition: max-height .3s ease; diff --git a/src/animations.less b/src/animations.less index 594c51d..f6b8724 100644 --- a/src/animations.less +++ b/src/animations.less @@ -11,7 +11,7 @@ @keyframes slide-down { 0% { opacity: 0; - transform: translateY(-3rem); + transform: translateY(-@unit-8); } 100% { opacity: 1; diff --git a/src/asian.less b/src/asian.less index 38230e4..a68cb39 100644 --- a/src/asian.less +++ b/src/asian.less @@ -16,7 +16,7 @@ .cjk { ins, u { - border-bottom: .1rem solid; + border-bottom: @border-width solid; text-decoration: none; } diff --git a/src/autocomplete.less b/src/autocomplete.less index 68b31fd..46af3b2 100644 --- a/src/autocomplete.less +++ b/src/autocomplete.less @@ -7,8 +7,8 @@ display: flex; flex-wrap: wrap; height: auto; - min-height: 3.2rem; - padding: .1rem 0 0 .1rem; + min-height: @unit-8; + padding: @border-width 0 0 @border-width; &.is-focused { border-color: @primary-color; @@ -20,8 +20,8 @@ box-shadow: none; display: inline-block; flex: 1 0 auto; - height: 2.8rem; - line-height: 1.6rem; + height: @unit-7; + line-height: @unit-4; width: auto; } } diff --git a/src/avatars.less b/src/avatars.less index 9aa653c..b964146 100644 --- a/src/avatars.less +++ b/src/avatars.less @@ -1,37 +1,27 @@ // Avatars .avatar { + .avatar-base(); background: @primary-color; border-radius: 50%; color: fade(@light-color, 85%); display: inline-block; - font-size: @font-size; font-weight: 300; - height: 3.2rem; line-height: 1; margin: 0; position: relative; vertical-align: middle; - width: 3.2rem; &.avatar-xs { - font-size: .8rem; - height: 1.6rem; - width: 1.6rem; + .avatar-base(@unit-4); } &.avatar-sm { - font-size: 1rem; - height: 2.4rem; - width: 2.4rem; + .avatar-base(@unit-6); } &.avatar-lg { - font-size: 2rem; - height: 4.8rem; - width: 4.8rem; + .avatar-base(@unit-12); } &.avatar-xl { - font-size: 2.6rem; - height: 6.4rem; - width: 6.4rem; + .avatar-base(@unit-16); } img { @@ -46,7 +36,7 @@ background: @bg-color-light; bottom: 14.64%; height: 50%; - padding: .2rem; + padding: @border-width-lg; position: absolute; right: 14.64%; transform: translate(50%, 50%); diff --git a/src/badges.less b/src/badges.less index 677cc9b..8dd5a51 100644 --- a/src/badges.less +++ b/src/badges.less @@ -8,21 +8,21 @@ &::after { background: @primary-color; background-clip: padding-box; - border-radius: 1rem; - box-shadow: 0 0 0 .2rem @bg-color-light; + border-radius: 10px; + box-shadow: 0 0 0 2px @bg-color-light; color: @light-color; content: attr(data-badge); display: inline-block; - transform: translate(-.2rem, -1rem); + transform: translate(-2px, -10px); } } &[data-badge] { &::after { font-size: @font-size-sm; - height: 1.8rem; + height: 18px; line-height: 1; - min-width: 1.8rem; - padding: .3rem .5rem; + min-width: 18px; + padding: 3px 5px; text-align: center; white-space: nowrap; } @@ -30,10 +30,10 @@ &:not([data-badge]), &[data-badge=''] { &::after { - height: .6rem; - min-width: .6rem; + height: 6px; + min-width: 6px; padding: 0; - width: .6rem; + width: 6px; } } @@ -61,10 +61,10 @@ &.avatar-xs { &::after { content: ""; - height: .8rem; - min-width: .8rem; + height: @unit-2; + min-width: @unit-2; padding: 0; - width: .8rem; + width: @unit-2; } } } diff --git a/src/bars.less b/src/bars.less index e494a3e..96848d2 100644 --- a/src/bars.less +++ b/src/bars.less @@ -4,11 +4,11 @@ border-radius: @border-radius; display: flex; flex-wrap: nowrap; - height: 1.6rem; + height: @unit-4; width: 100%; &.bar-sm { - height: .4rem; + height: @unit-1; } // TODO: attr() support @@ -18,9 +18,8 @@ display: block; font-size: @font-size-sm; flex-shrink: 0; - line-height: 1; + line-height: @unit-4; height: 100%; - padding: .2rem 0; position: relative; text-align: center; width: 0; @@ -39,8 +38,8 @@ // Slider bar .bar-slider { - height: .2rem; - margin: 1rem 0; + height: @border-width-lg; + margin: @layout-spacing 0; position: relative; .bar-item { @@ -57,16 +56,16 @@ background: @primary-color; border: 0; border-radius: 50%; - height: 1.2rem; + height: @unit-3; padding: 0; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); - width: 1.2rem; + width: @unit-3; &:active { - box-shadow: 0 0 0 .2rem @primary-color; + box-shadow: 0 0 0 2px @primary-color; } } } diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less index 64e2316..280250b 100644 --- a/src/breadcrumbs.less +++ b/src/breadcrumbs.less @@ -1,15 +1,15 @@ // Breadcrumbs .breadcrumb { - padding: .4rem 0; + padding: @unit-1 0; .breadcrumb-item { color: @gray-color-dark; display: inline-block; margin: 0; - padding: .2rem 0; + padding: @unit-1 0; &:not(:last-child) { - margin-right: .4rem; + margin-right: @unit-1; a { color: @gray-color-dark; @@ -20,7 +20,7 @@ &::before { color: @gray-color-light; content: "/"; - padding-right: .4rem; + padding-right: @unit-1; } } } diff --git a/src/buttons.less b/src/buttons.less index f404e38..003ed91 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -9,10 +9,10 @@ cursor: pointer; display: inline-block; font-size: @font-size; - height: 3.2rem; - line-height: 2rem; + height: @unit-8; + line-height: @line-height; outline: none; - padding: .5rem .8rem; + padding: 5px 8px; text-align: center; text-decoration: none; user-select: none; @@ -90,14 +90,14 @@ // Button Sizes &.btn-sm { font-size: @font-size-sm; - height: 2.4rem; - padding: .1rem .8rem; + height: @unit-6; + padding: 1px 8px; } &.btn-lg { font-size: @font-size-lg; - height: 4rem; - padding: .9rem .8rem; + height: @unit-10; + padding: 9px 8px; } // Button Block @@ -108,16 +108,16 @@ // Button Action &.btn-action { - width: 3.2rem; + width: @unit-8; padding-left: 0; padding-right: 0; &.btn-sm { - width: 2.4rem; + width: @unit-6; } &.btn-lg { - width: 4rem; + width: @unit-10; } } @@ -126,14 +126,14 @@ background: transparent; border: 0; color: currentColor; - height: 1.6rem; - line-height: 1.6rem; - margin-left: .4rem; - margin-right: -.2rem; + height: @unit-4; + line-height: @unit-4; + margin-left: @unit-1; + margin-right: -2px; opacity: .45; - padding: 0 .2rem; + padding: 0 2px; text-decoration: none; - width: 1.6rem; + width: @unit-4; &:hover { opacity: .85; @@ -158,12 +158,12 @@ } &:not(:first-child):not(:last-child) { border-radius: 0; - margin-left: -.1rem; + margin-left: -1px; } &:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: -.1rem; + margin-left: -1px; } &:focus, &:hover, diff --git a/src/calendars.less b/src/calendars.less index 621b9d1..44f88ae 100644 --- a/src/calendars.less +++ b/src/calendars.less @@ -3,7 +3,7 @@ border: @border-width solid @border-color; border-radius: @border-radius; display: block; - min-width: 28rem; + min-width: 280px; text-align: center; .calendar-nav { @@ -13,7 +13,7 @@ border-top-right-radius: @border-radius; display: flex; font-size: @font-size-lg; - padding: 1rem; + padding: @layout-spacing; } .calendar-header, @@ -21,7 +21,7 @@ display: flex; flex-wrap: wrap; justify-content: center; - padding: 1rem 0; + padding: @layout-spacing 0; .calendar-date { flex: 0 0 14.28%; // 7 calendar-items each row @@ -42,7 +42,7 @@ .calendar-date { border: 0; - padding: .4rem; + padding: @unit-1; .date-item { appearance: none; @@ -52,16 +52,16 @@ color: @gray-color-dark; .control-transition(); cursor: pointer; - height: 2.8rem; - line-height: 2rem; + height: @unit-7; + line-height: @unit-5; outline: none; - padding: .3rem; + padding: @unit-h; position: relative; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; - width: 2.8rem; + width: @unit-7; &.date-today { border-color: @secondary-color-dark; @@ -90,8 +90,8 @@ &.badge { &::after { position: absolute; - top: .3rem; - right: .3rem; + top: 3px; + right: 3px; transform: translate(50%, -50%); } } @@ -113,7 +113,7 @@ &::before { background: @secondary-color; content: ""; - height: 2.8rem; + height: @unit-7; left: 0; position: absolute; right: 0; @@ -145,7 +145,7 @@ border-right: @border-width solid @border-color; display: flex; flex-direction: column; - height: 11rem; + height: 110px; padding: 0; &:nth-child(7n) { @@ -159,24 +159,24 @@ .date-item { align-self: flex-end; - height: 2.8rem; - margin-right: .5rem; - margin-top: .5rem; + height: @unit-7; + margin-right: @layout-spacing-sm; + margin-top: @layout-spacing-sm; } .calendar-range { &::before { - top: 1.9rem; + top: 19px; } &.range-start { &::before { left: auto; - width: 1.9rem; + width: 19px; } } &.range-end { &::before { - right: 1.9rem; + right: 19px; } } } @@ -185,7 +185,7 @@ flex-grow: 1; line-height: 1; overflow-y: auto; - padding: .5rem; + padding: @layout-spacing-sm; } .calendar-event { @@ -194,9 +194,9 @@ color: @primary-color; font-size: @font-size-sm; display: block; - margin: .2rem auto; + margin: @unit-h auto; overflow: hidden; - padding: .3rem .4rem; + padding: 3px 4px; text-align: left; text-overflow: ellipsis; vertical-align: baseline; diff --git a/src/cards.less b/src/cards.less index fb1c127..4a76df9 100644 --- a/src/cards.less +++ b/src/cards.less @@ -8,16 +8,16 @@ .card-header, .card-body, .card-footer { - padding: @layout-padding-lg; + padding: @layout-spacing-lg; padding-bottom: 0; &:last-child { - padding-bottom: @layout-padding-lg; + padding-bottom: @layout-spacing-lg; } } .card-image { - padding-top: @layout-padding-lg; + padding-top: @layout-spacing-lg; &:first-child { padding-top: 0; @@ -37,7 +37,7 @@ } .card-title { - font-size: 2rem; + font-size: 20px; } .card-subtitle { diff --git a/src/carousels.less b/src/carousels.less index ee30edf..510560d 100644 --- a/src/carousels.less +++ b/src/carousels.less @@ -47,10 +47,10 @@ z-index: @zindex-2; } .item-prev { - left: 2rem; + left: 20px; } .item-next { - right: 2rem; + right: 20px; } } @@ -72,31 +72,31 @@ } .carousel-nav { - bottom: 1rem; + bottom: @layout-spacing; display: flex; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); - width: 20rem; + width: 200px; z-index: @zindex-2; .nav-item { color: fade(@gray-color-light, 50%); display: block; flex: 1 0 auto; - height: 4rem; - margin: .4rem; - max-width: 5rem; + height: @unit-8; + margin: @unit-1; + max-width: 50px; position: relative; &::before { background: currentColor; content: ""; display: block; - height: .3rem; + height: 2px; position: absolute; - top: 2rem; + top: 10px; width: 100%; } } diff --git a/src/chips.less b/src/chips.less index 2d45636..b9ebde5 100644 --- a/src/chips.less +++ b/src/chips.less @@ -5,10 +5,10 @@ border-radius: @border-radius; color: @gray-color-dark; display: inline-flex; - height: 2.8rem; - margin: 0 .1rem .1rem 0; + height: @unit-7; + margin: 0 @unit-0 @unit-0 0; max-width: 100%; - padding: .1rem .8rem; + padding: @unit-0 @unit-2; text-decoration: none; vertical-align: middle; @@ -18,7 +18,7 @@ } .avatar { - margin-left: -.4rem; - margin-right: .4rem; + margin-left: -@unit-1; + margin-right: @unit-1; } } diff --git a/src/codes.less b/src/codes.less index bdb73ee..e08948b 100644 --- a/src/codes.less +++ b/src/codes.less @@ -7,7 +7,7 @@ code { .code { border-radius: @border-radius; color: @body-font-color; - line-height: 2rem; + line-height: @line-height; position: relative; &::before { @@ -15,8 +15,8 @@ code { color: @gray-color; font-size: @font-size-sm; position: absolute; - right: 1rem; - top: .2rem; + right: @layout-spacing; + top: @unit-h; } code { @@ -25,7 +25,7 @@ code { display: block; line-height: inherit; overflow-x: auto; - padding: 2rem; + padding: 20px; width: 100%; } } diff --git a/src/comparison-sliders.less b/src/comparison-sliders.less index 84a7a31..937c315 100644 --- a/src/comparison-sliders.less +++ b/src/comparison-sliders.less @@ -29,7 +29,7 @@ width: 100%; .comparison-label { - right: 1.6rem; + right: @unit-4; } } @@ -45,7 +45,7 @@ height: 100%; left: 0; position: absolute; - right: 1.6rem; + right: @unit-4; top: 0; z-index: @zindex-0; } @@ -53,30 +53,30 @@ &::after { background: currentColor; border-radius: 50%; - box-shadow: 0 -.5rem, 0 .5rem; + box-shadow: 0 -5px, 0 5px; color: @light-color; content: ""; - height: .3rem; + height: 3px; position: absolute; - right: .8rem; + right: @unit-2; top: 50%; transform: translate(50%, -50%); - width: .3rem; + width: 3px; z-index: -@zindex-0; } .comparison-label { - left: 1.6rem; + left: @unit-4; } } .comparison-resizer { animation: first-run 1.5s 1 ease-in-out; cursor: ew-resize; - height: 1.5rem; + height: 15px; left: 0; max-width: 100%; - min-width: 1.6rem; + min-width: @unit-4; opacity: 0; outline: none; position: relative; @@ -88,9 +88,9 @@ .comparison-label { background: fade(@dark-color, 50%); - bottom: 1.6rem; + bottom: @unit-4; color: @light-color; - padding: .3rem .8rem; + padding: @unit-1 @unit-2; position: absolute; user-select: none; } @@ -101,13 +101,13 @@ width: 0; } 25% { - width: 4.8rem; + width: @unit-12; } 50% { - width: 1.6rem; + width: @unit-4; } 75% { - width: 2.4rem; + width: @unit-6; } 100% { width: 0; diff --git a/src/empty.less b/src/empty.less index 07d62c5..acfc8a0 100644 --- a/src/empty.less +++ b/src/empty.less @@ -4,15 +4,15 @@ border-radius: @border-radius; color: @gray-color-dark; text-align: center; - padding: 4 * @layout-padding; + padding: 4 * @layout-spacing; .empty-icon { - margin-bottom: 1.5rem; + margin-bottom: @layout-spacing-lg; } .empty-title, .empty-subtitle { - margin: 1rem auto; + margin: @layout-spacing auto; } .empty-subtitle { @@ -20,6 +20,6 @@ } .empty-action { - margin-top: 1.5rem; + margin-top: @layout-spacing-lg; } } diff --git a/src/filters.less b/src/filters.less index e9ecfaf..e417081 100644 --- a/src/filters.less +++ b/src/filters.less @@ -1,7 +1,7 @@ // Filters .filter { .filter-nav { - margin: 1rem 0; + margin: @layout-spacing 0; } .filter-body { diff --git a/src/forms.less b/src/forms.less index 6583585..90201ec 100644 --- a/src/forms.less +++ b/src/forms.less @@ -1,21 +1,21 @@ // Forms .form-group { &:not(:last-child) { - margin-bottom: @layout-padding; + margin-bottom: @layout-spacing; } } // Form element: Label .form-label { display: block; - padding: .6rem 0; + padding: 6px 0; &.label-sm { - padding: .2rem 0; + padding: 2px 0; } &.label-lg { - padding: 1rem 0; + padding: @layout-spacing 0; } } @@ -30,11 +30,11 @@ .control-transition(); display: block; font-size: @font-size; - height: 3.2rem; - line-height: 2rem; + height: @unit-8; + line-height: @line-height; max-width: 100%; outline: none; - padding: .5rem .8rem; + padding: 5px 8px; position: relative; width: 100%; &:focus { @@ -48,14 +48,14 @@ // Input sizes &.input-sm { font-size: @font-size-sm; - height: 2.4rem; - padding: .1rem .8rem; + height: 24px; + padding: 1px 8px; } &.input-lg { font-size: @font-size-lg; - height: 4rem; - padding: .9rem .8rem; + height: 40px; + padding: 9px 8px; } &.input-inline { @@ -78,7 +78,7 @@ // Form element: Input hint .form-input-hint { color: @gray-color; - margin-top: .4rem; + margin-top: @unit-1; .has-success &, .is-success + & { @@ -98,21 +98,21 @@ border-radius: @border-radius; color: inherit; font-size: @font-size; - line-height: 2rem; + line-height: @line-height; outline: none; - padding: .5rem .8rem; + padding: 5px 8px; vertical-align: middle; width: 100%; &[multiple] { option { - padding: .2rem .4rem; + padding: 2px 4px; } } &:not([multiple]) { - background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center / .8rem 1rem; - height: 3.2rem; - padding-right: 2.4rem; + background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 7.5px center / 8px 10px; + height: 32px; + padding-right: 24px; } &:focus { border-color: @primary-color; @@ -125,14 +125,14 @@ // Select sizes &.select-sm { font-size: @font-size-sm; - height: 2.4rem; - padding: .1rem 2rem .1rem .6rem; + height: 24px; + padding: 1px 20px 1px 6px; } &.select-lg { font-size: @font-size-lg; - height: 4rem; - padding: .9rem 2.4rem .9rem .8rem; + height: 40px; + padding: 9px 24px 9px 8px; } } @@ -178,8 +178,8 @@ position: relative; .form-icon { - margin: 0 .8rem; - min-width: 1.4rem; + margin: 0 8px; + min-width: 14px; position: absolute; top: 50%; transform: translateY(-50%); @@ -192,7 +192,7 @@ } .form-input { - padding-left: 3rem; + padding-left: 30px; } } @@ -202,7 +202,7 @@ } .form-input { - padding-right: 3rem; + padding-right: 30px; } } @@ -211,16 +211,16 @@ .form-radio, .form-switch { display: inline-block; - line-height: 2rem; + line-height: @line-height; position: relative; input { clip: rect(0, 0, 0, 0); - height: .1rem; - margin: -.1rem; + height: 1px; + margin: -1px; overflow: hidden; position: absolute; - width: .1rem; + width: 1px; &:focus + .form-icon { border-color: @primary-color; .control-shadow(); @@ -242,14 +242,14 @@ .form-checkbox, .form-radio { - padding: .2rem 2rem; + padding: 2px 20px; .form-icon { background: @bg-color-light; - height: 1.4rem; + height: 14px; left: 0; - top: .5rem; - width: 1.4rem; + top: 5px; + width: 14px; } input { @@ -267,18 +267,18 @@ &:checked + .form-icon { &::before { background-clip: padding-box; - border: .2rem solid @light-color; + border: @border-width-lg solid @light-color; border-left-width: 0; border-top-width: 0; content: ""; - height: 1rem; + height: 10px; left: 50%; - margin-left: -.3rem; - margin-top: -.6rem; + margin-left: -3px; + margin-top: -6px; position: absolute; top: 50%; transform: rotate(45deg); - width: .6rem; + width: 6px; } } &:indeterminate + .form-icon { @@ -287,20 +287,20 @@ &::before { background: @bg-color-light; content: ""; - height: .2rem; + height: 2px; left: 50%; - margin-left: -.5rem; - margin-top: -.1rem; + margin-left: -5px; + margin-top: -1px; position: absolute; top: 50%; - width: 1rem; + width: 10px; } } } } .form-radio { .form-icon { - border-radius: .7rem; + border-radius: 7px; } input { @@ -309,13 +309,13 @@ background: @bg-color-light; border-radius: @border-radius; content: ""; - height: .4rem; + height: 4px; left: 50%; - margin-left: -.2rem; - margin-top: -.2rem; + margin-left: -2px; + margin-top: -2px; position: absolute; top: 50%; - width: .4rem; + width: 4px; } } } @@ -323,34 +323,34 @@ // Form element: Switch .form-switch { - padding: .2rem 2rem .2rem 3.6rem; + padding: 2px 20px 2px 36px; .form-icon { background: @gray-color-light; background-clip: padding-box; - border-radius: .9rem; - height: 1.8rem; + border-radius: 9px; + height: 18px; left: 0; - top: .3rem; - width: 3rem; + top: 3px; + width: 30px; &::before { background: @bg-color-light; - border-radius: .8rem; + border-radius: 8px; content: ""; display: block; - height: 1.6rem; + height: 16px; left: 0; position: absolute; top: 0; .control-transition(); - width: 1.6rem; + width: 16px; } } input { &:checked + .form-icon { &::before { - left: 1.2rem; + left: 12px; } } &:active + .form-icon { @@ -369,16 +369,16 @@ background: @bg-color; border: @border-width solid @border-color-dark; border-radius: @border-radius; - line-height: 2rem; - padding: .5rem .8rem; + line-height: @line-height; + padding: 5px 8px; &.addon-sm { font-size: @font-size-sm; - padding: .1rem .8rem; + padding: 1px 8px; } &.addon-lg { font-size: @font-size-lg; - padding: .9rem .8rem; + padding: 9px 8px; } } .input-group-addon, @@ -396,12 +396,12 @@ } &:not(:first-child):not(:last-child) { border-radius: 0; - margin-left: -.1rem; + margin-left: -1px; } &:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: -.1rem; + margin-left: -1px; } &:focus { z-index: @zindex-0; @@ -458,7 +458,7 @@ input { // Form Horizontal .form-horizontal { - padding: @layout-padding; + padding: @layout-spacing; .form-group { display: flex; @@ -467,6 +467,6 @@ input { .form-checkbox, .form-radio, .form-switch { - margin: .4rem 0; + margin: @unit-4 0; } } diff --git a/src/icons.less b/src/icons.less index b59ecca..ca7672d 100644 --- a/src/icons.less +++ b/src/icons.less @@ -1,5 +1,5 @@ // CSS Icons -@icon-border-width: .2rem; +@icon-border-width: @border-width-lg; .icon { box-sizing: border-box; @@ -8,7 +8,7 @@ font-style: normal; height: 1em; position: relative; - text-indent: -999rem; + text-indent: -9999px; vertical-align: middle; width: 1em; &::before, @@ -150,8 +150,8 @@ background: currentColor; box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em; content: ""; - height: .3rem; - width: .3rem; + height: 3px; + width: 3px; } } @@ -192,8 +192,8 @@ box-shadow: -.4em 0, .4em 0; border-radius: 50%; content: ""; - height: .3rem; - width: .3rem; + height: 3px; + width: 3px; } } .icon-more-vert { diff --git a/src/layout.less b/src/layout.less index 1c657df..0f7bdfe 100644 --- a/src/layout.less +++ b/src/layout.less @@ -2,21 +2,21 @@ .container { margin-left: auto; margin-right: auto; - padding-left: @layout-padding; - padding-right: @layout-padding; + padding-left: @layout-spacing; + padding-right: @layout-spacing; width: 100%; &:extend(.clearfix all); &.grid-1280 { - max-width: 128rem + 2 * @layout-padding; + max-width: @size-xl + 2 * @layout-spacing; } &.grid-960 { - max-width: 96rem + 2 * @layout-padding; + max-width: @size-lg + 2 * @layout-spacing; } &.grid-480 { - max-width: 48rem + 2 * @layout-padding; + max-width: @size-xs + 2 * @layout-spacing; } } @@ -24,8 +24,8 @@ .columns { display: flex; flex-wrap: wrap; - margin-left: -@layout-padding; - margin-right: -@layout-padding; + margin-left: -@layout-spacing; + margin-right: -@layout-spacing; &.col-gapless { margin-left: 0; @@ -44,7 +44,7 @@ .column { flex: 1; max-width: 100%; - padding: @layout-padding; + padding: @layout-spacing; &.col-12, &.col-11, diff --git a/src/media.less b/src/media.less index fcd22e0..455d77c 100644 --- a/src/media.less +++ b/src/media.less @@ -60,10 +60,10 @@ } .figure { - margin: 0 0 @layout-padding 0; + margin: 0 0 @layout-spacing 0; .figure-caption { color: @gray-color-dark; - margin-top: @layout-padding; + margin-top: @layout-spacing; } } diff --git a/src/menus.less b/src/menus.less index ebd7400..06de453 100644 --- a/src/menus.less +++ b/src/menus.less @@ -5,9 +5,9 @@ list-style: none; margin: 0; min-width: @control-min-width; - padding: 1rem; - .shadow-variant(.1rem); - transform: translateY(.5rem); + padding: @layout-spacing; + .shadow-variant(1px); + transform: translateY(@layout-spacing-sm); z-index: @zindex-1; &.menu-nav { @@ -16,7 +16,7 @@ .menu-item { margin-top: 0; - padding: 0 .8rem; + padding: 0 @unit-2; text-decoration: none; user-select: none; @@ -24,8 +24,8 @@ border-radius: @border-radius; color: inherit; display: block; - margin: 0 -.8rem; - padding: .6rem .8rem; + margin: 0 -@unit-2; + padding: 6px 8px; text-decoration: none; &:focus, &:hover { @@ -41,10 +41,10 @@ .menu-badge { float: right; - padding: .6rem 0; + padding: 6px 0; .btn { - margin-top: -.2rem; + margin-top: -2px; } } } diff --git a/src/meters.less b/src/meters.less index bf4d0b9..b7a6190 100644 --- a/src/meters.less +++ b/src/meters.less @@ -7,7 +7,7 @@ border-radius: @border-radius; display: block; width: 100%; - height: 1.6rem; + height: @unit-4; &::-webkit-meter-inner-element { display: block; diff --git a/src/mixins.less b/src/mixins.less index b161e0d..5e5ddda 100644 --- a/src/mixins.less +++ b/src/mixins.less @@ -1,4 +1,11 @@ // Mixins +// Avatar mixin +.avatar-base(@size: @unit-8) { + font-size: @size / 2.2; + height: @size; + width: @size; +} + // Clearfix mixin .clearfix() { &::after { @@ -10,7 +17,7 @@ // Component focus shadow .control-shadow(@color: @dark-color) { - box-shadow: 0 0 0 .2rem fade(@color, 10%); + box-shadow: 0 0 0 2px fade(@color, 10%); } // Component transition @@ -29,7 +36,7 @@ border-radius: @border-radius; display: inline-block; line-height: 1; - padding: .3rem .4rem; + padding: 3px 4px; vertical-align: baseline; } @@ -40,7 +47,7 @@ // Shadow mixin .shadow-variant(@offset) { - box-shadow: 0 @offset (@offset+.1rem)*2 fade(@dark-color, 30%); + box-shadow: 0 @offset (@offset+1px)*2 fade(@dark-color, 30%); } // Colors mixin diff --git a/src/modals.less b/src/modals.less index 4353a54..60aa2b1 100644 --- a/src/modals.less +++ b/src/modals.less @@ -7,7 +7,7 @@ left: 0; opacity: 0; overflow: hidden; - padding: @layout-padding; + padding: @layout-spacing; position: fixed; right: 0; top: 0; @@ -31,14 +31,14 @@ .modal-container { animation: slide-down .2s ease 1; - max-width: 64rem; + max-width: 640px; z-index: @zindex-0; } } &.modal-sm { .modal-container { - max-width: 32rem; + max-width: @control-max-width; } } } @@ -48,11 +48,11 @@ border-radius: @border-radius; display: block; padding: 0; - .shadow-variant(.4rem); + .shadow-variant(4px); text-align: left; .modal-header { - padding: @layout-padding-lg; + padding: @layout-spacing-lg; .modal-title { font-size: @font-size-lg; @@ -63,12 +63,12 @@ .modal-body { max-height: 50vh; overflow-y: auto; - padding: @layout-padding-lg; + padding: @layout-spacing-lg; position: relative; } .modal-footer { - padding: @layout-padding-lg; + padding: @layout-spacing-lg; text-align: right; } } diff --git a/src/navigation.less b/src/navigation.less index 08404b1..a129886 100644 --- a/src/navigation.less +++ b/src/navigation.less @@ -4,7 +4,7 @@ .pagination, .nav { list-style: none; - margin: .5rem 0; + margin: @unit-1 0; } @import 'breadcrumbs.less'; diff --git a/src/navs.less b/src/navs.less index 7276e22..edfc3d3 100644 --- a/src/navs.less +++ b/src/navs.less @@ -6,7 +6,7 @@ .nav-item { a { color: @gray-color-dark; - padding: .6rem .8rem; + padding: @unit-1 @unit-2; text-decoration: none; &:focus, &:hover { @@ -26,7 +26,7 @@ } & .nav { - margin-bottom: 1rem; - margin-left: 2rem; + margin-bottom: @unit-2; + margin-left: @unit-4; } } diff --git a/src/pagination.less b/src/pagination.less index 3d74037..e79f873 100644 --- a/src/pagination.less +++ b/src/pagination.less @@ -3,18 +3,18 @@ display: flex; .page-item { - margin: 1rem .1rem; + margin: 10px 1px; span { display: inline-block; - padding: .6rem .4rem; + padding: 6px 4px; } a { border-radius: @border-radius; color: @gray-color-dark; display: inline-block; - padding: .6rem .8rem; + padding: 6px 8px; text-decoration: none; &:focus, &:hover { diff --git a/src/panels.less b/src/panels.less index e361e25..09495de 100644 --- a/src/panels.less +++ b/src/panels.less @@ -8,7 +8,7 @@ .panel-header, .panel-footer { flex: 0 0 auto; - padding: @layout-padding-lg; + padding: @layout-spacing-lg; } .panel-nav { @@ -18,11 +18,11 @@ .panel-body { flex: 1 1 auto; overflow-y: auto; - padding: 0 @layout-padding-lg; + padding: 0 @layout-spacing-lg; } .panel-title { - font-size: 2rem; + font-size: @font-size-lg; } .panel-subtitle { diff --git a/src/parallax.less b/src/parallax.less index 9886206..beca542 100644 --- a/src/parallax.less +++ b/src/parallax.less @@ -1,8 +1,8 @@ // Parallax @parallax-deg: 3deg; -@parallax-offset: .65rem; -@parallax-offset-z: 10rem; -@parallax-perspective: 100rem; +@parallax-offset: 6.5px; +@parallax-offset-z: 100px; +@parallax-perspective: 1000px; @parallax-scale: 1 - unit(@parallax-offset-z / @parallax-perspective); .parallax { @@ -13,7 +13,7 @@ .parallax-content { height: auto; - .shadow-variant(2rem); + .shadow-variant(20px); transform: perspective(@parallax-perspective); transform-style: preserve-3d; transition: all .4s ease; @@ -39,7 +39,7 @@ left: 0; position: absolute; text-align: center; - text-shadow: 0 0 3rem fade(@dark-color, 95%); + text-shadow: 0 0 4px fade(@dark-color, 95%); top: 0; transform: translateZ(@parallax-offset-z) scale(@parallax-scale); transition: all .4s ease; diff --git a/src/popovers.less b/src/popovers.less index a7b90f4..4683a67 100644 --- a/src/popovers.less +++ b/src/popovers.less @@ -7,12 +7,12 @@ content: attr(data-tooltip); opacity: 0; left: 50%; - padding: @layout-padding; + padding: @layout-spacing; position: absolute; top: 0; transform: translate(-50%, -50%) scale(0); transition: transform .2s ease; - width: 32rem; + width: @control-max-width; z-index: @zindex-4; } @@ -65,6 +65,6 @@ .card { border: 0; - .shadow-variant(.4rem); + .shadow-variant(4px); } } diff --git a/src/progress.less b/src/progress.less index 9fca956..cf9e34b 100644 --- a/src/progress.less +++ b/src/progress.less @@ -6,7 +6,7 @@ border: 0; border-radius: @border-radius; color: @primary-color; - height: .4rem; + height: @unit-1; position: relative; width: 100%; diff --git a/src/sliders.less b/src/sliders.less index 779117d..c90c334 100644 --- a/src/sliders.less +++ b/src/sliders.less @@ -5,7 +5,7 @@ background: transparent; display: block; width: 100%; - height: 2.4rem; + height: @unit-6; &:focus { .control-shadow(); @@ -18,26 +18,26 @@ background: @primary-color; border: 0; border-radius: 50%; - height: 1.2rem; - margin-top: -.5rem; + height: @unit-3; + margin-top: -5px; transition: transform .2s ease; - width: 1.2rem; + width: @unit-3; } &::-moz-range-thumb { background: @primary-color; border: 0; border-radius: 50%; - height: 1.2rem; + height: @unit-3; transition: transform .2s ease; - width: 1.2rem; + width: @unit-3; } &::-ms-thumb { background: @primary-color; border: 0; border-radius: 50%; - height: 1.2rem; + height: @unit-3; transition: transform .2s ease; - width: 1.2rem; + width: @unit-3; } &:active { @@ -72,19 +72,19 @@ &::-webkit-slider-runnable-track { background: @bg-color-dark; border-radius: @border-radius; - height: .2rem; + height: @unit-h; width: 100%; } &::-moz-range-track { background: @bg-color-dark; border-radius: @border-radius; - height: .2rem; + height: @unit-h; width: 100%; } &::-ms-track { background: @bg-color-dark; border-radius: @border-radius; - height: .2rem; + height: @unit-h; width: 100%; } &::-ms-fill-lower { diff --git a/src/steps.less b/src/steps.less index 800fdc0..fa0167f 100644 --- a/src/steps.less +++ b/src/steps.less @@ -3,44 +3,44 @@ display: flex; flex-wrap: nowrap; list-style: none; - margin: .5rem 0; + margin: @unit-1 0; width: 100%; .step-item { flex: 1 1 0; margin-top: 0; - min-height: 2rem; + min-height: 20px; text-align: center; position: relative; &:not(:first-child)::before { background: @primary-color; content: ""; - height: .2rem; + height: 2px; left: -50%; position: absolute; - top: .9rem; + top: 9px; width: 100%; } a { color: @gray-color; display: inline-block; - padding: 2rem 1rem 0; + padding: 20px 10px 0; text-decoration: none; &::before { background: @primary-color; - border: .2rem solid @light-color; + border: @border-width-lg solid @light-color; border-radius: 50%; content: ""; display: block; - height: 1.2rem; + height: @unit-3; left: 50%; position: absolute; - top: .4rem; + top: @unit-1; transform: translateX(-50%); - width: 1.2rem; + width: @unit-3; z-index: @zindex-0; } } @@ -49,7 +49,7 @@ a { &::before { background: @light-color; - border: .2rem solid @primary-color; + border: @border-width-lg solid @primary-color; } } diff --git a/src/tables.less b/src/tables.less index 61f36e8..bbe47e2 100644 --- a/src/tables.less +++ b/src/tables.less @@ -37,7 +37,7 @@ td, th { border-bottom: @border-width solid @border-color; - padding: 1.5rem 1rem; + padding: @unit-3 @unit-2; } th { diff --git a/src/tabs.less b/src/tabs.less index 781c2f2..1abfe75 100644 --- a/src/tabs.less +++ b/src/tabs.less @@ -13,11 +13,11 @@ } a { - border-bottom: .2rem solid transparent; + border-bottom: @border-width-lg solid transparent; color: inherit; display: block; margin-top: 0; - padding: .6rem 1.2rem .4rem 1.2rem; + padding: 6px 12px 4px 12px; text-decoration: none; &:focus, &:hover { @@ -39,8 +39,8 @@ .badge { &[data-badge]::after { position: absolute; - right: -.4rem; - top: -.4rem; + right: -4px; + top: -4px; transform: translate(0, 0); } } @@ -49,7 +49,7 @@ &:not(.tab-block) { .badge { - padding-right: .2rem; + padding-right: 2px; } } } diff --git a/src/tiles.less b/src/tiles.less index 1214064..79c1a69 100644 --- a/src/tiles.less +++ b/src/tiles.less @@ -11,18 +11,18 @@ .tile-content { flex: 1 1 auto; &:not(:first-child) { - padding-left: 1rem; + padding-left: @unit-2; } &:not(:last-child) { - padding-right: 1rem; + padding-right: @unit-2; } } .tile-title { - line-height: 2rem; + line-height: @line-height; } .tile-subtitle { color: lighten(@body-font-color, 40%); - line-height: 2rem; + line-height: @line-height; } &.tile-centered { diff --git a/src/timelines.less b/src/timelines.less index 277d10c..02b421e 100644 --- a/src/timelines.less +++ b/src/timelines.less @@ -2,16 +2,16 @@ .timeline { .timeline-item { display: flex; - margin-bottom: 2.4rem; + margin-bottom: @unit-6; position: relative; &::before { background: @border-color; content: ""; height: 100%; - left: 1.1rem; + left: 11px; position: absolute; - top: 2.4rem; - width: .2rem; + top: @unit-6; + width: 2px; } .timeline-left { @@ -20,32 +20,32 @@ .timeline-content { flex: 1 1 auto; - padding: .2rem 0 .2rem @layout-padding-lg; + padding: 2px 0 2px @layout-spacing-lg; } .timeline-icon { border-radius: 50%; color: @light-color; display: block; - height: 2.4rem; + height: @unit-6; text-align: center; - width: 2.4rem; + width: @unit-6; &::before { - border: .2rem solid @primary-color; + border: @border-width-lg solid @primary-color; border-radius: 50%; content: ""; display: block; - height: .8rem; - left: .8rem; + height: @unit-2; + left: @unit-2; position: absolute; - top: .8rem; - width: .8rem; + top: @unit-2; + width: @unit-2; } &.icon-lg { background: @primary-color; - font-size: 1.6rem; - line-height: 2rem; + font-size: @font-size-lg; + line-height: @line-height; &::before { content: none; } diff --git a/src/toasts.less b/src/toasts.less index 8fe8388..5ec0ef8 100644 --- a/src/toasts.less +++ b/src/toasts.less @@ -4,7 +4,7 @@ border-radius: @border-radius; color: @light-color; display: block; - padding: @layout-padding; + padding: @layout-spacing; .toast-variant(@dark-color); width: 100%; @@ -36,6 +36,6 @@ } .btn-clear { - margin: .2rem -.2rem .2rem .4rem; + margin: 2px -2px 2px 4px; } } diff --git a/src/tooltips.less b/src/tooltips.less index 25e7bf6..9afeb4d 100644 --- a/src/tooltips.less +++ b/src/tooltips.less @@ -10,14 +10,14 @@ display: block; font-size: @font-size-sm; left: 50%; - max-width: 32rem; + max-width: @control-max-width; opacity: 0; overflow: hidden; - padding: .4rem .8rem; + padding: @unit-1 @unit-2; pointer-events: none; position: absolute; text-overflow: ellipsis; - transform: translate(-50%, 1rem); + transform: translate(-50%, @unit-2); transition: all .2s ease; white-space: nowrap; z-index: @zindex-2; @@ -26,7 +26,7 @@ &:hover { &::after { opacity: 1; - transform: translate(-50%, -.5rem); + transform: translate(-50%, -@unit-1); } } &[disabled], @@ -38,12 +38,12 @@ &::after { bottom: 50%; left: 100%; - transform: translate(-1rem, 50%); + transform: translate(-@unit-1, 50%); } &:focus, &:hover { &::after { - transform: translate(.5rem, 50%); + transform: translate(@unit-1, 50%); } } } @@ -51,12 +51,12 @@ &::after { bottom: auto; top: 100%; - transform: translate(-50%, -1rem); + transform: translate(-50%, -@unit-2); } &:focus, &:hover { &::after { - transform: translate(-50%, .5rem); + transform: translate(-50%, @unit-1); } } } @@ -65,12 +65,12 @@ bottom: 50%; left: auto; right: 100%; - transform: translate(1rem, 50%); + transform: translate(@unit-2, 50%); } &:focus, &:hover { &::after { - transform: translate(-.5rem, 50%); + transform: translate(-@unit-1, 50%); } } } diff --git a/src/typography.less b/src/typography.less index 567eec0..ad5ee84 100644 --- a/src/typography.less +++ b/src/typography.less @@ -9,32 +9,32 @@ h6 { color: inherit; font-weight: 500; line-height: 1.2; - margin-bottom: 1.5rem; + margin-bottom: @unit-4; margin-top: 0; } h1 { - font-size: 5rem; + font-size: 50px; } h2 { - font-size: 4rem; + font-size: 40px; } h3 { - font-size: 3rem; + font-size: 30px; } h4 { - font-size: 2.4rem; + font-size: 24px; } h5 { - font-size: 2rem; + font-size: 20px; } h6 { - font-size: 1.6rem; + font-size: 16px; } // Paragraphs p { - line-height: 2.4rem; - margin: 0 0 1rem; + line-height: 1.2 * @line-height; + margin: 0 0 @unit-3; } // Semantic text elements @@ -45,7 +45,7 @@ u { } abbr[title] { - border-bottom: .1rem dotted; + border-bottom: @border-width dotted; cursor: help; text-decoration: none; } @@ -62,9 +62,9 @@ mark { // Blockquote blockquote { - border-left: .2rem solid @border-color; + border-left: @border-width-lg solid @border-color; margin-left: 0; - padding: 1rem 2rem; + padding: @unit-2 @unit-4; p:last-child { margin-bottom: 0; @@ -78,16 +78,16 @@ blockquote { // Lists ul, ol { - margin: 2rem 0 2rem 2rem; + margin: @unit-4 0 @unit-4 @unit-4; padding: 0; ul, ol { - margin: 1.5rem 0 1.5rem 2rem; + margin: @unit-4 0 @unit-4 @unit-4; } li { - margin-top: 1rem; + margin-top: @unit-2; } } @@ -112,6 +112,6 @@ dl { font-weight: bold; } dd { - margin: .5rem 0 1.5rem 0; + margin: @unit-2 0 @unit-4 0; } } diff --git a/src/utilities/display.less b/src/utilities/display.less index f6a54b5..a00aa4a 100644 --- a/src/utilities/display.less +++ b/src/utilities/display.less @@ -34,12 +34,12 @@ .text-assistive { border: 0; clip: rect(0,0,0,0); - height: .1rem; - margin: -.1rem; + height: 1px; + margin: -1px; overflow: hidden; padding: 0; position: absolute; - width: .1rem; + width: 1px; } .hand { cursor: pointer; diff --git a/src/utilities/divider.less b/src/utilities/divider.less index fe30f68..f59d0ea 100644 --- a/src/utilities/divider.less +++ b/src/utilities/divider.less @@ -10,35 +10,35 @@ content: attr(data-content); display: inline-block; font-size: @font-size-sm; - padding: 0 .8rem; - transform: translateY(-1.1rem); + padding: 0 @unit-2; + transform: translateY(-@font-size-sm + @border-width); } } .divider { border-top: @border-width solid @border-color; - height: .1rem; - margin: 1rem 0; + height: @border-width; + margin: @layout-spacing 0; } .divider-vert { display: block; - padding: @layout-padding; + padding: @layout-spacing; &::before { border-left: @border-width solid @border-color; - bottom: @layout-padding; + bottom: @layout-spacing; content: ""; display: block; left: 50%; position: absolute; - top: @layout-padding; + top: @layout-spacing; transform: translateX(-50%); } &[data-content]::after { left: 50%; - padding: .4rem 0; + padding: @unit-1 0; position: absolute; top: 50%; transform: translate(-50%, -50%); diff --git a/src/utilities/loading.less b/src/utilities/loading.less index 6f8b6e5..8b5c784 100644 --- a/src/utilities/loading.less +++ b/src/utilities/loading.less @@ -1,24 +1,24 @@ // Loading .loading { color: transparent !important; - min-height: 1.6rem; + min-height: @unit-4; pointer-events: none; position: relative; &::after { animation: loading 500ms infinite linear; - border: .2rem solid @primary-color; - border-radius: .8rem; + border: @border-width-lg solid @primary-color; + border-radius: @unit-2; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; - height: 1.6rem; + height: @unit-4; left: 50%; - margin-left: -.8rem; - margin-top: -.8rem; + margin-left: -@unit-2; + margin-top: -@unit-2; position: absolute; top: 50%; - width: 1.6rem; + width: @unit-4; z-index: @zindex-0; } } diff --git a/src/utilities/position.less b/src/utilities/position.less index c71af85..71957d5 100644 --- a/src/utilities/position.less +++ b/src/utilities/position.less @@ -27,64 +27,64 @@ // Spacing .mt-10 { - margin-top: 1rem; + margin-top: 10px; } .mr-10 { - margin-right: 1rem; + margin-right: 10px; } .mb-10 { - margin-bottom: 1rem; + margin-bottom: 10px; } .ml-10 { - margin-left: 1rem; + margin-left: 10px; } .m-10 { - margin: 1rem; + margin: 10px; } .mt-5 { - margin-top: .5rem; + margin-top: 5px; } .mr-5 { - margin-right: .5rem; + margin-right: 5px; } .mb-5 { - margin-bottom: .5rem; + margin-bottom: 5px; } .ml-5 { - margin-left: .5rem; + margin-left: 5px; } .m-5 { - margin: .5rem; + margin: 5px; } .pt-10 { - padding-top: 1rem; + padding-top: 10px; } .pr-10 { - padding-right: 1rem; + padding-right: 10px; } .pb-10 { - padding-bottom: 1rem; + padding-bottom: 10px; } .pl-10 { - padding-left: 1rem; + padding-left: 10px; } .p-10 { - padding: 1rem; + padding: 10px; } .pt-5 { - padding-top: .5rem; + padding-top: 5px; } .pr-5 { - padding-right: .5rem; + padding-right: 5px; } .pb-5 { - padding-bottom: .5rem; + padding-bottom: 5px; } .pl-5 { - padding-left: .5rem; + padding-left: 5px; } .p-5 { - padding: .5rem; + padding: 5px; } diff --git a/src/utilities/shadow.less b/src/utilities/shadow.less index 9d8ff2a..33086ad 100644 --- a/src/utilities/shadow.less +++ b/src/utilities/shadow.less @@ -3,14 +3,14 @@ .shadow-variant(0); } .shadow-1 { - .shadow-variant(.1rem); + .shadow-variant(1px); } .shadow-2 { - .shadow-variant(.2rem); + .shadow-variant(2px); } .shadow-3 { - .shadow-variant(.3rem); + .shadow-variant(3px); } .shadow-4 { - .shadow-variant(.4rem); + .shadow-variant(4px); } diff --git a/src/variables.less b/src/variables.less index 0b7ba53..42eec35 100644 --- a/src/variables.less +++ b/src/variables.less @@ -5,9 +5,10 @@ @html-line-height: 1.428571429; @body-bg: @bg-color-light; @body-font-color: @dark-color; -@font-size: 1.4rem; -@font-size-sm: 1.2rem; -@font-size-lg: 1.6rem; +@font-size: 14px; +@font-size-sm: 12px; +@font-size-lg: 16px; +@line-height: 20px; // Fonts // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ @@ -18,12 +19,31 @@ @cjk-ko-font-family: @base-font-family, "Malgun Gothic", @fallback-font-family; @body-font-family: @base-font-family, @fallback-font-family; +// Unit sizes +@unit-0: 1px; +@unit-h: 2px; +@unit-1: 4px; +@unit-2: 8px; +@unit-3: 12px; +@unit-4: 16px; +@unit-5: 20px; +@unit-6: 24px; +@unit-7: 28px; +@unit-8: 32px; +@unit-9: 36px; +@unit-10: 40px; +@unit-12: 48px; +@unit-16: 64px; + // Sizes -@layout-padding: 1rem; -@layout-padding-lg: 1.5rem; -@control-min-width: 18rem; -@border-radius: .2rem; -@border-width: .1rem; +@layout-spacing: 10px; +@layout-spacing-sm: 5px; +@layout-spacing-lg: 15px; +@control-min-width: 180px; +@control-max-width: 320px; +@border-radius: 2px; +@border-width: 1px; +@border-width-lg: 2px; // Colors // Core colors |