formstone/src/less/themes/light/dropdown.less

Library of modular front end components.

/**
 * @theme
 * @name Light
 * @component Dropdown
 */

.fs-dropdown {

    @import "_config.less";

  @theme_name: fs-light;

  // Config

  @fs-dropdown-max-height: 260px;

  @fs-dropdown-text-color: @fs-light-primary_900;
  @fs-dropdown-font-size: 14px;

  @fs-dropdown-background-color: @fs-light-white;

  @fs-dropdown-border-width: 1px;
  @fs-dropdown-border-color: @fs-light-primary_600;
  @fs-dropdown-border-radius: 2px;

  // Caret
  @fs-dropdown-caret-color: @fs-light-primary_600;
  @fs-dropdown-caret-size: 5px;

  // Hover / Focus

  @fs-dropdown-hover-border-color: @fs-light-primary_900;
  @fs-dropdown-hover-text-color: @fs-light-primary_900;
  @fs-dropdown-hover-background-color: @fs-light-primary_100;

  // Selected

  @fs-dropdown-selected-height: 40px;
  @fs-dropdown-selected-padding: 0 40px 0 15px;

  // Open

  @fs-dropdown-open-background-color: @fs-light-white;

  // Options

  @fs-dropdown-options-background-color: @fs-light-white;

  // Group

  @fs-dropdown-group-border-width: 1px;
  @fs-dropdown-group-border-color: @fs-light-primary_400;
  @fs-dropdown-group-text-color: @fs-light-primary_600;
  @fs-dropdown-group-font-size: 11px;
  @fs-dropdown-group-padding: 10px 15px;
  @fs-dropdown-group-text-transform: uppercase;

  // Disabled

  @fs-dropdown-disabled-opacity: 0.5;

  // Item

  @fs-dropdown-item-text-color: @fs-light-primary_900;
  @fs-dropdown-item-font-size: 14px;
  @fs-dropdown-item-background-color: @fs-light-white;
  @fs-dropdown-item-line-height: 1.5;
  @fs-dropdown-item-padding: 10px 15px;

  @fs-dropdown-item-hover-text-color: @fs-light-black;
  @fs-dropdown-item-hover-background-color: @fs-light-primary_100;

  // Item - Selected

  @fs-dropdown-item-selected-background-color: @fs-light-primary_200;

  &.@{theme_name} {
  }

  &.@{theme_name} &-selected {
    height: @fs-dropdown-selected-height;

    background: @fs-dropdown-background-color;
    border: @fs-dropdown-border-width solid @fs-dropdown-border-color;
    border-radius: @fs-dropdown-border-radius;
    color: @fs-dropdown-text-color;
    font-size: @fs-dropdown-font-size;
    line-height: @fs-dropdown-selected-height;
    margin: 0;
    padding: @fs-dropdown-selected-padding;

    &:after {
      height: 0;
      width: 0;

      position: absolute;
      top: 0;
      right: 15px;
      bottom: 0;

      border-left: @fs-dropdown-caret-size solid transparent;
      border-right: @fs-dropdown-caret-size solid transparent;
      border-top: @fs-dropdown-caret-size solid @fs-dropdown-caret-color;
      content: '';
      display: block;
      margin: auto 0;
    }
  }

  &.@{theme_name}&-mobile &-element, // TODO: Deprecated
  &.@{theme_name}&-native &-element {
  }

  .no-touchevents &.@{theme_name} &-selected:hover,
  &.@{theme_name}&-focus &-selected {
    background-color: @fs-dropdown-hover-background-color;
    border-color: @fs-dropdown-hover-border-color;
    color: @fs-dropdown-hover-text-color;

    &:after {
      border-top-color: @fs-dropdown-hover-border-color;
    }
  }

  // Options

  &.@{theme_name} &-options {
    max-height: @fs-dropdown-max-height;

    border: @fs-dropdown-border-width solid @fs-dropdown-hover-border-color;
    border-width: 0 @fs-dropdown-border-width @fs-dropdown-border-width;
    border-radius: 0 0 @fs-dropdown-border-radius @fs-dropdown-border-radius;
    background-color: @fs-dropdown-options-background-color;
    margin: 0;
    padding: 0;
  }

  // Group

  &.@{theme_name} &-group {
    border-bottom: @fs-dropdown-group-border-width solid @fs-dropdown-group-border-color;
    color: @fs-dropdown-group-text-color;
    font-size: @fs-dropdown-group-font-size;
    padding: @fs-dropdown-group-padding;
    text-transform: @fs-dropdown-group-text-transform;
  }

  // Item

  &.@{theme_name} &-item {
    background: @fs-dropdown-item-background-color;
    color: @fs-dropdown-item-text-color;
    font-size: @fs-dropdown-item-font-size;
    line-height: @fs-dropdown-item-line-height;
    padding: @fs-dropdown-item-padding;
    text-align: left;

    &:first-child {
      border-radius: 0;
    }

    &:last-child {
      border-bottom: 0;
      border-radius: 0 0 @fs-dropdown-border-radius @fs-dropdown-border-radius;
    }
  }

  .no-touchevents &.@{theme_name} &-item:hover {
    color: @fs-dropdown-item-hover-text-color;
    background-color: @fs-dropdown-item-hover-background-color;
  }

  &.@{theme_name} &-item_selected,
  .no-touchevents &.@{theme_name} &-item_selected:hover {
    background: @fs-dropdown-item-selected-background-color;
  }

  &.@{theme_name} &-item_disabled,
  .no-touchevents &.@{theme_name} &-item_disabled:hover {
    color: @fs-dropdown-text-color;
    background-color: @fs-dropdown-background-color;
    border-color: @fs-dropdown-border-color;
    opacity: @fs-dropdown-disabled-opacity;
  }

  // Open

  .@{theme_name}&-open &-options {
    border-radius: 0 0 @fs-dropdown-border-radius @fs-dropdown-border-radius;
  }

  .@{theme_name}&-open &-selected {
    border-radius: @fs-dropdown-border-radius @fs-dropdown-border-radius 0 0;
  }

  .@{theme_name}&-open &-selected {
    background-color: @fs-dropdown-open-background-color;
  }

  // Cover

  .@{theme_name}&-cover &-options {
    border-radius: @fs-dropdown-border-radius;
    border-width: @fs-dropdown-border-width;
  }

  .@{theme_name}&-cover &-item:first-child {
    border-radius: @fs-dropdown-border-radius @fs-dropdown-border-radius 0 0;
  }

  // Bottom

  .@{theme_name}&-bottom &-options {
    border-width: @fs-dropdown-border-width @fs-dropdown-border-width 0;
  }

  .@{theme_name}&-bottom &-item:last-child {
    border: none;
  }

  .@{theme_name}&-bottom&-open &-selected {
    border-radius: 0 0 @fs-dropdown-border-radius @fs-dropdown-border-radius;
  }

  .@{theme_name}&-bottom&-open &-options {
    border-radius: @fs-dropdown-border-radius @fs-dropdown-border-radius 0 0;
  }

  // Bottom Cover

  .@{theme_name}&-bottom&-cover&-open &-selected {
    border-radius: @fs-dropdown-border-radius;
  }

  .@{theme_name}&-bottom&-cover&-open &-options {
    border-radius: @fs-dropdown-border-radius;
    border-width: @fs-dropdown-border-width;
  }

  // Multiple

  .@{theme_name}&-multiple {
    border: @fs-dropdown-border-width solid @fs-dropdown-border-color;
    border-radius: @fs-dropdown-border-radius;
  }

  .@{theme_name}&-multiple &-options {
    border: none;
    border-radius: @fs-dropdown-border-radius;
  }

  // Disabled

  .@{theme_name}&-disabled {
    opacity: @fs-dropdown-disabled-opacity;
  }

  .@{theme_name}&-disabled &-selected,
  .no-touchevents .@{theme_name}&-disabled &-selected:hover {
    background: @fs-dropdown-background-color;
    border-color: @fs-dropdown-border-color;
    color: @fs-dropdown-text-color;
    cursor: default;

    &:after {
      border-top-color: @fs-dropdown-border-color;
    }
  }

  .@{theme_name}&-disabled &-options {
    background: @fs-dropdown-background-color;
    border-color: @fs-dropdown-border-color;
  }

  .@{theme_name}&-disabled &-group,
  .@{theme_name}&-disabled &-item {
    border-color: @fs-dropdown-border-color;
    color: @fs-dropdown-text-color;
  }

  .@{theme_name}&-disabled &-item,
  .no-touchevents .@{theme_name}&-disabled &-item:hover {
    color: @fs-dropdown-text-color;
    background-color: @fs-dropdown-background-color;
  }

  .@{theme_name}&-disabled &-item_selected,
  .no-touchevents .@{theme_name}&-disabled &-item_selected:hover {
    background: @fs-dropdown-background-color;
  }

  // Scrollbar

  .@{theme_name}&-options.fs-scrollbar {
    overflow: hidden;

    .fs-scrollbar-bar {
      border: @fs-dropdown-border-width solid @fs-dropdown-border-color;
      border-width: 0 0 0 @fs-dropdown-border-width;
    }

    .fs-scrollbar-content {
      border: none;
      max-height: @fs-dropdown-max-height;
      height: auto;
    }

    &.fs-scrollbar-active .fs-scrollbar-content {
      padding: 0;
    }

    .fs-scrollbar-bar,
    .fs-scrollbar-track {
      border-radius: 0 @fs-dropdown-border-radius @fs-dropdown-border-radius 0;
    }
  }
}