Files
ionic-framework/core/src/components/select/select.md.scss
2018-08-21 16:43:23 -05:00

77 lines
1.5 KiB
SCSS

@import "./select";
@import "./select.md.vars";
// Material Design Select
// --------------------------------------------------
:host {
--color: #{$select-md-text-color};
--icon-color: #{$select-md-icon-color};
--padding-top: #{$select-md-padding-top};
--padding-end: #{$select-md-padding-end};
--padding-bottom: #{$select-md-padding-bottom};
--padding-start: #{$select-md-padding-start};
--placeholder-color: #{$select-md-placeholder-color};
color: var(--color);
font-family: $select-md-font-family;
}
.select-placeholder {
color: var(--placeholder-color);
}
.select-md .item-select ion-label {
@include margin-horizontal(0, null);
}
.select-icon {
position: relative;
width: 12px;
height: 19px;
}
.select-icon .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: var(--icon-color);
pointer-events: none;
}
// Stacked & Floating Select
// --------------------------------------------------
.item-label-stacked .select-md,
.item-label-floating .select-md {
@include padding(8px, null, 8px, 0);
}
// Select Popover Interface
// --------------------------------------------------
.select-popover-md .radio-icon {
display: none;
}
.select-popover-md .item-radio-checked {
background-color: $background-color-step-150;
}
.select-popover-md .item-radio-checked ion-label {
color: initial;
}