90 lines
2.2 KiB
SCSS
90 lines
2.2 KiB
SCSS
@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;
|
|
}
|
|
}
|
|
}
|
|
}
|