UNPKG

tu-view-plus

Version:
142 lines (131 loc) 3.52 kB
.tu-dropdown { box-sizing: border-box; box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0), -2px -2px 5px var(--tu-color-shadow-light, #ffffff); background: var(--tu-color-global-bg, #dfe1e6); border-radius: var(--tu-border-radius, 2px); padding: 0; } .tu-dropdown__wrap { overflow-y: auto; max-height: 200px; } .tu-dropdown__list { margin-top: 0; margin-bottom: 0; padding-left: 0; list-style: none; } .tu-dropdown--mini .tu-dropdown-item { font-size: var(--tu-font-size-mini, 10px); padding: 2px 8px; } .tu-dropdown--mini .tu-dropdown-item .tu-dropdown-item__icon { margin-right: 4px; } .tu-dropdown--mini .tu-dropdown-item .tu-dropdown-item__suffix { margin-left: 4px; } .tu-dropdown--mini [class*=tu-icon] { font-size: var(--tu-font-size-mini, 10px); } .tu-dropdown--small .tu-dropdown-item { font-size: var(--tu-font-size-small, 12px); padding: 4px 10px; } .tu-dropdown--small .tu-dropdown-item .tu-dropdown-item__icon { margin-right: 6px; } .tu-dropdown--small .tu-dropdown-item .tu-dropdown-item__suffix { margin-left: 6px; } .tu-dropdown--small [class*=tu-icon] { font-size: var(--tu-font-size-small, 12px); } .tu-dropdown--medium .tu-dropdown-item { font-size: var(--tu-font-size-medium, 14px); padding: 6px 12px; } .tu-dropdown--medium .tu-dropdown-item .tu-dropdown-item__icon { margin-right: 8px; } .tu-dropdown--medium .tu-dropdown-item .tu-dropdown-item__suffix { margin-left: 8px; } .tu-dropdown--medium [class*=tu-icon] { font-size: var(--tu-font-size-medium, 14px); } .tu-dropdown--large .tu-dropdown-item { font-size: var(--tu-font-size-large, 14px); padding: 8px 14px; } .tu-dropdown--large .tu-dropdown-item .tu-dropdown-item__icon { margin-right: 10px; } .tu-dropdown--large .tu-dropdown-item .tu-dropdown-item__suffix { margin-left: 10px; } .tu-dropdown--large [class*=tu-icon] { font-size: var(--tu-font-size-large, 14px); } .tu-dropdown-item { position: relative; z-index: 1; display: flex; align-items: center; box-sizing: border-box; width: 100%; padding: 6px 12px; color: var(--tu-color-text, #71757f); font-size: var(--tu-font-size, 14px); line-height: var(--tu-line-height-base, 1.5); text-align: left; cursor: pointer; transition: background var(--tu-transition-duration-2, 0.2s), color var(--tu-transition-duration-2, 0.2s); } .tu-dropdown-item.is-active, .tu-dropdown-item:not(.is-disabled):hover { background: var(--tu-color-hover-bg, rgba(125, 125, 125, 0.1)); color: var(--tu-color-primary, #5e7ce0); } .tu-dropdown-item__content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tu-dropdown-item.is-suffix { justify-content: space-between; } .tu-dropdown-item__icon { display: inline-flex; } .tu-dropdown-item__suffix { display: inline-flex; align-items: center; } .tu-dropdown-item.is-disabled { color: var(--tu-color-text-placeholder, #9b9fa8); cursor: not-allowed; } .tu-dropdown-button { display: inline-block; } .tu-dropdown-button + .tu-dropdown-button { margin-left: 12px; } .tu-dropdown-button .tu-button-group button + button { padding-left: 8px; padding-right: 8px; } .tu-dropdown-group__title { box-sizing: border-box; width: 100%; padding: 4px 10px; cursor: default; color: var(--tu-color-text-placeholder, #9b9fa8); font-size: var(--tu-font-size-small, 12px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tu-dropdown-group__title:not(:first-child) { margin-top: 4px; }