diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-08-29 13:07:53 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-08-29 13:07:53 +0300 |
commit | e78b3c34348f26d40a813612c5a3786f1c56607a (patch) | |
tree | f857491026c5f728fe95fe1564ec30c931a1b30a /src | |
parent | 66c492fd05c2d720c81e2be8d6845560b868e7ff (diff) |
Initial SASS build
Diffstat (limited to 'src')
-rw-r--r-- | src/_accordions.scss (renamed from src/accordions.less) | 4 | ||||
-rw-r--r-- | src/_animations.scss (renamed from src/animations.less) | 2 | ||||
-rw-r--r-- | src/_asian.scss (renamed from src/asian.less) | 8 | ||||
-rw-r--r-- | src/_autocomplete.scss (renamed from src/autocomplete.less) | 14 | ||||
-rw-r--r-- | src/_avatars.scss (renamed from src/avatars.less) | 34 | ||||
-rw-r--r-- | src/_badges.scss (renamed from src/badges.less) | 16 | ||||
-rw-r--r-- | src/_bars.scss (renamed from src/bars.less) | 40 | ||||
-rw-r--r-- | src/_base.scss (renamed from src/base.less) | 18 | ||||
-rw-r--r-- | src/_breadcrumbs.scss (renamed from src/breadcrumbs.less) | 16 | ||||
-rw-r--r-- | src/_buttons.scss (renamed from src/buttons.less) | 92 | ||||
-rw-r--r-- | src/_calendars.scss (renamed from src/calendars.less) | 89 | ||||
-rw-r--r-- | src/_cards.scss | 39 | ||||
-rw-r--r-- | src/_carousels.scss (renamed from src/carousels.less) | 26 | ||||
-rw-r--r-- | src/_chips.scss | 24 | ||||
-rw-r--r-- | src/_codes.scss | 32 | ||||
-rw-r--r-- | src/_comparison-sliders.scss (renamed from src/comparison-sliders.less) | 30 | ||||
-rw-r--r-- | src/_dropdowns.scss (renamed from src/dropdowns.less) | 4 | ||||
-rw-r--r-- | src/_empty.scss | 21 | ||||
-rw-r--r-- | src/_filters.scss (renamed from src/filters.less) | 6 | ||||
-rw-r--r-- | src/_forms.scss (renamed from src/forms.less) | 246 | ||||
-rw-r--r-- | src/_icons.scss (renamed from src/icons.less) | 122 | ||||
-rw-r--r-- | src/_labels.scss | 33 | ||||
-rw-r--r-- | src/_layout.scss (renamed from src/layout.less) | 36 | ||||
-rw-r--r-- | src/_media.scss (renamed from src/media.less) | 10 | ||||
-rw-r--r-- | src/_menus.scss | 56 | ||||
-rw-r--r-- | src/_meters.scss (renamed from src/meters.less) | 24 | ||||
-rw-r--r-- | src/_mixins.scss | 186 | ||||
-rw-r--r-- | src/_modals.scss (renamed from src/modals.less) | 22 | ||||
-rwxr-xr-x | src/_navbar.scss (renamed from src/navbar.less) | 2 | ||||
-rw-r--r-- | src/_navs.scss (renamed from src/navs.less) | 16 | ||||
-rw-r--r-- | src/_normalize.scss (renamed from src/normalize.less) | 2 | ||||
-rw-r--r-- | src/_pagination.scss (renamed from src/pagination.less) | 20 | ||||
-rw-r--r-- | src/_panels.scss (renamed from src/panels.less) | 8 | ||||
-rw-r--r-- | src/_parallax.scss (renamed from src/parallax.less) | 62 | ||||
-rw-r--r-- | src/_popovers.scss (renamed from src/popovers.less) | 8 | ||||
-rw-r--r-- | src/_progress.scss (renamed from src/progress.less) | 20 | ||||
-rw-r--r-- | src/_sliders.scss (renamed from src/sliders.less) | 50 | ||||
-rw-r--r-- | src/_steps.scss (renamed from src/steps.less) | 28 | ||||
-rw-r--r-- | src/_tables.scss (renamed from src/tables.less) | 12 | ||||
-rw-r--r-- | src/_tabs.scss (renamed from src/tabs.less) | 16 | ||||
-rw-r--r-- | src/_tiles.scss (renamed from src/tiles.less) | 8 | ||||
-rw-r--r-- | src/_timelines.scss (renamed from src/timelines.less) | 30 | ||||
-rw-r--r-- | src/_toasts.scss | 41 | ||||
-rw-r--r-- | src/_tooltips.scss (renamed from src/tooltips.less) | 30 | ||||
-rw-r--r-- | src/_typography.scss (renamed from src/typography.less) | 26 | ||||
-rw-r--r-- | src/_utilities.scss | 7 | ||||
-rw-r--r-- | src/_variables.scss | 103 | ||||
-rw-r--r-- | src/cards.less | 39 | ||||
-rw-r--r-- | src/chips.less | 24 | ||||
-rw-r--r-- | src/codes.less | 32 | ||||
-rw-r--r-- | src/empty.less | 21 | ||||
-rw-r--r-- | src/labels.less | 33 | ||||
-rw-r--r-- | src/menus.less | 56 | ||||
-rw-r--r-- | src/mixins.less | 175 | ||||
-rw-r--r-- | src/spectre-exp.scss | 16 | ||||
-rw-r--r-- | src/spectre-icons.scss | 8 | ||||
-rw-r--r-- | src/spectre.scss | 50 | ||||
-rw-r--r-- | src/toasts.less | 41 | ||||
-rw-r--r-- | src/utilities.less | 7 | ||||
-rw-r--r-- | src/utilities/_colors.scss | 29 | ||||
-rw-r--r-- | src/utilities/_display.scss (renamed from src/utilities/display.less) | 4 | ||||
-rw-r--r-- | src/utilities/_divider.scss (renamed from src/utilities/divider.less) | 28 | ||||
-rw-r--r-- | src/utilities/_loading.scss (renamed from src/utilities/loading.less) | 24 | ||||
-rw-r--r-- | src/utilities/_position.scss (renamed from src/utilities/position.less) | 14 | ||||
-rw-r--r-- | src/utilities/_shapes.scss (renamed from src/utilities/shapes.less) | 2 | ||||
-rw-r--r-- | src/utilities/_text.scss (renamed from src/utilities/text.less) | 4 | ||||
-rw-r--r-- | src/utilities/colors.less | 45 | ||||
-rw-r--r-- | src/variables.less | 104 |
68 files changed, 1281 insertions, 1214 deletions
diff --git a/src/accordions.less b/src/_accordions.scss index 810d264..e2022c6 100644 --- a/src/accordions.less +++ b/src/_accordions.scss @@ -17,7 +17,7 @@ .accordion-header { display: block; - padding: @unit-1 @unit-2; + padding: $unit-1 $unit-2; .icon { transition: all .2s ease; @@ -25,7 +25,7 @@ } .accordion-body { - margin-bottom: @layout-spacing; + margin-bottom: $layout-spacing; max-height: 0; overflow: hidden; transition: max-height .2s ease; diff --git a/src/animations.less b/src/_animations.scss index f6b8724..e7fde1a 100644 --- a/src/animations.less +++ b/src/_animations.scss @@ -11,7 +11,7 @@ @keyframes slide-down { 0% { opacity: 0; - transform: translateY(-@unit-8); + transform: translateY(-$unit-8); } 100% { opacity: 1; diff --git a/src/asian.less b/src/_asian.scss index a68cb39..5f7533e 100644 --- a/src/asian.less +++ b/src/_asian.scss @@ -1,14 +1,14 @@ // Optimized for East Asian CJK :lang(zh) { - font-family: @cjk-zh-font-family; + font-family: $cjk-zh-font-family; } :lang(ja) { - font-family: @cjk-jp-font-family; + font-family: $cjk-jp-font-family; } :lang(ko) { - font-family: @cjk-ko-font-family; + font-family: $cjk-ko-font-family; } :lang(zh), @@ -16,7 +16,7 @@ .cjk { ins, u { - border-bottom: @border-width solid; + border-bottom: $border-width solid; text-decoration: none; } diff --git a/src/autocomplete.less b/src/_autocomplete.scss index 111ecf6..24c3e45 100644 --- a/src/autocomplete.less +++ b/src/_autocomplete.scss @@ -7,12 +7,12 @@ display: flex; flex-wrap: wrap; height: auto; - min-height: @unit-8; - padding: @unit-h; + min-height: $unit-8; + padding: $unit-h; &.is-focused { - border-color: @primary-color; - .control-shadow(); + border-color: $primary-color; + @include control-shadow(); } .form-input { @@ -20,9 +20,9 @@ box-shadow: none; display: inline-block; flex: 1 0 auto; - height: @unit-6; - line-height: @unit-4; - margin: @unit-h; + height: $unit-6; + line-height: $unit-4; + margin: $unit-h; width: auto; } } diff --git a/src/avatars.less b/src/_avatars.scss index 1fa075a..53bda1d 100644 --- a/src/avatars.less +++ b/src/_avatars.scss @@ -1,9 +1,9 @@ // Avatars .avatar { - .avatar-base(); - background: @primary-color; + @include avatar-base(); + background: $primary-color; border-radius: 50%; - color: fade(@light-color, 85%); + color: rgba($light-color, .85); display: inline-block; font-weight: 300; line-height: 1; @@ -12,16 +12,16 @@ vertical-align: middle; &.avatar-xs { - .avatar-base(@unit-4); + @include avatar-base($unit-4); } &.avatar-sm { - .avatar-base(@unit-6); + @include avatar-base($unit-6); } &.avatar-lg { - .avatar-base(@unit-12); + @include avatar-base($unit-12); } &.avatar-xl { - .avatar-base(@unit-16); + @include avatar-base($unit-16); } img { @@ -29,39 +29,39 @@ height: 100%; position: relative; width: 100%; - z-index: @zindex-0; + z-index: $zindex-0; } .avatar-icon, .avatar-presence { - background: @bg-color-light; + background: $bg-color-light; bottom: 14.64%; height: 50%; - padding: @border-width-lg; + padding: $border-width-lg; position: absolute; right: 14.64%; transform: translate(50%, 50%); width: 50%; - z-index: @zindex-0 + 1; + z-index: $zindex-0 + 1; } .avatar-presence { - background: @gray-color; - box-shadow: 0 0 0 @border-width-lg @light-color; + background: $gray-color; + box-shadow: 0 0 0 $border-width-lg $light-color; border-radius: 50%; height: .5em; width: .5em; &.online { - background: @success-color; + background: $success-color; } &.busy { - background: @error-color; + background: $error-color; } &.away { - background: @warning-color; + background: $warning-color; } } @@ -72,6 +72,6 @@ position: absolute; top: 50%; transform: translate(-50%, -50%); - z-index: @zindex-0; + z-index: $zindex-0; } } diff --git a/src/badges.less b/src/_badges.scss index c62df9d..9f1d734 100644 --- a/src/badges.less +++ b/src/_badges.scss @@ -6,11 +6,11 @@ &[data-badge], &:not([data-badge]) { &::after { - background: @primary-color; + background: $primary-color; background-clip: padding-box; border-radius: .5rem; - box-shadow: 0 0 0 .1rem @bg-color-light; - color: @light-color; + box-shadow: 0 0 0 .1rem $bg-color-light; + color: $light-color; content: attr(data-badge); display: inline-block; transform: translate(-.1rem, -.5rem); @@ -18,7 +18,7 @@ } &[data-badge] { &::after { - font-size: @font-size-sm; + font-size: $font-size-sm; height: 18px; line-height: 1; min-width: 18px; @@ -54,17 +54,17 @@ top: 14.64%; right: 14.64%; transform: translate(50%, -50%); - z-index: @zindex-1; + z-index: $zindex-1; } } &.avatar-xs { &::after { content: ""; - height: @unit-2; - min-width: @unit-2; + height: $unit-2; + min-width: $unit-2; padding: 0; - width: @unit-2; + width: $unit-2; } } } diff --git a/src/bars.less b/src/_bars.scss index 4c3824a..47e21c9 100644 --- a/src/bars.less +++ b/src/_bars.scss @@ -1,36 +1,36 @@ // Bars .bar { - background: @bg-color-dark; - border-radius: @border-radius; + background: $bg-color-dark; + border-radius: $border-radius; display: flex; flex-wrap: nowrap; - height: @unit-4; + height: $unit-4; width: 100%; &.bar-sm { - height: @unit-1; + height: $unit-1; } // TODO: attr() support .bar-item { - background: @primary-color; - color: @light-color; + background: $primary-color; + color: $light-color; display: block; - font-size: @font-size-sm; + font-size: $font-size-sm; flex-shrink: 0; - line-height: @unit-4; + line-height: $unit-4; height: 100%; position: relative; text-align: center; width: 0; &:first-child { - border-bottom-left-radius: @border-radius; - border-top-left-radius: @border-radius; + border-bottom-left-radius: $border-radius; + border-top-left-radius: $border-radius; } &:last-child { - border-bottom-right-radius: @border-radius; - border-top-right-radius: @border-radius; + border-bottom-right-radius: $border-radius; + border-top-right-radius: $border-radius; flex-shrink: 1; } } @@ -38,8 +38,8 @@ // Slider bar .bar-slider { - height: @border-width-lg; - margin: @layout-spacing 0; + height: $border-width-lg; + margin: $layout-spacing 0; position: relative; .bar-item { @@ -47,25 +47,25 @@ padding: 0; position: absolute; &:not(:last-child):first-child { - background: @bg-color-dark; - z-index: @zindex-0; + background: $bg-color-dark; + z-index: $zindex-0; } } .bar-slider-btn { - background: @primary-color; + background: $primary-color; border: 0; border-radius: 50%; - height: @unit-3; + height: $unit-3; padding: 0; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); - width: @unit-3; + width: $unit-3; &:active { - box-shadow: 0 0 0 .1rem @primary-color; + box-shadow: 0 0 0 .1rem $primary-color; } } } diff --git a/src/base.less b/src/_base.scss index ba21bee..5f5a8d0 100644 --- a/src/base.less +++ b/src/_base.scss @@ -7,34 +7,34 @@ html { box-sizing: border-box; - font-size: @html-font-size; - line-height: @html-line-height; + font-size: $html-font-size; + line-height: $html-line-height; -webkit-tap-highlight-color: transparent; } body { - background: @body-bg; - color: @body-font-color; - font-family: @body-font-family; - font-size: @font-size; + background: $body-bg; + color: $body-font-color; + font-family: $body-font-family; + font-size: $font-size; overflow-x: hidden; text-rendering: optimizeLegibility; } a { - color: @link-color; + color: $link-color; outline: none; text-decoration: none; &:focus { - .control-shadow(); + @include control-shadow(); } &:focus, &:hover, &:active, &.active { - color: @link-color-dark; + color: $link-color-dark; text-decoration: underline; } } diff --git a/src/breadcrumbs.less b/src/_breadcrumbs.scss index 0b0f757..876eae8 100644 --- a/src/breadcrumbs.less +++ b/src/_breadcrumbs.scss @@ -1,28 +1,28 @@ // Breadcrumbs .breadcrumb { list-style: none; - margin: @unit-1 0; - padding: @unit-1 0; + margin: $unit-1 0; + padding: $unit-1 0; .breadcrumb-item { - color: @gray-color-dark; + color: $gray-color-dark; display: inline-block; margin: 0; - padding: @unit-1 0; + padding: $unit-1 0; &:not(:last-child) { - margin-right: @unit-1; + margin-right: $unit-1; a { - color: @gray-color-dark; + color: $gray-color-dark; } } &:not(:first-child) { &::before { - color: @gray-color-light; + color: $gray-color-light; content: "/"; - padding-right: @unit-1; + padding-right: $unit-1; } } } diff --git a/src/buttons.less b/src/_buttons.scss index 0c15d9e..a8232f5 100644 --- a/src/buttons.less +++ b/src/_buttons.scss @@ -1,42 +1,42 @@ // Buttons .btn { appearance: none; - background: @bg-color-light; - border: @border-width solid @primary-color; - border-radius: @border-radius; - color: @primary-color; - .control-transition(); + background: $bg-color-light; + border: $border-width solid $primary-color; + border-radius: $border-radius; + color: $primary-color; + @include control-transition(); cursor: pointer; display: inline-block; - font-size: @font-size; - height: @control-size; - line-height: @line-height; + font-size: $font-size; + height: $control-size; + line-height: $line-height; outline: none; - padding: @control-padding-v @control-padding-h; + padding: $control-padding-v $control-padding-h; text-align: center; text-decoration: none; user-select: none; vertical-align: middle; white-space: nowrap; &:focus { - .control-shadow(); + @include control-shadow(); } &:focus, &:hover { - background: @secondary-color; - border-color: @primary-color-dark; + background: $secondary-color; + border-color: $primary-color-dark; text-decoration: none; } &:active, &.active { - background: @primary-color-dark; - border-color: darken(@primary-color-dark, 5%); - color: @light-color; + background: $primary-color-dark; + 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; + border-bottom-color: $light-color; + border-left-color: $light-color; } } } @@ -50,25 +50,25 @@ // Button Primary &.btn-primary { - background: @primary-color; - border-color: @primary-color-dark; - color: @light-color; + background: $primary-color; + border-color: $primary-color-dark; + color: $light-color; &:focus, &:hover { - background: darken(@primary-color-dark, 2%); - border-color: darken(@primary-color-dark, 5%); - color: @light-color; + background: darken($primary-color-dark, 2%); + border-color: darken($primary-color-dark, 5%); + color: $light-color; } &:active, &.active { - background: darken(@primary-color-dark, 4%); - border-color: darken(@primary-color-dark, 7%); - color: @light-color; + background: darken($primary-color-dark, 4%); + border-color: darken($primary-color-dark, 7%); + color: $light-color; } &.loading { &::after { - border-bottom-color: @light-color; - border-left-color: @light-color; + border-bottom-color: $light-color; + border-left-color: $light-color; } } } @@ -77,26 +77,26 @@ &.btn-link { background: transparent; border-color: transparent; - color: @link-color; + color: $link-color; &:focus, &:hover, &:active, &.active { - color: @link-color-dark; + color: $link-color-dark; } } // Button Sizes &.btn-sm { - font-size: @font-size-sm; - height: @control-size-sm; - padding: @control-padding-v-sm @control-padding-h * .75; + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-v-sm $control-padding-h * .75; } &.btn-lg { - font-size: @font-size-lg; - height: @control-size-lg; - padding: @control-padding-v-lg @control-padding-h * 1.5; + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-v-lg $control-padding-h * 1.5; } // Button Block @@ -107,16 +107,16 @@ // Button Action &.btn-action { - width: @control-size; + width: $control-size; padding-left: 0; padding-right: 0; &.btn-sm { - width: @control-size-sm; + width: $control-size-sm; } &.btn-lg { - width: @control-size-lg; + width: $control-size-lg; } } @@ -125,14 +125,14 @@ background: transparent; border: 0; color: currentColor; - height: @unit-4; - line-height: @unit-4; - margin-left: @unit-1; + height: $unit-4; + line-height: $unit-4; + margin-left: $unit-1; margin-right: -2px; opacity: .45; padding: 0 2px; text-decoration: none; - width: @unit-4; + width: $unit-4; &:hover { opacity: .85; @@ -157,18 +157,18 @@ } &:not(:first-child):not(:last-child) { border-radius: 0; - margin-left: -@border-width; + margin-left: -$border-width; } &:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: -@border-width; + margin-left: -$border-width; } &:focus, &:hover, &:active, &.active { - z-index: @zindex-0; + z-index: $zindex-0; } } diff --git a/src/calendars.less b/src/_calendars.scss index e5764ea..bfa8739 100644 --- a/src/calendars.less +++ b/src/_calendars.scss @@ -1,19 +1,19 @@ // Calendars .calendar { - border: @border-width solid @border-color; - border-radius: @border-radius; + border: $border-width solid $border-color; + border-radius: $border-radius; display: block; min-width: 280px; text-align: center; .calendar-nav { align-items: center; - background: @bg-color; - border-top-left-radius: @border-radius; - border-top-right-radius: @border-radius; + background: $bg-color; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; display: flex; - font-size: @font-size-lg; - padding: @layout-spacing; + font-size: $font-size-lg; + padding: $layout-spacing; } .calendar-header, @@ -21,7 +21,7 @@ display: flex; flex-wrap: wrap; justify-content: center; - padding: @layout-spacing 0; + padding: $layout-spacing 0; .calendar-date { flex: 0 0 14.28%; // 7 calendar-items each row @@ -30,60 +30,60 @@ } .calendar-header { - background: @bg-color; - border-bottom: @border-width solid @border-color; - color: @gray-color; - font-size: @font-size-sm; + background: $bg-color; + border-bottom: $border-width solid $border-color; + color: $gray-color; + font-size: $font-size-sm; } .calendar-body { - color: @gray-color-dark; + color: $gray-color-dark; } .calendar-date { border: 0; - padding: @unit-1; + padding: $unit-1; .date-item { appearance: none; background: transparent; - border: @border-width solid transparent; + border: $border-width solid transparent; border-radius: 50%; - color: @gray-color-dark; - .control-transition(); + color: $gray-color-dark; + @include control-transition(); cursor: pointer; - height: @unit-7; - line-height: @unit-5; + height: $unit-7; + line-height: $unit-5; outline: none; - padding: @unit-h; + padding: $unit-h; position: relative; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; - width: @unit-7; + width: $unit-7; &.date-today { - border-color: @secondary-color-dark; - color: @primary-color; + border-color: $secondary-color-dark; + color: $primary-color; } &:focus { - .control-shadow(); + @include control-shadow(); } &:focus, &:hover { - background: @secondary-color-light; - border-color: @secondary-color-dark; - color: @primary-color; + background: $secondary-color-light; + border-color: $secondary-color-dark; + color: $primary-color; text-decoration: none; } &:active, &.active { - background: @primary-color-dark; - border-color: darken(@primary-color-dark, 5%); - color: @light-color; + background: $primary-color-dark; + border-color: darken($primary-color-dark, 5%); + color: $light-color; } // Calendar badge support @@ -111,9 +111,9 @@ position: relative; &::before { - background: @secondary-color; + background: $secondary-color; content: ""; - height: @unit-7; + height: $unit-7; left: 0; position: absolute; right: 0; @@ -132,7 +132,7 @@ } .date-item { - color: @primary-color; + color: $primary-color; } } @@ -141,8 +141,8 @@ padding: 0; .calendar-date { - border-bottom: @border-width solid @border-color; - border-right: @border-width solid @border-color; + border-bottom: $border-width solid $border-color; + border-right: $border-width solid $border-color; display: flex; flex-direction: column; height: 5.5rem; @@ -159,9 +159,9 @@ .date-item { align-self: flex-end; - height: @unit-7; - margin-right: @layout-spacing-sm; - margin-top: @layout-spacing-sm; + height: $unit-7; + margin-right: $layout-spacing-sm; + margin-top: $layout-spacing-sm; } .calendar-range { @@ -185,21 +185,20 @@ flex-grow: 1; line-height: 1; overflow-y: auto; - padding: @layout-spacing-sm; + padding: $layout-spacing-sm; } .calendar-event { - background: @secondary-color; - border-radius: @border-radius; - color: @primary-color; - font-size: @font-size-sm; + background: $secondary-color; + border-radius: $border-radius; + color: $primary-color; + font-size: $font-size-sm; display: block; - margin: @unit-h auto; + margin: $unit-h auto; overflow: hidden; padding: 3px 4px; text-align: left; text-overflow: ellipsis; - vertical-align: baseline; white-space: nowrap; } } diff --git a/src/_cards.scss b/src/_cards.scss new file mode 100644 index 0000000..bb82579 --- /dev/null +++ b/src/_cards.scss @@ -0,0 +1,39 @@ +// Cards +.card { + background: $bg-color-light; + border: $border-width solid $border-color; + border-radius: $border-radius; + display: flex; + flex-direction: column; + + .card-header, + .card-body, + .card-footer { + padding: $layout-spacing-lg; + padding-bottom: 0; + + &:last-child { + padding-bottom: $layout-spacing-lg; + } + } + + .card-image { + padding-top: $layout-spacing-lg; + + &:first-child { + padding-top: 0; + + img { + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + } + } + + &:last-child { + img { + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } + } + } +}
\ No newline at end of file diff --git a/src/carousels.less b/src/_carousels.scss index 276bc1f..788d351 100644 --- a/src/carousels.less +++ b/src/_carousels.scss @@ -1,6 +1,6 @@ // Carousels .carousel { - background: @bg-color; + background: $bg-color; display: block; overflow: hidden; position: relative; @@ -36,15 +36,15 @@ .item-prev, .item-next { - background: fade(@gray-color-light, 25%); - border-color: fade(@gray-color-light, 50%); - color: @gray-color-light; + background: fade($gray-color-light, 25%); + border-color: fade($gray-color-light, 50%); + color: $gray-color-light; opacity: 0; position: absolute; top: 50%; transition: all .4s ease; transform: translateY(-50%); - z-index: @zindex-2; + z-index: $zindex-2; } .item-prev { left: 1rem; @@ -61,32 +61,32 @@ &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) { animation: carousel-slidein .75s ease-in-out 1; opacity: 1; - z-index: @zindex-1; + z-index: $zindex-1; } &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1), &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2), &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3), &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) { - color: @gray-color-light; + color: $gray-color-light; } } .carousel-nav { - bottom: @layout-spacing; + bottom: $layout-spacing; display: flex; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); width: 10rem; - z-index: @zindex-2; + z-index: $zindex-2; .nav-item { - color: fade(@gray-color-light, 50%); + color: fade($gray-color-light, 50%); display: block; flex: 1 0 auto; - height: @unit-8; - margin: @unit-1; + height: $unit-8; + margin: $unit-1; max-width: 2.5rem; position: relative; @@ -94,7 +94,7 @@ background: currentColor; content: ""; display: block; - height: @border-width-lg; + height: $border-width-lg; position: absolute; top: .5rem; width: 100%; diff --git a/src/_chips.scss b/src/_chips.scss new file mode 100644 index 0000000..0610470 --- /dev/null +++ b/src/_chips.scss @@ -0,0 +1,24 @@ +// Chips +.chip { + align-items: center; + background: $bg-color-dark; + border-radius: 5rem; + color: $gray-color-dark; + display: inline-flex; + height: $unit-6; + margin: $unit-h; + max-width: 100%; + padding: $unit-h ($unit-2 + $unit-h); + text-decoration: none; + vertical-align: middle; + + &.active { + background: $primary-color; + color: $light-color; + } + + .avatar { + margin-left: -($unit-2 + $unit-h); + margin-right: $unit-1; + } +} diff --git a/src/_codes.scss b/src/_codes.scss new file mode 100644 index 0000000..753fdad --- /dev/null +++ b/src/_codes.scss @@ -0,0 +1,32 @@ +// Codes +code { + font-size: .65rem; + @include label-base(); + @include label-variant($code-color, lighten($code-color, 33%)); +} + +.code { + border-radius: $border-radius; + color: $body-font-color; + line-height: $line-height; + position: relative; + + &::before { + content: attr(data-lang); + color: $gray-color; + font-size: $font-size-sm; + position: absolute; + right: $layout-spacing; + top: $unit-h; + } + + code { + background: $bg-color; + color: inherit; + display: block; + line-height: inherit; + overflow-x: auto; + padding: 1rem; + width: 100%; + } +} diff --git a/src/comparison-sliders.less b/src/_comparison-sliders.scss index 169caf4..153bb0a 100644 --- a/src/comparison-sliders.less +++ b/src/_comparison-sliders.scss @@ -29,7 +29,7 @@ z-index: 1; .comparison-label { - right: @unit-4; + right: $unit-4; } } @@ -45,37 +45,37 @@ height: 100%; left: 0; position: absolute; - right: @unit-4; + right: $unit-4; top: 0; - z-index: @zindex-0; + z-index: $zindex-0; } &::after { background: currentColor; border-radius: 50%; box-shadow: 0 -5px, 0 5px; - color: @light-color; + color: $light-color; content: ""; height: 3px; position: absolute; - right: @unit-2; + right: $unit-2; top: 50%; transform: translate(50%, -50%); width: 3px; } .comparison-label { - left: @unit-4; + left: $unit-4; } } .comparison-resizer { animation: first-run 1.5s 1 ease-in-out; cursor: ew-resize; - height: @unit-4; + height: $unit-4; left: 0; max-width: 100%; - min-width: @unit-4; + min-width: $unit-4; opacity: 0; outline: none; position: relative; @@ -86,10 +86,10 @@ } .comparison-label { - background: fade(@dark-color, 50%); - bottom: @unit-4; - color: @light-color; - padding: @unit-1 @unit-2; + background: fade($dark-color, 50%); + bottom: $unit-4; + color: $light-color; + padding: $unit-1 $unit-2; position: absolute; user-select: none; } @@ -100,13 +100,13 @@ width: 0; } 25% { - width: @unit-12; + width: $unit-12; } 50% { - width: @unit-4; + width: $unit-4; } 75% { - width: @unit-6; + width: $unit-6; } 100% { width: 0; diff --git a/src/dropdowns.less b/src/_dropdowns.scss index c1684a0..324440b 100644 --- a/src/dropdowns.less +++ b/src/_dropdowns.scss @@ -29,8 +29,8 @@ // Fix dropdown-toggle border radius in button groups .btn-group { .dropdown-toggle:nth-last-child(2) { - border-bottom-right-radius: @border-radius; - border-top-right-radius: @border-radius; + border-bottom-right-radius: $border-radius; + border-top-right-radius: $border-radius; } } } diff --git a/src/_empty.scss b/src/_empty.scss new file mode 100644 index 0000000..29cddac --- /dev/null +++ b/src/_empty.scss @@ -0,0 +1,21 @@ +// Empty states (or Blank slates) +.empty { + background: $bg-color; + border-radius: $border-radius; + color: $gray-color-dark; + text-align: center; + padding: 4 * $layout-spacing; + + .empty-icon { + margin-bottom: $layout-spacing-lg; + } + + .empty-title, + .empty-subtitle { + margin: $layout-spacing auto; + } + + .empty-action { + margin-top: $layout-spacing-lg; + } +} diff --git a/src/filters.less b/src/_filters.scss index e417081..965dfa3 100644 --- a/src/filters.less +++ b/src/_filters.scss @@ -1,7 +1,7 @@ // Filters .filter { .filter-nav { - margin: @layout-spacing 0; + margin: $layout-spacing 0; } .filter-body { @@ -15,8 +15,8 @@ &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"], &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"], &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] { - background: @primary-color; - color: @light-color; + background: $primary-color; + color: $light-color; } &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]), diff --git a/src/forms.less b/src/_forms.scss index 7ed91e6..b407d3c 100644 --- a/src/forms.less +++ b/src/_forms.scss @@ -1,71 +1,71 @@ // Forms .form-group { &:not(:last-child) { - margin-bottom: @layout-spacing; + margin-bottom: $layout-spacing; } } fieldset { - margin-bottom: @layout-spacing-lg; + margin-bottom: $layout-spacing-lg; } legend { - font-size: @font-size-lg; + font-size: $font-size-lg; font-weight: 500; - margin-bottom: @layout-spacing-lg; + margin-bottom: $layout-spacing-lg; } // Form element: Label .form-label { display: block; - padding: @control-padding-v + @border-width 0; + padding: $control-padding-v + $border-width 0; &.label-sm { - padding: @control-padding-v-sm + @border-width 0; + padding: $control-padding-v-sm + $border-width 0; } &.label-lg { - padding: @control-padding-v-lg + @border-width 0; + padding: $control-padding-v-lg + $border-width 0; } } // Form element: Input .form-input { appearance: none; - background: @bg-color-light; + background: $bg-color-light; background-image: none; - border: @border-width solid @border-color-dark; - border-radius: @border-radius; - color: @body-font-color; - .control-transition(); + border: $border-width solid $border-color-dark; + border-radius: $border-radius; + color: $body-font-color; + @include control-transition(); display: block; - font-size: @font-size; - height: @control-size; - line-height: @line-height; + font-size: $font-size; + height: $control-size; + line-height: $line-height; max-width: 100%; outline: none; - padding: @control-padding-v @control-padding-h; + padding: $control-padding-v $control-padding-h; position: relative; width: 100%; &:focus { - border-color: @primary-color; - .control-shadow(); + border-color: $primary-color; + @include control-shadow(); } &::placeholder { - color: @gray-color; + color: $gray-color; } // Input sizes &.input-sm { - font-size: @font-size-sm; - height: @control-size-sm; - padding: @control-padding-v-sm @control-padding-h; + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-v-sm $control-padding-h; } &.input-lg { - font-size: @font-size-lg; - height: @control-size-lg; - padding: @control-padding-v-lg @control-padding-h; + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-v-lg $control-padding-h; } &.input-inline { @@ -74,45 +74,45 @@ legend { width: auto; } - // Textarea - textarea& { - height: auto; - } - // Input types &[type="file"] { height: auto; } } +// Form element: Textarea +textarea.form-input { + height: auto; +} + // Form element: Input hint .form-input-hint { - color: @gray-color; - font-size: @font-size-sm; - margin-top: @unit-1; + color: $gray-color; + font-size: $font-size-sm; + margin-top: $unit-1; .has-success &, .is-success + & { - color: @success-color; + color: $success-color; } .has-error &, .is-error + & { - color: @error-color; + color: $error-color; } } // Form element: Select .form-select { appearance: none; - border: @border-width solid @border-color-dark; - border-radius: @border-radius; + border: $border-width solid $border-color-dark; + border-radius: $border-radius; color: inherit; - font-size: @font-size; - height: @control-size; - line-height: @line-height; + font-size: $font-size; + height: $control-size; + line-height: $line-height; outline: none; - padding: @control-padding-v @control-padding-h; + padding: $control-padding-v $control-padding-h; vertical-align: middle; width: 100%; @@ -121,16 +121,16 @@ legend { height: auto; option { - padding: @unit-h @unit-1; + padding: $unit-h $unit-1; } } &:not([multiple]):not([size]) { - 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; - padding-right: @control-icon-size + @control-padding-h; + 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; + padding-right: $control-icon-size + $control-padding-h; } &:focus { - border-color: @primary-color; - .control-shadow(); + border-color: $primary-color; + @include control-shadow(); } &::-ms-expand { display: none; @@ -138,15 +138,15 @@ legend { // Select sizes &.select-sm { - font-size: @font-size-sm; - height: @control-size-sm; - padding: @control-padding-v-sm (@control-icon-size + @control-padding-h) @control-padding-v-sm @control-padding-h; + font-size: $font-size-sm; + 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: @control-size-lg; - padding: @control-padding-v-lg (@control-icon-size + @control-padding-h) @control-padding-v-lg @control-padding-h; + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-v-lg ($control-icon-size + $control-padding-h) $control-padding-v-lg $control-padding-h; } } @@ -156,32 +156,32 @@ legend { position: relative; .form-icon { - height: @control-icon-size; - margin: 0 @control-padding-v; + height: $control-icon-size; + margin: 0 $control-padding-v; position: absolute; top: 50%; transform: translateY(-50%); - width: @control-icon-size; + width: $control-icon-size; } } .has-icon-left { .form-icon { - left: @border-width; + left: $border-width; } .form-input { - padding-left: @control-icon-size + @control-padding-v * 2; + padding-left: $control-icon-size + $control-padding-v * 2; } } .has-icon-right { .form-icon { - right: @border-width; + right: $border-width; } .form-input { - padding-right: @control-icon-size + @control-padding-v * 2; + padding-right: $control-icon-size + $control-padding-v * 2; } } @@ -190,8 +190,8 @@ legend { .form-radio, .form-switch { display: inline-block; - line-height: @line-height; - padding: (@control-size-sm - @line-height) / 2 (@control-icon-size + @control-padding-h); + line-height: $line-height; + padding: ($control-size-sm - $line-height) / 2 ($control-icon-size + $control-padding-h); position: relative; input { @@ -202,18 +202,18 @@ legend { position: absolute; width: 1px; &:focus + .form-icon { - border-color: @primary-color; - .control-shadow(); + border-color: $primary-color; + @include control-shadow(); } &:checked + .form-icon { - background: @primary-color; - border-color: @primary-color; + background: $primary-color; + border-color: $primary-color; } } .form-icon { - border: @border-width solid @border-color-dark; - .control-transition(); + border: $border-width solid $border-color-dark; + @include control-transition(); cursor: pointer; display: inline-block; position: absolute; @@ -223,29 +223,29 @@ legend { .form-checkbox, .form-radio { .form-icon { - background: @bg-color-light; - height: @control-icon-size; + background: $bg-color-light; + height: $control-icon-size; left: 0; - top: (@control-size-sm - @control-icon-size) / 2; - width: @control-icon-size; + top: ($control-size-sm - $control-icon-size) / 2; + width: $control-icon-size; } input { &:active + .form-icon { - background: @bg-color-dark; + background: $bg-color-dark; } } } .form-checkbox { .form-icon { - border-radius: @border-radius; + border-radius: $border-radius; } input { &:checked + .form-icon { &::before { background-clip: padding-box; - border: @border-width-lg solid @light-color; + border: $border-width-lg solid $light-color; border-left-width: 0; border-top-width: 0; content: ""; @@ -260,10 +260,10 @@ legend { } } &:indeterminate + .form-icon { - background: @primary-color; - border-color: @primary-color; + background: $primary-color; + border-color: $primary-color; &::before { - background: @bg-color-light; + background: $bg-color-light; content: ""; height: 2px; left: 50%; @@ -278,14 +278,14 @@ legend { } .form-radio { .form-icon { - border-radius: @control-icon-size / 2; + border-radius: $control-icon-size / 2; } input { &:checked + .form-icon { &::before { - background: @bg-color-light; - border-radius: @border-radius; + background: $bg-color-light; + border-radius: $border-radius; content: ""; height: 4px; left: 50%; @@ -301,27 +301,27 @@ legend { // Form element: Switch .form-switch { - padding-left: (@unit-8 + @control-padding-h); + padding-left: ($unit-8 + $control-padding-h); .form-icon { - background: @gray-color-light; + background: $gray-color-light; background-clip: padding-box; - border-radius: @unit-2 + @border-width; - height: @unit-4 + @border-width * 2; + border-radius: $unit-2 + $border-width; + height: $unit-4 + $border-width * 2; left: 0; - top: (@control-size-sm - @unit-4) / 2 - @border-width; - width: @unit-8; + top: ($control-size-sm - $unit-4) / 2 - $border-width; + width: $unit-8; &::before { - background: @bg-color-light; - border-radius: @unit-2; + background: $bg-color-light; + border-radius: $unit-2; content: ""; display: block; - height: @unit-4; + height: $unit-4; left: 0; position: absolute; top: 0; - .control-transition(); - width: @unit-4; + @include control-transition(); + width: $unit-4; } } @@ -333,7 +333,7 @@ legend { } &:active + .form-icon { &::before { - background: @bg-color; + background: $bg-color; } } } @@ -344,19 +344,19 @@ legend { display: flex; .input-group-addon { - background: @bg-color; - border: @border-width solid @border-color-dark; - border-radius: @border-radius; - line-height: @line-height; - padding: @control-padding-v @control-padding-h; + background: $bg-color; + border: $border-width solid $border-color-dark; + border-radius: $border-radius; + line-height: $line-height; + padding: $control-padding-v $control-padding-h; &.addon-sm { - font-size: @font-size-sm; - padding: @control-padding-v-sm @control-padding-h; + font-size: $font-size-sm; + padding: $control-padding-v-sm $control-padding-h; } &.addon-lg { - font-size: @font-size-lg; - padding: @control-padding-v-lg @control-padding-h; + font-size: $font-size-lg; + padding: $control-padding-v-lg $control-padding-h; } } @@ -366,7 +366,7 @@ legend { } .input-group-btn { - z-index: @zindex-0; + z-index: $zindex-0; } .form-input, @@ -379,15 +379,15 @@ legend { } &:not(:first-child):not(:last-child) { border-radius: 0; - margin-left: -@border-width; + margin-left: -$border-width; } &:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: -@border-width; + margin-left: -$border-width; } &:focus { - z-index: @zindex-0 + 1; + z-index: $zindex-0 + 1; } } @@ -405,17 +405,17 @@ legend { .form-select { .has-success &, &.is-success { - border-color: @success-color; + border-color: $success-color; &:focus { - .control-shadow(@success-color); + @include control-shadow($success-color); } } .has-error &, &.is-error { - border-color: @error-color; + border-color: $error-color; &:focus { - .control-shadow(@error-color); + @include control-shadow($error-color); } } } @@ -426,18 +426,18 @@ legend { .has-error &, &.is-error { .form-icon { - border-color: @error-color; + border-color: $error-color; } input { &:checked + .form-icon { - background: @error-color; - border-color: @error-color; + background: $error-color; + border-color: $error-color; } &:focus + .form-icon { - border-color: @error-color; - .control-shadow(@error-color); + border-color: $error-color; + @include control-shadow($error-color); } } } @@ -447,13 +447,13 @@ legend { .form-input { &:not(:placeholder-shown) { &:invalid { - border-color: @error-color; + border-color: $error-color; &:focus { - .control-shadow(@error-color); + @include control-shadow($error-color); } & + .form-input-hint { - color: @error-color; + color: $error-color; } } } @@ -464,7 +464,7 @@ legend { .form-select { &:disabled, &.disabled { - background-color: @bg-color-dark; + background-color: $bg-color-dark; cursor: not-allowed; opacity: .5; } @@ -472,7 +472,7 @@ legend { .form-input { &[readonly] { - background-color: @bg-color; + background-color: $bg-color; } } @@ -480,7 +480,7 @@ input { &:disabled, &.disabled { & + .form-icon { - background: @bg-color-dark; + background: $bg-color-dark; cursor: not-allowed; opacity: .5; } @@ -492,7 +492,7 @@ input { &:disabled, &.disabled { & + .form-icon::before { - background: @bg-color-light; + background: $bg-color-light; } } } @@ -500,7 +500,7 @@ input { // Form Horizontal .form-horizontal { - padding: @layout-spacing; + padding: $layout-spacing; .form-group { display: flex; @@ -509,6 +509,6 @@ input { .form-checkbox, .form-radio, .form-switch { - margin: (@control-size - @control-size-sm) / 2 0; + margin: ($control-size - $control-size-sm) / 2 0; } } diff --git a/src/icons.less b/src/_icons.scss index ca7672d..ad092b8 100644 --- a/src/icons.less +++ b/src/_icons.scss @@ -1,5 +1,5 @@ // CSS Icons -@icon-border-width: @border-width-lg; +$icon-border-width: $border-width-lg; .icon { box-sizing: border-box; @@ -31,7 +31,7 @@ .icon-forward, .icon-upward { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-right: 0; content: ""; @@ -69,7 +69,7 @@ &::after { background: currentColor; content: ""; - height: @icon-border-width; + height: $icon-border-width; width: .8em; } } @@ -80,7 +80,7 @@ background: currentColor; content: ""; height: .8em; - width: @icon-border-width; + width: $icon-border-width; } } @@ -139,7 +139,7 @@ background: currentColor; box-shadow: 0 -.35em, 0 .35em; content: ""; - height: @icon-border-width; + height: $icon-border-width; width: 100%; } } @@ -160,7 +160,7 @@ .icon-resize-vert { &::before, &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-right: 0; content: ""; @@ -209,7 +209,7 @@ &::before { background: currentColor; content: ""; - height: @icon-border-width; + height: $icon-border-width; width: 100%; } } @@ -219,7 +219,7 @@ background: currentColor; content: ""; height: 100%; - width: @icon-border-width; + width: $icon-border-width; } } .icon-cross { @@ -238,7 +238,7 @@ // Icon check .icon-check { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-right: 0; border-top: 0; content: ""; @@ -250,12 +250,12 @@ // Icon stop .icon-stop { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; &::before { background: currentColor; content: ""; - height: @icon-border-width; + height: $icon-border-width; transform: translate(-50%, -50%) rotate(45deg); width: 1em; } @@ -263,7 +263,7 @@ // Icon shutdown .icon-shutdown { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; border-top-color: transparent; &::before { @@ -271,14 +271,14 @@ content: ""; height: .5em; top: .1em; - width: @icon-border-width; + width: $icon-border-width; } } // Icon refresh .icon-refresh { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; border-right-color: transparent; content: ""; @@ -300,7 +300,7 @@ // Icon search .icon-search { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; content: ""; height: .75em; @@ -312,7 +312,7 @@ &::after { background: currentColor; content: ""; - height: @icon-border-width; + height: $icon-border-width; left: 80%; top: 80%; transform: translate(-50%, -50%) rotate(45deg); @@ -323,7 +323,7 @@ // Icon edit .icon-edit { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; content: ""; height: .4em; transform: translate(-40%, -60%) rotate(-45deg); @@ -345,9 +345,9 @@ // Icon delete .icon-delete { &::before { - border: @icon-border-width solid currentColor; - border-bottom-left-radius: @border-radius; - border-bottom-right-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; border-top: 0; content: ""; height: .75em; @@ -358,20 +358,20 @@ background: currentColor; box-shadow: -.25em .2em, .25em .2em; content: ""; - height: @icon-border-width; - top: @icon-border-width/2; + height: $icon-border-width; + top: $icon-border-width/2; width: .5em; } } // Icon share .icon-share { - border: @icon-border-width solid currentColor; - border-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-radius: $border-radius; border-right: 0; border-top: 0; &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-left: 0; border-top: 0; content: ""; @@ -382,7 +382,7 @@ width: .4em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-right: 0; border-radius: 75% 0; @@ -399,13 +399,13 @@ content: ""; height: 1em; left: 15%; - width: @icon-border-width; + width: $icon-border-width; } &::after { - border: @icon-border-width solid currentColor; - border-bottom-right-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-bottom-right-radius: $border-radius; border-left: 0; - border-top-right-radius: @border-radius; + border-top-right-radius: $border-radius; content: ""; height: .65em; top: 35%; @@ -417,19 +417,19 @@ // Icon bookmark .icon-bookmark { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; - border-top-left-radius: @border-radius; - border-top-right-radius: @border-radius; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; content: ""; height: .9em; width: .8em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-left: 0; - border-radius: @border-radius; + border-radius: $border-radius; content: ""; height: .5em; transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); @@ -440,9 +440,9 @@ // Icon download & upload .icon-download, .icon-upload { - border-bottom: @icon-border-width solid currentColor; + border-bottom: $icon-border-width solid currentColor; &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-right: 0; content: ""; @@ -455,7 +455,7 @@ content: ""; height: .6em; top: 40%; - width: @icon-border-width; + width: $icon-border-width; } } @@ -470,14 +470,14 @@ // Icon time .icon-time { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; &::before { background: currentColor; content: ""; height: .4em; transform: translate(-50%, -75%); - width: @icon-border-width; + width: $icon-border-width; } &::after { background: currentColor; @@ -485,21 +485,21 @@ height: .3em; transform: translate(-50%, -75%) rotate(90deg); transform-origin: 50% 90%; - width: @icon-border-width; + width: $icon-border-width; } } // Icon mail .icon-mail { &::before { - border: @icon-border-width solid currentColor; - border-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-radius: $border-radius; content: ""; height: .8em; width: 1em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-right: 0; border-top: 0; content: ""; @@ -512,7 +512,7 @@ // Icon people .icon-people { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; content: ""; height: .45em; @@ -520,7 +520,7 @@ width: .45em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50% 50% 0 0; content: ""; height: .4em; @@ -531,14 +531,14 @@ // Icon message .icon-message { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; - border-radius: @border-radius; + border-radius: $border-radius; border-right: 0; &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-left: 0; - border-bottom-right-radius: @border-radius; + border-bottom-right-radius: $border-radius; border-top: 0; content: ""; height: .8em; @@ -548,22 +548,22 @@ } &::after { background: currentColor; - border-radius: @border-radius; + border-radius: $border-radius; content: ""; height: .3em; left: 10%; top: 100%; transform: translate(0, -90%) rotate(45deg); - width: @icon-border-width; + width: $icon-border-width; } } // Icon photo .icon-photo { - border: @icon-border-width solid currentColor; - border-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-radius: $border-radius; &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; content: ""; height: .25em; @@ -572,7 +572,7 @@ width: .25em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-left: 0; content: ""; @@ -587,7 +587,7 @@ .icon-link { &::before, &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 5em 0 0 5em; border-right: 0; content: ""; @@ -605,7 +605,7 @@ // Icon location .icon-location { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50% 50% 50% 0; content: ""; height: .8em; @@ -613,7 +613,7 @@ width: .8em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; content: ""; height: .2em; @@ -624,7 +624,7 @@ // Icon emoji .icon-emoji { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; &::before { border-radius: 50%; @@ -634,7 +634,7 @@ width: .1em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom-color: transparent; border-radius: 50%; border-right-color: transparent; diff --git a/src/_labels.scss b/src/_labels.scss new file mode 100644 index 0000000..068d3ac --- /dev/null +++ b/src/_labels.scss @@ -0,0 +1,33 @@ +// Labels +.label { + display: inline-block; + @include label-base(); + @include label-variant(lighten($body-font-color, 5%), $bg-color); + line-height: 1; + + &.label-rounded { + border-radius: 5rem; + padding-left: .4rem; + padding-right: .4rem; + } + + &.label-primary { + @include label-variant($light-color, $primary-color); + } + + &.label-secondary { + @include label-variant($primary-color, $secondary-color); + } + + &.label-success { + @include label-variant($light-color, $success-color); + } + + &.label-warning { + @include label-variant($light-color, $warning-color); + } + + &.label-error { + @include label-variant($light-color, $error-color); + } +} diff --git a/src/layout.less b/src/_layout.scss index 7fd2c60..83e2c18 100644 --- a/src/layout.less +++ b/src/_layout.scss @@ -2,29 +2,31 @@ .container { margin-left: auto; margin-right: auto; - padding-left: @layout-spacing; - padding-right: @layout-spacing; + padding-left: $layout-spacing; + padding-right: $layout-spacing; width: 100%; - &:extend(.clearfix all); + @extend .clearfix; + + $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size; &.grid-xl { - max-width: @size-xl + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-xl; } &.grid-lg { - max-width: @size-lg + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-lg; } &.grid-md { - max-width: @size-md + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-md; } &.grid-sm { - max-width: @size-sm + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-sm; } &.grid-xs { - max-width: @size-xs + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-xs; } } @@ -41,8 +43,8 @@ .columns { display: flex; flex-wrap: wrap; - margin-left: -@layout-spacing; - margin-right: -@layout-spacing; + margin-left: -$layout-spacing; + margin-right: -$layout-spacing; &.col-gapless { margin-left: 0; @@ -61,8 +63,8 @@ .column { flex: 1; max-width: 100%; - padding-left: @layout-spacing; - padding-right: @layout-spacing; + padding-left: $layout-spacing; + padding-right: $layout-spacing; &.col-12, &.col-11, @@ -130,7 +132,7 @@ .col-mr-auto { margin-right: auto; } -@media screen and (max-width: @size-xl ) { +@media (max-width: $size-xl) { .col-xl-12, .col-xl-11, .col-xl-10, @@ -188,7 +190,7 @@ display: block !important; } } -@media screen and (max-width: @size-lg ) { +@media (max-width: $size-lg) { .col-lg-12, .col-lg-11, .col-lg-10, @@ -246,7 +248,7 @@ display: block !important; } } -@media screen and (max-width: @size-md ) { +@media (max-width: $size-md) { .col-md-12, .col-md-11, .col-md-10, @@ -304,7 +306,7 @@ display: block !important; } } -@media screen and (max-width: @size-sm ) { +@media (max-width: $size-sm) { .col-sm-12, .col-sm-11, .col-sm-10, @@ -362,7 +364,7 @@ display: block !important; } } -@media screen and (max-width: @size-xs) { +@media (max-width: $size-xs) { .col-xs-12, .col-xs-11, .col-xs-10, diff --git a/src/media.less b/src/_media.scss index a55b8cb..68c5934 100644 --- a/src/media.less +++ b/src/_media.scss @@ -22,7 +22,6 @@ padding: 0; position: relative; width: 100%; - &::before { content: ""; display: block; @@ -41,6 +40,7 @@ top: 0; width: 100%; } + video { height: auto; max-width: 100%; @@ -61,10 +61,10 @@ } .figure { - margin: 0 0 @layout-spacing 0; + margin: 0 0 $layout-spacing 0; .figure-caption { - color: @gray-color-dark; - margin-top: @layout-spacing; + color: $gray-color-dark; + margin-top: $layout-spacing; } -} +}
\ No newline at end of file diff --git a/src/_menus.scss b/src/_menus.scss new file mode 100644 index 0000000..234e4bb --- /dev/null +++ b/src/_menus.scss @@ -0,0 +1,56 @@ +// Menus +.menu { + background: $bg-color-light; + border-radius: $border-radius; + list-style: none; + margin: 0; + min-width: $control-min-width; + padding: $unit-2; + @include 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 $unit-2; + text-decoration: none; + user-select: none; + + & > a { + border-radius: $border-radius; + color: inherit; + display: block; + 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; + color: $primary-color; + } + } + + & + .menu-item { + margin-top: $unit-1; + } + } + + .menu-badge { + float: right; + padding: $unit-1 0; + + .btn { + margin-top: -$unit-h; + } + } +} diff --git a/src/meters.less b/src/_meters.scss index d0b2b59..9fd98b0 100644 --- a/src/meters.less +++ b/src/_meters.scss @@ -2,12 +2,12 @@ // Credit: https://css-tricks.com/html5-meter-element/ .meter { appearance: none; - background: @bg-color; + background: $bg-color; border: 0; - border-radius: @border-radius; + border-radius: $border-radius; display: block; width: 100%; - height: @unit-4; + height: $unit-4; &::-webkit-meter-inner-element { display: block; @@ -17,41 +17,41 @@ &::-webkit-meter-optimum-value, &::-webkit-meter-suboptimum-value, &::-webkit-meter-even-less-good-value { - border-radius: @border-radius; + border-radius: $border-radius; } &::-webkit-meter-bar { - background: @bg-color; + background: $bg-color; } &::-webkit-meter-optimum-value { - background: @success-color; + background: $success-color; } &::-webkit-meter-suboptimum-value { - background: @warning-color; + background: $warning-color; } &::-webkit-meter-even-less-good-value { - background: @error-color; + background: $error-color; } &::-moz-meter-bar, &:-moz-meter-optimum, &:-moz-meter-sub-optimum, &:-moz-meter-sub-sub-optimum { - border-radius: @border-radius; + border-radius: $border-radius; } &:-moz-meter-optimum::-moz-meter-bar { - background: @success-color; + background: $success-color; } &:-moz-meter-sub-optimum::-moz-meter-bar { - background: @warning-color; + background: $warning-color; } &:-moz-meter-sub-sub-optimum::-moz-meter-bar { - background: @error-color; + background: $error-color; } } diff --git a/src/_mixins.scss b/src/_mixins.scss new file mode 100644 index 0000000..ae64423 --- /dev/null +++ b/src/_mixins.scss @@ -0,0 +1,186 @@ +// Mixins +// Avatar mixin +@mixin avatar-base($size: $unit-8) { + font-size: $size / 2; + height: $size; + width: $size; +} + +// Background color utility mixin +@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) { + #{$name} { + background: $color; + } +} + +// Button variant mixin +@mixin button-variant($color: $primary-color) { + background: $color; + border-color: darken($color, 3%); + color: $light-color; + &:focus { + @include control-shadow($color); + } + &:focus, + &:hover { + background: darken($color, 2%); + border-color: darken($color, 5%); + color: $light-color; + } + &:active, + &.active { + background: darken($color, 7%); + border-color: darken($color, 10%); + color: $light-color; + } + &.loading { + &::after { + border-bottom-color: $light-color; + border-left-color: $light-color; + } + } +} + +@mixin button-outline-variant($color: $primary-color) { + background: $light-color; + border-color: $color; + color: $color; + &:focus { + @include control-shadow($color); + } + &:focus, + &:hover { + background: lighten($color, 50%); + border-color: darken($color, 2%); + color: $color; + } + &:active, + &.active { + background: $color; + border-color: darken($color, 5%); + color: $light-color; + } + &.loading { + &::after { + border-bottom-color: $color; + border-left-color: $color; + } + } +} + +// Clearfix mixin +@mixin clearfix() { + &::after { + clear: both; + content: ""; + display: table; + } +} + +// Component focus shadow +@mixin control-shadow($color: $primary-color) { + box-shadow: 0 0 0 .1rem rgba($color, .2); +} + +// Component transition +@mixin control-transition() { + transition: all .2s ease; +} + +// Label base style +@mixin label-base() { + border-radius: $border-radius; + line-height: 1; + padding: .15rem .2rem; +} + +@mixin label-variant($color: $light-color, $bg-color: $primary-color) { + background: $bg-color; + color: $color; +} + +// Margin utility mixin +@mixin margin-variant($id: 1, $size: $unit-1) { + .m-#{$id} { + margin: $size; + } + .mb-#{$id} { + margin-bottom: $size; + } + .ml-#{$id} { + margin-left: $size; + } + .mr-#{$id} { + margin-right: $size; + } + .mt-#{$id} { + margin-top: $size; + } + .mx-#{$id} { + margin-left: $size; + margin-right: $size; + } + .my-#{$id} { + margin-bottom: $size; + margin-top: $size; + } +} + +// Padding utility mixin +@mixin padding-variant($id: 1, $size: $unit-1) { + .p-#{$id} { + padding: $size; + } + .pb-#{$id} { + padding-bottom: $size; + } + .pl-#{$id} { + padding-left: $size; + } + .pr-#{$id} { + padding-right: $size; + } + .pt-#{$id} { + padding-top: $size; + } + .px-#{$id} { + padding-left: $size; + padding-right: $size; + } + .py-#{$id} { + padding-bottom: $size; + padding-top: $size; + } +} + +// Shadow mixin +@mixin shadow-variant($offset) { + box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3); +} + +// Text color utility mixin +@mixin text-color-variant($name: ".text-primary", $color: $primary-color) { + #{$name} { + color: $color; + } + + a#{$name} { + &:focus, + &:hover { + color: darken($color, 5%); + } + } +} + +// Text Ellipsis +@mixin text-ellipsis() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// Toast variant mixin +@mixin toast-variant($color: $dark-color) { + background: rgba($color, .9); + border-color: $color; +}
\ No newline at end of file diff --git a/src/modals.less b/src/_modals.scss index fb5cdf9..daf7cab 100644 --- a/src/modals.less +++ b/src/_modals.scss @@ -7,7 +7,7 @@ left: 0; opacity: 0; overflow: hidden; - padding: @layout-spacing; + padding: $layout-spacing; position: fixed; right: 0; top: 0; @@ -16,10 +16,10 @@ &.active { display: flex; opacity: 1; - z-index: @zindex-4; + z-index: $zindex-4; .modal-overlay { - background: fade(@bg-color, 75%); + background: rgba($bg-color, .75); bottom: 0; cursor: default; display: block; @@ -32,27 +32,27 @@ .modal-container { animation: slide-down .2s ease 1; max-width: 640px; - z-index: @zindex-0; + z-index: $zindex-0; } } &.modal-sm { .modal-container { - max-width: @control-max-width; + max-width: $control-max-width; } } } .modal-container { - background: @bg-color-light; - border-radius: @border-radius; + background: $bg-color-light; + border-radius: $border-radius; display: block; padding: 0; - .shadow-variant(.2rem); + @include shadow-variant(.2rem); text-align: left; .modal-header { - padding: @layout-spacing-lg; + padding: $layout-spacing-lg; .modal-title { margin: 0; @@ -62,12 +62,12 @@ .modal-body { max-height: 50vh; overflow-y: auto; - padding: @layout-spacing-lg; + padding: $layout-spacing-lg; position: relative; } .modal-footer { - padding: @layout-spacing-lg; + padding: $layout-spacing-lg; text-align: right; } } diff --git a/src/navbar.less b/src/_navbar.scss index 3e212c0..a90b6e6 100755 --- a/src/navbar.less +++ b/src/_navbar.scss @@ -22,7 +22,7 @@ } .navbar-brand { - font-size: @font-size-lg; + font-size: $font-size-lg; font-weight: 500; text-decoration: none; } diff --git a/src/navs.less b/src/_navs.scss index 5f471b0..4bedc27 100644 --- a/src/navs.less +++ b/src/_navs.scss @@ -3,32 +3,32 @@ display: flex; flex-direction: column; list-style: none; - margin: @unit-1 0; + margin: $unit-1 0; .nav-item { a { - color: @gray-color-dark; - padding: @unit-1 @unit-2; + color: $gray-color-dark; + padding: $unit-1 $unit-2; text-decoration: none; &:focus, &:hover { - color: @primary-color; + color: $primary-color; } } &.active { & > a { - color: darken(@gray-color-dark, 10%); + color: darken($gray-color-dark, 10%); font-weight: bold; &:focus, &:hover { - color: @primary-color; + color: $primary-color; } } } } & .nav { - margin-bottom: @unit-2; - margin-left: @unit-4; + margin-bottom: $unit-2; + margin-left: $unit-4; } } diff --git a/src/normalize.less b/src/_normalize.scss index 28ed4d7..f157a8c 100644 --- a/src/normalize.less +++ b/src/_normalize.scss @@ -140,7 +140,7 @@ code, kbd, pre, samp { - font-family: @mono-font-family; /* 1 (changed) */ + font-family: $mono-font-family; /* 1 (changed) */ font-size: 1em; /* 2 */ } diff --git a/src/pagination.less b/src/_pagination.scss index 596651b..6efc7ba 100644 --- a/src/pagination.less +++ b/src/_pagination.scss @@ -2,26 +2,26 @@ .pagination { display: flex; list-style: none; - margin: @unit-1 0; - padding: @unit-1 0; + margin: $unit-1 0; + padding: $unit-1 0; .page-item { - margin: @unit-1 @unit-o; + margin: $unit-1 $unit-o; span { display: inline-block; - padding: @unit-1 @unit-1; + padding: $unit-1 $unit-1; } a { - border-radius: @border-radius; - color: @gray-color-dark; + border-radius: $border-radius; + color: $gray-color-dark; display: inline-block; - padding: @unit-1 @unit-2; + padding: $unit-1 $unit-2; text-decoration: none; &:focus, &:hover { - color: @primary-color; + color: $primary-color; } } @@ -35,8 +35,8 @@ &.active { a { - background: @primary-color; - color: @light-color; + background: $primary-color; + color: $light-color; } } diff --git a/src/panels.less b/src/_panels.scss index 3c6bae8..386f96e 100644 --- a/src/panels.less +++ b/src/_panels.scss @@ -1,14 +1,14 @@ // Panels .panel { - border: @border-width solid @border-color; - border-radius: @border-radius; + border: $border-width solid $border-color; + border-radius: $border-radius; display: flex; flex-direction: column; .panel-header, .panel-footer { flex: 0 0 auto; - padding: @layout-spacing-lg; + padding: $layout-spacing-lg; } .panel-nav { @@ -18,6 +18,6 @@ .panel-body { flex: 1 1 auto; overflow-y: auto; - padding: 0 @layout-spacing-lg; + padding: 0 $layout-spacing-lg; } } diff --git a/src/parallax.less b/src/_parallax.scss index e353fd4..c097e1f 100644 --- a/src/parallax.less +++ b/src/_parallax.scss @@ -1,9 +1,17 @@ // Parallax -@parallax-deg: 3deg; -@parallax-offset: 6.5px; -@parallax-offset-z: 100px; -@parallax-perspective: 1000px; -@parallax-scale: 1 - unit(@parallax-offset-z / @parallax-perspective); +$parallax-deg: 3deg; +$parallax-offset: 6.5px; +$parallax-offset-z: 100px; +$parallax-perspective: 1000px; +$parallax-scale: 1 - unit($parallax-offset-z / $parallax-perspective); + +// Mixin: Parallax direction +@mixin parallax-dir() { + height: 50%; + position: absolute; + width: 50%; + z-index: $zindex-3; +} .parallax { display: block; @@ -13,8 +21,8 @@ .parallax-content { height: auto; - .shadow-variant(1rem); - transform: perspective(@parallax-perspective); + @include shadow-variant(1rem); + transform: perspective($parallax-perspective); transform-style: preserve-3d; transition: all .4s ease; width: 100%; @@ -32,98 +40,90 @@ .parallax-front { align-items: center; - color: @light-color; + color: $light-color; display: flex; height: 100%; justify-content: center; left: 0; position: absolute; text-align: center; - text-shadow: 0 0 20px fade(@dark-color, 50%); + text-shadow: 0 0 20px fade($dark-color, 50%); top: 0; - transform: translateZ(@parallax-offset-z) scale(@parallax-scale); + transform: translateZ($parallax-offset-z) scale($parallax-scale); transition: all .4s ease; width: 100%; - z-index: @zindex-0; + z-index: $zindex-0; } .parallax-top-left { - .parallax-dir(); + @include parallax-dir(); left: 0; top: 0; &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(@parallax-deg); + transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg); &::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%); } .parallax-front { - transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale); + transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale); } } } .parallax-top-right { - .parallax-dir(); + @include parallax-dir(); right: 0; top: 0; &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(-@parallax-deg); + transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg); &::before { background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%); } .parallax-front { - transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale); + transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale); } } } .parallax-bottom-left { - .parallax-dir(); + @include parallax-dir(); bottom: 0; left: 0; &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(@parallax-deg); + transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg); &::before { background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%); } .parallax-front { - transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale); + transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale); } } } .parallax-bottom-right { - .parallax-dir(); + @include parallax-dir(); bottom: 0; right: 0; &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(-@parallax-deg); + transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg); &::before { background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%); } .parallax-front { - transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale); + transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale); } } } } - -// Mixin: Parallax direction -.parallax-dir() { - height: 50%; - position: absolute; - width: 50%; - z-index: @zindex-3; -} diff --git a/src/popovers.less b/src/_popovers.scss index 0ba28a0..eee2fc9 100644 --- a/src/popovers.less +++ b/src/_popovers.scss @@ -7,13 +7,13 @@ content: attr(data-tooltip); opacity: 0; left: 50%; - padding: @layout-spacing; + padding: $layout-spacing; position: absolute; top: 0; transform: translate(-50%, -50%) scale(0); transition: transform .2s ease; - width: @control-max-width; - z-index: @zindex-4; + width: $control-max-width; + z-index: $zindex-4; } :focus + .popover-container, @@ -65,6 +65,6 @@ .card { border: 0; - .shadow-variant(.2rem); + @include shadow-variant(.2rem); } } diff --git a/src/progress.less b/src/_progress.scss index cf9e34b..f173772 100644 --- a/src/progress.less +++ b/src/_progress.scss @@ -2,32 +2,32 @@ // Credit: https://css-tricks.com/html5-progress-element/ .progress { appearance: none; - background: @bg-color-dark; + background: $bg-color-dark; border: 0; - border-radius: @border-radius; - color: @primary-color; - height: @unit-1; + border-radius: $border-radius; + color: $primary-color; + height: $unit-1; position: relative; width: 100%; &::-webkit-progress-bar { background: transparent; - border-radius: @border-radius; + border-radius: $border-radius; } &::-webkit-progress-value { - background: @primary-color; - border-radius: @border-radius; + background: $primary-color; + border-radius: $border-radius; } &::-moz-progress-bar { - background: @primary-color; - border-radius: @border-radius; + background: $primary-color; + border-radius: $border-radius; } &:indeterminate { animation: progress-indeterminate 1.5s linear infinite; - background: @bg-color-dark linear-gradient(to right, @primary-color 30%, @bg-color-dark 30%) top left / 150% 150% no-repeat; + background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat; &::-moz-progress-bar { background: transparent; diff --git a/src/sliders.less b/src/_sliders.scss index bf5ce96..501d91e 100644 --- a/src/sliders.less +++ b/src/_sliders.scss @@ -5,39 +5,39 @@ background: transparent; display: block; width: 100%; - height: @unit-6; + height: $unit-6; &:focus { - .control-shadow(); + @include control-shadow(); outline: none; } // Slider Thumb &::-webkit-slider-thumb { -webkit-appearance: none; - background: @primary-color; + background: $primary-color; border: 0; border-radius: 50%; - height: @unit-3; - margin-top: -(@unit-3 - @unit-h) / 2 ; + height: $unit-3; + margin-top: -($unit-3 - $unit-h) / 2 ; transition: transform .2s ease; - width: @unit-3; + width: $unit-3; } &::-moz-range-thumb { - background: @primary-color; + background: $primary-color; border: 0; border-radius: 50%; - height: @unit-3; + height: $unit-3; transition: transform .2s ease; - width: @unit-3; + width: $unit-3; } &::-ms-thumb { - background: @primary-color; + background: $primary-color; border: 0; border-radius: 50%; - height: @unit-3; + height: $unit-3; transition: transform .2s ease; - width: @unit-3; + width: $unit-3; } &:active { @@ -55,39 +55,39 @@ &:disabled, &.disabled { &::-webkit-slider-thumb { - background: @gray-color-light; + background: $gray-color-light; transform: scale(1); } &::-moz-range-thumb { - background: @gray-color-light; + background: $gray-color-light; transform: scale(1); } &::-ms-thumb { - background: @gray-color-light; + background: $gray-color-light; transform: scale(1); } } // Slider Track &::-webkit-slider-runnable-track { - background: @bg-color-dark; - border-radius: @border-radius; - height: @unit-h; + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; width: 100%; } &::-moz-range-track { - background: @bg-color-dark; - border-radius: @border-radius; - height: @unit-h; + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; width: 100%; } &::-ms-track { - background: @bg-color-dark; - border-radius: @border-radius; - height: @unit-h; + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; width: 100%; } &::-ms-fill-lower { - background: @primary-color; + background: $primary-color; } } diff --git a/src/steps.less b/src/_steps.scss index fa0167f..d5ddc6e 100644 --- a/src/steps.less +++ b/src/_steps.scss @@ -3,18 +3,18 @@ display: flex; flex-wrap: nowrap; list-style: none; - margin: @unit-1 0; + margin: $unit-1 0; width: 100%; .step-item { flex: 1 1 0; margin-top: 0; - min-height: 20px; + min-height: 1rem; text-align: center; position: relative; &:not(:first-child)::before { - background: @primary-color; + background: $primary-color; content: ""; height: 2px; left: -50%; @@ -24,44 +24,44 @@ } a { - color: @gray-color; + color: $gray-color; display: inline-block; padding: 20px 10px 0; text-decoration: none; &::before { - background: @primary-color; - border: @border-width-lg solid @light-color; + background: $primary-color; + border: $border-width-lg solid $light-color; border-radius: 50%; content: ""; display: block; - height: @unit-3; + height: $unit-3; left: 50%; position: absolute; - top: @unit-1; + top: $unit-1; transform: translateX(-50%); - width: @unit-3; - z-index: @zindex-0; + width: $unit-3; + z-index: $zindex-0; } } &.active { a { &::before { - background: @light-color; - border: @border-width-lg solid @primary-color; + background: $light-color; + border: $border-width-lg solid $primary-color; } } & ~ .step-item { &::before { - background: @border-color; + background: $border-color; } a { &::before { - background: @gray-color-light; + background: $gray-color-light; } } } diff --git a/src/tables.less b/src/_tables.scss index e9f747d..63a163a 100644 --- a/src/tables.less +++ b/src/_tables.scss @@ -8,7 +8,7 @@ &.table-striped { tbody { tr:nth-of-type(odd) { - background: @bg-color; + background: $bg-color; } } } @@ -17,7 +17,7 @@ tbody { tr { &:hover { - background: @bg-color-dark; + background: $bg-color-dark; } } } @@ -28,7 +28,7 @@ tbody { tr { &.active { - background: @bg-color-dark; + background: $bg-color-dark; } } } @@ -36,10 +36,10 @@ td, th { - border-bottom: @border-width solid @border-color; - padding: @unit-3 @unit-2; + border-bottom: $border-width solid $border-color; + padding: $unit-3 $unit-2; } th { - border-bottom-width: @border-width-lg; + border-bottom-width: $border-width-lg; } } diff --git a/src/tabs.less b/src/_tabs.scss index c5af2b6..e9f9e2e 100644 --- a/src/tabs.less +++ b/src/_tabs.scss @@ -1,11 +1,11 @@ // Tabs .tab { align-items: center; - border-bottom: @border-width solid @border-color; + border-bottom: $border-width solid $border-color; display: flex; flex-wrap: wrap; list-style: none; - margin: @unit-1 0 @unit-1 - @border-width 0; + margin: $unit-1 0 ($unit-1 - $border-width) 0; .tab-item { margin-top: 0; @@ -16,21 +16,21 @@ } a { - border-bottom: @border-width-lg solid transparent; + border-bottom: $border-width-lg solid transparent; color: inherit; display: block; - margin: 0 @unit-2 0 0; - padding: @unit-2 @unit-1 @unit-2 - @border-width-lg @unit-1; + margin: 0 $unit-2 0 0; + padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1; text-decoration: none; &:focus, &:hover { - color: @link-color; + color: $link-color; } } &.active a, a.active { - border-bottom-color: @primary-color; - color: @link-color; + border-bottom-color: $primary-color; + color: $link-color; } } diff --git a/src/tiles.less b/src/_tiles.scss index a99540e..384d150 100644 --- a/src/tiles.less +++ b/src/_tiles.scss @@ -11,15 +11,15 @@ .tile-content { flex: 1 1 auto; &:not(:first-child) { - padding-left: @unit-2; + padding-left: $unit-2; } &:not(:last-child) { - padding-right: @unit-2; + padding-right: $unit-2; } } .tile-title, .tile-subtitle { - line-height: @line-height; + line-height: $line-height; } &.tile-centered { @@ -32,7 +32,7 @@ .tile-title, .tile-subtitle { margin-bottom: 0; - .text-ellipsis; + @include text-ellipsis(); } } } diff --git a/src/timelines.less b/src/_timelines.scss index 02b421e..88cae04 100644 --- a/src/timelines.less +++ b/src/_timelines.scss @@ -2,15 +2,15 @@ .timeline { .timeline-item { display: flex; - margin-bottom: @unit-6; + margin-bottom: $unit-6; position: relative; &::before { - background: @border-color; + background: $border-color; content: ""; height: 100%; left: 11px; position: absolute; - top: @unit-6; + top: $unit-6; width: 2px; } @@ -20,32 +20,32 @@ .timeline-content { flex: 1 1 auto; - padding: 2px 0 2px @layout-spacing-lg; + padding: 2px 0 2px $layout-spacing-lg; } .timeline-icon { border-radius: 50%; - color: @light-color; + color: $light-color; display: block; - height: @unit-6; + height: $unit-6; text-align: center; - width: @unit-6; + width: $unit-6; &::before { - border: @border-width-lg solid @primary-color; + border: $border-width-lg solid $primary-color; border-radius: 50%; content: ""; display: block; - height: @unit-2; - left: @unit-2; + height: $unit-2; + left: $unit-2; position: absolute; - top: @unit-2; - width: @unit-2; + top: $unit-2; + width: $unit-2; } &.icon-lg { - background: @primary-color; - font-size: @font-size-lg; - line-height: @line-height; + background: $primary-color; + font-size: $font-size-lg; + line-height: $line-height; &::before { content: none; } diff --git a/src/_toasts.scss b/src/_toasts.scss new file mode 100644 index 0000000..f113e1d --- /dev/null +++ b/src/_toasts.scss @@ -0,0 +1,41 @@ +// Toasts +.toast { + border: $border-width solid $dark-color; + border-radius: $border-radius; + color: $light-color; + display: block; + padding: $layout-spacing; + @include toast-variant($dark-color); + width: 100%; + + &.toast-primary { + @include toast-variant($primary-color); + } + + &.toast-success { + @include toast-variant($success-color); + } + + &.toast-warning { + @include toast-variant($warning-color); + } + + &.toast-error { + @include toast-variant($error-color); + } + + a { + color: $light-color; + text-decoration: underline; + &:focus, + &:hover, + &:active, + &.active { + opacity: .75; + } + } + + .btn-clear { + margin: 2px -2px 2px 4px; + } +} diff --git a/src/tooltips.less b/src/_tooltips.scss index 02dc201..90cf1ad 100644 --- a/src/tooltips.less +++ b/src/_tooltips.scss @@ -2,31 +2,31 @@ .tooltip { position: relative; &::after { - background: fade(@dark-color, 90%); - border-radius: @border-radius; + background: rgba($dark-color, .9); + border-radius: $border-radius; bottom: 100%; - color: @light-color; + color: $light-color; content: attr(data-tooltip); display: block; - font-size: @font-size-sm; + font-size: $font-size-sm; left: 50%; - max-width: @control-max-width; + max-width: $control-max-width; opacity: 0; overflow: hidden; - padding: @unit-1 @unit-2; + padding: $unit-1 $unit-2; pointer-events: none; position: absolute; text-overflow: ellipsis; - transform: translate(-50%, @unit-2); + transform: translate(-50%, $unit-2); transition: all .2s ease; white-space: nowrap; - z-index: @zindex-3; + z-index: $zindex-3; } &:focus, &:hover { &::after { opacity: 1; - transform: translate(-50%, -@unit-1); + transform: translate(-50%, -$unit-1); } } &[disabled], @@ -38,12 +38,12 @@ &::after { bottom: 50%; left: 100%; - transform: translate(-@unit-1, 50%); + transform: translate(-$unit-1, 50%); } &:focus, &:hover { &::after { - transform: translate(@unit-1, 50%); + transform: translate($unit-1, 50%); } } } @@ -51,12 +51,12 @@ &::after { bottom: auto; top: 100%; - transform: translate(-50%, -@unit-2); + transform: translate(-50%, -$unit-2); } &:focus, &:hover { &::after { - transform: translate(-50%, @unit-1); + transform: translate(-50%, $unit-1); } } } @@ -65,12 +65,12 @@ bottom: 50%; left: auto; right: 100%; - transform: translate(@unit-2, 50%); + transform: translate($unit-2, 50%); } &:focus, &:hover { &::after { - transform: translate(-@unit-1, 50%); + transform: translate(-$unit-1, 50%); } } } diff --git a/src/typography.less b/src/_typography.scss index 5fd152f..5999568 100644 --- a/src/typography.less +++ b/src/_typography.scss @@ -47,8 +47,8 @@ h6, // Paragraphs p { - line-height: 1.2 * @line-height; - margin: 0 0 @unit-4; + line-height: 1.2 * $line-height; + margin: 0 0 $unit-4; } // Semantic text elements @@ -59,26 +59,26 @@ u { } abbr[title] { - border-bottom: @border-width dotted; + border-bottom: $border-width dotted; cursor: help; text-decoration: none; } kbd { - .label-base(); - .label-variant(@light-color, @dark-color); + @include label-base(); + @include label-variant($light-color, $dark-color); } mark { - .label-base(); - .label-variant(@body-font-color, @highlight-color); + @include label-base(); + @include label-variant($body-font-color, $highlight-color); } // Blockquote blockquote { - border-left: @border-width-lg solid @border-color; + border-left: $border-width-lg solid $border-color; margin-left: 0; - padding: @unit-2 @unit-4; + padding: $unit-2 $unit-4; p:last-child { margin-bottom: 0; @@ -88,16 +88,16 @@ blockquote { // Lists ul, ol { - margin: @unit-4 0 @unit-4 @unit-4; + margin: $unit-4 0 $unit-4 $unit-4; padding: 0; ul, ol { - margin: @unit-4 0 @unit-4 @unit-4; + margin: $unit-4 0 $unit-4 $unit-4; } li { - margin-top: @unit-2; + margin-top: $unit-2; } } @@ -122,6 +122,6 @@ dl { font-weight: bold; } dd { - margin: @unit-2 0 @unit-4 0; + margin: $unit-2 0 $unit-4 0; } } diff --git a/src/_utilities.scss b/src/_utilities.scss new file mode 100644 index 0000000..1d9b32f --- /dev/null +++ b/src/_utilities.scss @@ -0,0 +1,7 @@ +@import 'utilities/colors'; +@import 'utilities/display'; +@import 'utilities/divider'; +@import 'utilities/loading'; +@import 'utilities/position'; +@import 'utilities/shapes'; +@import 'utilities/text';
\ No newline at end of file diff --git a/src/_variables.scss b/src/_variables.scss new file mode 100644 index 0000000..b4349e4 --- /dev/null +++ b/src/_variables.scss @@ -0,0 +1,103 @@ +// Core variables +// Colors +// Core colors +$primary-color: #5764c6; +$primary-color-dark: darken($primary-color, 3%); +$primary-color-light: lighten($primary-color, 3%); +$secondary-color: lighten($primary-color, 40%); +$secondary-color-dark: darken($secondary-color, 3%); +$secondary-color-light: lighten($secondary-color, 3%); + +$link-color: $primary-color; +$link-color-dark: darken($link-color, 5%); + +// Gray colors +$dark-color: #454d5d; +$light-color: #fff; +$gray-color: lighten($dark-color, 40%); +$gray-color-dark: darken($gray-color, 20%); +$gray-color-light: lighten($gray-color, 20%); + +$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; + +// Control colors +$success-color: #32b643; +$warning-color: #ffb700; +$error-color: #e85600; + +// Other colors +$code-color: #e06870; +$highlight-color: #ffe9b3; +$body-bg: $bg-color-light; +$body-font-color: lighten($dark-color, 5%); + +// 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; +$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; +$fallback-font-family: "Helvetica Neue", sans-serif; +$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-o: .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; + +// Font sizes +$html-font-size: 20px; +$html-line-height: 1.428571429; +$font-size: .7rem; +$font-size-sm: .6rem; +$font-size-lg: .8rem; +$line-height: 1rem; + +// Sizes +$layout-spacing: $unit-2; +$layout-spacing-sm: $unit-1; +$layout-spacing-lg: $unit-4; +$border-radius: $unit-h; +$border-width: $unit-o; +$border-width-lg: $unit-h; +$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; + +// Responsive breakpoints +$size-xs: 480px; +$size-sm: 600px; +$size-md: 840px; +$size-lg: 960px; +$size-xl: 1280px; +$size-2x: 1440px; + +// Z-index +$zindex-0: 1; +$zindex-1: 100; +$zindex-2: 200; +$zindex-3: 300; +$zindex-4: 400;
\ No newline at end of file diff --git a/src/cards.less b/src/cards.less deleted file mode 100644 index dadfa8b..0000000 --- a/src/cards.less +++ /dev/null @@ -1,39 +0,0 @@ -// Cards -.card { - background: @bg-color-light; - border: @border-width solid @border-color; - border-radius: @border-radius; - display: flex; - flex-direction: column; - - .card-header, - .card-body, - .card-footer { - padding: @layout-spacing-lg; - padding-bottom: 0; - - &:last-child { - padding-bottom: @layout-spacing-lg; - } - } - - .card-image { - padding-top: @layout-spacing-lg; - - &:first-child { - padding-top: 0; - - img { - border-top-left-radius: @border-radius; - border-top-right-radius: @border-radius; - } - } - - &:last-child { - img { - border-bottom-left-radius: @border-radius; - border-bottom-right-radius: @border-radius; - } - } - } -}
\ No newline at end of file diff --git a/src/chips.less b/src/chips.less deleted file mode 100644 index 60ab726..0000000 --- a/src/chips.less +++ /dev/null @@ -1,24 +0,0 @@ -// Chips -.chip { - align-items: center; - background: @bg-color-dark; - border-radius: 5rem; - color: @gray-color-dark; - display: inline-flex; - height: @unit-6; - margin: @unit-h; - max-width: 100%; - padding: @unit-h @unit-2 + @unit-h; - text-decoration: none; - vertical-align: middle; - - &.active { - background: @primary-color; - color: @light-color; - } - - .avatar { - margin-left: -(@unit-2 + @unit-h); - margin-right: @unit-1; - } -} diff --git a/src/codes.less b/src/codes.less deleted file mode 100644 index e982e2b..0000000 --- a/src/codes.less +++ /dev/null @@ -1,32 +0,0 @@ -// Codes -code { - font-size: .65rem; - .label-base(); - .label-variant(@code-color, lighten(@code-color, 33%)); -} - -.code { - border-radius: @border-radius; - color: @body-font-color; - line-height: @line-height; - position: relative; - - &::before { - content: attr(data-lang); - color: @gray-color; - font-size: @font-size-sm; - position: absolute; - right: @layout-spacing; - top: @unit-h; - } - - code { - background: @bg-color; - color: inherit; - display: block; - line-height: inherit; - overflow-x: auto; - padding: 1rem; - width: 100%; - } -} diff --git a/src/empty.less b/src/empty.less deleted file mode 100644 index b6cb1ae..0000000 --- a/src/empty.less +++ /dev/null @@ -1,21 +0,0 @@ -// Empty states (or Blank slates) -.empty { - background: @bg-color; - border-radius: @border-radius; - color: @gray-color-dark; - text-align: center; - padding: 4 * @layout-spacing; - - .empty-icon { - margin-bottom: @layout-spacing-lg; - } - - .empty-title, - .empty-subtitle { - margin: @layout-spacing auto; - } - - .empty-action { - margin-top: @layout-spacing-lg; - } -} diff --git a/src/labels.less b/src/labels.less deleted file mode 100644 index efeb89d..0000000 --- a/src/labels.less +++ /dev/null @@ -1,33 +0,0 @@ -// Labels -.label { - display: inline-block; - .label-base(); - .label-variant(lighten(@body-font-color, 5%), @bg-color); - line-height: 1; - - &.label-rounded { - border-radius: 5rem; - padding-left: .4rem; - padding-right: .4rem; - } - - &.label-primary { - .label-variant(@light-color, @primary-color); - } - - &.label-secondary { - .label-variant(@primary-color, @secondary-color); - } - - &.label-success { - .label-variant(@light-color, @success-color); - } - - &.label-warning { - .label-variant(@light-color, @warning-color); - } - - &.label-error { - .label-variant(@light-color, @error-color); - } -} diff --git a/src/menus.less b/src/menus.less deleted file mode 100644 index 109dc92..0000000 --- a/src/menus.less +++ /dev/null @@ -1,56 +0,0 @@ -// Menus -.menu { - background: @bg-color-light; - border-radius: @border-radius; - list-style: none; - margin: 0; - min-width: @control-min-width; - 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 @unit-2; - text-decoration: none; - user-select: none; - - & > a { - border-radius: @border-radius; - color: inherit; - display: block; - 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; - color: @primary-color; - } - } - - & + .menu-item { - margin-top: @unit-1; - } - } - - .menu-badge { - float: right; - padding: @unit-1 0; - - .btn { - margin-top: -@unit-h; - } - } -} diff --git a/src/mixins.less b/src/mixins.less deleted file mode 100644 index 8cbb3f5..0000000 --- a/src/mixins.less +++ /dev/null @@ -1,175 +0,0 @@ -// Mixins -// Avatar mixin -.avatar-base(@size: @unit-8) { - font-size: @size / 2; - height: @size; - width: @size; -} - -// Background color utility mixin -.bg-color-variant(@color: @primary-color) { - background: @color; -} - -// Button variant mixin -.button-variant(@color: @primary-color) { - background: @color; - border-color: darken(@color, 3%); - color: @light-color; - &:focus { - .control-shadow(@color); - } - &:focus, - &:hover { - background: darken(@color, 2%); - border-color: darken(@color, 5%); - color: @light-color; - } - &:active, - &.active { - background: darken(@color, 7%); - border-color: darken(@color, 10%); - color: @light-color; - } - &.loading { - &::after { - border-bottom-color: @light-color; - border-left-color: @light-color; - } - } -} - -.button-outline-variant(@color: @primary-color) { - background: @light-color; - border-color: @color; - color: @color; - &:focus { - .control-shadow(@color); - } - &:focus, - &:hover { - background: lighten(@color, 50%); - border-color: darken(@color, 2%); - color: @color; - } - &:active, - &.active { - background: @color; - border-color: darken(@color, 5%); - color: @light-color; - } - &.loading { - &::after { - border-bottom-color: @color; - border-left-color: @color; - } - } -} - -// Clearfix mixin -.clearfix() { - &::after { - clear: both; - content: ""; - display: table; - } -} - -// Component focus shadow -.control-shadow(@color: @primary-color) { - box-shadow: 0 0 0 .1rem fade(@color, 20%); -} - -// Component transition -.control-transition() { - transition: all .2s ease; -} - -// Label base style -.label-base() { - border-radius: @border-radius; - line-height: 1; - padding: .15rem .2rem; -} - -.label-variant(@color: @light-color, @bg-color: @primary-color) { - background: @bg-color; - color: @color; -} - -// Margin utility mixin -.margin-variant(@id: 1, @size: 1) { - .m-@{id} { - margin: @size; - } - .mb-@{id} { - margin-bottom: @size; - } - .ml-@{id} { - margin-left: @size; - } - .mr-@{id} { - margin-right: @size; - } - .mt-@{id} { - margin-top: @size; - } - .mx-@{id} { - margin-left: @size; - margin-right: @size; - } - .my-@{id} { - margin-bottom: @size; - margin-top: @size; - } -} - -// Padding utility mixin -.padding-variant(@id: 1, @size: 1) { - .p-@{id} { - padding: @size; - } - .pb-@{id} { - padding-bottom: @size; - } - .pl-@{id} { - padding-left: @size; - } - .pr-@{id} { - padding-right: @size; - } - .pt-@{id} { - padding-top: @size; - } - .px-@{id} { - padding-left: @size; - padding-right: @size; - } - .py-@{id} { - padding-bottom: @size; - padding-top: @size; - } -} - -// Shadow mixin -.shadow-variant(@offset) { - box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%); -} - -// Text color utility mixin -.text-color-variant(@color: @primary-color) { - color: @color; - - a& { - &:focus, - &:hover { - color: darken(@color, 5%); - } - } -} - -// Toast variant mixin -.toast-variant(@color: @dark-color) { - background: fade(@color, 90%); - border-color: @color; -}
\ No newline at end of file diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss new file mode 100644 index 0000000..db7c312 --- /dev/null +++ b/src/spectre-exp.scss @@ -0,0 +1,16 @@ +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */ + +// Core variables and mixins +@import "variables"; +@import "mixins"; + +// Experimentals +@import 'calendars'; +@import 'carousels'; +@import 'comparison-sliders'; +@import 'filters'; +@import 'meters'; +@import 'parallax'; +@import 'progress'; +@import 'sliders'; +@import 'timelines'; diff --git a/src/spectre-icons.scss b/src/spectre-icons.scss new file mode 100644 index 0000000..1fdbeeb --- /dev/null +++ b/src/spectre-icons.scss @@ -0,0 +1,8 @@ +/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */ + +// Core variables and mixins +@import "variables"; +@import "mixins"; + +// Icons +@import 'icons'; diff --git a/src/spectre.scss b/src/spectre.scss new file mode 100644 index 0000000..6d33550 --- /dev/null +++ b/src/spectre.scss @@ -0,0 +1,50 @@ +/*! Spectre.css | MIT License | github.com/picturepan2/spectre */ + +// Core variables and mixins +@import "variables"; +@import "mixins"; + +// Reset and dependencies +@import "normalize"; +@import "base"; + +// Core classes +@import "typography"; +@import "asian"; +@import "tables"; +@import "buttons"; +@import "forms"; +@import "labels"; +@import "codes"; +@import "media"; + +// Layout +@import "layout"; +@import "navbar"; + +// Components +@import "accordions"; +@import "autocomplete"; +@import "avatars"; +@import "badges"; +@import "breadcrumbs"; +@import "bars"; +@import "cards"; +@import "chips"; +@import "dropdowns"; +@import "empty"; +@import "menus"; +@import "modals"; +@import "navs"; +@import "pagination"; +@import "panels"; +@import "popovers"; +@import "steps"; +@import "tabs"; +@import "tiles"; +@import "toasts"; +@import "tooltips"; + +// Utility classes +@import "animations"; +@import "utilities"; diff --git a/src/toasts.less b/src/toasts.less deleted file mode 100644 index 0bc61d6..0000000 --- a/src/toasts.less +++ /dev/null @@ -1,41 +0,0 @@ -// Toasts -.toast { - border: @border-width solid @dark-color; - border-radius: @border-radius; - color: @light-color; - display: block; - padding: @layout-spacing; - .toast-variant(@dark-color); - width: 100%; - - &.toast-primary { - .toast-variant(@primary-color); - } - - &.toast-success { - .toast-variant(@success-color); - } - - &.toast-warning { - .toast-variant(@warning-color); - } - - &.toast-error { - .toast-variant(@error-color); - } - - a { - color: @light-color; - text-decoration: underline; - &:focus, - &:hover, - &:active, - &.active { - opacity: .75; - } - } - - .btn-clear { - margin: 2px -2px 2px 4px; - } -} diff --git a/src/utilities.less b/src/utilities.less deleted file mode 100644 index 676beb0..0000000 --- a/src/utilities.less +++ /dev/null @@ -1,7 +0,0 @@ -@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.scss b/src/utilities/_colors.scss new file mode 100644 index 0000000..767c353 --- /dev/null +++ b/src/utilities/_colors.scss @@ -0,0 +1,29 @@ +// Text colors +@include text-color-variant(".text-primary", $primary-color); + +@include text-color-variant(".text-secondary", $secondary-color-dark); + +@include text-color-variant(".text-gray", $gray-color); + +@include text-color-variant(".text-light", $light-color); + +@include text-color-variant(".text-success", $success-color); + +@include text-color-variant(".text-warning", $warning-color); + +@include text-color-variant(".text-error", $error-color); + +// Background colors +@include bg-color-variant(".bg-primary", $primary-color); + +@include bg-color-variant(".bg-secondary", $secondary-color); + +@include bg-color-variant(".bg-dark", $dark-color); + +@include bg-color-variant(".bg-gray", $bg-color); + +@include bg-color-variant(".bg-success", $success-color); + +@include bg-color-variant(".bg-warning", $warning-color); + +@include bg-color-variant(".bg-error", $error-color);
\ No newline at end of file diff --git a/src/utilities/display.less b/src/utilities/_display.scss index 26e611e..550124d 100644 --- a/src/utilities/display.less +++ b/src/utilities/_display.scss @@ -15,7 +15,7 @@ display: inline-flex; } .d-none, -.hide { +.d-hide { display: none !important; } .d-visible { @@ -42,6 +42,6 @@ position: absolute; width: 1px; } -.hand { +.c-hand { cursor: pointer; } diff --git a/src/utilities/divider.less b/src/utilities/_divider.scss index a5cb45b..5d0feb2 100644 --- a/src/utilities/divider.less +++ b/src/utilities/_divider.scss @@ -5,44 +5,44 @@ position: relative; &[data-content]::after { - background: @bg-color-light; - color: @gray-color; + 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); + 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; + border-top: $border-width solid $border-color; + height: $border-width; + margin: $unit-2 0; &[data-content] { - margin: @unit-4 0; + margin: $unit-4 0; } } .divider-vert { display: block; - padding: @unit-4; + padding: $unit-4; &::before { - border-left: @border-width solid @border-color; - bottom: @unit-2; + border-left: $border-width solid $border-color; + bottom: $unit-2; content: ""; display: block; left: 50%; position: absolute; - top: @unit-2; + top: $unit-2; transform: translateX(-50%); } &[data-content]::after { left: 50%; - padding: @unit-1 0; + padding: $unit-1 0; position: absolute; top: 50%; transform: translate(-50%, -50%); diff --git a/src/utilities/loading.less b/src/utilities/_loading.scss index 767ec9e..c0cdb1e 100644 --- a/src/utilities/loading.less +++ b/src/utilities/_loading.scss @@ -1,34 +1,34 @@ // Loading .loading { color: transparent !important; - min-height: @unit-4; + min-height: $unit-4; pointer-events: none; position: relative; &::after { animation: loading 500ms infinite linear; - border: @border-width-lg solid @primary-color; + border: $border-width-lg solid $primary-color; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; - height: @unit-4; + height: $unit-4; left: 50%; - margin-left: -@unit-2; - margin-top: -@unit-2; + margin-left: -$unit-2; + margin-top: -$unit-2; position: absolute; top: 50%; - width: @unit-4; - z-index: @zindex-0; + width: $unit-4; + z-index: $zindex-0; } &.loading-lg { - min-height: @unit-10; + min-height: $unit-10; &::after { - height: @unit-8; - width: @unit-8; - margin-left: -@unit-4; - margin-top: -@unit-4; + 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.scss index 235d6a6..548368f 100644 --- a/src/utilities/position.less +++ b/src/utilities/_position.scss @@ -1,6 +1,6 @@ // Position .clearfix { - .clearfix(); + @include clearfix(); } .float-left { float: left !important; @@ -26,10 +26,10 @@ } // Spacing -.margin-variant(0, 0); -.margin-variant(1, @unit-1); -.margin-variant(2, @unit-2); +@include margin-variant(0, 0); +@include margin-variant(1, $unit-1); +@include margin-variant(2, $unit-2); -.padding-variant(0, 0); -.padding-variant(1, @unit-1); -.padding-variant(2, @unit-2);
\ No newline at end of file +@include padding-variant(0, 0); +@include padding-variant(1, $unit-1); +@include padding-variant(2, $unit-2);
\ No newline at end of file diff --git a/src/utilities/shapes.less b/src/utilities/_shapes.scss index e9f63bc..ab6585b 100644 --- a/src/utilities/shapes.less +++ b/src/utilities/_shapes.scss @@ -1,6 +1,6 @@ // Shapes .rounded { - border-radius: @border-radius; + border-radius: $border-radius; } .circle { border-radius: 50%; diff --git a/src/utilities/text.less b/src/utilities/_text.scss index f571613..a1e0980 100644 --- a/src/utilities/text.less +++ b/src/utilities/_text.scss @@ -36,9 +36,7 @@ } .text-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + @include text-ellipsis(); } .text-clip { overflow: hidden; diff --git a/src/utilities/colors.less b/src/utilities/colors.less deleted file mode 100644 index 9571241..0000000 --- a/src/utilities/colors.less +++ /dev/null @@ -1,45 +0,0 @@ -// 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(@success-color); -} -.text-warning { - .text-color-variant(@warning-color); -} -.text-error { - .text-color-variant(@error-color); -} - -// 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(@success-color); -} -.bg-warning { - .bg-color-variant(@warning-color); -} -.bg-error { - .bg-color-variant(@error-color); -} diff --git a/src/variables.less b/src/variables.less deleted file mode 100644 index d146459..0000000 --- a/src/variables.less +++ /dev/null @@ -1,104 +0,0 @@ -// Core variables - -// Global -@html-font-size: 20px; -@html-line-height: 1.428571429; -@body-bg: @bg-color-light; -@body-font-color: lighten(@dark-color, 5%); -@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; -@mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; -@fallback-font-family: "Helvetica Neue", sans-serif; -@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-o: .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-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-o; -@border-width-lg: @unit-h; - -// Colors -// Core colors -@primary-color: #5764c6; -@primary-color-dark: darken(@primary-color, 3%); -@primary-color-light: lighten(@primary-color, 3%); -@secondary-color: lighten(@primary-color, 40%); -@secondary-color-dark: darken(@secondary-color, 3%); -@secondary-color-light: lighten(@secondary-color, 3%); - -@link-color: @primary-color; -@link-color-dark: darken(@link-color, 5%); - -// Gray colors -@dark-color: #454d5d; -@light-color: #fff; -@gray-color: lighten(@dark-color, 40%); -@gray-color-dark: darken(@gray-color, 20%); -@gray-color-light: lighten(@gray-color, 20%); - -@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; - -// Control colors -@success-color: #32b643; -@warning-color: #ffb700; -@error-color: #e85600; - -// Other colors -@code-color: #e06870; -@highlight-color: #ffe9b3; - -// Responsive breakpoints -@size-xs: 480px; -@size-sm: 600px; -@size-md: 840px; -@size-lg: 960px; -@size-xl: 1280px; -@size-2x: 1440px; - -// Z-index -@zindex-0: 1; -@zindex-1: 100; -@zindex-2: 200; -@zindex-3: 300; -@zindex-4: 400; |