rsuite/Picker/styles/mixin.less

A suite of react components

@import '../../styles/variables';
@import '../../styles/mixins/color-modes';
@import '../../Dropdown/styles/mixin';

// Picker Menu items common styles
.picker-menu-items-reset() {
  // Set aside border-radius borders
  margin-bottom: @border-radius;
  overflow-y: auto;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

// Picker Menu group common styles
.picker-menu-group-common(@prefix) {
  // Set border & padding to menu group if  it isn't the first.
  .rs-@{prefix}-menu-group:not(:first-child) {
    margin-top: @picker-group-select-menu-gap;
    border-top: 1px solid @picker-group-select-menu-lin-color;
    padding-top: @picker-group-select-menu-gap;
  }
}

// Group title common styles
.picker-menu-group-title(@prefix) {
  .rs-@{prefix}-menu-group-title {
    padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
    padding-right: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
    position: relative;
    cursor: default;
    transition: @picker-item-transition;
    color: var(--rs-text-heading);

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

    .rs-@{prefix}-menu-group-caret {
      display: inline-block;
      margin-left: 2px;
      position: absolute;
      top: @padding-y;
      right: @padding-x;
      transition: transform 0.3s linear;
      padding: 3px;
    }
  }
}

// Group closed common styles
.picker-menu-group-closed(@prefix) {
  .rs-@{prefix}-menu-group.folded {
    .rs-@{prefix}-menu-group-caret {
      transform: rotate(90deg);
    }
  }
}

.picker-select-item() {
  display: block;
  padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
  clear: both;
  font-weight: normal;
  line-height: @line-height-base;
  color: var(--rs-text-primary);
  cursor: pointer; //fixed link has not [href] style
  transition: @picker-item-transition;
  text-decoration: none;
  width: 100%;

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

.picker-item-hover() {
  color: var(--rs-text-primary);
  background-color: var(--rs-state-hover-bg);
}

.picker-item-active() {
  font-weight: @picker-select-menu-item-selected-font-weight;
}

.picker-calendar-cell-content() {
  display: inline-block;
  font-size: @calendar-table-cell-content-font-size;
  line-height: @calendar-table-cell-content-line-height;
  padding: @calendar-table-cell-content-padding;
  cursor: pointer;
  border-radius: @border-radius;

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

.picker-calendar-cell-content-selected() {
  color: var(--rs-calendar-date-selected-text);
  background-color: var(--rs-bg-active);
  box-shadow: none;

  .high-contrast-mode({
    text-decoration: underline;
  });
}

.picker-calendar-title-show() {
  color: var(--rs-text-active);
  background: transparent;
}

.picker-custom-button-caret-size(@padding-horizontal,@padding-vertical,@clean-btn-margin:2px) {
  @clean-btn-width: @dropdown-caret-width;

  .rs-picker-toggle-wrapper & {
    padding-right: (@padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding);
  }

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

  .rs-picker-toggle-caret,
  .rs-picker-toggle-clean {
    top: @padding-vertical;

    .rs-picker-default & {
      top: @padding-vertical - @picker-default-toggle-border-width;
    }
  }

  .rs-picker-toggle-caret {
    right: @padding-horizontal;
  }

  .rs-picker-toggle-clean {
    right: (@dropdown-caret-width + @padding-horizontal + @clean-btn-width - @clean-btn-margin);
  }
}

.picker-button-caret-lg() {
  .picker-custom-button-caret-size(
    @padding-x-lg,
    @padding-y-lg,
    @clean-btn-margin:4px
  );
}

.picker-button-caret-md() {
  .picker-custom-button-caret-size(@padding-x, @padding-y);
}

.picker-button-caret-sm() {
  .picker-custom-button-caret-size(@padding-x-sm, @padding-y-sm);
}

.picker-button-caret-xs() {
  .picker-custom-button-caret-size(
    @padding-x-xs,
    @padding-y-xs,
    @clean-btn-margin:2px
  );
}

.daterange-picker-custom-toggle(@calendar-caret-width: 14px,@padding-horizontal, @top, @clean-btn-margin:2px) {
  @toggle-clean-padding: 4px;
  @clean-btn-width: @dropdown-caret-width;

  padding-right: (@padding-horizontal + @calendar-caret-width + @dropdown-caret-padding);

  .rs-picker-toggle-clean,
  .rs-picker-toggle-caret {
    top: @top;

    .rs-picker-subtle & {
      top: @top - @picker-default-toggle-border-width;
    }
  }

  .rs-picker-toggle-caret {
    right: @padding-horizontal;
  }

  .rs-picker-toggle-clean {
    right: (@padding-horizontal + @toggle-clean-padding + @calendar-caret-width);
  }
}

.date-picker-button-caret-lg() {
  .rs-picker-date &,
  .rs-picker-daterange & {
    .daterange-picker-custom-toggle(
      @calendar-caret-width: @font-size-large,
      @padding-x-lg,
      @top: 10px,
      @clean-btn-margin: 4px
    );
  }
}

.date-picker-button-caret-md() {
  .rs-picker-date &,
  .rs-picker-daterange & {
    .daterange-picker-custom-toggle(
      @calendar-caret-width: @font-size-base,
      @padding-x,
      @top: 8px
    );
  }
}

.date-picker-button-caret-sm() {
  .rs-picker-date &,
  .rs-picker-daterange & {
    .daterange-picker-custom-toggle(
      @calendar-caret-width: @font-size-base,
      @padding-x-sm,
      @top: 4px
    );
  }
}

.date-picker-button-caret-xs() {
  .rs-picker-date &,
  .rs-picker-daterange & {
    .daterange-picker-custom-toggle(
      @calendar-caret-width: @font-size-extra-small,
      @padding-x-xs,
      @top: 2px
    );
  }
}

.date-picker-button-size(@size) {
  @padding-name: 'padding-@{size}-vertical';
  @padding-vertical: @@padding-name;

  .rs-picker-default & {
    .padding-vertical(@padding-vertical - @picker-default-toggle-border-width);
  }
}

.picker-default-button-reset-padding-left(@size) {
  @padding-name: 'padding-@{size}-horizontal';
  @padding-horizontal: @@padding-name;

  .rs-picker-default & {
    padding-left: @padding-horizontal - @picker-default-toggle-border-width;
  }
}

.tag-picker-search-input-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
  .rs-picker-input:not(.rs-picker-tag) & ~ .rs-picker-tag-wrapper .rs-picker-search-input {
    padding: (@padding-vertical - 1px) @padding-horizontal;
    font-size: @font-size;
    line-height: @line-height;
  }

  // FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
  .rs-picker-tag & ~ .rs-picker-tag-wrapper {
    padding-bottom: @padding-vertical - 3px;

    .rs-tag {
      margin-top: @padding-vertical - 3px;
    }

    .rs-picker-search-input {
      padding-left: @padding-horizontal;
      margin-top: @padding-vertical - 3px;
      font-size: @font-size;
    }

    input {
      height: @line-height * @font-size - 2px;
    }
  }

  .rs-picker-input.rs-picker-tag & {
    padding-top: @padding-vertical - 1px;
    padding-bottom: @padding-vertical - 1px;
    box-shadow: none;
  }
}

.tag-picker-search-input-lg() {
  .tag-picker-search-input-size(
      @padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large
  );
}

.tag-picker-search-input-md() {
  .tag-picker-search-input-size(
          @padding-y; @padding-x; @font-size-base; @line-height-base
  );
}

.tag-picker-search-input-sm() {
  .tag-picker-search-input-size(
    @padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base
  );
}

.tag-picker-search-input-xs() {
  /* stylelint-disable */ //Formatted by prettier
  .tag-picker-search-input-size(
    @padding-y-xs; @padding-x-xs; @font-size-extra-small;
    @line-height-extra-small
  );
  /* stylelint-enable */

  .rs-picker-input.rs-picker-tag & ~ .rs-picker-tag-wrapper {
    padding-bottom: @padding-y-xs - 1px;

    .rs-tag {
      margin-top: 1px;
    }

    // Adjust search-input size the same with button
    .rs-picker-search-input {
      .padding-vertical(1px);
    }
  }
}

.input-picker-input-sizes() {
  @border-width: 2 * @picker-default-toggle-border-width;

  .rs-picker-toggle.rs-btn-lg {
    height: (@line-height-large-computed + @padding-y-lg*2 - @border-width);
  }

  .rs-picker-toggle.rs-btn-md {
    height: (@line-height-computed + @padding-y*2 - @border-width);
  }

  .rs-picker-toggle.rs-btn-sm {
    height: (@line-height-computed + @padding-y-sm*2 - @border-width);
  }

  .rs-picker-toggle.rs-btn-xs {
    height: (@line-height-computed + @padding-y-xs*2 - @border-width);
  }
}

// Default picker toggle
.picker-default-toggle() {
  .rs-picker-default & {
    .dropdown-toggle();

    color: var(--rs-text-primary);
    border: @picker-default-toggle-border-width solid var(--rs-border-primary);
  }

  .rs-picker-disabled & {
    cursor: @cursor-disabled;
  }

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

// Subtle picker toggle
.picker-subtle-toggle {
  .rs-picker-subtle & {
    .dropdown-toggle();
  }

  .rs-picker-subtle.rs-picker-disabled & {
    cursor: @cursor-disabled;

    &:hover,
    &:focus,
    &:active {
      background: none;

      &::after {
        display: none;
      }
    }
  }
}