_mixins.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. @use 'sass:math';
  2. @use 'sass:map';
  3. @use 'sass:meta';
  4. @use '../../styles/settings';
  5. @use '../../styles/tools';
  6. @use './variables' as *;
  7. @mixin button-sizes ($map: $button-sizes, $immediate: false) {
  8. @each $sizeName, $multiplier in settings.$size-scales {
  9. $size: map.get($map, 'font-size') + math.div(2 * $multiplier, 16);
  10. $height: map.get($map, 'height') + (settings.$size-scale * $multiplier);
  11. #{if($immediate, &, '')}.v-btn--size-#{$sizeName} {
  12. --v-btn-size: #{$size};
  13. --v-btn-height: #{$height};
  14. font-size: var(--v-btn-size);
  15. min-width: tools.roundEven($height * map.get($map, 'width-ratio'));
  16. padding: 0 tools.roundEven(math.div($height, map.get($map, 'padding-ratio')));
  17. }
  18. }
  19. }
  20. @mixin button-density ($properties, $densities) {
  21. @each $density, $multiplier in $densities {
  22. $value: calc(var(--v-btn-height) + #{$multiplier * settings.$spacer});
  23. &.v-btn--density-#{$density} {
  24. @if meta.type-of($properties) == "list" {
  25. @each $property in $properties {
  26. #{$property}: $value;
  27. }
  28. }
  29. @else {
  30. #{$properties}: $value;
  31. }
  32. }
  33. }
  34. }