diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro index c41dbf568b0..2da79617cfc 100644 --- a/src/html/components/_scripts.astro +++ b/src/html/components/_scripts.astro @@ -9,21 +9,25 @@ const adminlteJsUrl = path + "/js/adminlte.js"; integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous" > - + + - + + - + + - + + + + + + + + + diff --git a/src/html/pages/forms/general.astro b/src/html/pages/forms/general.astro index b7ff25f443b..6cd919158a7 100644 --- a/src/html/pages/forms/general.astro +++ b/src/html/pages/forms/general.astro @@ -58,7 +58,7 @@ const page = "general";
- For detailed documentaion of Form visit
-
+
Quick Example
@@ -140,7 +140,7 @@ const page = "general";
-
+
Input Group
@@ -234,7 +234,7 @@ const page = "general";
-
+
Horizontal Form
@@ -348,7 +348,7 @@ const page = "general";
-
+
Different Height
@@ -381,7 +381,7 @@ const page = "general";
-
+
Different Width
@@ -425,7 +425,7 @@ const page = "general";
-
+
Form Validation
diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss new file mode 100644 index 00000000000..14be1ce6510 --- /dev/null +++ b/src/scss/_toasts.scss @@ -0,0 +1,33 @@ +// +// Toast +// + +@each $name, $color in $theme-colors { + .toast-#{$name} { + --#{$prefix}toast-header-color: #{color-contrast($color)}; + --#{$prefix}toast-header-bg: #{$color}; + --#{$prefix}toast-header-border-color: #{$color}; + --#{$prefix}toast-border-color: #{$color}; + --#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle); + + @if color-contrast($color) == $color-contrast-light { + .btn-close { + @include btn-close-white(); + } + } + } +} + +@if $enable-dark-mode { + @include color-mode(dark) { + @each $name, $color in $theme-colors { + .toast-#{$name} { + @if color-contrast($color) == $color-contrast-dark { + .btn-close { + --#{$prefix}btn-close-white-filter: none; + } + } + } + } + } +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index bfaa670964c..712a168d20a 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,16 +1,17 @@ +// // Custom AdminLTE Variables +// // Prefix for :root CSS variables and others. $lte-prefix: lte- !default; // TRANSITIONS SETTINGS // -------------------------------------------------------- - // Transition global options $lte-transition-speed: .3s !default; $lte-transition-fn: ease-in-out !default; -// Sidebar +// SIDEBAR // -------------------------------------------------------- $lte-sidebar-width: 250px !default; $lte-sidebar-breakpoint: lg !default; @@ -58,11 +59,13 @@ $lte-app-header-link-padding-y: $navbar-padding-y !default; $lte-app-header-height: ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default; $lte-app-header-height-compact: ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default; -// Content padding +// CONTENT PADDING +// -------------------------------------------------------- $lte-content-padding-y: 0 !default; $lte-content-padding-x: .5rem !default; // MAIN CONTENT +// -------------------------------------------------------- $lte-app-content-bottom-area-height-sm: 3.5rem !default; $lte-app-content-bottom-area-height-md: 6rem !default; $lte-app-content-bottom-area-height-lg: 9rem !default; @@ -88,8 +91,7 @@ $lte-brand-link-padding-x: $lte-sidebar-padding-x !default; $lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default; $lte-brand-link-border-buttom: 1px !default; - -// Cards +// CARDS // -------------------------------------------------------- $lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default; $lte-card-title-font-size: 1.1rem !default; diff --git a/src/scss/adminlte.scss b/src/scss/adminlte.scss index 880b68e05e7..4096008292d 100644 --- a/src/scss/adminlte.scss +++ b/src/scss/adminlte.scss @@ -60,7 +60,6 @@ // Bootstrap Utilities @import "bootstrap/scss/utilities/api"; - // AdminLTE Configuration // --------------------------------------------------- @import "variables"; diff --git a/src/scss/parts/_extra-components.scss b/src/scss/parts/_extra-components.scss index 2c663e2be9d..1028da98396 100644 --- a/src/scss/parts/_extra-components.scss +++ b/src/scss/parts/_extra-components.scss @@ -6,3 +6,4 @@ @import "../info-box"; @import "../timeline"; @import "../direct-chat"; +@import "../toasts";