mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
55 lines
1.4 KiB
SCSS
55 lines
1.4 KiB
SCSS
@import "./select";
|
|
@import "./select.md.vars";
|
|
|
|
// Material Design Select
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--padding-top: #{$select-md-padding-top};
|
|
--padding-end: #{$select-md-padding-end};
|
|
--padding-bottom: #{$select-md-padding-bottom};
|
|
--padding-start: #{$select-md-padding-start};
|
|
}
|
|
|
|
.select-icon {
|
|
width: 19px;
|
|
height: 19px;
|
|
|
|
transition: transform .15s cubic-bezier(.4, 0, .2, 1);
|
|
|
|
opacity: .55;
|
|
|
|
}
|
|
|
|
/**
|
|
* Adjust the arrow so that it appears in the middle
|
|
* of the item. If the item has fill="outline" then
|
|
* we should adjust the entire ion-select rather than
|
|
* just the outline so the selected value appears centered too.
|
|
*/
|
|
:host-context(.item-label-stacked) .select-icon,
|
|
:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,
|
|
:host-context(.item-label-floating.item-fill-outline) {
|
|
@include transform(translate3d(0, -9px, 0));
|
|
}
|
|
|
|
:host-context(.item-has-focus) .select-icon {
|
|
@include transform(rotate(180deg));
|
|
}
|
|
|
|
/**
|
|
* Ensure that the translation we did
|
|
* above is preserved when we rotate the select icon.
|
|
*/
|
|
:host-context(.item-has-focus.item-label-stacked) .select-icon,
|
|
:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)) .select-icon {
|
|
@include transform(rotate(180deg), translate3d(0, -9px, 0));
|
|
}
|
|
|
|
:host-context(ion-item.ion-focused) .select-icon,
|
|
:host-context(.item-has-focus) .select-icon {
|
|
color: var(--highlight-color-focused);
|
|
|
|
opacity: 1;
|
|
}
|