mirror of https://github.com/ColorlibHQ/AdminLTE
fix custom-select arrows in dark-mode
parent
c434c98aa8
commit
747e0ddf5b
|
@ -112,6 +112,16 @@ $enable-responsive-font-sizes: false !default;
|
||||||
$enable-validation-icons: true !default;
|
$enable-validation-icons: true !default;
|
||||||
$enable-deprecation-messages: true !default;
|
$enable-deprecation-messages: true !default;
|
||||||
|
|
||||||
|
// Characters which are escaped by the escape-svg function
|
||||||
|
$escaped-characters: (
|
||||||
|
("<", "%3c"),
|
||||||
|
(">", "%3e"),
|
||||||
|
("#", "%23"),
|
||||||
|
("(", "%28"),
|
||||||
|
(")", "%29"),
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
|
||||||
// Spacing
|
// Spacing
|
||||||
//
|
//
|
||||||
// Control the default styling of most Bootstrap elements by modifying these
|
// Control the default styling of most Bootstrap elements by modifying these
|
||||||
|
@ -491,7 +501,8 @@ $custom-select-bg: $white !default;
|
||||||
$custom-select-disabled-bg: $gray-200 !default;
|
$custom-select-disabled-bg: $gray-200 !default;
|
||||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||||
$custom-select-indicator-color: $gray-800 !default;
|
$custom-select-indicator-color: $gray-800 !default;
|
||||||
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
|
||||||
|
$custom-select-background: escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
||||||
$custom-select-border-width: $input-btn-border-width !default;
|
$custom-select-border-width: $input-btn-border-width !default;
|
||||||
$custom-select-border-color: $input-border-color !default;
|
$custom-select-border-color: $input-border-color !default;
|
||||||
$custom-select-border-radius: $border-radius !default;
|
$custom-select-border-radius: $border-radius !default;
|
||||||
|
|
|
@ -379,6 +379,14 @@ body.text-sm {
|
||||||
border-color: $gray-600;
|
border-color: $gray-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-select {
|
||||||
|
background: $dark $custom-select-dark-background;
|
||||||
|
|
||||||
|
&[multiple]{
|
||||||
|
background: $dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.input-group-text {
|
.input-group-text {
|
||||||
border-color: $gray-600;
|
border-color: $gray-600;
|
||||||
}
|
}
|
||||||
|
|
|
@ -233,3 +233,10 @@ $ribbon-xl-wrapper-size: 180px !default;
|
||||||
$ribbon-xl-width: 240px !default;
|
$ribbon-xl-width: 240px !default;
|
||||||
$ribbon-xl-top: 47px !default;
|
$ribbon-xl-top: 47px !default;
|
||||||
$ribbon-xl-right: 4px !default;
|
$ribbon-xl-right: 4px !default;
|
||||||
|
|
||||||
|
// CUSTOM FORM SELECT
|
||||||
|
// --------------------------------------------------------
|
||||||
|
|
||||||
|
$custom-select-dark-indicator-color: $white !default;
|
||||||
|
$custom-select-dark-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-dark-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
|
||||||
|
$custom-select-dark-background: escape-svg($custom-select-dark-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
||||||
|
|
Loading…
Reference in New Issue