diff --git a/ui/src/Styles/BootstrapRoot.scss b/ui/src/Styles/BootstrapRoot.scss new file mode 100644 index 000000000..842fcb1d1 --- /dev/null +++ b/ui/src/Styles/BootstrapRoot.scss @@ -0,0 +1,53 @@ +* { + // Note: Custom variable values only support SassScript inside `#{}`. + + // Colors + // + // Generate palettes for full colors, grays, and theme colors. + + @each $color, $value in $colors { + --#{$variable-prefix}#{$color}: #{$value}; + } + + @each $color, $value in $grays { + --#{$variable-prefix}gray-#{$color}: #{$value}; + } + + @each $color, $value in $theme-colors { + --#{$variable-prefix}#{$color}: #{$value}; + } + + @each $color, $value in $theme-colors-rgb { + --#{$variable-prefix}#{$color}-rgb: #{$value}; + } + + --#{$variable-prefix}white-rgb: #{to-rgb($white)}; + --#{$variable-prefix}black-rgb: #{to-rgb($black)}; + --#{$variable-prefix}body-rgb: #{to-rgb($body-color)}; + + // Fonts + + // Note: Use `inspect` for lists so that quoted items keep the quotes. + // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 + --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; + --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)}; + --#{$variable-prefix}gradient: #{$gradient}; + + // Root and body + // stylelint-disable custom-property-empty-line-before + // scss-docs-start root-body-variables + @if $font-size-root != null { + --#{$variable-prefix}root-font-size: #{$font-size-root}; + } + --#{$variable-prefix}body-font-family: #{$font-family-base}; + --#{$variable-prefix}body-font-size: #{$font-size-base}; + --#{$variable-prefix}body-font-weight: #{$font-weight-base}; + --#{$variable-prefix}body-line-height: #{$line-height-base}; + --#{$variable-prefix}body-color: #{$body-color}; + @if $body-text-align != null { + --#{$variable-prefix}body-text-align: #{$body-text-align}; + } + --#{$variable-prefix}body-bg: #{$body-bg}; + // scss-docs-end root-body-variables + // stylelint-enable custom-property-empty-line-before +} diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss index 45b0c8d78..3d8f36b2e 100644 --- a/ui/src/Styles/DarkTheme.scss +++ b/ui/src/Styles/DarkTheme.scss @@ -99,6 +99,7 @@ $input-range-thumb-font-color: $white; $color-default: #708090; +@import "./BootstrapRoot.scss"; @import "./Components"; .badge, diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss index aecc4e3d6..611a679bd 100644 --- a/ui/src/Styles/LightTheme.scss +++ b/ui/src/Styles/LightTheme.scss @@ -80,6 +80,7 @@ $input-range-thumb-font-color: $white; $color-default: #708090; +@import "./BootstrapRoot.scss"; @import "./Components"; a { diff --git a/ui/src/Styles/RebootlessBootstrap.scss b/ui/src/Styles/RebootlessBootstrap.scss index 14207617b..c4c025bb2 100644 --- a/ui/src/Styles/RebootlessBootstrap.scss +++ b/ui/src/Styles/RebootlessBootstrap.scss @@ -1,11 +1,14 @@ +// Configuration @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; + +// Layout & components //@import "bootstrap/scss/root"; //@import "bootstrap/scss/reboot"; //@import "bootstrap/scss/type"; -//@import "bootstrap/scss/images"; +@import "bootstrap/scss/images"; @import "bootstrap/scss/containers"; @import "bootstrap/scss/grid"; @import "bootstrap/scss/tables"; @@ -18,19 +21,24 @@ @import "bootstrap/scss/navbar"; @import "bootstrap/scss/card"; @import "bootstrap/scss/accordion"; -//@import "bootstrap/scss/breadcrumb"; +@import "bootstrap/scss/breadcrumb"; @import "bootstrap/scss/pagination"; @import "bootstrap/scss/badge"; @import "bootstrap/scss/alert"; @import "bootstrap/scss/progress"; @import "bootstrap/scss/list-group"; @import "bootstrap/scss/close"; -//@import "bootstrap/scss/toasts"; +@import "bootstrap/scss/toasts"; @import "bootstrap/scss/modal"; @import "bootstrap/scss/tooltip"; -//@import "bootstrap/scss/popover"; -//@import "bootstrap/scss/carousel"; -//@import "bootstrap/scss/spinners"; -//@import "bootstrap/scss/offcanvas"; +@import "bootstrap/scss/popover"; +@import "bootstrap/scss/carousel"; +@import "bootstrap/scss/spinners"; +@import "bootstrap/scss/offcanvas"; +@import "bootstrap/scss/placeholders"; + +// Helpers @import "bootstrap/scss/helpers"; + +// Utilities @import "bootstrap/scss/utilities/api"; diff --git a/ui/src/Styles/ResetCSS.scss b/ui/src/Styles/ResetCSS.scss index 859745154..66c94a468 100644 --- a/ui/src/Styles/ResetCSS.scss +++ b/ui/src/Styles/ResetCSS.scss @@ -7,5 +7,6 @@ $body-bg: #455a64; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootswatch/dist/flatly/variables"; +@import "bootstrap/scss/root"; @import "bootstrap/scss/type"; @import "bootstrap/scss/reboot";