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 52f2dcb7b..0620f9f52 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 c41dbf568..521e03753 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 1c0001af9..c12b8ba2d 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";
    - +
    -
    Quick Example
    +
    Progress
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - + + +
    + +
    +
    Toast
    +
    + + +
    + +
    + + +
    +
    + +
    + + +
    + +
    +
    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 b7ff25f44..b878b3be2 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 000000000..d484b5272 --- /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 880b68e05..7f84322fa 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 521e03753..7999933e9 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 140214412..6d6f53bbe 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 d484b5272..e1d4b43fc 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 0620f9f52..38d4a8a22 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 6d6f53bbe..96151594a 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 | 172 +++++++++++++-------------------------- src/scss/_variables.scss | 12 +-- 2 files changed, 63 insertions(+), 121 deletions(-) diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss index e1d4b43fc..084a16ebe 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 */ + --#{$prefix}toast-color: #{$black}; + --#{$prefix}toast-bg: #{$gray-100}; + --#{$prefix}toast-border-radius: 0 0 .25rem .25rem; } -.toast-danger .toast-header { - color: $white !important; - background-color: $red !important; - border-color: $red; +.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-danger .toast-header button { - color: $white !important; +.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-danger .toast-body { - color: $white; - background-color: $red-300; +.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-dark .toast-header { - color: $white !important; - background-color: $gray-900 !important; - border-color: $gray-700; +.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-dark .toast-header button { - color: $white !important; - --bs-btn-close-color: $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-dark .toast-body { - color: $white; - background-color: $gray-700; +.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-info .toast-header { - color: $white !important; - background-color: #17a2b8 !important; - border-color: #17a2b8; +.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-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; +.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 bfaa67096..712a168d2 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 7f84322fa..409600829 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 2c663e2be..1028da983 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 96151594a..24732fec1 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 b878b3be2..6cd919158 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 084a16ebe..ec0e2f757 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-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-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 +// +@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 ec0e2f757..6fce8b927 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 38d4a8a22..775ba71f4 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 6fce8b927..a7c5bd533 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 a7c5bd533..9ff3fa653 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 9ff3fa653..c2b362c0f 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 | 2173 ++++++++++++------ src/scss/_toasts.scss | 30 +- 4 files changed, 1422 insertions(+), 804 deletions(-) diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro index 4dd4a791e..2da79617c 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 775ba71f4..16f79fefe 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 55fc89f67..ffcbfd068 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. -
    + + + + + + + + +
    + + + +
    + +
    + +
    + +
    +
    +

    {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
    -
    - - -
    -

    -

    + Bootstrap Components - -

    -
    -
    - Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. +
    +
    + + +
    + +
    + +
    +
    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. +
    +
    +
    +
    +
    +
    -
    - -
    - - -
    - -
    -
    Dropdowns
    -
    - - -
    -
    - - + + +
    + +
    +
    Alert
    +
    + + +
    + + + + + + + + +
    +
    -
    - - -
    -
    -
    - - - -
    -
    - - - -
    -
    - -
    - - -
    - -
    -
    List Group
    -
    - - -
    -
    - - The current link item - - A second link item - A third link item - A fourth link item - A disabled link item -
    -
    - -
    - - -
    - -
    -
    Navbar
    -
    - - -
    -
    + + +
    + +
    + +
    +
    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
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + + + +
    +
    + + + -
    - -
    - -
    - - -
    - -
    -
    Pagination
    -
    - - -
    - -
    - -
    - -
    - -
    - - -
    - -
    -
    Placeholder
    -
    - - -
    - + + +
    + +
    +
    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
    +
    + + +
    + +
    + +
    + + +
    + +
    +
    Progress
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    + +
    +
    Toast
    +
    + + +
    + +
    + + + + + + + + +
    + + + + + + + + + +
    +
    + +
    + + +
    + +
    +
    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
    +
    + + +
    + + + + + + + + +
    + +
    +
    - +
    - - -
    - -
    -
    Progress
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - - -
    - -
    -
    Toast
    -
    - - -
    - -
    - - - - - - - - -
    - - - - - - - - - -
    -
    - -
    - - -
    - -
    -
    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
    -
    - - -
    - - - - - - - - -
    - -
    - +
    - +
    - -
    - + +
    + +
    - - - -