_mixins.scss 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. @use 'sass:map';
  2. @use 'sass:math';
  3. @use 'sass:meta';
  4. @use 'sass:selector';
  5. @use '../../styles/settings';
  6. @use './variables' as *;
  7. @mixin chip-sizes {
  8. @each $sizeName, $multiplier in settings.$size-scales {
  9. $size: map.get($chip-sizes, "font-size") + math.div(2 * $multiplier, 16);
  10. $height: map.get($chip-sizes, "height") + (6 * $multiplier);
  11. $padding: math.round(math.div($height, $chip-padding-ratio));
  12. .v-chip.v-chip--size-#{$sizeName} {
  13. --v-chip-size: #{$size};
  14. --v-chip-height: #{$height};
  15. font-size: $size;
  16. padding: 0 $padding;
  17. .v-avatar {
  18. --v-avatar-height: #{$height - 6};
  19. @at-root #{selector.append('.v-chip--pill', &)} {
  20. --v-avatar-height: #{$height};
  21. }
  22. }
  23. .v-avatar--start {
  24. margin-inline-start: -$padding * .7;
  25. margin-inline-end: $padding * .5;
  26. @at-root #{selector.append('.v-chip--pill', &)} {
  27. margin-inline-start: -$padding;
  28. }
  29. }
  30. .v-avatar--end {
  31. margin-inline-start: $padding * .5;
  32. margin-inline-end: -$padding * .7;
  33. @at-root #{selector.append('.v-chip--pill', &)} {
  34. margin-inline-end: -$padding;
  35. }
  36. + .v-chip__close {
  37. @at-root #{selector.append('.v-chip--pill', &)} {
  38. margin-inline-start: $padding * 1.5;
  39. }
  40. }
  41. }
  42. .v-icon--start,
  43. .v-chip__filter {
  44. margin-inline-start: -$padding * .5;
  45. margin-inline-end: $padding * .5;
  46. }
  47. .v-icon--end,
  48. .v-chip__close {
  49. margin-inline-start: $padding * .5;
  50. margin-inline-end: -$padding * .5;
  51. }
  52. .v-icon--end,
  53. .v-avatar--end,
  54. .v-chip__append {
  55. + .v-chip__close {
  56. margin-inline-start: $padding;
  57. }
  58. }
  59. }
  60. }
  61. }
  62. @mixin chip-density($properties, $densities) {
  63. @each $density, $multiplier in $densities {
  64. $value: calc(var(--v-chip-height) + #{$multiplier * settings.$spacer});
  65. &.v-chip--density-#{$density} {
  66. @if meta.type-of($properties) == "list" {
  67. @each $property in $properties {
  68. #{$property}: $value;
  69. }
  70. } @else {
  71. #{$properties}: $value;
  72. }
  73. }
  74. }
  75. }