From e78b3c34348f26d40a813612c5a3786f1c56607a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 29 Aug 2017 18:07:53 +0800 Subject: Initial SASS build --- src/_accordions.scss | 34 +++ src/_animations.scss | 20 ++ src/_asian.scss | 33 +++ src/_autocomplete.scss | 41 +++ src/_avatars.scss | 77 +++++ src/_badges.scss | 70 +++++ src/_bars.scss | 71 +++++ src/_base.scss | 40 +++ src/_breadcrumbs.scss | 29 ++ src/_buttons.scss | 182 ++++++++++++ src/_calendars.scss | 205 ++++++++++++++ src/_cards.scss | 39 +++ src/_carousels.scss | 124 ++++++++ src/_chips.scss | 24 ++ src/_codes.scss | 32 +++ src/_comparison-sliders.scss | 114 ++++++++ src/_dropdowns.scss | 36 +++ src/_empty.scss | 21 ++ src/_filters.scss | 29 ++ src/_forms.scss | 514 +++++++++++++++++++++++++++++++++ src/_icons.scss | 656 +++++++++++++++++++++++++++++++++++++++++++ src/_labels.scss | 33 +++ src/_layout.scss | 424 ++++++++++++++++++++++++++++ src/_media.scss | 70 +++++ src/_menus.scss | 56 ++++ src/_meters.scss | 57 ++++ src/_mixins.scss | 186 ++++++++++++ src/_modals.scss | 73 +++++ src/_navbar.scss | 29 ++ src/_navs.scss | 34 +++ src/_normalize.scss | 437 ++++++++++++++++++++++++++++ src/_pagination.scss | 61 ++++ src/_panels.scss | 23 ++ src/_parallax.scss | 129 +++++++++ src/_popovers.scss | 70 +++++ src/_progress.scss | 45 +++ src/_sliders.scss | 93 ++++++ src/_steps.scss | 70 +++++ src/_tables.scss | 45 +++ src/_tabs.scss | 62 ++++ src/_tiles.scss | 38 +++ src/_timelines.scss | 55 ++++ src/_toasts.scss | 41 +++ src/_tooltips.scss | 77 +++++ src/_typography.scss | 127 +++++++++ src/_utilities.scss | 7 + src/_variables.scss | 103 +++++++ src/accordions.less | 34 --- src/animations.less | 20 -- src/asian.less | 33 --- src/autocomplete.less | 41 --- src/avatars.less | 77 ----- src/badges.less | 70 ----- src/bars.less | 71 ----- src/base.less | 40 --- src/breadcrumbs.less | 29 -- src/buttons.less | 182 ------------ src/calendars.less | 206 -------------- src/cards.less | 39 --- src/carousels.less | 124 -------- src/chips.less | 24 -- src/codes.less | 32 --- src/comparison-sliders.less | 114 -------- src/dropdowns.less | 36 --- src/empty.less | 21 -- src/filters.less | 29 -- src/forms.less | 514 --------------------------------- src/icons.less | 656 ------------------------------------------- src/labels.less | 33 --- src/layout.less | 422 ---------------------------- src/media.less | 70 ----- src/menus.less | 56 ---- src/meters.less | 57 ---- src/mixins.less | 175 ------------ src/modals.less | 73 ----- src/navbar.less | 29 -- src/navs.less | 34 --- src/normalize.less | 437 ---------------------------- src/pagination.less | 61 ---- src/panels.less | 23 -- src/parallax.less | 129 --------- src/popovers.less | 70 ----- src/progress.less | 45 --- src/sliders.less | 93 ------ src/spectre-exp.scss | 16 ++ src/spectre-icons.scss | 8 + src/spectre.scss | 50 ++++ src/steps.less | 70 ----- src/tables.less | 45 --- src/tabs.less | 62 ---- src/tiles.less | 38 --- src/timelines.less | 55 ---- src/toasts.less | 41 --- src/tooltips.less | 77 ----- src/typography.less | 127 --------- src/utilities.less | 7 - src/utilities/_colors.scss | 29 ++ src/utilities/_display.scss | 47 ++++ src/utilities/_divider.scss | 50 ++++ src/utilities/_loading.scss | 34 +++ src/utilities/_position.scss | 35 +++ src/utilities/_shapes.scss | 7 + src/utilities/_text.scss | 50 ++++ src/utilities/colors.less | 45 --- src/utilities/display.less | 47 ---- src/utilities/divider.less | 50 ---- src/utilities/loading.less | 34 --- src/utilities/position.less | 35 --- src/utilities/shapes.less | 7 - src/utilities/text.less | 52 ---- src/variables.less | 104 ------- 111 files changed, 5162 insertions(+), 5095 deletions(-) create mode 100644 src/_accordions.scss create mode 100644 src/_animations.scss create mode 100644 src/_asian.scss create mode 100644 src/_autocomplete.scss create mode 100644 src/_avatars.scss create mode 100644 src/_badges.scss create mode 100644 src/_bars.scss create mode 100644 src/_base.scss create mode 100644 src/_breadcrumbs.scss create mode 100644 src/_buttons.scss create mode 100644 src/_calendars.scss create mode 100644 src/_cards.scss create mode 100644 src/_carousels.scss create mode 100644 src/_chips.scss create mode 100644 src/_codes.scss create mode 100644 src/_comparison-sliders.scss create mode 100644 src/_dropdowns.scss create mode 100644 src/_empty.scss create mode 100644 src/_filters.scss create mode 100644 src/_forms.scss create mode 100644 src/_icons.scss create mode 100644 src/_labels.scss create mode 100644 src/_layout.scss create mode 100644 src/_media.scss create mode 100644 src/_menus.scss create mode 100644 src/_meters.scss create mode 100644 src/_mixins.scss create mode 100644 src/_modals.scss create mode 100755 src/_navbar.scss create mode 100644 src/_navs.scss create mode 100644 src/_normalize.scss create mode 100644 src/_pagination.scss create mode 100644 src/_panels.scss create mode 100644 src/_parallax.scss create mode 100644 src/_popovers.scss create mode 100644 src/_progress.scss create mode 100644 src/_sliders.scss create mode 100644 src/_steps.scss create mode 100644 src/_tables.scss create mode 100644 src/_tabs.scss create mode 100644 src/_tiles.scss create mode 100644 src/_timelines.scss create mode 100644 src/_toasts.scss create mode 100644 src/_tooltips.scss create mode 100644 src/_typography.scss create mode 100644 src/_utilities.scss create mode 100644 src/_variables.scss delete mode 100644 src/accordions.less delete mode 100644 src/animations.less delete mode 100644 src/asian.less delete mode 100644 src/autocomplete.less delete mode 100644 src/avatars.less delete mode 100644 src/badges.less delete mode 100644 src/bars.less delete mode 100644 src/base.less delete mode 100644 src/breadcrumbs.less delete mode 100644 src/buttons.less delete mode 100644 src/calendars.less delete mode 100644 src/cards.less delete mode 100644 src/carousels.less delete mode 100644 src/chips.less delete mode 100644 src/codes.less delete mode 100644 src/comparison-sliders.less delete mode 100644 src/dropdowns.less delete mode 100644 src/empty.less delete mode 100644 src/filters.less delete mode 100644 src/forms.less delete mode 100644 src/icons.less delete mode 100644 src/labels.less delete mode 100644 src/layout.less delete mode 100644 src/media.less delete mode 100644 src/menus.less delete mode 100644 src/meters.less delete mode 100644 src/mixins.less delete mode 100644 src/modals.less delete mode 100755 src/navbar.less delete mode 100644 src/navs.less delete mode 100644 src/normalize.less delete mode 100644 src/pagination.less delete mode 100644 src/panels.less delete mode 100644 src/parallax.less delete mode 100644 src/popovers.less delete mode 100644 src/progress.less delete mode 100644 src/sliders.less create mode 100644 src/spectre-exp.scss create mode 100644 src/spectre-icons.scss create mode 100644 src/spectre.scss delete mode 100644 src/steps.less delete mode 100644 src/tables.less delete mode 100644 src/tabs.less delete mode 100644 src/tiles.less delete mode 100644 src/timelines.less delete mode 100644 src/toasts.less delete mode 100644 src/tooltips.less delete mode 100644 src/typography.less delete mode 100644 src/utilities.less create mode 100644 src/utilities/_colors.scss create mode 100644 src/utilities/_display.scss create mode 100644 src/utilities/_divider.scss create mode 100644 src/utilities/_loading.scss create mode 100644 src/utilities/_position.scss create mode 100644 src/utilities/_shapes.scss create mode 100644 src/utilities/_text.scss delete mode 100644 src/utilities/colors.less delete mode 100644 src/utilities/display.less delete mode 100644 src/utilities/divider.less delete mode 100644 src/utilities/loading.less delete mode 100644 src/utilities/position.less delete mode 100644 src/utilities/shapes.less delete mode 100644 src/utilities/text.less delete mode 100644 src/variables.less (limited to 'src') diff --git a/src/_accordions.scss b/src/_accordions.scss new file mode 100644 index 0000000..e2022c6 --- /dev/null +++ b/src/_accordions.scss @@ -0,0 +1,34 @@ +// Accordions +.accordion { + .accordion-item { + input { + &:checked { + & ~ .accordion-header { + .icon { + transform: rotate(90deg); + + } + } + & ~ .accordion-body { + max-height: 1000px; + } + } + } + + .accordion-header { + display: block; + padding: $unit-1 $unit-2; + + .icon { + transition: all .2s ease; + } + } + + .accordion-body { + margin-bottom: $layout-spacing; + max-height: 0; + overflow: hidden; + transition: max-height .2s ease; + } + } +} diff --git a/src/_animations.scss b/src/_animations.scss new file mode 100644 index 0000000..e7fde1a --- /dev/null +++ b/src/_animations.scss @@ -0,0 +1,20 @@ +// Animations +@keyframes loading { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes slide-down { + 0% { + opacity: 0; + transform: translateY(-$unit-8); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} diff --git a/src/_asian.scss b/src/_asian.scss new file mode 100644 index 0000000..5f7533e --- /dev/null +++ b/src/_asian.scss @@ -0,0 +1,33 @@ +// Optimized for East Asian CJK +:lang(zh) { + font-family: $cjk-zh-font-family; +} + +:lang(ja) { + font-family: $cjk-jp-font-family; +} + +:lang(ko) { + font-family: $cjk-ko-font-family; +} + +:lang(zh), +:lang(ja), +.cjk { + ins, + u { + border-bottom: $border-width solid; + text-decoration: none; + } + + del + del, + del + s, + ins + ins, + ins + u, + s + del, + s + s, + u + ins, + u + u { + margin-left: .125em; + } +} diff --git a/src/_autocomplete.scss b/src/_autocomplete.scss new file mode 100644 index 0000000..24c3e45 --- /dev/null +++ b/src/_autocomplete.scss @@ -0,0 +1,41 @@ +// Autocomplete +.form-autocomplete { + position: relative; + + .form-autocomplete-input { + align-content: flex-start; + display: flex; + flex-wrap: wrap; + height: auto; + min-height: $unit-8; + padding: $unit-h; + + &.is-focused { + border-color: $primary-color; + @include control-shadow(); + } + + .form-input { + border-color: transparent; + box-shadow: none; + display: inline-block; + flex: 1 0 auto; + height: $unit-6; + line-height: $unit-4; + margin: $unit-h; + width: auto; + } + } + + mark { + font-size: 1; + padding: .1em 0; + } + + .menu { + left: 0; + position: absolute; + top: 100%; + width: 100%; + } +} diff --git a/src/_avatars.scss b/src/_avatars.scss new file mode 100644 index 0000000..53bda1d --- /dev/null +++ b/src/_avatars.scss @@ -0,0 +1,77 @@ +// Avatars +.avatar { + @include avatar-base(); + background: $primary-color; + border-radius: 50%; + color: rgba($light-color, .85); + display: inline-block; + font-weight: 300; + line-height: 1; + margin: 0; + position: relative; + vertical-align: middle; + + &.avatar-xs { + @include avatar-base($unit-4); + } + &.avatar-sm { + @include avatar-base($unit-6); + } + &.avatar-lg { + @include avatar-base($unit-12); + } + &.avatar-xl { + @include avatar-base($unit-16); + } + + img { + border-radius: 50%; + height: 100%; + position: relative; + width: 100%; + z-index: $zindex-0; + } + + .avatar-icon, + .avatar-presence { + background: $bg-color-light; + bottom: 14.64%; + height: 50%; + padding: $border-width-lg; + position: absolute; + right: 14.64%; + transform: translate(50%, 50%); + width: 50%; + z-index: $zindex-0 + 1; + } + + .avatar-presence { + background: $gray-color; + box-shadow: 0 0 0 $border-width-lg $light-color; + border-radius: 50%; + height: .5em; + width: .5em; + + &.online { + background: $success-color; + } + + &.busy { + background: $error-color; + } + + &.away { + background: $warning-color; + } + } + + &[data-initial]::before { + color: currentColor; + content: attr(data-initial); + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + z-index: $zindex-0; + } +} diff --git a/src/_badges.scss b/src/_badges.scss new file mode 100644 index 0000000..9f1d734 --- /dev/null +++ b/src/_badges.scss @@ -0,0 +1,70 @@ +// Badges +.badge { + position: relative; + white-space: nowrap; + + &[data-badge], + &:not([data-badge]) { + &::after { + background: $primary-color; + background-clip: padding-box; + border-radius: .5rem; + box-shadow: 0 0 0 .1rem $bg-color-light; + color: $light-color; + content: attr(data-badge); + display: inline-block; + transform: translate(-.1rem, -.5rem); + } + } + &[data-badge] { + &::after { + font-size: $font-size-sm; + height: 18px; + line-height: 1; + min-width: 18px; + padding: 3px 5px; + text-align: center; + white-space: nowrap; + } + } + &:not([data-badge]), + &[data-badge=''] { + &::after { + height: 6px; + min-width: 6px; + padding: 0; + width: 6px; + } + } + + // Badges for Buttons + &.btn { + &::after { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + } + } + + // Badges for Avatars + &.avatar { + &::after { + position: absolute; + top: 14.64%; + right: 14.64%; + transform: translate(50%, -50%); + z-index: $zindex-1; + } + } + + &.avatar-xs { + &::after { + content: ""; + height: $unit-2; + min-width: $unit-2; + padding: 0; + width: $unit-2; + } + } +} diff --git a/src/_bars.scss b/src/_bars.scss new file mode 100644 index 0000000..47e21c9 --- /dev/null +++ b/src/_bars.scss @@ -0,0 +1,71 @@ +// Bars +.bar { + background: $bg-color-dark; + border-radius: $border-radius; + display: flex; + flex-wrap: nowrap; + height: $unit-4; + width: 100%; + + &.bar-sm { + height: $unit-1; + } + + // TODO: attr() support + .bar-item { + background: $primary-color; + color: $light-color; + display: block; + font-size: $font-size-sm; + flex-shrink: 0; + 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; + } + &:last-child { + border-bottom-right-radius: $border-radius; + border-top-right-radius: $border-radius; + flex-shrink: 1; + } + } +} + +// Slider bar +.bar-slider { + height: $border-width-lg; + margin: $layout-spacing 0; + position: relative; + + .bar-item { + left: 0; + padding: 0; + position: absolute; + &:not(:last-child):first-child { + background: $bg-color-dark; + z-index: $zindex-0; + } + } + + .bar-slider-btn { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + padding: 0; + position: absolute; + right: 0; + top: 50%; + transform: translate(50%, -50%); + width: $unit-3; + + &:active { + box-shadow: 0 0 0 .1rem $primary-color; + } + } +} diff --git a/src/_base.scss b/src/_base.scss new file mode 100644 index 0000000..5f5a8d0 --- /dev/null +++ b/src/_base.scss @@ -0,0 +1,40 @@ +// Base +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; + 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; + overflow-x: hidden; + text-rendering: optimizeLegibility; +} + +a { + color: $link-color; + outline: none; + text-decoration: none; + + &:focus { + @include control-shadow(); + } + + &:focus, + &:hover, + &:active, + &.active { + color: $link-color-dark; + text-decoration: underline; + } +} diff --git a/src/_breadcrumbs.scss b/src/_breadcrumbs.scss new file mode 100644 index 0000000..876eae8 --- /dev/null +++ b/src/_breadcrumbs.scss @@ -0,0 +1,29 @@ +// Breadcrumbs +.breadcrumb { + list-style: none; + margin: $unit-1 0; + padding: $unit-1 0; + + .breadcrumb-item { + color: $gray-color-dark; + display: inline-block; + margin: 0; + padding: $unit-1 0; + + &:not(:last-child) { + margin-right: $unit-1; + + a { + color: $gray-color-dark; + } + } + + &:not(:first-child) { + &::before { + color: $gray-color-light; + content: "/"; + padding-right: $unit-1; + } + } + } +} diff --git a/src/_buttons.scss b/src/_buttons.scss new file mode 100644 index 0000000..a8232f5 --- /dev/null +++ b/src/_buttons.scss @@ -0,0 +1,182 @@ +// Buttons +.btn { + appearance: none; + 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; + outline: none; + padding: $control-padding-v $control-padding-h; + text-align: center; + text-decoration: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + &:focus { + @include control-shadow(); + } + &:focus, + &:hover { + 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; + text-decoration: none; + &.loading { + &::after { + border-bottom-color: $light-color; + border-left-color: $light-color; + } + } + } + &[disabled], + &:disabled, + &.disabled { + cursor: default; + opacity: .5; + pointer-events: none; + } + + // Button Primary + &.btn-primary { + 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; + } + &:active, + &.active { + 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; + } + } + } + + // Button Link + &.btn-link { + background: transparent; + border-color: transparent; + color: $link-color; + &:focus, + &:hover, + &:active, + &.active { + 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; + } + + &.btn-lg { + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-v-lg $control-padding-h * 1.5; + } + + // Button Block + &.btn-block { + display: block; + width: 100%; + } + + // Button Action + &.btn-action { + width: $control-size; + padding-left: 0; + padding-right: 0; + + &.btn-sm { + width: $control-size-sm; + } + + &.btn-lg { + width: $control-size-lg; + } + } + + // Button Clear + &.btn-clear { + background: transparent; + border: 0; + color: currentColor; + 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; + + &:hover { + opacity: .85; + } + + &::before { + content: "\2715"; + } + } +} + +// Button groups +.btn-group { + display: inline-flex; + flex-wrap: wrap; + + .btn { + flex: 1 0 auto; + &:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + &:not(:first-child):not(:last-child) { + border-radius: 0; + margin-left: -$border-width; + } + &:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: -$border-width; + } + &:focus, + &:hover, + &:active, + &.active { + z-index: $zindex-0; + } + } + + &.btn-group-block { + display: flex; + + .btn { + flex: 1 0 0; + } + } +} diff --git a/src/_calendars.scss b/src/_calendars.scss new file mode 100644 index 0000000..bfa8739 --- /dev/null +++ b/src/_calendars.scss @@ -0,0 +1,205 @@ +// Calendars +.calendar { + 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; + display: flex; + font-size: $font-size-lg; + padding: $layout-spacing; + } + + .calendar-header, + .calendar-body { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: $layout-spacing 0; + + .calendar-date { + flex: 0 0 14.28%; // 7 calendar-items each row + max-width: 14.28%; + } + } + + .calendar-header { + background: $bg-color; + border-bottom: $border-width solid $border-color; + color: $gray-color; + font-size: $font-size-sm; + } + + .calendar-body { + color: $gray-color-dark; + } + + .calendar-date { + border: 0; + padding: $unit-1; + + .date-item { + appearance: none; + background: transparent; + border: $border-width solid transparent; + border-radius: 50%; + color: $gray-color-dark; + @include control-transition(); + cursor: pointer; + height: $unit-7; + line-height: $unit-5; + outline: none; + padding: $unit-h; + position: relative; + text-align: center; + text-decoration: none; + vertical-align: middle; + white-space: nowrap; + width: $unit-7; + + &.date-today { + border-color: $secondary-color-dark; + color: $primary-color; + } + + &:focus { + @include control-shadow(); + } + + &:focus, + &:hover { + 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; + } + + // Calendar badge support + &.badge { + &::after { + position: absolute; + top: 3px; + right: 3px; + transform: translate(50%, -50%); + } + } + } + + &.disabled .date-item, + &.disabled .calendar-event, + .date-item:disabled, + .calendar-event:disabled { + cursor: default; + opacity: .25; + pointer-events: none; + } + } + + .calendar-range { + position: relative; + + &::before { + background: $secondary-color; + content: ""; + height: $unit-7; + left: 0; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + } + &.range-start { + &::before { + left: 50%; + } + } + &.range-end { + &::before { + right: 50%; + } + } + + .date-item { + color: $primary-color; + } + } + + &.calendar-lg { + .calendar-body { + padding: 0; + + .calendar-date { + border-bottom: $border-width solid $border-color; + border-right: $border-width solid $border-color; + display: flex; + flex-direction: column; + height: 5.5rem; + padding: 0; + + &:nth-child(7n) { + border-right: 0; + } + &:nth-last-child(-n+7) { + border-bottom: 0; + } + } + } + + .date-item { + align-self: flex-end; + height: $unit-7; + margin-right: $layout-spacing-sm; + margin-top: $layout-spacing-sm; + } + + .calendar-range { + &::before { + top: 19px; + } + &.range-start { + &::before { + left: auto; + width: 19px; + } + } + &.range-end { + &::before { + right: 19px; + } + } + } + + .calendar-events { + flex-grow: 1; + line-height: 1; + overflow-y: auto; + padding: $layout-spacing-sm; + } + + .calendar-event { + background: $secondary-color; + border-radius: $border-radius; + color: $primary-color; + font-size: $font-size-sm; + display: block; + margin: $unit-h auto; + overflow: hidden; + padding: 3px 4px; + text-align: left; + text-overflow: ellipsis; + 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.scss b/src/_carousels.scss new file mode 100644 index 0000000..788d351 --- /dev/null +++ b/src/_carousels.scss @@ -0,0 +1,124 @@ +// Carousels +.carousel { + background: $bg-color; + display: block; + overflow: hidden; + position: relative; + width: 100%; + + .carousel-container { + height: 100%; + left: 0; + position: relative; + &::before { + content: ""; + display: block; + padding-bottom: 56.25%; + } + + .carousel-item { + animation: carousel-slideout 1s ease-in-out 1; + height: 100%; + left: 0; + margin: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; + + &:hover { + .item-prev, + .item-next { + opacity: 1; + } + } + } + + .item-prev, + .item-next { + 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; + } + .item-prev { + left: 1rem; + } + .item-next { + right: 1rem; + } + } + + .carousel-locator { + &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1), + &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2), + &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3), + &: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; + } + &: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; + } + } + + .carousel-nav { + bottom: $layout-spacing; + display: flex; + justify-content: center; + left: 50%; + position: absolute; + transform: translateX(-50%); + width: 10rem; + z-index: $zindex-2; + + .nav-item { + color: fade($gray-color-light, 50%); + display: block; + flex: 1 0 auto; + height: $unit-8; + margin: $unit-1; + max-width: 2.5rem; + position: relative; + + &::before { + background: currentColor; + content: ""; + display: block; + height: $border-width-lg; + position: absolute; + top: .5rem; + width: 100%; + } + } + } +} + +@keyframes carousel-slidein { + 0% { + transform: translateX(100%); + } + 100% { + transform: translateX(0); + } +} + +@keyframes carousel-slideout { + 0% { + opacity: 1; + transform: translateX(0); + } + 100% { + opacity: 1; + transform: translateX(-50%); + } +} 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.scss b/src/_comparison-sliders.scss new file mode 100644 index 0000000..153bb0a --- /dev/null +++ b/src/_comparison-sliders.scss @@ -0,0 +1,114 @@ +// Image comparison slider +// Credit: http://codepen.io/solipsistacp/pen/Gpmaq +.comparison-slider { + height: 50vh; + overflow: hidden; + position: relative; + width: 100%; + + .comparison-before, + .comparison-after { + height: 100%; + left: 0; + margin: 0; + overflow: hidden; + position: absolute; + top: 0; + + img { + height: 100%; + object-fit: none; + object-position: left center; + position: absolute; + width: 100%; + } + } + + .comparison-before { + width: 100%; + z-index: 1; + + .comparison-label { + right: $unit-4; + } + } + + .comparison-after { + max-width: 100%; + min-width: 0; + z-index: 2; + + &::before { + background: transparent; + content: ""; + cursor: default; + height: 100%; + left: 0; + position: absolute; + right: $unit-4; + top: 0; + z-index: $zindex-0; + } + + &::after { + background: currentColor; + border-radius: 50%; + box-shadow: 0 -5px, 0 5px; + color: $light-color; + content: ""; + height: 3px; + position: absolute; + right: $unit-2; + top: 50%; + transform: translate(50%, -50%); + width: 3px; + } + + .comparison-label { + left: $unit-4; + } + } + + .comparison-resizer { + animation: first-run 1.5s 1 ease-in-out; + cursor: ew-resize; + height: $unit-4; + left: 0; + max-width: 100%; + min-width: $unit-4; + opacity: 0; + outline: none; + position: relative; + resize: horizontal; + top: 50%; + transform: translateY(-50%) scaleY(30); + width: 0; + } + + .comparison-label { + background: fade($dark-color, 50%); + bottom: $unit-4; + color: $light-color; + padding: $unit-1 $unit-2; + position: absolute; + user-select: none; + } +} + +@keyframes first-run { + 0% { + width: 0; + } + 25% { + width: $unit-12; + } + 50% { + width: $unit-4; + } + 75% { + width: $unit-6; + } + 100% { + width: 0; + } +} diff --git a/src/_dropdowns.scss b/src/_dropdowns.scss new file mode 100644 index 0000000..324440b --- /dev/null +++ b/src/_dropdowns.scss @@ -0,0 +1,36 @@ +// Dropdown +.dropdown { + display: inline-block; + position: relative; + + .menu { + animation: slide-down .15s ease 1; + display: none; + left: 0; + max-height: 50vh; + overflow-y: auto; + position: absolute; + top: 100%; + } + + &.dropdown-right { + .menu { + left: auto; + right: 0; + } + } + + &.active .menu, + .dropdown-toggle:focus + .menu, + .menu:hover { + display: block; + } + + // 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; + } + } +} 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.scss b/src/_filters.scss new file mode 100644 index 0000000..965dfa3 --- /dev/null +++ b/src/_filters.scss @@ -0,0 +1,29 @@ +// Filters +.filter { + .filter-nav { + margin: $layout-spacing 0; + } + + .filter-body { + display: flex; + flex-wrap: wrap; + } + + .filter-tag { + &#tag-all:checked ~ .filter-nav .chip[for="tag-all"], + &#tag-action:checked ~ .filter-nav .chip[for="tag-action"], + &#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; + } + + &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]), + &#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]), + &#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]), + &#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) { + display: none; + } + } +} diff --git a/src/_forms.scss b/src/_forms.scss new file mode 100644 index 0000000..b407d3c --- /dev/null +++ b/src/_forms.scss @@ -0,0 +1,514 @@ +// Forms +.form-group { + &:not(:last-child) { + margin-bottom: $layout-spacing; + } +} + +fieldset { + margin-bottom: $layout-spacing-lg; +} + +legend { + font-size: $font-size-lg; + font-weight: 500; + margin-bottom: $layout-spacing-lg; +} + +// Form element: Label +.form-label { + display: block; + padding: $control-padding-v + $border-width 0; + + &.label-sm { + padding: $control-padding-v-sm + $border-width 0; + } + + &.label-lg { + padding: $control-padding-v-lg + $border-width 0; + } +} + +// Form element: Input +.form-input { + appearance: none; + background: $bg-color-light; + background-image: none; + 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; + max-width: 100%; + outline: none; + padding: $control-padding-v $control-padding-h; + position: relative; + width: 100%; + &:focus { + border-color: $primary-color; + @include control-shadow(); + } + &::placeholder { + color: $gray-color; + } + + // Input sizes + &.input-sm { + 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; + } + + &.input-inline { + display: inline-block; + vertical-align: middle; + width: 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; + + .has-success &, + .is-success + & { + color: $success-color; + } + + .has-error &, + .is-error + & { + color: $error-color; + } +} + +// Form element: Select +.form-select { + appearance: none; + border: $border-width solid $border-color-dark; + border-radius: $border-radius; + color: inherit; + font-size: $font-size; + height: $control-size; + line-height: $line-height; + outline: none; + padding: $control-padding-v $control-padding-h; + vertical-align: middle; + width: 100%; + + &[size], + &[multiple] { + height: auto; + + option { + 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; + } + &:focus { + border-color: $primary-color; + @include control-shadow(); + } + &::-ms-expand { + display: none; + } + + // 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; + } + + &.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; + } +} + +// Form Icons +.has-icon-left, +.has-icon-right { + position: relative; + + .form-icon { + height: $control-icon-size; + margin: 0 $control-padding-v; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: $control-icon-size; + } +} + +.has-icon-left { + .form-icon { + left: $border-width; + } + + .form-input { + padding-left: $control-icon-size + $control-padding-v * 2; + } +} + +.has-icon-right { + .form-icon { + right: $border-width; + } + + .form-input { + padding-right: $control-icon-size + $control-padding-v * 2; + } +} + +// Form element: Checkbox and Radio +.form-checkbox, +.form-radio, +.form-switch { + display: inline-block; + line-height: $line-height; + padding: ($control-size-sm - $line-height) / 2 ($control-icon-size + $control-padding-h); + position: relative; + + input { + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + width: 1px; + &:focus + .form-icon { + border-color: $primary-color; + @include control-shadow(); + } + &:checked + .form-icon { + background: $primary-color; + border-color: $primary-color; + } + } + + .form-icon { + border: $border-width solid $border-color-dark; + @include control-transition(); + cursor: pointer; + display: inline-block; + position: absolute; + } +} + +.form-checkbox, +.form-radio { + .form-icon { + background: $bg-color-light; + height: $control-icon-size; + left: 0; + top: ($control-size-sm - $control-icon-size) / 2; + width: $control-icon-size; + } + + input { + &:active + .form-icon { + background: $bg-color-dark; + } + } +} +.form-checkbox { + .form-icon { + border-radius: $border-radius; + } + + input { + &:checked + .form-icon { + &::before { + background-clip: padding-box; + border: $border-width-lg solid $light-color; + border-left-width: 0; + border-top-width: 0; + content: ""; + height: 10px; + left: 50%; + margin-left: -3px; + margin-top: -6px; + position: absolute; + top: 50%; + transform: rotate(45deg); + width: 6px; + } + } + &:indeterminate + .form-icon { + background: $primary-color; + border-color: $primary-color; + &::before { + background: $bg-color-light; + content: ""; + height: 2px; + left: 50%; + margin-left: -5px; + margin-top: -1px; + position: absolute; + top: 50%; + width: 10px; + } + } + } +} +.form-radio { + .form-icon { + border-radius: $control-icon-size / 2; + } + + input { + &:checked + .form-icon { + &::before { + background: $bg-color-light; + border-radius: $border-radius; + content: ""; + height: 4px; + left: 50%; + margin-left: -2px; + margin-top: -2px; + position: absolute; + top: 50%; + width: 4px; + } + } + } +} + +// Form element: Switch +.form-switch { + padding-left: ($unit-8 + $control-padding-h); + + .form-icon { + background: $gray-color-light; + background-clip: padding-box; + 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; + &::before { + background: $bg-color-light; + border-radius: $unit-2; + content: ""; + display: block; + height: $unit-4; + left: 0; + position: absolute; + top: 0; + @include control-transition(); + width: $unit-4; + } + } + + input { + &:checked + .form-icon { + &::before { + left: 14px; + } + } + &:active + .form-icon { + &::before { + background: $bg-color; + } + } + } +} + +// Form element: Input groups +.input-group { + 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; + + &.addon-sm { + 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; + } + } + + .form-input, + .form-select { + flex: 1 1 auto; + } + + .input-group-btn { + z-index: $zindex-0; + } + + .form-input, + .form-select, + .input-group-addon, + .input-group-btn { + &:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + &:not(:first-child):not(:last-child) { + border-radius: 0; + margin-left: -$border-width; + } + &:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: -$border-width; + } + &:focus { + z-index: $zindex-0 + 1; + } + } + + .form-select { + width: auto; + } + + &.input-inline { + display: inline-flex; + } +} + +// Form validation states +.form-input, +.form-select { + .has-success &, + &.is-success { + border-color: $success-color; + &:focus { + @include control-shadow($success-color); + } + } + + .has-error &, + &.is-error { + border-color: $error-color; + &:focus { + @include control-shadow($error-color); + } + } +} + +.form-checkbox, +.form-radio, +.form-switch { + .has-error &, + &.is-error { + .form-icon { + border-color: $error-color; + } + + input { + &:checked + .form-icon { + background: $error-color; + border-color: $error-color; + } + + &:focus + .form-icon { + border-color: $error-color; + @include control-shadow($error-color); + } + } + } +} + +// validation based on :placeholder-shown (Edge doesn't support it yet) +.form-input { + &:not(:placeholder-shown) { + &:invalid { + border-color: $error-color; + &:focus { + @include control-shadow($error-color); + } + + & + .form-input-hint { + color: $error-color; + } + } + } +} + +// Form disabled and readonly +.form-input, +.form-select { + &:disabled, + &.disabled { + background-color: $bg-color-dark; + cursor: not-allowed; + opacity: .5; + } +} + +.form-input { + &[readonly] { + background-color: $bg-color; + } +} + +input { + &:disabled, + &.disabled { + & + .form-icon { + background: $bg-color-dark; + cursor: not-allowed; + opacity: .5; + } + } +} + +.form-switch { + input { + &:disabled, + &.disabled { + & + .form-icon::before { + background: $bg-color-light; + } + } + } +} + +// Form Horizontal +.form-horizontal { + padding: $layout-spacing; + + .form-group { + display: flex; + } + + .form-checkbox, + .form-radio, + .form-switch { + margin: ($control-size - $control-size-sm) / 2 0; + } +} diff --git a/src/_icons.scss b/src/_icons.scss new file mode 100644 index 0000000..ad092b8 --- /dev/null +++ b/src/_icons.scss @@ -0,0 +1,656 @@ +// CSS Icons +$icon-border-width: $border-width-lg; + +.icon { + box-sizing: border-box; + display: inline-block; + font-size: inherit; + font-style: normal; + height: 1em; + position: relative; + text-indent: -9999px; + vertical-align: middle; + width: 1em; + &::before, + &::after { + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + } +} + +// Icon arrows +.icon-arrow-down, +.icon-arrow-left, +.icon-arrow-right, +.icon-arrow-up, +.icon-downward, +.icon-back, +.icon-forward, +.icon-upward { + &::before { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + height: .65em; + width: .65em; + } +} + +.icon-arrow-down { + &::before { + transform: translate(-50%, -75%) rotate(225deg); + } +} + +.icon-arrow-left { + &::before { + transform: translate(-25%, -50%) rotate(-45deg); + } +} + +.icon-arrow-right { + &::before { + transform: translate(-75%, -50%) rotate(135deg); + } +} + +.icon-arrow-up { + &::before { + transform: translate(-50%, -25%) rotate(45deg); + } +} + +.icon-back, +.icon-forward { + &::after { + background: currentColor; + content: ""; + height: $icon-border-width; + width: .8em; + } +} + +.icon-downward, +.icon-upward { + &::after { + background: currentColor; + content: ""; + height: .8em; + width: $icon-border-width; + } +} + +.icon-back { + &::after { + left: 55%; + } + &::before { + transform: translate(-50%, -50%) rotate(-45deg); + } +} + +.icon-downward { + &::after { + top: 45%; + } + &::before { + transform: translate(-50%, -50%) rotate(-135deg); + } +} + +.icon-forward { + &::after { + left: 45%; + } + &::before { + transform: translate(-50%, -50%) rotate(135deg); + } +} + +.icon-upward { + &::after { + top: 55%; + } + &::before { + transform: translate(-50%, -50%) rotate(45deg); + } +} + +// Icon caret +.icon-caret { + &::before { + border-top: .3em solid currentColor; + border-right: .3em solid transparent; + border-left: .3em solid transparent; + content: ""; + height: 0; + width: 0; + transform: translate(-50%, -25%); + } +} + +// Icon menu +.icon-menu { + &::before { + background: currentColor; + box-shadow: 0 -.35em, 0 .35em; + content: ""; + height: $icon-border-width; + width: 100%; + } +} + +// Icon apps +.icon-apps { + &::before { + background: currentColor; + box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em; + content: ""; + height: 3px; + width: 3px; + } +} + +// Icon resize +.icon-resize-horiz, +.icon-resize-vert { + &::before, + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + height: .45em; + width: .45em; + } + &::before { + transform: translate(-50%, -90%) rotate(45deg); + } + &::after { + transform: translate(-50%, -10%) rotate(225deg); + } +} + +.icon-resize-horiz { + &::before { + transform: translate(-90%, -50%) rotate(-45deg); + } + &::after { + transform: translate(-10%, -50%) rotate(135deg); + } +} + +// Icon more +.icon-more-horiz, +.icon-more-vert { + &::before { + background: currentColor; + box-shadow: -.4em 0, .4em 0; + border-radius: 50%; + content: ""; + height: 3px; + width: 3px; + } +} +.icon-more-vert { + &::before { + box-shadow: 0 -.4em, 0 .4em; + } +} + +// Icon plus, minus, cross +.icon-plus, +.icon-minus, +.icon-cross { + &::before { + background: currentColor; + content: ""; + height: $icon-border-width; + width: 100%; + } +} +.icon-plus, +.icon-cross { + &::after { + background: currentColor; + content: ""; + height: 100%; + width: $icon-border-width; + } +} +.icon-cross { + &::before { + width: 100%; + } + &::after { + height: 100%; + } + &::before, + &::after { + transform: translate(-50%, -50%) rotate(45deg); + } +} + +// Icon check +.icon-check { + &::before { + border: $icon-border-width solid currentColor; + border-right: 0; + border-top: 0; + content: ""; + height: .5em; + width: .9em; + transform: translate(-50%, -75%) rotate(-45deg); + } +} + +// Icon stop +.icon-stop { + border: $icon-border-width solid currentColor; + border-radius: 50%; + &::before { + background: currentColor; + content: ""; + height: $icon-border-width; + transform: translate(-50%, -50%) rotate(45deg); + width: 1em; + } +} + +// Icon shutdown +.icon-shutdown { + border: $icon-border-width solid currentColor; + border-radius: 50%; + border-top-color: transparent; + &::before { + background: currentColor; + content: ""; + height: .5em; + top: .1em; + width: $icon-border-width; + } +} + +// Icon refresh +.icon-refresh { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + border-right-color: transparent; + content: ""; + height: 1em; + width: 1em; + } + &::after { + border: .2em solid currentColor; + border-top-color: transparent; + border-left-color: transparent; + content: ""; + height: 0; + left: 80%; + top: 20%; + width: 0; + } +} + +// Icon search +.icon-search { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + content: ""; + height: .75em; + left: 5%; + top: 5%; + transform: translate(0, 0) rotate(45deg); + width: .75em; + } + &::after { + background: currentColor; + content: ""; + height: $icon-border-width; + left: 80%; + top: 80%; + transform: translate(-50%, -50%) rotate(45deg); + width: .4em; + } +} + +// Icon edit +.icon-edit { + &::before { + border: $icon-border-width solid currentColor; + content: ""; + height: .4em; + transform: translate(-40%, -60%) rotate(-45deg); + width: .85em; + } + &::after { + border: .15em solid currentColor; + border-top-color: transparent; + border-right-color: transparent; + content: ""; + height: 0; + left: 5%; + top: 95%; + transform: translate(0, -100%); + width: 0; + } +} + +// Icon delete +.icon-delete { + &::before { + border: $icon-border-width solid currentColor; + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; + border-top: 0; + content: ""; + height: .75em; + top: 60%; + width: .75em; + } + &::after { + background: currentColor; + box-shadow: -.25em .2em, .25em .2em; + content: ""; + 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-right: 0; + border-top: 0; + &::before { + border: $icon-border-width solid currentColor; + border-left: 0; + border-top: 0; + content: ""; + height: .4em; + left: 100%; + top: .25em; + transform: translate(-125%, -50%) rotate(-45deg); + width: .4em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + border-radius: 75% 0; + content: ""; + height: .5em; + width: .6em; + } +} + +// Icon flag +.icon-flag { + &::before { + background: currentColor; + content: ""; + height: 1em; + left: 15%; + width: $icon-border-width; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom-right-radius: $border-radius; + border-left: 0; + border-top-right-radius: $border-radius; + content: ""; + height: .65em; + top: 35%; + left: 60%; + width: .8em; + } +} + +// Icon bookmark +.icon-bookmark { + &::before { + border: $icon-border-width solid currentColor; + border-bottom: 0; + 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-bottom: 0; + border-left: 0; + border-radius: $border-radius; + content: ""; + height: .5em; + transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); + width: .5em; + } +} + +// Icon download & upload +.icon-download, +.icon-upload { + border-bottom: $icon-border-width solid currentColor; + &::before { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + height: .5em; + width: .5em; + transform: translate(-50%, -60%) rotate(-135deg); + } + &::after { + background: currentColor; + content: ""; + height: .6em; + top: 40%; + width: $icon-border-width; + } +} + +.icon-upload { + &::before { + transform: translate(-50%, -60%) rotate(45deg); + } + &::after { + top: 50%; + } +} + +// Icon time +.icon-time { + border: $icon-border-width solid currentColor; + border-radius: 50%; + &::before { + background: currentColor; + content: ""; + height: .4em; + transform: translate(-50%, -75%); + width: $icon-border-width; + } + &::after { + background: currentColor; + content: ""; + height: .3em; + transform: translate(-50%, -75%) rotate(90deg); + transform-origin: 50% 90%; + width: $icon-border-width; + } +} + +// Icon mail +.icon-mail { + &::before { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + content: ""; + height: .8em; + width: 1em; + } + &::after { + border: $icon-border-width solid currentColor; + border-right: 0; + border-top: 0; + content: ""; + height: .5em; + transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); + width: .5em; + } +} + +// Icon people +.icon-people { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + content: ""; + height: .45em; + top: 25%; + width: .45em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: 50% 50% 0 0; + content: ""; + height: .4em; + top: 75%; + width: .9em; + } +} + +// Icon message +.icon-message { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-radius: $border-radius; + border-right: 0; + &::before { + border: $icon-border-width solid currentColor; + border-left: 0; + border-bottom-right-radius: $border-radius; + border-top: 0; + content: ""; + height: .8em; + left: 65%; + top: 40%; + width: .7em; + } + &::after { + background: currentColor; + border-radius: $border-radius; + content: ""; + height: .3em; + left: 10%; + top: 100%; + transform: translate(0, -90%) rotate(45deg); + width: $icon-border-width; + } +} + +// Icon photo +.icon-photo { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + content: ""; + height: .25em; + left: 35%; + top: 35%; + width: .25em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-left: 0; + content: ""; + height: .5em; + left: 60%; + transform: translate(-50%, 25%) rotate(-45deg); + width: .5em; + } +} + +// Icon link +.icon-link { + &::before, + &::after { + border: $icon-border-width solid currentColor; + border-radius: 5em 0 0 5em; + border-right: 0; + content: ""; + height: .5em; + width: .75em; + } + &::before { + transform: translate(-70%, -45%) rotate(-45deg); + } + &::after { + transform: translate(-30%, -55%) rotate(135deg); + } +} + +// Icon location +.icon-location { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50% 50% 50% 0; + content: ""; + height: .8em; + transform: translate(-50%, -60%) rotate(-45deg); + width: .8em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: 50%; + content: ""; + height: .2em; + transform: translate(-50%, -80%); + width: .2em; + } +} + +// Icon emoji +.icon-emoji { + border: $icon-border-width solid currentColor; + border-radius: 50%; + &::before { + border-radius: 50%; + box-shadow: -.17em -.15em, .17em -.15em; + content: ""; + height: .1em; + width: .1em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom-color: transparent; + border-radius: 50%; + border-right-color: transparent; + content: ""; + height: .5em; + transform: translate(-50%, -40%) rotate(-135deg); + width: .5em; + } +} + +// Component icon support +.accordion, +.btn, +.toast, +.menu { + .icon { + vertical-align: -10%; + } +} 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.scss b/src/_layout.scss new file mode 100644 index 0000000..83e2c18 --- /dev/null +++ b/src/_layout.scss @@ -0,0 +1,424 @@ +// Layout +.container { + margin-left: auto; + margin-right: auto; + padding-left: $layout-spacing; + padding-right: $layout-spacing; + width: 100%; + @extend .clearfix; + + $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size; + + &.grid-xl { + max-width: $grid-spacing * 2 + $size-xl; + } + + &.grid-lg { + max-width: $grid-spacing * 2 + $size-lg; + } + + &.grid-md { + max-width: $grid-spacing * 2 + $size-md; + } + + &.grid-sm { + max-width: $grid-spacing * 2 + $size-sm; + } + + &.grid-xs { + max-width: $grid-spacing * 2 + $size-xs; + } +} + +// Responsive breakpoint system +.show-xs, +.show-sm, +.show-md, +.show-lg, +.show-xl { + display: none !important; +} + +// Responsive grid system +.columns { + display: flex; + flex-wrap: wrap; + margin-left: -$layout-spacing; + margin-right: -$layout-spacing; + + &.col-gapless { + margin-left: 0; + margin-right: 0; + + & > .column { + padding-left: 0; + padding-right: 0; + } + } + &.col-oneline { + flex-wrap: nowrap; + overflow-x: auto; + } +} +.column { + flex: 1; + max-width: 100%; + padding-left: $layout-spacing; + padding-right: $layout-spacing; + + &.col-12, + &.col-11, + &.col-10, + &.col-9, + &.col-8, + &.col-7, + &.col-6, + &.col-5, + &.col-4, + &.col-3, + &.col-2, + &.col-1 { + flex: none; + } +} +.col-12 { + width: 100%; +} +.col-11 { + width: 91.66666667%; +} +.col-10 { + width: 83.33333333%; +} +.col-9 { + width: 75%; +} +.col-8 { + width: 66.66666667%; +} +.col-7 { + width: 58.33333333%; +} +.col-6 { + width: 50%; +} +.col-5 { + width: 41.66666667%; +} +.col-4 { + width: 33.33333333%; +} +.col-3 { + width: 25%; +} +.col-2 { + width: 16.66666667%; +} +.col-1 { + width: 8.33333333%; +} +.col-auto { + flex: 0 0 auto; + max-width: none; + width: auto; +} +.col-mx-auto { + margin-left: auto; + margin-right: auto; +} +.col-ml-auto { + margin-left: auto; +} +.col-mr-auto { + margin-right: auto; +} +@media (max-width: $size-xl) { + .col-xl-12, + .col-xl-11, + .col-xl-10, + .col-xl-9, + .col-xl-8, + .col-xl-7, + .col-xl-6, + .col-xl-5, + .col-xl-4, + .col-xl-3, + .col-xl-2, + .col-xl-1 { + flex: none; + } + .col-xl-12 { + width: 100%; + } + .col-xl-11 { + width: 91.66666667%; + } + .col-xl-10 { + width: 83.33333333%; + } + .col-xl-9 { + width: 75%; + } + .col-xl-8 { + width: 66.66666667%; + } + .col-xl-7 { + width: 58.33333333%; + } + .col-xl-6 { + width: 50%; + } + .col-xl-5 { + width: 41.66666667%; + } + .col-xl-4 { + width: 33.33333333%; + } + .col-xl-3 { + width: 25%; + } + .col-xl-2 { + width: 16.66666667%; + } + .col-xl-1 { + width: 8.33333333%; + } + .hide-xl { + display: none !important; + } + .show-xl { + display: block !important; + } +} +@media (max-width: $size-lg) { + .col-lg-12, + .col-lg-11, + .col-lg-10, + .col-lg-9, + .col-lg-8, + .col-lg-7, + .col-lg-6, + .col-lg-5, + .col-lg-4, + .col-lg-3, + .col-lg-2, + .col-lg-1 { + flex: none; + } + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.66666667%; + } + .col-lg-10 { + width: 83.33333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.66666667%; + } + .col-lg-7 { + width: 58.33333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.66666667%; + } + .col-lg-4 { + width: 33.33333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.66666667%; + } + .col-lg-1 { + width: 8.33333333%; + } + .hide-lg { + display: none !important; + } + .show-lg { + display: block !important; + } +} +@media (max-width: $size-md) { + .col-md-12, + .col-md-11, + .col-md-10, + .col-md-9, + .col-md-8, + .col-md-7, + .col-md-6, + .col-md-5, + .col-md-4, + .col-md-3, + .col-md-2, + .col-md-1 { + flex: none; + } + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.66666667%; + } + .col-md-10 { + width: 83.33333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } + .hide-md { + display: none !important; + } + .show-md { + display: block !important; + } +} +@media (max-width: $size-sm) { + .col-sm-12, + .col-sm-11, + .col-sm-10, + .col-sm-9, + .col-sm-8, + .col-sm-7, + .col-sm-6, + .col-sm-5, + .col-sm-4, + .col-sm-3, + .col-sm-2, + .col-sm-1 { + flex: none; + } + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.66666667%; + } + .col-sm-10 { + width: 83.33333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.66666667%; + } + .col-sm-7 { + width: 58.33333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.66666667%; + } + .col-sm-4 { + width: 33.33333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.66666667%; + } + .col-sm-1 { + width: 8.33333333%; + } + .hide-sm { + display: none !important; + } + .show-sm { + display: block !important; + } +} +@media (max-width: $size-xs) { + .col-xs-12, + .col-xs-11, + .col-xs-10, + .col-xs-9, + .col-xs-8, + .col-xs-7, + .col-xs-6, + .col-xs-5, + .col-xs-4, + .col-xs-3, + .col-xs-2, + .col-xs-1 { + flex: none; + } + .col-xs-12 { + width: 100%; + } + .col-xs-11 { + width: 91.66666667%; + } + .col-xs-10 { + width: 83.33333333%; + } + .col-xs-9 { + width: 75%; + } + .col-xs-8 { + width: 66.66666667%; + } + .col-xs-7 { + width: 58.33333333%; + } + .col-xs-6 { + width: 50%; + } + .col-xs-5 { + width: 41.66666667%; + } + .col-xs-4 { + width: 33.33333333%; + } + .col-xs-3 { + width: 25%; + } + .col-xs-2 { + width: 16.66666667%; + } + .col-xs-1 { + width: 8.33333333%; + } + .hide-xs { + display: none !important; + } + .show-xs { + display: block !important; + } +} diff --git a/src/_media.scss b/src/_media.scss new file mode 100644 index 0000000..68c5934 --- /dev/null +++ b/src/_media.scss @@ -0,0 +1,70 @@ +// Media +.img-responsive { + display: block; + height: auto; + max-width: 100%; +} + +// object-fit support is coming to Microsoft Edge +// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/ +.img-fit-cover { + object-fit: cover; +} + +.img-fit-contain { + object-fit: contain; +} + +// Video responsive +.video-responsive { + display: block; + overflow: hidden; + padding: 0; + position: relative; + width: 100%; + &::before { + content: ""; + display: block; + padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16 + } + + iframe, + object, + embed { + border: 0; + bottom: 0; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + } + + video { + height: auto; + max-width: 100%; + width: 100%; + } +} + +.video-responsive-4-3 { + &::before { + padding-bottom: 75%; // Ratio 4:3 + } +} + +.video-responsive-1-1 { + &::before { + padding-bottom: 100%; // Ratio 1:1 + } +} + +.figure { + margin: 0 0 $layout-spacing 0; + + .figure-caption { + 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.scss b/src/_meters.scss new file mode 100644 index 0000000..9fd98b0 --- /dev/null +++ b/src/_meters.scss @@ -0,0 +1,57 @@ +// Meters +// Credit: https://css-tricks.com/html5-meter-element/ +.meter { + appearance: none; + background: $bg-color; + border: 0; + border-radius: $border-radius; + display: block; + width: 100%; + height: $unit-4; + + &::-webkit-meter-inner-element { + display: block; + } + + &::-webkit-meter-bar, + &::-webkit-meter-optimum-value, + &::-webkit-meter-suboptimum-value, + &::-webkit-meter-even-less-good-value { + border-radius: $border-radius; + } + + &::-webkit-meter-bar { + background: $bg-color; + } + + &::-webkit-meter-optimum-value { + background: $success-color; + } + + &::-webkit-meter-suboptimum-value { + background: $warning-color; + } + + &::-webkit-meter-even-less-good-value { + background: $error-color; + } + + &::-moz-meter-bar, + &:-moz-meter-optimum, + &:-moz-meter-sub-optimum, + &:-moz-meter-sub-sub-optimum { + border-radius: $border-radius; + } + + &:-moz-meter-optimum::-moz-meter-bar { + background: $success-color; + } + + &:-moz-meter-sub-optimum::-moz-meter-bar { + background: $warning-color; + } + + &:-moz-meter-sub-sub-optimum::-moz-meter-bar { + 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.scss b/src/_modals.scss new file mode 100644 index 0000000..daf7cab --- /dev/null +++ b/src/_modals.scss @@ -0,0 +1,73 @@ +// Modals +.modal { + align-items: center; + bottom: 0; + display: none; + justify-content: center; + left: 0; + opacity: 0; + overflow: hidden; + padding: $layout-spacing; + position: fixed; + right: 0; + top: 0; + + &:target, + &.active { + display: flex; + opacity: 1; + z-index: $zindex-4; + + .modal-overlay { + background: rgba($bg-color, .75); + bottom: 0; + cursor: default; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + } + + .modal-container { + animation: slide-down .2s ease 1; + max-width: 640px; + z-index: $zindex-0; + } + } + + &.modal-sm { + .modal-container { + max-width: $control-max-width; + } + } +} + +.modal-container { + background: $bg-color-light; + border-radius: $border-radius; + display: block; + padding: 0; + @include shadow-variant(.2rem); + text-align: left; + + .modal-header { + padding: $layout-spacing-lg; + + .modal-title { + margin: 0; + } + } + + .modal-body { + max-height: 50vh; + overflow-y: auto; + padding: $layout-spacing-lg; + position: relative; + } + + .modal-footer { + padding: $layout-spacing-lg; + text-align: right; + } +} diff --git a/src/_navbar.scss b/src/_navbar.scss new file mode 100755 index 0000000..a90b6e6 --- /dev/null +++ b/src/_navbar.scss @@ -0,0 +1,29 @@ +// Navbar +.navbar { + align-items: stretch; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .navbar-section { + align-items: center; + display: flex; + flex: 1 0 0; + + &:last-child { + justify-content: flex-end; + } + } + + .navbar-center { + align-items: center; + display: flex; + flex: 0 0 auto; + } + + .navbar-brand { + font-size: $font-size-lg; + font-weight: 500; + text-decoration: none; + } +} diff --git a/src/_navs.scss b/src/_navs.scss new file mode 100644 index 0000000..4bedc27 --- /dev/null +++ b/src/_navs.scss @@ -0,0 +1,34 @@ +// Navs +.nav { + display: flex; + flex-direction: column; + list-style: none; + margin: $unit-1 0; + + .nav-item { + a { + color: $gray-color-dark; + padding: $unit-1 $unit-2; + text-decoration: none; + &:focus, + &:hover { + color: $primary-color; + } + } + &.active { + & > a { + color: darken($gray-color-dark, 10%); + font-weight: bold; + &:focus, + &:hover { + color: $primary-color; + } + } + } + } + + & .nav { + margin-bottom: $unit-2; + margin-left: $unit-4; + } +} diff --git a/src/_normalize.scss b/src/_normalize.scss new file mode 100644 index 0000000..f157a8c --- /dev/null +++ b/src/_normalize.scss @@ -0,0 +1,437 @@ +/* Manually forked from Normalize.css */ +/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +/* Document + ========================================================================== */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8 (removed). + */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. (removed) + * 2. Correct the odd `em` font sizing in all browsers. + */ + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) + */ + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: $mono-font-family; /* 1 (changed) */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. (Removed) + */ + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; + font-weight: 400; /* (added) */ +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 (changed) */ + font-size: inherit; /* 1 (changed) */ + line-height: inherit; /* 1 (changed) */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule (removed). + */ + + +/** + * Change the border, margin, and padding in all browsers (opinionated) (changed). + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/src/_pagination.scss b/src/_pagination.scss new file mode 100644 index 0000000..6efc7ba --- /dev/null +++ b/src/_pagination.scss @@ -0,0 +1,61 @@ +// Pagination +.pagination { + display: flex; + list-style: none; + margin: $unit-1 0; + padding: $unit-1 0; + + .page-item { + margin: $unit-1 $unit-o; + + span { + display: inline-block; + padding: $unit-1 $unit-1; + } + + a { + border-radius: $border-radius; + color: $gray-color-dark; + display: inline-block; + padding: $unit-1 $unit-2; + text-decoration: none; + &:focus, + &:hover { + color: $primary-color; + } + } + + &.disabled { + a { + cursor: default; + opacity: .5; + pointer-events: none; + } + } + + &.active { + a { + background: $primary-color; + color: $light-color; + } + } + + &.page-prev, + &.page-next { + flex: 1 0 50%; + } + + &.page-next { + text-align: right; + } + + .page-item-title { + margin: 0; + } + + .page-item-subtitle { + margin: 0; + opacity: .5; + } + } +} diff --git a/src/_panels.scss b/src/_panels.scss new file mode 100644 index 0000000..386f96e --- /dev/null +++ b/src/_panels.scss @@ -0,0 +1,23 @@ +// Panels +.panel { + 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; + } + + .panel-nav { + flex: 0 0 auto; + } + + .panel-body { + flex: 1 1 auto; + overflow-y: auto; + padding: 0 $layout-spacing-lg; + } +} diff --git a/src/_parallax.scss b/src/_parallax.scss new file mode 100644 index 0000000..c097e1f --- /dev/null +++ b/src/_parallax.scss @@ -0,0 +1,129 @@ +// Parallax +$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; + height: auto; + position: relative; + width: auto; + + .parallax-content { + height: auto; + @include shadow-variant(1rem); + transform: perspective($parallax-perspective); + transform-style: preserve-3d; + transition: all .4s ease; + width: 100%; + + &::before { + content: ""; + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } + + .parallax-front { + align-items: center; + 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%); + top: 0; + transform: translateZ($parallax-offset-z) scale($parallax-scale); + transition: all .4s ease; + width: 100%; + z-index: $zindex-0; + } + + .parallax-top-left { + @include parallax-dir(); + left: 0; + top: 0; + + &:hover ~ .parallax-content { + 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); + } + } + } + + .parallax-top-right { + @include parallax-dir(); + right: 0; + top: 0; + + &:hover ~ .parallax-content { + 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); + } + } + } + + .parallax-bottom-left { + @include parallax-dir(); + bottom: 0; + left: 0; + + &:hover ~ .parallax-content { + 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); + } + } + } + + .parallax-bottom-right { + @include parallax-dir(); + bottom: 0; + right: 0; + + &:hover ~ .parallax-content { + 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); + } + } + } +} diff --git a/src/_popovers.scss b/src/_popovers.scss new file mode 100644 index 0000000..eee2fc9 --- /dev/null +++ b/src/_popovers.scss @@ -0,0 +1,70 @@ +// Popovers +.popover { + display: inline-block; + position: relative; + + .popover-container { + content: attr(data-tooltip); + opacity: 0; + left: 50%; + 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; + } + + :focus + .popover-container, + &:hover .popover-container, + .popover-container:hover { + display: block; + opacity: 1; + transform: translate(-50%, -100%) scale(1); + } + + &.popover-right { + .popover-container { + left: 100%; + top: 50%; + } + + :focus + .popover-container, + &:hover .popover-container, + .popover-container:hover { + transform: translate(0, -50%) scale(1); + } + } + + &.popover-bottom { + .popover-container { + left: 50%; + top: 100%; + } + + :focus + .popover-container, + &:hover .popover-container, + .popover-container:hover { + transform: translate(-50%, 0) scale(1); + } + } + + &.popover-left { + .popover-container { + left: 0; + top: 50%; + } + + :focus + .popover-container, + &:hover .popover-container, + .popover-container:hover { + transform: translate(-100%, -50%) scale(1); + } + } + + .card { + border: 0; + @include shadow-variant(.2rem); + } +} diff --git a/src/_progress.scss b/src/_progress.scss new file mode 100644 index 0000000..f173772 --- /dev/null +++ b/src/_progress.scss @@ -0,0 +1,45 @@ +// Progress +// Credit: https://css-tricks.com/html5-progress-element/ +.progress { + appearance: none; + background: $bg-color-dark; + border: 0; + border-radius: $border-radius; + color: $primary-color; + height: $unit-1; + position: relative; + width: 100%; + + &::-webkit-progress-bar { + background: transparent; + border-radius: $border-radius; + } + + &::-webkit-progress-value { + background: $primary-color; + border-radius: $border-radius; + } + + &::-moz-progress-bar { + 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; + + &::-moz-progress-bar { + background: transparent; + } + } +} + +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} diff --git a/src/_sliders.scss b/src/_sliders.scss new file mode 100644 index 0000000..501d91e --- /dev/null +++ b/src/_sliders.scss @@ -0,0 +1,93 @@ +// Sliders +// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ +.slider { + appearance: none; + background: transparent; + display: block; + width: 100%; + height: $unit-6; + + &:focus { + @include control-shadow(); + outline: none; + } + + // Slider Thumb + &::-webkit-slider-thumb { + -webkit-appearance: none; + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + margin-top: -($unit-3 - $unit-h) / 2 ; + transition: transform .2s ease; + width: $unit-3; + } + &::-moz-range-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s ease; + width: $unit-3; + } + &::-ms-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s ease; + width: $unit-3; + } + + &:active { + &::-webkit-slider-thumb { + transform: scale(1.25); + } + &::-moz-range-thumb { + transform: scale(1.25); + } + &::-ms-thumb { + transform: scale(1.25); + } + } + + &:disabled, + &.disabled { + &::-webkit-slider-thumb { + background: $gray-color-light; + transform: scale(1); + } + &::-moz-range-thumb { + background: $gray-color-light; + transform: scale(1); + } + &::-ms-thumb { + background: $gray-color-light; + transform: scale(1); + } + } + + // Slider Track + &::-webkit-slider-runnable-track { + 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; + width: 100%; + } + &::-ms-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-ms-fill-lower { + background: $primary-color; + } +} diff --git a/src/_steps.scss b/src/_steps.scss new file mode 100644 index 0000000..d5ddc6e --- /dev/null +++ b/src/_steps.scss @@ -0,0 +1,70 @@ +// Steps +.step { + display: flex; + flex-wrap: nowrap; + list-style: none; + margin: $unit-1 0; + width: 100%; + + .step-item { + flex: 1 1 0; + margin-top: 0; + min-height: 1rem; + text-align: center; + position: relative; + + &:not(:first-child)::before { + background: $primary-color; + content: ""; + height: 2px; + left: -50%; + position: absolute; + top: 9px; + width: 100%; + } + + a { + color: $gray-color; + display: inline-block; + padding: 20px 10px 0; + text-decoration: none; + + &::before { + background: $primary-color; + border: $border-width-lg solid $light-color; + border-radius: 50%; + content: ""; + display: block; + height: $unit-3; + left: 50%; + position: absolute; + top: $unit-1; + transform: translateX(-50%); + width: $unit-3; + z-index: $zindex-0; + } + } + + &.active { + a { + &::before { + background: $light-color; + border: $border-width-lg solid $primary-color; + } + } + + & ~ .step-item { + &::before { + background: $border-color; + } + + a { + + &::before { + background: $gray-color-light; + } + } + } + } + } +} diff --git a/src/_tables.scss b/src/_tables.scss new file mode 100644 index 0000000..63a163a --- /dev/null +++ b/src/_tables.scss @@ -0,0 +1,45 @@ +// Tables +.table { + border-collapse: collapse; + border-spacing: 0; + text-align: left; + width: 100%; + + &.table-striped { + tbody { + tr:nth-of-type(odd) { + background: $bg-color; + } + } + } + + &.table-hover { + tbody { + tr { + &:hover { + background: $bg-color-dark; + } + } + } + } + + &, + &.table-striped { + tbody { + tr { + &.active { + background: $bg-color-dark; + } + } + } + } + + td, + th { + border-bottom: $border-width solid $border-color; + padding: $unit-3 $unit-2; + } + th { + border-bottom-width: $border-width-lg; + } +} diff --git a/src/_tabs.scss b/src/_tabs.scss new file mode 100644 index 0000000..e9f9e2e --- /dev/null +++ b/src/_tabs.scss @@ -0,0 +1,62 @@ +// Tabs +.tab { + align-items: center; + border-bottom: $border-width solid $border-color; + display: flex; + flex-wrap: wrap; + list-style: none; + margin: $unit-1 0 ($unit-1 - $border-width) 0; + + .tab-item { + margin-top: 0; + + &.tab-action { + flex: 1 0 auto; + text-align: right; + } + + a { + 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; + text-decoration: none; + &:focus, + &:hover { + color: $link-color; + } + } + &.active a, + a.active { + border-bottom-color: $primary-color; + color: $link-color; + } + } + + &.tab-block { + .tab-item { + flex: 1 0 0; + text-align: center; + + a { + margin: 0; + } + + .badge { + &[data-badge]::after { + position: absolute; + right: -4px; + top: -4px; + transform: translate(0, 0); + } + } + } + } + + &:not(.tab-block) { + .badge { + padding-right: 2px; + } + } +} diff --git a/src/_tiles.scss b/src/_tiles.scss new file mode 100644 index 0000000..384d150 --- /dev/null +++ b/src/_tiles.scss @@ -0,0 +1,38 @@ +// Tiles +.tile { + align-content: space-between; + align-items: flex-start; + display: flex; + + .tile-icon, + .tile-action { + flex: 0 0 auto; + } + .tile-content { + flex: 1 1 auto; + &:not(:first-child) { + padding-left: $unit-2; + } + &:not(:last-child) { + padding-right: $unit-2; + } + } + .tile-title, + .tile-subtitle { + line-height: $line-height; + } + + &.tile-centered { + align-items: center; + + .tile-content { + overflow: hidden; + } + + .tile-title, + .tile-subtitle { + margin-bottom: 0; + @include text-ellipsis(); + } + } +} diff --git a/src/_timelines.scss b/src/_timelines.scss new file mode 100644 index 0000000..88cae04 --- /dev/null +++ b/src/_timelines.scss @@ -0,0 +1,55 @@ +// Timelines +.timeline { + .timeline-item { + display: flex; + margin-bottom: $unit-6; + position: relative; + &::before { + background: $border-color; + content: ""; + height: 100%; + left: 11px; + position: absolute; + top: $unit-6; + width: 2px; + } + + .timeline-left { + flex: 0 0 auto; + } + + .timeline-content { + flex: 1 1 auto; + padding: 2px 0 2px $layout-spacing-lg; + } + + .timeline-icon { + border-radius: 50%; + color: $light-color; + display: block; + height: $unit-6; + text-align: center; + width: $unit-6; + &::before { + border: $border-width-lg solid $primary-color; + border-radius: 50%; + content: ""; + display: block; + height: $unit-2; + left: $unit-2; + position: absolute; + top: $unit-2; + width: $unit-2; + } + + &.icon-lg { + 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.scss b/src/_tooltips.scss new file mode 100644 index 0000000..90cf1ad --- /dev/null +++ b/src/_tooltips.scss @@ -0,0 +1,77 @@ +// Tooltips +.tooltip { + position: relative; + &::after { + background: rgba($dark-color, .9); + border-radius: $border-radius; + bottom: 100%; + color: $light-color; + content: attr(data-tooltip); + display: block; + font-size: $font-size-sm; + left: 50%; + max-width: $control-max-width; + opacity: 0; + overflow: hidden; + padding: $unit-1 $unit-2; + pointer-events: none; + position: absolute; + text-overflow: ellipsis; + transform: translate(-50%, $unit-2); + transition: all .2s ease; + white-space: nowrap; + z-index: $zindex-3; + } + &:focus, + &:hover { + &::after { + opacity: 1; + transform: translate(-50%, -$unit-1); + } + } + &[disabled], + &.disabled { + pointer-events: auto; + } + + &.tooltip-right { + &::after { + bottom: 50%; + left: 100%; + transform: translate(-$unit-1, 50%); + } + &:focus, + &:hover { + &::after { + transform: translate($unit-1, 50%); + } + } + } + &.tooltip-bottom { + &::after { + bottom: auto; + top: 100%; + transform: translate(-50%, -$unit-2); + } + &:focus, + &:hover { + &::after { + transform: translate(-50%, $unit-1); + } + } + } + &.tooltip-left { + &::after { + bottom: 50%; + left: auto; + right: 100%; + transform: translate($unit-2, 50%); + } + &:focus, + &:hover { + &::after { + transform: translate(-$unit-1, 50%); + } + } + } +} diff --git a/src/_typography.scss b/src/_typography.scss new file mode 100644 index 0000000..5999568 --- /dev/null +++ b/src/_typography.scss @@ -0,0 +1,127 @@ +// Typography +// Headings +h1, +h2, +h3, +h4, +h5, +h6 { + color: inherit; + font-weight: 500; + line-height: 1.2; + margin-bottom: .25em; + margin-top: 0; +} +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-weight: 500; +} +h1, +.h1 { + font-size: 2rem; +} +h2, +.h2 { + font-size: 1.6rem; +} +h3, +.h3 { + font-size: 1.4rem; +} +h4, +.h4 { + font-size: 1.2rem; +} +h5, +.h5 { + font-size: 1rem; +} +h6, +.h6 { + font-size: .8rem; +} + +// Paragraphs +p { + line-height: 1.2 * $line-height; + margin: 0 0 $unit-4; +} + +// Semantic text elements +a, +ins, +u { + text-decoration-skip: ink edges; +} + +abbr[title] { + border-bottom: $border-width dotted; + cursor: help; + text-decoration: none; +} + +kbd { + @include label-base(); + @include label-variant($light-color, $dark-color); +} + +mark { + @include label-base(); + @include label-variant($body-font-color, $highlight-color); +} + +// Blockquote +blockquote { + border-left: $border-width-lg solid $border-color; + margin-left: 0; + padding: $unit-2 $unit-4; + + p:last-child { + margin-bottom: 0; + } +} + +// Lists +ul, +ol { + margin: $unit-4 0 $unit-4 $unit-4; + padding: 0; + + ul, + ol { + margin: $unit-4 0 $unit-4 $unit-4; + } + + li { + margin-top: $unit-2; + } +} + +ul { + list-style: disc inside; + + ul { + list-style-type: circle; + } +} + +ol { + list-style: decimal inside; + + ol { + list-style-type: lower-alpha; + } +} + +dl { + dt { + font-weight: bold; + } + dd { + 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/accordions.less b/src/accordions.less deleted file mode 100644 index 810d264..0000000 --- a/src/accordions.less +++ /dev/null @@ -1,34 +0,0 @@ -// Accordions -.accordion { - .accordion-item { - input { - &:checked { - & ~ .accordion-header { - .icon { - transform: rotate(90deg); - - } - } - & ~ .accordion-body { - max-height: 1000px; - } - } - } - - .accordion-header { - display: block; - padding: @unit-1 @unit-2; - - .icon { - transition: all .2s ease; - } - } - - .accordion-body { - margin-bottom: @layout-spacing; - max-height: 0; - overflow: hidden; - transition: max-height .2s ease; - } - } -} diff --git a/src/animations.less b/src/animations.less deleted file mode 100644 index f6b8724..0000000 --- a/src/animations.less +++ /dev/null @@ -1,20 +0,0 @@ -// Animations -@keyframes loading { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -@keyframes slide-down { - 0% { - opacity: 0; - transform: translateY(-@unit-8); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} diff --git a/src/asian.less b/src/asian.less deleted file mode 100644 index a68cb39..0000000 --- a/src/asian.less +++ /dev/null @@ -1,33 +0,0 @@ -// Optimized for East Asian CJK -:lang(zh) { - font-family: @cjk-zh-font-family; -} - -:lang(ja) { - font-family: @cjk-jp-font-family; -} - -:lang(ko) { - font-family: @cjk-ko-font-family; -} - -:lang(zh), -:lang(ja), -.cjk { - ins, - u { - border-bottom: @border-width solid; - text-decoration: none; - } - - del + del, - del + s, - ins + ins, - ins + u, - s + del, - s + s, - u + ins, - u + u { - margin-left: .125em; - } -} diff --git a/src/autocomplete.less b/src/autocomplete.less deleted file mode 100644 index 111ecf6..0000000 --- a/src/autocomplete.less +++ /dev/null @@ -1,41 +0,0 @@ -// Autocomplete -.form-autocomplete { - position: relative; - - .form-autocomplete-input { - align-content: flex-start; - display: flex; - flex-wrap: wrap; - height: auto; - min-height: @unit-8; - padding: @unit-h; - - &.is-focused { - border-color: @primary-color; - .control-shadow(); - } - - .form-input { - border-color: transparent; - box-shadow: none; - display: inline-block; - flex: 1 0 auto; - height: @unit-6; - line-height: @unit-4; - margin: @unit-h; - width: auto; - } - } - - mark { - font-size: 1; - padding: .1em 0; - } - - .menu { - left: 0; - position: absolute; - top: 100%; - width: 100%; - } -} diff --git a/src/avatars.less b/src/avatars.less deleted file mode 100644 index 1fa075a..0000000 --- a/src/avatars.less +++ /dev/null @@ -1,77 +0,0 @@ -// Avatars -.avatar { - .avatar-base(); - background: @primary-color; - border-radius: 50%; - color: fade(@light-color, 85%); - display: inline-block; - font-weight: 300; - line-height: 1; - margin: 0; - position: relative; - vertical-align: middle; - - &.avatar-xs { - .avatar-base(@unit-4); - } - &.avatar-sm { - .avatar-base(@unit-6); - } - &.avatar-lg { - .avatar-base(@unit-12); - } - &.avatar-xl { - .avatar-base(@unit-16); - } - - img { - border-radius: 50%; - height: 100%; - position: relative; - width: 100%; - z-index: @zindex-0; - } - - .avatar-icon, - .avatar-presence { - background: @bg-color-light; - bottom: 14.64%; - height: 50%; - padding: @border-width-lg; - position: absolute; - right: 14.64%; - transform: translate(50%, 50%); - width: 50%; - z-index: @zindex-0 + 1; - } - - .avatar-presence { - background: @gray-color; - box-shadow: 0 0 0 @border-width-lg @light-color; - border-radius: 50%; - height: .5em; - width: .5em; - - &.online { - background: @success-color; - } - - &.busy { - background: @error-color; - } - - &.away { - background: @warning-color; - } - } - - &[data-initial]::before { - color: currentColor; - content: attr(data-initial); - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - z-index: @zindex-0; - } -} diff --git a/src/badges.less b/src/badges.less deleted file mode 100644 index c62df9d..0000000 --- a/src/badges.less +++ /dev/null @@ -1,70 +0,0 @@ -// Badges -.badge { - position: relative; - white-space: nowrap; - - &[data-badge], - &:not([data-badge]) { - &::after { - background: @primary-color; - background-clip: padding-box; - border-radius: .5rem; - box-shadow: 0 0 0 .1rem @bg-color-light; - color: @light-color; - content: attr(data-badge); - display: inline-block; - transform: translate(-.1rem, -.5rem); - } - } - &[data-badge] { - &::after { - font-size: @font-size-sm; - height: 18px; - line-height: 1; - min-width: 18px; - padding: 3px 5px; - text-align: center; - white-space: nowrap; - } - } - &:not([data-badge]), - &[data-badge=''] { - &::after { - height: 6px; - min-width: 6px; - padding: 0; - width: 6px; - } - } - - // Badges for Buttons - &.btn { - &::after { - position: absolute; - top: 0; - right: 0; - transform: translate(50%, -50%); - } - } - - // Badges for Avatars - &.avatar { - &::after { - position: absolute; - top: 14.64%; - right: 14.64%; - transform: translate(50%, -50%); - z-index: @zindex-1; - } - } - - &.avatar-xs { - &::after { - content: ""; - height: @unit-2; - min-width: @unit-2; - padding: 0; - width: @unit-2; - } - } -} diff --git a/src/bars.less b/src/bars.less deleted file mode 100644 index 4c3824a..0000000 --- a/src/bars.less +++ /dev/null @@ -1,71 +0,0 @@ -// Bars -.bar { - background: @bg-color-dark; - border-radius: @border-radius; - display: flex; - flex-wrap: nowrap; - height: @unit-4; - width: 100%; - - &.bar-sm { - height: @unit-1; - } - - // TODO: attr() support - .bar-item { - background: @primary-color; - color: @light-color; - display: block; - font-size: @font-size-sm; - flex-shrink: 0; - 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; - } - &:last-child { - border-bottom-right-radius: @border-radius; - border-top-right-radius: @border-radius; - flex-shrink: 1; - } - } -} - -// Slider bar -.bar-slider { - height: @border-width-lg; - margin: @layout-spacing 0; - position: relative; - - .bar-item { - left: 0; - padding: 0; - position: absolute; - &:not(:last-child):first-child { - background: @bg-color-dark; - z-index: @zindex-0; - } - } - - .bar-slider-btn { - background: @primary-color; - border: 0; - border-radius: 50%; - height: @unit-3; - padding: 0; - position: absolute; - right: 0; - top: 50%; - transform: translate(50%, -50%); - width: @unit-3; - - &:active { - box-shadow: 0 0 0 .1rem @primary-color; - } - } -} diff --git a/src/base.less b/src/base.less deleted file mode 100644 index ba21bee..0000000 --- a/src/base.less +++ /dev/null @@ -1,40 +0,0 @@ -// Base -*, -*::before, -*::after { - box-sizing: inherit; -} - -html { - box-sizing: border-box; - 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; - overflow-x: hidden; - text-rendering: optimizeLegibility; -} - -a { - color: @link-color; - outline: none; - text-decoration: none; - - &:focus { - .control-shadow(); - } - - &:focus, - &:hover, - &:active, - &.active { - color: @link-color-dark; - text-decoration: underline; - } -} diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less deleted file mode 100644 index 0b0f757..0000000 --- a/src/breadcrumbs.less +++ /dev/null @@ -1,29 +0,0 @@ -// Breadcrumbs -.breadcrumb { - list-style: none; - margin: @unit-1 0; - padding: @unit-1 0; - - .breadcrumb-item { - color: @gray-color-dark; - display: inline-block; - margin: 0; - padding: @unit-1 0; - - &:not(:last-child) { - margin-right: @unit-1; - - a { - color: @gray-color-dark; - } - } - - &:not(:first-child) { - &::before { - color: @gray-color-light; - content: "/"; - padding-right: @unit-1; - } - } - } -} diff --git a/src/buttons.less b/src/buttons.less deleted file mode 100644 index 0c15d9e..0000000 --- a/src/buttons.less +++ /dev/null @@ -1,182 +0,0 @@ -// Buttons -.btn { - appearance: none; - background: @bg-color-light; - border: @border-width solid @primary-color; - border-radius: @border-radius; - color: @primary-color; - .control-transition(); - cursor: pointer; - display: inline-block; - font-size: @font-size; - height: @control-size; - line-height: @line-height; - outline: none; - 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(); - } - &:focus, - &:hover { - 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; - text-decoration: none; - &.loading { - &::after { - border-bottom-color: @light-color; - border-left-color: @light-color; - } - } - } - &[disabled], - &:disabled, - &.disabled { - cursor: default; - opacity: .5; - pointer-events: none; - } - - // Button Primary - &.btn-primary { - 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; - } - &:active, - &.active { - 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; - } - } - } - - // Button Link - &.btn-link { - background: transparent; - border-color: transparent; - color: @link-color; - &:focus, - &:hover, - &:active, - &.active { - 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; - } - - &.btn-lg { - font-size: @font-size-lg; - height: @control-size-lg; - padding: @control-padding-v-lg @control-padding-h * 1.5; - } - - // Button Block - &.btn-block { - display: block; - width: 100%; - } - - // Button Action - &.btn-action { - width: @control-size; - padding-left: 0; - padding-right: 0; - - &.btn-sm { - width: @control-size-sm; - } - - &.btn-lg { - width: @control-size-lg; - } - } - - // Button Clear - &.btn-clear { - background: transparent; - border: 0; - color: currentColor; - 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; - - &:hover { - opacity: .85; - } - - &::before { - content: "\2715"; - } - } -} - -// Button groups -.btn-group { - display: inline-flex; - flex-wrap: wrap; - - .btn { - flex: 1 0 auto; - &:first-child:not(:last-child) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - } - &:not(:first-child):not(:last-child) { - border-radius: 0; - margin-left: -@border-width; - } - &:last-child:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: -@border-width; - } - &:focus, - &:hover, - &:active, - &.active { - z-index: @zindex-0; - } - } - - &.btn-group-block { - display: flex; - - .btn { - flex: 1 0 0; - } - } -} diff --git a/src/calendars.less b/src/calendars.less deleted file mode 100644 index e5764ea..0000000 --- a/src/calendars.less +++ /dev/null @@ -1,206 +0,0 @@ -// Calendars -.calendar { - 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; - display: flex; - font-size: @font-size-lg; - padding: @layout-spacing; - } - - .calendar-header, - .calendar-body { - display: flex; - flex-wrap: wrap; - justify-content: center; - padding: @layout-spacing 0; - - .calendar-date { - flex: 0 0 14.28%; // 7 calendar-items each row - max-width: 14.28%; - } - } - - .calendar-header { - background: @bg-color; - border-bottom: @border-width solid @border-color; - color: @gray-color; - font-size: @font-size-sm; - } - - .calendar-body { - color: @gray-color-dark; - } - - .calendar-date { - border: 0; - padding: @unit-1; - - .date-item { - appearance: none; - background: transparent; - border: @border-width solid transparent; - border-radius: 50%; - color: @gray-color-dark; - .control-transition(); - cursor: pointer; - height: @unit-7; - line-height: @unit-5; - outline: none; - padding: @unit-h; - position: relative; - text-align: center; - text-decoration: none; - vertical-align: middle; - white-space: nowrap; - width: @unit-7; - - &.date-today { - border-color: @secondary-color-dark; - color: @primary-color; - } - - &:focus { - .control-shadow(); - } - - &:focus, - &:hover { - 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; - } - - // Calendar badge support - &.badge { - &::after { - position: absolute; - top: 3px; - right: 3px; - transform: translate(50%, -50%); - } - } - } - - &.disabled .date-item, - &.disabled .calendar-event, - .date-item:disabled, - .calendar-event:disabled { - cursor: default; - opacity: .25; - pointer-events: none; - } - } - - .calendar-range { - position: relative; - - &::before { - background: @secondary-color; - content: ""; - height: @unit-7; - left: 0; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - } - &.range-start { - &::before { - left: 50%; - } - } - &.range-end { - &::before { - right: 50%; - } - } - - .date-item { - color: @primary-color; - } - } - - &.calendar-lg { - .calendar-body { - padding: 0; - - .calendar-date { - border-bottom: @border-width solid @border-color; - border-right: @border-width solid @border-color; - display: flex; - flex-direction: column; - height: 5.5rem; - padding: 0; - - &:nth-child(7n) { - border-right: 0; - } - &:nth-last-child(-n+7) { - border-bottom: 0; - } - } - } - - .date-item { - align-self: flex-end; - height: @unit-7; - margin-right: @layout-spacing-sm; - margin-top: @layout-spacing-sm; - } - - .calendar-range { - &::before { - top: 19px; - } - &.range-start { - &::before { - left: auto; - width: 19px; - } - } - &.range-end { - &::before { - right: 19px; - } - } - } - - .calendar-events { - flex-grow: 1; - line-height: 1; - overflow-y: auto; - padding: @layout-spacing-sm; - } - - .calendar-event { - background: @secondary-color; - border-radius: @border-radius; - color: @primary-color; - font-size: @font-size-sm; - display: block; - 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.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/carousels.less b/src/carousels.less deleted file mode 100644 index 276bc1f..0000000 --- a/src/carousels.less +++ /dev/null @@ -1,124 +0,0 @@ -// Carousels -.carousel { - background: @bg-color; - display: block; - overflow: hidden; - position: relative; - width: 100%; - - .carousel-container { - height: 100%; - left: 0; - position: relative; - &::before { - content: ""; - display: block; - padding-bottom: 56.25%; - } - - .carousel-item { - animation: carousel-slideout 1s ease-in-out 1; - height: 100%; - left: 0; - margin: 0; - opacity: 0; - position: absolute; - top: 0; - width: 100%; - - &:hover { - .item-prev, - .item-next { - opacity: 1; - } - } - } - - .item-prev, - .item-next { - 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; - } - .item-prev { - left: 1rem; - } - .item-next { - right: 1rem; - } - } - - .carousel-locator { - &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1), - &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2), - &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3), - &: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; - } - &: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; - } - } - - .carousel-nav { - bottom: @layout-spacing; - display: flex; - justify-content: center; - left: 50%; - position: absolute; - transform: translateX(-50%); - width: 10rem; - z-index: @zindex-2; - - .nav-item { - color: fade(@gray-color-light, 50%); - display: block; - flex: 1 0 auto; - height: @unit-8; - margin: @unit-1; - max-width: 2.5rem; - position: relative; - - &::before { - background: currentColor; - content: ""; - display: block; - height: @border-width-lg; - position: absolute; - top: .5rem; - width: 100%; - } - } - } -} - -@keyframes carousel-slidein { - 0% { - transform: translateX(100%); - } - 100% { - transform: translateX(0); - } -} - -@keyframes carousel-slideout { - 0% { - opacity: 1; - transform: translateX(0); - } - 100% { - opacity: 1; - transform: translateX(-50%); - } -} 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/comparison-sliders.less b/src/comparison-sliders.less deleted file mode 100644 index 169caf4..0000000 --- a/src/comparison-sliders.less +++ /dev/null @@ -1,114 +0,0 @@ -// Image comparison slider -// Credit: http://codepen.io/solipsistacp/pen/Gpmaq -.comparison-slider { - height: 50vh; - overflow: hidden; - position: relative; - width: 100%; - - .comparison-before, - .comparison-after { - height: 100%; - left: 0; - margin: 0; - overflow: hidden; - position: absolute; - top: 0; - - img { - height: 100%; - object-fit: none; - object-position: left center; - position: absolute; - width: 100%; - } - } - - .comparison-before { - width: 100%; - z-index: 1; - - .comparison-label { - right: @unit-4; - } - } - - .comparison-after { - max-width: 100%; - min-width: 0; - z-index: 2; - - &::before { - background: transparent; - content: ""; - cursor: default; - height: 100%; - left: 0; - position: absolute; - right: @unit-4; - top: 0; - z-index: @zindex-0; - } - - &::after { - background: currentColor; - border-radius: 50%; - box-shadow: 0 -5px, 0 5px; - color: @light-color; - content: ""; - height: 3px; - position: absolute; - right: @unit-2; - top: 50%; - transform: translate(50%, -50%); - width: 3px; - } - - .comparison-label { - left: @unit-4; - } - } - - .comparison-resizer { - animation: first-run 1.5s 1 ease-in-out; - cursor: ew-resize; - height: @unit-4; - left: 0; - max-width: 100%; - min-width: @unit-4; - opacity: 0; - outline: none; - position: relative; - resize: horizontal; - top: 50%; - transform: translateY(-50%) scaleY(30); - width: 0; - } - - .comparison-label { - background: fade(@dark-color, 50%); - bottom: @unit-4; - color: @light-color; - padding: @unit-1 @unit-2; - position: absolute; - user-select: none; - } -} - -@keyframes first-run { - 0% { - width: 0; - } - 25% { - width: @unit-12; - } - 50% { - width: @unit-4; - } - 75% { - width: @unit-6; - } - 100% { - width: 0; - } -} diff --git a/src/dropdowns.less b/src/dropdowns.less deleted file mode 100644 index c1684a0..0000000 --- a/src/dropdowns.less +++ /dev/null @@ -1,36 +0,0 @@ -// Dropdown -.dropdown { - display: inline-block; - position: relative; - - .menu { - animation: slide-down .15s ease 1; - display: none; - left: 0; - max-height: 50vh; - overflow-y: auto; - position: absolute; - top: 100%; - } - - &.dropdown-right { - .menu { - left: auto; - right: 0; - } - } - - &.active .menu, - .dropdown-toggle:focus + .menu, - .menu:hover { - display: block; - } - - // 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; - } - } -} 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/filters.less b/src/filters.less deleted file mode 100644 index e417081..0000000 --- a/src/filters.less +++ /dev/null @@ -1,29 +0,0 @@ -// Filters -.filter { - .filter-nav { - margin: @layout-spacing 0; - } - - .filter-body { - display: flex; - flex-wrap: wrap; - } - - .filter-tag { - &#tag-all:checked ~ .filter-nav .chip[for="tag-all"], - &#tag-action:checked ~ .filter-nav .chip[for="tag-action"], - &#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; - } - - &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]), - &#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]), - &#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]), - &#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) { - display: none; - } - } -} diff --git a/src/forms.less b/src/forms.less deleted file mode 100644 index 7ed91e6..0000000 --- a/src/forms.less +++ /dev/null @@ -1,514 +0,0 @@ -// Forms -.form-group { - &:not(:last-child) { - margin-bottom: @layout-spacing; - } -} - -fieldset { - margin-bottom: @layout-spacing-lg; -} - -legend { - font-size: @font-size-lg; - font-weight: 500; - margin-bottom: @layout-spacing-lg; -} - -// Form element: Label -.form-label { - display: block; - padding: @control-padding-v + @border-width 0; - - &.label-sm { - padding: @control-padding-v-sm + @border-width 0; - } - - &.label-lg { - padding: @control-padding-v-lg + @border-width 0; - } -} - -// Form element: Input -.form-input { - appearance: none; - background: @bg-color-light; - background-image: none; - border: @border-width solid @border-color-dark; - border-radius: @border-radius; - color: @body-font-color; - .control-transition(); - display: block; - font-size: @font-size; - height: @control-size; - line-height: @line-height; - max-width: 100%; - outline: none; - padding: @control-padding-v @control-padding-h; - position: relative; - width: 100%; - &:focus { - border-color: @primary-color; - .control-shadow(); - } - &::placeholder { - color: @gray-color; - } - - // Input sizes - &.input-sm { - 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; - } - - &.input-inline { - display: inline-block; - vertical-align: middle; - width: auto; - } - - // Textarea - textarea& { - height: auto; - } - - // Input types - &[type="file"] { - height: auto; - } -} - -// Form element: Input hint -.form-input-hint { - color: @gray-color; - font-size: @font-size-sm; - margin-top: @unit-1; - - .has-success &, - .is-success + & { - color: @success-color; - } - - .has-error &, - .is-error + & { - color: @error-color; - } -} - -// Form element: Select -.form-select { - appearance: none; - border: @border-width solid @border-color-dark; - border-radius: @border-radius; - color: inherit; - font-size: @font-size; - height: @control-size; - line-height: @line-height; - outline: none; - padding: @control-padding-v @control-padding-h; - vertical-align: middle; - width: 100%; - - &[size], - &[multiple] { - height: auto; - - option { - 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; - } - &:focus { - border-color: @primary-color; - .control-shadow(); - } - &::-ms-expand { - display: none; - } - - // 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; - } - - &.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; - } -} - -// Form Icons -.has-icon-left, -.has-icon-right { - position: relative; - - .form-icon { - height: @control-icon-size; - margin: 0 @control-padding-v; - position: absolute; - top: 50%; - transform: translateY(-50%); - width: @control-icon-size; - } -} - -.has-icon-left { - .form-icon { - left: @border-width; - } - - .form-input { - padding-left: @control-icon-size + @control-padding-v * 2; - } -} - -.has-icon-right { - .form-icon { - right: @border-width; - } - - .form-input { - padding-right: @control-icon-size + @control-padding-v * 2; - } -} - -// Form element: Checkbox and Radio -.form-checkbox, -.form-radio, -.form-switch { - display: inline-block; - line-height: @line-height; - padding: (@control-size-sm - @line-height) / 2 (@control-icon-size + @control-padding-h); - position: relative; - - input { - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - width: 1px; - &:focus + .form-icon { - border-color: @primary-color; - .control-shadow(); - } - &:checked + .form-icon { - background: @primary-color; - border-color: @primary-color; - } - } - - .form-icon { - border: @border-width solid @border-color-dark; - .control-transition(); - cursor: pointer; - display: inline-block; - position: absolute; - } -} - -.form-checkbox, -.form-radio { - .form-icon { - background: @bg-color-light; - height: @control-icon-size; - left: 0; - top: (@control-size-sm - @control-icon-size) / 2; - width: @control-icon-size; - } - - input { - &:active + .form-icon { - background: @bg-color-dark; - } - } -} -.form-checkbox { - .form-icon { - border-radius: @border-radius; - } - - input { - &:checked + .form-icon { - &::before { - background-clip: padding-box; - border: @border-width-lg solid @light-color; - border-left-width: 0; - border-top-width: 0; - content: ""; - height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; - transform: rotate(45deg); - width: 6px; - } - } - &:indeterminate + .form-icon { - background: @primary-color; - border-color: @primary-color; - &::before { - background: @bg-color-light; - content: ""; - height: 2px; - left: 50%; - margin-left: -5px; - margin-top: -1px; - position: absolute; - top: 50%; - width: 10px; - } - } - } -} -.form-radio { - .form-icon { - border-radius: @control-icon-size / 2; - } - - input { - &:checked + .form-icon { - &::before { - background: @bg-color-light; - border-radius: @border-radius; - content: ""; - height: 4px; - left: 50%; - margin-left: -2px; - margin-top: -2px; - position: absolute; - top: 50%; - width: 4px; - } - } - } -} - -// Form element: Switch -.form-switch { - padding-left: (@unit-8 + @control-padding-h); - - .form-icon { - background: @gray-color-light; - background-clip: padding-box; - 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; - &::before { - background: @bg-color-light; - border-radius: @unit-2; - content: ""; - display: block; - height: @unit-4; - left: 0; - position: absolute; - top: 0; - .control-transition(); - width: @unit-4; - } - } - - input { - &:checked + .form-icon { - &::before { - left: 14px; - } - } - &:active + .form-icon { - &::before { - background: @bg-color; - } - } - } -} - -// Form element: Input groups -.input-group { - 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; - - &.addon-sm { - 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; - } - } - - .form-input, - .form-select { - flex: 1 1 auto; - } - - .input-group-btn { - z-index: @zindex-0; - } - - .form-input, - .form-select, - .input-group-addon, - .input-group-btn { - &:first-child:not(:last-child) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - } - &:not(:first-child):not(:last-child) { - border-radius: 0; - margin-left: -@border-width; - } - &:last-child:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: -@border-width; - } - &:focus { - z-index: @zindex-0 + 1; - } - } - - .form-select { - width: auto; - } - - &.input-inline { - display: inline-flex; - } -} - -// Form validation states -.form-input, -.form-select { - .has-success &, - &.is-success { - border-color: @success-color; - &:focus { - .control-shadow(@success-color); - } - } - - .has-error &, - &.is-error { - border-color: @error-color; - &:focus { - .control-shadow(@error-color); - } - } -} - -.form-checkbox, -.form-radio, -.form-switch { - .has-error &, - &.is-error { - .form-icon { - border-color: @error-color; - } - - input { - &:checked + .form-icon { - background: @error-color; - border-color: @error-color; - } - - &:focus + .form-icon { - border-color: @error-color; - .control-shadow(@error-color); - } - } - } -} - -// validation based on :placeholder-shown (Edge doesn't support it yet) -.form-input { - &:not(:placeholder-shown) { - &:invalid { - border-color: @error-color; - &:focus { - .control-shadow(@error-color); - } - - & + .form-input-hint { - color: @error-color; - } - } - } -} - -// Form disabled and readonly -.form-input, -.form-select { - &:disabled, - &.disabled { - background-color: @bg-color-dark; - cursor: not-allowed; - opacity: .5; - } -} - -.form-input { - &[readonly] { - background-color: @bg-color; - } -} - -input { - &:disabled, - &.disabled { - & + .form-icon { - background: @bg-color-dark; - cursor: not-allowed; - opacity: .5; - } - } -} - -.form-switch { - input { - &:disabled, - &.disabled { - & + .form-icon::before { - background: @bg-color-light; - } - } - } -} - -// Form Horizontal -.form-horizontal { - padding: @layout-spacing; - - .form-group { - display: flex; - } - - .form-checkbox, - .form-radio, - .form-switch { - margin: (@control-size - @control-size-sm) / 2 0; - } -} diff --git a/src/icons.less b/src/icons.less deleted file mode 100644 index ca7672d..0000000 --- a/src/icons.less +++ /dev/null @@ -1,656 +0,0 @@ -// CSS Icons -@icon-border-width: @border-width-lg; - -.icon { - box-sizing: border-box; - display: inline-block; - font-size: inherit; - font-style: normal; - height: 1em; - position: relative; - text-indent: -9999px; - vertical-align: middle; - width: 1em; - &::before, - &::after { - display: block; - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - } -} - -// Icon arrows -.icon-arrow-down, -.icon-arrow-left, -.icon-arrow-right, -.icon-arrow-up, -.icon-downward, -.icon-back, -.icon-forward, -.icon-upward { - &::before { - border: @icon-border-width solid currentColor; - border-bottom: 0; - border-right: 0; - content: ""; - height: .65em; - width: .65em; - } -} - -.icon-arrow-down { - &::before { - transform: translate(-50%, -75%) rotate(225deg); - } -} - -.icon-arrow-left { - &::before { - transform: translate(-25%, -50%) rotate(-45deg); - } -} - -.icon-arrow-right { - &::before { - transform: translate(-75%, -50%) rotate(135deg); - } -} - -.icon-arrow-up { - &::before { - transform: translate(-50%, -25%) rotate(45deg); - } -} - -.icon-back, -.icon-forward { - &::after { - background: currentColor; - content: ""; - height: @icon-border-width; - width: .8em; - } -} - -.icon-downward, -.icon-upward { - &::after { - background: currentColor; - content: ""; - height: .8em; - width: @icon-border-width; - } -} - -.icon-back { - &::after { - left: 55%; - } - &::before { - transform: translate(-50%, -50%) rotate(-45deg); - } -} - -.icon-downward { - &::after { - top: 45%; - } - &::before { - transform: translate(-50%, -50%) rotate(-135deg); - } -} - -.icon-forward { - &::after { - left: 45%; - } - &::before { - transform: translate(-50%, -50%) rotate(135deg); - } -} - -.icon-upward { - &::after { - top: 55%; - } - &::before { - transform: translate(-50%, -50%) rotate(45deg); - } -} - -// Icon caret -.icon-caret { - &::before { - border-top: .3em solid currentColor; - border-right: .3em solid transparent; - border-left: .3em solid transparent; - content: ""; - height: 0; - width: 0; - transform: translate(-50%, -25%); - } -} - -// Icon menu -.icon-menu { - &::before { - background: currentColor; - box-shadow: 0 -.35em, 0 .35em; - content: ""; - height: @icon-border-width; - width: 100%; - } -} - -// Icon apps -.icon-apps { - &::before { - background: currentColor; - box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em; - content: ""; - height: 3px; - width: 3px; - } -} - -// Icon resize -.icon-resize-horiz, -.icon-resize-vert { - &::before, - &::after { - border: @icon-border-width solid currentColor; - border-bottom: 0; - border-right: 0; - content: ""; - height: .45em; - width: .45em; - } - &::before { - transform: translate(-50%, -90%) rotate(45deg); - } - &::after { - transform: translate(-50%, -10%) rotate(225deg); - } -} - -.icon-resize-horiz { - &::before { - transform: translate(-90%, -50%) rotate(-45deg); - } - &::after { - transform: translate(-10%, -50%) rotate(135deg); - } -} - -// Icon more -.icon-more-horiz, -.icon-more-vert { - &::before { - background: currentColor; - box-shadow: -.4em 0, .4em 0; - border-radius: 50%; - content: ""; - height: 3px; - width: 3px; - } -} -.icon-more-vert { - &::before { - box-shadow: 0 -.4em, 0 .4em; - } -} - -// Icon plus, minus, cross -.icon-plus, -.icon-minus, -.icon-cross { - &::before { - background: currentColor; - content: ""; - height: @icon-border-width; - width: 100%; - } -} -.icon-plus, -.icon-cross { - &::after { - background: currentColor; - content: ""; - height: 100%; - width: @icon-border-width; - } -} -.icon-cross { - &::before { - width: 100%; - } - &::after { - height: 100%; - } - &::before, - &::after { - transform: translate(-50%, -50%) rotate(45deg); - } -} - -// Icon check -.icon-check { - &::before { - border: @icon-border-width solid currentColor; - border-right: 0; - border-top: 0; - content: ""; - height: .5em; - width: .9em; - transform: translate(-50%, -75%) rotate(-45deg); - } -} - -// Icon stop -.icon-stop { - border: @icon-border-width solid currentColor; - border-radius: 50%; - &::before { - background: currentColor; - content: ""; - height: @icon-border-width; - transform: translate(-50%, -50%) rotate(45deg); - width: 1em; - } -} - -// Icon shutdown -.icon-shutdown { - border: @icon-border-width solid currentColor; - border-radius: 50%; - border-top-color: transparent; - &::before { - background: currentColor; - content: ""; - height: .5em; - top: .1em; - width: @icon-border-width; - } -} - -// Icon refresh -.icon-refresh { - &::before { - border: @icon-border-width solid currentColor; - border-radius: 50%; - border-right-color: transparent; - content: ""; - height: 1em; - width: 1em; - } - &::after { - border: .2em solid currentColor; - border-top-color: transparent; - border-left-color: transparent; - content: ""; - height: 0; - left: 80%; - top: 20%; - width: 0; - } -} - -// Icon search -.icon-search { - &::before { - border: @icon-border-width solid currentColor; - border-radius: 50%; - content: ""; - height: .75em; - left: 5%; - top: 5%; - transform: translate(0, 0) rotate(45deg); - width: .75em; - } - &::after { - background: currentColor; - content: ""; - height: @icon-border-width; - left: 80%; - top: 80%; - transform: translate(-50%, -50%) rotate(45deg); - width: .4em; - } -} - -// Icon edit -.icon-edit { - &::before { - border: @icon-border-width solid currentColor; - content: ""; - height: .4em; - transform: translate(-40%, -60%) rotate(-45deg); - width: .85em; - } - &::after { - border: .15em solid currentColor; - border-top-color: transparent; - border-right-color: transparent; - content: ""; - height: 0; - left: 5%; - top: 95%; - transform: translate(0, -100%); - width: 0; - } -} - -// Icon delete -.icon-delete { - &::before { - border: @icon-border-width solid currentColor; - border-bottom-left-radius: @border-radius; - border-bottom-right-radius: @border-radius; - border-top: 0; - content: ""; - height: .75em; - top: 60%; - width: .75em; - } - &::after { - background: currentColor; - box-shadow: -.25em .2em, .25em .2em; - content: ""; - 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-right: 0; - border-top: 0; - &::before { - border: @icon-border-width solid currentColor; - border-left: 0; - border-top: 0; - content: ""; - height: .4em; - left: 100%; - top: .25em; - transform: translate(-125%, -50%) rotate(-45deg); - width: .4em; - } - &::after { - border: @icon-border-width solid currentColor; - border-bottom: 0; - border-right: 0; - border-radius: 75% 0; - content: ""; - height: .5em; - width: .6em; - } -} - -// Icon flag -.icon-flag { - &::before { - background: currentColor; - content: ""; - height: 1em; - left: 15%; - width: @icon-border-width; - } - &::after { - border: @icon-border-width solid currentColor; - border-bottom-right-radius: @border-radius; - border-left: 0; - border-top-right-radius: @border-radius; - content: ""; - height: .65em; - top: 35%; - left: 60%; - width: .8em; - } -} - -// Icon bookmark -.icon-bookmark { - &::before { - border: @icon-border-width solid currentColor; - border-bottom: 0; - 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-bottom: 0; - border-left: 0; - border-radius: @border-radius; - content: ""; - height: .5em; - transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); - width: .5em; - } -} - -// Icon download & upload -.icon-download, -.icon-upload { - border-bottom: @icon-border-width solid currentColor; - &::before { - border: @icon-border-width solid currentColor; - border-bottom: 0; - border-right: 0; - content: ""; - height: .5em; - width: .5em; - transform: translate(-50%, -60%) rotate(-135deg); - } - &::after { - background: currentColor; - content: ""; - height: .6em; - top: 40%; - width: @icon-border-width; - } -} - -.icon-upload { - &::before { - transform: translate(-50%, -60%) rotate(45deg); - } - &::after { - top: 50%; - } -} - -// Icon time -.icon-time { - border: @icon-border-width solid currentColor; - border-radius: 50%; - &::before { - background: currentColor; - content: ""; - height: .4em; - transform: translate(-50%, -75%); - width: @icon-border-width; - } - &::after { - background: currentColor; - content: ""; - height: .3em; - transform: translate(-50%, -75%) rotate(90deg); - transform-origin: 50% 90%; - width: @icon-border-width; - } -} - -// Icon mail -.icon-mail { - &::before { - border: @icon-border-width solid currentColor; - border-radius: @border-radius; - content: ""; - height: .8em; - width: 1em; - } - &::after { - border: @icon-border-width solid currentColor; - border-right: 0; - border-top: 0; - content: ""; - height: .5em; - transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); - width: .5em; - } -} - -// Icon people -.icon-people { - &::before { - border: @icon-border-width solid currentColor; - border-radius: 50%; - content: ""; - height: .45em; - top: 25%; - width: .45em; - } - &::after { - border: @icon-border-width solid currentColor; - border-radius: 50% 50% 0 0; - content: ""; - height: .4em; - top: 75%; - width: .9em; - } -} - -// Icon message -.icon-message { - border: @icon-border-width solid currentColor; - border-bottom: 0; - border-radius: @border-radius; - border-right: 0; - &::before { - border: @icon-border-width solid currentColor; - border-left: 0; - border-bottom-right-radius: @border-radius; - border-top: 0; - content: ""; - height: .8em; - left: 65%; - top: 40%; - width: .7em; - } - &::after { - background: currentColor; - border-radius: @border-radius; - content: ""; - height: .3em; - left: 10%; - top: 100%; - transform: translate(0, -90%) rotate(45deg); - width: @icon-border-width; - } -} - -// Icon photo -.icon-photo { - border: @icon-border-width solid currentColor; - border-radius: @border-radius; - &::before { - border: @icon-border-width solid currentColor; - border-radius: 50%; - content: ""; - height: .25em; - left: 35%; - top: 35%; - width: .25em; - } - &::after { - border: @icon-border-width solid currentColor; - border-bottom: 0; - border-left: 0; - content: ""; - height: .5em; - left: 60%; - transform: translate(-50%, 25%) rotate(-45deg); - width: .5em; - } -} - -// Icon link -.icon-link { - &::before, - &::after { - border: @icon-border-width solid currentColor; - border-radius: 5em 0 0 5em; - border-right: 0; - content: ""; - height: .5em; - width: .75em; - } - &::before { - transform: translate(-70%, -45%) rotate(-45deg); - } - &::after { - transform: translate(-30%, -55%) rotate(135deg); - } -} - -// Icon location -.icon-location { - &::before { - border: @icon-border-width solid currentColor; - border-radius: 50% 50% 50% 0; - content: ""; - height: .8em; - transform: translate(-50%, -60%) rotate(-45deg); - width: .8em; - } - &::after { - border: @icon-border-width solid currentColor; - border-radius: 50%; - content: ""; - height: .2em; - transform: translate(-50%, -80%); - width: .2em; - } -} - -// Icon emoji -.icon-emoji { - border: @icon-border-width solid currentColor; - border-radius: 50%; - &::before { - border-radius: 50%; - box-shadow: -.17em -.15em, .17em -.15em; - content: ""; - height: .1em; - width: .1em; - } - &::after { - border: @icon-border-width solid currentColor; - border-bottom-color: transparent; - border-radius: 50%; - border-right-color: transparent; - content: ""; - height: .5em; - transform: translate(-50%, -40%) rotate(-135deg); - width: .5em; - } -} - -// Component icon support -.accordion, -.btn, -.toast, -.menu { - .icon { - vertical-align: -10%; - } -} 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/layout.less b/src/layout.less deleted file mode 100644 index 7fd2c60..0000000 --- a/src/layout.less +++ /dev/null @@ -1,422 +0,0 @@ -// Layout -.container { - margin-left: auto; - margin-right: auto; - padding-left: @layout-spacing; - padding-right: @layout-spacing; - width: 100%; - &:extend(.clearfix all); - - &.grid-xl { - max-width: @size-xl + 2 * @layout-spacing * @html-font-size; - } - - &.grid-lg { - max-width: @size-lg + 2 * @layout-spacing * @html-font-size; - } - - &.grid-md { - max-width: @size-md + 2 * @layout-spacing * @html-font-size; - } - - &.grid-sm { - max-width: @size-sm + 2 * @layout-spacing * @html-font-size; - } - - &.grid-xs { - max-width: @size-xs + 2 * @layout-spacing * @html-font-size; - } -} - -// Responsive breakpoint system -.show-xs, -.show-sm, -.show-md, -.show-lg, -.show-xl { - display: none !important; -} - -// Responsive grid system -.columns { - display: flex; - flex-wrap: wrap; - margin-left: -@layout-spacing; - margin-right: -@layout-spacing; - - &.col-gapless { - margin-left: 0; - margin-right: 0; - - & > .column { - padding-left: 0; - padding-right: 0; - } - } - &.col-oneline { - flex-wrap: nowrap; - overflow-x: auto; - } -} -.column { - flex: 1; - max-width: 100%; - padding-left: @layout-spacing; - padding-right: @layout-spacing; - - &.col-12, - &.col-11, - &.col-10, - &.col-9, - &.col-8, - &.col-7, - &.col-6, - &.col-5, - &.col-4, - &.col-3, - &.col-2, - &.col-1 { - flex: none; - } -} -.col-12 { - width: 100%; -} -.col-11 { - width: 91.66666667%; -} -.col-10 { - width: 83.33333333%; -} -.col-9 { - width: 75%; -} -.col-8 { - width: 66.66666667%; -} -.col-7 { - width: 58.33333333%; -} -.col-6 { - width: 50%; -} -.col-5 { - width: 41.66666667%; -} -.col-4 { - width: 33.33333333%; -} -.col-3 { - width: 25%; -} -.col-2 { - width: 16.66666667%; -} -.col-1 { - width: 8.33333333%; -} -.col-auto { - flex: 0 0 auto; - max-width: none; - width: auto; -} -.col-mx-auto { - margin-left: auto; - margin-right: auto; -} -.col-ml-auto { - margin-left: auto; -} -.col-mr-auto { - margin-right: auto; -} -@media screen and (max-width: @size-xl ) { - .col-xl-12, - .col-xl-11, - .col-xl-10, - .col-xl-9, - .col-xl-8, - .col-xl-7, - .col-xl-6, - .col-xl-5, - .col-xl-4, - .col-xl-3, - .col-xl-2, - .col-xl-1 { - flex: none; - } - .col-xl-12 { - width: 100%; - } - .col-xl-11 { - width: 91.66666667%; - } - .col-xl-10 { - width: 83.33333333%; - } - .col-xl-9 { - width: 75%; - } - .col-xl-8 { - width: 66.66666667%; - } - .col-xl-7 { - width: 58.33333333%; - } - .col-xl-6 { - width: 50%; - } - .col-xl-5 { - width: 41.66666667%; - } - .col-xl-4 { - width: 33.33333333%; - } - .col-xl-3 { - width: 25%; - } - .col-xl-2 { - width: 16.66666667%; - } - .col-xl-1 { - width: 8.33333333%; - } - .hide-xl { - display: none !important; - } - .show-xl { - display: block !important; - } -} -@media screen and (max-width: @size-lg ) { - .col-lg-12, - .col-lg-11, - .col-lg-10, - .col-lg-9, - .col-lg-8, - .col-lg-7, - .col-lg-6, - .col-lg-5, - .col-lg-4, - .col-lg-3, - .col-lg-2, - .col-lg-1 { - flex: none; - } - .col-lg-12 { - width: 100%; - } - .col-lg-11 { - width: 91.66666667%; - } - .col-lg-10 { - width: 83.33333333%; - } - .col-lg-9 { - width: 75%; - } - .col-lg-8 { - width: 66.66666667%; - } - .col-lg-7 { - width: 58.33333333%; - } - .col-lg-6 { - width: 50%; - } - .col-lg-5 { - width: 41.66666667%; - } - .col-lg-4 { - width: 33.33333333%; - } - .col-lg-3 { - width: 25%; - } - .col-lg-2 { - width: 16.66666667%; - } - .col-lg-1 { - width: 8.33333333%; - } - .hide-lg { - display: none !important; - } - .show-lg { - display: block !important; - } -} -@media screen and (max-width: @size-md ) { - .col-md-12, - .col-md-11, - .col-md-10, - .col-md-9, - .col-md-8, - .col-md-7, - .col-md-6, - .col-md-5, - .col-md-4, - .col-md-3, - .col-md-2, - .col-md-1 { - flex: none; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } - .hide-md { - display: none !important; - } - .show-md { - display: block !important; - } -} -@media screen and (max-width: @size-sm ) { - .col-sm-12, - .col-sm-11, - .col-sm-10, - .col-sm-9, - .col-sm-8, - .col-sm-7, - .col-sm-6, - .col-sm-5, - .col-sm-4, - .col-sm-3, - .col-sm-2, - .col-sm-1 { - flex: none; - } - .col-sm-12 { - width: 100%; - } - .col-sm-11 { - width: 91.66666667%; - } - .col-sm-10 { - width: 83.33333333%; - } - .col-sm-9 { - width: 75%; - } - .col-sm-8 { - width: 66.66666667%; - } - .col-sm-7 { - width: 58.33333333%; - } - .col-sm-6 { - width: 50%; - } - .col-sm-5 { - width: 41.66666667%; - } - .col-sm-4 { - width: 33.33333333%; - } - .col-sm-3 { - width: 25%; - } - .col-sm-2 { - width: 16.66666667%; - } - .col-sm-1 { - width: 8.33333333%; - } - .hide-sm { - display: none !important; - } - .show-sm { - display: block !important; - } -} -@media screen and (max-width: @size-xs) { - .col-xs-12, - .col-xs-11, - .col-xs-10, - .col-xs-9, - .col-xs-8, - .col-xs-7, - .col-xs-6, - .col-xs-5, - .col-xs-4, - .col-xs-3, - .col-xs-2, - .col-xs-1 { - flex: none; - } - .col-xs-12 { - width: 100%; - } - .col-xs-11 { - width: 91.66666667%; - } - .col-xs-10 { - width: 83.33333333%; - } - .col-xs-9 { - width: 75%; - } - .col-xs-8 { - width: 66.66666667%; - } - .col-xs-7 { - width: 58.33333333%; - } - .col-xs-6 { - width: 50%; - } - .col-xs-5 { - width: 41.66666667%; - } - .col-xs-4 { - width: 33.33333333%; - } - .col-xs-3 { - width: 25%; - } - .col-xs-2 { - width: 16.66666667%; - } - .col-xs-1 { - width: 8.33333333%; - } - .hide-xs { - display: none !important; - } - .show-xs { - display: block !important; - } -} diff --git a/src/media.less b/src/media.less deleted file mode 100644 index a55b8cb..0000000 --- a/src/media.less +++ /dev/null @@ -1,70 +0,0 @@ -// Media -.img-responsive { - display: block; - height: auto; - max-width: 100%; -} - -// object-fit support is coming to Microsoft Edge -// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/ -.img-fit-cover { - object-fit: cover; -} - -.img-fit-contain { - object-fit: contain; -} - -// Video responsive -.video-responsive { - display: block; - overflow: hidden; - padding: 0; - position: relative; - width: 100%; - - &::before { - content: ""; - display: block; - padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16 - } - - iframe, - object, - embed { - border: 0; - bottom: 0; - height: 100%; - left: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } - video { - height: auto; - max-width: 100%; - width: 100%; - } -} - -.video-responsive-4-3 { - &::before { - padding-bottom: 75%; // Ratio 4:3 - } -} - -.video-responsive-1-1 { - &::before { - padding-bottom: 100%; // Ratio 1:1 - } -} - -.figure { - margin: 0 0 @layout-spacing 0; - - .figure-caption { - color: @gray-color-dark; - margin-top: @layout-spacing; - } -} 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/meters.less b/src/meters.less deleted file mode 100644 index d0b2b59..0000000 --- a/src/meters.less +++ /dev/null @@ -1,57 +0,0 @@ -// Meters -// Credit: https://css-tricks.com/html5-meter-element/ -.meter { - appearance: none; - background: @bg-color; - border: 0; - border-radius: @border-radius; - display: block; - width: 100%; - height: @unit-4; - - &::-webkit-meter-inner-element { - display: block; - } - - &::-webkit-meter-bar, - &::-webkit-meter-optimum-value, - &::-webkit-meter-suboptimum-value, - &::-webkit-meter-even-less-good-value { - border-radius: @border-radius; - } - - &::-webkit-meter-bar { - background: @bg-color; - } - - &::-webkit-meter-optimum-value { - background: @success-color; - } - - &::-webkit-meter-suboptimum-value { - background: @warning-color; - } - - &::-webkit-meter-even-less-good-value { - background: @error-color; - } - - &::-moz-meter-bar, - &:-moz-meter-optimum, - &:-moz-meter-sub-optimum, - &:-moz-meter-sub-sub-optimum { - border-radius: @border-radius; - } - - &:-moz-meter-optimum::-moz-meter-bar { - background: @success-color; - } - - &:-moz-meter-sub-optimum::-moz-meter-bar { - background: @warning-color; - } - - &:-moz-meter-sub-sub-optimum::-moz-meter-bar { - background: @error-color; - } -} 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/modals.less b/src/modals.less deleted file mode 100644 index fb5cdf9..0000000 --- a/src/modals.less +++ /dev/null @@ -1,73 +0,0 @@ -// Modals -.modal { - align-items: center; - bottom: 0; - display: none; - justify-content: center; - left: 0; - opacity: 0; - overflow: hidden; - padding: @layout-spacing; - position: fixed; - right: 0; - top: 0; - - &:target, - &.active { - display: flex; - opacity: 1; - z-index: @zindex-4; - - .modal-overlay { - background: fade(@bg-color, 75%); - bottom: 0; - cursor: default; - display: block; - left: 0; - position: absolute; - right: 0; - top: 0; - } - - .modal-container { - animation: slide-down .2s ease 1; - max-width: 640px; - z-index: @zindex-0; - } - } - - &.modal-sm { - .modal-container { - max-width: @control-max-width; - } - } -} - -.modal-container { - background: @bg-color-light; - border-radius: @border-radius; - display: block; - padding: 0; - .shadow-variant(.2rem); - text-align: left; - - .modal-header { - padding: @layout-spacing-lg; - - .modal-title { - margin: 0; - } - } - - .modal-body { - max-height: 50vh; - overflow-y: auto; - padding: @layout-spacing-lg; - position: relative; - } - - .modal-footer { - padding: @layout-spacing-lg; - text-align: right; - } -} diff --git a/src/navbar.less b/src/navbar.less deleted file mode 100755 index 3e212c0..0000000 --- a/src/navbar.less +++ /dev/null @@ -1,29 +0,0 @@ -// Navbar -.navbar { - align-items: stretch; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - - .navbar-section { - align-items: center; - display: flex; - flex: 1 0 0; - - &:last-child { - justify-content: flex-end; - } - } - - .navbar-center { - align-items: center; - display: flex; - flex: 0 0 auto; - } - - .navbar-brand { - font-size: @font-size-lg; - font-weight: 500; - text-decoration: none; - } -} diff --git a/src/navs.less b/src/navs.less deleted file mode 100644 index 5f471b0..0000000 --- a/src/navs.less +++ /dev/null @@ -1,34 +0,0 @@ -// Navs -.nav { - display: flex; - flex-direction: column; - list-style: none; - margin: @unit-1 0; - - .nav-item { - a { - color: @gray-color-dark; - padding: @unit-1 @unit-2; - text-decoration: none; - &:focus, - &:hover { - color: @primary-color; - } - } - &.active { - & > a { - color: darken(@gray-color-dark, 10%); - font-weight: bold; - &:focus, - &:hover { - color: @primary-color; - } - } - } - } - - & .nav { - margin-bottom: @unit-2; - margin-left: @unit-4; - } -} diff --git a/src/normalize.less b/src/normalize.less deleted file mode 100644 index 28ed4d7..0000000 --- a/src/normalize.less +++ /dev/null @@ -1,437 +0,0 @@ -/* Manually forked from Normalize.css */ -/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Correct the line height in all browsers. - * 3. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - */ - -/* Document - ========================================================================== */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 3 */ - -webkit-text-size-adjust: 100%; /* 3 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; -} - -/** - * Add the correct display in IE 9-. - */ - -article, -aside, -footer, -header, -nav, -section { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. - */ - -figcaption, -figure, -main { /* 1 */ - display: block; -} - -/** - * Add the correct margin in IE 8 (removed). - */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. (removed) - * 2. Correct the odd `em` font sizing in all browsers. - */ - -/* Text-level semantics - ========================================================================== */ - -/** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. - */ - -a { - background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ -} - -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ - -a:active, -a:hover { - outline-width: 0; -} - -/** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) - */ - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: @mono-font-family; /* 1 (changed) */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Add the correct background and color in IE 9-. (Removed) - */ - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; - font-weight: 400; /* (added) */ -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 (changed) */ - font-size: inherit; /* 1 (changed) */ - line-height: inherit; /* 1 (changed) */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. - */ - -button, -html [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* 2 */ -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule (removed). - */ - - -/** - * Change the border, margin, and padding in all browsers (opinionated) (changed). - */ - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Remove the default vertical scrollbar in IE. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - */ - -details, /* 1 */ -menu { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Scripting - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* Hidden - ========================================================================== */ - -/** - * Add the correct display in IE 10-. - */ - -[hidden] { - display: none; -} diff --git a/src/pagination.less b/src/pagination.less deleted file mode 100644 index 596651b..0000000 --- a/src/pagination.less +++ /dev/null @@ -1,61 +0,0 @@ -// Pagination -.pagination { - display: flex; - list-style: none; - margin: @unit-1 0; - padding: @unit-1 0; - - .page-item { - margin: @unit-1 @unit-o; - - span { - display: inline-block; - padding: @unit-1 @unit-1; - } - - a { - border-radius: @border-radius; - color: @gray-color-dark; - display: inline-block; - padding: @unit-1 @unit-2; - text-decoration: none; - &:focus, - &:hover { - color: @primary-color; - } - } - - &.disabled { - a { - cursor: default; - opacity: .5; - pointer-events: none; - } - } - - &.active { - a { - background: @primary-color; - color: @light-color; - } - } - - &.page-prev, - &.page-next { - flex: 1 0 50%; - } - - &.page-next { - text-align: right; - } - - .page-item-title { - margin: 0; - } - - .page-item-subtitle { - margin: 0; - opacity: .5; - } - } -} diff --git a/src/panels.less b/src/panels.less deleted file mode 100644 index 3c6bae8..0000000 --- a/src/panels.less +++ /dev/null @@ -1,23 +0,0 @@ -// Panels -.panel { - 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; - } - - .panel-nav { - flex: 0 0 auto; - } - - .panel-body { - flex: 1 1 auto; - overflow-y: auto; - padding: 0 @layout-spacing-lg; - } -} diff --git a/src/parallax.less b/src/parallax.less deleted file mode 100644 index e353fd4..0000000 --- a/src/parallax.less +++ /dev/null @@ -1,129 +0,0 @@ -// 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 { - display: block; - height: auto; - position: relative; - width: auto; - - .parallax-content { - height: auto; - .shadow-variant(1rem); - transform: perspective(@parallax-perspective); - transform-style: preserve-3d; - transition: all .4s ease; - width: 100%; - - &::before { - content: ""; - display: block; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } - } - - .parallax-front { - align-items: center; - 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%); - top: 0; - transform: translateZ(@parallax-offset-z) scale(@parallax-scale); - transition: all .4s ease; - width: 100%; - z-index: @zindex-0; - } - - .parallax-top-left { - .parallax-dir(); - left: 0; - top: 0; - - &:hover ~ .parallax-content { - 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); - } - } - } - - .parallax-top-right { - .parallax-dir(); - right: 0; - top: 0; - - &:hover ~ .parallax-content { - 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); - } - } - } - - .parallax-bottom-left { - .parallax-dir(); - bottom: 0; - left: 0; - - &:hover ~ .parallax-content { - 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); - } - } - } - - .parallax-bottom-right { - .parallax-dir(); - bottom: 0; - right: 0; - - &:hover ~ .parallax-content { - 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); - } - } - } -} - -// Mixin: Parallax direction -.parallax-dir() { - height: 50%; - position: absolute; - width: 50%; - z-index: @zindex-3; -} diff --git a/src/popovers.less b/src/popovers.less deleted file mode 100644 index 0ba28a0..0000000 --- a/src/popovers.less +++ /dev/null @@ -1,70 +0,0 @@ -// Popovers -.popover { - display: inline-block; - position: relative; - - .popover-container { - content: attr(data-tooltip); - opacity: 0; - left: 50%; - 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; - } - - :focus + .popover-container, - &:hover .popover-container, - .popover-container:hover { - display: block; - opacity: 1; - transform: translate(-50%, -100%) scale(1); - } - - &.popover-right { - .popover-container { - left: 100%; - top: 50%; - } - - :focus + .popover-container, - &:hover .popover-container, - .popover-container:hover { - transform: translate(0, -50%) scale(1); - } - } - - &.popover-bottom { - .popover-container { - left: 50%; - top: 100%; - } - - :focus + .popover-container, - &:hover .popover-container, - .popover-container:hover { - transform: translate(-50%, 0) scale(1); - } - } - - &.popover-left { - .popover-container { - left: 0; - top: 50%; - } - - :focus + .popover-container, - &:hover .popover-container, - .popover-container:hover { - transform: translate(-100%, -50%) scale(1); - } - } - - .card { - border: 0; - .shadow-variant(.2rem); - } -} diff --git a/src/progress.less b/src/progress.less deleted file mode 100644 index cf9e34b..0000000 --- a/src/progress.less +++ /dev/null @@ -1,45 +0,0 @@ -// Progress -// Credit: https://css-tricks.com/html5-progress-element/ -.progress { - appearance: none; - background: @bg-color-dark; - border: 0; - border-radius: @border-radius; - color: @primary-color; - height: @unit-1; - position: relative; - width: 100%; - - &::-webkit-progress-bar { - background: transparent; - border-radius: @border-radius; - } - - &::-webkit-progress-value { - background: @primary-color; - border-radius: @border-radius; - } - - &::-moz-progress-bar { - 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; - - &::-moz-progress-bar { - background: transparent; - } - } -} - -@keyframes progress-indeterminate { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } -} diff --git a/src/sliders.less b/src/sliders.less deleted file mode 100644 index bf5ce96..0000000 --- a/src/sliders.less +++ /dev/null @@ -1,93 +0,0 @@ -// Sliders -// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ -.slider { - appearance: none; - background: transparent; - display: block; - width: 100%; - height: @unit-6; - - &:focus { - .control-shadow(); - outline: none; - } - - // Slider Thumb - &::-webkit-slider-thumb { - -webkit-appearance: none; - background: @primary-color; - border: 0; - border-radius: 50%; - height: @unit-3; - margin-top: -(@unit-3 - @unit-h) / 2 ; - transition: transform .2s ease; - width: @unit-3; - } - &::-moz-range-thumb { - background: @primary-color; - border: 0; - border-radius: 50%; - height: @unit-3; - transition: transform .2s ease; - width: @unit-3; - } - &::-ms-thumb { - background: @primary-color; - border: 0; - border-radius: 50%; - height: @unit-3; - transition: transform .2s ease; - width: @unit-3; - } - - &:active { - &::-webkit-slider-thumb { - transform: scale(1.25); - } - &::-moz-range-thumb { - transform: scale(1.25); - } - &::-ms-thumb { - transform: scale(1.25); - } - } - - &:disabled, - &.disabled { - &::-webkit-slider-thumb { - background: @gray-color-light; - transform: scale(1); - } - &::-moz-range-thumb { - background: @gray-color-light; - transform: scale(1); - } - &::-ms-thumb { - background: @gray-color-light; - transform: scale(1); - } - } - - // Slider Track - &::-webkit-slider-runnable-track { - 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; - width: 100%; - } - &::-ms-track { - background: @bg-color-dark; - border-radius: @border-radius; - height: @unit-h; - width: 100%; - } - &::-ms-fill-lower { - background: @primary-color; - } -} 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/steps.less b/src/steps.less deleted file mode 100644 index fa0167f..0000000 --- a/src/steps.less +++ /dev/null @@ -1,70 +0,0 @@ -// Steps -.step { - display: flex; - flex-wrap: nowrap; - list-style: none; - margin: @unit-1 0; - width: 100%; - - .step-item { - flex: 1 1 0; - margin-top: 0; - min-height: 20px; - text-align: center; - position: relative; - - &:not(:first-child)::before { - background: @primary-color; - content: ""; - height: 2px; - left: -50%; - position: absolute; - top: 9px; - width: 100%; - } - - a { - color: @gray-color; - display: inline-block; - padding: 20px 10px 0; - text-decoration: none; - - &::before { - background: @primary-color; - border: @border-width-lg solid @light-color; - border-radius: 50%; - content: ""; - display: block; - height: @unit-3; - left: 50%; - position: absolute; - top: @unit-1; - transform: translateX(-50%); - width: @unit-3; - z-index: @zindex-0; - } - } - - &.active { - a { - &::before { - background: @light-color; - border: @border-width-lg solid @primary-color; - } - } - - & ~ .step-item { - &::before { - background: @border-color; - } - - a { - - &::before { - background: @gray-color-light; - } - } - } - } - } -} diff --git a/src/tables.less b/src/tables.less deleted file mode 100644 index e9f747d..0000000 --- a/src/tables.less +++ /dev/null @@ -1,45 +0,0 @@ -// Tables -.table { - border-collapse: collapse; - border-spacing: 0; - text-align: left; - width: 100%; - - &.table-striped { - tbody { - tr:nth-of-type(odd) { - background: @bg-color; - } - } - } - - &.table-hover { - tbody { - tr { - &:hover { - background: @bg-color-dark; - } - } - } - } - - &, - &.table-striped { - tbody { - tr { - &.active { - background: @bg-color-dark; - } - } - } - } - - td, - th { - border-bottom: @border-width solid @border-color; - padding: @unit-3 @unit-2; - } - th { - border-bottom-width: @border-width-lg; - } -} diff --git a/src/tabs.less b/src/tabs.less deleted file mode 100644 index c5af2b6..0000000 --- a/src/tabs.less +++ /dev/null @@ -1,62 +0,0 @@ -// Tabs -.tab { - align-items: center; - border-bottom: @border-width solid @border-color; - display: flex; - flex-wrap: wrap; - list-style: none; - margin: @unit-1 0 @unit-1 - @border-width 0; - - .tab-item { - margin-top: 0; - - &.tab-action { - flex: 1 0 auto; - text-align: right; - } - - a { - 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; - text-decoration: none; - &:focus, - &:hover { - color: @link-color; - } - } - &.active a, - a.active { - border-bottom-color: @primary-color; - color: @link-color; - } - } - - &.tab-block { - .tab-item { - flex: 1 0 0; - text-align: center; - - a { - margin: 0; - } - - .badge { - &[data-badge]::after { - position: absolute; - right: -4px; - top: -4px; - transform: translate(0, 0); - } - } - } - } - - &:not(.tab-block) { - .badge { - padding-right: 2px; - } - } -} diff --git a/src/tiles.less b/src/tiles.less deleted file mode 100644 index a99540e..0000000 --- a/src/tiles.less +++ /dev/null @@ -1,38 +0,0 @@ -// Tiles -.tile { - align-content: space-between; - align-items: flex-start; - display: flex; - - .tile-icon, - .tile-action { - flex: 0 0 auto; - } - .tile-content { - flex: 1 1 auto; - &:not(:first-child) { - padding-left: @unit-2; - } - &:not(:last-child) { - padding-right: @unit-2; - } - } - .tile-title, - .tile-subtitle { - line-height: @line-height; - } - - &.tile-centered { - align-items: center; - - .tile-content { - overflow: hidden; - } - - .tile-title, - .tile-subtitle { - margin-bottom: 0; - .text-ellipsis; - } - } -} diff --git a/src/timelines.less b/src/timelines.less deleted file mode 100644 index 02b421e..0000000 --- a/src/timelines.less +++ /dev/null @@ -1,55 +0,0 @@ -// Timelines -.timeline { - .timeline-item { - display: flex; - margin-bottom: @unit-6; - position: relative; - &::before { - background: @border-color; - content: ""; - height: 100%; - left: 11px; - position: absolute; - top: @unit-6; - width: 2px; - } - - .timeline-left { - flex: 0 0 auto; - } - - .timeline-content { - flex: 1 1 auto; - padding: 2px 0 2px @layout-spacing-lg; - } - - .timeline-icon { - border-radius: 50%; - color: @light-color; - display: block; - height: @unit-6; - text-align: center; - width: @unit-6; - &::before { - border: @border-width-lg solid @primary-color; - border-radius: 50%; - content: ""; - display: block; - height: @unit-2; - left: @unit-2; - position: absolute; - top: @unit-2; - width: @unit-2; - } - - &.icon-lg { - background: @primary-color; - font-size: @font-size-lg; - line-height: @line-height; - &::before { - content: none; - } - } - } - } -} 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/tooltips.less b/src/tooltips.less deleted file mode 100644 index 02dc201..0000000 --- a/src/tooltips.less +++ /dev/null @@ -1,77 +0,0 @@ -// Tooltips -.tooltip { - position: relative; - &::after { - background: fade(@dark-color, 90%); - border-radius: @border-radius; - bottom: 100%; - color: @light-color; - content: attr(data-tooltip); - display: block; - font-size: @font-size-sm; - left: 50%; - max-width: @control-max-width; - opacity: 0; - overflow: hidden; - padding: @unit-1 @unit-2; - pointer-events: none; - position: absolute; - text-overflow: ellipsis; - transform: translate(-50%, @unit-2); - transition: all .2s ease; - white-space: nowrap; - z-index: @zindex-3; - } - &:focus, - &:hover { - &::after { - opacity: 1; - transform: translate(-50%, -@unit-1); - } - } - &[disabled], - &.disabled { - pointer-events: auto; - } - - &.tooltip-right { - &::after { - bottom: 50%; - left: 100%; - transform: translate(-@unit-1, 50%); - } - &:focus, - &:hover { - &::after { - transform: translate(@unit-1, 50%); - } - } - } - &.tooltip-bottom { - &::after { - bottom: auto; - top: 100%; - transform: translate(-50%, -@unit-2); - } - &:focus, - &:hover { - &::after { - transform: translate(-50%, @unit-1); - } - } - } - &.tooltip-left { - &::after { - bottom: 50%; - left: auto; - right: 100%; - transform: translate(@unit-2, 50%); - } - &:focus, - &:hover { - &::after { - transform: translate(-@unit-1, 50%); - } - } - } -} diff --git a/src/typography.less b/src/typography.less deleted file mode 100644 index 5fd152f..0000000 --- a/src/typography.less +++ /dev/null @@ -1,127 +0,0 @@ -// Typography -// Headings -h1, -h2, -h3, -h4, -h5, -h6 { - color: inherit; - font-weight: 500; - line-height: 1.2; - margin-bottom: .25em; - margin-top: 0; -} -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { - font-weight: 500; -} -h1, -.h1 { - font-size: 2rem; -} -h2, -.h2 { - font-size: 1.6rem; -} -h3, -.h3 { - font-size: 1.4rem; -} -h4, -.h4 { - font-size: 1.2rem; -} -h5, -.h5 { - font-size: 1rem; -} -h6, -.h6 { - font-size: .8rem; -} - -// Paragraphs -p { - line-height: 1.2 * @line-height; - margin: 0 0 @unit-4; -} - -// Semantic text elements -a, -ins, -u { - text-decoration-skip: ink edges; -} - -abbr[title] { - border-bottom: @border-width dotted; - cursor: help; - text-decoration: none; -} - -kbd { - .label-base(); - .label-variant(@light-color, @dark-color); -} - -mark { - .label-base(); - .label-variant(@body-font-color, @highlight-color); -} - -// Blockquote -blockquote { - border-left: @border-width-lg solid @border-color; - margin-left: 0; - padding: @unit-2 @unit-4; - - p:last-child { - margin-bottom: 0; - } -} - -// Lists -ul, -ol { - margin: @unit-4 0 @unit-4 @unit-4; - padding: 0; - - ul, - ol { - margin: @unit-4 0 @unit-4 @unit-4; - } - - li { - margin-top: @unit-2; - } -} - -ul { - list-style: disc inside; - - ul { - list-style-type: circle; - } -} - -ol { - list-style: decimal inside; - - ol { - list-style-type: lower-alpha; - } -} - -dl { - dt { - font-weight: bold; - } - dd { - margin: @unit-2 0 @unit-4 0; - } -} 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.scss b/src/utilities/_display.scss new file mode 100644 index 0000000..550124d --- /dev/null +++ b/src/utilities/_display.scss @@ -0,0 +1,47 @@ +// Display +.d-block { + display: block; +} +.d-inline { + display: inline; +} +.d-inline-block { + display: inline-block; +} +.d-flex { + display: flex; +} +.d-inline-flex { + display: inline-flex; +} +.d-none, +.d-hide { + display: none !important; +} +.d-visible { + visibility: visible; +} +.d-invisible { + visibility: hidden; +} +.text-hide { + background: transparent; + border: 0; + color: transparent; + font-size: 0; + line-height: 0; + text-shadow: none; +} +.text-assistive { + border: 0; + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.c-hand { + cursor: pointer; +} diff --git a/src/utilities/_divider.scss b/src/utilities/_divider.scss new file mode 100644 index 0000000..5d0feb2 --- /dev/null +++ b/src/utilities/_divider.scss @@ -0,0 +1,50 @@ +// Divider +.divider, +.divider-vert { + display: block; + position: relative; + + &[data-content]::after { + background: $bg-color-light; + color: $gray-color; + content: attr(data-content); + display: inline-block; + font-size: $font-size-sm; + padding: 0 $unit-2; + transform: translateY(-$font-size-sm + $border-width); + } +} + +.divider { + border-top: $border-width solid $border-color; + height: $border-width; + margin: $unit-2 0; + + &[data-content] { + margin: $unit-4 0; + } +} + +.divider-vert { + display: block; + padding: $unit-4; + + &::before { + border-left: $border-width solid $border-color; + bottom: $unit-2; + content: ""; + display: block; + left: 50%; + position: absolute; + top: $unit-2; + transform: translateX(-50%); + } + + &[data-content]::after { + left: 50%; + padding: $unit-1 0; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + } +} diff --git a/src/utilities/_loading.scss b/src/utilities/_loading.scss new file mode 100644 index 0000000..c0cdb1e --- /dev/null +++ b/src/utilities/_loading.scss @@ -0,0 +1,34 @@ +// Loading +.loading { + color: transparent !important; + min-height: $unit-4; + pointer-events: none; + position: relative; + &::after { + animation: loading 500ms infinite linear; + border: $border-width-lg solid $primary-color; + border-radius: 50%; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: $unit-4; + left: 50%; + margin-left: -$unit-2; + margin-top: -$unit-2; + position: absolute; + top: 50%; + width: $unit-4; + z-index: $zindex-0; + } + + &.loading-lg { + min-height: $unit-10; + &::after { + height: $unit-8; + width: $unit-8; + margin-left: -$unit-4; + margin-top: -$unit-4; + } + } +} \ No newline at end of file diff --git a/src/utilities/_position.scss b/src/utilities/_position.scss new file mode 100644 index 0000000..548368f --- /dev/null +++ b/src/utilities/_position.scss @@ -0,0 +1,35 @@ +// Position +.clearfix { + @include clearfix(); +} +.float-left { + float: left !important; +} +.float-right { + float: right !important; +} + +.relative { + position: relative; +} +.absolute { + position: absolute; +} +.fixed { + position: fixed; +} +.centered { + display: block; + float: none; + margin-left: auto; + margin-right: auto; +} + +// Spacing +@include margin-variant(0, 0); +@include margin-variant(1, $unit-1); +@include margin-variant(2, $unit-2); + +@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.scss b/src/utilities/_shapes.scss new file mode 100644 index 0000000..ab6585b --- /dev/null +++ b/src/utilities/_shapes.scss @@ -0,0 +1,7 @@ +// Shapes +.rounded { + border-radius: $border-radius; +} +.circle { + border-radius: 50%; +} diff --git a/src/utilities/_text.scss b/src/utilities/_text.scss new file mode 100644 index 0000000..a1e0980 --- /dev/null +++ b/src/utilities/_text.scss @@ -0,0 +1,50 @@ +// Text +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} + +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} + +.text-normal { + font-weight: normal; +} +.text-bold { + font-weight: bold; +} +.text-italic { + font-style: italic; +} +.text-large { + font-size: 1.2em; +} + +.text-ellipsis { + @include text-ellipsis(); +} +.text-clip { + overflow: hidden; + text-overflow: clip; + white-space: nowrap; +} +.text-break { + hyphens: auto; + word-break: break-word; + word-wrap: break-word; +} diff --git a/src/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/utilities/display.less b/src/utilities/display.less deleted file mode 100644 index 26e611e..0000000 --- a/src/utilities/display.less +++ /dev/null @@ -1,47 +0,0 @@ -// Display -.d-block { - display: block; -} -.d-inline { - display: inline; -} -.d-inline-block { - display: inline-block; -} -.d-flex { - display: flex; -} -.d-inline-flex { - display: inline-flex; -} -.d-none, -.hide { - display: none !important; -} -.d-visible { - visibility: visible; -} -.d-invisible { - visibility: hidden; -} -.text-hide { - background: transparent; - border: 0; - color: transparent; - font-size: 0; - line-height: 0; - text-shadow: none; -} -.text-assistive { - border: 0; - clip: rect(0,0,0,0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} -.hand { - cursor: pointer; -} diff --git a/src/utilities/divider.less b/src/utilities/divider.less deleted file mode 100644 index a5cb45b..0000000 --- a/src/utilities/divider.less +++ /dev/null @@ -1,50 +0,0 @@ -// Divider -.divider, -.divider-vert { - display: block; - position: relative; - - &[data-content]::after { - background: @bg-color-light; - color: @gray-color; - content: attr(data-content); - display: inline-block; - font-size: @font-size-sm; - padding: 0 @unit-2; - transform: translateY(-@font-size-sm + @border-width); - } -} - -.divider { - border-top: @border-width solid @border-color; - height: @border-width; - margin: @unit-2 0; - - &[data-content] { - margin: @unit-4 0; - } -} - -.divider-vert { - display: block; - padding: @unit-4; - - &::before { - border-left: @border-width solid @border-color; - bottom: @unit-2; - content: ""; - display: block; - left: 50%; - position: absolute; - top: @unit-2; - transform: translateX(-50%); - } - - &[data-content]::after { - left: 50%; - padding: @unit-1 0; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - } -} diff --git a/src/utilities/loading.less b/src/utilities/loading.less deleted file mode 100644 index 767ec9e..0000000 --- a/src/utilities/loading.less +++ /dev/null @@ -1,34 +0,0 @@ -// Loading -.loading { - color: transparent !important; - min-height: @unit-4; - pointer-events: none; - position: relative; - &::after { - animation: loading 500ms infinite linear; - border: @border-width-lg solid @primary-color; - border-radius: 50%; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: @unit-4; - left: 50%; - margin-left: -@unit-2; - margin-top: -@unit-2; - position: absolute; - top: 50%; - width: @unit-4; - z-index: @zindex-0; - } - - &.loading-lg { - min-height: @unit-10; - &::after { - height: @unit-8; - width: @unit-8; - margin-left: -@unit-4; - margin-top: -@unit-4; - } - } -} \ No newline at end of file diff --git a/src/utilities/position.less b/src/utilities/position.less deleted file mode 100644 index 235d6a6..0000000 --- a/src/utilities/position.less +++ /dev/null @@ -1,35 +0,0 @@ -// Position -.clearfix { - .clearfix(); -} -.float-left { - float: left !important; -} -.float-right { - float: right !important; -} - -.relative { - position: relative; -} -.absolute { - position: absolute; -} -.fixed { - position: fixed; -} -.centered { - display: block; - float: none; - margin-left: auto; - margin-right: auto; -} - -// Spacing -.margin-variant(0, 0); -.margin-variant(1, @unit-1); -.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 diff --git a/src/utilities/shapes.less b/src/utilities/shapes.less deleted file mode 100644 index e9f63bc..0000000 --- a/src/utilities/shapes.less +++ /dev/null @@ -1,7 +0,0 @@ -// Shapes -.rounded { - border-radius: @border-radius; -} -.circle { - border-radius: 50%; -} diff --git a/src/utilities/text.less b/src/utilities/text.less deleted file mode 100644 index f571613..0000000 --- a/src/utilities/text.less +++ /dev/null @@ -1,52 +0,0 @@ -// Text -.text-left { - text-align: left; -} -.text-right { - text-align: right; -} -.text-center { - text-align: center; -} -.text-justify { - text-align: justify; -} - -.text-lowercase { - text-transform: lowercase; -} -.text-uppercase { - text-transform: uppercase; -} -.text-capitalize { - text-transform: capitalize; -} - -.text-normal { - font-weight: normal; -} -.text-bold { - font-weight: bold; -} -.text-italic { - font-style: italic; -} -.text-large { - font-size: 1.2em; -} - -.text-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.text-clip { - overflow: hidden; - text-overflow: clip; - white-space: nowrap; -} -.text-break { - hyphens: auto; - word-break: break-word; - word-wrap: break-word; -} diff --git a/src/variables.less b/src/variables.less 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; -- cgit v1.3.1-23-gd82d From 8c0f6b2d3ae609b581af7d71610d50e00ab49990 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 29 Aug 2017 21:43:06 +0800 Subject: Improve Docs navbar --- docs/components.html | 30 ++++++++------ docs/css/docs.css | 87 ++++++++++++++++++++++++++-------------- docs/dist/spectre.css | 25 +++++++++++- docs/dist/spectre.min.css | 2 +- docs/elements.html | 29 ++++++++------ docs/experimentals.html | 29 ++++++++------ docs/getting-started.html | 34 ++++++++++------ docs/layout.html | 29 ++++++++------ docs/src/docs.scss | 98 +++++++++++++++++++++++++++++---------------- docs/utilities.html | 29 ++++++++------ gulpfile.js | 1 - src/_accordions.scss | 2 +- src/_chips.scss | 1 + src/_tooltips.scss | 2 + src/utilities/_display.scss | 17 ++++++++ 15 files changed, 275 insertions(+), 140 deletions(-) (limited to 'src') diff --git a/docs/components.html b/docs/components.html index ed34761..251401e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -14,19 +14,13 @@
-
- -
- -
-
- GitHub -
-