github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Custom toast style update to bs variables

pull/5312/head
LEWE, GEORGE 2023-09-03 16:46:03 +02:00
parent 4aee32f551
commit a582b04aa2
2 changed files with 63 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/scss/_toasts.scss
View File

@ -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};
}

12
src/scss/_variables.scss
View File

@ -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;