_variant.sass 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. @use "./absolute" as *
  2. @use "./elevation" as *
  3. @use "../settings/variables" as *
  4. @mixin variant($contained-background, $contained-color, $contained-elevation, $plain-opacity, $name)
  5. &--variant-plain,
  6. &--variant-outlined,
  7. &--variant-text,
  8. &--variant-tonal
  9. background: transparent
  10. color: inherit
  11. &--variant-plain
  12. opacity: $plain-opacity
  13. &:focus,
  14. &:hover
  15. opacity: 1
  16. &--variant-plain
  17. .#{$name}__overlay
  18. display: none
  19. &--variant-elevated,
  20. &--variant-flat
  21. background: $contained-background
  22. color: $contained-color
  23. @if ($contained-elevation > 0)
  24. &--variant-elevated
  25. @include elevation($contained-elevation)
  26. &--variant-flat
  27. @include elevation(0)
  28. &--variant-outlined
  29. border: $border-width-root solid currentColor
  30. &--variant-text
  31. .#{$name}__overlay
  32. background: currentColor
  33. &--variant-tonal
  34. .#{$name}__underlay
  35. background: currentColor
  36. opacity: var(--v-activated-opacity)
  37. border-radius: inherit
  38. top: 0
  39. right: 0
  40. bottom: 0
  41. left: 0
  42. pointer-events: none
  43. .#{$name}__underlay
  44. position: absolute