rsuite/internals/Picker/styles/mixin.less

A suite of react components

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

// Picker Menu items common styles
.picker-menu-items-reset() {
  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: pointer;
    color: var(--rs-text-heading);

    .rs-@{prefix}-menu-group-caret {
      display: inline-block;
      margin-left: 2px;
      position: absolute;
      top: @padding-y;
      right: @padding-x;
      color: var(--rs-text-secondary);
    }
  }
}

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

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

  .rs-picker-toggle-indicator {
    .rs-picker-caret-icon,
    .rs-picker-clean {
      top: @padding-vertical;
      right: @padding-horizontal;

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

    .rs-picker-loader{
      top: @padding-vertical;
      right: @padding-horizontal;
    }
  }
}

.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-indicator {
    .rs-picker-clean,
    .rs-picker-caret-icon {
      top: @top;
      right: @padding-horizontal;

      .rs-picker-subtle & {
        top: @top - @picker-default-toggle-border-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;
  }
}

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