@syncfusion/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
98 lines (80 loc) • 3.54 kB
CSS
.e-ddl.e-control-wrapper .e-ddl-icon::before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.e-dropdownbase .e-list-item.e-active.e-hover {
color: rgba(var(--color-sf-on-surface));
}
.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
.e-input-group:not(.e-disabled) .e-back-icon:active,
.e-input-group:not(.e-disabled) .e-back-icon:hover,
.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
background: rgba(var(--color-sf-on-surface), 0.08);
}
.e-input-group .e-ddl-icon:not(:active)::after {
-webkit-animation: none;
animation: none;
}
.e-ddl.e-popup {
border: 0;
-webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
margin-top: 2px;
}
.e-popup.e-ddl .e-dropdownbase {
min-height: 26px;
border-radius: 4px;
}
.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
margin: 0 6px;
min-height: 30px;
min-width: 30px;
}
.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
min-height: 22px;
min-width: 22px;
}
.e-input-group.e-ddl,
.e-input-group.e-ddl .e-input,
.e-input-group.e-ddl .e-ddl-icon {
background: transparent;
}
.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
border-bottom-width: 0;
}
.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
margin: 4px;
}
.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
padding: 4px 5px 4px 12px;
}
.e-ddl.e-popup.e-outline .e-filter-parent {
padding: 4px 8px;
}
/* stylelint-disable-line no-empty-source */