.select-kit { border: none; min-width: 220px; box-sizing: border-box; display: inline-block; flex-direction: column; position: relative; vertical-align: middle; user-select: none; &.is-hidden { display: none; } &.is-disabled { pointer-events: none; } &.is-expanded { z-index: z("dropdown"); .select-kit-body { display: flex; flex-direction: column; left: 0; position: absolute; top: 0; align-items: center; justify-content: center; } .select-kit-collection { border-radius: inherit; box-sizing: border-box; width: 100%; } } &.is-loading { .select-kit-collection { overflow: hidden; } } &.is-above { .select-kit-filter { border-top: 0; } .select-kit-wrapper { bottom: 0; top: auto; } } .d-icon { color: $primary-high; } .select-kit-header { box-sizing: border-box; overflow: hidden; transition: all 0.25s; cursor: pointer; display: flex; align-items: center; flex-direction: row; min-height: 30px; .selected-name { text-align: left; flex: 0 1 auto; color: inherit; display: flex; .d-icon + .name { margin-left: 0.5em; } .name { display: inline-block; .d-icon { margin-left: 0.5em; margin-right: 0; } } &.select-kit-selected-color { border-bottom-width: 5px; border-bottom-style: solid; } } .btn-clear { margin-left: 0.25em; padding: 0.25em; border: 0; background: none; min-height: auto; } .icon { margin-right: 5px; } .caret-icon { margin-left: auto; padding-left: 5px; pointer-events: none; } .d-button-label { display: flex; align-items: center; white-space: nowrap; overflow: hidden; line-height: $line-height-medium; .d-icon { margin-left: 5px; margin-right: 0; } } } .select-kit-body { display: none; background: $secondary; box-sizing: border-box; min-width: inherit; } .select-kit-row { cursor: pointer; line-height: $line-height-medium; outline: none; display: flex; flex: 1 0 auto; box-sizing: border-box; align-items: center; justify-content: flex-start; .name { margin: 0; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0%; } .d-icon + .name, .svg-icon-title + .name { margin-left: 0.5em; } &.is-highlighted { background: $tertiary-low; } &.is-selected { background: $highlight-medium; } &.is-selected.is-highlighted { background: $tertiary-low; } .discourse-tag, .discourse-tag-count { color: $primary; } &.create-color-row { border-left-style: solid; border-left-width: 5px; } } .select-kit-collection { background: $secondary; overflow-x: hidden; overflow-y: auto; border-radius: inherit; -webkit-overflow-scrolling: touch; margin: 0; padding: 0; max-height: 200px; width: 100%; .validation-message { white-space: nowrap; color: $danger; flex: 1 0 auto; margin: 5px; padding: 0 2px; } .select-kit-collection { padding: 0; margin: 0; &:hover .select-kit-row.is-highlighted:hover { background: $tertiary-low; } } &::-webkit-scrollbar { -webkit-appearance: none; width: 10px; } &::-webkit-scrollbar-thumb { cursor: pointer; border-radius: 5px; background: dark-light-choose($primary-medium, $secondary-medium); } &::-webkit-scrollbar-track { background: transparent; border-radius: 0; } } .select-kit-filter { box-sizing: border-box; align-items: center; justify-content: space-between; width: 100%; .filter-input { background: none; margin: 0; padding: 0; flex: 1 0 0px; outline: none; border: 0; border-radius: 0; box-shadow: none; width: auto; } &.is-hidden { width: 1px; height: 1px; border: 0; margin: -1px; padding: 0; overflow: hidden; position: fixed; outline: 0; left: 0; top: 0; } } .select-kit-wrapper { position: absolute; top: 0; left: 0; background: none; display: none; box-sizing: border-box; pointer-events: none; } .select-kit-errors-collection { background: $danger; padding: 0.25em 1em; margin: 0; width: 100%; box-sizing: border-box; .select-kit-error { list-style: none; color: $secondary; } } .no-content, .is-loading { display: flex; flex: 1 0 auto; padding: 0.5em; width: 100%; box-sizing: border-box; background: $secondary; } .is-loading { align-items: center; justify-content: center; } }