mirror of https://github.com/ColorlibHQ/AdminLTE
AdminLTE's Experimental Dark Mode Removed
Daniel
parent
776479a4da
commit
f8dfc3c157
14
gulpfile.js
14
gulpfile.js
|
|
@ -87,11 +87,11 @@ const scss = () => src(paths.src.scss + '/adminlte.scss', { sourcemaps: true })
|
|||
.pipe(browserSync.stream())
|
||||
|
||||
// Compile SCSS Dark
|
||||
const scssDark = () => src(paths.src.scss + '/dark/adminlte-dark-addon.scss', { sourcemaps: true })
|
||||
.pipe(sass(sassOptions).on('error', sass.logError))
|
||||
.pipe(postcss(postcssOptions))
|
||||
.pipe(dest(paths.temp.css + '/dark', { sourcemaps: '.' }))
|
||||
.pipe(browserSync.stream())
|
||||
// const scssDark = () => src(paths.src.scss + '/dark/adminlte-dark-addon.scss', { sourcemaps: true })
|
||||
// .pipe(sass(sassOptions).on('error', sass.logError))
|
||||
// .pipe(postcss(postcssOptions))
|
||||
// .pipe(dest(paths.temp.css + '/dark', { sourcemaps: '.' }))
|
||||
// .pipe(browserSync.stream())
|
||||
|
||||
// Lint TS
|
||||
function isFixed(file) {
|
||||
|
|
@ -158,7 +158,7 @@ const serve = () => {
|
|||
|
||||
watch([paths.src.scss], series(lintScss))
|
||||
watch([paths.src.scss + '/**/*.scss', '!' + paths.src.scss + '/bootstrap-dark/**/*.scss', '!' + paths.src.scss + '/dark/**/*.scss'], series(scss))
|
||||
watch([paths.src.scss + '/bootstrap-dark/', paths.src.scss + '/dark/'], series(scssDark))
|
||||
watch([paths.src.scss + '/bootstrap-dark/', paths.src.scss + '/dark/'])
|
||||
watch([paths.src.ts], series(lintTs, tsCompile))
|
||||
watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], series(html, index, lintHtml))
|
||||
watch([paths.src.assets], series(assets))
|
||||
|
|
@ -305,4 +305,4 @@ exports.compile = compile
|
|||
exports.production = series(lint, compile)
|
||||
|
||||
// Default - Only for light mode AdminLTE
|
||||
exports.default = series(scss, scssDark, tsCompile, html, index, assets, serve)
|
||||
exports.default = series(scss, tsCompile, html, index, assets, serve)
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -5,15 +5,64 @@
|
|||
* License: Open source - MIT <https://opensource.org/licenses/MIT>
|
||||
*/
|
||||
|
||||
// Bootstrap
|
||||
// Bootstrap Configuration
|
||||
// ---------------------------------------------------
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap-variables"; // little modified are here
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "custom-utilities";
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
|
||||
// Variables and Mixins
|
||||
// AdminLTE Configuration
|
||||
// ---------------------------------------------------
|
||||
@import "bootstrap-variables"; // little modified are here
|
||||
@import "custom-utilities";
|
||||
|
||||
// Bootstrap Configuration
|
||||
// ---------------------------------------------------
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
// Bootstrap Layout & components
|
||||
@import "bootstrap/scss/root";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/accordion";
|
||||
@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/modal";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
@import "bootstrap/scss/offcanvas";
|
||||
@import "bootstrap/scss/placeholders";
|
||||
|
||||
// Bootstrap Helpers
|
||||
@import "bootstrap/scss/helpers";
|
||||
|
||||
// Bootstrap Utilities
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
|
||||
|
||||
// AdminLTE Configuration
|
||||
// ---------------------------------------------------
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
// Base styles
|
||||
|
||||
.accordion-button {
|
||||
color: $accordion-button-color-alt;
|
||||
background-color: $accordion-button-bg-alt;
|
||||
|
||||
&:not(.collapsed) {
|
||||
color: $accordion-button-active-color-alt;
|
||||
background-color: $accordion-button-active-bg-alt;
|
||||
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color-alt;
|
||||
|
||||
&::after {
|
||||
background-image: escape-svg($accordion-button-active-icon-alt);
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion icon
|
||||
&::after {
|
||||
background-image: escape-svg($accordion-button-icon-alt);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $accordion-button-focus-border-color-alt;
|
||||
box-shadow: $accordion-button-focus-box-shadow-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
background-color: $accordion-bg-alt;
|
||||
border: $accordion-border-width solid $accordion-border-color-alt;
|
||||
}
|
||||
|
||||
// Flush accordion items
|
||||
|
||||
.accordion-flush {
|
||||
.accordion-collapse {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
|
||||
&:first-child { border-top: 0; }
|
||||
&:last-child { border-bottom: 0; }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
// Base styles
|
||||
|
||||
// NOT NEEDED
|
||||
// .alert {
|
||||
// border: $alert-border-width solid transparent;
|
||||
// }
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Generate contextual modifier classes for colorizing the alert.
|
||||
|
||||
@each $state, $value in $theme-colors-alt {
|
||||
$alert-background-alt: shift-color($value, $alert-bg-scale-alt);
|
||||
$alert-border-alt: shift-color($value, $alert-border-scale-alt);
|
||||
$alert-color-alt: shift-color($value, $alert-color-scale-alt);
|
||||
@if (contrast-ratio($alert-background-alt, $alert-color-alt) < $min-contrast-ratio-alt) {
|
||||
$alert-color-alt: mix($value, color-contrast($alert-background-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($alert-color-scale-alt));
|
||||
}
|
||||
.alert-#{$state} {
|
||||
@include alert-variant($alert-background-alt, $alert-border-alt, $alert-color-alt);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// Base class
|
||||
|
||||
.badge {
|
||||
color: $badge-color-alt;
|
||||
// THIS DOES NOTHING
|
||||
// @include gradient-bg();
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.breadcrumb {
|
||||
background-color: $breadcrumb-bg-alt;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item {
|
||||
|
||||
&::before {
|
||||
color: $breadcrumb-divider-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $breadcrumb-active-color-alt;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.btn-group.show .dropdown-toggle {
|
||||
@include box-shadow($btn-active-box-shadow-alt);
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
// Base styles
|
||||
|
||||
.btn {
|
||||
color: $body-color-alt;
|
||||
background-color: transparent;
|
||||
border: $btn-border-width solid transparent;
|
||||
|
||||
&:hover {
|
||||
color: $body-color-alt;
|
||||
}
|
||||
|
||||
.btn-check:focus + &,
|
||||
&:focus {
|
||||
box-shadow: $btn-focus-box-shadow-alt;
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active {
|
||||
@include box-shadow($btn-active-box-shadow-alt);
|
||||
|
||||
&:focus {
|
||||
@include box-shadow($btn-focus-box-shadow-alt, $btn-active-box-shadow-alt);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
fieldset:disabled & {
|
||||
opacity: $btn-disabled-opacity-alt;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate buttons
|
||||
|
||||
@each $color, $value in $theme-colors-alt {
|
||||
.btn-#{$color} {
|
||||
@include button-variant-alt($value, $value);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-alt {
|
||||
.btn-outline-#{$color} {
|
||||
@include button-outline-variant-alt($value);
|
||||
}
|
||||
}
|
||||
|
||||
// Link buttons
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
color: $btn-link-color-alt;
|
||||
|
||||
&:hover {
|
||||
color: $btn-link-hover-color-alt;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: $btn-link-disabled-color-alt;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
// Base styles
|
||||
|
||||
.card {
|
||||
background-color: $card-bg-alt;
|
||||
border: $card-border-width solid $card-border-color-alt;
|
||||
@include box-shadow($card-box-shadow-alt);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
color: $card-color-alt;
|
||||
}
|
||||
|
||||
// Optional textual caps
|
||||
|
||||
.card-header {
|
||||
color: $card-cap-color-alt;
|
||||
background-color: $card-cap-bg-alt;
|
||||
border-bottom: $card-border-width solid $card-border-color-alt;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
color: $card-cap-color-alt;
|
||||
background-color: $card-cap-bg-alt;
|
||||
border-top: $card-border-width solid $card-border-color-alt;
|
||||
}
|
||||
|
||||
// Header navs
|
||||
|
||||
.card-header-tabs {
|
||||
@if $nav-tabs-link-active-bg != $card-bg {
|
||||
.nav-link.active {
|
||||
background-color: $card-bg-alt;
|
||||
border-bottom-color: $card-bg-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
// Left/right controls for nav
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
color: $carousel-control-color-alt;
|
||||
opacity: $carousel-control-opacity-alt;
|
||||
|
||||
// Hover/focus state
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $carousel-control-color-alt;
|
||||
opacity: $carousel-control-hover-opacity-alt;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
background-image: if($enable-gradients, linear-gradient(90deg, rgba($white-alt, .25), rgba($white-alt, .001)), null);
|
||||
}
|
||||
.carousel-control-next {
|
||||
background-image: if($enable-gradients, linear-gradient(270deg, rgba($white, .25), rgba($white, .001)), null);
|
||||
}
|
||||
|
||||
// Icons for within
|
||||
.carousel-control-prev-icon {
|
||||
background-image: escape-svg($carousel-control-prev-icon-bg-alt);
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: escape-svg($carousel-control-next-icon-bg-alt);
|
||||
}
|
||||
|
||||
// Optional indicator pips/controls
|
||||
|
||||
.carousel-indicators {
|
||||
[data-bs-target] {
|
||||
background-color: $carousel-indicator-active-bg-alt;
|
||||
opacity: $carousel-indicator-opacity-alt;
|
||||
}
|
||||
|
||||
.active {
|
||||
opacity: $carousel-indicator-active-opacity-alt;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional captions
|
||||
|
||||
.carousel-caption {
|
||||
color: $carousel-caption-color-alt;
|
||||
}
|
||||
|
||||
// Dark mode carousel
|
||||
|
||||
.carousel-dark {
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
filter: $carousel-dark-control-icon-filter-alt;
|
||||
}
|
||||
|
||||
.carousel-indicators [data-bs-target] {
|
||||
background-color: $carousel-dark-indicator-active-bg-alt;
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
color: $carousel-dark-caption-color-alt;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
.btn-close {
|
||||
color: $btn-close-color-alt;
|
||||
background: transparent escape-svg($btn-close-bg-alt) center / $btn-close-width auto no-repeat; // include transparent for button elements
|
||||
opacity: $btn-close-opacity-alt;
|
||||
|
||||
// Override <a>'s hover style
|
||||
&:hover {
|
||||
color: $btn-close-color-alt;
|
||||
opacity: $btn-close-hover-opacity-alt;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: $btn-close-focus-shadow-alt;
|
||||
opacity: $btn-close-focus-opacity-alt;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
opacity: $btn-close-disabled-opacity-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close-white {
|
||||
filter: $btn-close-white-filter-alt;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
:root {
|
||||
@include color-scheme-property($default-color-scheme, true);
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
// from Chris Coyier on Jul 26, 2016: https://css-tricks.com/overriding-the-default-text-selection-color-with-css/
|
||||
|
||||
body::selection {
|
||||
color: $selection-color-alt;
|
||||
background: $selection-bg-alt;
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
color: $dropdown-color-alt;
|
||||
background-color: $dropdown-bg-alt;
|
||||
border: $dropdown-border-width solid $dropdown-border-color-alt;
|
||||
@include box-shadow($dropdown-box-shadow-alt);
|
||||
}
|
||||
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid $dropdown-divider-bg-alt;
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
.dropdown-item {
|
||||
color: $dropdown-link-color-alt;
|
||||
background-color: transparent; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $dropdown-link-hover-color-alt;
|
||||
@include gradient-bg($dropdown-link-hover-bg-alt);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $dropdown-link-active-color-alt;
|
||||
@include gradient-bg($dropdown-link-active-bg-alt);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-link-disabled-color-alt;
|
||||
background-color: transparent;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none, null);
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
color: $dropdown-header-color-alt;
|
||||
}
|
||||
|
||||
// Dropdown text
|
||||
.dropdown-item-text {
|
||||
color: $dropdown-link-color-alt;
|
||||
}
|
||||
|
||||
// Dark dropdowns
|
||||
.dropdown-menu-dark {
|
||||
color: $dropdown-dark-color-alt;
|
||||
background-color: $dropdown-dark-bg-alt;
|
||||
border-color: $dropdown-dark-border-color-alt;
|
||||
@include box-shadow($dropdown-dark-box-shadow-alt);
|
||||
|
||||
.dropdown-item {
|
||||
color: $dropdown-dark-link-color-alt;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $dropdown-dark-link-hover-color-alt;
|
||||
@include gradient-bg($dropdown-dark-link-hover-bg-alt);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $dropdown-dark-link-active-color-alt;
|
||||
@include gradient-bg($dropdown-dark-link-active-bg-alt);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-dark-link-disabled-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-color: $dropdown-dark-divider-bg-alt;
|
||||
}
|
||||
|
||||
.dropdown-item-text {
|
||||
color: $dropdown-dark-link-color-alt;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
color: $dropdown-dark-header-color-alt;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
@import "forms/labels";
|
||||
@import "forms/form-text";
|
||||
@import "forms/form-control";
|
||||
@import "forms/form-select";
|
||||
@import "forms/form-check";
|
||||
@import "forms/form-range";
|
||||
@import "forms/floating-labels";
|
||||
@import "forms/input-group";
|
||||
@import "forms/validation";
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// @import "helpers/clearfix"; // no colors here
|
||||
@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";
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
background-color: $thumbnail-bg-alt;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color-alt;
|
||||
@include box-shadow($thumbnail-box-shadow-alt);
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
.figure-caption {
|
||||
color: $figure-caption-color-alt;
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
// Interactive list items
|
||||
|
||||
.list-group-item-action {
|
||||
color: $list-group-action-color-alt;
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $list-group-action-hover-color-alt;
|
||||
background-color: $list-group-hover-bg-alt;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $list-group-action-active-color-alt;
|
||||
background-color: $list-group-action-active-bg-alt;
|
||||
}
|
||||
}
|
||||
|
||||
// Individual list items
|
||||
|
||||
.list-group-item {
|
||||
color: $list-group-color-alt;
|
||||
background-color: $list-group-bg-alt;
|
||||
border: $list-group-border-width solid $list-group-border-color-alt;
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $list-group-disabled-color-alt;
|
||||
background-color: $list-group-disabled-bg-alt;
|
||||
}
|
||||
|
||||
// Include both here for `<a>`s and `<button>`s
|
||||
&.active {
|
||||
color: $list-group-active-color-alt;
|
||||
background-color: $list-group-active-bg-alt;
|
||||
border-color: $list-group-active-border-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
// Flush list items
|
||||
|
||||
.list-group-flush {
|
||||
|
||||
> .list-group-item {
|
||||
border-width: 0 0 $list-group-border-width; // needed for nightshade variants
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List group contextual variants
|
||||
|
||||
@each $state, $value in $theme-colors-alt {
|
||||
$list-group-variant-bg-alt: shift-color($value, $list-group-item-bg-scale-alt);
|
||||
$list-group-variant-color-alt: shift-color($value, $list-group-item-color-scale-alt);
|
||||
@if (contrast-ratio($list-group-variant-bg-alt, $list-group-variant-color-alt) < $min-contrast-ratio-alt) {
|
||||
$list-group-variant-color-alt: mix($value, color-contrast($list-group-variant-bg-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($list-group-item-color-scale-alt));
|
||||
}
|
||||
|
||||
@include list-group-item-variant($state, $list-group-variant-bg-alt, $list-group-variant-color-alt);
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "mixins/color-scheme";
|
||||
@import "mixins/backdrop";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/forms";
|
||||
@import "mixins/table-variants";
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// Actual modal
|
||||
.modal-content {
|
||||
color: $modal-content-color-alt;
|
||||
background-color: $modal-content-bg-alt;
|
||||
border: $modal-content-border-width solid $modal-content-border-color-alt;
|
||||
@include box-shadow($modal-content-box-shadow-xs-alt);
|
||||
}
|
||||
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
@include overlay-backdrop-alt($modal-backdrop-bg-alt, $modal-backdrop-opacity-alt);
|
||||
}
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color-alt;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
border-top: $modal-footer-border-width solid $modal-footer-border-color-alt;
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-content {
|
||||
@include box-shadow($modal-content-box-shadow-sm-up-alt);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
// Base class
|
||||
|
||||
.nav-link {
|
||||
color: $nav-link-color-alt;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $nav-link-hover-color-alt;
|
||||
}
|
||||
|
||||
// Disabled state lightens text
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Tabs
|
||||
//
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color-alt;
|
||||
|
||||
.nav-link {
|
||||
// background: none;
|
||||
border: $nav-tabs-border-width solid transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $nav-tabs-link-hover-border-color-alt;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color-alt;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: $nav-tabs-link-active-color-alt;
|
||||
background-color: $nav-tabs-link-active-bg-alt;
|
||||
border-color: $nav-tabs-link-active-border-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Pills
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
// .nav-link {
|
||||
// background: none;
|
||||
// border: 0;
|
||||
// }
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: $nav-pills-link-active-color-alt;
|
||||
@include gradient-bg($nav-pills-link-active-bg-alt);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
// Navbar
|
||||
|
||||
// THIS DOES NOTHING
|
||||
// .navbar {
|
||||
// @include gradient-bg();
|
||||
// }
|
||||
|
||||
// Button for toggling the navbar when in its collapsed state
|
||||
.navbar-toggler {
|
||||
background-color: transparent; // remove default button style
|
||||
border: $border-width solid transparent; // remove default button style
|
||||
|
||||
// &:focus {
|
||||
// box-shadow: 0 0 0 $navbar-toggler-focus-width;
|
||||
// }
|
||||
}
|
||||
|
||||
// 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 {
|
||||
color: $navbar-light-brand-color-alt;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-light-brand-hover-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-light-color-alt;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-light-hover-color-alt;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-light-disabled-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.nav-link.active {
|
||||
color: $navbar-light-active-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-light-color-alt;
|
||||
border-color: $navbar-light-toggler-border-color-alt;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: escape-svg($navbar-light-toggler-icon-bg-alt);
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-light-color-alt;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: $navbar-light-active-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// White links against a dark background
|
||||
.navbar-dark {
|
||||
.navbar-brand {
|
||||
color: $navbar-dark-brand-color-alt;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-dark-brand-hover-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-dark-color-alt;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-dark-hover-color-alt;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-dark-disabled-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.nav-link.active {
|
||||
color: $navbar-dark-active-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-dark-color-alt;
|
||||
border-color: $navbar-dark-toggler-border-color-alt;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: escape-svg($navbar-dark-toggler-icon-bg-alt);
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-dark-color-alt;
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: $navbar-dark-active-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
.offcanvas {
|
||||
color: $offcanvas-color-alt;
|
||||
background-color: $offcanvas-bg-color-alt;
|
||||
@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;
|
||||
}
|
||||
|
||||
.offcanvas-end {
|
||||
border-left: $offcanvas-border-width solid $offcanvas-border-color-alt;
|
||||
}
|
||||
|
||||
.offcanvas-top {
|
||||
border-bottom: $offcanvas-border-width solid $offcanvas-border-color-alt;
|
||||
}
|
||||
|
||||
.offcanvas-bottom {
|
||||
border-top: $offcanvas-border-width solid $offcanvas-border-color-alt;
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
.page-link {
|
||||
color: $pagination-color-alt;
|
||||
background-color: $pagination-bg-alt;
|
||||
border: $pagination-border-width solid $pagination-border-color-alt;
|
||||
|
||||
&:hover {
|
||||
color: $pagination-hover-color-alt;
|
||||
background-color: $pagination-hover-bg-alt;
|
||||
border-color: $pagination-hover-border-color-alt;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $pagination-focus-color-alt;
|
||||
background-color: $pagination-focus-bg-alt;
|
||||
outline: $pagination-focus-outline-alt;
|
||||
box-shadow: $pagination-focus-box-shadow-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&.active .page-link {
|
||||
color: $pagination-active-color-alt;
|
||||
@include gradient-bg($pagination-active-bg-alt);
|
||||
border-color: $pagination-active-border-color-alt;
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
color: $pagination-disabled-color-alt;
|
||||
background-color: $pagination-disabled-bg-alt;
|
||||
border-color: $pagination-disabled-border-color-alt;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
//
|
||||
// Patch some items missing in BS5
|
||||
// @see: https://getbootstrap.com/docs/5.0/utilities/api/
|
||||
//
|
||||
|
||||
// @import "functions";
|
||||
// @import "variables";
|
||||
// @import "utilities";
|
||||
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$colors: map-merge(
|
||||
$colors,
|
||||
(
|
||||
"black": $black
|
||||
)
|
||||
);
|
||||
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"border-color": map-merge(
|
||||
map-get($utilities, "border-color"),
|
||||
(
|
||||
values: map-merge(
|
||||
map-get(map-get($utilities, "border-color"), "values"),
|
||||
("black": $black),
|
||||
),
|
||||
),
|
||||
),
|
||||
"color": map-merge(
|
||||
map-get($utilities, "color"),
|
||||
(
|
||||
values: map-merge(
|
||||
map-get(map-get($utilities, "color"), "values"),
|
||||
("black": $black),
|
||||
),
|
||||
),
|
||||
),
|
||||
"background-color": map-merge(
|
||||
map-get($utilities, "background-color"),
|
||||
(
|
||||
values: map-merge(
|
||||
map-get(map-get($utilities, "background-color"), "values"),
|
||||
("black": $black),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.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%);
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
.popover {
|
||||
background-color: $popover-bg-alt;
|
||||
border: $popover-border-width solid $popover-border-color-alt;
|
||||
@include box-shadow($popover-box-shadow-alt);
|
||||
|
||||
.popover-arrow {
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-top,
|
||||
.bs-popover-auto[data-popper-placement^="top"] { // see note below
|
||||
> .popover-arrow {
|
||||
&::before {
|
||||
border-top-color: $popover-arrow-outer-color-alt;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-top-color: $popover-arrow-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-end,
|
||||
.bs-popover-auto[data-popper-placement^="right"] { // see note below
|
||||
> .popover-arrow {
|
||||
&::before {
|
||||
border-right-color: $popover-arrow-outer-color-alt;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right-color: $popover-arrow-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-bottom,
|
||||
.bs-popover-auto[data-popper-placement^="bottom"] { // see note below
|
||||
> .popover-arrow {
|
||||
&::before {
|
||||
border-bottom-color: $popover-arrow-outer-color-alt;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-bottom-color: $popover-arrow-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-header::before {
|
||||
border-bottom: $popover-border-width solid $popover-header-bg-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-start,
|
||||
.bs-popover-auto[data-popper-placement^="left"] { // see note below
|
||||
> .popover-arrow {
|
||||
&::before {
|
||||
border-left-color: $popover-arrow-outer-color-alt;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-left-color: $popover-arrow-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ***NOTE***: Do not use @extend as that would extend the base class and the dark class
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
.popover-header {
|
||||
color: $popover-header-color-alt;
|
||||
background-color: $popover-header-bg-alt;
|
||||
border-bottom: $popover-border-width solid $popover-border-color-alt;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: $popover-body-color-alt;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.progress {
|
||||
background-color: $progress-bg-alt;
|
||||
@include box-shadow($progress-box-shadow-alt);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
color: $progress-bar-color-alt;
|
||||
background-color: $progress-bar-bg-alt;
|
||||
}
|
||||
|
||||
.progress-bar-striped {
|
||||
// THIS DOES NOTHING
|
||||
// @include gradient-striped();
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
// xxxstylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||
|
||||
|
||||
// Reboot
|
||||
//
|
||||
// Normalization of HTML elements, manually forked from Normalize.css ... (see core `_reboot.scss` file)
|
||||
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
|
||||
|
||||
|
||||
// Body
|
||||
|
||||
body {
|
||||
color: var(--#{$variable-prefix}body-color-alt);
|
||||
background-color: var(--#{$variable-prefix}body-bg-alt); // 2
|
||||
}
|
||||
|
||||
|
||||
// Content grouping
|
||||
|
||||
hr {
|
||||
color: $hr-color-alt; // 1
|
||||
// background-color: currentcolor;
|
||||
opacity: $hr-opacity-alt;
|
||||
}
|
||||
|
||||
|
||||
// Typography
|
||||
|
||||
%heading {
|
||||
color: $headings-color-alt;
|
||||
}
|
||||
|
||||
|
||||
// Mark
|
||||
|
||||
mark {
|
||||
background-color: $mark-bg-alt;
|
||||
}
|
||||
|
||||
|
||||
// Links
|
||||
|
||||
a {
|
||||
color: $link-color-alt;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
a:not([href]):not([class]) {
|
||||
&,
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Code
|
||||
|
||||
pre {
|
||||
color: $pre-color-alt;
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color: $code-color-alt;
|
||||
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
a > & {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
color: $kbd-color-alt;
|
||||
background-color: $kbd-bg-alt;
|
||||
}
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Prevent double borders
|
||||
|
||||
caption {
|
||||
color: $table-caption-color-alt;
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
:root {
|
||||
// Custom variable values only support SassScript inside `#{}`.
|
||||
@each $color, $value in $colors-alt {
|
||||
--#{$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};
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
//
|
||||
// Basic Bootstrap table
|
||||
//
|
||||
|
||||
.table {
|
||||
--#{$variable-prefix}table-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};
|
||||
--#{$variable-prefix}table-active-bg: #{$table-active-bg-alt};
|
||||
--#{$variable-prefix}table-hover-color: #{$table-hover-color-alt};
|
||||
--#{$variable-prefix}table-hover-bg: #{$table-hover-bg-alt};
|
||||
|
||||
color: $table-color-alt;
|
||||
border-color: $table-border-color-alt;
|
||||
|
||||
// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
|
||||
// Target th & td
|
||||
// xstylelint-disable-next-line selector-max-universal
|
||||
// > :not(caption) > * > * {
|
||||
// background-color: var(--#{$variable-prefix}table-bg);
|
||||
// box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
|
||||
// }
|
||||
|
||||
// Highlight border color between thead, tbody and tfoot.
|
||||
> :not(:last-child) > :last-child > * {
|
||||
border-bottom-color: $table-group-separator-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Zebra-striping
|
||||
|
||||
// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
|
||||
// .table-striped {
|
||||
// > tbody > tr:nth-of-type(#{$table-striped-order}) {
|
||||
// --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
|
||||
// color: var(--#{$variable-prefix}table-striped-color);
|
||||
// }
|
||||
// }
|
||||
|
||||
// Active table
|
||||
|
||||
// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
|
||||
// .table-active {
|
||||
// --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
|
||||
// color: var(--#{$variable-prefix}table-active-color);
|
||||
// }
|
||||
|
||||
// Hover effect
|
||||
|
||||
// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
|
||||
// .table-hover {
|
||||
// > tbody > tr:hover {
|
||||
// --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
|
||||
// color: var(--#{$variable-prefix}table-hover-color);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Table variants
|
||||
|
||||
@each $color, $value in $table-variants-alt {
|
||||
@include table-variant-alt($color, $value);
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.toast {
|
||||
color: $toast-color-alt;
|
||||
background-color: $toast-background-color-alt;
|
||||
border: $toast-border-width solid $toast-border-color-alt;
|
||||
box-shadow: $toast-box-shadow-alt;
|
||||
|
||||
//// DO I NEED THIS?
|
||||
// &.showing {
|
||||
// opacity: 0;
|
||||
// }
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
color: $toast-header-color-alt;
|
||||
background-color: $toast-header-background-color-alt;
|
||||
border-bottom: $toast-border-width solid $toast-header-border-color-alt;
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
// Base class
|
||||
.tooltip {
|
||||
opacity: 0;
|
||||
|
||||
&.show { opacity: $tooltip-opacity-alt; }
|
||||
}
|
||||
|
||||
.bs-tooltip-top,
|
||||
.bs-tooltip-auto[data-popper-placement^="top"] {
|
||||
.tooltip-arrow {
|
||||
&::before {
|
||||
border-top-color: $tooltip-arrow-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-end,
|
||||
.bs-tooltip-auto[data-popper-placement^="right"] {
|
||||
.tooltip-arrow {
|
||||
&::before {
|
||||
border-right-color: $tooltip-arrow-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-bottom,
|
||||
.bs-tooltip-auto[data-popper-placement^="bottom"] {
|
||||
.tooltip-arrow {
|
||||
&::before {
|
||||
border-bottom-color: $tooltip-arrow-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-start,
|
||||
.bs-tooltip-auto[data-popper-placement^="left"] {
|
||||
.tooltip-arrow {
|
||||
&::before {
|
||||
border-left-color: $tooltip-arrow-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ***NOTE***: Do not use @extend as that would extend the base class and the dark class
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
color: $tooltip-color-alt;
|
||||
background-color: $tooltip-bg-alt;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
.blockquote-footer {
|
||||
color: $blockquote-footer-color-alt;
|
||||
}
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
// Utilities
|
||||
|
||||
$utilities-alt: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$utilities-alt: map-merge(
|
||||
(
|
||||
"shadow": (
|
||||
property: box-shadow,
|
||||
class: shadow,
|
||||
values: (
|
||||
null: $box-shadow-alt,
|
||||
sm: $box-shadow-sm-alt,
|
||||
lg: $box-shadow-lg-alt,
|
||||
)
|
||||
),
|
||||
"border": (
|
||||
property: border,
|
||||
values: (
|
||||
null: $border-width solid $border-color-alt,
|
||||
)
|
||||
),
|
||||
"border-top": (
|
||||
property: border-top,
|
||||
values: (
|
||||
null: $border-width solid $border-color-alt,
|
||||
)
|
||||
),
|
||||
"border-end": (
|
||||
property: border-right,
|
||||
class: border-end,
|
||||
values: (
|
||||
null: $border-width solid $border-color-alt,
|
||||
)
|
||||
),
|
||||
"border-bottom": (
|
||||
property: border-bottom,
|
||||
values: (
|
||||
null: $border-width solid $border-color-alt,
|
||||
)
|
||||
),
|
||||
"border-start": (
|
||||
property: border-left,
|
||||
class: border-start,
|
||||
values: (
|
||||
null: $border-width solid $border-color-alt,
|
||||
)
|
||||
),
|
||||
"border-color": (
|
||||
property: border-color,
|
||||
class: border,
|
||||
values: map-merge(
|
||||
$theme-colors-alt,
|
||||
(
|
||||
"white": $white-alt,
|
||||
"black": $black-alt
|
||||
)
|
||||
)
|
||||
),
|
||||
// Text
|
||||
// DON'T NEED TO DARK, CSS VARS TAKES CARE OF THIS.
|
||||
// "gradient": (
|
||||
// property: background-image,
|
||||
// class: bg,
|
||||
// values: (gradient: var(--#{$variable-prefix}gradient))
|
||||
// )
|
||||
"color": (
|
||||
property: color,
|
||||
class: text,
|
||||
values: map-merge(
|
||||
$utilities-text-colors-alt,
|
||||
(
|
||||
"muted": $text-muted-alt,
|
||||
"white-50": rgba($white-alt, .5),
|
||||
"black-50": rgba($black-alt, .5)
|
||||
)
|
||||
)
|
||||
),
|
||||
"background-color": (
|
||||
property: background-color,
|
||||
class: bg,
|
||||
values: map-merge(
|
||||
$utilities-bg-colors-alt,
|
||||
(
|
||||
"black": $black-alt
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
$utilities-alt
|
||||
);
|
||||
|
|
@ -1,916 +0,0 @@
|
|||
// Alternate Variables (for use in Dark Mode variant)
|
||||
|
||||
// Color system
|
||||
// ______________________________________
|
||||
|
||||
$default-color-scheme: light !default;
|
||||
|
||||
$color-schemes: (
|
||||
light,
|
||||
dark
|
||||
) !default;
|
||||
|
||||
// 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: #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: (
|
||||
"100": $gray-100-alt,
|
||||
"200": $gray-200-alt,
|
||||
"300": $gray-300-alt,
|
||||
"400": $gray-400-alt,
|
||||
"500": $gray-500-alt,
|
||||
"600": $gray-600-alt,
|
||||
"700": $gray-700-alt,
|
||||
"800": $gray-800-alt,
|
||||
"900": $gray-900-alt
|
||||
) !default;
|
||||
// fusv-enable
|
||||
|
||||
$blue-alt: #375a7f !default;
|
||||
$indigo-alt: #673ab7 !default; //~~
|
||||
$purple-alt: #654ea3 !default; // Panatone CotY 2018
|
||||
$pink-alt: #e83e8c !default;
|
||||
$red-alt: #e74c3c !default; //**
|
||||
$orange-alt: #fd7e14 !default;
|
||||
$yellow-alt: #f39c12 !default; //**
|
||||
$green-alt: #00bc8c !default; //**
|
||||
$teal-alt: #45b5aa !default; // Panatone CotY 2010
|
||||
$cyan-alt: #17a2b8 !default;
|
||||
|
||||
$colors-alt: (
|
||||
"blue": $blue-alt,
|
||||
"indigo": $indigo-alt,
|
||||
"purple": $purple-alt,
|
||||
"pink": $pink-alt,
|
||||
"red": $red-alt,
|
||||
"orange": $orange-alt,
|
||||
"yellow": $yellow-alt,
|
||||
"green": $green-alt,
|
||||
"teal": $teal-alt,
|
||||
"cyan": $cyan-alt,
|
||||
"white": $white-alt,
|
||||
"black": $black-alt,
|
||||
"gray": #7e7e7e, // $gray-600,
|
||||
"gray-dark": #121212 //$gray-800
|
||||
) !default;
|
||||
|
||||
$primary-alt: $blue-alt !default;
|
||||
$secondary-alt: $gray-600-alt !default;
|
||||
$success-alt: $green-alt !default;
|
||||
$info-alt: $cyan-alt !default;
|
||||
$warning-alt: $yellow-alt !default;
|
||||
$danger-alt: $red-alt !default;
|
||||
$light-alt: $gray-400-alt !default;
|
||||
$dark-alt: $gray-800-alt !default;
|
||||
|
||||
$theme-colors-alt: (
|
||||
"primary": $primary-alt,
|
||||
"secondary": $secondary-alt,
|
||||
"success": $success-alt,
|
||||
"info": $info-alt,
|
||||
"warning": $warning-alt,
|
||||
"danger": $danger-alt,
|
||||
"light": $light-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;
|
||||
|
||||
$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
|
||||
// ______________________________________
|
||||
// The gradient which is added to components if `$enable-gradients` is `true`
|
||||
// This gradient is also added to elements with `.bg-gradient`
|
||||
$gradient-alt: linear-gradient(180deg, rgba($black-alt, .15), rgba($black-alt, 0)) !default;
|
||||
|
||||
|
||||
// Body
|
||||
// ______________________________________
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$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: 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
|
||||
|
||||
|
||||
// Components
|
||||
// ______________________________________
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$border-color-alt: $gray-700-alt !default;
|
||||
|
||||
$box-shadow-alt: 0 .5rem 1rem rgba($black-alt, .15) !default;
|
||||
$box-shadow-sm-alt: 0 .125rem .25rem rgba($black-alt, .075) !default;
|
||||
$box-shadow-lg-alt: 0 1rem 3rem rgba($black-alt, .175) !default;
|
||||
$box-shadow-inset-alt: inset 0 1px 2px rgba($black-alt, .075) !default;
|
||||
|
||||
$component-active-color-alt: $white-alt !default;
|
||||
$component-active-bg-alt: $primary-alt !default;
|
||||
|
||||
|
||||
// Typography
|
||||
// ______________________________________
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
|
||||
$headings-color-alt: null !default;
|
||||
|
||||
$text-muted-alt: $gray-400-alt !default;
|
||||
|
||||
$blockquote-footer-color-alt: $gray-600-alt !default;
|
||||
|
||||
$hr-color-alt: $white-alt !default;
|
||||
$hr-opacity-alt: .1 !default;
|
||||
|
||||
$mark-bg-alt: rgba($yellow-alt, .5) !default;
|
||||
|
||||
|
||||
// Tables
|
||||
// ______________________________________
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
$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($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($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($white-alt, $table-hover-bg-factor-alt) !default;
|
||||
|
||||
$table-border-factor-alt: .1 !default;
|
||||
$table-border-color-alt: $border-color-alt !default;
|
||||
|
||||
$table-group-separator-color-alt: currentcolor !default;
|
||||
|
||||
$table-caption-color-alt: $text-muted-alt !default;
|
||||
|
||||
$table-bg-scale-alt: 50% !default;
|
||||
|
||||
$table-variants-alt: (
|
||||
"primary": shift-color($primary-alt, $table-bg-scale-alt),
|
||||
"secondary": shift-color($secondary-alt, $table-bg-scale-alt),
|
||||
"success": shift-color($success-alt, $table-bg-scale-alt),
|
||||
"info": shift-color($info-alt, $table-bg-scale-alt),
|
||||
"warning": shift-color($warning-alt, $table-bg-scale-alt),
|
||||
"danger": shift-color($danger-alt, $table-bg-scale-alt),
|
||||
"light": $light-alt,
|
||||
"dark": $dark-alt,
|
||||
) !default;
|
||||
|
||||
|
||||
// Buttons + Forms
|
||||
// ______________________________________
|
||||
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
||||
|
||||
$input-btn-focus-color-opacity-alt: .25 !default;
|
||||
$input-btn-focus-color-alt: rgba($component-active-bg-alt, $input-btn-focus-color-opacity-alt) !default;
|
||||
$input-btn-focus-blur-alt: 0 !default;
|
||||
$input-btn-focus-box-shadow-alt: 0 0 $input-btn-focus-blur-alt $input-btn-focus-width $input-btn-focus-color-alt !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
// ______________________________________
|
||||
// For each of Bootstrap's buttons, define text, background, and border color.
|
||||
|
||||
$btn-box-shadow-alt: inset 0 1px 0 rgba($white-alt, .15), 0 1px 1px rgba($black-alt, .075) !default;
|
||||
$btn-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
|
||||
$btn-disabled-opacity-alt: .65 !default;
|
||||
$btn-active-box-shadow-alt: inset 0 3px 5px rgba($black-alt, .125) !default;
|
||||
|
||||
$btn-link-color-alt: $link-color-alt !default;
|
||||
$btn-link-hover-color-alt: $link-hover-color-alt !default;
|
||||
$btn-link-disabled-color-alt: $gray-600-alt !default;
|
||||
|
||||
$btn-hover-bg-shade-amount-alt: 15% !default;
|
||||
$btn-hover-bg-tint-amount-alt: 15% !default;
|
||||
$btn-hover-border-shade-amount-alt: 20% !default;
|
||||
$btn-hover-border-tint-amount-alt: 10% !default;
|
||||
$btn-active-bg-shade-amount-alt: 20% !default;
|
||||
$btn-active-bg-tint-amount-alt: 20% !default;
|
||||
$btn-active-border-shade-amount-alt: 25% !default;
|
||||
$btn-active-border-tint-amount-alt: 10% !default;
|
||||
|
||||
|
||||
// Forms
|
||||
// ______________________________________
|
||||
|
||||
$form-text-color-alt: $text-muted-alt !default;
|
||||
|
||||
$form-label-color-alt: null !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: $gray-300-alt !default;
|
||||
$input-border-color-alt: $gray-700-alt !default;
|
||||
$input-box-shadow-alt: $box-shadow-inset-alt !default;
|
||||
|
||||
$input-focus-bg-alt: $input-bg-alt !default;
|
||||
$input-focus-border-color-alt: tint-color($component-active-bg-alt, 50%) !default;
|
||||
$input-focus-color-alt: $input-color-alt !default;
|
||||
$input-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
|
||||
|
||||
$input-placeholder-color-alt: mix($gray-600-alt, $gray-700-alt, 50%) !default;
|
||||
$input-plaintext-color-alt: $body-color-alt !default;
|
||||
|
||||
$form-check-label-color-alt: null !default;
|
||||
|
||||
$form-check-input-active-filter-alt: brightness(90%) !default; // TODO: test
|
||||
|
||||
$form-check-input-bg-alt: $input-bg-alt !default;
|
||||
$form-check-input-border-alt: 1px solid rgba($white, .25) !default;
|
||||
$form-check-input-focus-border-alt: $input-focus-border-color-alt !default;
|
||||
$form-check-input-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
|
||||
|
||||
$form-check-input-checked-color-alt: $component-active-color-alt !default;
|
||||
$form-check-input-checked-bg-color-alt: $component-active-bg-alt !default;
|
||||
$form-check-input-checked-border-color-alt: $form-check-input-checked-bg-color-alt !default;
|
||||
$form-check-input-checked-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color-alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
|
||||
$form-check-radio-checked-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color-alt}'/></svg>") !default;
|
||||
|
||||
$form-check-input-indeterminate-color-alt: $component-active-color-alt !default;
|
||||
$form-check-input-indeterminate-bg-color-alt: $component-active-bg-alt !default;
|
||||
$form-check-input-indeterminate-border-color-alt: $form-check-input-indeterminate-bg-color-alt !default;
|
||||
$form-check-input-indeterminate-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color-alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
|
||||
|
||||
$form-check-input-disabled-opacity-alt: .5 !default;
|
||||
$form-check-label-disabled-opacity-alt: $form-check-input-disabled-opacity-alt !default;
|
||||
$form-check-btn-check-disabled-opacity-alt: $btn-disabled-opacity-alt !default;
|
||||
|
||||
$form-switch-color-alt: rgba(255, 255, 255, .25) !default;
|
||||
$form-switch-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-alt}'/></svg>") !default;
|
||||
|
||||
$form-switch-focus-color-alt: $input-focus-border-color-alt !default;
|
||||
$form-switch-focus-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color-alt}'/></svg>") !default;
|
||||
|
||||
$form-switch-checked-color-alt: $component-active-color-alt !default;
|
||||
$form-switch-checked-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color-alt}'/></svg>") !default;
|
||||
|
||||
$input-group-addon-color-alt: $input-color-alt !default;
|
||||
$input-group-addon-bg-alt: $gray-800-alt !default;
|
||||
$input-group-addon-border-color-alt: $input-border-color-alt !default;
|
||||
|
||||
$form-select-color-alt: $input-color-alt !default;
|
||||
$form-select-disabled-color-alt: null !default;
|
||||
$form-select-bg-alt: $input-bg-alt !default;
|
||||
$form-select-disabled-bg-alt: $gray-800-alt !default;
|
||||
$form-select-disabled-border-color-alt: $input-disabled-border-color-alt !default;
|
||||
$form-select-indicator-color-alt: $gray-200-alt !default;
|
||||
$form-select-indicator-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
|
||||
|
||||
$form-select-border-color-alt: $input-border-color-alt !default;
|
||||
$form-select-box-shadow-alt: $box-shadow-inset-alt !default;
|
||||
|
||||
$form-select-focus-border-color-alt: $input-focus-border-color-alt !default;
|
||||
$form-select-focus-box-shadow-alt: 0 0 0 $form-select-focus-width $input-btn-focus-color-alt !default;
|
||||
|
||||
$form-range-track-bg-alt: $gray-700-alt !default;
|
||||
$form-range-track-box-shadow-alt: $box-shadow-inset-alt !default;
|
||||
|
||||
$form-range-thumb-bg-alt: $component-active-bg-alt !default;
|
||||
$form-range-thumb-border-alt: 0 !default;
|
||||
$form-range-thumb-box-shadow-alt: 0 .1rem .25rem rgba($black-alt, .1) !default;
|
||||
$form-range-thumb-focus-box-shadow-alt: 0 0 0 1px $body-bg-alt, $input-focus-box-shadow-alt !default;
|
||||
$form-range-thumb-active-bg-alt: tint-color($component-active-bg-alt, 70%) !default;
|
||||
$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: shade-color($form-file-button-bg-alt, 5%) !default;
|
||||
|
||||
$form-floating-label-opacity-alt: .65 !default;
|
||||
|
||||
|
||||
// Form validation
|
||||
// ______________________________________
|
||||
|
||||
$form-feedback-valid-color-alt: $success-alt !default;
|
||||
$form-feedback-invalid-color-alt: $danger-alt !default;
|
||||
|
||||
$form-feedback-icon-valid-color-alt: $form-feedback-valid-color-alt !default;
|
||||
$form-feedback-icon-valid-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color-alt}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
|
||||
$form-feedback-icon-invalid-color-alt: $form-feedback-invalid-color-alt !default;
|
||||
$form-feedback-icon-invalid-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color-alt}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
|
||||
|
||||
$form-validation-states-alt: (
|
||||
"valid": (
|
||||
"color": $form-feedback-valid-color-alt,
|
||||
"icon": $form-feedback-icon-valid-alt
|
||||
),
|
||||
"invalid": (
|
||||
"color": $form-feedback-invalid-color-alt,
|
||||
"icon": $form-feedback-icon-invalid-alt
|
||||
)
|
||||
) !default;
|
||||
|
||||
|
||||
// Navs
|
||||
// ______________________________________
|
||||
|
||||
$nav-link-color-alt: $link-color-alt !default;
|
||||
$nav-link-hover-color-alt: $link-hover-color-alt !default;
|
||||
$nav-link-disabled-color-alt: $gray-400-alt !default;
|
||||
|
||||
$nav-tabs-border-color-alt: $gray-700-alt !default;
|
||||
$nav-tabs-link-hover-border-color-alt: $gray-800-alt $gray-800-alt $nav-tabs-border-color-alt !default;
|
||||
$nav-tabs-link-active-color-alt: $gray-300-alt !default;
|
||||
$nav-tabs-link-active-bg-alt: $body-bg-alt !default;
|
||||
$nav-tabs-link-active-border-color-alt: $gray-700-alt $gray-700-alt $nav-tabs-link-active-bg-alt !default;
|
||||
|
||||
$nav-pills-link-active-color-alt: $component-active-color-alt !default;
|
||||
$nav-pills-link-active-bg-alt: $component-active-bg-alt !default;
|
||||
|
||||
|
||||
// Navbar
|
||||
// ______________________________________ // TODO: revisit colors
|
||||
|
||||
$navbar-dark-color-alt: rgba($white-alt, .55) !default;
|
||||
$navbar-dark-hover-color-alt: rgba($white-alt, .75) !default;
|
||||
$navbar-dark-active-color-alt: $white-alt !default;
|
||||
$navbar-dark-disabled-color-alt: rgba($white-alt, .25) !default;
|
||||
$navbar-dark-toggler-icon-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color-alt}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-dark-toggler-border-color-alt: rgba($white-alt, .1) !default;
|
||||
|
||||
$navbar-light-color-alt: rgba($white-alt, .55) !default;
|
||||
$navbar-light-hover-color-alt: rgba($white-alt, .7) !default;
|
||||
$navbar-light-active-color-alt: rgba($white-alt, .9) !default;
|
||||
$navbar-light-disabled-color-alt: rgba($white-alt, .3) !default;
|
||||
$navbar-light-toggler-icon-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color-alt}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-light-toggler-border-color-alt: rgba($white-alt, .1) !default;
|
||||
|
||||
$navbar-light-brand-color-alt: $navbar-light-active-color-alt !default;
|
||||
$navbar-light-brand-hover-color-alt: $navbar-light-active-color-alt !default;
|
||||
$navbar-dark-brand-color-alt: $navbar-dark-active-color-alt !default;
|
||||
$navbar-dark-brand-hover-color-alt: $navbar-dark-active-color-alt !default;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
// ______________________________________
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
$dropdown-color-alt: $body-color-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;
|
||||
|
||||
$dropdown-link-color-alt: $gray-100 !default;
|
||||
$dropdown-link-hover-color-alt: shade-color($gray-100, 10%) !default;
|
||||
$dropdown-link-hover-bg-alt: $gray-800 !default;
|
||||
|
||||
$dropdown-link-active-color-alt: $component-active-color-alt !default;
|
||||
$dropdown-link-active-bg-alt: $component-active-bg-alt !default;
|
||||
|
||||
$dropdown-link-disabled-color-alt: $gray-500-alt !default;
|
||||
|
||||
$dropdown-header-color-alt: $gray-400-alt !default;
|
||||
|
||||
$dropdown-dark-color-alt: $gray-700-alt !default;
|
||||
$dropdown-dark-bg-alt: $gray-200-alt !default;
|
||||
$dropdown-dark-border-color-alt: $dropdown-border-color-alt !default;
|
||||
$dropdown-dark-divider-bg-alt: $dropdown-divider-bg-alt !default;
|
||||
$dropdown-dark-box-shadow-alt: null !default;
|
||||
$dropdown-dark-link-color-alt: $dropdown-dark-color-alt !default;
|
||||
$dropdown-dark-link-hover-color-alt: $black-alt !default;
|
||||
$dropdown-dark-link-hover-bg-alt: rgba($black-alt, .15) !default;
|
||||
$dropdown-dark-link-active-color-alt: $dropdown-link-active-color-alt !default;
|
||||
$dropdown-dark-link-active-bg-alt: $dropdown-link-active-bg-alt !default;
|
||||
$dropdown-dark-link-disabled-color-alt: $gray-500-alt !default;
|
||||
$dropdown-dark-header-color-alt: $gray-500-alt !default;
|
||||
|
||||
|
||||
// Pagination
|
||||
// ______________________________________
|
||||
|
||||
$pagination-color-alt: $link-color-alt !default;
|
||||
$pagination-bg-alt: $gray-800-alt !default;
|
||||
$pagination-border-color-alt: $gray-700-alt !default;
|
||||
|
||||
$pagination-focus-color-alt: $link-hover-color-alt !default;
|
||||
$pagination-focus-bg-alt: $gray-800-alt !default;
|
||||
$pagination-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
|
||||
$pagination-focus-outline-alt: 0 !default; // ???
|
||||
|
||||
$pagination-hover-color-alt: $link-hover-color-alt !default;
|
||||
$pagination-hover-bg-alt: $gray-700-alt !default;
|
||||
$pagination-hover-border-color-alt: mix($gray-700-alt, $gray-700-alt, 50%) !default;
|
||||
|
||||
$pagination-active-color-alt: $component-active-color-alt !default;
|
||||
$pagination-active-bg-alt: $component-active-bg-alt !default;
|
||||
$pagination-active-border-color-alt: $pagination-active-bg-alt !default;
|
||||
|
||||
$pagination-disabled-color-alt: mix($gray-600-alt, $gray-700-alt, 50%) !default;
|
||||
$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
|
||||
// ______________________________________
|
||||
|
||||
$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;
|
||||
|
||||
|
||||
// Accordion
|
||||
// ______________________________________
|
||||
|
||||
$accordion-color-alt: $body-color-alt !default;
|
||||
$accordion-bg-alt: $body-bg-alt !default;
|
||||
$accordion-border-color-alt: rgba($white-alt, .125) !default;
|
||||
|
||||
$accordion-button-color-alt: $accordion-color-alt !default;
|
||||
$accordion-button-bg-alt: $accordion-bg-alt !default;
|
||||
$accordion-button-active-bg-alt: shade-color($component-active-bg-alt, 50%) !default;
|
||||
$accordion-button-active-color-alt: tint-color($primary-alt, 40%) !default;
|
||||
|
||||
$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-button-color-alt !default;
|
||||
$accordion-icon-active-color-alt: $accordion-button-active-color-alt !default;
|
||||
|
||||
$accordion-button-icon-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-alt}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||
$accordion-button-active-icon-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-alt}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||
|
||||
|
||||
// Tooltips
|
||||
// ______________________________________
|
||||
|
||||
$tooltip-color-alt: $black-alt !default;
|
||||
$tooltip-bg-alt: $white-alt !default;
|
||||
$tooltip-opacity-alt: .9 !default;
|
||||
|
||||
$tooltip-arrow-color-alt: $tooltip-bg-alt !default;
|
||||
|
||||
$form-feedback-tooltip-opacity-alt: $tooltip-opacity-alt !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
// ______________________________________
|
||||
|
||||
$popover-bg-alt: $black-alt !default;
|
||||
$popover-border-color-alt: rgba($white-alt, .2) !default;
|
||||
$popover-box-shadow-alt: $box-shadow-alt !default;
|
||||
|
||||
$popover-header-bg-alt: tint-color($popover-bg-alt, 6%) !default;
|
||||
$popover-header-color-alt: $headings-color-alt !default;
|
||||
|
||||
$popover-body-color-alt: $body-color-alt !default;
|
||||
|
||||
$popover-arrow-color-alt: $popover-bg-alt !default;
|
||||
|
||||
$popover-arrow-outer-color-alt: fade-in($popover-border-color-alt, .05) !default;
|
||||
|
||||
|
||||
// Toasts
|
||||
// ______________________________________
|
||||
|
||||
$toast-color-alt: null !default;
|
||||
$toast-background-color-alt: rgba($black-alt, .85) !default;
|
||||
$toast-border-color-alt: rgba(255, 255, 255, .1) !default;
|
||||
$toast-box-shadow-alt: $box-shadow-alt !default;
|
||||
|
||||
$toast-header-color-alt: $gray-400-alt !default;
|
||||
$toast-header-background-color-alt: rgba($black-alt, .85) !default;
|
||||
$toast-header-border-color-alt: rgba(255, 255, 255, .05) !default;
|
||||
|
||||
|
||||
// Badges
|
||||
// ______________________________________
|
||||
|
||||
$badge-color-alt: $white-alt !default;
|
||||
|
||||
|
||||
// Modals
|
||||
// ______________________________________
|
||||
|
||||
$modal-content-color-alt: null !default;
|
||||
$modal-content-bg-alt: mix($gray-800-alt, $gray-900-alt, 50%) !default;
|
||||
$modal-content-border-color-alt: rgba($white-alt, .2) !default;
|
||||
$modal-content-box-shadow-xs-alt: $box-shadow-sm-alt !default;
|
||||
$modal-content-box-shadow-sm-up-alt: $box-shadow-alt !default;
|
||||
|
||||
$modal-backdrop-bg-alt: $black-alt !default;
|
||||
$modal-backdrop-opacity-alt: .85 !default;
|
||||
$modal-header-border-color-alt: $border-color-alt !default;
|
||||
$modal-footer-border-color-alt: $modal-header-border-color-alt !default;
|
||||
|
||||
|
||||
// Alerts
|
||||
// ______________________________________
|
||||
// Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-bg-scale-alt: 50% !default;
|
||||
$alert-border-scale-alt: 40% !default;
|
||||
$alert-color-scale-alt: -30% !default;
|
||||
|
||||
|
||||
// Progress bars
|
||||
// ______________________________________
|
||||
|
||||
$progress-bg-alt: $gray-800-alt !default;
|
||||
$progress-box-shadow-alt: $box-shadow-inset-alt !default;
|
||||
$progress-bar-color-alt: $black-alt !default;
|
||||
$progress-bar-bg-alt: $primary-alt !default;
|
||||
|
||||
|
||||
// List group
|
||||
// ______________________________________
|
||||
|
||||
$list-group-color-alt: $gray-100-alt !default;
|
||||
$list-group-bg-alt: $gray-900-alt !default; // $white !default;
|
||||
$list-group-border-color-alt: rgba($white-alt, .125) !default;
|
||||
|
||||
$list-group-item-bg-scale-alt: 50% !default;
|
||||
$list-group-item-color-scale-alt: -30% !default;
|
||||
|
||||
$list-group-hover-bg-alt: mix($gray-800-alt, $gray-900-alt, 50%) !default;
|
||||
$list-group-active-color-alt: $component-active-color-alt !default;
|
||||
$list-group-active-bg-alt: $component-active-bg-alt !default;
|
||||
$list-group-active-border-color-alt: $list-group-active-bg-alt !default;
|
||||
|
||||
$list-group-disabled-color-alt: $gray-400-alt !default;
|
||||
$list-group-disabled-bg-alt: $list-group-bg-alt !default;
|
||||
|
||||
$list-group-action-color-alt: $gray-300-alt !default;
|
||||
$list-group-action-hover-color-alt: $list-group-action-color-alt !default;
|
||||
|
||||
$list-group-action-active-color-alt: $body-color-alt !default;
|
||||
$list-group-action-active-bg-alt: $gray-800-alt !default;
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
// ______________________________________
|
||||
|
||||
$thumbnail-bg-alt: $body-bg-alt !default;
|
||||
$thumbnail-border-color-alt: $gray-700-alt !default;
|
||||
$thumbnail-box-shadow-alt: $box-shadow-sm-alt !default;
|
||||
|
||||
|
||||
// Figures
|
||||
// ______________________________________
|
||||
|
||||
$figure-caption-color-alt: $gray-400-alt !default;
|
||||
|
||||
|
||||
// Breadcrumbs
|
||||
// ______________________________________
|
||||
|
||||
$breadcrumb-bg-alt: null !default;
|
||||
$breadcrumb-divider-color-alt: $gray-400-alt !default;
|
||||
$breadcrumb-active-color-alt: $gray-400-alt !default;
|
||||
|
||||
// Carousel
|
||||
// ______________________________________
|
||||
|
||||
$carousel-control-color-alt: $white-alt !default;
|
||||
$carousel-control-opacity-alt: .5 !default;
|
||||
$carousel-control-hover-opacity-alt: .9 !default;
|
||||
|
||||
$carousel-indicator-opacity-alt: .5 !default;
|
||||
$carousel-indicator-active-bg-alt: $black-alt !default;
|
||||
$carousel-indicator-active-opacity-alt: 1 !default;
|
||||
|
||||
$carousel-caption-color-alt: $black-alt !default;
|
||||
|
||||
$carousel-control-prev-icon-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color-alt}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
|
||||
$carousel-control-next-icon-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color-alt}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||
|
||||
$carousel-dark-indicator-active-bg-alt: $white-alt !default;
|
||||
$carousel-dark-caption-color-alt: $white-alt !default;
|
||||
$carousel-dark-control-icon-filter-alt: invert(1) grayscale(100) !default;
|
||||
|
||||
|
||||
// Spinners
|
||||
// ______________________________________
|
||||
|
||||
// ...nada
|
||||
|
||||
|
||||
// Close
|
||||
// ______________________________________
|
||||
|
||||
$btn-close-color-alt: $white-alt !default;
|
||||
$btn-close-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color-alt}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
|
||||
$btn-close-focus-shadow-alt: $input-btn-focus-box-shadow-alt !default;
|
||||
$btn-close-opacity-alt: .5 !default;
|
||||
$btn-close-hover-opacity-alt: .75 !default;
|
||||
$btn-close-focus-opacity-alt: 1 !default;
|
||||
$btn-close-disabled-opacity-alt: .25 !default;
|
||||
$btn-close-white-filter-alt: invert(1) grayscale(100%) brightness(200%) !default;
|
||||
|
||||
|
||||
// Offcanvas
|
||||
// ______________________________________
|
||||
|
||||
$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
|
||||
// ______________________________________
|
||||
|
||||
$code-color-alt: $teal-alt !default;
|
||||
|
||||
$kbd-color-alt: $gray-100-alt !default;
|
||||
$kbd-bg-alt: $gray-800-alt !default;
|
||||
|
||||
$pre-color-alt: $gray-100-alt !default;
|
||||
|
||||
|
||||
// Unique to Dark!!
|
||||
// **************************************
|
||||
// Text Selection
|
||||
// ______________________________________
|
||||
|
||||
$selection-color-alt: $gray-200-alt !default;
|
||||
$selection-bg-alt: rgba($cyan-alt, .5) !default;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.form-floating {
|
||||
|
||||
// > label {
|
||||
// border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
|
||||
// }
|
||||
|
||||
> .form-control {
|
||||
&::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
> .form-control:focus,
|
||||
> .form-control:not(:placeholder-shown),
|
||||
> .form-select {
|
||||
~ label {
|
||||
opacity: $form-floating-label-opacity-alt;
|
||||
}
|
||||
}
|
||||
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
||||
> .form-control:-webkit-autofill {
|
||||
~ label {
|
||||
opacity: $form-floating-label-opacity-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
// Check/radio
|
||||
|
||||
.form-check-input {
|
||||
background-color: $form-check-input-bg-alt;
|
||||
border: $form-check-input-border-alt;
|
||||
|
||||
&:active {
|
||||
filter: $form-check-input-active-filter-alt;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $form-check-input-focus-border-alt;
|
||||
box-shadow: $form-check-input-focus-box-shadow-alt;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $form-check-input-checked-bg-color-alt;
|
||||
border-color: $form-check-input-checked-border-color-alt;
|
||||
|
||||
&[type="checkbox"] {
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image-alt);
|
||||
}
|
||||
}
|
||||
|
||||
&[type="radio"] {
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-check-radio-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-check-radio-checked-bg-image-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"]:indeterminate {
|
||||
background-color: $form-check-input-indeterminate-bg-color-alt;
|
||||
border-color: $form-check-input-indeterminate-border-color-alt;
|
||||
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-check-input-indeterminate-bg-image-alt), var(--#{$variable-prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-check-input-indeterminate-bg-image-alt);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: $form-check-input-disabled-opacity-alt;
|
||||
}
|
||||
|
||||
// Use disabled attribute in addition of :disabled pseudo-class
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
~ .form-check-label {
|
||||
opacity: $form-check-label-disabled-opacity-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
color: $form-check-label-color-alt;
|
||||
}
|
||||
|
||||
// Switch
|
||||
|
||||
.form-switch {
|
||||
|
||||
.form-check-input {
|
||||
background-image: escape-svg($form-switch-bg-image-alt);
|
||||
|
||||
&:focus {
|
||||
background-image: escape-svg($form-switch-focus-bg-image-alt);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-switch-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-switch-checked-bg-image-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
+ .btn {
|
||||
opacity: $form-check-btn-check-disabled-opacity-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
//
|
||||
// General form controls (plus a few specific high-level interventions)
|
||||
//
|
||||
|
||||
.form-control {
|
||||
color: $input-color-alt;
|
||||
background-color: $input-bg-alt;
|
||||
border: $input-border-width solid $input-border-color-alt;
|
||||
|
||||
@include box-shadow($input-box-shadow-alt);
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
&:focus {
|
||||
color: $input-focus-color-alt;
|
||||
background-color: $input-focus-bg-alt;
|
||||
border-color: $input-focus-border-color-alt;
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($input-box-shadow-alt, $input-focus-box-shadow-alt);
|
||||
} @else {
|
||||
box-shadow: $input-focus-box-shadow-alt;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color-alt;
|
||||
}
|
||||
|
||||
// Disabled and read-only inputs
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background-color: $input-disabled-bg-alt;
|
||||
border-color: $input-disabled-border-color-alt;
|
||||
}
|
||||
|
||||
// File input buttons theming
|
||||
&::file-selector-button {
|
||||
color: $form-file-button-color-alt;
|
||||
@include gradient-bg($form-file-button-bg-alt);
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not([readonly])::file-selector-button {
|
||||
background-color: $form-file-button-hover-bg-alt;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
color: $form-file-button-color-alt;
|
||||
@include gradient-bg($form-file-button-bg-alt);
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
|
||||
background-color: $form-file-button-hover-bg-alt;
|
||||
}
|
||||
}
|
||||
|
||||
// Readonly controls as plain text
|
||||
|
||||
.form-control-plaintext {
|
||||
color: $input-plaintext-color-alt;
|
||||
background-color: transparent;
|
||||
border: solid transparent;
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
// Range
|
||||
|
||||
.form-range {
|
||||
// background-color: transparent;
|
||||
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
|
||||
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include gradient-bg($form-range-thumb-bg-alt);
|
||||
border: $form-range-thumb-border-alt;
|
||||
@include box-shadow($form-range-thumb-box-shadow-alt);
|
||||
|
||||
&:active {
|
||||
@include gradient-bg($form-range-thumb-active-bg-alt);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
// color: transparent; // Why?
|
||||
background-color: $form-range-track-bg-alt;
|
||||
// border-color: transparent;
|
||||
@include box-shadow($form-range-track-box-shadow-alt);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include gradient-bg($form-range-thumb-bg-alt);
|
||||
border: $form-range-thumb-border-alt;
|
||||
@include box-shadow($form-range-thumb-box-shadow-alt);
|
||||
|
||||
&:active {
|
||||
@include gradient-bg($form-range-thumb-active-bg-alt);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
// color: transparent;
|
||||
background-color: $form-range-track-bg-alt;
|
||||
// border-color: transparent; // Firefox specific?
|
||||
@include box-shadow($form-range-track-box-shadow-alt);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $form-range-thumb-disabled-bg-alt;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: $form-range-thumb-disabled-bg-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
// Select
|
||||
|
||||
.form-select {
|
||||
color: $form-select-color-alt;
|
||||
background-color: $form-select-bg-alt;
|
||||
background-image: escape-svg($form-select-indicator-alt);
|
||||
border: $form-select-border-width solid $form-select-border-color-alt;
|
||||
@include box-shadow($form-select-box-shadow-alt);
|
||||
|
||||
&:focus {
|
||||
border-color: $form-select-focus-border-color-alt;
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($form-select-box-shadow-alt, $form-select-focus-box-shadow-alt);
|
||||
} @else {
|
||||
box-shadow: $form-select-focus-box-shadow-alt;
|
||||
}
|
||||
}
|
||||
|
||||
&[multiple],
|
||||
&[size]:not([size="1"]) {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $form-select-disabled-color-alt;
|
||||
background-color: $form-select-disabled-bg-alt;
|
||||
border-color: $form-select-disabled-border-color-alt;
|
||||
}
|
||||
|
||||
// Remove outline from select box in FF
|
||||
&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 $form-select-color-alt;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// Form text
|
||||
|
||||
.form-text {
|
||||
color: $form-text-color-alt;
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// Textual addons
|
||||
|
||||
.input-group-text {
|
||||
color: $input-group-addon-color-alt;
|
||||
background-color: $input-group-addon-bg-alt;
|
||||
border: $input-border-width solid $input-group-addon-border-color-alt;
|
||||
}
|
||||
|
||||
// Rounded corners
|
||||
|
||||
.input-group {
|
||||
$validation-messages: "";
|
||||
@each $state in map-keys($form-validation-states-alt) {
|
||||
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
|
||||
}
|
||||
} // WHAT DOES THIS DO???
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// Labels
|
||||
|
||||
.form-label {
|
||||
color: $form-label-color-alt;
|
||||
}
|
||||
|
||||
.col-form-label {
|
||||
color: $form-label-color-alt;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// Form validation
|
||||
|
||||
@each $state, $data in $form-validation-states-alt {
|
||||
@include form-validation-state-alt($state, $data...);
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@each $color, $value in $theme-colors-alt {
|
||||
.link-#{$color} {
|
||||
color: $value;
|
||||
|
||||
@if $link-shade-percentage != 0 {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: if(color-contrast($value, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt) == $color-contrast-light-alt, shade-color($value, $link-shade-percentage-alt), tint-color($value, $link-shade-percentage-alt));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
// from commit [aee169d19](https://github.com/twbs/bootstrap/commit/aee169d19288d78330be2df0960ea8924353f84f)
|
||||
|
||||
.vr {
|
||||
background-color: currentcolor;
|
||||
opacity: $hr-opacity-alt;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@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; }
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
// Button variants
|
||||
|
||||
@mixin button-variant-alt(
|
||||
$background,
|
||||
$border,
|
||||
$color: color-contrast($background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
|
||||
$hover-background: if($color == $color-contrast-light-alt, shade-color($background, $btn-hover-bg-shade-amount-alt), tint-color($background, $btn-hover-bg-tint-amount-alt)),
|
||||
$hover-border: if($color == $color-contrast-light-alt, shade-color($border, $btn-hover-border-shade-amount-alt), tint-color($border, $btn-hover-border-tint-amount-alt)),
|
||||
$hover-color: color-contrast($hover-background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
|
||||
$active-background: if($color == $color-contrast-light-alt, shade-color($background, $btn-active-bg-shade-amount-alt), tint-color($background, $btn-active-bg-tint-amount-alt)),
|
||||
$active-border: if($color == $color-contrast-light-alt, shade-color($border, $btn-active-border-shade-amount-alt), tint-color($border, $btn-active-border-tint-amount-alt)),
|
||||
$active-color: color-contrast($active-background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
|
||||
$disabled-background: $background,
|
||||
$disabled-border: $border,
|
||||
$disabled-color: color-contrast($disabled-background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
|
||||
$btn-box-shadow: $btn-box-shadow-alt
|
||||
) {
|
||||
color: $color;
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
&:hover {
|
||||
color: $hover-color;
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
}
|
||||
|
||||
.btn-check:focus + &,
|
||||
&:focus {
|
||||
color: $hover-color;
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $active-color;
|
||||
background-color: $active-background;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none, null);
|
||||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: $disabled-color;
|
||||
background-color: $disabled-background;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none, null);
|
||||
border-color: $disabled-border;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline-variant-alt(
|
||||
$color,
|
||||
$color-hover: color-contrast($color),
|
||||
$active-background: $color,
|
||||
$active-border: $color,
|
||||
$active-color: color-contrast($active-background),
|
||||
$btn-active-box-shadow: $btn-active-box-shadow-alt
|
||||
) {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
|
||||
&:hover {
|
||||
color: $color-hover;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
.btn-check:focus + &,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active,
|
||||
&.dropdown-toggle.show {
|
||||
color: $active-color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
// scss-docs-start mixin-color-scheme
|
||||
@mixin color-scheme-alt($scheme: light) {
|
||||
@if $scheme == dark {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@content;
|
||||
}
|
||||
} @else if $scheme == light {
|
||||
@media (prefers-color-scheme: light) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
// assume what gets passed here is not light or dark, thus is a CSS element,
|
||||
// e.g. "html.dark", or "[data-theme-dark]"
|
||||
#{$scheme} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end mixin-color-scheme
|
||||
|
||||
@mixin color-scheme-property($scheme: light, $dual: false) {
|
||||
@if $dual {
|
||||
@if $scheme == dark {
|
||||
color-scheme: dark light;
|
||||
} @else if $scheme == light {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
} @else {
|
||||
@if $scheme == dark {
|
||||
color-scheme: dark;
|
||||
} @else if $scheme == light {
|
||||
color-scheme: light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function alternative-color-scheme($scheme: light) {
|
||||
@if $scheme == dark {
|
||||
@return light;
|
||||
} @else if $scheme == light {
|
||||
@return dark;
|
||||
} @else {
|
||||
@return $scheme;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
@mixin form-validation-state-alt(
|
||||
$state,
|
||||
$color,
|
||||
$icon,
|
||||
$tooltip-color: color-contrast($color, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
|
||||
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity-alt),
|
||||
$focus-box-shadow: 0 0 $input-btn-focus-blur-alt $input-focus-width rgba($color, $input-btn-focus-color-opacity-alt)
|
||||
) {
|
||||
.#{$state}-feedback {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.#{$state}-tooltip {
|
||||
color: $tooltip-color;
|
||||
background-color: $tooltip-bg-color;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@include form-validation-state-selector($state) {
|
||||
border-color: $color;
|
||||
|
||||
@if $enable-validation-icons {
|
||||
background-image: escape-svg($icon);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@include form-validation-state-selector($state) {
|
||||
border-color: $color;
|
||||
|
||||
@if $enable-validation-icons {
|
||||
&:not([multiple]):not([size]),
|
||||
&:not([multiple])[size="1"] {
|
||||
background-image: escape-svg($form-select-indicator-alt), escape-svg($icon);
|
||||
}
|
||||
|
||||
&[multiple],
|
||||
&[size]:not([size="1"]) {
|
||||
background-image: escape-svg($icon);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
@include form-validation-state-selector($state) {
|
||||
border-color: $color;
|
||||
|
||||
&:checked {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
|
||||
~ .form-check-label {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
@mixin table-variant-alt($state, $background) {
|
||||
.table-#{$state} {
|
||||
$color: color-contrast(opaque($body-bg-alt, $background));
|
||||
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor-alt));
|
||||
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor-alt));
|
||||
$active-bg: mix($color, $background, percentage($table-active-bg-factor-alt));
|
||||
|
||||
--#{$variable-prefix}table-bg: #{$background};
|
||||
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
|
||||
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
|
||||
--#{$variable-prefix}table-active-bg: #{$active-bg};
|
||||
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
|
||||
--#{$variable-prefix}table-hover-bg: #{$hover-bg};
|
||||
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
|
||||
|
||||
color: $color;
|
||||
border-color: mix($color, $background, percentage($table-border-factor-alt));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@use "sass:map";
|
||||
|
||||
@each $color-scheme in $color-schemes {
|
||||
@include color-scheme-alt($color-scheme) {
|
||||
@include generate-utility(map-get($utilities, "display"), "-#{$color-scheme}");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// Loop over each breakpoint
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
||||
// Generate media query if needed
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Loop over each utility property
|
||||
@each $key, $utility in $utilities-alt {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
// Only proceed if responsive media queries are enabled or if it's the base media query
|
||||
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
|
||||
@include generate-utility($utility, $infix);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,58 +8,20 @@
|
|||
// Configuration
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables"; // defaults are here
|
||||
@import "../bootstrap-dark/variables-alt"; // dark color set is here
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "../bootstrap-dark/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
@import "../bootstrap-dark/utilities";
|
||||
@import "../bootstrap-dark/patch"; // missing from BS, unsupported patch/hack
|
||||
|
||||
// stylelint-disable no-invalid-position-at-import-rule
|
||||
|
||||
:root { color-scheme: dark; }
|
||||
|
||||
// Layout & components
|
||||
@import "../bootstrap-dark/root";
|
||||
@import "../bootstrap-dark/reboot";
|
||||
@import "../bootstrap-dark/type";
|
||||
@import "../bootstrap-dark/images";
|
||||
// @import "../bootstrap-dark/containers";
|
||||
// @import "../bootstrap-dark/grid";
|
||||
@import "../bootstrap-dark/tables";
|
||||
@import "../bootstrap-dark/forms";
|
||||
@import "../bootstrap-dark/buttons";
|
||||
// @import "../bootstrap-dark/transitions";
|
||||
@import "../bootstrap-dark/dropdown";
|
||||
@import "../bootstrap-dark/button-group";
|
||||
@import "../bootstrap-dark/nav";
|
||||
@import "../bootstrap-dark/navbar";
|
||||
@import "../bootstrap-dark/card";
|
||||
@import "../bootstrap-dark/accordion";
|
||||
@import "../bootstrap-dark/breadcrumb";
|
||||
@import "../bootstrap-dark/pagination";
|
||||
@import "../bootstrap-dark/badge";
|
||||
@import "../bootstrap-dark/alert";
|
||||
@import "../bootstrap-dark/progress";
|
||||
@import "../bootstrap-dark/list-group";
|
||||
@import "../bootstrap-dark/close";
|
||||
@import "../bootstrap-dark/toasts";
|
||||
@import "../bootstrap-dark/modal";
|
||||
@import "../bootstrap-dark/tooltip";
|
||||
@import "../bootstrap-dark/popover";
|
||||
@import "../bootstrap-dark/carousel";
|
||||
// @import "../bootstrap-dark/spinners";
|
||||
@import "../bootstrap-dark/offcanvas";
|
||||
@import "../bootstrap-dark/placeholders";
|
||||
|
||||
// Helpers
|
||||
@import "../bootstrap-dark/helpers";
|
||||
|
||||
// Utilities
|
||||
@import "../bootstrap-dark/utilities/api";
|
||||
|
||||
// Unique to dark-mode
|
||||
@import "../bootstrap-dark/dark";
|
||||
|
||||
// AdminLTE dark
|
||||
@import "variables-alt";
|
||||
|
|
|
|||
Loading…
Reference in New Issue