From e9c20b8c84a9d91259ddda45f287baa43046b71f Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Wed, 30 Aug 2023 17:04:39 +0200 Subject: [PATCH 01/16] BS components --- src/html/components/dashboard/_sidenav.astro | 21 +- src/html/pages/components/general.astro | 608 +++++++++++++++++++ 2 files changed, 626 insertions(+), 3 deletions(-) create mode 100644 src/html/pages/components/general.astro diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 52f2dcb7b26..0620f9f52cd 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -1,6 +1,6 @@ --- -import { convertPathToHtml } from "../../../utils/index.js"; -const { path, mainPage, page } = Astro.props; +import {convertPathToHtml} from "../../../utils/index.js"; +const {path, mainPage, page} = Astro.props; const htmlPath = convertPathToHtml(path); --- @@ -125,7 +125,7 @@ const htmlPath = convertPathToHtml(path);

Layout Options 66

@@ -250,6 +250,21 @@ const htmlPath = convertPathToHtml(path); +
  • + + +

    Components +

    +     + +
  • + + + + + + + + + +
    + + + +
    + +
    + +
    + +
    +
    +

    {pageTitle}

    +
    +
    +
      +
    1. Home
      2. +
    2. + {pageTitle} +
      3. +
    +
    +
    + +
    + +
    + + +
    + +
    + +
    + +
    +
    + For detailed documentation of Components visit + Bootstrap Components + +
    +
    + + +
    + +
    + +
    +
    Accordion
    +
    + + +
    +
    +
    +

    + +

    +
    +
    + This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +
    +
    +
    +

    + +

    +
    +
    + This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +
    +
    +
    +

    + +

    +
    +
    + This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +
    +
    +
    +
    + +
    + + +
    + +
    +
    Alert
    +
    + + +
    + + + + + + + + +
    + +
    + + +
    + +
    +
    Badge
    +
    + + +
    +

    Example heading New

    +

    Example heading New

    +

    Example heading New

    +

    Example heading New

    +
    Example heading New
    +
    Example heading New
    +
    + +
    + +
    + +
    + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
    + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
    + +
    + + +
    + +
    +
    Button
    +
    + + +
    + + + + + + + + + +
    + + + + + + +
    + + + + + + + + +
    + + + +
    + +
    + + +
    + +
    +
    Button Group
    +
    + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    + + + + + + + + +
    +
    + + + + + + + + +
    +
    +
    + + +
    + + +
    +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    Collapse
    +
    + + +
    +

    + + +

    +
    +
    + Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. +
    +
    +
    + +
    + + +
    + +
    +
    Dropdowns
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + + + +
    +
    + + + +
    +
    + +
    + + +
    + +
    +
    List Group
    +
    + + +
    +
    + + The current link item + + A second link item + A third link item + A fourth link item + A disabled link item +
    +
    + +
    + + +
    + +
    +
    Navbar
    +
    + + +
    + +
    + +
    + + +
    + +
    +
    Pagination
    +
    + + +
    + +
    + +
    + +
    + +
    + + +
    + +
    +
    Placeholder
    +
    + + +
    + +
    + +
    + + +
    + +
    +
    Quick Example
    +
    + + +
    +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    + + + + + + From 3dc54671dafab75d421579d636e973bc8810f9c7 Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Wed, 30 Aug 2023 20:42:34 +0200 Subject: [PATCH 02/16] BS5 components --- src/html/components/_scripts.astro | 31 ++++- src/html/pages/components/general.astro | 118 +++++++++++++++++-- src/html/pages/forms/general.astro | 14 +-- src/scss/_toasts.scss | 144 ++++++++++++++++++++++++ src/scss/adminlte.scss | 2 +- 5 files changed, 289 insertions(+), 20 deletions(-) create mode 100644 src/scss/_toasts.scss diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro index c41dbf568b0..521e037538b 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/components/general.astro b/src/html/pages/components/general.astro index 1c0001af93e..c12b8ba2d9b 100644 --- a/src/html/pages/components/general.astro +++ b/src/html/pages/components/general.astro @@ -258,6 +258,10 @@ const pageTitle = "General Components"; + + + +
    @@ -321,10 +325,6 @@ const pageTitle = "General Components";
    -
    - - -
    @@ -575,19 +575,123 @@ const pageTitle = "General Components";
    - + +
    + +
    +
    Progress
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    + +
    +
    Toast
    +
    + + +
    + +
    + + +
    +
    + +
    + +
    -
    Quick Example
    +
    Tooltip
    +

    Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

    +
    + +
    + + +
    + +
    +
    Spinner
    +
    + + +
    + + + + + + + +
    - +
    diff --git a/src/html/pages/forms/general.astro b/src/html/pages/forms/general.astro index b7ff25f443b..b878b3be217 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..d484b527207 --- /dev/null +++ b/src/scss/_toasts.scss @@ -0,0 +1,144 @@ +/** + * Toast styles to reflect Bootstrap colors + */ +.toast { + min-width: 300px; + margin: 8px; +} + +.toast .toast-body { + color: $black; + background-color: $gray-100; + /* stylelint-disable */ + border-radius: 0 0 .25rem .25rem; + /* stylelint-enable */ +} + +.toast-danger .toast-header { + //background-color: #dc3545 !important; + color: $white !important; + background-color: $red !important; + border-color: $red; +} + +.toast-danger .toast-header button { + color: $white !important; +} + +.toast-danger .toast-body { + color: $white; + background-color: $red-300; +} + +.toast-dark .toast-header { + color: $white !important; + background-color: $gray-900 !important; + border-color: $gray-700; +} + +.toast-dark .toast-header button { + color: $white !important; + --bs-btn-close-color: $white; +} + +.toast-dark .toast-body { + color: $white; + background-color: $gray-700; +} + +.toast-info .toast-header { + color: $white !important; + background-color: #17a2b8 !important; + border-color: #17a2b8; +} + +.toast-info .toast-header button { + color: $white !important; + --bs-btn-close-color: $white; +} + +.toast-info .toast-body { + color: $white; + background-color: #1fc8e3; +} + +.toast-light .toast-header { + color: #1f2d3d !important; + background-color: $gray-100 !important; + border-color: $gray-100; +} + +.toast-light .toast-header button { + color: #1f2d3d !important; + --bs-btn-close-color: #1f2d3d; +} + +.toast-light .toast-body { + color: #1f2d3d; + background-color: $white; +} + +.toast-primary .toast-header { + color: $white !important; + background-color: #007bff !important; + border-color: #007bff; +} + +.toast-primary .toast-header button { + color: $white !important; + --bs-btn-close-color: $white; +} + +.toast-primary .toast-body { + color: $white; + background-color: #3395ff; +} + +.toast-secondary .toast-header { + color: $white !important; + background-color: $gray-600 !important; + border-color: $gray-600; +} + +.toast-secondary .toast-header button { + color: $white !important; + --bs-btn-close-color: $white; +} + +.toast-secondary .toast-body { + color: $white; + background-color: #868e96; +} + +.toast-success .toast-header { + color: $white !important; + background-color: #28a745 !important; + border-color: #28a745; +} + +.toast-success .toast-header button { + color: $white !important; + --bs-btn-close-color: $white; +} + +.toast-success .toast-body { + color: $white; + background-color: #34ce57; +} + +.toast-warning .toast-header { + color: #1f2d3d !important; + background-color: $yellow !important; + border-color: $yellow; +} + +.toast-warning .toast-header button { + color: #1f2d3d !important; + --bs-btn-close-color: #1f2d3d; +} + +.toast-warning .toast-body { + color: #1f2d3d; + background-color: #ffce3a; +} + diff --git a/src/scss/adminlte.scss b/src/scss/adminlte.scss index 880b68e05e7..7f84322fa42 100644 --- a/src/scss/adminlte.scss +++ b/src/scss/adminlte.scss @@ -60,12 +60,12 @@ // Bootstrap Utilities @import "bootstrap/scss/utilities/api"; - // AdminLTE Configuration // --------------------------------------------------- @import "variables"; @import "variables-dark"; @import "mixins"; +@import "toasts"; // AdiminLTE Parts // --------------------------------------------------- From e164129a4cb1f34752e4397d12318c38fbec1ba7 Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Thu, 31 Aug 2023 09:20:34 +0200 Subject: [PATCH 03/16] BS5 components --- src/html/components/_scripts.astro | 6 ++++-- src/html/pages/components/general.astro | 27 +++++++++++++------------ 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro index 521e037538b..7999933e94f 100644 --- a/src/html/components/_scripts.astro +++ b/src/html/components/_scripts.astro @@ -60,8 +60,10 @@ const adminlteJsUrl = path + "/js/adminlte.js"; - + - + diff --git a/src/html/pages/components/general.astro b/src/html/pages/components/general.astro index 14021441253..6d6f53bbe22 100644 --- a/src/html/pages/components/general.astro +++ b/src/html/pages/components/general.astro @@ -225,31 +225,31 @@ const pageTitle = "General Components";
    - - - - - - - - - + + + + + + + + +
    - - - - - - + + + + + +
    - - - - - - - - + + + + + + + +
    @@ -271,23 +271,23 @@ const pageTitle = "General Components";
    -
    +
    -
    +
    -
    +
    -
    +
    @@ -297,7 +297,7 @@ const pageTitle = "General Components";
    -
    +
    @@ -308,7 +308,7 @@ const pageTitle = "General Components";
    -
    +
    @@ -612,8 +612,28 @@ const pageTitle = "General Components";
    - + +
    + + + + + + + +
    + - - - - - - - - - - - - + + + + + + +
    diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index d484b527207..e1d4b43fc11 100644 --- a/src/scss/_toasts.scss +++ b/src/scss/_toasts.scss @@ -1,5 +1,5 @@ /** - * Toast styles to reflect Bootstrap colors + * Custom toast styles to reflect Bootstrap colors */ .toast { min-width: 300px; @@ -15,7 +15,6 @@ } .toast-danger .toast-header { - //background-color: #dc3545 !important; color: $white !important; background-color: $red !important; border-color: $red; @@ -141,4 +140,3 @@ color: #1f2d3d; background-color: #ffce3a; } - From 4aee32f55170eb1bb6d2b6cf76c644b69b895cce Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Thu, 31 Aug 2023 11:44:31 +0200 Subject: [PATCH 05/16] BS5 components --- src/html/components/dashboard/_sidenav.astro | 2 +- src/html/pages/components/general.astro | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 0620f9f52cd..38d4a8a2261 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -252,7 +252,7 @@ const htmlPath = convertPathToHtml(path);
  • - +

    Components

    diff --git a/src/html/pages/components/general.astro b/src/html/pages/components/general.astro index 6d6f53bbe22..96151594a27 100644 --- a/src/html/pages/components/general.astro +++ b/src/html/pages/components/general.astro @@ -338,7 +338,7 @@ const pageTitle = "General Components"; -

    From a582b04aa201a9e4e2b7d56c45cbaecf9cd21d50 Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Sun, 3 Sep 2023 16:46:03 +0200 Subject: [PATCH 06/16] Custom toast style update to bs variables --- src/scss/_toasts.scss | 204 ++++++++++++++------------------------- src/scss/_variables.scss | 12 ++- 2 files changed, 79 insertions(+), 137 deletions(-) diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index e1d4b43fc11..084a16ebe26 100644 --- a/src/scss/_toasts.scss +++ b/src/scss/_toasts.scss @@ -7,136 +7,76 @@ } .toast .toast-body { - color: $black; - background-color: $gray-100; - /* stylelint-disable */ - border-radius: 0 0 .25rem .25rem; - /* stylelint-enable */ -} - -.toast-danger .toast-header { - color: $white !important; - background-color: $red !important; - border-color: $red; -} - -.toast-danger .toast-header button { - color: $white !important; -} - -.toast-danger .toast-body { - color: $white; - background-color: $red-300; -} - -.toast-dark .toast-header { - color: $white !important; - background-color: $gray-900 !important; - border-color: $gray-700; -} - -.toast-dark .toast-header button { - color: $white !important; - --bs-btn-close-color: $white; -} - -.toast-dark .toast-body { - color: $white; - background-color: $gray-700; -} - -.toast-info .toast-header { - color: $white !important; - background-color: #17a2b8 !important; - border-color: #17a2b8; -} - -.toast-info .toast-header button { - color: $white !important; - --bs-btn-close-color: $white; -} - -.toast-info .toast-body { - color: $white; - background-color: #1fc8e3; -} - -.toast-light .toast-header { - color: #1f2d3d !important; - background-color: $gray-100 !important; - border-color: $gray-100; -} - -.toast-light .toast-header button { - color: #1f2d3d !important; - --bs-btn-close-color: #1f2d3d; -} - -.toast-light .toast-body { - color: #1f2d3d; - background-color: $white; -} - -.toast-primary .toast-header { - color: $white !important; - background-color: #007bff !important; - border-color: #007bff; -} - -.toast-primary .toast-header button { - color: $white !important; - --bs-btn-close-color: $white; -} - -.toast-primary .toast-body { - color: $white; - background-color: #3395ff; -} - -.toast-secondary .toast-header { - color: $white !important; - background-color: $gray-600 !important; - border-color: $gray-600; -} - -.toast-secondary .toast-header button { - color: $white !important; - --bs-btn-close-color: $white; -} - -.toast-secondary .toast-body { - color: $white; - background-color: #868e96; -} - -.toast-success .toast-header { - color: $white !important; - background-color: #28a745 !important; - border-color: #28a745; -} - -.toast-success .toast-header button { - color: $white !important; - --bs-btn-close-color: $white; -} - -.toast-success .toast-body { - color: $white; - background-color: #34ce57; -} - -.toast-warning .toast-header { - color: #1f2d3d !important; - background-color: $yellow !important; - border-color: $yellow; -} - -.toast-warning .toast-header button { - color: #1f2d3d !important; - --bs-btn-close-color: #1f2d3d; -} - -.toast-warning .toast-body { - color: #1f2d3d; - background-color: #ffce3a; + --#{$prefix}toast-color: #{$black}; + --#{$prefix}toast-bg: #{$gray-100}; + --#{$prefix}toast-border-radius: 0 0 .25rem .25rem; +} + +.toast-danger { + --#{$prefix}toast-header-color: #{$white}; + --#{$prefix}toast-header-bg: #{$danger}; + --#{$prefix}toast-header-border-color: #{$danger}; + --#{$prefix}toast-border-color: #{$danger}; + --#{$prefix}toast-color: #{$white}; + --#{$prefix}toast-bg: #{$red-300}; +} + +.toast-dark { + --#{$prefix}toast-header-color: #{$white}; + --#{$prefix}toast-header-bg: #{$dark}; + --#{$prefix}toast-header-border-color: #{$dark}; + --#{$prefix}toast-border-color: #{$dark}; + --#{$prefix}toast-color: #{$white}; + --#{$prefix}toast-bg: #{$gray-600}; +} + +.toast-info { + --#{$prefix}toast-header-color: #{$white}; + --#{$prefix}toast-header-bg: #{$info}; + --#{$prefix}toast-header-border-color: #{$info}; + --#{$prefix}toast-border-color: #{$info}; + --#{$prefix}toast-bg: #{$cyan-300}; +} + +.toast-light { + --#{$prefix}toast-header-color: #{$gray-900}; + --#{$prefix}toast-header-bg: #{$light}; + --#{$prefix}toast-header-border-color: #{$light}; + --#{$prefix}toast-border-color: #{$light}; + --#{$prefix}toast-color: #{$gray-900}; + --#{$prefix}toast-bg: #{$white}; +} + +.toast-primary { + --#{$prefix}toast-header-color: #{$white}; + --#{$prefix}toast-header-bg: #{$primary}; + --#{$prefix}toast-header-border-color: #{$primary}; + --#{$prefix}toast-border-color: #{$primary}; + --#{$prefix}toast-color: #{$white}; + --#{$prefix}toast-bg: #{$blue-300}; +} + +.toast-secondary { + --#{$prefix}toast-header-color: #{$white}; + --#{$prefix}toast-header-bg: #{$secondary}; + --#{$prefix}toast-header-border-color: #{$secondary}; + --#{$prefix}toast-border-color: #{$secondary}; + --#{$prefix}toast-bg: #{$gray-400}; +} + +.toast-success { + --#{$prefix}toast-header-color: #{$white}; + --#{$prefix}toast-header-bg: #{$success}; + --#{$prefix}toast-header-border-color: #{$success}; + --#{$prefix}toast-border-color: #{$success}; + --#{$prefix}toast-color: #{$white}; + --#{$prefix}toast-bg: #{$green-300}; +} + +.toast-warning { + --#{$prefix}toast-header-color: #{$white}; + --#{$prefix}toast-header-bg: #{$warning}; + --#{$prefix}toast-header-border-color: #{$warning}; + --#{$prefix}toast-border-color: #{$warning}; + --#{$prefix}toast-bg: #{$yellow-300}; } 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; From 9d2a549f2762b5d06ad0ecaa5b938a5ff2ccb8bb Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Sun, 3 Sep 2023 17:44:49 +0200 Subject: [PATCH 07/16] Moved toasts import to _extra-components.scss --- src/scss/adminlte.scss | 1 - src/scss/parts/_extra-components.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/adminlte.scss b/src/scss/adminlte.scss index 7f84322fa42..4096008292d 100644 --- a/src/scss/adminlte.scss +++ b/src/scss/adminlte.scss @@ -65,7 +65,6 @@ @import "variables"; @import "variables-dark"; @import "mixins"; -@import "toasts"; // AdiminLTE Parts // --------------------------------------------------- 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"; From c31d8e334121407849c370b2b54708128243755c Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Sun, 3 Sep 2023 17:48:26 +0200 Subject: [PATCH 08/16] Changed card bottom margin to mb-4 --- src/html/pages/components/general.astro | 30 ++++++++++++------------- src/html/pages/forms/general.astro | 12 +++++----- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/html/pages/components/general.astro b/src/html/pages/components/general.astro index 96151594a27..24732fec14c 100644 --- a/src/html/pages/components/general.astro +++ b/src/html/pages/components/general.astro @@ -73,7 +73,7 @@ const pageTitle = "General Components";
    -
    +
    Accordion
    @@ -124,7 +124,7 @@ const pageTitle = "General Components";
    -
    +
    Alert
    @@ -161,7 +161,7 @@ const pageTitle = "General Components";
    -
    +
    Badge
    @@ -217,7 +217,7 @@ const pageTitle = "General Components";
    -
    +
    Button
    @@ -263,7 +263,7 @@ const pageTitle = "General Components";
    -
    +
    Button Group
    @@ -326,7 +326,7 @@ const pageTitle = "General Components";
    -
    +
    Collapse
    @@ -352,7 +352,7 @@ const pageTitle = "General Components";
    -
    +
    Dropdowns
    @@ -424,7 +424,7 @@ const pageTitle = "General Components";
    -
    +
    List Group
    @@ -446,7 +446,7 @@ const pageTitle = "General Components";
    -
    +
    Navbar
    @@ -497,7 +497,7 @@ const pageTitle = "General Components";
    -
    +
    Pagination
    @@ -549,7 +549,7 @@ const pageTitle = "General Components";
    -
    +
    Placeholder
    @@ -576,7 +576,7 @@ const pageTitle = "General Components";
    -
    +
    Progress
    @@ -604,7 +604,7 @@ const pageTitle = "General Components";
    -
    +
    Toast
    @@ -728,7 +728,7 @@ const pageTitle = "General Components";
    -
    +
    Tooltip
    @@ -742,7 +742,7 @@ const pageTitle = "General Components";
    -
    +
    Spinner
    diff --git a/src/html/pages/forms/general.astro b/src/html/pages/forms/general.astro index b878b3be217..6cd919158a7 100644 --- a/src/html/pages/forms/general.astro +++ b/src/html/pages/forms/general.astro @@ -72,7 +72,7 @@ const page = "general";
    -
    +
    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
    From 93e433a91265679e1062988473f1eae707589a87 Mon Sep 17 00:00:00 2001 From: George Lewe Date: Tue, 5 Sep 2023 15:06:38 +0200 Subject: [PATCH 09/16] Toast color theme loop --- src/scss/_toasts.scss | 149 +++++++++++++++++++++++------------------- 1 file changed, 81 insertions(+), 68 deletions(-) diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index 084a16ebe26..ec0e2f7577d 100644 --- a/src/scss/_toasts.scss +++ b/src/scss/_toasts.scss @@ -7,76 +7,89 @@ } .toast .toast-body { - --#{$prefix}toast-color: #{$black}; - --#{$prefix}toast-bg: #{$gray-100}; + //--#{$prefix}toast-color: #{$black}; + //--#{$prefix}toast-bg: #{$gray-100}; --#{$prefix}toast-border-radius: 0 0 .25rem .25rem; } -.toast-danger { - --#{$prefix}toast-header-color: #{$white}; - --#{$prefix}toast-header-bg: #{$danger}; - --#{$prefix}toast-header-border-color: #{$danger}; - --#{$prefix}toast-border-color: #{$danger}; - --#{$prefix}toast-color: #{$white}; - --#{$prefix}toast-bg: #{$red-300}; -} - -.toast-dark { - --#{$prefix}toast-header-color: #{$white}; - --#{$prefix}toast-header-bg: #{$dark}; - --#{$prefix}toast-header-border-color: #{$dark}; - --#{$prefix}toast-border-color: #{$dark}; - --#{$prefix}toast-color: #{$white}; - --#{$prefix}toast-bg: #{$gray-600}; -} - -.toast-info { - --#{$prefix}toast-header-color: #{$white}; - --#{$prefix}toast-header-bg: #{$info}; - --#{$prefix}toast-header-border-color: #{$info}; - --#{$prefix}toast-border-color: #{$info}; - --#{$prefix}toast-bg: #{$cyan-300}; -} - -.toast-light { - --#{$prefix}toast-header-color: #{$gray-900}; - --#{$prefix}toast-header-bg: #{$light}; - --#{$prefix}toast-header-border-color: #{$light}; - --#{$prefix}toast-border-color: #{$light}; - --#{$prefix}toast-color: #{$gray-900}; - --#{$prefix}toast-bg: #{$white}; -} - -.toast-primary { - --#{$prefix}toast-header-color: #{$white}; - --#{$prefix}toast-header-bg: #{$primary}; - --#{$prefix}toast-header-border-color: #{$primary}; - --#{$prefix}toast-border-color: #{$primary}; - --#{$prefix}toast-color: #{$white}; - --#{$prefix}toast-bg: #{$blue-300}; -} - -.toast-secondary { - --#{$prefix}toast-header-color: #{$white}; - --#{$prefix}toast-header-bg: #{$secondary}; - --#{$prefix}toast-header-border-color: #{$secondary}; - --#{$prefix}toast-border-color: #{$secondary}; - --#{$prefix}toast-bg: #{$gray-400}; -} - -.toast-success { - --#{$prefix}toast-header-color: #{$white}; - --#{$prefix}toast-header-bg: #{$success}; - --#{$prefix}toast-header-border-color: #{$success}; - --#{$prefix}toast-border-color: #{$success}; - --#{$prefix}toast-color: #{$white}; - --#{$prefix}toast-bg: #{$green-300}; -} +//.toast-danger { +// --#{$prefix}toast-header-color: #{$white}; +// --#{$prefix}toast-header-bg: #{$danger}; +// --#{$prefix}toast-header-border-color: #{$danger}; +// --#{$prefix}toast-border-color: #{$danger}; +// --#{$prefix}toast-color: #{$white}; +// --#{$prefix}toast-bg: #{$red-300}; +//} +// +//.toast-dark { +// --#{$prefix}toast-header-color: #{$white}; +// --#{$prefix}toast-header-bg: #{$dark}; +// --#{$prefix}toast-header-border-color: #{$dark}; +// --#{$prefix}toast-border-color: #{$dark}; +// --#{$prefix}toast-color: #{$white}; +// --#{$prefix}toast-bg: #{$gray-600}; +//} +// +//.toast-info { +// --#{$prefix}toast-header-color: #{$white}; +// --#{$prefix}toast-header-bg: #{$info}; +// --#{$prefix}toast-header-border-color: #{$info}; +// --#{$prefix}toast-border-color: #{$info}; +// --#{$prefix}toast-bg: #{$cyan-300}; +//} +// +//.toast-light { +// --#{$prefix}toast-header-color: #{$gray-900}; +// --#{$prefix}toast-header-bg: #{$light}; +// --#{$prefix}toast-header-border-color: #{$light}; +// --#{$prefix}toast-border-color: #{$light}; +// --#{$prefix}toast-color: #{$gray-900}; +// --#{$prefix}toast-bg: #{$white}; +//} +// +//.toast-primary { +// --#{$prefix}toast-header-color: #{$white}; +// --#{$prefix}toast-header-bg: #{$primary}; +// --#{$prefix}toast-header-border-color: #{$primary}; +// --#{$prefix}toast-border-color: #{$primary}; +// --#{$prefix}toast-color: #{$white}; +// --#{$prefix}toast-bg: #{$blue-300}; +//} +// +//.toast-secondary { +// --#{$prefix}toast-header-color: #{$white}; +// --#{$prefix}toast-header-bg: #{$secondary}; +// --#{$prefix}toast-header-border-color: #{$secondary}; +// --#{$prefix}toast-border-color: #{$secondary}; +// --#{$prefix}toast-bg: #{$gray-400}; +//} +// +//.toast-success { +// --#{$prefix}toast-header-color: #{$white}; +// --#{$prefix}toast-header-bg: #{$success}; +// --#{$prefix}toast-header-border-color: #{$success}; +// --#{$prefix}toast-border-color: #{$success}; +// --#{$prefix}toast-color: #{$white}; +// --#{$prefix}toast-bg: #{$green-300}; +//} +// +//.toast-warning { +// --#{$prefix}toast-header-color: #{$white}; +// --#{$prefix}toast-header-bg: #{$warning}; +// --#{$prefix}toast-header-border-color: #{$warning}; +// --#{$prefix}toast-border-color: #{$warning}; +// --#{$prefix}toast-bg: #{$yellow-300}; +//} -.toast-warning { - --#{$prefix}toast-header-color: #{$white}; - --#{$prefix}toast-header-bg: #{$warning}; - --#{$prefix}toast-header-border-color: #{$warning}; - --#{$prefix}toast-border-color: #{$warning}; - --#{$prefix}toast-bg: #{$yellow-300}; +// +// Color variants +// +@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: #{$color}; + } } From 04d9a3679a03376fab86a1db6a5d140b3cf6510a Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Tue, 5 Sep 2023 18:34:34 +0200 Subject: [PATCH 10/16] Bootstrap color loop for custom toast styles --- src/scss/_toasts.scss | 109 ++++++++++++++---------------------------- 1 file changed, 37 insertions(+), 72 deletions(-) diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index ec0e2f7577d..6fce8b9279a 100644 --- a/src/scss/_toasts.scss +++ b/src/scss/_toasts.scss @@ -1,86 +1,51 @@ /** * Custom toast styles to reflect Bootstrap colors */ + +/** + * Get subtle BG color. + * Returns the subtle bg color for a given color name. + * + * @param string $value - Bootstrap color name + * @return string - Bootstrap subtle bg color + */ +@function get-subtle-bg-color($value) { + @if $value == "primary" { + @return $primary-bg-subtle; + } @else if $value == "secondary" { + @return $secondary-bg-subtle; + } @else if $value == "success" { + @return $success-bg-subtle; + } @else if $value == "info" { + @return $info-bg-subtle; + } @else if $value == "warning" { + @return $warning-bg-subtle; + } @else if $value == "danger" { + @return $danger-bg-subtle; + } @else if $value == "light" { + @return $light-bg-subtle; + } @else if $value == "dark" { + @return $dark-bg-subtle; + } @else { + @return $value; + } +} + +// +// Adjusting size and margin +// .toast { min-width: 300px; margin: 8px; } +// +// Adding a bottom border radius the toast body +// .toast .toast-body { - //--#{$prefix}toast-color: #{$black}; - //--#{$prefix}toast-bg: #{$gray-100}; --#{$prefix}toast-border-radius: 0 0 .25rem .25rem; } -//.toast-danger { -// --#{$prefix}toast-header-color: #{$white}; -// --#{$prefix}toast-header-bg: #{$danger}; -// --#{$prefix}toast-header-border-color: #{$danger}; -// --#{$prefix}toast-border-color: #{$danger}; -// --#{$prefix}toast-color: #{$white}; -// --#{$prefix}toast-bg: #{$red-300}; -//} -// -//.toast-dark { -// --#{$prefix}toast-header-color: #{$white}; -// --#{$prefix}toast-header-bg: #{$dark}; -// --#{$prefix}toast-header-border-color: #{$dark}; -// --#{$prefix}toast-border-color: #{$dark}; -// --#{$prefix}toast-color: #{$white}; -// --#{$prefix}toast-bg: #{$gray-600}; -//} -// -//.toast-info { -// --#{$prefix}toast-header-color: #{$white}; -// --#{$prefix}toast-header-bg: #{$info}; -// --#{$prefix}toast-header-border-color: #{$info}; -// --#{$prefix}toast-border-color: #{$info}; -// --#{$prefix}toast-bg: #{$cyan-300}; -//} -// -//.toast-light { -// --#{$prefix}toast-header-color: #{$gray-900}; -// --#{$prefix}toast-header-bg: #{$light}; -// --#{$prefix}toast-header-border-color: #{$light}; -// --#{$prefix}toast-border-color: #{$light}; -// --#{$prefix}toast-color: #{$gray-900}; -// --#{$prefix}toast-bg: #{$white}; -//} -// -//.toast-primary { -// --#{$prefix}toast-header-color: #{$white}; -// --#{$prefix}toast-header-bg: #{$primary}; -// --#{$prefix}toast-header-border-color: #{$primary}; -// --#{$prefix}toast-border-color: #{$primary}; -// --#{$prefix}toast-color: #{$white}; -// --#{$prefix}toast-bg: #{$blue-300}; -//} -// -//.toast-secondary { -// --#{$prefix}toast-header-color: #{$white}; -// --#{$prefix}toast-header-bg: #{$secondary}; -// --#{$prefix}toast-header-border-color: #{$secondary}; -// --#{$prefix}toast-border-color: #{$secondary}; -// --#{$prefix}toast-bg: #{$gray-400}; -//} -// -//.toast-success { -// --#{$prefix}toast-header-color: #{$white}; -// --#{$prefix}toast-header-bg: #{$success}; -// --#{$prefix}toast-header-border-color: #{$success}; -// --#{$prefix}toast-border-color: #{$success}; -// --#{$prefix}toast-color: #{$white}; -// --#{$prefix}toast-bg: #{$green-300}; -//} -// -//.toast-warning { -// --#{$prefix}toast-header-color: #{$white}; -// --#{$prefix}toast-header-bg: #{$warning}; -// --#{$prefix}toast-header-border-color: #{$warning}; -// --#{$prefix}toast-border-color: #{$warning}; -// --#{$prefix}toast-bg: #{$yellow-300}; -//} - // // Color variants // @@ -90,6 +55,6 @@ --#{$prefix}toast-header-bg: #{$color}; --#{$prefix}toast-header-border-color: #{$color}; --#{$prefix}toast-border-color: #{$color}; - --#{$prefix}toast-bg: #{$color}; + --#{$prefix}toast-bg: #{get-subtle-bg-color($name)}; } } From 6b0e0a88d44d21a230154a24c968b9f666588580 Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Tue, 5 Sep 2023 19:20:25 +0200 Subject: [PATCH 11/16] Moved general BS components page under 'UI Elements' --- src/html/components/dashboard/_sidenav.astro | 24 +++++++------------ .../pages/{components => UI}/general.astro | 16 ++++++------- 2 files changed, 17 insertions(+), 23 deletions(-) rename src/html/pages/{components => UI}/general.astro (99%) diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 38d4a8a2261..775ba71f4df 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -216,6 +216,15 @@ const htmlPath = convertPathToHtml(path);

    • -
  • - - -

    Components -

    -     - -
  • From ccbe6b7238ee3aab03df1c433f16947d5c1c1f3d Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Tue, 5 Sep 2023 20:09:56 +0200 Subject: [PATCH 12/16] Removed extra border-radius from custom toast styles --- src/scss/_toasts.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index 6fce8b9279a..a7c5bd53326 100644 --- a/src/scss/_toasts.scss +++ b/src/scss/_toasts.scss @@ -39,13 +39,6 @@ margin: 8px; } -// -// Adding a bottom border radius the toast body -// -.toast .toast-body { - --#{$prefix}toast-border-radius: 0 0 .25rem .25rem; -} - // // Color variants // From 393aa0c7fafd82154ee4bd0702c17c238167ad62 Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Tue, 5 Sep 2023 20:57:07 +0200 Subject: [PATCH 13/16] White/black close button SVG for custom toast styles --- src/scss/_toasts.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index a7c5bd53326..9ff3fa6536a 100644 --- a/src/scss/_toasts.scss +++ b/src/scss/_toasts.scss @@ -31,6 +31,21 @@ } } +/** + * Get button close SVG. + * Returns an either white or black button SVG dependent on the given color name. + * + * @param string $value - Bootstrap color name + * @return string - Close button SVG URL + */ +@function get-btn-close-svg($value) { + @if $value == "primary" or $value == "secondary" or $value == "success" or $value == "danger" or $value == "dark" { + @return "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e\")"; + } @else { + @return "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e\")"; + } +} + // // Adjusting size and margin // @@ -50,4 +65,7 @@ --#{$prefix}toast-border-color: #{$color}; --#{$prefix}toast-bg: #{get-subtle-bg-color($name)}; } + .toast-#{$name} .btn-close { + --#{$prefix}btn-close-bg: #{get-btn-close-svg($name)}; + } } From 7bca72b572f8dbbabddc6a109c7069977c3d4f00 Mon Sep 17 00:00:00 2001 From: "LEWE, GEORGE" Date: Tue, 12 Sep 2023 18:41:45 +0200 Subject: [PATCH 14/16] Streamlined custom toast styles --- src/scss/_toasts.scss | 39 +-------------------------------------- 1 file changed, 1 insertion(+), 38 deletions(-) diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index 9ff3fa6536a..c2b362c0f68 100644 --- a/src/scss/_toasts.scss +++ b/src/scss/_toasts.scss @@ -2,35 +2,6 @@ * Custom toast styles to reflect Bootstrap colors */ -/** - * Get subtle BG color. - * Returns the subtle bg color for a given color name. - * - * @param string $value - Bootstrap color name - * @return string - Bootstrap subtle bg color - */ -@function get-subtle-bg-color($value) { - @if $value == "primary" { - @return $primary-bg-subtle; - } @else if $value == "secondary" { - @return $secondary-bg-subtle; - } @else if $value == "success" { - @return $success-bg-subtle; - } @else if $value == "info" { - @return $info-bg-subtle; - } @else if $value == "warning" { - @return $warning-bg-subtle; - } @else if $value == "danger" { - @return $danger-bg-subtle; - } @else if $value == "light" { - @return $light-bg-subtle; - } @else if $value == "dark" { - @return $dark-bg-subtle; - } @else { - @return $value; - } -} - /** * Get button close SVG. * Returns an either white or black button SVG dependent on the given color name. @@ -46,14 +17,6 @@ } } -// -// Adjusting size and margin -// -.toast { - min-width: 300px; - margin: 8px; -} - // // Color variants // @@ -63,7 +26,7 @@ --#{$prefix}toast-header-bg: #{$color}; --#{$prefix}toast-header-border-color: #{$color}; --#{$prefix}toast-border-color: #{$color}; - --#{$prefix}toast-bg: #{get-subtle-bg-color($name)}; + --#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle); } .toast-#{$name} .btn-close { --#{$prefix}btn-close-bg: #{get-btn-close-svg($name)}; From 0e71358c7878601cffc24e91c36a59ff98447349 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Wed, 13 Sep 2023 18:14:11 +0530 Subject: [PATCH 15/16] Toast improve --- src/html/components/_scripts.astro | 19 - src/html/components/dashboard/_sidenav.astro | 4 +- src/html/pages/UI/general.astro | 2103 ++++++++++++------ src/scss/_toasts.scss | 30 +- 4 files changed, 1387 insertions(+), 769 deletions(-) diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro index 4dd4a791e21..2da79617cfc 100644 --- a/src/html/components/_scripts.astro +++ b/src/html/components/_scripts.astro @@ -52,22 +52,3 @@ const adminlteJsUrl = path + "/js/adminlte.js"; }); - - - - - - diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 775ba71f4df..16f79fefe2e 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -219,10 +219,10 @@ const htmlPath = convertPathToHtml(path);
  • -

    General Elements

    +

    General
  • diff --git a/src/html/pages/UI/general.astro b/src/html/pages/UI/general.astro index 55fc89f6708..ffcbfd06869 100644 --- a/src/html/pages/UI/general.astro +++ b/src/html/pages/UI/general.astro @@ -8,791 +8,1444 @@ import Scripts from "../../components/_scripts.astro"; const title = "AdminLTE 4 | General UI Elements"; const path = "../../../dist"; const mainPage = "ui-elements"; -const page = "bsgeneral"; +const page = "general"; const pageTitle = "General UI Elements"; --- - + - - - - - - - - -
    - - - -
    - -
    - -
    - -
    -
    -

    {pageTitle}

    -
    -
    -
      -
    1. Home
      2. -
    2. - {pageTitle} -
      3. -
    -
    -
    - -
    - -
    - - -
    - -
    - -
    - -
    -
    - For detailed documentation of Components visit - Bootstrap Components - + + + + + + + + +
    + + + +
    + +
    + +
    + +
    +
    +

    {pageTitle}

    +
    +
    +
      +
    1. Home
      2. +
    2. + {pageTitle} +
      3. +
    +
    +
    - - -
    - -
    - -
    -
    Accordion
    + +
    + + +
    + +
    + +
    + +
    +
    + For detailed documentation of Components visit + Bootstrap Components + +
    - - -
    -
    -
    -

    - -

    -
    -
    - This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
    -
    + + +
    + +
    + +
    +
    Accordion
    -
    -

    - -

    -
    -
    - This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. + + +
    +
    +
    +

    + +

    +
    +
    + This is the first item's accordion body. It is shown by default, until the collapse plugin + adds the appropriate classes that we use to style + each element. These classes control the overall + appearance, as well as the showing and hiding via + CSS transitions. You can modify any of this with + custom CSS or overriding our default variables. It's + also worth noting that just about any HTML can go + within the .accordion-body, though the + transition does limit overflow. +
    +
    -
    -
    -
    -

    - -

    -
    -
    - This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +

    + +

    +
    +
    + This is the second item's accordion body. It is hidden by default, until the collapse plugin + adds the appropriate classes that we use to style + each element. These classes control the overall + appearance, as well as the showing and hiding via + CSS transitions. You can modify any of this with + custom CSS or overriding our default variables. It's + also worth noting that just about any HTML can go + within the .accordion-body, though the + transition does limit overflow. +
    +
    +
    +
    +

    + +

    +
    +
    + This is the third item's accordion body. It is hidden by default, until the collapse plugin + adds the appropriate classes that we use to style + each element. These classes control the overall + appearance, as well as the showing and hiding via + CSS transitions. You can modify any of this with + custom CSS or overriding our default variables. It's + also worth noting that just about any HTML can go + within the .accordion-body, though the + transition does limit overflow. +
    +
    +
    -
    - -
    - - -
    - -
    -
    Alert
    -
    - - -
    - - - - - - - - -
    - -
    - -
    -
    Button Group
    -
    - - -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    -
    - - + + +
    + +
    + +
    +
    Button Group
    +
    + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    + + - - + + - - -
    -
    - - + + +
    +
    + + - - + + - - -
    -
    -
    - - -
    - - + + +
    +
    +
    + + +
    + + +
    +
    +
    -
    - -
    - - -
    - -
    -
    Collapse
    -
    - - -
    -

    - - -

    -
    -
    - Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. + + +
    + +
    +
    Collapse
    + + +
    +

    + + +

    +
    +
    + Some placeholder content for the collapse component. + This panel is hidden by default but revealed when the + user activates the relevant trigger. +
    +
    +
    +
    -
    - -
    - - -
    - -
    -
    Dropdowns
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    - - - -
    -
    - - - -
    -
    - -
    - - -
    - -
    -
    List Group
    -
    - - -
    -
    - - The current link item - - A second link item - A third link item - A fourth link item - A disabled link item -
    -
    - -
    - - -
    - -
    -
    Navbar
    -
    - - -
    - -
    - -
    - - -
    - -
    -
    Pagination
    -
    - - -
    - -
    - -
    - -
    - -
    - - -
    - -
    -
    Placeholder
    -
    - - -
    - + + +
    + +
    +
    List Group
    +
    + +
    -
    - -
    -

    - - - - - -

    +
    + + The current link item + + A second link item + A third link item + A fourth link item + A disabled link item +
    +
    -
    - -
    - - -
    - -
    -
    Progress
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    + + +
    + +
    +
    Navbar
    +
    + + +
    + +
    +
    -
    -
    + + +
    + +
    +
    Pagination
    +
    + + +
    + +
    + +
    + +
    +
    -
    - -
    - - -
    - -
    -
    Toast
    -
    - - -
    - -
    - - - - - - - - -
    -
    + +
    - -
    - -
    -
    - - - - - + + + + + + + + + + + diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index c2b362c0f68..88c17274e33 100644 --- a/src/scss/_toasts.scss +++ b/src/scss/_toasts.scss @@ -1,24 +1,5 @@ -/** - * Custom toast styles to reflect Bootstrap colors - */ - -/** - * Get button close SVG. - * Returns an either white or black button SVG dependent on the given color name. - * - * @param string $value - Bootstrap color name - * @return string - Close button SVG URL - */ -@function get-btn-close-svg($value) { - @if $value == "primary" or $value == "secondary" or $value == "success" or $value == "danger" or $value == "dark" { - @return "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e\")"; - } @else { - @return "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e\")"; - } -} - // -// Color variants +// Toast // @each $name, $color in $theme-colors { .toast-#{$name} { @@ -27,8 +8,11 @@ --#{$prefix}toast-header-border-color: #{$color}; --#{$prefix}toast-border-color: #{$color}; --#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle); - } - .toast-#{$name} .btn-close { - --#{$prefix}btn-close-bg: #{get-btn-close-svg($name)}; + + @if color-contrast($color) == $color-contrast-light { + .btn-close { + @include btn-close-white(); + } + } } } From 6bf0643fca76c026b05d4729a442d832e13cea14 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Thu, 14 Sep 2023 17:48:10 +0530 Subject: [PATCH 16/16] toast dark-mode bug fix --- src/scss/_toasts.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index 88c17274e33..14be1ce6510 100644 --- a/src/scss/_toasts.scss +++ b/src/scss/_toasts.scss @@ -1,6 +1,7 @@ // // Toast // + @each $name, $color in $theme-colors { .toast-#{$name} { --#{$prefix}toast-header-color: #{color-contrast($color)}; @@ -16,3 +17,17 @@ } } } + +@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; + } + } + } + } + } +}