mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
926ac3fb47
- adds custom test for styling the select parts - set opacity on icon container - align items center, this makes the select text align vertically with the icon when used standalone even when changing the font size of the text
94 lines
1.8 KiB
SCSS
94 lines
1.8 KiB
SCSS
@import "./select.vars";
|
|
|
|
// Select
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --padding-top: Top padding of the select
|
|
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select
|
|
* @prop --padding-bottom: Bottom padding of the select
|
|
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select
|
|
*
|
|
* @prop --placeholder-color: Color of the select placeholder text
|
|
* @prop --placeholder-opacity: Opacity of the select placeholder text
|
|
*/
|
|
--placeholder-color: currentColor;
|
|
--placeholder-opacity: 0.33;
|
|
|
|
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
|
|
|
display: flex;
|
|
position: relative;
|
|
|
|
align-items: center;
|
|
|
|
font-family: $font-family-base;
|
|
|
|
overflow: hidden;
|
|
z-index: $z-index-item-input;
|
|
}
|
|
|
|
:host(.in-item) {
|
|
position: static;
|
|
|
|
max-width: 45%;
|
|
}
|
|
|
|
:host(.select-disabled) {
|
|
opacity: .4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host(.ion-focused) button {
|
|
border: 2px solid #5e9ed6;
|
|
}
|
|
|
|
.select-placeholder {
|
|
color: var(--placeholder-color);
|
|
|
|
opacity: var(--placeholder-opacity);
|
|
}
|
|
|
|
button {
|
|
@include input-cover();
|
|
}
|
|
|
|
.select-icon {
|
|
position: relative;
|
|
|
|
opacity: .33;
|
|
}
|
|
|
|
.select-text {
|
|
flex: 1;
|
|
|
|
min-width: 16px;
|
|
|
|
font-size: inherit;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.select-icon-inner {
|
|
@include position(50%, null, null, 5px);
|
|
@include margin(-3px, null, null, null);
|
|
|
|
position: absolute;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
|
|
border-top: 5px solid;
|
|
border-right: 5px solid transparent;
|
|
border-left: 5px solid transparent;
|
|
|
|
color: currentColor;
|
|
|
|
pointer-events: none;
|
|
}
|