UNPKG

@syncfusion/ej2-dropdowns

Version:

Essential JS 2 DropDown Components

237 lines (204 loc) 6.92 kB
/* Font Family */ /* Font Sizes */ /* Radius */ /* 1px */ /* 2px */ /* 3px */ /* 4px */ /* 5px */ /* 6px */ /* 7px */ /* 8px */ /* 9px */ /* 10px */ /* 11px */ /* 12px */ /* 13px */ /* 14px */ /* 15px */ /* 16px */ /* 17px */ /* 18px */ /* 19px */ /* 20px */ /* 21px */ /* 22px */ /* 23px */ /* 24px */ /* 25px */ /* 26px */ /* 27px */ /* 28px */ /* 29px */ /* 30px */ /* 31px */ /* 32px */ /* 33px */ /* 34px */ /* 35px */ /* 36px */ /* 37px */ /* 38px */ /* 39px */ /* 40px */ /* 41px */ /* 42px */ /* 43px */ /* 44px */ /* 45px */ /* 46px */ /* 47px */ /* 48px */ /* 49px */ /* 50px */ /* 5em */ /* 65% */ /* border */ /* 0px */ /* 1px */ /* 1.5px */ /* 2px */ /* 3px */ /* 4px */ /* 5px */ /* 6px */ /* 7px */ /* 8px */ /* 9px */ /* 10px */ /* 11px */ /* 12px */ /* 13px */ /* 14px */ /* 15px */ /* 16px */ .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: calc(var(--e-radius) * 0.25); } .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; } .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) { border-color: rgba(var(--color-sf-primary)); } .e-bigger .e-popup.e-ddl-device-filter { margin-top: 0; } .e-bigger .e-ddl-device .e-input-group, .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) { background: rgba(0, 0, 0, 0.0001); border-width: 0; -webkit-box-shadow: none; box-shadow: none; margin-bottom: 0; } .e-bigger .e-ddl-device .e-input-group .e-back-icon, .e-bigger .e-ddl-device .e-input-group input.e-input, .e-bigger .e-ddl-device .e-input-group .e-clear-icon { background: rgba(0, 0, 0, 0.0001); } .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon { min-height: 38px; min-width: 38px; } .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter, .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter { padding: 4px 16px 4px 0; } .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon, .e-bigger.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-bigger .e-clear-icon, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon, .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon { min-height: 34px; min-width: 34px; } .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter, .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter, .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter, .e-bigger.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-bigger .e-input-filter, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter, .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter { padding: 8px 16px; } .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon { margin: 0 4px; } /* stylelint-disable-line no-empty-source */