diff --git a/src/scss/bootstrap-dark/_breadcrumb.scss b/src/scss/bootstrap-dark/_breadcrumb.scss index f38076dd2..c3560d73f 100644 --- a/src/scss/bootstrap-dark/_breadcrumb.scss +++ b/src/scss/bootstrap-dark/_breadcrumb.scss @@ -5,12 +5,9 @@ .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { - padding-left: $breadcrumb-item-padding-x; &::before { color: $breadcrumb-divider-color-alt; - // TODO: DO I NEED THIS? - // content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; } } diff --git a/src/scss/bootstrap-dark/_card.scss b/src/scss/bootstrap-dark/_card.scss index b028c4b26..71e8d2f8c 100644 --- a/src/scss/bootstrap-dark/_card.scss +++ b/src/scss/bootstrap-dark/_card.scss @@ -3,6 +3,7 @@ .card { background-color: $card-bg-alt; border: $card-border-width solid $card-border-color-alt; + @include box-shadow($card-box-shadow-alt); } .card-body { diff --git a/src/scss/bootstrap-dark/_helpers.scss b/src/scss/bootstrap-dark/_helpers.scss index 15b63a2e5..89b502389 100644 --- a/src/scss/bootstrap-dark/_helpers.scss +++ b/src/scss/bootstrap-dark/_helpers.scss @@ -2,6 +2,8 @@ @import "helpers/colored-links"; // @import "helpers/ratio"; // no colors here // @import "helpers/position"; // no colors here +// @import "helpers/stacks"; // no colors here // @import "helpers/visually-hidden"; // no colors here // @import "helpers/stretched-link"; // no colors here // @import "helpers/text-truncation"; // no colors here +@import "helpers/vr"; diff --git a/src/scss/bootstrap-dark/_mixins.scss b/src/scss/bootstrap-dark/_mixins.scss index e22aaaa76..518a88a1e 100644 --- a/src/scss/bootstrap-dark/_mixins.scss +++ b/src/scss/bootstrap-dark/_mixins.scss @@ -1,4 +1,5 @@ @import "mixins/color-scheme"; +@import "mixins/backdrop"; @import "mixins/buttons"; @import "mixins/forms"; @import "mixins/table-variants"; diff --git a/src/scss/bootstrap-dark/_modal.scss b/src/scss/bootstrap-dark/_modal.scss index f9a38cf63..7eeb4c987 100644 --- a/src/scss/bootstrap-dark/_modal.scss +++ b/src/scss/bootstrap-dark/_modal.scss @@ -9,11 +9,7 @@ // Modal background .modal-backdrop { - background-color: $modal-backdrop-bg-alt; - - // Fade for backdrop - &.fade { opacity: 0; } - &.show { opacity: $modal-backdrop-opacity-alt; } + @include overlay-backdrop-alt($modal-backdrop-bg-alt, $modal-backdrop-opacity-alt); } // Modal header diff --git a/src/scss/bootstrap-dark/_navbar.scss b/src/scss/bootstrap-dark/_navbar.scss index 72525b498..982dc78ac 100644 --- a/src/scss/bootstrap-dark/_navbar.scss +++ b/src/scss/bootstrap-dark/_navbar.scss @@ -15,6 +15,25 @@ // } } +// Generate series of `.navbar-expand-*` responsive classes for configuring +// where your navbar collapses. +// TODO : NB!!! THIS BREAKS THE MEDIA QUERY GENERATION +// .navbar-expand { +// @each $breakpoint in map-keys($grid-breakpoints) { +// $next: breakpoint-next($breakpoint, $grid-breakpoints); +// $infix: breakpoint-infix($next, $grid-breakpoints); +// +// // stylelint-disable-next-line scss/selector-no-union-class-name +// &#{$infix} { +// @include media-breakpoint-up($next) { +// .offcanvas { +// background-color: transparent; +// } +// } +// } +// } +// } + // Navbar themes .navbar-light { .navbar-brand { diff --git a/src/scss/bootstrap-dark/_offcanvas.scss b/src/scss/bootstrap-dark/_offcanvas.scss index be27da56c..5b210c06d 100644 --- a/src/scss/bootstrap-dark/_offcanvas.scss +++ b/src/scss/bootstrap-dark/_offcanvas.scss @@ -5,6 +5,10 @@ @include box-shadow($offcanvas-box-shadow-alt); } +.offcanvas-backdrop { + @include overlay-backdrop-alt($offcanvas-backdrop-bg-alt, $offcanvas-backdrop-opacity-alt); +} + .offcanvas-start { border-right: $offcanvas-border-width solid $offcanvas-border-color-alt; } diff --git a/src/scss/bootstrap-dark/_placeholders.scss b/src/scss/bootstrap-dark/_placeholders.scss new file mode 100644 index 000000000..689d9af64 --- /dev/null +++ b/src/scss/bootstrap-dark/_placeholders.scss @@ -0,0 +1,14 @@ +.placeholder { + background-color: currentColor; + opacity: $placeholder-opacity-max-alt; +} + +@keyframes placeholder-glow { + 50% { + opacity: $placeholder-opacity-min-alt; + } +} + +.placeholder-wave { + mask-image: linear-gradient(130deg, $white-alt 55%, rgba(255, 255, 255, (1 - $placeholder-opacity-min-alt)) 75%, $white-alt 95%); +} diff --git a/src/scss/bootstrap-dark/_popover.scss b/src/scss/bootstrap-dark/_popover.scss index 85760d870..136e0db84 100644 --- a/src/scss/bootstrap-dark/_popover.scss +++ b/src/scss/bootstrap-dark/_popover.scss @@ -74,7 +74,7 @@ .popover-header { color: $popover-header-color-alt; background-color: $popover-header-bg-alt; - border-bottom: $popover-border-width solid shade-color($popover-header-bg-alt, 10%); + border-bottom: $popover-border-width solid $popover-border-color-alt; } .popover-body { diff --git a/src/scss/bootstrap-dark/_reboot.scss b/src/scss/bootstrap-dark/_reboot.scss index 820e3f890..85219e7ee 100644 --- a/src/scss/bootstrap-dark/_reboot.scss +++ b/src/scss/bootstrap-dark/_reboot.scss @@ -10,8 +10,8 @@ // Body body { - color: $body-color-alt; - background-color: $body-bg-alt; // 2 + color: var(--#{$variable-prefix}body-color-alt); + background-color: var(--#{$variable-prefix}body-bg-alt); // 2 } diff --git a/src/scss/bootstrap-dark/_root.scss b/src/scss/bootstrap-dark/_root.scss index 7c4e7368b..845db5d81 100644 --- a/src/scss/bootstrap-dark/_root.scss +++ b/src/scss/bootstrap-dark/_root.scss @@ -4,9 +4,28 @@ --#{$variable-prefix}#{$color}: #{$value}; } + @each $color, $value in $grays-alt { + --#{$variable-prefix}gray-#{$color}: #{$value}; + } + @each $color, $value in $theme-colors-alt { --#{$variable-prefix}#{$color}: #{$value}; } + @each $color, $value in $theme-colors-rgb-alt { + --#{$variable-prefix}#{$color}-rgb: #{$value}; + } + + --#{$variable-prefix}white-rgb: #{to-rgb($white-alt)}; + --#{$variable-prefix}black-rgb: #{to-rgb($black-alt)}; + --#{$variable-prefix}body-rgb: #{to-rgb($body-color-alt)}; + + // root and body + + --#{$variable-prefix}body-color: #{$body-color-alt}; + --#{$variable-prefix}body-bg: #{$body-bg-alt}; + + // ? + --#{$variable-prefix}gradient: #{$gradient-alt}; } diff --git a/src/scss/bootstrap-dark/_tables.scss b/src/scss/bootstrap-dark/_tables.scss index cf919e98e..9bc523b9a 100644 --- a/src/scss/bootstrap-dark/_tables.scss +++ b/src/scss/bootstrap-dark/_tables.scss @@ -4,7 +4,7 @@ .table { --#{$variable-prefix}table-bg: #{$table-bg-alt}; - --#{$variable-prefix}table-accent-bg: #{$table-bg-alt}; + --#{$variable-prefix}table-accent-bg: #{$table-accent-bg-alt}; --#{$variable-prefix}table-striped-color: #{$table-striped-color-alt}; --#{$variable-prefix}table-striped-bg: #{$table-striped-bg-alt}; --#{$variable-prefix}table-active-color: #{$table-active-color-alt}; @@ -24,9 +24,9 @@ // } // Highlight border color between thead, tbody and tfoot. - // > :not(:last-child) > :last-child > * { - // border-bottom-color: $table-group-separator-color-alt; - // } + > :not(:last-child) > :last-child > * { + border-bottom-color: $table-group-separator-color-alt; + } } diff --git a/src/scss/bootstrap-dark/_toasts.scss b/src/scss/bootstrap-dark/_toasts.scss index 6d2b0bdb3..7f643b44b 100644 --- a/src/scss/bootstrap-dark/_toasts.scss +++ b/src/scss/bootstrap-dark/_toasts.scss @@ -4,8 +4,8 @@ border: $toast-border-width solid $toast-border-color-alt; box-shadow: $toast-box-shadow-alt; - // DO I NEED THIS? - // &:not(.showing):not(.show) { + //// DO I NEED THIS? + // &.showing { // opacity: 0; // } } diff --git a/src/scss/bootstrap-dark/_utilities.scss b/src/scss/bootstrap-dark/_utilities.scss index b46a2f004..403547710 100644 --- a/src/scss/bootstrap-dark/_utilities.scss +++ b/src/scss/bootstrap-dark/_utilities.scss @@ -57,7 +57,7 @@ $utilities-alt: map-merge( ) ), // Text - // DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS. + // DON'T NEED TO DARK, CSS VARS TAKES CARE OF THIS. // "gradient": ( // property: background-image, // class: bg, @@ -67,12 +67,9 @@ $utilities-alt: map-merge( property: color, class: text, values: map-merge( - $theme-colors-alt, + $utilities-text-colors-alt, ( - "body": $body-color-alt, "muted": $text-muted-alt, - "white": $white-alt, - "black": $black-alt, "white-50": rgba($white-alt, .5), "black-50": rgba($black-alt, .5) ) @@ -82,10 +79,8 @@ $utilities-alt: map-merge( property: background-color, class: bg, values: map-merge( - $theme-colors-alt, + $utilities-bg-colors-alt, ( - "body": $body-bg-alt, - "white": $white-alt, "black": $black-alt ) ) diff --git a/src/scss/bootstrap-dark/_variables-alt.scss b/src/scss/bootstrap-dark/_variables-alt.scss index 9810c4b9e..a5f51ce66 100644 --- a/src/scss/bootstrap-dark/_variables-alt.scss +++ b/src/scss/bootstrap-dark/_variables-alt.scss @@ -13,17 +13,17 @@ $color-schemes: ( // items marked //** from https://bootswatch.com/darkly/ // items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129 -$white-alt: #f0f6fc !default; -$gray-100-alt: #c9d1d9 !default; -$gray-200-alt: #b1bac4 !default; -$gray-300-alt: #8b949e !default; -$gray-400-alt: #6e7681 !default; -$gray-500-alt: #484f58 !default; -$gray-600-alt: #30363d !default; -$gray-700-alt: #21262d !default; -$gray-800-alt: #161b22 !default; -$gray-900-alt: #0d1117 !default; -$black-alt: #010409 !default; +$white-alt: #fafafa !default; +$gray-100-alt: #e1e1e1 !default; //~~ +$gray-200-alt: #cfcfcf !default; //~~ +$gray-300-alt: #b1b1b1 !default; //~~ +$gray-400-alt: #9e9e9e !default; //~~ +$gray-500-alt: #7e7e7e !default; //~~ +$gray-600-alt: #626262 !default; //~~ +$gray-700-alt: #515151 !default; //~~ +$gray-800-alt: #3b3b3b !default; //~~ +$gray-900-alt: #222 !default; //~~ +$black-alt: #111 !default; //~~ // fusv-disable $grays-alt: ( @@ -39,7 +39,7 @@ $grays-alt: ( ) !default; // fusv-enable -$blue-alt: #1f6feb !default; +$blue-alt: #375a7f !default; $indigo-alt: #673ab7 !default; //~~ $purple-alt: #654ea3 !default; // Panatone CotY 2018 $pink-alt: #e83e8c !default; @@ -63,8 +63,8 @@ $colors-alt: ( "cyan": $cyan-alt, "white": $white-alt, "black": $black-alt, - "gray": $gray-600-alt, - "gray-dark": $gray-800-alt + "gray": #7e7e7e, // $gray-600, + "gray-dark": #121212 //$gray-800 ) !default; $primary-alt: $blue-alt !default; @@ -73,7 +73,7 @@ $success-alt: $green-alt !default; $info-alt: $cyan-alt !default; $warning-alt: $yellow-alt !default; $danger-alt: $red-alt !default; -$light-alt: $gray-100-alt !default; +$light-alt: $gray-400-alt !default; $dark-alt: $gray-800-alt !default; $theme-colors-alt: ( @@ -87,6 +87,8 @@ $theme-colors-alt: ( "dark": $dark-alt ) !default; +$theme-colors-rgb-alt: map-loop($theme-colors-alt, to-rgb, "$value") !default; + // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast $min-contrast-ratio-alt: 2.5 !default; @@ -94,6 +96,227 @@ $min-contrast-ratio-alt: 2.5 !default; $color-contrast-dark-alt: $black-alt !default; $color-contrast-light-alt: $white-alt !default; +// fusv-disable +$blue-100-alt: tint-color($blue-alt, 80%) !default; +$blue-200-alt: tint-color($blue-alt, 60%) !default; +$blue-300-alt: tint-color($blue-alt, 40%) !default; +$blue-400-alt: tint-color($blue-alt, 20%) !default; +$blue-500-alt: $blue-alt !default; +$blue-600-alt: shade-color($blue-alt, 20%) !default; +$blue-700-alt: shade-color($blue-alt, 40%) !default; +$blue-800-alt: shade-color($blue-alt, 60%) !default; +$blue-900-alt: shade-color($blue-alt, 80%) !default; + +$indigo-100-alt: tint-color($indigo-alt, 80%) !default; +$indigo-200-alt: tint-color($indigo-alt, 60%) !default; +$indigo-300-alt: tint-color($indigo-alt, 40%) !default; +$indigo-400-alt: tint-color($indigo-alt, 20%) !default; +$indigo-500-alt: $indigo-alt !default; +$indigo-600-alt: shade-color($indigo-alt, 20%) !default; +$indigo-700-alt: shade-color($indigo-alt, 40%) !default; +$indigo-800-alt: shade-color($indigo-alt, 60%) !default; +$indigo-900-alt: shade-color($indigo-alt, 80%) !default; + +$purple-100-alt: tint-color($purple-alt, 80%) !default; +$purple-200-alt: tint-color($purple-alt, 60%) !default; +$purple-300-alt: tint-color($purple-alt, 40%) !default; +$purple-400-alt: tint-color($purple-alt, 20%) !default; +$purple-500-alt: $purple-alt !default; +$purple-600-alt: shade-color($purple-alt, 20%) !default; +$purple-700-alt: shade-color($purple-alt, 40%) !default; +$purple-800-alt: shade-color($purple-alt, 60%) !default; +$purple-900-alt: shade-color($purple-alt, 80%) !default; + +$pink-100-alt: tint-color($pink-alt, 80%) !default; +$pink-200-alt: tint-color($pink-alt, 60%) !default; +$pink-300-alt: tint-color($pink-alt, 40%) !default; +$pink-400-alt: tint-color($pink-alt, 20%) !default; +$pink-500-alt: $pink-alt !default; +$pink-600-alt: shade-color($pink-alt, 20%) !default; +$pink-700-alt: shade-color($pink-alt, 40%) !default; +$pink-800-alt: shade-color($pink-alt, 60%) !default; +$pink-900-alt: shade-color($pink-alt, 80%) !default; + +$red-100-alt: tint-color($red-alt, 80%) !default; +$red-200-alt: tint-color($red-alt, 60%) !default; +$red-300-alt: tint-color($red-alt, 40%) !default; +$red-400-alt: tint-color($red-alt, 20%) !default; +$red-500-alt: $red-alt !default; +$red-600-alt: shade-color($red-alt, 20%) !default; +$red-700-alt: shade-color($red-alt, 40%) !default; +$red-800-alt: shade-color($red-alt, 60%) !default; +$red-900-alt: shade-color($red-alt, 80%) !default; + +$orange-100-alt: tint-color($orange-alt, 80%) !default; +$orange-200-alt: tint-color($orange-alt, 60%) !default; +$orange-300-alt: tint-color($orange-alt, 40%) !default; +$orange-400-alt: tint-color($orange-alt, 20%) !default; +$orange-500-alt: $orange-alt !default; +$orange-600-alt: shade-color($orange-alt, 20%) !default; +$orange-700-alt: shade-color($orange-alt, 40%) !default; +$orange-800-alt: shade-color($orange-alt, 60%) !default; +$orange-900-alt: shade-color($orange-alt, 80%) !default; + +$yellow-100-alt: tint-color($yellow-alt, 80%) !default; +$yellow-200-alt: tint-color($yellow-alt, 60%) !default; +$yellow-300-alt: tint-color($yellow-alt, 40%) !default; +$yellow-400-alt: tint-color($yellow-alt, 20%) !default; +$yellow-500-alt: $yellow-alt !default; +$yellow-600-alt: shade-color($yellow-alt, 20%) !default; +$yellow-700-alt: shade-color($yellow-alt, 40%) !default; +$yellow-800-alt: shade-color($yellow-alt, 60%) !default; +$yellow-900-alt: shade-color($yellow-alt, 80%) !default; + +$green-100-alt: tint-color($green-alt, 80%) !default; +$green-200-alt: tint-color($green-alt, 60%) !default; +$green-300-alt: tint-color($green-alt, 40%) !default; +$green-400-alt: tint-color($green-alt, 20%) !default; +$green-500-alt: $green-alt !default; +$green-600-alt: shade-color($green-alt, 20%) !default; +$green-700-alt: shade-color($green-alt, 40%) !default; +$green-800-alt: shade-color($green-alt, 60%) !default; +$green-900-alt: shade-color($green-alt, 80%) !default; + +$teal-100-alt: tint-color($teal-alt, 80%) !default; +$teal-200-alt: tint-color($teal-alt, 60%) !default; +$teal-300-alt: tint-color($teal-alt, 40%) !default; +$teal-400-alt: tint-color($teal-alt, 20%) !default; +$teal-500-alt: $teal-alt !default; +$teal-600-alt: shade-color($teal-alt, 20%) !default; +$teal-700-alt: shade-color($teal-alt, 40%) !default; +$teal-800-alt: shade-color($teal-alt, 60%) !default; +$teal-900-alt: shade-color($teal-alt, 80%) !default; + +$cyan-100-alt: tint-color($cyan-alt, 80%) !default; +$cyan-200-alt: tint-color($cyan-alt, 60%) !default; +$cyan-300-alt: tint-color($cyan-alt, 40%) !default; +$cyan-400-alt: tint-color($cyan-alt, 20%) !default; +$cyan-500-alt: $cyan-alt !default; +$cyan-600-alt: shade-color($cyan-alt, 20%) !default; +$cyan-700-alt: shade-color($cyan-alt, 40%) !default; +$cyan-800-alt: shade-color($cyan-alt, 60%) !default; +$cyan-900-alt: shade-color($cyan-alt, 80%) !default; + +$blues-alt: ( + "blue-100": $blue-100-alt, + "blue-200": $blue-200-alt, + "blue-300": $blue-300-alt, + "blue-400": $blue-400-alt, + "blue-500": $blue-500-alt, + "blue-600": $blue-600-alt, + "blue-700": $blue-700-alt, + "blue-800": $blue-800-alt, + "blue-900": $blue-900-alt +) !default; + +$indigos-alt: ( + "indigo-100": $indigo-100-alt, + "indigo-200": $indigo-200-alt, + "indigo-300": $indigo-300-alt, + "indigo-400": $indigo-400-alt, + "indigo-500": $indigo-500-alt, + "indigo-600": $indigo-600-alt, + "indigo-700": $indigo-700-alt, + "indigo-800": $indigo-800-alt, + "indigo-900": $indigo-900-alt +) !default; + +$purples-alt: ( + "purple-100": $purple-200-alt, + "purple-200": $purple-100-alt, + "purple-300": $purple-300-alt, + "purple-400": $purple-400-alt, + "purple-500": $purple-500-alt, + "purple-600": $purple-600-alt, + "purple-700": $purple-700-alt, + "purple-800": $purple-800-alt, + "purple-900": $purple-900-alt +) !default; + +$pinks-alt: ( + "pink-100": $pink-100-alt, + "pink-200": $pink-200-alt, + "pink-300": $pink-300-alt, + "pink-400": $pink-400-alt, + "pink-500": $pink-500-alt, + "pink-600": $pink-600-alt, + "pink-700": $pink-700-alt, + "pink-800": $pink-800-alt, + "pink-900": $pink-900-alt +) !default; + +$reds-alt: ( + "red-100": $red-100-alt, + "red-200": $red-200-alt, + "red-300": $red-300-alt, + "red-400": $red-400-alt, + "red-500": $red-500-alt, + "red-600": $red-600-alt, + "red-700": $red-700-alt, + "red-800": $red-800-alt, + "red-900": $red-900-alt +) !default; + +$oranges-alt: ( + "orange-100": $orange-100-alt, + "orange-200": $orange-200-alt, + "orange-300": $orange-300-alt, + "orange-400": $orange-400-alt, + "orange-500": $orange-500-alt, + "orange-600": $orange-600-alt, + "orange-700": $orange-700-alt, + "orange-800": $orange-800-alt, + "orange-900": $orange-900-alt +) !default; + +$yellows-alt: ( + "yellow-100": $yellow-100-alt, + "yellow-200": $yellow-200-alt, + "yellow-300": $yellow-300-alt, + "yellow-400": $yellow-400-alt, + "yellow-500": $yellow-500-alt, + "yellow-600": $yellow-600-alt, + "yellow-700": $yellow-700-alt, + "yellow-800": $yellow-800-alt, + "yellow-900": $yellow-900-alt +) !default; + +$greens-alt: ( + "green-100": $green-100-alt, + "green-200": $green-200-alt, + "green-300": $green-300-alt, + "green-400": $green-400-alt, + "green-500": $green-500-alt, + "green-600": $green-600-alt, + "green-700": $green-700-alt, + "green-800": $green-800-alt, + "green-900": $green-900-alt +) !default; + +$teals-alt: ( + "teal-100": $teal-100-alt, + "teal-200": $teal-200-alt, + "teal-300": $teal-300-alt, + "teal-400": $teal-400-alt, + "teal-500": $teal-500-alt, + "teal-600": $teal-600-alt, + "teal-700": $teal-700-alt, + "teal-800": $teal-800-alt, + "teal-900": $teal-900-alt +) !default; + +$cyans-alt: ( + "cyan-100": $cyan-100-alt, + "cyan-200": $cyan-200-alt, + "cyan-300": $cyan-300-alt, + "cyan-400": $cyan-400-alt, + "cyan-500": $cyan-500-alt, + "cyan-600": $cyan-600-alt, + "cyan-700": $cyan-700-alt, + "cyan-800": $cyan-800-alt, + "cyan-900": $cyan-900-alt +) !default; +// fusv-enable // Gradient // ______________________________________ @@ -109,12 +332,28 @@ $gradient-alt: linear-gradient(180deg, rgba($black-alt, .15), rgba($black-alt, 0 $body-bg-alt: $gray-900-alt !default; // $white !default; $body-color-alt: $gray-100-alt !default; // $gray-900 !default; +// Utilities maps +// ______________________________________ + +$utilities-colors-alt: map-merge( + $theme-colors-rgb-alt, + ( + "black": to-rgb($black-alt), + "white": to-rgb($white-alt), + "body": to-rgb($body-color-alt) + ) +) !default; + +$utilities-text-colors-alt: map-loop($utilities-colors-alt, rgba-css-var, "$key", "text") !default; + +$utilities-bg-colors-alt: map-loop($utilities-colors-alt, rgba-css-var, "$key", "bg") !default; + // Links // ______________________________________ // Style anchor elements. -$link-color-alt: #58a6ff !default; +$link-color-alt: shift-color($primary-alt, -15%) !default; $link-shade-percentage-alt: 20% !default; // TODO: should be -20%; $link-hover-color-alt: tint-color($link-color-alt, $link-shade-percentage-alt) !default; // TODO: shift-color @@ -157,18 +396,19 @@ $mark-bg-alt: rgba($yellow-alt, .5) !default; $table-color-alt: $body-color-alt !default; $table-bg-alt: transparent !default; +$table-accent-bg-alt: transparent !default; $table-striped-color-alt: $table-color-alt !default; $table-striped-bg-factor-alt: .05 !default; -$table-striped-bg-alt: rgba($black-alt, $table-striped-bg-factor-alt) !default; +$table-striped-bg-alt: rgba($white-alt, $table-striped-bg-factor-alt) !default; $table-active-color-alt: $table-color-alt !default; $table-active-bg-factor-alt: .1 !default; -$table-active-bg-alt: rgba($black-alt, $table-active-bg-factor-alt) !default; +$table-active-bg-alt: rgba($white-alt, $table-active-bg-factor-alt) !default; $table-hover-color-alt: $table-color-alt !default; $table-hover-bg-factor-alt: .075 !default; -$table-hover-bg-alt: rgba($black-alt, $table-hover-bg-factor-alt) !default; +$table-hover-bg-alt: rgba($white-alt, $table-hover-bg-factor-alt) !default; $table-border-factor-alt: .1 !default; $table-border-color-alt: $border-color-alt !default; @@ -231,11 +471,11 @@ $form-text-color-alt: $text-muted-alt !default; $form-label-color-alt: null !default; -$input-bg-alt: $gray-900-alt !default; -$input-disabled-bg-alt: $gray-800-alt !default; +$input-bg-alt: $body-bg-alt !default; +$input-disabled-bg-alt: $gray-900-alt !default; $input-disabled-border-color-alt: null !default; -$input-color-alt: $body-color-alt !default; +$input-color-alt: $gray-300-alt !default; $input-border-color-alt: $gray-700-alt !default; $input-box-shadow-alt: $box-shadow-inset-alt !default; @@ -310,7 +550,7 @@ $form-range-thumb-disabled-bg-alt: $gray-500-alt !default; $form-file-button-color-alt: $input-color-alt !default; $form-file-button-bg-alt: $input-group-addon-bg-alt !default; -$form-file-button-hover-bg-alt: tint-color($form-file-button-bg-alt, 5%) !default; +$form-file-button-hover-bg-alt: shade-color($form-file-button-bg-alt, 5%) !default; $form-floating-label-opacity-alt: .65 !default; @@ -383,7 +623,7 @@ $navbar-dark-brand-hover-color-alt: $navbar-dark-active-color-alt !def // Dropdown menu container and contents. $dropdown-color-alt: $body-color-alt !default; -$dropdown-bg-alt: $body-bg-alt !default; +$dropdown-bg-alt: $black-alt !default; $dropdown-border-color-alt: rgba($white-alt, .15) !default; $dropdown-divider-bg-alt: $dropdown-border-color-alt !default; $dropdown-box-shadow-alt: $box-shadow-alt !default; @@ -438,6 +678,13 @@ $pagination-disabled-bg-alt: $gray-900-alt !default; $pagination-disabled-border-color-alt: $gray-700-alt !default; +// Placeholders +// ______________________________________ + +$placeholder-opacity-max-alt: .5 !default; +$placeholder-opacity-min-alt: .2 !default; + + // Cards // ______________________________________ @@ -445,6 +692,7 @@ $card-border-color-alt: rgba($white-alt, .125) !default; $card-cap-bg-alt: rgba($white-alt, .03) !default; $card-cap-color-alt: null !default; $card-color-alt: null !default; +$card-box-shadow-alt: null !default; $card-bg-alt: $gray-900-alt !default; @@ -463,7 +711,7 @@ $accordion-button-active-color-alt: tint-color($primary-alt, 40%) !def $accordion-button-focus-border-color-alt: $input-focus-border-color-alt !default; $accordion-button-focus-box-shadow-alt: $btn-focus-box-shadow-alt !default; -$accordion-icon-color-alt: $accordion-color-alt !default; +$accordion-icon-color-alt: $accordion-button-color-alt !default; $accordion-icon-active-color-alt: $accordion-button-active-color-alt !default; $accordion-button-icon-alt: url("data:image/svg+xml,") !default; @@ -593,7 +841,7 @@ $figure-caption-color-alt: $gray-400-alt !default; // Breadcrumbs // ______________________________________ -$breadcrumb-bg-alt: null !default; // null !default; +$breadcrumb-bg-alt: null !default; $breadcrumb-divider-color-alt: $gray-400-alt !default; $breadcrumb-active-color-alt: $gray-400-alt !default; @@ -644,6 +892,8 @@ $offcanvas-border-color-alt: $modal-content-border-color-alt !default $offcanvas-bg-color-alt: $modal-content-bg-alt !default; $offcanvas-color-alt: $modal-content-color-alt !default; $offcanvas-box-shadow-alt: $modal-content-box-shadow-xs-alt !default; +$offcanvas-backdrop-bg-alt: $modal-backdrop-bg-alt !default; +$offcanvas-backdrop-opacity-alt: $modal-backdrop-opacity-alt !default; // Code diff --git a/src/scss/bootstrap-dark/forms/_floating-labels.scss b/src/scss/bootstrap-dark/forms/_floating-labels.scss index b91e03109..1ea16fd6b 100644 --- a/src/scss/bootstrap-dark/forms/_floating-labels.scss +++ b/src/scss/bootstrap-dark/forms/_floating-labels.scss @@ -5,9 +5,9 @@ // } > .form-control { - // &::placeholder { - // color: transparent; - // } + &::placeholder { + color: transparent; + } } > .form-control:focus, diff --git a/src/scss/bootstrap-dark/helpers/_vr.scss b/src/scss/bootstrap-dark/helpers/_vr.scss new file mode 100644 index 000000000..aae254695 --- /dev/null +++ b/src/scss/bootstrap-dark/helpers/_vr.scss @@ -0,0 +1,6 @@ +// from commit [aee169d19](https://github.com/twbs/bootstrap/commit/aee169d19288d78330be2df0960ea8924353f84f) + +.vr { + background-color: currentColor; + opacity: $hr-opacity-alt; +} diff --git a/src/scss/bootstrap-dark/mixins/_backdrop.scss b/src/scss/bootstrap-dark/mixins/_backdrop.scss new file mode 100644 index 000000000..a37622000 --- /dev/null +++ b/src/scss/bootstrap-dark/mixins/_backdrop.scss @@ -0,0 +1,8 @@ + +@mixin overlay-backdrop-alt($backdrop-bg-alt, $backdrop-opacity-alt) { + background-color: $backdrop-bg-alt; + + // Fade for backdrop + &.fade { opacity: 0; } + &.show { opacity: $backdrop-opacity-alt; } +}