Нема описа
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_toasts.scss 2.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. /* Toasts
  2. ******************************************************************************* */
  3. .bs-toast[class^="bg-"],
  4. .bs-toast[class*=" bg-"] {
  5. --#{$prefix}toast-header-color: var(--#{$prefix}white);
  6. --#{$prefix}toast-color: var(--#{$prefix}white);
  7. }
  8. .toast.bs-toast {
  9. --#{$prefix}toast-btn-close-bg: var(--#{$prefix}paper-bg);
  10. --#{$prefix}toast-btn-close: #{$btn-close-gray};
  11. z-index: $zindex-toast;
  12. background-color: var(--#{$prefix}toast-bg) !important;
  13. .toast-header {
  14. position: relative;
  15. padding-block-end: .5rem;
  16. .btn-close {
  17. position: absolute;
  18. padding: .45rem;
  19. background-color: var(--#{$prefix}toast-btn-close-bg);
  20. background-image: var(--#{$prefix}toast-btn-close);
  21. background-size: $toast-btn-close-size;
  22. box-shadow: var(--#{$prefix}toast-box-shadow);
  23. filter: none;
  24. inset-block-start: -8px;
  25. inset-inline-end: 2px;
  26. @include border-radius($border-radius);
  27. @include transition(all .23s ease .1s);
  28. /* For hover effect of close btn */
  29. &:hover,
  30. &:focus,
  31. &:active {
  32. opacity: 1;
  33. outline: 0;
  34. }
  35. }
  36. }
  37. .toast-header ~ .toast-body {
  38. padding-block-start: 0;
  39. }
  40. }
  41. .toast-container {
  42. --#{$prefix}toast-zindex: 8;
  43. }
  44. .toast-header {
  45. .btn-close {
  46. margin-inline: $toast-padding-x $toast-padding-x * -.5;
  47. }
  48. }
  49. /* Bootstrap Toasts Example */
  50. .toast-ex {
  51. position: fixed;
  52. inset-block-start: 4.1rem;
  53. inset-inline: auto 2.5rem;
  54. }
  55. /* Placement Toast example */
  56. .toast-placement-ex {
  57. position: fixed;
  58. }
  59. /* Generate contextual modifier classes for colorizing the alert */
  60. @each $state in map-keys($theme-colors) {
  61. .bs-toast{
  62. &.bg-#{$state} {
  63. --#{$prefix}toast-bg: rgba(var(--#{$prefix}#{$state}-rgb), .85);
  64. --#{$prefix}toast-box-shadow: 0 .25rem 1rem rgba(var(--#{$prefix}#{$state}-rgb), .4);
  65. --#{$prefix}toast-btn-close-bg: var(--#{$prefix}#{$state});
  66. --#{$prefix}toast-btn-close: #{$btn-close-white};
  67. }
  68. }
  69. }