UNPKG

@opensig/opendesign

Version:

101 lines (93 loc) 2.99 kB
.o-dropdown-list { list-style: none; margin: 0; padding: var(--dropdown-list-padding); background-color: var(--dropdown-list-bg-color); box-shadow: var(--dropdown-list-shadow); border-radius: var(--dropdown-list-radius); border: var(--dropdown-list-bd); } .o-dropdown-item { display: flex; align-items: center; justify-content: var(--dropdown-item-justify); padding: var(--dropdown-item-padding); background-color: var(--dropdown-item-bg-color); font-size: var(--dropdown-item-text-size); line-height: var(--dropdown-item-text-height); border-radius: var(--dropdown-item-radius); color: var(--dropdown-item-color); transition: background-color var(--o-duration-s) var(--o-easing-standard); cursor: pointer; } .o-dropdown-item:hover { background-color: var(--dropdown-item-bg-color-hover); } .o-dropdown-item + .o-dropdown-item { margin-top: var(--dropdown-item-gap); } .o-dropdown-disabled, .o-dropdown-disabled:hover { cursor: not-allowed; color: var(--dropdown-item-color-disabled); background-color: var(--dropdown-item-bg-color-disabled); } .o-dropdown .o-btn-large { --btn-padding: 0 15px 0 23px; --btn-gap: 4px; } .o-dropdown .o-btn-medium { --btn-padding: 0 11px 0 15px; --btn-gap: 4px; } .o-dropdown .o-btn-small { --btn-padding: 0 11px 0 15px; --btn-gap: 4px; } .o-dropdown-list { --dropdown-list-bg-color: var(--o-color-control5-light); --dropdown-list-shadow: var(--o-shadow-2); --dropdown-list-bd: none; --dropdown-list-radius: var(--o-radius_control-m); --dropdown-list-padding: 4px; } .o-dropdown-item { --dropdown-item-color: var(--o-color-info2); --dropdown-item-color-hover: var(--o-color-primary2); --dropdown-item-color-disabled: var(--o-color-info4); --dropdown-item-bg-color: transparent; --dropdown-item-bg-color-hover: var(--o-color-control2-light); --dropdown-item-bg-color-disabled: transparent; --dropdown-item-text-size: var(--o-font_size-text1); --dropdown-item-text-height: var(--o-line_height-text1); --dropdown-item-justify: left; --dropdown-item-padding: 7px 12px; --dropdown-item-gap: 2px; --dropdown-item-radius: var(--o-radius_control-s); } .o-dropdown-list-small .o-dropdown-item, .o-dropdown-list-medium .o-dropdown-item { --dropdown-item-text-size: var(--o-font_size-tip1); --dropdown-item-text-height: var(--o-line_height-tip1); --dropdown-item-padding: 4px 12px; } @media (max-width: 1680px) { .o-dropdown .o-btn-large { --btn-padding: 0 11px 0 15px; } } @media (min-width: 841px) and (max-width: 1680px) { .o-dropdown-list-large .o-dropdown-item { --dropdown-item-text-size: var(--o-font_size-tip1); --dropdown-item-text-height: var(--o-line_height-tip1); --dropdown-item-padding: 6px 12px; } .o-dropdown-list-small .o-dropdown-item, .o-dropdown-list-medium .o-dropdown-item { --dropdown-item-padding: 2px 12px; } } @media (max-width: 840px) { .o-dropdown .o-btn-small { --btn-padding: 0 7px 0 11px; } }