| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- /* Toasts
- ******************************************************************************* */
-
- .bs-toast[class^="bg-"],
- .bs-toast[class*=" bg-"] {
- --#{$prefix}toast-header-color: var(--#{$prefix}white);
- --#{$prefix}toast-color: var(--#{$prefix}white);
- }
-
- .toast.bs-toast {
- --#{$prefix}toast-btn-close-bg: var(--#{$prefix}paper-bg);
- --#{$prefix}toast-btn-close: #{$btn-close-gray};
- z-index: $zindex-toast;
- background-color: var(--#{$prefix}toast-bg) !important;
- .toast-header {
- position: relative;
- padding-block-end: .5rem;
- .btn-close {
- position: absolute;
- padding: .45rem;
- background-color: var(--#{$prefix}toast-btn-close-bg);
- background-image: var(--#{$prefix}toast-btn-close);
- background-size: $toast-btn-close-size;
- box-shadow: var(--#{$prefix}toast-box-shadow);
- filter: none;
- inset-block-start: -8px;
- inset-inline-end: 2px;
- @include border-radius($border-radius);
- @include transition(all .23s ease .1s);
-
- /* For hover effect of close btn */
- &:hover,
- &:focus,
- &:active {
- opacity: 1;
- outline: 0;
- }
- }
- }
- .toast-header ~ .toast-body {
- padding-block-start: 0;
- }
- }
- .toast-container {
- --#{$prefix}toast-zindex: 8;
- }
-
- .toast-header {
- .btn-close {
- margin-inline: $toast-padding-x $toast-padding-x * -.5;
- }
- }
-
- /* Bootstrap Toasts Example */
- .toast-ex {
- position: fixed;
- inset-block-start: 4.1rem;
- inset-inline: auto 2.5rem;
- }
-
- /* Placement Toast example */
- .toast-placement-ex {
- position: fixed;
- }
-
- /* Generate contextual modifier classes for colorizing the alert */
- @each $state in map-keys($theme-colors) {
- .bs-toast{
- &.bg-#{$state} {
- --#{$prefix}toast-bg: rgba(var(--#{$prefix}#{$state}-rgb), .85);
- --#{$prefix}toast-box-shadow: 0 .25rem 1rem rgba(var(--#{$prefix}#{$state}-rgb), .4);
- --#{$prefix}toast-btn-close-bg: var(--#{$prefix}#{$state});
- --#{$prefix}toast-btn-close: #{$btn-close-white};
- }
- }
- }
|