rsuite/Picker/styles/index.less

A suite of react components

@import '../../styles/common';
@import '../../styles/mixins/listbox';
@import (reference) '../../Button/styles/index';
@import '../../Form/styles/mixin';
@import 'mixin';

//
// Pickers
// --------------------------------------------------

// Common styles
// ----------------------
.rs-picker {
  &-toggle-wrapper {
    display: inline-block;
    // Clear whitespace.
    vertical-align: middle;
    max-width: 100%;
  }

  &-toggle.rs-btn {
    .rs-ripple-pond {
      display: none !important;
    }
  }

  &-block {
    display: block;
  }

  &-disabled {
    opacity: @btn-disabled-opacity;
  }

  &-toggle &-toggle-placeholder {
    color: var(--rs-text-secondary);
  }

  &-has-value .rs-btn &-toggle-value,
  &-has-value &-toggle &-toggle-value {
    color: var(--rs-picker-value);
  }

  // empty listbox
  &-none {
    padding: @picker-none-padding;
    color: var(--rs-text-secondary);
    cursor: default;
  }

  &-countable &-toggle-value {
    display: flex;
  }

  &-value-list {
    flex: 0 1 auto;
    .ellipsis-basic();
    .ie11-max-width(100%);
  }

  &-value-count {
    margin: 0 @picker-value-count-margin;
    background-color: var(--rs-picker-count-bg);
    color: var(--rs-picker-count-text);
    border-radius: @picker-value-count-border-radius;
    padding: 0 @picker-value-count-padding;
    line-height: @line-height-computed;
  }

  &-value-separator {
    margin: 0 4px 0 0;
  }

  &:not(.rs-picker-disabled):hover,
  &.rs-picker-focused {
    border-color: var(--rs-input-focus-border);
  }

  &-toggle-active,
  &.rs-picker-focused {
    box-shadow: var(--rs-state-focus-shadow);
  }
}

.rs-picker-toggle {
  // TODO: Should inherit from <Input> styles?
  .rs-btn();

  .rs-picker-default & {
    @padding-vertical: (@padding-y - @picker-default-toggle-border-width);
    @padding-horizontal: (@padding-x - @picker-default-toggle-border-width);

    padding: @padding-vertical @padding-horizontal;
  }

  &-textbox {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 1px solid #0000;
    padding-left: 10px;
    padding-right: 32px;
    color: var(--rs-text-primary);
    background-color: var(--rs-input-bg);
  }

  &.rs-btn-lg &-textbox {
    padding-left: 14px;
  }

  &.rs-btn-sm &-textbox {
    padding-left: 8px;
  }

  &.rs-btn-xs &-textbox {
    padding-left: 6px;
  }

  &-read-only {
    opacity: 0;
    pointer-events: none;
  }
}

.rs-btn,
.rs-picker-toggle {
  .rs-picker-default & {
    transition: @picker-transition;

    .high-contrast-mode({
      transition: none;
    });
  }

  .rs-picker-default:not(.rs-picker-disabled) & {
    &:hover,
    &:focus,
    &-active {
      border-color: var(--rs-input-focus-border);
    }
  }

  .rs-picker-subtle & {
    .rs-btn-subtle();

    transition: none;

    &-active {
      background-color: var(--rs-btn-subtle-hover-bg);
      color: var(--rs-btn-subtle-hover-text);
    }
  }
}

/* stylelint-disable-next-line */ // Custom button sizes
.rs-picker-toggle.rs-btn {
  .picker-button-caret-md();
  .tag-picker-search-input-md();
  .date-picker-button-caret-md();
  .date-picker-button-size(base);

  &-lg {
    .picker-button-caret-lg();
    .picker-default-button-reset-padding-left(large);
    .tag-picker-search-input-lg();
    .date-picker-button-caret-lg();
    .date-picker-button-size(large);

    .button-size-lg();

    .rs-picker-value-count {
      line-height: @line-height-large-computed;
    }
  }

  &-md {
    .picker-button-caret-md();
    .picker-default-button-reset-padding-left(base);
    .tag-picker-search-input-md();
    .date-picker-button-caret-md();
    .date-picker-button-size(base);
  }

  &-sm {
    .button-size-sm();

    .picker-button-caret-sm();
    .picker-default-button-reset-padding-left(small);
    .tag-picker-search-input-sm();
    .date-picker-button-caret-sm();
    .date-picker-button-size(small);
  }

  &-xs {
    .button-size-xs();

    .picker-button-caret-xs();
    .picker-default-button-reset-padding-left(extra-small);
    .tag-picker-search-input-xs();
    .date-picker-button-caret-xs();
    .date-picker-button-size(extra-small);
  }
}

/* stylelint-disable-next-line */ // Custom button
.rs-picker-toggle {
  .picker-default-toggle();
  .picker-subtle-toggle();

  width: 100%;
  text-align: left;
  .ellipsis();

  &-label {
    color: var(--rs-text-primary);
  }

  &-value {
    display: block;
    .ellipsis();
  }

  .rs-picker-cleanable.rs-picker-has-value & {
    padding-right: (@dropdown-toggle-padding-right + @picker-toggle-clean-width);

    .rs-@{date-picker-prefix}&,
    .rs-@{date-range-picker-prefix}& {
      padding-right: (
        @dropdown-toggle-padding-right + @picker-toggle-clean-width +
          @picker-item-content-padding-vertical
      );
    }
  }
}

