1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- @use 'sass:map';
- @use 'sass:math';
- @use 'sass:meta';
- @use 'sass:selector';
- @use '../../styles/settings';
- @use './variables' as *;
- @mixin chip-sizes {
- @each $sizeName, $multiplier in settings.$size-scales {
- $size: map.get($chip-sizes, "font-size") + math.div(2 * $multiplier, 16);
- $height: map.get($chip-sizes, "height") + (6 * $multiplier);
- $padding: math.round(math.div($height, $chip-padding-ratio));
- .v-chip.v-chip--size-#{$sizeName} {
- --v-chip-size: #{$size};
- --v-chip-height: #{$height};
- font-size: $size;
- padding: 0 $padding;
- .v-avatar {
- --v-avatar-height: #{$height - 6};
- @at-root #{selector.append('.v-chip--pill', &)} {
- --v-avatar-height: #{$height};
- }
- }
- .v-avatar--start {
- margin-inline-start: -$padding * .7;
- margin-inline-end: $padding * .5;
- @at-root #{selector.append('.v-chip--pill', &)} {
- margin-inline-start: -$padding;
- }
- }
- .v-avatar--end {
- margin-inline-start: $padding * .5;
- margin-inline-end: -$padding * .7;
- @at-root #{selector.append('.v-chip--pill', &)} {
- margin-inline-end: -$padding;
- }
- + .v-chip__close {
- @at-root #{selector.append('.v-chip--pill', &)} {
- margin-inline-start: $padding * 1.5;
- }
- }
- }
- .v-icon--start,
- .v-chip__filter {
- margin-inline-start: -$padding * .5;
- margin-inline-end: $padding * .5;
- }
- .v-icon--end,
- .v-chip__close {
- margin-inline-start: $padding * .5;
- margin-inline-end: -$padding * .5;
- }
- .v-icon--end,
- .v-avatar--end,
- .v-chip__append {
- + .v-chip__close {
- margin-inline-start: $padding;
- }
- }
- }
- }
- }
- @mixin chip-density($properties, $densities) {
- @each $density, $multiplier in $densities {
- $value: calc(var(--v-chip-height) + #{$multiplier * settings.$spacer});
- &.v-chip--density-#{$density} {
- @if meta.type-of($properties) == "list" {
- @each $property in $properties {
- #{$property}: $value;
- }
- } @else {
- #{$properties}: $value;
- }
- }
- }
- }
|