// Single select
$ss-w-sm: 125px;
$ss-w-md: 147px;
$ss-w-lg: 180px;
$ss-w-xl: 200px;
$ss-w-2xl: 225px;
// Mixin to assign to a modifier a specific width
@mixin component-sizes {
&--sm { width: $ss-w-sm; }
&--md { width: $ss-w-md; }
&--lg { width: $ss-w-lg; }
&--xl { width: $ss-w-xl; }
&--2xl { width: $ss-w-2xl; }
}
.mat-select {
@include component-sizes;
}
// Single select
$ss-w-sm: 125px;
$ss-w-md: 147px;
$ss-w-lg: 180px;
$ss-w-xl: 200px;
$ss-w-2xl: 225px;
// Mixin to assign to a modifier a specific width
@mixin component-sizes {
&--sm { width: $ss-w-sm; }
&--md { width: $ss-w-md; }
&--lg { width: $ss-w-lg; }
&--xl { width: $ss-w-xl; }
&--2xl { width: $ss-w-2xl; }
}
.mat-select {
@include component-sizes;
}