mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-25 13:10:14 +01:00
64 lines
1.5 KiB
SCSS
64 lines
1.5 KiB
SCSS
@use 'sass:map';
|
||
@use 'sass:math';
|
||
|
||
$select-size: $text-input-height;
|
||
$chevron-size: 0.375rem;
|
||
$chevron-offset: math.div($select-size - $chevron-size, 2);
|
||
|
||
@mixin select-arrow() {
|
||
background-image: linear-gradient(
|
||
45deg,
|
||
transparent 50%,
|
||
theme('colors.text-label') 33%,
|
||
theme('colors.text-label') 66%,
|
||
transparent 66%
|
||
),
|
||
linear-gradient(
|
||
-45deg,
|
||
transparent 50%,
|
||
theme('colors.text-label') 33%,
|
||
theme('colors.text-label') 66%,
|
||
transparent 66%
|
||
);
|
||
background-position-y: $chevron-offset, $chevron-offset;
|
||
background-position-x: calc(100% - $chevron-offset - $chevron-size),
|
||
calc(100% - $chevron-offset);
|
||
|
||
[dir='rtl'] & {
|
||
background-position-x: $chevron-offset,
|
||
calc($chevron-offset + $chevron-size);
|
||
}
|
||
|
||
background-size:
|
||
$chevron-size $chevron-size,
|
||
$chevron-size $chevron-size;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
select {
|
||
@include input-base();
|
||
@include select-arrow();
|
||
@apply w-body-text-large;
|
||
// Firefox workaround – Set a large line height (but smaller than min height) so the field’s text has enough top padding.
|
||
line-height: 2.2;
|
||
min-height: $select-size;
|
||
padding: 0 theme('spacing.5');
|
||
padding-inline-end: $select-size;
|
||
// Prevent the element from overflowing the container.
|
||
max-width: 100%;
|
||
|
||
@media (forced-colors: active) {
|
||
appearance: auto;
|
||
}
|
||
}
|
||
|
||
select[multiple] {
|
||
background-image: none;
|
||
min-height: theme('spacing.40');
|
||
padding: 0;
|
||
|
||
option {
|
||
padding: 0 theme('spacing.5');
|
||
}
|
||
}
|