diff options
52 files changed, 979 insertions, 725 deletions
diff --git a/src/accordions.less b/src/accordions.less index 14db162..810d264 100644 --- a/src/accordions.less +++ b/src/accordions.less @@ -2,24 +2,33 @@ .accordion { .accordion-item { input { - &:checked ~ .accordion-body { - max-height: 100rem; - transition: max-height 3s ease; + &:checked { + & ~ .accordion-header { + .icon { + transform: rotate(90deg); + + } + } + & ~ .accordion-body { + max-height: 1000px; + } } } .accordion-header { - background: @bg-color; display: block; - padding: 1rem 1.6rem; + padding: @unit-1 @unit-2; + + .icon { + transition: all .2s ease; + } } .accordion-body { - margin-bottom: .8rem; + margin-bottom: @layout-spacing; max-height: 0; overflow: hidden; - padding: .2rem .8rem; - transition: max-height .3s ease; + transition: max-height .2s 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 e0af88c..a68cb39 100644 --- a/src/asian.less +++ b/src/asian.less @@ -1,9 +1,14 @@ // Optimized for East Asian CJK -:lang(zh), -:lang(ja), -:lang(ko), -.cjk { - font-family: @cjk-font-family; +:lang(zh) { + font-family: @cjk-zh-font-family; +} + +:lang(ja) { + font-family: @cjk-jp-font-family; +} + +:lang(ko) { + font-family: @cjk-ko-font-family; } :lang(zh), @@ -11,10 +16,10 @@ .cjk { ins, u { - border-bottom: .1rem solid; + border-bottom: @border-width solid; text-decoration: none; } - // Credit: https://github.com/ethantw/Han + del + del, del + s, ins + ins, diff --git a/src/autocomplete.less b/src/autocomplete.less index 34f2240..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; - padding: .3rem .8rem; + 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..c62df9d 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: .5rem; + box-shadow: 0 0 0 .1rem @bg-color-light; color: @light-color; content: attr(data-badge); display: inline-block; - transform: translate(-.2rem, -1rem); + transform: translate(-.1rem, -.5rem); } } &[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..4c3824a 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 .1rem @primary-color; } } } diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less index acde7b3..280250b 100644 --- a/src/breadcrumbs.less +++ b/src/breadcrumbs.less @@ -1,19 +1,26 @@ // Breadcrumbs .breadcrumb { - padding: 1.2rem; + padding: @unit-1 0; .breadcrumb-item { + color: @gray-color-dark; display: inline-block; margin: 0; + padding: @unit-1 0; - &:last-child { - color: @gray-color; + &:not(:last-child) { + margin-right: @unit-1; + + a { + color: @gray-color-dark; + } } + &:not(:first-child) { &::before { color: @gray-color-light; content: "/"; - padding: 0 .4rem; + padding-right: @unit-1; } } } diff --git a/src/buttons.less b/src/buttons.less index 88f87bf..3f1e326 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -9,24 +9,23 @@ cursor: pointer; display: inline-block; font-size: @font-size; - height: 3.2rem; - line-height: 2rem; + height: @control-size; + line-height: @line-height; outline: none; - padding: .5rem .8rem; + padding: @control-padding-v @control-padding-h; text-align: center; text-decoration: none; user-select: none; vertical-align: middle; white-space: nowrap; &:focus { - background: @secondary-color-light; + background: @secondary-color; .control-shadow(); text-decoration: none; } &:hover { - background: @primary-color; + background: @secondary-color; border-color: @primary-color-dark; - color: @light-color; text-decoration: none; } &:active, @@ -35,6 +34,12 @@ border-color: darken(@primary-color-dark, 5%); color: @light-color; text-decoration: none; + &.loading { + &::after { + border-bottom-color: @light-color; + border-left-color: @light-color; + } + } } &[disabled], &:disabled, @@ -85,14 +90,14 @@ // Button Sizes &.btn-sm { font-size: @font-size-sm; - height: 2.4rem; - padding: .1rem .8rem; + height: @control-size-sm; + padding: @control-padding-v-sm @control-padding-h; } &.btn-lg { font-size: @font-size-lg; - height: 4rem; - padding: .9rem .8rem; + height: @control-size-lg; + padding: @control-padding-v-lg @control-padding-h; } // Button Block @@ -103,16 +108,16 @@ // Button Action &.btn-action { - width: 3.2rem; + width: @control-size; padding-left: 0; padding-right: 0; &.btn-sm { - width: 2.4rem; + width: @control-size-sm; } &.btn-lg { - width: 4rem; + width: @control-size-lg; } } @@ -121,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; @@ -153,12 +158,12 @@ } &:not(:first-child):not(:last-child) { border-radius: 0; - margin-left: -.1rem; + margin-left: -@border-width; } &:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: -.1rem; + margin-left: -@border-width; } &:focus, &:hover, diff --git a/src/calendars.less b/src/calendars.less index 621b9d1..e5764ea 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: 5.5rem; 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 3a68b3a..1a84c21 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; @@ -36,12 +36,7 @@ } } - .card-title { - font-size: 2rem; - } - .card-subtitle { color: lighten(@body-font-color, 40%); - font-size: @font-size-sm; } } diff --git a/src/carousels.less b/src/carousels.less index ee30edf..276bc1f 100644 --- a/src/carousels.less +++ b/src/carousels.less @@ -47,10 +47,10 @@ z-index: @zindex-2; } .item-prev { - left: 2rem; + left: 1rem; } .item-next { - right: 2rem; + right: 1rem; } } @@ -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: 10rem; 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: 2.5rem; position: relative; &::before { background: currentColor; content: ""; display: block; - height: .3rem; + height: @border-width-lg; position: absolute; - top: 2rem; + top: .5rem; 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..f820978 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: 1rem; width: 100%; } } diff --git a/src/comparison-sliders.less b/src/comparison-sliders.less index 84a7a31..169caf4 100644 --- a/src/comparison-sliders.less +++ b/src/comparison-sliders.less @@ -18,25 +18,25 @@ img { height: 100%; object-fit: none; - object-position: left top; + object-position: left center; position: absolute; width: 100%; - z-index: -1; } } .comparison-before { width: 100%; + z-index: 1; .comparison-label { - right: 1.6rem; + right: @unit-4; } } .comparison-after { max-width: 100%; min-width: 0; - z-index: @zindex-0; + z-index: 2; &::before { background: transparent; @@ -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,29 @@ &::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; - z-index: -@zindex-0; + width: 3px; } .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: @unit-4; left: 0; max-width: 100%; - min-width: 1.6rem; + min-width: @unit-4; opacity: 0; outline: none; position: relative; @@ -88,9 +87,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 +100,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/dropdowns.less b/src/dropdowns.less index 4d835e7..c1684a0 100644 --- a/src/dropdowns.less +++ b/src/dropdowns.less @@ -4,9 +4,11 @@ position: relative; .menu { - animation: slide-down .2s ease 1; + animation: slide-down .15s ease 1; display: none; left: 0; + max-height: 50vh; + overflow-y: auto; position: absolute; top: 100%; } diff --git a/src/empty.less b/src/empty.less index 295758c..acfc8a0 100644 --- a/src/empty.less +++ b/src/empty.less @@ -4,11 +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: @layout-spacing-lg; + } .empty-title, .empty-subtitle { - margin: 1rem auto; + margin: @layout-spacing auto; } .empty-subtitle { @@ -16,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..b0e9a9e 100644 --- a/src/forms.less +++ b/src/forms.less @@ -1,21 +1,31 @@ // Forms .form-group { &:not(:last-child) { - margin-bottom: @layout-padding; + margin-bottom: @layout-spacing; } } +fieldset { + margin-bottom: @layout-spacing-lg; +} + +legend { + font-size: @font-size-lg; + font-weight: 500; + margin-bottom: @layout-spacing-lg; +} + // Form element: Label .form-label { display: block; - padding: .6rem 0; + padding: @control-padding-v + @border-width 0; &.label-sm { - padding: .2rem 0; + padding: @control-padding-v-sm + @border-width 0; } &.label-lg { - padding: 1rem 0; + padding: @control-padding-v-lg + @border-width 0; } } @@ -30,11 +40,11 @@ .control-transition(); display: block; font-size: @font-size; - height: 3.2rem; - line-height: 2rem; + height: @control-size; + line-height: @line-height; max-width: 100%; outline: none; - padding: .5rem .8rem; + padding: @control-padding-v @control-padding-h; position: relative; width: 100%; &:focus { @@ -48,14 +58,14 @@ // Input sizes &.input-sm { font-size: @font-size-sm; - height: 2.4rem; - padding: .1rem .8rem; + height: @control-size-sm; + padding: @control-padding-v-sm @control-padding-h; } &.input-lg { font-size: @font-size-lg; - height: 4rem; - padding: .9rem .8rem; + height: @control-size-lg; + padding: @control-padding-v-lg @control-padding-h; } &.input-inline { @@ -78,7 +88,8 @@ // Form element: Input hint .form-input-hint { color: @gray-color; - margin-top: .4rem; + font-size: @font-size-sm; + margin-top: @unit-1; .has-success &, .is-success + & { @@ -98,21 +109,21 @@ border-radius: @border-radius; color: inherit; font-size: @font-size; - line-height: 2rem; + line-height: @line-height; outline: none; - padding: .5rem .8rem; + padding: @control-padding-v @control-padding-h; vertical-align: middle; width: 100%; &[multiple] { option { - padding: .2rem .4rem; + padding: @unit-h @unit-1; } } &: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 (@control-icon-size / 2) center / .4rem .5rem; + height: @control-size; + padding-right: @control-icon-size + @control-padding-h; } &:focus { border-color: @primary-color; @@ -125,50 +136,14 @@ // Select sizes &.select-sm { font-size: @font-size-sm; - height: 2.4rem; - padding: .1rem 2rem .1rem .6rem; + height: @control-size-sm; + padding: @control-padding-v-sm (@control-icon-size + @control-padding-h) @control-padding-v-sm @control-padding-h; } &.select-lg { font-size: @font-size-lg; - height: 4rem; - padding: .9rem 2.4rem .9rem .8rem; - } -} - -// Form validation states -.form-input, -.form-select { - .has-success &, - &.is-success { - border-color: @control-color-success; - &:focus { - .control-shadow(@control-color-success); - } - } - - .has-error &, - &.is-error { - border-color: @control-color-error; - &:focus { - .control-shadow(@control-color-error); - } - } -} - -// validation based on :placeholder-shown (Edge doesn't support it yet) -.form-input { - &:not(:placeholder-shown) { - &:invalid { - border-color: @control-color-error; - &:focus { - .control-shadow(@control-color-error); - } - - & + .form-input-hint { - color: @control-color-error; - } - } + height: @control-size-lg; + padding: @control-padding-v-lg (@control-icon-size + @control-padding-h) @control-padding-v-lg @control-padding-h; } } @@ -178,31 +153,32 @@ position: relative; .form-icon { - margin: 0 .8rem; - min-width: 1.4rem; + height: @control-icon-size; + margin: 0 @control-padding-v; position: absolute; top: 50%; transform: translateY(-50%); + width: @control-icon-size; } } .has-icon-left { .form-icon { - left: 0; + left: @border-width; } .form-input { - padding-left: 3rem; + padding-left: @control-icon-size + @control-padding-v * 2; } } .has-icon-right { .form-icon { - right: 0; + right: @border-width; } .form-input { - padding-right: 3rem; + padding-right: @control-icon-size + @control-padding-v * 2; } } @@ -211,16 +187,17 @@ .form-radio, .form-switch { display: inline-block; - line-height: 2rem; + line-height: @line-height; + padding: (@control-size-sm - @line-height) / 2 (@control-icon-size + @control-padding-h); 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 +219,12 @@ .form-checkbox, .form-radio { - padding: .2rem 2rem; - .form-icon { background: @bg-color-light; - height: 1.4rem; + height: @control-icon-size; left: 0; - top: .5rem; - width: 1.4rem; + top: (@control-size-sm - @control-icon-size) / 2; + width: @control-icon-size; } input { @@ -267,18 +242,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 +262,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: @control-icon-size / 2; } input { @@ -309,13 +284,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 +298,34 @@ // Form element: Switch .form-switch { - padding: .2rem 2rem .2rem 3.6rem; + padding-left: (@unit-8 + @control-padding-h); .form-icon { background: @gray-color-light; background-clip: padding-box; - border-radius: .9rem; - height: 1.8rem; + border-radius: @unit-2 + @border-width; + height: @unit-4 + @border-width * 2; left: 0; - top: .3rem; - width: 3rem; + top: (@control-size-sm - @unit-4) / 2 - @border-width; + width: @unit-8; &::before { background: @bg-color-light; - border-radius: .8rem; + border-radius: @unit-2; content: ""; display: block; - height: 1.6rem; + height: @unit-4; left: 0; position: absolute; top: 0; .control-transition(); - width: 1.6rem; + width: @unit-4; } } input { &:checked + .form-icon { &::before { - left: 1.2rem; + left: 14px; } } &:active + .form-icon { @@ -369,16 +344,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: @control-padding-v @control-padding-h; &.addon-sm { font-size: @font-size-sm; - padding: .1rem .8rem; + padding: @control-padding-v-sm @control-padding-h; } &.addon-lg { font-size: @font-size-lg; - padding: .9rem .8rem; + padding: @control-padding-v-lg @control-padding-h; } } .input-group-addon, @@ -396,12 +371,12 @@ } &:not(:first-child):not(:last-child) { border-radius: 0; - margin-left: -.1rem; + margin-left: -@border-width; } &:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: -.1rem; + margin-left: -@border-width; } &:focus { z-index: @zindex-0; @@ -417,6 +392,65 @@ } } +// Form validation states +.form-input, +.form-select { + .has-success &, + &.is-success { + border-color: @control-color-success; + &:focus { + .control-shadow(@control-color-success); + } + } + + .has-error &, + &.is-error { + border-color: @control-color-error; + &:focus { + .control-shadow(@control-color-error); + } + } +} + +.form-checkbox, +.form-radio, +.form-switch { + .has-error &, + &.is-error { + .form-icon { + border-color: @control-color-error; + } + + input { + &:checked + .form-icon { + background: @control-color-error; + border-color: @control-color-error; + } + + &:focus + .form-icon { + border-color: @control-color-error; + .control-shadow(@control-color-error); + } + } + } +} + +// validation based on :placeholder-shown (Edge doesn't support it yet) +.form-input { + &:not(:placeholder-shown) { + &:invalid { + border-color: @control-color-error; + &:focus { + .control-shadow(@control-color-error); + } + + & + .form-input-hint { + color: @control-color-error; + } + } + } +} + // Form disabled and readonly .form-input, .form-select { @@ -458,7 +492,7 @@ input { // Form Horizontal .form-horizontal { - padding: @layout-padding; + padding: @layout-spacing; .form-group { display: flex; @@ -467,6 +501,6 @@ input { .form-checkbox, .form-radio, .form-switch { - margin: .4rem 0; + margin: (@control-size - @control-size-sm) / 2 0; } } diff --git a/src/icons.less b/src/icons.less index ce13756..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, @@ -36,42 +36,90 @@ border-right: 0; content: ""; height: .65em; - transform: translate(-25%, -50%) rotate(-45deg); width: .65em; } } -.icon-arrow-down, -.icon-downward { - transform: rotate(-90deg); +.icon-arrow-down { + &::before { + transform: translate(-50%, -75%) rotate(225deg); + } } -.icon-arrow-right, -.icon-forward { - transform: rotate(180deg); +.icon-arrow-left { + &::before { + transform: translate(-25%, -50%) rotate(-45deg); + } } -.icon-arrow-up, -.icon-upward { - transform: rotate(90deg); +.icon-arrow-right { + &::before { + transform: translate(-75%, -50%) rotate(135deg); + } } -.icon-downward, -.icon-back, -.icon-forward, -.icon-upward { +.icon-arrow-up { &::before { - transform: translate(-50%, -50%) rotate(-45deg); + transform: translate(-50%, -25%) rotate(45deg); } +} + +.icon-back, +.icon-forward { &::after { background: currentColor; content: ""; height: @icon-border-width; - left: 55%; width: .8em; } } +.icon-downward, +.icon-upward { + &::after { + background: currentColor; + content: ""; + height: .8em; + width: @icon-border-width; + } +} + +.icon-back { + &::after { + left: 55%; + } + &::before { + transform: translate(-50%, -50%) rotate(-45deg); + } +} + +.icon-downward { + &::after { + top: 45%; + } + &::before { + transform: translate(-50%, -50%) rotate(-135deg); + } +} + +.icon-forward { + &::after { + left: 45%; + } + &::before { + transform: translate(-50%, -50%) rotate(135deg); + } +} + +.icon-upward { + &::after { + top: 55%; + } + &::before { + transform: translate(-50%, -50%) rotate(45deg); + } +} + // Icon caret .icon-caret { &::before { @@ -102,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; } } @@ -144,8 +192,8 @@ box-shadow: -.4em 0, .4em 0; border-radius: 50%; content: ""; - height: .3rem; - width: .3rem; + height: 3px; + width: 3px; } } .icon-more-vert { @@ -598,6 +646,7 @@ } // Component icon support +.accordion, .btn, .toast, .menu { diff --git a/src/layout.less b/src/layout.less index 1c657df..36323ff 100644 --- a/src/layout.less +++ b/src/layout.less @@ -2,21 +2,29 @@ .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; + &.grid-xl { + max-width: @size-xl + 2 * @layout-spacing * @html-font-size; } - &.grid-960 { - max-width: 96rem + 2 * @layout-padding; + &.grid-lg { + max-width: @size-lg + 2 * @layout-spacing * @html-font-size; } - &.grid-480 { - max-width: 48rem + 2 * @layout-padding; + &.grid-md { + max-width: @size-md + 2 * @layout-spacing * @html-font-size; + } + + &.grid-sm { + max-width: @size-sm + 2 * @layout-spacing * @html-font-size; + } + + &.grid-xs { + max-width: @size-xs + 2 * @layout-spacing * @html-font-size; } } @@ -24,8 +32,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 +52,8 @@ .column { flex: 1; max-width: 100%; - padding: @layout-padding; + padding-left: @layout-spacing; + padding-right: @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 2d4c95c..109dc92 100644 --- a/src/menus.less +++ b/src/menus.less @@ -5,14 +5,19 @@ list-style: none; margin: 0; min-width: @control-min-width; - padding: 1rem; - .shadow-variant(.1rem); - transform: translateY(.5rem); + padding: @unit-2; + .shadow-variant(.05rem); + transform: translateY(@layout-spacing-sm); z-index: @zindex-1; + &.menu-nav { + background: transparent; + box-shadow: none; + } + .menu-item { margin-top: 0; - padding: 0 .8rem; + padding: 0 @unit-2; text-decoration: none; user-select: none; @@ -20,27 +25,32 @@ border-radius: @border-radius; color: inherit; display: block; - margin: 0 -.8rem; - padding: .6rem .8rem; + margin: 0 -@unit-2; + padding: @unit-1 @unit-2; text-decoration: none; &:focus, &:hover { + background: @secondary-color; color: @primary-color; } &:active, &.active { - background: @secondary-color-light; + background: @secondary-color; color: @primary-color; } } + + & + .menu-item { + margin-top: @unit-1; + } } .menu-badge { float: right; - padding: .6rem 0; + padding: @unit-1 0; .btn { - margin-top: -.2rem; + margin-top: -@unit-h; } } } 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 84af7a4..52cd743 100644 --- a/src/mixins.less +++ b/src/mixins.less @@ -1,4 +1,12 @@ -// Core mixins +// Mixins +// Avatar mixin +.avatar-base(@size: @unit-8) { + font-size: @size / 2.2; + height: @size; + width: @size; +} + +// Clearfix mixin .clearfix() { &::after { clear: both; @@ -9,7 +17,7 @@ // Component focus shadow .control-shadow(@color: @primary-color) { - box-shadow: 0 0 0 .2rem fade(@color, 15%); + box-shadow: 0 0 0 .1rem fade(@color, 20%); } // Component transition @@ -28,7 +36,7 @@ border-radius: @border-radius; display: inline-block; line-height: 1; - padding: .3rem .4rem; + padding: .2em .3em; vertical-align: baseline; } @@ -37,6 +45,76 @@ color: @color; } +// Shadow mixin .shadow-variant(@offset) { - box-shadow: 0 @offset (@offset+.1rem)*2 fade(@dark-color, 30%); + box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%); +} + +// Position utility mixin +.margin-variant(@size: 1) { + .m-@{size} { + padding: @size * @unit-1; + } + .mb-@{size} { + padding-bottom: @size * @unit-1; + } + .ml-@{size} { + padding-left: @size * @unit-1; + } + .mr-@{size} { + padding-right: @size * @unit-1; + } + .mt-@{size} { + padding-top: @size * @unit-1; + } + .mx-@{size} { + padding-left: @size * @unit-1; + padding-right: @size * @unit-1; + } + .my-@{size} { + padding-bottom: @size * @unit-1; + padding-top: @size * @unit-1; + } +} + +.padding-variant(@size: 1) { + .p-@{size} { + padding: @size * @unit-1; + } + .pb-@{size} { + padding-bottom: @size * @unit-1; + } + .pl-@{size} { + padding-left: @size * @unit-1; + } + .pr-@{size} { + padding-right: @size * @unit-1; + } + .pt-@{size} { + padding-top: @size * @unit-1; + } + .px-@{size} { + padding-left: @size * @unit-1; + padding-right: @size * @unit-1; + } + .py-@{size} { + padding-bottom: @size * @unit-1; + padding-top: @size * @unit-1; + } } + +// Colors mixin +.text-color-variant(@color: @primary-color) { + color: @color; + + a& { + &:focus, + &:hover { + color: darken(@color, 5%); + } + } +} + +.bg-color-variant(@color: @primary-color) { + background: @color; +}
\ No newline at end of file diff --git a/src/modals.less b/src/modals.less index 4353a54..fb5cdf9 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; @@ -19,7 +19,7 @@ z-index: @zindex-4; .modal-overlay { - background: fade(@dark-color, 50%); + background: fade(@bg-color, 75%); bottom: 0; cursor: default; display: block; @@ -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,14 +48,13 @@ border-radius: @border-radius; display: block; padding: 0; - .shadow-variant(.4rem); + .shadow-variant(.2rem); text-align: left; .modal-header { - padding: @layout-padding-lg; + padding: @layout-spacing-lg; .modal-title { - font-size: @font-size-lg; margin: 0; } } @@ -63,12 +62,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 0a37670..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 { @@ -15,6 +15,7 @@ } &.active { & > a { + color: darken(@gray-color-dark, 10%); font-weight: bold; &:focus, &:hover { @@ -25,11 +26,7 @@ } & .nav { - margin-bottom: 1rem; - margin-left: 2rem; - - a { - color: @gray-color; - } + margin-bottom: @unit-2; + margin-left: @unit-4; } } diff --git a/src/normalize.less b/src/normalize.less index e8ffb28..d32cd77 100644 --- a/src/normalize.less +++ b/src/normalize.less @@ -163,6 +163,7 @@ dfn { small { font-size: 80%; + font-weight: 400; /* (added) */ } /** diff --git a/src/pagination.less b/src/pagination.less index 3d74037..0523bad 100644 --- a/src/pagination.less +++ b/src/pagination.less @@ -1,27 +1,30 @@ // Pagination .pagination { display: flex; + padding: @unit-1 0; .page-item { - margin: 1rem .1rem; + margin: @unit-1 @unit-0; span { display: inline-block; - padding: .6rem .4rem; + padding: @unit-1 @unit-1; } a { border-radius: @border-radius; color: @gray-color-dark; display: inline-block; - padding: .6rem .8rem; + padding: @unit-1 @unit-2; text-decoration: none; &:focus, &:hover { color: @primary-color; } - &[disabled], - &.disabled { + } + + &.disabled { + a { cursor: default; opacity: .5; pointer-events: none; diff --git a/src/panels.less b/src/panels.less index e361e25..873d21f 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,7 @@ .panel-body { flex: 1 1 auto; overflow-y: auto; - padding: 0 @layout-padding-lg; - } - - .panel-title { - font-size: 2rem; + padding: 0 @layout-spacing-lg; } .panel-subtitle { diff --git a/src/parallax.less b/src/parallax.less index 9886206..e353fd4 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(1rem); 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 20px fade(@dark-color, 50%); 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..0ba28a0 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(.2rem); } } 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..bf5ce96 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: -(@unit-3 - @unit-h) / 2 ; 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 fdb04c9..e9f747d 100644 --- a/src/tables.less +++ b/src/tables.less @@ -34,13 +34,12 @@ } } - td { + td, + th { border-bottom: @border-width solid @border-color; - padding: 1.5rem 1rem; + padding: @unit-3 @unit-2; } - th { - border-bottom: @border-width solid @gray-color-dark; - padding: 1.5rem 1rem; + border-bottom-width: @border-width-lg; } } 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 ac7c4a4..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%; @@ -34,4 +34,8 @@ opacity: .75; } } + + .btn-clear { + margin: 2px -2px 2px 4px; + } } diff --git a/src/tooltips.less b/src/tooltips.less index 25e7bf6..02dc201 100644 --- a/src/tooltips.less +++ b/src/tooltips.less @@ -10,23 +10,23 @@ 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; + z-index: @zindex-3; } &:focus, &: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 246fef7..3cae94b 100644 --- a/src/typography.less +++ b/src/typography.less @@ -1,4 +1,5 @@ // Typography +// Headings h1, h2, h3, @@ -6,42 +7,78 @@ h4, h5, h6 { color: inherit; - font-weight: 300; + font-weight: 500; line-height: 1.2; - margin-bottom: 1.5rem; + margin-bottom: .5em; margin-top: 0; } -h1 { - font-size: 5rem; +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-weight: 500; } -h2 { - font-size: 4rem; +h1, +.h1 { + font-size: 2rem; } -h3 { - font-size: 3rem; +h2, +.h2 { + font-size: 1.6rem; } -h4 { - font-size: 2.4rem; +h3, +.h3 { + font-size: 1.4rem; } -h5 { - font-size: 2rem; +h4, +.h4 { + font-size: 1.2rem; } -h6 { - font-size: 1.6rem; +h5, +.h5 { + font-size: 1rem; +} +h6, +.h6 { + font-size: .8rem; } + +// Paragraphs p { - line-height: 2.4rem; - margin: 0 0 1rem; + line-height: 1.2 * @line-height; + margin: 0 0 @unit-4; } + +// Semantic text elements a, ins, u { text-decoration-skip: ink edges; } + +abbr[title] { + border-bottom: @border-width dotted; + cursor: help; + text-decoration: none; +} + +kbd { + .label-base(); + .label-variant(@light-color, @dark-color); +} + +mark { + .label-base(); + .label-variant(@body-font-color, @highlight-color); +} + +// 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; @@ -51,20 +88,23 @@ blockquote { color: @gray-color; } } + +// 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; } } + ul { list-style: disc inside; @@ -72,6 +112,7 @@ ul { list-style-type: circle; } } + ol { list-style: decimal inside; @@ -79,24 +120,12 @@ ol { list-style-type: lower-alpha; } } + dl { dt { font-weight: bold; } dd { - margin: .5rem 0 1.5rem 0; + margin: @unit-2 0 @unit-4 0; } } -mark { - .label-base(); - .label-variant(@body-font-color, @highlight-color); -} -kbd { - .label-base(); - .label-variant(@light-color, @dark-color); -} -abbr[title] { - border-bottom: .1rem dotted; - cursor: help; - text-decoration: none; -} diff --git a/src/utilities.less b/src/utilities.less index 2e4643a..676beb0 100644 --- a/src/utilities.less +++ b/src/utilities.less @@ -1,273 +1,7 @@ -// Divider -.divider, -.divider-vert { - display: block; - position: relative; - - &[data-content]::after { - background: @bg-color-light; - color: @gray-color-light; - content: attr(data-content); - display: inline-block; - font-size: @font-size-sm; - padding: 0 .8rem; - transform: translateY(-1.1rem); - } -} - -.divider { - border-top: @border-width solid @border-color; - height: .1rem; - margin: 1rem 0; -} - -.divider-vert { - display: block; - padding: @layout-padding; - - &::before { - border-left: @border-width solid @border-color; - bottom: @layout-padding; - content: ""; - display: block; - left: 50%; - position: absolute; - top: @layout-padding; - transform: translateX(-50%); - } - - &[data-content]::after { - left: 50%; - padding: .4rem 0; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - } -} - -// Loading -.loading { - color: transparent !important; - min-height: 1.6rem; - pointer-events: none; - position: relative; - &::after { - animation: loading 500ms infinite linear; - border: .2rem solid @primary-color; - border-radius: .8rem; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 1.6rem; - left: 50%; - margin-left: -.8rem; - margin-top: -.8rem; - position: absolute; - top: 50%; - width: 1.6rem; - z-index: @zindex-0; - } -} - -// Position -.clearfix { - .clearfix(); -} -.float-left { - float: left !important; -} -.float-right { - float: right !important; -} - -.rel { - position: relative; -} -.abs { - position: absolute; -} -.fixed { - position: fixed; -} -.centered { - display: block; - float: none; - margin-left: auto; - margin-right: auto; -} - -// Spacing -.mt-10 { - margin-top: 1rem; -} -.mr-10 { - margin-right: 1rem; -} -.mb-10 { - margin-bottom: 1rem; -} -.ml-10 { - margin-left: 1rem; -} -.mt-5 { - margin-top: .5rem; -} -.mr-5 { - margin-right: .5rem; -} -.mb-5 { - margin-bottom: .5rem; -} -.ml-5 { - margin-left: .5rem; -} - -.pt-10 { - padding-top: 1rem; -} -.pr-10 { - padding-right: 1rem; -} -.pb-10 { - padding-bottom: 1rem; -} -.pl-10 { - padding-left: 1rem; -} -.pt-5 { - padding-top: .5rem; -} -.pr-5 { - padding-right: .5rem; -} -.pb-5 { - padding-bottom: .5rem; -} -.pl-5 { - padding-left: .5rem; -} - -// Display -.block { - display: block; -} -.inline { - display: inline; -} -.inline-block { - display: inline-block; -} -.flex { - display: flex; -} -.inline-flex { - display: inline-flex; -} -.hide { - display: none !important; -} -.visible { - visibility: visible; -} -.invisible { - visibility: hidden; -} -.text-hide { - background: transparent; - border: 0; - color: transparent; - font-size: 0; - line-height: 0; - text-shadow: none; -} -.text-assistive { - border: 0; - clip: rect(0,0,0,0); - height: .1rem; - margin: -.1rem; - overflow: hidden; - padding: 0; - position: absolute; - width: .1rem; -} -// Text -.text-left { - text-align: left; -} -.text-right { - text-align: right; -} -.text-center { - text-align: center; -} -.text-justify { - text-align: justify; -} - -.text-lowercase { - text-transform: lowercase; -} -.text-uppercase { - text-transform: uppercase; -} -.text-capitalize { - text-transform: capitalize; -} - -.text-normal { - font-weight: normal; -} -.text-bold { - font-weight: bold; -} -.text-italic { - font-style: italic; -} -.text-large { - font-size: 1.2em; -} - -.text-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.text-clip { - overflow: hidden; - text-overflow: clip; - white-space: nowrap; -} -.text-break { - hyphens: auto; - word-break: break-word; - word-wrap: break-word; -} -.hand { - cursor: pointer; -} - -// Shadow -.shadow-0 { - .shadow-variant(0); -} -.shadow-1 { - .shadow-variant(.1rem); -} -.shadow-2 { - .shadow-variant(.2rem); -} -.shadow-3 { - .shadow-variant(.3rem); -} -.shadow-4 { - .shadow-variant(.4rem); -} - -// Shapes -.rounded { - border-radius: @border-radius; -} -.circle { - border-radius: 50%; -} +@import 'utilities/colors.less'; +@import 'utilities/display.less'; +@import 'utilities/divider.less'; +@import 'utilities/loading.less'; +@import 'utilities/position.less'; +@import 'utilities/shapes.less'; +@import 'utilities/text.less';
\ No newline at end of file diff --git a/src/utilities/colors.less b/src/utilities/colors.less new file mode 100644 index 0000000..64f7689 --- /dev/null +++ b/src/utilities/colors.less @@ -0,0 +1,45 @@ +// Text colors +.text-primary { + .text-color-variant(@primary-color); +} +.text-secondary { + .text-color-variant(@secondary-color-dark); +} +.text-gray { + .text-color-variant(@gray-color); +} +.text-light { + .text-color-variant(@light-color); +} +.text-success { + .text-color-variant(@control-color-success); +} +.text-warning { + .text-color-variant(@control-color-warning); +} +.text-error { + .text-color-variant(@control-color-error); +} + +// Background colors +.bg-primary { + .bg-color-variant(@primary-color); +} +.bg-secondary { + .bg-color-variant(@secondary-color); +} +.bg-dark { + .bg-color-variant(@dark-color); +} +.bg-gray { + .bg-color-variant(@bg-color); +} +.bg-success { + .bg-color-variant(@control-color-success); +} +.bg-warning { + .bg-color-variant(@control-color-warning); +} +.bg-error { + .bg-color-variant(@control-color-error); +} diff --git a/src/utilities/display.less b/src/utilities/display.less new file mode 100644 index 0000000..a00aa4a --- /dev/null +++ b/src/utilities/display.less @@ -0,0 +1,46 @@ +// Display +.block { + display: block; +} +.inline { + display: inline; +} +.inline-block { + display: inline-block; +} +.flex { + display: flex; +} +.inline-flex { + display: inline-flex; +} +.hide { + display: none !important; +} +.visible { + visibility: visible; +} +.invisible { + visibility: hidden; +} +.text-hide { + background: transparent; + border: 0; + color: transparent; + font-size: 0; + line-height: 0; + text-shadow: none; +} +.text-assistive { + border: 0; + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.hand { + cursor: pointer; +} diff --git a/src/utilities/divider.less b/src/utilities/divider.less new file mode 100644 index 0000000..a5cb45b --- /dev/null +++ b/src/utilities/divider.less @@ -0,0 +1,50 @@ +// Divider +.divider, +.divider-vert { + display: block; + position: relative; + + &[data-content]::after { + background: @bg-color-light; + color: @gray-color; + content: attr(data-content); + display: inline-block; + font-size: @font-size-sm; + padding: 0 @unit-2; + transform: translateY(-@font-size-sm + @border-width); + } +} + +.divider { + border-top: @border-width solid @border-color; + height: @border-width; + margin: @unit-2 0; + + &[data-content] { + margin: @unit-4 0; + } +} + +.divider-vert { + display: block; + padding: @unit-4; + + &::before { + border-left: @border-width solid @border-color; + bottom: @unit-2; + content: ""; + display: block; + left: 50%; + position: absolute; + top: @unit-2; + transform: translateX(-50%); + } + + &[data-content]::after { + left: 50%; + padding: @unit-1 0; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + } +} diff --git a/src/utilities/loading.less b/src/utilities/loading.less new file mode 100644 index 0000000..767ec9e --- /dev/null +++ b/src/utilities/loading.less @@ -0,0 +1,34 @@ +// Loading +.loading { + color: transparent !important; + min-height: @unit-4; + pointer-events: none; + position: relative; + &::after { + animation: loading 500ms infinite linear; + border: @border-width-lg solid @primary-color; + border-radius: 50%; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: @unit-4; + left: 50%; + margin-left: -@unit-2; + margin-top: -@unit-2; + position: absolute; + top: 50%; + width: @unit-4; + z-index: @zindex-0; + } + + &.loading-lg { + min-height: @unit-10; + &::after { + height: @unit-8; + width: @unit-8; + margin-left: -@unit-4; + margin-top: -@unit-4; + } + } +}
\ No newline at end of file diff --git a/src/utilities/position.less b/src/utilities/position.less new file mode 100644 index 0000000..1bf33b5 --- /dev/null +++ b/src/utilities/position.less @@ -0,0 +1,33 @@ +// Position +.clearfix { + .clearfix(); +} +.float-left { + float: left !important; +} +.float-right { + float: right !important; +} + +.relative { + position: relative; +} +.absolute { + position: absolute; +} +.fixed { + position: fixed; +} +.centered { + display: block; + float: none; + margin-left: auto; + margin-right: auto; +} + +// Spacing +.margin-variant(1); +.margin-variant(2); + +.padding-variant(1); +.padding-variant(2);
\ No newline at end of file diff --git a/src/utilities/shapes.less b/src/utilities/shapes.less new file mode 100644 index 0000000..e9f63bc --- /dev/null +++ b/src/utilities/shapes.less @@ -0,0 +1,7 @@ +// Shapes +.rounded { + border-radius: @border-radius; +} +.circle { + border-radius: 50%; +} diff --git a/src/utilities/text.less b/src/utilities/text.less new file mode 100644 index 0000000..f571613 --- /dev/null +++ b/src/utilities/text.less @@ -0,0 +1,52 @@ +// Text +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} + +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} + +.text-normal { + font-weight: normal; +} +.text-bold { + font-weight: bold; +} +.text-italic { + font-style: italic; +} +.text-large { + font-size: 1.2em; +} + +.text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.text-clip { + overflow: hidden; + text-overflow: clip; + white-space: nowrap; +} +.text-break { + hyphens: auto; + word-break: break-word; + word-wrap: break-word; +} diff --git a/src/variables.less b/src/variables.less index 42e9aaf..fb2bcc8 100644 --- a/src/variables.less +++ b/src/variables.less @@ -1,27 +1,57 @@ // Core variables // Global -@html-font-size: 10px; +@html-font-size: 20px; @html-line-height: 1.428571429; @body-bg: @bg-color-light; -@body-font-color: lighten(@dark-color, 5%); -@font-size: 1.4rem; -@font-size-sm: 1.2rem; -@font-size-lg: 1.6rem; +@body-font-color: @dark-color; +@font-size: .7rem; +@font-size-sm: .6rem; +@font-size-lg: .8rem; +@line-height: 1rem; // Fonts // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ @base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto; @fallback-font-family: "Helvetica Neue", sans-serif; -@cjk-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", @fallback-font-family; +@cjk-zh-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", @fallback-font-family; +@cjk-jp-font-family: @base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, @fallback-font-family; +@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: .05rem; +@unit-h: .1rem; +@unit-1: .2rem; +@unit-2: .4rem; +@unit-3: .6rem; +@unit-4: .8rem; +@unit-5: 1rem; +@unit-6: 1.2rem; +@unit-7: 1.4rem; +@unit-8: 1.6rem; +@unit-9: 1.8rem; +@unit-10: 2rem; +@unit-12: 2.4rem; +@unit-16: 3.2rem; + // Sizes -@layout-padding: 1rem; -@layout-padding-lg: 1.5rem; -@control-min-width: 18rem; -@border-radius: .2rem; -@border-width: .1rem; +@layout-spacing: @unit-2; +@layout-spacing-sm: @unit-1; +@layout-spacing-lg: @unit-4; +@control-size: @unit-8; +@control-size-sm: @unit-6; +@control-size-lg: @unit-10; +@control-padding-h: @unit-2; +@control-padding-v: (@control-size - @line-height) / 2 - @border-width; +@control-padding-v-sm: (@control-size-sm - @line-height) / 2 - @border-width; +@control-padding-v-lg: (@control-size-lg - @line-height) / 2 - @border-width; +@control-icon-size: .7rem; +@control-min-width: 180px; +@control-max-width: 320px; +@border-radius: @unit-h; +@border-width: @unit-0; +@border-width-lg: @unit-h; // Colors // Core colors @@ -33,7 +63,7 @@ @secondary-color-light: lighten(@secondary-color, 3%); @link-color: @primary-color; -@link-color-dark: darken(@link-color, 10%); +@link-color-dark: darken(@link-color, 5%); // Gray colors @dark-color: #454d5d; @@ -42,8 +72,8 @@ @gray-color-dark: darken(@gray-color, 20%); @gray-color-light: lighten(@gray-color, 20%); -@border-color: lighten(@gray-color-light, 3%); -@border-color-dark: darken(@border-color, 15%); +@border-color: lighten(@dark-color, 60%); +@border-color-dark: darken(@border-color, 10%); @bg-color: lighten(@dark-color, 66%); @bg-color-dark: darken(@bg-color, 3%); @bg-color-light: @light-color; |