rsuite/internals/Picker/styles/index.less

A suite of react components

@import '../../../styles/common.less';
@import '../../../Button/styles/index.less';
@import '../../../styles/mixins/listbox.less';
@import '../../../styles/mixins/combobox.less';
@import '../../../Stack/styles/index.less';
@import '../../../Form/styles/mixin.less';
@import '../../CloseButton/styles/index.less';
@import '../../../Loader/styles/index.less';
@import '../../../Input/styles/index.less';
@import '../../../InputGroup/styles/index.less';
@import '../../../Highlight/styles/index.less';
@import './mixin.less';

//
// 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 {
    cursor: not-allowed;

    .rs-picker-toggle-value,
    .rs-picker-toggle-indicator,
    .rs-picker-tag-list .rs-tag {
      color: var(--rs-text-disabled) !important;
    }

    .rs-picker-value-count {
      opacity: 0.5;
    }
  }

  &-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);
  }

  &-label.rs-input-group-addon {
    color: var(--rs-text-primary);
    padding-right: 4px !important;
  }

  &-loader {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
  }

  &-error > .rs-picker-input-group {
    border-color: var(--rs-picker-state-error);

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

    &:focus-within {
      border-color: var(--rs-picker-state-error);
      outline: var(--rs-picker-state-error-outline);
    }
  }
}

.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);
    outline: none;
  }

  &.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;
  }
}

.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();
  .date-picker-button-caret-md();
  .date-picker-button-size(base);

  &-lg {
    .picker-button-caret-lg();
    .picker-default-button-reset-padding-left(large);
    .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);
    .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);
    .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);
    .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();

  &.rs-btn {
    width: 100%;
    text-align: left;
  }

  .ellipsis();

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

    &::after {
      content: ':';
      margin: 0 4px 0 2px;
    }
  }

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

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

.rs-picker-toggle-indicator {
  // Picker clear button
  .rs-picker-clean {
    .combobox-indicator-icon(@picker-toggle-clean-right);

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

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

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

  // Picker toggle caret
  .rs-picker-caret-icon {
    // Extend  Dropdown toggle caret style
    .combobox-indicator-icon();

    font-size: 16px;
    color: var(--rs-text-secondary);
  }

  .rs-picker-loader {
    .combobox-indicator-icon();
  }
}

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

  .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);
  }

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

  .rs-search-box {
    padding: (@picker-menu-padding - @border-radius) @picker-menu-padding
      (@picker-menu-padding - @border-radius);
  }

  .rs-highlight .rs-highlight-mark {
    padding: 0;
  }
}

// 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;
  }

  &.rs-picker-disabled .rs-input-group {
    pointer-events: none;
  }
}

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

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

    .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;
      line-height: @line-height-computed;

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

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

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

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

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

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

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

.rs-picker-menu-group {
  background-color: var(--rs-listbox-option-group-bg);
  position: sticky;
  top: -1px;
  z-index: 1;
}

.rs-virt-list {
  // Use for single selection
  .rs-picker-select-menu-item,

  // Use for multiple selection with Checkbox
  .rs-check-item label {
    .ellipsis-basic();
  }
}

.rs-tree-virt-list {
  // Use for single selection
  .rs-tree-node-label {
    .ellipsis-basic();
  }
}