12345678910111213141516171819202122232425262728293031323334353637383940 |
- // All colors
- @each $color, $value in map-merge($theme-colors, ( white: $white )) {
- .bg-#{"" + $color} {
- --#{$prefix}bg-opacity: 1;
- background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
- }
- .bg-#{"" + $color}-lt {
- --#{$prefix}bg-opacity: 1;
- --#{$prefix}text-opacity: 1;
- color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
- background-color: rgba(var(--#{$prefix}#{$color}-lt-rgb), var(--#{$prefix}bg-opacity)) !important;
- }
- .border-#{"" + $color} {
- border-color: $value !important;
- }
- }
- @each $color, $value in $theme-colors {
- .text-#{"" + $color} {
- --#{$prefix}text-opacity: 1;
- color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
- }
- .text-#{"" + $color}-fg {
- color: var(--#{$prefix}#{$color}-fg) !important;
- }
- }
- @each $color, $value in $gray-colors {
- .bg-#{"" + $color} {
- --#{$prefix}bg-opacity: .1;
- background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
- }
- .text-#{"" + $color}-fg {
- color: color-contrast($value) !important;
- }
- }
|