rsuite/src/Picker/styles/common.less

A suite of react components

@import '../../styles/common';
@import '../../Button/styles/mixin';
@import '../../Form/styles/mixin';
@import 'mixin';

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

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

  &-toggle-custom.@{ns}btn {
    .@{ns}ripple-pond {
      display: none !important;
    }
  }

  &-block {
    display: block;
  }

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

  &-toggle &-toggle-placeholder {
    color: @picker-placeholder-color;
  }

  &-has-value .@{ns}btn &-toggle-value,
  &-has-value &-toggle &-toggle-value {
    color: @picker-selected-value-color;
  }

  &-none {
    padding: @picker-none-padding;
    color: @picker-none-font-color;
    cursor: default;
  }

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

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

  &-value-count {
    margin: 0 @picker-value-count-margin;
    background: @picker-value-count-background-color;
    color: @picker-value-count-color;
    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;
  }
}

.@{ns}picker-toggle {
  .btn(base);

  .@{ns}picker-default & {
    @padding-vertical: @padding-base-vertical - @picker-default-toggle-border-width;
    @padding-horizontal: @padding-base-horizontal - @picker-default-toggle-border-width;

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

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

  .@{ns}picker-default:not(.@{ns}picker-disabled) & {
    &:hover,
    &.active {
      border-color: @picker-default-toggle-hover-border-color;
    }
  }

  .@{ns}picker-subtle & {
    .btn-subtle;

    transition: none;

    &.active {
      background-color: @btn-subtle-hover-bg;
      color: @btn-subtle-default-hover-color;
    }
  }
}

/* stylelint-disable-next-line */ // Custom button sizes
.@{ns}picker-toggle-custom.@{ns}btn {
  &-lg {
    .picker-button-caret-lg;
    .tag-picker-search-input-lg;
    .date-picker-button-caret-lg;
    .date-picker-button-size(large);
  }

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

  &-sm {
    .picker-button-caret-sm;
    .tag-picker-search-input-sm;
    .date-picker-button-caret-sm;
    .date-picker-button-size(small);
  }

  &-xs {
    .picker-button-caret-xs;
    .tag-picker-search-input-xs;
    .date-picker-button-caret-xs;
    .date-picker-button-size(extra-small);
  }
}

.@{ns}picker-toggle,
.@{ns}picker-toggle-custom {
  .picker-default-toggle;
  .picker-subtle-toggle;

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

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

  .@{ns}picker-cleanable & {
    padding-right: @dropdown-toggle-padding-right + @picker-toggle-clean-width;

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

// Picker clean button
.@{ns}picker-toggle-clean {
  .dropdown-toggle-caret-common(@picker-toggle-clean-right);
  .set-dropdown-caret(~'dropdown');

  background: inherit;
  color: @picker-toggle-clean-color;
  transition: 0.2s color linear;
  cursor: pointer;
  // FIXED: IE browser has 1px orange line.
  .ie-width(19px) !important;
  .ie-text-align(center);

  &:hover {
    color: @picker-toggle-clean-hover-color;
  }

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

// Picker toggle caret
.@{ns}picker-toggle-caret {
  // Extend  Dropdown toggle caret style
  .dropdown-toggle-caret-common;
  .set-dropdown-caret(~'@{ns}picker');

  color: @picker-default-toggle-caret-color;

  // Set default content to @dropdown-caret-content for support [placement="auto*"]
  &::before {
    content: @dropdown-caret-content;
  }
}

// Picker Menu
.@{ns}picker-menu {
  position: absolute;
  text-align: left;
  z-index: @zindex-picker-menu;
  border-radius: @border-radius-base;
  background-color: @picker-bg;
  box-shadow: @picker-shadow;
  overflow: hidden;
  // Remove transition
  transition: none;

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

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

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

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

    .@{ns}picker-search-bar-input {
      .default-input;

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

    &::after {
      content: @picker-search-bar-icon-content;
      font-family: @font-family-icon;
      font-style: normal;
      position: absolute;
      width: @picker-search-bar-icon-width;
      color: @B400;
      font-size: @font-size-base;
      line-height: unit(@line-height-computed / @font-size-base);
      top: @picker-menu-padding - @border-radius-base + @padding-base-input-vertical;
      right: @picker-menu-padding + @padding-base-input-horizontal;

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

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

// Make sure styles the same with <Input>
.@{ns}picker-default,
.@{ns}picker-input {
  .@{ns}btn,
  .@{ns}picker-toggle {
    background: @input-bg !important;
  }

  &.@{ns}picker-disabled .@{ns}picker-toggle,
  &.@{ns}picker-disabled .@{ns}btn {
    background: @input-bg-disabled !important;
  }
}

// Check Item
.@{ns}check-item {
  &:not(.@{ns}checkbox-disabled):hover,
  &-focus {
    .picker-item-hover;
  }

  .@{ns}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;

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

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

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

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