Active.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. // Actives
  2. @each $i in $colorIndexes {
  3. @each $name, $colors in $colorNames {
  4. $colorName: --color-#{$name}-#{$i};
  5. [class*='active-#{$name}-#{$i}'] {
  6. &:active {
  7. background-color: RGB(var($colorName) / var(--active-opacity));
  8. }
  9. }
  10. [class*='active-text-#{$name}-#{$i}'] {
  11. &:active {
  12. color: RGB(var($colorName) / var(--active-opacity));
  13. }
  14. }
  15. // .active-#{$name}-#{$i} {
  16. // &:active {
  17. // background-color: RGB(var($colorName) / var(--active-opacity));
  18. // }
  19. // }
  20. // @include setOpacity(active-#{$name}-#{$i}, --active-opacity);
  21. }
  22. }
  23. @each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' 'RGB(0 0 0 / var(--active-opacity))', 'white' 'RGB(255 255 255 / var(--active-opacity))'{
  24. [class*='active-#{$name}'] {
  25. &:active {
  26. background-color: #{$val};
  27. }
  28. }
  29. [class*='active-text-#{$name}'] {
  30. &:active {
  31. color: #{$val};
  32. }
  33. }
  34. // .active-#{$name} {
  35. // &:active {
  36. // background-color: #{$val};
  37. // }
  38. // }
  39. // @include setOpacity(active-#{$name}, --active-opacity);
  40. }
  41. @each $name, $val in 'black' 'RGB(0 0 0 / var(--active-opacity))', 'white' 'RGB(255 255 255 / var(--active-opacity))'{
  42. @include setOpacity(active-#{$name}, --active-opacity);
  43. }
  44. @each $name, $val in 'black' 'RGB(0 0 0 / var(--active-opacity))', 'white' 'RGB(255 255 255 / var(--active-opacity))'{
  45. @include setOpacity(active-text-#{$name}, --active-opacity);
  46. }