From 71a0b26988661568ed19c8d477a3ffa820d405af Mon Sep 17 00:00:00 2001 From: Michael Crismali Date: Sat, 5 Oct 2024 16:45:49 -0500 Subject: [PATCH] Vendored spectre-css to update its scss syntax around colors and math --- ...application.sass.scss => application.scss} | 0 app/assets/stylesheets/globals.scss | 24 +- app/assets/stylesheets/overrides.scss | 30 +- .../stylesheets/spectre-css/_accordions.scss | 38 ++ .../stylesheets/spectre-css/_animations.scss | 20 + .../stylesheets/spectre-css/_asian.scss | 43 ++ .../spectre-css/_autocomplete.scss | 47 ++ .../stylesheets/spectre-css/_avatars.scss | 77 +++ .../stylesheets/spectre-css/_badges.scss | 60 ++ app/assets/stylesheets/spectre-css/_bars.scss | 71 +++ app/assets/stylesheets/spectre-css/_base.scss | 44 ++ .../stylesheets/spectre-css/_breadcrumbs.scss | 29 + .../stylesheets/spectre-css/_buttons.scss | 195 ++++++ .../stylesheets/spectre-css/_calendars.scss | 224 +++++++ .../stylesheets/spectre-css/_cards.scss | 43 ++ .../stylesheets/spectre-css/_carousels.scss | 136 +++++ .../stylesheets/spectre-css/_chips.scss | 33 ++ .../stylesheets/spectre-css/_codes.scss | 33 ++ .../spectre-css/_comparison-sliders.scss | 116 ++++ .../stylesheets/spectre-css/_dropdowns.scss | 36 ++ .../stylesheets/spectre-css/_empty.scss | 21 + .../stylesheets/spectre-css/_filters.scss | 37 ++ .../stylesheets/spectre-css/_forms.scss | 557 ++++++++++++++++++ app/assets/stylesheets/spectre-css/_hero.scss | 22 + .../stylesheets/spectre-css/_icons.scss | 5 + .../stylesheets/spectre-css/_labels.scss | 36 ++ .../stylesheets/spectre-css/_layout.scss | 448 ++++++++++++++ .../stylesheets/spectre-css/_media.scss | 75 +++ .../stylesheets/spectre-css/_menus.scss | 66 +++ .../stylesheets/spectre-css/_meters.scss | 57 ++ .../stylesheets/spectre-css/_mixins.scss | 10 + .../stylesheets/spectre-css/_modals.scss | 87 +++ .../stylesheets/spectre-css/_navbar.scss | 28 + app/assets/stylesheets/spectre-css/_navs.scss | 36 ++ .../stylesheets/spectre-css/_normalize.scss | 446 ++++++++++++++ .../stylesheets/spectre-css/_off-canvas.scss | 95 +++ .../stylesheets/spectre-css/_pagination.scss | 60 ++ .../stylesheets/spectre-css/_panels.scss | 23 + .../stylesheets/spectre-css/_parallax.scss | 135 +++++ .../stylesheets/spectre-css/_popovers.scss | 65 ++ .../stylesheets/spectre-css/_progress.scss | 45 ++ .../stylesheets/spectre-css/_sliders.scss | 99 ++++ .../stylesheets/spectre-css/_steps.scss | 71 +++ .../stylesheets/spectre-css/_tables.scss | 57 ++ app/assets/stylesheets/spectre-css/_tabs.scss | 66 +++ .../stylesheets/spectre-css/_tiles.scss | 38 ++ .../stylesheets/spectre-css/_timelines.scss | 56 ++ .../stylesheets/spectre-css/_toasts.scss | 48 ++ .../stylesheets/spectre-css/_tooltips.scss | 79 +++ .../stylesheets/spectre-css/_typography.scss | 131 ++++ .../stylesheets/spectre-css/_utilities.scss | 8 + .../stylesheets/spectre-css/_variables.scss | 119 ++++ .../stylesheets/spectre-css/_viewer-360.scss | 36 ++ .../spectre-css/icons/_icons-action.scss | 315 ++++++++++ .../spectre-css/icons/_icons-core.scss | 54 ++ .../spectre-css/icons/_icons-navigation.scss | 127 ++++ .../spectre-css/icons/_icons-object.scss | 161 +++++ .../spectre-css/mixins/_avatar.scss | 6 + .../spectre-css/mixins/_button.scss | 56 ++ .../spectre-css/mixins/_clearfix.scss | 8 + .../spectre-css/mixins/_color.scss | 29 + .../spectre-css/mixins/_label.scss | 11 + .../spectre-css/mixins/_position.scss | 65 ++ .../spectre-css/mixins/_shadow.scss | 9 + .../stylesheets/spectre-css/mixins/_text.scss | 6 + .../spectre-css/mixins/_toast.scss | 5 + .../stylesheets/spectre-css/spectre-exp.scss | 18 + .../spectre-css/spectre-icons.scss | 10 + .../stylesheets/spectre-css/spectre.scss | 49 ++ .../spectre-css/utilities/_colors.scss | 31 + .../spectre-css/utilities/_cursors.scss | 24 + .../spectre-css/utilities/_display.scss | 44 ++ .../spectre-css/utilities/_divider.scss | 50 ++ .../spectre-css/utilities/_loading.scss | 37 ++ .../spectre-css/utilities/_position.scss | 54 ++ .../spectre-css/utilities/_shapes.scss | 8 + .../spectre-css/utilities/_text.scss | 76 +++ app/assets/stylesheets/styles.scss | 52 +- package.json | 3 +- yarn.lock | 5 - 80 files changed, 5717 insertions(+), 57 deletions(-) rename app/assets/stylesheets/{application.sass.scss => application.scss} (100%) create mode 100644 app/assets/stylesheets/spectre-css/_accordions.scss create mode 100644 app/assets/stylesheets/spectre-css/_animations.scss create mode 100644 app/assets/stylesheets/spectre-css/_asian.scss create mode 100644 app/assets/stylesheets/spectre-css/_autocomplete.scss create mode 100644 app/assets/stylesheets/spectre-css/_avatars.scss create mode 100644 app/assets/stylesheets/spectre-css/_badges.scss create mode 100644 app/assets/stylesheets/spectre-css/_bars.scss create mode 100644 app/assets/stylesheets/spectre-css/_base.scss create mode 100644 app/assets/stylesheets/spectre-css/_breadcrumbs.scss create mode 100644 app/assets/stylesheets/spectre-css/_buttons.scss create mode 100644 app/assets/stylesheets/spectre-css/_calendars.scss create mode 100644 app/assets/stylesheets/spectre-css/_cards.scss create mode 100644 app/assets/stylesheets/spectre-css/_carousels.scss create mode 100644 app/assets/stylesheets/spectre-css/_chips.scss create mode 100644 app/assets/stylesheets/spectre-css/_codes.scss create mode 100644 app/assets/stylesheets/spectre-css/_comparison-sliders.scss create mode 100644 app/assets/stylesheets/spectre-css/_dropdowns.scss create mode 100644 app/assets/stylesheets/spectre-css/_empty.scss create mode 100644 app/assets/stylesheets/spectre-css/_filters.scss create mode 100644 app/assets/stylesheets/spectre-css/_forms.scss create mode 100644 app/assets/stylesheets/spectre-css/_hero.scss create mode 100644 app/assets/stylesheets/spectre-css/_icons.scss create mode 100644 app/assets/stylesheets/spectre-css/_labels.scss create mode 100644 app/assets/stylesheets/spectre-css/_layout.scss create mode 100644 app/assets/stylesheets/spectre-css/_media.scss create mode 100644 app/assets/stylesheets/spectre-css/_menus.scss create mode 100644 app/assets/stylesheets/spectre-css/_meters.scss create mode 100644 app/assets/stylesheets/spectre-css/_mixins.scss create mode 100644 app/assets/stylesheets/spectre-css/_modals.scss create mode 100755 app/assets/stylesheets/spectre-css/_navbar.scss create mode 100644 app/assets/stylesheets/spectre-css/_navs.scss create mode 100644 app/assets/stylesheets/spectre-css/_normalize.scss create mode 100644 app/assets/stylesheets/spectre-css/_off-canvas.scss create mode 100644 app/assets/stylesheets/spectre-css/_pagination.scss create mode 100644 app/assets/stylesheets/spectre-css/_panels.scss create mode 100644 app/assets/stylesheets/spectre-css/_parallax.scss create mode 100644 app/assets/stylesheets/spectre-css/_popovers.scss create mode 100644 app/assets/stylesheets/spectre-css/_progress.scss create mode 100644 app/assets/stylesheets/spectre-css/_sliders.scss create mode 100644 app/assets/stylesheets/spectre-css/_steps.scss create mode 100644 app/assets/stylesheets/spectre-css/_tables.scss create mode 100644 app/assets/stylesheets/spectre-css/_tabs.scss create mode 100644 app/assets/stylesheets/spectre-css/_tiles.scss create mode 100644 app/assets/stylesheets/spectre-css/_timelines.scss create mode 100644 app/assets/stylesheets/spectre-css/_toasts.scss create mode 100644 app/assets/stylesheets/spectre-css/_tooltips.scss create mode 100644 app/assets/stylesheets/spectre-css/_typography.scss create mode 100644 app/assets/stylesheets/spectre-css/_utilities.scss create mode 100644 app/assets/stylesheets/spectre-css/_variables.scss create mode 100644 app/assets/stylesheets/spectre-css/_viewer-360.scss create mode 100644 app/assets/stylesheets/spectre-css/icons/_icons-action.scss create mode 100644 app/assets/stylesheets/spectre-css/icons/_icons-core.scss create mode 100644 app/assets/stylesheets/spectre-css/icons/_icons-navigation.scss create mode 100644 app/assets/stylesheets/spectre-css/icons/_icons-object.scss create mode 100644 app/assets/stylesheets/spectre-css/mixins/_avatar.scss create mode 100644 app/assets/stylesheets/spectre-css/mixins/_button.scss create mode 100644 app/assets/stylesheets/spectre-css/mixins/_clearfix.scss create mode 100644 app/assets/stylesheets/spectre-css/mixins/_color.scss create mode 100644 app/assets/stylesheets/spectre-css/mixins/_label.scss create mode 100644 app/assets/stylesheets/spectre-css/mixins/_position.scss create mode 100644 app/assets/stylesheets/spectre-css/mixins/_shadow.scss create mode 100644 app/assets/stylesheets/spectre-css/mixins/_text.scss create mode 100644 app/assets/stylesheets/spectre-css/mixins/_toast.scss create mode 100644 app/assets/stylesheets/spectre-css/spectre-exp.scss create mode 100644 app/assets/stylesheets/spectre-css/spectre-icons.scss create mode 100644 app/assets/stylesheets/spectre-css/spectre.scss create mode 100644 app/assets/stylesheets/spectre-css/utilities/_colors.scss create mode 100644 app/assets/stylesheets/spectre-css/utilities/_cursors.scss create mode 100644 app/assets/stylesheets/spectre-css/utilities/_display.scss create mode 100644 app/assets/stylesheets/spectre-css/utilities/_divider.scss create mode 100644 app/assets/stylesheets/spectre-css/utilities/_loading.scss create mode 100644 app/assets/stylesheets/spectre-css/utilities/_position.scss create mode 100644 app/assets/stylesheets/spectre-css/utilities/_shapes.scss create mode 100644 app/assets/stylesheets/spectre-css/utilities/_text.scss diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.scss similarity index 100% rename from app/assets/stylesheets/application.sass.scss rename to app/assets/stylesheets/application.scss diff --git a/app/assets/stylesheets/globals.scss b/app/assets/stylesheets/globals.scss index 6bd61bf5a..fe74d2d0c 100644 --- a/app/assets/stylesheets/globals.scss +++ b/app/assets/stylesheets/globals.scss @@ -1,8 +1,10 @@ +@use "sass:color"; + @import 'mixins'; $primary-color: #2F7890; -$primary-color-light: lighten(#2F7890, 20%); -$secondary-color: darken(#CDABBE, 10%); +$primary-color-light: color.adjust(#2F7890, $lightness: 20%, $space: hsl); +$secondary-color: color.adjust(#CDABBE, $lightness: -10%, $space: hsl); $error-color: #DF6C54; $warning-color: #FBCF33; $success-color: #AEBE39; @@ -16,11 +18,11 @@ $max-mobile-width: 600px; $min-desktop-width: $max-mobile-width + 1px; $light-gray: #e4ddda; -$secondary-color-light: lighten($secondary-color, 20%); +$secondary-color-light: color.adjust($secondary-color, $lightness: 20%, $space: hsl); $background-color: #F9F6F2; -$background-color-dark: darken($background-color, 5%); +$background-color-dark: color.adjust($background-color, $lightness: -5%, $space: hsl); @mixin mobile { @media only screen and (max-width: $max-mobile-width) { @@ -35,37 +37,37 @@ $background-color-dark: darken($background-color, 5%); } @mixin default-button{ - border-color: lighten($gray-color-light, 5%); + border-color: color.adjust($gray-color-light, $lightness: 5%, $space: hsl); transition: none; &, &:visited { color: $gray-color-dark; } &:hover { background-color: $secondary-color-light; - border-color: lighten($secondary-color, 10%); + border-color: color.adjust($secondary-color, $lightness: 10%, $space: hsl); color: $dark-color; } &:active, &.active { background-color: $secondary-color; - border-color: darken($secondary-color, 10%); + border-color: color.adjust($secondary-color, $lightness: -10%, $space: hsl); color: white; } } @mixin title{ - border-color: lighten($gray-color-light, 5%); + border-color: color.adjust($gray-color-light, $lightness: 5%, $space: hsl); transition: none; &, &:visited { color: $gray-color-dark; } &:hover { background-color: $secondary-color-light; - border-color: lighten($secondary-color, 10%); + border-color: color.adjust($secondary-color, $lightness: 10%, $space: hsl); color: $dark-color; } &:active, &.active { background-color: $secondary-color; - border-color: darken($secondary-color, 10%); + border-color: color.adjust($secondary-color, $lightness: -10%, $space: hsl); color: white; } } @@ -77,7 +79,7 @@ $background-color-dark: darken($background-color, 5%); // NEW ADDED STYLES $button-color: #36b3a8; -$pri-btn-color-hover: darken($button-color, 7%); +$pri-btn-color-hover: color.adjust($button-color, $lightness: -7%, $space: hsl); // body { // font-family: Proxima Nova, "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/app/assets/stylesheets/overrides.scss b/app/assets/stylesheets/overrides.scss index 7fb1d39e9..c9fbe9e06 100644 --- a/app/assets/stylesheets/overrides.scss +++ b/app/assets/stylesheets/overrides.scss @@ -1,6 +1,8 @@ +@use "sass:color"; + @import 'globals'; -@import '@spectre-org/spectre-css/src/mixins/_shadow'; +@import './spectre-css/mixins/_shadow'; .selectize-input { box-shadow: none; @@ -29,18 +31,18 @@ .selectize-control.multi .selectize-input [data-value].active { background-image: none; background-repeat: no-repeat; - background-color: darken($secondary-color, 10%); + background-color: color.adjust($secondary-color, $lightness: -10%, $space: hsl); filter: none; } .selectize-control.multi .selectize-input > div.active, .selectize-control.plugin-remove_button [data-value].active .remove { - border-color: darken($secondary-color, 20%); + border-color: color.adjust($secondary-color, $lightness: -20%, $space: hsl); } .selectize-control.multi .selectize-input > div, .selectize-control.plugin-remove_button [data-value] .remove { - border-color: darken($secondary-color, 10%); + border-color: color.adjust($secondary-color, $lightness: -10%, $space: hsl); } @@ -141,27 +143,27 @@ form { // Improve contrast on labels .label { - background-color: lighten($gray-color-light, 1%); + background-color: color.adjust($gray-color-light, $lightness: 1%, $space: hsl); &, &.label-success, &.label-warning, &.label-error, &.label-primary, &.label-secondary { color: inherit; } - &.label-primary { background-color: lighten($primary-color, 40%); } + &.label-primary { background-color: color.adjust($primary-color, $lightness: 40%, $space: hsl); } &.label-secondary { background-color: $secondary-color-light; } - &.label-success { background-color: lighten($success-color, 20%); } - &.label-warning { background-color: lighten($warning-color, 20%); } - &.label-error { background-color: lighten($error-color, 20%); } + &.label-success { background-color: color.adjust($success-color, $lightness: 20%, $space: hsl); } + &.label-warning { background-color: color.adjust($warning-color, $lightness: 20%, $space: hsl); } + &.label-error { background-color: color.adjust($error-color, $lightness: 20%, $space: hsl); } } .toast { color: inherit; - background-color: lighten($gray-color-light, 1%); + background-color: color.adjust($gray-color-light, $lightness: 1%, $space: hsl); - &.toast-primary { background-color: lighten($primary-color, 30%); } + &.toast-primary { background-color: color.adjust($primary-color, $lightness: 30%, $space: hsl); } &.toast-secondary { background-color: $secondary-color-light; } - &.toast-success { background-color: lighten($success-color, 20%); } - &.toast-warning { background-color: lighten($warning-color, 20%); } - &.toast-error { background-color: lighten($error-color, 20%); } + &.toast-success { background-color: color.adjust($success-color, $lightness: 20%, $space: hsl); } + &.toast-warning { background-color: color.adjust($warning-color, $lightness: 20%, $space: hsl); } + &.toast-error { background-color: color.adjust($error-color, $lightness: 20%, $space: hsl); } a { text-decoration: none; diff --git a/app/assets/stylesheets/spectre-css/_accordions.scss b/app/assets/stylesheets/spectre-css/_accordions.scss new file mode 100644 index 000000000..ee57ac050 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_accordions.scss @@ -0,0 +1,38 @@ +// Accordions +.accordion { + input:checked ~, + &[open] { + & .accordion-header > { + .icon:first-child { + transform: rotate(90deg); + } + } + + & .accordion-body { + max-height: 50rem; + } + } + + .accordion-header { + display: block; + padding: $unit-1 $unit-2; + + .icon { + transition: transform .25s; + } + } + + .accordion-body { + margin-bottom: $layout-spacing; + max-height: 0; + overflow: hidden; + transition: max-height .25s; + } +} + +// Remove default details marker in Webkit +summary.accordion-header { + &::-webkit-details-marker { + display: none; + } +} diff --git a/app/assets/stylesheets/spectre-css/_animations.scss b/app/assets/stylesheets/spectre-css/_animations.scss new file mode 100644 index 000000000..e7fde1ace --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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/app/assets/stylesheets/spectre-css/_asian.scss b/app/assets/stylesheets/spectre-css/_asian.scss new file mode 100644 index 000000000..e426f39a5 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_asian.scss @@ -0,0 +1,43 @@ +// Optimized for East Asian CJK +html:lang(zh), +html:lang(zh-Hans), +.lang-zh, +.lang-zh-hans { + font-family: $cjk-zh-hans-font-family; +} + +html:lang(zh-Hant), +.lang-zh-hant { + font-family: $cjk-zh-hant-font-family; +} + +html:lang(ja), +.lang-ja { + font-family: $cjk-jp-font-family; +} + +html:lang(ko), +.lang-ko { + font-family: $cjk-ko-font-family; +} + +:lang(zh), +:lang(ja), +.lang-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/app/assets/stylesheets/spectre-css/_autocomplete.scss b/app/assets/stylesheets/spectre-css/_autocomplete.scss new file mode 100644 index 000000000..279fa036a --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_autocomplete.scss @@ -0,0 +1,47 @@ +// 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 { + @include control-shadow(); + border-color: $primary-color; + } + + .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; + } + } + + .menu { + left: 0; + position: absolute; + top: 100%; + width: 100%; + } + + &.autocomplete-oneline { + .form-autocomplete-input { + flex-wrap: nowrap; + overflow-x: auto; + } + + .chip { + flex: 1 0 auto; + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_avatars.scss b/app/assets/stylesheets/spectre-css/_avatars.scss new file mode 100644 index 000000000..b203aa25c --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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.25; + 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; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/spectre-css/_badges.scss b/app/assets/stylesheets/spectre-css/_badges.scss new file mode 100644 index 000000000..d67f6d19a --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_badges.scss @@ -0,0 +1,60 @@ +// 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(-.05rem, -.5rem); + } + } + &[data-badge] { + &::after { + font-size: $font-size-sm; + height: .9rem; + line-height: 1; + min-width: .9rem; + padding: .1rem .2rem; + 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; + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_bars.scss b/app/assets/stylesheets/spectre-css/_bars.scss new file mode 100644 index 000000000..47e21c9a6 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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/app/assets/stylesheets/spectre-css/_base.scss b/app/assets/stylesheets/spectre-css/_base.scss new file mode 100644 index 000000000..4e01b202e --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_base.scss @@ -0,0 +1,44 @@ +// 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; + } + + &:visited { + color: $link-color-light; + } +} diff --git a/app/assets/stylesheets/spectre-css/_breadcrumbs.scss b/app/assets/stylesheets/spectre-css/_breadcrumbs.scss new file mode 100644 index 000000000..6a5af3167 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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-dark; + content: "/"; + padding-right: $unit-2; + } + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_buttons.scss b/app/assets/stylesheets/spectre-css/_buttons.scss new file mode 100644 index 000000000..bb5764781 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_buttons.scss @@ -0,0 +1,195 @@ +@use "sass:color"; + +// Buttons +.btn { + appearance: none; + background: $bg-color-light; + border: $border-width solid $primary-color; + border-radius: $border-radius; + color: $primary-color; + cursor: pointer; + display: inline-block; + font-size: $font-size; + height: $control-size; + line-height: $line-height; + outline: none; + padding: $control-padding-y $control-padding-x; + text-align: center; + text-decoration: none; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + 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: color.adjust($primary-color-dark, $lightness: -5%, $space: hsl); + 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: color.adjust($primary-color-dark, $lightness: -2%, $space: hsl); + border-color: color.adjust($primary-color-dark, $lightness: -5%, $space: hsl); + color: $light-color; + } + &:active, + &.active { + background: color.adjust($primary-color-dark, $lightness: -4%, $space: hsl); + border-color: color.adjust($primary-color-dark, $lightness: -7%, $space: hsl); + color: $light-color; + } + &.loading { + &::after { + border-bottom-color: $light-color; + border-left-color: $light-color; + } + } + } + + // Button Colors + &.btn-success { + @include button-variant($success-color); + } + + &.btn-error { + @include button-variant($error-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-y-sm $control-padding-x-sm; + } + + &.btn-lg { + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-y-lg $control-padding-x-lg; + } + + // 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-5; + line-height: $unit-4; + margin-left: $unit-1; + margin-right: -2px; + opacity: 1; + padding: $unit-h; + text-decoration: none; + width: $unit-5; + + &:focus, + &:hover { + background: rgba($bg-color, .5); + opacity: .95; + } + + &::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/app/assets/stylesheets/spectre-css/_calendars.scss b/app/assets/stylesheets/spectre-css/_calendars.scss new file mode 100644 index 000000000..6721e6b91 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_calendars.scss @@ -0,0 +1,224 @@ +@use "sass:color"; + +// Calendars +.calendar { + border: $border-width solid $border-color; + border-radius: $border-radius; + display: block; + min-width: 280px; + + .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; + text-align: center; + } + + .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; + cursor: pointer; + font-size: $font-size-sm; + height: $unit-7; + line-height: $unit-5; + outline: none; + padding: $unit-h; + position: relative; + text-align: center; + text-decoration: none; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + 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: color.adjust($primary-color-dark, $lightness: -5%, $space: hsl); + color: $light-color; + } + + // Calendar badge support + &.badge { + &::after { + position: absolute; + top: 3px; + right: 3px; + transform: translate(50%, -50%); + } + } + } + + .date-item, + .calendar-event { + &:disabled, + &.disabled { + cursor: default; + opacity: .25; + pointer-events: none; + } + } + + &.prev-month, + &.next-month { + .date-item, + .calendar-event { + opacity: .25; + } + } + } + + .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%; + } + } + + &.range-start, + &.range-end { + .date-item { + background: $primary-color-dark; + border-color: color.adjust($primary-color-dark, $lightness: -5%, $space: hsl); + color: $light-color; + } + } + + .date-item { + color: $primary-color; + } + } + + // Calendars size + &.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 { + border-radius: $border-radius; + font-size: $font-size-sm; + display: block; + margin: $unit-h auto; + overflow: hidden; + padding: 3px 4px; + text-overflow: ellipsis; + white-space: nowrap; + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_cards.scss b/app/assets/stylesheets/spectre-css/_cards.scss new file mode 100644 index 000000000..6b712e153 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_cards.scss @@ -0,0 +1,43 @@ +// 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-body { + flex: 1 1 auto; + } + + .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; + } + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_carousels.scss b/app/assets/stylesheets/spectre-css/_carousels.scss new file mode 100644 index 000000000..66dc51b27 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_carousels.scss @@ -0,0 +1,136 @@ +// Carousels +// The number of carousel images +$carousel-number: 8; + +%carousel-image-checked { + animation: carousel-slidein .75s ease-in-out 1; + opacity: 1; + z-index: $zindex-1; +} + +%carousel-nav-checked { + color: $gray-color-light; +} + +.carousel { + background: $bg-color; + display: block; + overflow: hidden; + position: relative; + width: 100%; + -webkit-overflow-scrolling: touch; + z-index: $zindex-0; + + .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: rgba($gray-color-light, .25); + border-color: rgba($gray-color-light, .5); + color: $gray-color-light; + opacity: 0; + position: absolute; + top: 50%; + transition: all .4s; + transform: translateY(-50%); + z-index: $zindex-1; + } + .item-prev { + left: 1rem; + } + .item-next { + right: 1rem; + } + } + + .carousel-locator { + @for $i from 1 through ($carousel-number) { + &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) { + @extend %carousel-image-checked; + } + } + + @for $i from 1 through ($carousel-number) { + &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) { + @extend %carousel-nav-checked; + } + } + } + + .carousel-nav { + bottom: $layout-spacing; + display: flex; + justify-content: center; + left: 50%; + position: absolute; + transform: translateX(-50%); + width: 10rem; + z-index: $zindex-1; + + .nav-item { + color: rgba($gray-color-light, .5); + 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: $unit-h; + 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/app/assets/stylesheets/spectre-css/_chips.scss b/app/assets/stylesheets/spectre-css/_chips.scss new file mode 100644 index 000000000..6729c5608 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_chips.scss @@ -0,0 +1,33 @@ +// Chips +.chip { + align-items: center; + background: $bg-color-dark; + border-radius: 5rem; + display: inline-flex; + font-size: 90%; + height: $unit-6; + line-height: $unit-4; + margin: $unit-h; + max-width: $control-width-sm; + overflow: hidden; + padding: $unit-1 $unit-2; + text-decoration: none; + text-overflow: ellipsis; + vertical-align: middle; + white-space: nowrap; + + &.active { + background: $primary-color; + color: $light-color; + } + + .avatar { + margin-left: -$unit-2; + margin-right: $unit-1; + } + + .btn-clear { + border-radius: 50%; + transform: scale(.75); + } +} diff --git a/app/assets/stylesheets/spectre-css/_codes.scss b/app/assets/stylesheets/spectre-css/_codes.scss new file mode 100644 index 000000000..5e20f8489 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_codes.scss @@ -0,0 +1,33 @@ +@use "sass:color"; + +// Codes +code { + @include label-base(); + @include label-variant($code-color, color.adjust($code-color, $lightness: 42.5%, $space: hsl)); + font-size: 85%; +} + +.code { + border-radius: $border-radius; + color: $body-font-color; + position: relative; + + &::before { + color: $gray-color; + content: attr(data-lang); + font-size: $font-size-sm; + position: absolute; + right: $layout-spacing; + top: $unit-h; + } + + code { + background: $bg-color; + color: inherit; + display: block; + line-height: 1.5; + overflow-x: auto; + padding: 1rem; + width: 100%; + } +} diff --git a/app/assets/stylesheets/spectre-css/_comparison-sliders.scss b/app/assets/stylesheets/spectre-css/_comparison-sliders.scss new file mode 100644 index 000000000..ec3609b3c --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_comparison-sliders.scss @@ -0,0 +1,116 @@ +// Image comparison slider +// Credit: http://codepen.io/solipsistacp/pen/Gpmaq +.comparison-slider { + height: 50vh; + overflow: hidden; + position: relative; + width: 100%; + -webkit-overflow-scrolling: touch; + + .comparison-before, + .comparison-after { + height: 100%; + left: 0; + margin: 0; + overflow: hidden; + position: absolute; + top: 0; + + img { + height: 100%; + object-fit: cover; + 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; + pointer-events: none; + 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: rgba($dark-color, .5); + 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/app/assets/stylesheets/spectre-css/_dropdowns.scss b/app/assets/stylesheets/spectre-css/_dropdowns.scss new file mode 100644 index 000000000..324440ba4 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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/app/assets/stylesheets/spectre-css/_empty.scss b/app/assets/stylesheets/spectre-css/_empty.scss new file mode 100644 index 000000000..accba9ca8 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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: $unit-16 $unit-8; + + .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/app/assets/stylesheets/spectre-css/_filters.scss b/app/assets/stylesheets/spectre-css/_filters.scss new file mode 100644 index 000000000..37ccc89ed --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_filters.scss @@ -0,0 +1,37 @@ +// Filters +// The number of filter options +$filter-number: 8 !default; + +%filter-checked-nav { + background: $primary-color; + color: $light-color; +} + +%filter-checked-body { + display: none; +} + +.filter { + .filter-nav { + margin: $layout-spacing 0; + } + + .filter-body { + display: flex; + flex-wrap: wrap; + } + + .filter-tag { + @for $i from 0 through ($filter-number) { + &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] { + @extend %filter-checked-nav; + } + } + + @for $i from 1 through ($filter-number) { + &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) { + @extend %filter-checked-body; + } + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_forms.scss b/app/assets/stylesheets/spectre-css/_forms.scss new file mode 100644 index 000000000..991b4368f --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_forms.scss @@ -0,0 +1,557 @@ +@use "sass:color"; + +// 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; + line-height: $line-height; + padding: $control-padding-y + $border-width 0; + + &.label-sm { + font-size: $font-size-sm; + padding: $control-padding-y-sm + $border-width 0; + } + + &.label-lg { + font-size: $font-size-lg; + padding: $control-padding-y-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; + display: block; + font-size: $font-size; + height: $control-size; + line-height: $line-height; + max-width: 100%; + outline: none; + padding: $control-padding-y $control-padding-x; + position: relative; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + width: 100%; + &:focus { + @include control-shadow(); + border-color: $primary-color; + } + &::placeholder { + color: $gray-color; + } + + // Input sizes + &.input-sm { + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-y-sm $control-padding-x-sm; + } + + &.input-lg { + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-y-lg $control-padding-x-lg; + } + + &.input-inline { + display: inline-block; + vertical-align: middle; + width: auto; + } + + // Input types + &[type="file"] { + height: auto; + } +} + +// Form element: Textarea +textarea.form-input { + &, + &.input-lg, + &.input-sm { + 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-y $control-padding-x; + vertical-align: middle; + width: 100%; + background: $bg-color-light; + &:focus { + @include control-shadow(); + border-color: $primary-color; + } + &::-ms-expand { + display: none; + } + + // Select sizes + &.select-sm { + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm; + } + + &.select-lg { + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg; + } + + // Multiple select + &[size], + &[multiple] { + height: auto; + padding: $control-padding-y $control-padding-x; + + option { + padding: $unit-h $unit-1; + } + } + &:not([multiple]):not([size]) { + background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem; + padding-right: $control-icon-size + $control-padding-x; + } +} + +// Form Icons +.has-icon-left, +.has-icon-right { + position: relative; + + .form-icon { + height: $control-icon-size; + margin: 0 $control-padding-y; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: $control-icon-size; + z-index: $zindex-0 + 1; + } +} + +.has-icon-left { + .form-icon { + left: $border-width; + } + + .form-input { + padding-left: $control-icon-size + $control-padding-y * 2; + } +} + +.has-icon-right { + .form-icon { + right: $border-width; + } + + .form-input { + padding-right: $control-icon-size + $control-padding-y * 2; + } +} + +// Form element: Checkbox and Radio +.form-checkbox, +.form-radio, +.form-switch { + display: block; + line-height: $line-height; + margin: ($control-size - $control-size-sm) * 0.5 0; + min-height: $control-size-sm; + padding: (($control-size-sm - $line-height) * 0.5) $control-padding-x (($control-size-sm - $line-height) * 0.5) ($control-icon-size + $control-padding-x); + position: relative; + + input { + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + width: 1px; + &:focus + .form-icon { + @include control-shadow(); + border-color: $primary-color; + } + &:checked + .form-icon { + background: $primary-color; + border-color: $primary-color; + } + } + + .form-icon { + border: $border-width solid $border-color-dark; + cursor: pointer; + display: inline-block; + position: absolute; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + } + + // Input checkbox, radio and switch sizes + &.input-sm { + font-size: $font-size-sm; + margin: 0; + } + + &.input-lg { + font-size: $font-size-lg; + margin: ($control-size-lg - $control-size-sm) * 0.5 0; + } +} + +.form-checkbox, +.form-radio { + .form-icon { + background: $bg-color-light; + height: $control-icon-size; + left: 0; + top: ($control-size-sm - $control-icon-size) * 0.5; + 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: 9px; + 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: 50%; + } + + input { + &:checked + .form-icon { + &::before { + background: $bg-color-light; + border-radius: 50%; + content: ""; + height: 6px; + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: 6px; + } + } + } +} + +// Form element: Switch +.form-switch { + padding-left: ($unit-8 + $control-padding-x); + + .form-icon { + background: $gray-color; + background-clip: padding-box; + border-radius: $unit-2 + $border-width; + height: $unit-4 + $border-width * 2; + left: 0; + top: ($control-size-sm - $unit-4) * 0.5 - $border-width; + width: $unit-8; + &::before { + background: $bg-color-light; + border-radius: 50%; + content: ""; + display: block; + height: $unit-4; + left: 0; + position: absolute; + top: 0; + transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s; + 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-y $control-padding-x; + white-space: nowrap; + + &.addon-sm { + font-size: $font-size-sm; + padding: $control-padding-y-sm $control-padding-x-sm; + } + + &.addon-lg { + font-size: $font-size-lg; + padding: $control-padding-y-lg $control-padding-x-lg; + } + } + + .form-input, + .form-select { + flex: 1 1 auto; + width: 1%; + } + + .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 { + background: color.adjust($success-color, $lightness: 53%, $space: hsl); + border-color: $success-color; + &:focus { + @include control-shadow($success-color); + } + } + + .has-error &, + &.is-error { + background: color.adjust($error-color, $lightness: 53%, $space: hsl); + 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 { + @include control-shadow($error-color); + border-color: $error-color; + } + } + } +} + +.form-checkbox { + .has-error &, + &.is-error { + input { + &:indeterminate + .form-icon { + background: $error-color; + border-color: $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); + background: color.adjust($error-color, $lightness: 53%, $space: hsl); + } + + & + .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 0; + + .form-group { + display: flex; + flex-wrap: wrap; + } +} + +// Form inline +.form-inline { + display: inline-block; +} diff --git a/app/assets/stylesheets/spectre-css/_hero.scss b/app/assets/stylesheets/spectre-css/_hero.scss new file mode 100644 index 000000000..004446181 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_hero.scss @@ -0,0 +1,22 @@ +// Hero +.hero { + display: flex; + flex-direction: column; + justify-content: space-between; + padding-bottom: 4rem; + padding-top: 4rem; + + &.hero-sm { + padding-bottom: 2rem; + padding-top: 2rem; + } + + &.hero-lg { + padding-bottom: 8rem; + padding-top: 8rem; + } + + .hero-body { + padding: $layout-spacing; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/spectre-css/_icons.scss b/app/assets/stylesheets/spectre-css/_icons.scss new file mode 100644 index 000000000..4f3c5ce66 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_icons.scss @@ -0,0 +1,5 @@ +// CSS Icons +@import "icons/icons-core"; +@import "icons/icons-navigation"; +@import "icons/icons-action"; +@import "icons/icons-object"; \ No newline at end of file diff --git a/app/assets/stylesheets/spectre-css/_labels.scss b/app/assets/stylesheets/spectre-css/_labels.scss new file mode 100644 index 000000000..222767ce6 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_labels.scss @@ -0,0 +1,36 @@ +@use "sass:color"; + +// Labels +.label { + @include label-base(); + @include label-variant(color.adjust($body-font-color, $lightness: 5%, $space: hsl), $bg-color-dark); + display: inline-block; + + // Label rounded + &.label-rounded { + border-radius: 5rem; + padding-left: .4rem; + padding-right: .4rem; + } + + // Label colors + &.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/app/assets/stylesheets/spectre-css/_layout.scss b/app/assets/stylesheets/spectre-css/_layout.scss new file mode 100644 index 000000000..d13583783 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_layout.scss @@ -0,0 +1,448 @@ +// Layout +@use "sass:math"; + +.container { + margin-left: auto; + margin-right: auto; + padding-left: $layout-spacing; + padding-right: $layout-spacing; + width: 100%; + + $grid-spacing: math.div($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 +.cols, +.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; + } +} +[class~="col-"], +.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, + &.col-auto { + 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, + .col-xl-auto { + 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%; + } + .col-xl-auto { + width: auto; + } + .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, + .col-lg-auto { + 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%; + } + .col-lg-auto { + width: auto; + } + .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, + .col-md-auto { + 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%; + } + .col-md-auto { + width: auto; + } + .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, + .col-sm-auto { + 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%; + } + .col-sm-auto { + width: auto; + } + .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, + .col-xs-auto { + 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%; + } + .col-xs-auto { + width: auto; + } + .hide-xs { + display: none !important; + } + .show-xs { + display: block !important; + } +} diff --git a/app/assets/stylesheets/spectre-css/_media.scss b/app/assets/stylesheets/spectre-css/_media.scss new file mode 100644 index 000000000..4029e4cdb --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_media.scss @@ -0,0 +1,75 @@ +// Media +// Image responsive +.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.video-responsive { + height: auto; + max-width: 100%; + + &::before { + content: none; + } +} + +.video-responsive-4-3 { + &::before { + padding-bottom: 75%; // Ratio 4:3 + } +} + +.video-responsive-1-1 { + &::before { + padding-bottom: 100%; // Ratio 1:1 + } +} + +// Figure +.figure { + margin: 0 0 $layout-spacing 0; + + .figure-caption { + color: $gray-color-dark; + margin-top: $layout-spacing; + } +} diff --git a/app/assets/stylesheets/spectre-css/_menus.scss b/app/assets/stylesheets/spectre-css/_menus.scss new file mode 100644 index 000000000..411cada32 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_menus.scss @@ -0,0 +1,66 @@ +// Menus +.menu { + @include shadow-variant(.05rem); + background: $bg-color-light; + border-radius: $border-radius; + list-style: none; + margin: 0; + min-width: $control-width-xs; + padding: $unit-2; + transform: translateY($layout-spacing-sm); + z-index: $zindex-3; + + &.menu-nav { + background: transparent; + box-shadow: none; + } + + .menu-item { + margin-top: 0; + padding: 0 $unit-2; + position: relative; + text-decoration: 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; + } + } + + .form-checkbox, + .form-radio, + .form-switch { + margin: $unit-h 0; + } + + & + .menu-item { + margin-top: $unit-1; + } + } + + .menu-badge { + align-items: center; + display: flex; + height: 100%; + position: absolute; + right: 0; + top: 0; + + .label { + margin-right: $unit-2; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/spectre-css/_meters.scss b/app/assets/stylesheets/spectre-css/_meters.scss new file mode 100644 index 000000000..9fd98b0e9 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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/app/assets/stylesheets/spectre-css/_mixins.scss b/app/assets/stylesheets/spectre-css/_mixins.scss new file mode 100644 index 000000000..d3a28d555 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_mixins.scss @@ -0,0 +1,10 @@ +// Mixins +@import "mixins/avatar"; +@import "mixins/button"; +@import "mixins/clearfix"; +@import "mixins/color"; +@import "mixins/label"; +@import "mixins/position"; +@import "mixins/shadow"; +@import "mixins/text"; +@import "mixins/toast"; \ No newline at end of file diff --git a/app/assets/stylesheets/spectre-css/_modals.scss b/app/assets/stylesheets/spectre-css/_modals.scss new file mode 100644 index 000000000..a7b3f10ec --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_modals.scss @@ -0,0 +1,87 @@ +// 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; + z-index: $zindex-0; + } + } + + &.modal-sm { + .modal-container { + max-width: $control-width-sm; + padding: 0 $unit-2; + } + } + + &.modal-lg { + .modal-overlay { + background: $bg-color-light; + } + + .modal-container { + box-shadow: none; + max-width: $control-width-lg; + } + } +} + +.modal-container { + @include shadow-variant(.2rem); + background: $bg-color-light; + border-radius: $border-radius; + display: flex; + flex-direction: column; + max-height: 75vh; + max-width: $control-width-md; + padding: 0 $unit-4; + width: 100%; + + &.modal-fullheight { + max-height: 100vh; + } + + .modal-header { + color: $dark-color; + padding: $unit-4; + } + + .modal-body { + overflow-y: auto; + padding: $unit-4; + position: relative; + } + + .modal-footer { + padding: $unit-4; + text-align: right; + } +} diff --git a/app/assets/stylesheets/spectre-css/_navbar.scss b/app/assets/stylesheets/spectre-css/_navbar.scss new file mode 100755 index 000000000..11642969b --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_navbar.scss @@ -0,0 +1,28 @@ +// 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; + + &:not(:first-child):last-child { + justify-content: flex-end; + } + } + + .navbar-center { + align-items: center; + display: flex; + flex: 0 0 auto; + } + + .navbar-brand { + font-size: $font-size-lg; + text-decoration: none; + } +} diff --git a/app/assets/stylesheets/spectre-css/_navs.scss b/app/assets/stylesheets/spectre-css/_navs.scss new file mode 100644 index 000000000..da266fd4b --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_navs.scss @@ -0,0 +1,36 @@ +@use "sass:color"; + +// 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: color.adjust($gray-color-dark, $lightness: -10%, $space: hsl); + font-weight: bold; + &:focus, + &:hover { + color: $primary-color; + } + } + } + } + + & .nav { + margin-bottom: $unit-2; + margin-left: $unit-4; + } +} diff --git a/app/assets/stylesheets/spectre-css/_normalize.scss b/app/assets/stylesheets/spectre-css/_normalize.scss new file mode 100644 index 000000000..a098a84dc --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_normalize.scss @@ -0,0 +1,446 @@ +/* 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; +} + +/** + * Modify default styling of address. + */ + +address { + font-style: normal; +} + +/** + * 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; + outline: none; +} + +/* 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/app/assets/stylesheets/spectre-css/_off-canvas.scss b/app/assets/stylesheets/spectre-css/_off-canvas.scss new file mode 100644 index 000000000..f3b8b9f1c --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_off-canvas.scss @@ -0,0 +1,95 @@ +// Off canvas menus +$off-canvas-breakpoint: $size-lg !default; + +.off-canvas { + display: flex; + flex-flow: nowrap; + height: 100%; + position: relative; + width: 100%; + + .off-canvas-toggle { + display: block; + position: absolute; + top: $layout-spacing; + transition: none; + z-index: $zindex-0; + @if $rtl == true { + right: $layout-spacing; + } @else { + left: $layout-spacing; + } + } + + .off-canvas-sidebar { + background: $bg-color; + bottom: 0; + min-width: 10rem; + overflow-y: auto; + position: fixed; + top: 0; + transition: transform .25s; + z-index: $zindex-2; + @if $rtl == true { + right: 0; + transform: translateX(100%); + } @else { + left: 0; + transform: translateX(-100%); + } + } + + .off-canvas-content { + flex: 1 1 auto; + height: 100%; + padding: $layout-spacing $layout-spacing $layout-spacing 4rem; + } + + .off-canvas-overlay { + background: rgba($dark-color, .1); + border-color: transparent; + border-radius: 0; + bottom: 0; + display: none; + height: 100%; + left: 0; + position: fixed; + right: 0; + top: 0; + width: 100%; + } + + .off-canvas-sidebar { + &:target, + &.active { + transform: translateX(0); + } + + &:target ~ .off-canvas-overlay, + &.active ~ .off-canvas-overlay { + display: block; + z-index: $zindex-1; + } + } +} + +// Responsive layout +@media (min-width: $off-canvas-breakpoint) { + .off-canvas { + &.off-canvas-sidebar-show { + .off-canvas-toggle { + display: none; + } + + .off-canvas-sidebar { + flex: 0 0 auto; + position: relative; + transform: none; + } + + .off-canvas-overlay { + display: none !important; + } + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_pagination.scss b/app/assets/stylesheets/spectre-css/_pagination.scss new file mode 100644 index 000000000..4c0e01132 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_pagination.scss @@ -0,0 +1,60 @@ +// 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; + 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/app/assets/stylesheets/spectre-css/_panels.scss b/app/assets/stylesheets/spectre-css/_panels.scss new file mode 100644 index 000000000..386f96ecc --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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/app/assets/stylesheets/spectre-css/_parallax.scss b/app/assets/stylesheets/spectre-css/_parallax.scss new file mode 100644 index 000000000..ea244e547 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_parallax.scss @@ -0,0 +1,135 @@ +// Parallax +$parallax-deg: 3deg !default; +$parallax-offset: 4.5px !default; +$parallax-offset-z: 50px !default; +$parallax-perspective: 1000px !default; +$parallax-scale: .95 !default; +$parallax-fade-color: rgba(255, 255, 255, .35) !default; + +// Mixin: Parallax direction +@mixin parallax-dir() { + height: 50%; + outline: none; + position: absolute; + width: 50%; + z-index: $zindex-1; +} + +.parallax { + display: block; + height: auto; + position: relative; + width: auto; + + .parallax-content { + @include shadow-variant(1rem); + height: auto; + 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 rgba($dark-color, .75); + top: 0; + transform: translateZ($parallax-offset-z) scale($parallax-scale); + transition: transform .4s; + width: 100%; + z-index: $zindex-0; + } + + .parallax-top-left { + @include parallax-dir(); + left: 0; + top: 0; + + &:focus ~ .parallax-content, + &:hover ~ .parallax-content { + transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg); + + &::before { + background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 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; + + &:focus ~ .parallax-content, + &:hover ~ .parallax-content { + transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg); + + &::before { + background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 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; + + &:focus ~ .parallax-content, + &:hover ~ .parallax-content { + transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg); + + &::before { + background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 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; + + &:focus ~ .parallax-content, + &:hover ~ .parallax-content { + transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg); + + &::before { + background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%); + } + + .parallax-front { + transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale); + } + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_popovers.scss b/app/assets/stylesheets/spectre-css/_popovers.scss new file mode 100644 index 000000000..35b6bcd83 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_popovers.scss @@ -0,0 +1,65 @@ +// Popovers +.popover { + display: inline-block; + position: relative; + + .popover-container { + left: 50%; + opacity: 0; + padding: $layout-spacing; + position: absolute; + top: 0; + transform: translate(-50%, -50%) scale(0); + transition: transform .2s; + width: $control-width-sm; + z-index: $zindex-3; + } + + *:focus + .popover-container, + &:hover .popover-container { + display: block; + opacity: 1; + transform: translate(-50%, -100%) scale(1); + } + + &.popover-right { + .popover-container { + left: 100%; + top: 50%; + } + + *:focus + .popover-container, + &:hover .popover-container { + transform: translate(0, -50%) scale(1); + } + } + + &.popover-bottom { + .popover-container { + left: 50%; + top: 100%; + } + + *:focus + .popover-container, + &:hover .popover-container { + transform: translate(-50%, 0) scale(1); + } + } + + &.popover-left { + .popover-container { + left: 0; + top: 50%; + } + + *:focus + .popover-container, + &:hover .popover-container { + transform: translate(-100%, -50%) scale(1); + } + } + + .card { + @include shadow-variant(.2rem); + border: 0; + } +} diff --git a/app/assets/stylesheets/spectre-css/_progress.scss b/app/assets/stylesheets/spectre-css/_progress.scss new file mode 100644 index 000000000..f173772b6 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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/app/assets/stylesheets/spectre-css/_sliders.scss b/app/assets/stylesheets/spectre-css/_sliders.scss new file mode 100644 index 000000000..52cd631f7 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_sliders.scss @@ -0,0 +1,99 @@ +// 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; + } + + &.tooltip:not([data-tooltip]) { + &::after { + content: attr(value); + } + } + + // 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) * 0.5; + transition: transform .2s; + width: $unit-3; + } + &::-moz-range-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s; + width: $unit-3; + } + &::-ms-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s; + 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/app/assets/stylesheets/spectre-css/_steps.scss b/app/assets/stylesheets/spectre-css/_steps.scss new file mode 100644 index 000000000..f642ff8b6 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_steps.scss @@ -0,0 +1,71 @@ +// 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: $primary-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 { + color: $gray-color; + + &::before { + background: $border-color; + } + } + } + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_tables.scss b/app/assets/stylesheets/spectre-css/_tables.scss new file mode 100644 index 000000000..656c03e50 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_tables.scss @@ -0,0 +1,57 @@ +// Tables +.table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + @if $rtl == true { + text-align: right; + } @else { + text-align: left; + } + + &.table-striped { + tbody { + tr:nth-of-type(odd) { + background: $bg-color; + } + } + } + + &, + &.table-striped { + tbody { + tr { + &.active { + background: $bg-color-dark; + } + } + } + } + + &.table-hover { + tbody { + tr { + &:hover { + background: $bg-color-dark; + } + } + } + } + + // Scollable tables + &.table-scroll { + display: block; + overflow-x: auto; + padding-bottom: .75rem; + white-space: nowrap; + } + + td, + th { + border-bottom: $border-width solid $border-color; + padding: $unit-3 $unit-2; + } + th { + border-bottom-width: $border-width-lg; + } +} diff --git a/app/assets/stylesheets/spectre-css/_tabs.scss b/app/assets/stylesheets/spectre-css/_tabs.scss new file mode 100644 index 000000000..0dcbaf37a --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_tabs.scss @@ -0,0 +1,66 @@ +// 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; + + 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-action { + flex: 1 0 auto; + text-align: right; + } + + .btn-clear { + margin-top: -$unit-1; + } + } + + &.tab-block { + .tab-item { + flex: 1 0 0; + text-align: center; + + a { + margin: 0; + } + + .badge { + &[data-badge]::after { + position: absolute; + right: $unit-h; + top: $unit-h; + transform: translate(0, 0); + } + } + } + } + + &:not(.tab-block) { + .badge { + padding-right: 0; + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_tiles.scss b/app/assets/stylesheets/spectre-css/_tiles.scss new file mode 100644 index 000000000..742bbaeb5 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_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 { + @include text-ellipsis(); + margin-bottom: 0; + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_timelines.scss b/app/assets/stylesheets/spectre-css/_timelines.scss new file mode 100644 index 000000000..c56746d2c --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_timelines.scss @@ -0,0 +1,56 @@ +// 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 { + align-items: center; + border-radius: 50%; + color: $light-color; + display: flex; + height: $unit-6; + justify-content: center; + 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; + line-height: $line-height; + &::before { + content: none; + } + } + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_toasts.scss b/app/assets/stylesheets/spectre-css/_toasts.scss new file mode 100644 index 000000000..fef15f8db --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_toasts.scss @@ -0,0 +1,48 @@ +// Toasts +.toast { + @include toast-variant($dark-color); + border: $border-width solid $dark-color; + border-radius: $border-radius; + color: $light-color; + display: block; + padding: $layout-spacing; + 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: $unit-h; + } + + p { + &:last-child { + margin-bottom: 0; + } + } +} diff --git a/app/assets/stylesheets/spectre-css/_tooltips.scss b/app/assets/stylesheets/spectre-css/_tooltips.scss new file mode 100644 index 000000000..8693b67be --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_tooltips.scss @@ -0,0 +1,79 @@ +// Tooltips +.tooltip { + position: relative; + &::after { + background: rgba($dark-color, .95); + 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-width-sm; + opacity: 0; + overflow: hidden; + padding: $unit-1 $unit-2; + pointer-events: none; + position: absolute; + text-overflow: ellipsis; + transform: translate(-50%, $unit-2); + transition: opacity .2s, transform .2s; + white-space: pre; + 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/app/assets/stylesheets/spectre-css/_typography.scss b/app/assets/stylesheets/spectre-css/_typography.scss new file mode 100644 index 000000000..4ec9fc496 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_typography.scss @@ -0,0 +1,131 @@ +@use "sass:color"; + +// Typography +// Headings +h1, +h2, +h3, +h4, +h5, +h6 { + color: inherit; + font-weight: 500; + line-height: 1.2; + margin-bottom: .5em; + 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 { + margin: 0 0 $line-height; +} + +// 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); + font-size: $font-size-sm; +} + +mark { + @include label-variant($body-font-color, $highlight-color); + border-bottom: $unit-o solid color.adjust($highlight-color, $lightness: -15%, $space: hsl); + border-radius: $border-radius; + padding: $unit-o $unit-h 0; +} + +// 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/app/assets/stylesheets/spectre-css/_utilities.scss b/app/assets/stylesheets/spectre-css/_utilities.scss new file mode 100644 index 000000000..80f1e0b55 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_utilities.scss @@ -0,0 +1,8 @@ +@import "utilities/colors"; +@import "utilities/cursors"; +@import "utilities/display"; +@import "utilities/divider"; +@import "utilities/loading"; +@import "utilities/position"; +@import "utilities/shapes"; +@import "utilities/text"; diff --git a/app/assets/stylesheets/spectre-css/_variables.scss b/app/assets/stylesheets/spectre-css/_variables.scss new file mode 100644 index 000000000..3cd1fc276 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_variables.scss @@ -0,0 +1,119 @@ +@use "sass:color"; + +// Core variables +$version: "0.5.9"; + +// Core features +$rtl: false !default; + +// Core colors +$primary-color: #5755d9 !default; +$primary-color-dark: color.adjust($primary-color, $lightness: -3%, $space: hsl) !default; +$primary-color-light: color.adjust($primary-color, $lightness: 3%, $space: hsl) !default; +$secondary-color: color.adjust($primary-color, $lightness: 37.5%, $space: hsl) !default; +$secondary-color-dark: color.adjust($secondary-color, $lightness: -3%, $space: hsl) !default; +$secondary-color-light: color.adjust($secondary-color, $lightness: 3%, $space: hsl) !default; + +// Gray colors +$dark-color: #303742 !default; +$light-color: #fff !default; +$gray-color: color.adjust($dark-color, $lightness: 55%, $space: hsl) !default; +$gray-color-dark: color.adjust($gray-color, $lightness: -30%, $space: hsl) !default; +$gray-color-light: color.adjust($gray-color, $lightness: 20%, $space: hsl) !default; + +$border-color: color.adjust($dark-color, $lightness: 65%, $space: hsl) !default; +$border-color-dark: color.adjust($border-color, $lightness: -10%, $space: hsl) !default; +$border-color-light: color.adjust($border-color, $lightness: 8%, $space: hsl) !default; +$bg-color: color.adjust($dark-color, $lightness: 75%, $space: hsl) !default; +$bg-color-dark: color.adjust($bg-color, $lightness: -3%, $space: hsl) !default; +$bg-color-light: $light-color !default; + +// Control colors +$success-color: #32b643 !default; +$warning-color: #ffb700 !default; +$error-color: #e85600 !default; + +// Other colors +$code-color: #d73e48 !default; +$highlight-color: #ffe9b3 !default; +$body-bg: $bg-color-light !default; +$body-font-color: color.adjust($dark-color, $lightness: 5%, $space: hsl) !default; +$link-color: $primary-color !default; +$link-color-dark: color.adjust($link-color, $lightness: -10%, $space: hsl) !default; +$link-color-light: color.adjust($link-color, $lightness: 10%, $space: hsl) !default; + +// 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 !default; +$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default; +$fallback-font-family: "Helvetica Neue", sans-serif !default; +$cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default; +$cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default; +$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default; +$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default; +$body-font-family: $base-font-family, $fallback-font-family !default; + +// Unit sizes +$unit-o: .05rem !default; +$unit-h: .1rem !default; +$unit-1: .2rem !default; +$unit-2: .4rem !default; +$unit-3: .6rem !default; +$unit-4: .8rem !default; +$unit-5: 1rem !default; +$unit-6: 1.2rem !default; +$unit-7: 1.4rem !default; +$unit-8: 1.6rem !default; +$unit-9: 1.8rem !default; +$unit-10: 2rem !default; +$unit-12: 2.4rem !default; +$unit-16: 3.2rem !default; + +// Font sizes +$html-font-size: 20px !default; +$html-line-height: 1.5 !default; +$font-size: .8rem !default; +$font-size-sm: .7rem !default; +$font-size-lg: .9rem !default; +$line-height: 1.2rem !default; + +// Sizes +$layout-spacing: $unit-2 !default; +$layout-spacing-sm: $unit-1 !default; +$layout-spacing-lg: $unit-4 !default; +$border-radius: $unit-h !default; +$border-width: $unit-o !default; +$border-width-lg: $unit-h !default; +$control-size: $unit-9 !default; +$control-size-sm: $unit-7 !default; +$control-size-lg: $unit-10 !default; +$control-padding-x: $unit-2 !default; +$control-padding-x-sm: $unit-2 * .75 !default; +$control-padding-x-lg: $unit-2 * 1.5 !default; +$control-padding-y: ($control-size - $line-height) * 0.5 - $border-width !default; +$control-padding-y-sm: ($control-size-sm - $line-height) * 0.5 - $border-width !default; +$control-padding-y-lg: ($control-size-lg - $line-height) * 0.5 - $border-width !default; +$control-icon-size: .8rem !default; + +$control-width-xs: 180px !default; +$control-width-sm: 320px !default; +$control-width-md: 640px !default; +$control-width-lg: 960px !default; +$control-width-xl: 1280px !default; + +// Responsive breakpoints +$size-xs: 480px !default; +$size-sm: 600px !default; +$size-md: 840px !default; +$size-lg: 960px !default; +$size-xl: 1280px !default; +$size-2x: 1440px !default; + +$responsive-breakpoint: $size-xs !default; + +// Z-index +$zindex-0: 1 !default; +$zindex-1: 100 !default; +$zindex-2: 200 !default; +$zindex-3: 300 !default; +$zindex-4: 400 !default; diff --git a/app/assets/stylesheets/spectre-css/_viewer-360.scss b/app/assets/stylesheets/spectre-css/_viewer-360.scss new file mode 100644 index 000000000..f91c57dfb --- /dev/null +++ b/app/assets/stylesheets/spectre-css/_viewer-360.scss @@ -0,0 +1,36 @@ +// 360 Degree Viewer + +// Mixin: Viewer slider sizes +@use "sass:math"; + +@mixin viewer-slider-size($image-number: 36) { + @for $s from 1 through ($image-number) { + .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image { + background-position-y: percentage(math.div((($s)-1) * 1, ($image-number)-1)); + } + } +} + +.viewer-360 { + align-items: center; + display: flex; + flex-direction: column; + + // Copy and add more numbers if you need + @include viewer-slider-size(36); + + .viewer-slider { + cursor: ew-resize; + margin: 1rem; + order: 2; + width: 60%; + } + + .viewer-image { + background-position-y: 0; + background-repeat: no-repeat; + background-size: 100%; + max-width: 100%; + order: 1; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/spectre-css/icons/_icons-action.scss b/app/assets/stylesheets/spectre-css/icons/_icons-action.scss new file mode 100644 index 000000000..a006295f6 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/icons/_icons-action.scss @@ -0,0 +1,315 @@ +// Icon resize +.icon-resize-horiz, +.icon-resize-vert { + &::before, + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + 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%; + 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; + height: $icon-border-width; + width: 100%; + } +} + +.icon-plus, +.icon-cross { + &::after { + background: currentColor; + 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; + 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; + 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; + height: 1em; + width: 1em; + } + &::after { + border: .2em solid currentColor; + border-top-color: transparent; + border-left-color: transparent; + height: 0; + left: 80%; + top: 20%; + width: 0; + } +} + +// Icon search +.icon-search { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + height: .75em; + left: 5%; + top: 5%; + transform: translate(0, 0) rotate(45deg); + width: .75em; + } + &::after { + background: currentColor; + 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; + height: .4em; + transform: translate(-40%, -60%) rotate(-45deg); + width: .85em; + } + &::after { + border: .15em solid currentColor; + border-top-color: transparent; + border-right-color: transparent; + 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; + height: .75em; + top: 60%; + width: .75em; + } + &::after { + background: currentColor; + box-shadow: -.25em .2em, .25em .2em; + height: $icon-border-width; + top: $icon-border-width*0.5; + 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; + 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; + height: .5em; + width: .6em; + } +} + +// Icon flag +.icon-flag { + &::before { + background: currentColor; + 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; + 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; + height: .9em; + width: .8em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-left: 0; + border-radius: $border-radius; + 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; + height: .5em; + width: .5em; + transform: translate(-50%, -60%) rotate(-135deg); + } + &::after { + background: currentColor; + height: .6em; + top: 40%; + width: $icon-border-width; + } +} + +.icon-upload { + &::before { + transform: translate(-50%, -60%) rotate(45deg); + } + &::after { + top: 50%; + } +} + +// Icon copy +.icon-copy { + &::before { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + border-right: 0; + border-bottom: 0; + height: .8em; + left: 40%; + top: 35%; + width: .8em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + height: .8em; + left: 60%; + top: 60%; + width: .8em; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/spectre-css/icons/_icons-core.scss b/app/assets/stylesheets/spectre-css/icons/_icons-core.scss new file mode 100644 index 000000000..9a67ae4f7 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/icons/_icons-core.scss @@ -0,0 +1,54 @@ +// Icon variables +$icon-border-width: $border-width-lg; +$icon-prefix: "icon"; + +// Icon base style +.#{$icon-prefix} { + 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 { + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + } + + // Icon sizes + &.icon-2x { + font-size: 1.6rem; + } + + &.icon-3x { + font-size: 2.4rem; + } + + &.icon-4x { + font-size: 3.2rem; + } +} + +// Component icon support +.accordion, +.btn, +.toast, +.menu { + .#{$icon-prefix} { + vertical-align: -10%; + } +} + +.btn-lg { + .#{$icon-prefix} { + vertical-align: -15%; + } +} diff --git a/app/assets/stylesheets/spectre-css/icons/_icons-navigation.scss b/app/assets/stylesheets/spectre-css/icons/_icons-navigation.scss new file mode 100644 index 000000000..92ab231aa --- /dev/null +++ b/app/assets/stylesheets/spectre-css/icons/_icons-navigation.scss @@ -0,0 +1,127 @@ +// 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; + 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; + height: $icon-border-width; + width: .8em; + } +} + +.icon-downward, +.icon-upward { + &::after { + background: currentColor; + 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; + height: 0; + transform: translate(-50%, -25%); + width: 0; + } +} + +// Icon menu +.icon-menu { + &::before { + background: currentColor; + box-shadow: 0 -.35em, 0 .35em; + 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; + height: 3px; + width: 3px; + } +} diff --git a/app/assets/stylesheets/spectre-css/icons/_icons-object.scss b/app/assets/stylesheets/spectre-css/icons/_icons-object.scss new file mode 100644 index 000000000..00597d8a4 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/icons/_icons-object.scss @@ -0,0 +1,161 @@ +// Icon time +.icon-time { + border: $icon-border-width solid currentColor; + border-radius: 50%; + &::before { + background: currentColor; + height: .4em; + transform: translate(-50%, -75%); + width: $icon-border-width; + } + &::after { + background: currentColor; + 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; + height: .8em; + width: 1em; + } + &::after { + border: $icon-border-width solid currentColor; + border-right: 0; + border-top: 0; + 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%; + height: .45em; + top: 25%; + width: .45em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: 50% 50% 0 0; + 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-bottom-right-radius: $border-radius; + border-left: 0; + border-top: 0; + height: .8em; + left: 65%; + top: 40%; + width: .7em; + } + &::after { + background: currentColor; + border-radius: $border-radius; + 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%; + height: .25em; + left: 35%; + top: 35%; + width: .25em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-left: 0; + 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; + 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; + height: .8em; + transform: translate(-50%, -60%) rotate(-45deg); + width: .8em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: 50%; + 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 -.1em, .17em -.1em; + height: .15em; + width: .15em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom-color: transparent; + border-radius: 50%; + border-right-color: transparent; + height: .5em; + transform: translate(-50%, -40%) rotate(-135deg); + width: .5em; + } +} diff --git a/app/assets/stylesheets/spectre-css/mixins/_avatar.scss b/app/assets/stylesheets/spectre-css/mixins/_avatar.scss new file mode 100644 index 000000000..c5692489e --- /dev/null +++ b/app/assets/stylesheets/spectre-css/mixins/_avatar.scss @@ -0,0 +1,6 @@ +// Avatar mixin +@mixin avatar-base($size: $unit-8) { + font-size: $size * 0.5; + height: $size; + width: $size; +} diff --git a/app/assets/stylesheets/spectre-css/mixins/_button.scss b/app/assets/stylesheets/spectre-css/mixins/_button.scss new file mode 100644 index 000000000..8dab4af02 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/mixins/_button.scss @@ -0,0 +1,56 @@ +@use "sass:color"; + +// Button variant mixin +@mixin button-variant($color: $primary-color) { + background: $color; + border-color: color.adjust($color, $lightness: -3%, $space: hsl); + color: $light-color; + &:focus { + @include control-shadow($color); + } + &:focus, + &:hover { + background: color.adjust($color, $lightness: -2%, $space: hsl); + border-color: color.adjust($color, $lightness: -5%, $space: hsl); + color: $light-color; + } + &:active, + &.active { + background: color.adjust($color, $lightness: -7%, $space: hsl); + border-color: color.adjust($color, $lightness: -10%, $space: hsl); + 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: color.adjust($color, $lightness: 50%, $space: hsl); + border-color: color.adjust($color, $lightness: -2%, $space: hsl); + color: $color; + } + &:active, + &.active { + background: $color; + border-color: color.adjust($color, $lightness: -5%, $space: hsl); + color: $light-color; + } + &.loading { + &::after { + border-bottom-color: $color; + border-left-color: $color; + } + } +} diff --git a/app/assets/stylesheets/spectre-css/mixins/_clearfix.scss b/app/assets/stylesheets/spectre-css/mixins/_clearfix.scss new file mode 100644 index 000000000..db6895f97 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/mixins/_clearfix.scss @@ -0,0 +1,8 @@ +// Clearfix mixin +@mixin clearfix() { + &::after { + clear: both; + content: ""; + display: table; + } +} diff --git a/app/assets/stylesheets/spectre-css/mixins/_color.scss b/app/assets/stylesheets/spectre-css/mixins/_color.scss new file mode 100644 index 000000000..6666eabab --- /dev/null +++ b/app/assets/stylesheets/spectre-css/mixins/_color.scss @@ -0,0 +1,29 @@ +@use "sass:color"; + +// Background color utility mixin +@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) { + #{$name} { + background: $color !important; + + @if (color.channel($color, 'lightness', $space: hsl) < 60) { + color: $light-color; + } + } +} + +// Text color utility mixin +@mixin text-color-variant($name: ".text-primary", $color: $primary-color) { + #{$name} { + color: $color !important; + } + + a#{$name} { + &:focus, + &:hover { + color: color.adjust($color, $lightness: -5%, $space: hsl); + } + &:visited { + color: color.adjust($color, $lightness: 5%, $space: hsl); + } + } +} diff --git a/app/assets/stylesheets/spectre-css/mixins/_label.scss b/app/assets/stylesheets/spectre-css/mixins/_label.scss new file mode 100644 index 000000000..1574f0269 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/mixins/_label.scss @@ -0,0 +1,11 @@ +// Label base style +@mixin label-base() { + border-radius: $border-radius; + line-height: 1.25; + padding: .1rem .2rem; +} + +@mixin label-variant($color: $light-color, $bg-color: $primary-color) { + background: $bg-color; + color: $color; +} diff --git a/app/assets/stylesheets/spectre-css/mixins/_position.scss b/app/assets/stylesheets/spectre-css/mixins/_position.scss new file mode 100644 index 000000000..98b5cfc0e --- /dev/null +++ b/app/assets/stylesheets/spectre-css/mixins/_position.scss @@ -0,0 +1,65 @@ +// Margin utility mixin +@mixin margin-variant($id: 1, $size: $unit-1) { + .m-#{$id} { + margin: $size !important; + } + + .mb-#{$id} { + margin-bottom: $size !important; + } + + .ml-#{$id} { + margin-left: $size !important; + } + + .mr-#{$id} { + margin-right: $size !important; + } + + .mt-#{$id} { + margin-top: $size !important; + } + + .mx-#{$id} { + margin-left: $size !important; + margin-right: $size !important; + } + + .my-#{$id} { + margin-bottom: $size !important; + margin-top: $size !important; + } +} + +// Padding utility mixin +@mixin padding-variant($id: 1, $size: $unit-1) { + .p-#{$id} { + padding: $size !important; + } + + .pb-#{$id} { + padding-bottom: $size !important; + } + + .pl-#{$id} { + padding-left: $size !important; + } + + .pr-#{$id} { + padding-right: $size !important; + } + + .pt-#{$id} { + padding-top: $size !important; + } + + .px-#{$id} { + padding-left: $size !important; + padding-right: $size !important; + } + + .py-#{$id} { + padding-bottom: $size !important; + padding-top: $size !important; + } +} diff --git a/app/assets/stylesheets/spectre-css/mixins/_shadow.scss b/app/assets/stylesheets/spectre-css/mixins/_shadow.scss new file mode 100644 index 000000000..79844491e --- /dev/null +++ b/app/assets/stylesheets/spectre-css/mixins/_shadow.scss @@ -0,0 +1,9 @@ +// Component focus shadow +@mixin control-shadow($color: $primary-color) { + box-shadow: 0 0 0 .1rem rgba($color, .2); +} + +// Shadow mixin +@mixin shadow-variant($offset) { + box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3); +} diff --git a/app/assets/stylesheets/spectre-css/mixins/_text.scss b/app/assets/stylesheets/spectre-css/mixins/_text.scss new file mode 100644 index 000000000..97dc99d0a --- /dev/null +++ b/app/assets/stylesheets/spectre-css/mixins/_text.scss @@ -0,0 +1,6 @@ +// Text Ellipsis +@mixin text-ellipsis() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/app/assets/stylesheets/spectre-css/mixins/_toast.scss b/app/assets/stylesheets/spectre-css/mixins/_toast.scss new file mode 100644 index 000000000..fa2bb13db --- /dev/null +++ b/app/assets/stylesheets/spectre-css/mixins/_toast.scss @@ -0,0 +1,5 @@ +// Toast variant mixin +@mixin toast-variant($color: $dark-color) { + background: rgba($color, .95); + border-color: $color; +} diff --git a/app/assets/stylesheets/spectre-css/spectre-exp.scss b/app/assets/stylesheets/spectre-css/spectre-exp.scss new file mode 100644 index 000000000..33ed3fe3b --- /dev/null +++ b/app/assets/stylesheets/spectre-css/spectre-exp.scss @@ -0,0 +1,18 @@ +// Variables and mixins +@import "variables"; +@import "mixins"; + +/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */ +// Experimentals +@import "autocomplete"; +@import "calendars"; +@import "carousels"; +@import "comparison-sliders"; +@import "filters"; +@import "meters"; +@import "off-canvas"; +@import "parallax"; +@import "progress"; +@import "sliders"; +@import "timelines"; +@import "viewer-360"; diff --git a/app/assets/stylesheets/spectre-css/spectre-icons.scss b/app/assets/stylesheets/spectre-css/spectre-icons.scss new file mode 100644 index 000000000..383624e88 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/spectre-icons.scss @@ -0,0 +1,10 @@ +// Variables and mixins +@import "variables"; +@import "mixins"; + +/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */ +// Icons +@import "icons/icons-core"; +@import "icons/icons-navigation"; +@import "icons/icons-action"; +@import "icons/icons-object"; diff --git a/app/assets/stylesheets/spectre-css/spectre.scss b/app/assets/stylesheets/spectre-css/spectre.scss new file mode 100644 index 000000000..cff1fde09 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/spectre.scss @@ -0,0 +1,49 @@ +// Variables and mixins +@import "variables"; +@import "mixins"; + +/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */ +// Reset and dependencies +@import "normalize"; +@import "base"; + +// Elements +@import "typography"; +@import "asian"; +@import "tables"; +@import "buttons"; +@import "forms"; +@import "labels"; +@import "codes"; +@import "media"; + +// Layout +@import "layout"; +@import "hero"; +@import "navbar"; + +// Components +@import "accordions"; +@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/app/assets/stylesheets/spectre-css/utilities/_colors.scss b/app/assets/stylesheets/spectre-css/utilities/_colors.scss new file mode 100644 index 000000000..28dd22181 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/utilities/_colors.scss @@ -0,0 +1,31 @@ +// 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-dark", $body-font-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); diff --git a/app/assets/stylesheets/spectre-css/utilities/_cursors.scss b/app/assets/stylesheets/spectre-css/utilities/_cursors.scss new file mode 100644 index 000000000..bd755c806 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/utilities/_cursors.scss @@ -0,0 +1,24 @@ +// Cursors +.c-hand { + cursor: pointer; +} + +.c-move { + cursor: move; +} + +.c-zoom-in { + cursor: zoom-in; +} + +.c-zoom-out { + cursor: zoom-out; +} + +.c-not-allowed { + cursor: not-allowed; +} + +.c-auto { + cursor: auto; +} \ No newline at end of file diff --git a/app/assets/stylesheets/spectre-css/utilities/_display.scss b/app/assets/stylesheets/spectre-css/utilities/_display.scss new file mode 100644 index 000000000..c6248e078 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/utilities/_display.scss @@ -0,0 +1,44 @@ +// 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; +} diff --git a/app/assets/stylesheets/spectre-css/utilities/_divider.scss b/app/assets/stylesheets/spectre-css/utilities/_divider.scss new file mode 100644 index 000000000..e6c09d2f0 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/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-light; + 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/app/assets/stylesheets/spectre-css/utilities/_loading.scss b/app/assets/stylesheets/spectre-css/utilities/_loading.scss new file mode 100644 index 000000000..2cfdefa25 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/utilities/_loading.scss @@ -0,0 +1,37 @@ +// Loading +.loading { + color: transparent !important; + min-height: $unit-4; + pointer-events: none; + position: relative; + &::after { + animation: loading 500ms infinite linear; + background: transparent; + 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; + opacity: 1; + padding: 0; + position: absolute; + top: 50%; + width: $unit-4; + z-index: $zindex-0; + } + + &.loading-lg { + min-height: $unit-10; + &::after { + height: $unit-8; + margin-left: -$unit-4; + margin-top: -$unit-4; + width: $unit-8; + } + } +} diff --git a/app/assets/stylesheets/spectre-css/utilities/_position.scss b/app/assets/stylesheets/spectre-css/utilities/_position.scss new file mode 100644 index 000000000..c1a7f756a --- /dev/null +++ b/app/assets/stylesheets/spectre-css/utilities/_position.scss @@ -0,0 +1,54 @@ +// Position +.clearfix { + @include clearfix(); +} + +.float-left { + float: left !important; +} + +.float-right { + float: right !important; +} + +.p-relative { + position: relative !important; +} + +.p-absolute { + position: absolute !important; +} + +.p-fixed { + position: fixed !important; +} + +.p-sticky { + position: sticky !important; +} + +.p-centered { + display: block; + float: none; + margin-left: auto; + margin-right: auto; +} + +.flex-centered { + align-items: center; + display: flex; + justify-content: center; +} + +// 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); diff --git a/app/assets/stylesheets/spectre-css/utilities/_shapes.scss b/app/assets/stylesheets/spectre-css/utilities/_shapes.scss new file mode 100644 index 000000000..23e131e94 --- /dev/null +++ b/app/assets/stylesheets/spectre-css/utilities/_shapes.scss @@ -0,0 +1,8 @@ +// Shapes +.s-rounded { + border-radius: $border-radius; +} + +.s-circle { + border-radius: 50%; +} \ No newline at end of file diff --git a/app/assets/stylesheets/spectre-css/utilities/_text.scss b/app/assets/stylesheets/spectre-css/utilities/_text.scss new file mode 100644 index 000000000..57969051a --- /dev/null +++ b/app/assets/stylesheets/spectre-css/utilities/_text.scss @@ -0,0 +1,76 @@ +// Text +// Text alignment utilities +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +.text-justify { + text-align: justify; +} + +// Text transform utilities +.text-lowercase { + text-transform: lowercase; +} + +.text-uppercase { + text-transform: uppercase; +} + +.text-capitalize { + text-transform: capitalize; +} + +// Text style utilities +.text-normal { + font-weight: normal; +} + +.text-bold { + font-weight: bold; +} + +.text-italic { + font-style: italic; +} + +.text-large { + font-size: 1.2em; +} + +.text-small { + font-size: .9em; +} + +.text-tiny { + font-size: .8em; +} + +.text-muted { + opacity: .8; +} + +// Text overflow utilities +.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/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss index a522255bb..884c1106b 100644 --- a/app/assets/stylesheets/styles.scss +++ b/app/assets/stylesheets/styles.scss @@ -1,11 +1,13 @@ +@use "sass:color"; + @import 'globals'; -@import '@spectre-org/spectre-css/src/spectre'; -@import '@spectre-org/spectre-css/src/spectre-icons'; -@import '@spectre-org/spectre-css/src/spectre-exp'; +@import 'spectre-css/spectre'; +@import 'spectre-css/spectre-icons'; +@import 'spectre-css/spectre-exp'; @import 'trix/dist/trix'; -@import '@spectre-org/spectre-css/src/mixins/_shadow'; +@import 'spectre-css/mixins/_shadow'; @import './partials/index'; @import './helpers/layouts_helper'; @@ -406,47 +408,47 @@ $photo-width: 187px; .feather-icon { height: 24px; width: 24px; - stroke: darken($secondary-color, 10%); + stroke: color.adjust($secondary-color, $lightness: -10%, $space: hsl); } .btn { - background-color: darken($secondary-color, 20%); - border-color: darken($secondary-color, 20%); + background-color: color.adjust($secondary-color, $lightness: -20%, $space: hsl); + border-color: color.adjust($secondary-color, $lightness: -20%, $space: hsl); color: white; &:hover, &:visited { - background-color: darken($secondary-color, 30%); - border-color: darken($secondary-color, 30%); + background-color: color.adjust($secondary-color, $lightness: -30%, $space: hsl); + border-color: color.adjust($secondary-color, $lightness: -30%, $space: hsl); color: white; } } &.action-bar-warning { - background-color: lighten($warning-color, 20%); - color: darken($warning-color, 30%); + background-color: color.adjust($warning-color, $lightness: 20%, $space: hsl); + color: color.adjust($warning-color, $lightness: -30%, $space: hsl); .btn { - background-color: darken($warning-color, 20%); - border-color: darken($warning-color, 20%); + background-color: color.adjust($warning-color, $lightness: -20%, $space: hsl); + border-color: color.adjust($warning-color, $lightness: -20%, $space: hsl); &:hover { - background-color: darken($warning-color, 30%); + background-color: color.adjust($warning-color, $lightness: -30%, $space: hsl); } } .feather-icon { - stroke: darken($warning-color, 10%); + stroke: color.adjust($warning-color, $lightness: -10%, $space: hsl); } } &.action-bar-error { - background-color: lighten($error-color, 20%); - color: darken($error-color, 30%); + background-color: color.adjust($error-color, $lightness: 20%, $space: hsl); + color: color.adjust($error-color, $lightness: -30%, $space: hsl); .btn { background-color: $error-color; - border-color: darken($error-color, 10%); + border-color: color.adjust($error-color, $lightness: -10%, $space: hsl); color: white; &:hover { - background-color: darken($error-color, 10%); + background-color: color.adjust($error-color, $lightness: -10%, $space: hsl); color: white; } } .feather-icon { - stroke: darken($error-color, 10%); + stroke: color.adjust($error-color, $lightness: -10%, $space: hsl); } } } @@ -499,7 +501,7 @@ legend { } .form-group.has-error .label-required-field { - background-color: lighten($error-color, 20%); + background-color: color.adjust($error-color, $lightness: 20%, $space: hsl); color: inherit; } @@ -1003,10 +1005,10 @@ table.monthly-adjustments { } &.btn-primary { background: $primary-color; - border-color: darken($primary-color, 10%); + border-color: color.adjust($primary-color, $lightness: -10%, $space: hsl); color: white; &:hover { - background: darken($primary-color, 10%); + background: color.adjust($primary-color, $lightness: -10%, $space: hsl); } &:active, &.active { background: $dark-color; @@ -1015,10 +1017,10 @@ table.monthly-adjustments { } &.btn-secondary { background: $secondary-color; - border-color: darken($secondary-color, 10%); + border-color: color.adjust($secondary-color, $lightness: -10%, $space: hsl); color: white; &:hover { - background: darken($secondary-color, 10%); + background: color.adjust($secondary-color, $lightness: -10%, $space: hsl); } &:active, &.active { background: $dark-color; diff --git a/package.json b/package.json index ba5d96eff..1af37381e 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "@rails/activestorage": "^7.2.100", "@rails/ujs": "^7.1.400", "@selectize/selectize": "^0.15.2", - "@spectre-org/spectre-css": "^1.2.0", "awesomplete": "^1.1.7", "esbuild": "^0.24.0", "feather-icons": "^4.29.2", @@ -34,6 +33,6 @@ "scripts": { "build": "esbuild app/javascript/*.* --minify --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --target=chrome58,firefox57,safari11 --define:process.env.APPSIGNAL_FRONTEND_KEY=\\\"$APPSIGNAL_FRONTEND_KEY\\\"", "build-dev": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --target=chrome58,firefox57,safari11 --define:process.env.APPSIGNAL_FRONTEND_KEY=\\\"$APPSIGNAL_FRONTEND_KEY\\\"", - "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" + "build:css": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" } } diff --git a/yarn.lock b/yarn.lock index 3fc751ef7..da812abe0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -296,11 +296,6 @@ optionalDependencies: jquery-ui "^1.13.2" -"@spectre-org/spectre-css@^1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@spectre-org/spectre-css/-/spectre-css-1.2.0.tgz#c54e4321042eb32ed4d96f23f69769055ab45601" - integrity sha512-EaVfxZcXty6nIu8WFcwuHrjn2dXY+d5K8pCrB6eKsQUvEGiUPF2GOBcF9LoxAfDkmJwn/QAIQRuQ8mursccs8g== - "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"