// Picker clear button
.rs-picker-toggle-clean {
  .dropdown-toggle-caret-common(@picker-toggle-clean-right);

  background: inherit;
  color: var(--rs-text-secondary);
  transition: 0.2s color linear;
  cursor: pointer;

  &.rs-btn-close {
    padding: 4px 0;
  }

  &:hover {
    color: var(--rs-state-error);
  }

  .rs-@{date-picker-prefix} &,
  .rs-@{date-range-picker-prefix} & {
    right: (@picker-toggle-clean-right + @picker-item-content-padding-vertical);
  }
}

// Picker toggle caret
.rs-picker-toggle-caret {
  // Extend  Dropdown toggle caret style
  .dropdown-toggle-caret-common();

  color: var(--rs-text-secondary);
}

// Picker Menu
.rs-picker-menu {
  position: absolute;
  text-align: left;
  z-index: @zindex-picker-menu;
  border-radius: @border-radius;
  background-color: var(--rs-bg-overlay);
  box-shadow: var(--rs-shadow-overlay);
  overflow: hidden;
  // Remove transition
  transition: none;

  .high-contrast-mode({
    border: 1px solid var(--rs-border-primary);
  });

  // Increase z-index when modal opened.
  .rs-modal-open & {
    z-index: (@zindex-modal + @zindex-picker-toggle);
  }

  // Increase z-index when drawer opened.
  .rs-drawer-open & {
    z-index: (@zindex-drawer + @zindex-picker-toggle);
  }

  // Select picker menu & Check select picker menu always has 6px gap
  &.rs-picker-select-menu,
  &.rs-picker-check-menu {
    padding-top: @border-radius;
  }

  // Searchbar
  .rs-picker-search-bar {
    position: relative;
    padding: (@picker-menu-padding - @border-radius) @picker-menu-padding @picker-menu-padding;

    .rs-picker-search-bar-input {
      .default-input();

      min-width: @picker-content-min-width;
      padding-right: @picker-search-bar-icon-width + (@input-padding-x - @input-border-width) * 2;
    }

    .rs-picker-search-bar-search-icon {
      position: absolute;
      width: @picker-search-bar-icon-width;
      color: var(--rs-text-secondary);
      font-size: @font-size-base;
      height: @line-height-computed;
      top: (@picker-menu-padding - @border-radius + @input-padding-y);
      right: (@picker-menu-padding + @input-padding-x);

      .rs-@{tree-picker-prefix}-menu&,
      .rs-@{check-tree-picker-prefix}-menu& {
        top: (@input-padding-y - @input-border-width);
      }
    }
  }

  /* stylelint-disable-next-line */ // This class name provide by Virtualized.
  .ReactVirtualized__Grid.ReactVirtualized__List:focus {
    outline: none;
  }

  &.rs-picker-inline {
    position: relative;
    box-shadow: none;
  }
}

// Make sure styles the same with <Input>
.rs-picker-default,
.rs-picker-input {
  .rs-btn,
  .rs-picker-toggle {
    background-color: var(--rs-input-bg) !important;
  }

  &.rs-picker-disabled .rs-picker-toggle,
  &.rs-picker-disabled .rs-btn {
    background-color: var(--rs-input-disabled-bg) !important;
  }
}

// Check Item
.rs-check-item {
  display: block;

  &:not(.rs-checkbox-disabled):hover,
  &:focus,
  &&-focus {
    .listbox-option-active(true);

    .high-contrast-mode({
      .rs-check-tree-node-text-wrapper {
        text-decoration: underline;
      }
    });
  }

  .rs-checkbox-checker {
    padding: 0;

    > label {
      position: relative;
      cursor: pointer;
      display: block;
      padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal
        @picker-item-content-padding-vertical @picker-check-item-content-padding-left;
      transition: @picker-item-transition;
      line-height: @line-height-computed;

      .high-contrast-mode({
        transition: none;
      });

      &::before {
        background-color: var(--rs-bg-overlay);

        .high-contrast-mode({
          background: none;
        });
      }

      /* stylelint-disable-next-line */ // This class name provide by Virtualized.
      .ReactVirtualized__Grid & {
        .ellipsis-basic();
      }

      .rs-checkbox-disabled& {
        cursor: not-allowed;
      }

      .rs-checkbox-wrapper {
        left: @picker-item-content-padding-horizontal;

        .grouped &,
        .@{ckpns}-menu-group-children & {
          left: (
            @picker-item-content-padding-horizontal + @picker-children-check-item-padding-left
          );
        }
      }

      .grouped &,
      .@{ckpns}-menu-group-children & {
        padding-left: @picker-check-item-content-padding-left +
          @picker-children-check-item-padding-left;
      }
    }
  }
}