@kelvininc/ui-components/dist/collection/components/select-option/select-option.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
:host {
  /**
   * @prop --select-option-height: Select option height.
   * @prop --select-option-transition-duration: Select option transition time.
   * @prop --select-option-background-color: Select option background color.
   * @prop --select-option-background-color-selected: Select option background color when selected.
   * @prop --select-option-background-color-highlighted: Select option background color when highlighted.
   * @prop --select-option-background-color-hover: Select option background color when hovered.
   * @prop --select-option-label-color: Select option label color.
   * @prop --select-option-label-color-selected: Select option label color when selected.
   * @prop --select-option-label-color-highlighted: Select option label color when highlighted.
   * @prop --select-option-label-color-hover: Select option label color when hover.
   * @prop --select-option-description-color: Select option description color.
   * @prop --select-option-description-color-selected: Select option description color when selected.
   * @prop --select-option-description-color-highlighted: Select option description color when highlighted.
   * @prop --select-option-description-color-hover: Select option description color when hover.
   * @prop --select-option-icon-size: Select option icon size in pixels.
   */
  --select-option-height: 32px;
  --select-option-transition-duration: 100ms;
  --select-option-background-color: var(--kv-neutral-7, #2a2a2a);
  --select-option-background-color-selected: var(--kv-neutral-6, #3f3f3f);
  --select-option-background-color-highlighted: var(--kv-neutral-6, #3f3f3f);
  --select-option-background-color-hover: var(--kv-neutral-6, #3f3f3f);
  --select-option-label-color: var(--kv-neutral-4, #bebebe);
  --select-option-label-color-selected: var(--kv-neutral-1, #f2f2f6);
  --select-option-label-color-highlighted: var(--kv-neutral-2, #e5e5e5);
  --select-option-label-color-hover: var(--kv-neutral-2, #e5e5e5);
  --select-option-description-color: var(--kv-neutral-4, #bebebe);
  --select-option-description-color-selected: var(--kv-neutral-4, #bebebe);
  --select-option-description-color-highlighted: var(--kv-neutral-4, #bebebe);
  --select-option-description-color-hover: var(--kv-neutral-4, #bebebe);
  --select-option-icon-size: 16px;
  --select-option-icon-color: var(--kv-neutral-0, #fff);
}

.select-option {
  height: var(--select-option-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  user-select: none;
  cursor: pointer;
  background-color: var(--select-option-background-color);
  transition: background-color var(--select-option-transition-duration) linear;
  padding-right: var(--kv-spacing-4x, 16px);
  padding-left: calc(var(--level-padding-offset) + var(--kv-spacing-4x, 16px));
}
.select-option .text-container {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--kv-spacing-2x, 8px);
}
.select-option .left-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--kv-spacing, 4px);
}
.select-option .right-content {
  display: flex;
  align-items: center;
  gap: var(--kv-spacing-2x, 8px);
}
.select-option .icon-container {
  margin-right: var(--kv-spacing-2x, 8px);
}
.select-option .icon-container kv-icon {
  --icon-width: var(--select-option-icon-size);
  --icon-height: var(--select-option-icon-size);
  --icon-color: var(--select-option-icon-color);
}
.select-option .item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 14px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 21px;
  letter-spacing: normal;
  text-transform: none;
  transition: font-weight var(--select-option-transition-duration) linear;
  color: var(--select-option-label-color);
}
.select-option .item-description {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 12px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--select-option-description-color);
}
.select-option--selected {
  background-color: var(--select-option-background-color-selected);
}
.select-option--selected .item-label {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 21px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--select-option-label-color-selected);
}
.select-option--selected .item-description {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--select-option-description-color-selected);
}
.select-option:hover {
  background-color: var(--select-option-background-color-hover);
}
.select-option:hover .item-label {
  color: var(--select-option-label-color-hover);
}
.select-option:hover .item-description {
  color: var(--select-option-description-color-hover);
}
.select-option--highlighted {
  background-color: var(--select-option-background-color-highlighted);
}
.select-option--highlighted .item-label {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 21px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--select-option-label-color-highlighted);
}
.select-option--highlighted .item-description {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--select-option-description-color-highlighted);
}
.select-option--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.select-option:not(.select-option--selectable) {
  pointer-events: none;
  user-select: none;
}
.select-option--heading .item-label {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kv-neutral-2, #e5e5e5);
}
.select-option--heading .text-container .left-content::after {
  content: "";
  display: flex;
  flex: 1;
  height: 1px;
  background: var(--kv-neutral-6, #3f3f3f);
  margin-left: var(--kv-spacing-2x, 8px);
}
.select-option kv-checkbox {
  --checkbox-icon-size: 12px;
  margin-right: var(--kv-spacing-2x, 8px);
}