130 lines
2.8 KiB
SCSS
130 lines
2.8 KiB
SCSS
|
@import "~theme/globals";
|
||
|
|
|
||
|
|
:host {
|
||
|
|
ion-select,
|
||
|
|
ion-button {
|
||
|
|
--icon-margin: 0 8px;
|
||
|
|
--background: var(--core-combobox-background);
|
||
|
|
--background-hover: #000000;
|
||
|
|
--background-activated: #000000;
|
||
|
|
--background-focused: #000000;
|
||
|
|
--background-hover-opacity: .04;
|
||
|
|
|
||
|
|
--color: var(--core-combobox-color);
|
||
|
|
--color-activated: var(--core-combobox-color);
|
||
|
|
--color-focused: currentcolor;
|
||
|
|
--color-hover: currentcolor;
|
||
|
|
|
||
|
|
--padding-top: 10px;
|
||
|
|
--padding-end: 10px;
|
||
|
|
--padding-bottom: 10px;
|
||
|
|
--padding-start: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:host-context(.md) {
|
||
|
|
--background-activated-opacity: 0;
|
||
|
|
--background-focused-opacity: .12;
|
||
|
|
}
|
||
|
|
|
||
|
|
:host-context(.ios) {
|
||
|
|
--background-activated-opacity: .12;
|
||
|
|
--background-focused-opacity: .15;
|
||
|
|
}
|
||
|
|
|
||
|
|
ion-select,
|
||
|
|
ion-button {
|
||
|
|
background: var(--background);
|
||
|
|
color: var(--color);
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
min-height: 25px;
|
||
|
|
overflow: hidden;
|
||
|
|
margin: 8px;
|
||
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||
|
|
}
|
||
|
|
|
||
|
|
ion-select {
|
||
|
|
&::part(icon) {
|
||
|
|
margin: var(--icon-margin);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
@include button-state();
|
||
|
|
transition: var(--transition);
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover::after {
|
||
|
|
color: var(--color-hover);
|
||
|
|
background: var(--background-hover);
|
||
|
|
opacity: var(--background-hover-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus::after,
|
||
|
|
&:focus-within::after {
|
||
|
|
color: var(--color-focused);
|
||
|
|
background: var(--background-focused);
|
||
|
|
opacity: var(--background-focused-opacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ion-button {
|
||
|
|
--border-radius: 0;
|
||
|
|
flex: 1;
|
||
|
|
min-height: 45px;
|
||
|
|
|
||
|
|
&::part(native) {
|
||
|
|
text-transform: none;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-text {
|
||
|
|
margin-inline-end: auto;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
.sr-only {
|
||
|
|
position: absolute;
|
||
|
|
width: 1px;
|
||
|
|
height: 1px;
|
||
|
|
padding: 0;
|
||
|
|
margin: -1px;
|
||
|
|
overflow: hidden;
|
||
|
|
clip: rect(0, 0, 0, 0);
|
||
|
|
white-space: nowrap;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.ion-activated {
|
||
|
|
--color: var(--color-activated);
|
||
|
|
}
|
||
|
|
|
||
|
|
ion-icon {
|
||
|
|
margin: var(--icon-margin);
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-icon {
|
||
|
|
margin: var(--icon-margin);
|
||
|
|
width: 19px;
|
||
|
|
height: 19px;
|
||
|
|
position: relative;
|
||
|
|
opacity: 0.33;
|
||
|
|
|
||
|
|
.select-icon-inner {
|
||
|
|
left: 5px;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -2px;
|
||
|
|
position: absolute;
|
||
|
|
width: 0px;
|
||
|
|
height: 0px;
|
||
|
|
color: currentcolor;
|
||
|
|
pointer-events: none;
|
||
|
|
border-top: 5px solid;
|
||
|
|
border-right: 5px solid transparent;
|
||
|
|
border-left: 5px solid transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|