formstone/src/less/dropdown.less

Library of modular front end components.

/**
 * @component
 * @name Dropdown
 */

@import "imports/utils.less";

// Config

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

@fs-dropdown-background-color: #fff;
@fs-dropdown-color: #000;

// Disabled

@fs-dropdown-disabled-opacity: 0.5;

// Item - Selected

@fs-dropdown-item-selected-background-color: #ddd;

/**
 * @class
 * @name .fs-dropdown-element
 * @type element
 * @description Target element
 */

/**
 * @class
 * @name .fs-dropdown
 * @type element
 * @description Base widget class
 */

/**
 * @class
 * @name .fs-dropdown.fs-dropdown-multiple
 * @type modifer
 * @description Indicates multi-selected element
 */
/**
 * @class
 * @name .fs-dropdown.fs-dropdown-cover
 * @type modifer
 * @description Indicates cover positioning
 */
/**
 * @class
 * @name .fs-dropdown.fs-dropdown-bottom
 * @type modifer
 * @description Indicates bottom positioning
 */
/**
 * @class
 * @name .fs-dropdown.fs-dropdown-disabled
 * @type modifer
 * @description Indicates disabled state
 */
/**
 * @class
 * @name .fs-dropdown.fs-dropdown-open
 * @type modifer
 * @description Indicates open state
 */
/**
 * @class
 * @name .fs-dropdown.fs-dropdown-focus
 * @type modifer
 * @description Indicates focus state
 */
/**
 * @class
 * @name .fs-dropdown.fs-dropdown-native
 * @type modifer
 * @description Indicates native options
 */

.fs-dropdown {
  position: relative;
  z-index: 1;

  display: block;

  max-width: 100%;

  &,
  &:after,
  &:before,
  *,
  *:after,
  *:before {
    box-sizing: border-box;
    transition: none;
    user-select: none !important;
  }

  // .fs-dropdown-element

  &-element {
    width: 100%;
    height: 100%;

    position: absolute;
    left: 0;
    z-index: -1;

    opacity: 0;

    & {
      outline: none;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      -webkit-tap-highlight-color: transparent;
    }
  }

  // Mative

  &-mobile &-element, // TODO: Deprecated
  &-native &-element {
    z-index: 7;
  }

  &-mobile&-multiple &-element, // TODO: Deprecated
  &-native&-multiple &-element {
    z-index: -1;
  }

  /**
   * @class
   * @name .fs-dropdown-selected
   * @type element
   * @description Handle item
   */

  &-selected {
    .fs_button;

    width: 100%;

    position: relative;
    z-index: 2;

    background: @fs-dropdown-background-color;
    border: 1px solid;
    color: @fs-dropdown-color;
    cursor: pointer;
    display: block;
    overflow: hidden;
    text-align: left;
    text-overflow: clip;
  }

  /**
   * @class
   * @name .fs-dropdown-options
   * @type element
   * @description Options container
   */

  &-options {
    width: 100%;
    max-height: @fs-dropdown-max-height;

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;

    background: @fs-dropdown-background-color;
    border: 1px solid;
    display: none;
    overflow: auto;
    overflow-x: hidden;

    // Scrollbar support

    &.fs-scrollbar {
      position: absolute;
    }
  }

  /**
   * @class
   * @name .fs-dropdown-group
   * @type element
   * @description Option group label
   */

  &-group {
    display: block;
    font-size: 75%;
  }

  /**
   * @class
   * @name .fs-dropdown-item
   * @type element
   * @description Option item
   */

  &-item {
    .fs_button;

    width: 100%;

    background: @fs-dropdown-background-color;
    border-radius: 0;
    color: @fs-dropdown-color;
    cursor: pointer;
    display: block;
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    text-overflow: ellipsis;

    /**
     * @class
     * @name .fs-dropdown-item.fs-dropdown-item_placeholder
     * @type modifier
     * @description Indicates placeholder item
     */

    &_placeholder {
      display: none;
    }

    /**
     * @class
     * @name .fs-dropdown-item.fs-dropdown-item_selected
     * @type modifier
     * @description Indicates selected item
     */

    &_selected {
      background: @fs-dropdown-item-selected-background-color;
    }

    /**
     * @class
     * @name .fs-dropdown-item.fs-dropdown-item_disabled
     * @type modifier
     * @description Indicates disabled item
     */

    &_disabled {
      cursor: default;
      opacity: @fs-dropdown-disabled-opacity;
    }
  }

  // .fs-dropdown.fs-dropdown-open

  &-open {
    z-index: 3;
  }

  &-open &-options {
    display: block;
  }

  &-open &-selected {
    z-index: 6;
  }

  &-open &-selected,
  &-focus &-selected {
  }

  // .fs-dropdown.fs-dropdown-cover .fs-dropdown-options

  &-cover&-open &-selected {
    z-index: 4;
  }

  &-cover &-options {
    top: 0;
  }

  // .fs-dropdown.fs-dropdown-bottom

  &-bottom &-options {
    top: auto;
    bottom: 100%;
  }

  // .fs-dropdown.fs-dropdown-bottom.fs-dropdown-cover

  &-bottom&-cover &-options {
    top: auto;
    bottom: 0;
  }

  // .fs-dropdown-multiple .fs-dropdown-options

  &-multiple {
  }

  &-multiple &-options {
    width: 100%;

    position: static;

    display: block;
  }

  // .fs-dropdown.fs-dropdown-disabled

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

  &-disabled &-selected {
    cursor: default;
  }

  &-disabled &-options {
  }

  &-disabled &-group,
  &-disabled &-item {
    cursor: default;
  }

  &-disabled &-item,
  .no-touch &-disabled &-item:hover {
  }

  &-disabled &-item_selected,
  .no-touch &-disabled &-item_selected:hover {
  }

  // .fs-dropdown-options.fs-scrollbar

  &-options.fs-scrollbar {
    overflow: hidden;

    .fs-scrollbar-bar {
      border: 1px solid;
      border-width: 0 0 0 1px;
    }

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

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