rsuite 6.0.0-canary-20250424 → 6.0.0-canary-20250620

package/Tooltip/styles/index.less

@@ -1,161 +0,0 @@
-@import '../../styles/common';
-@import 'mixins';
-
-//
-// Tooltips
-// --------------------------------------------------
-
-// Base class
-.rs-tooltip {
-  --rs-tooltip-border-radius: var(--rs-radius-sm);
-  --rs-tooltip-padding-block: 4px;
-  --rs-tooltip-padding-inline: 10px;
-  --rs-tooltip-z-index: @zindex-tooltip;
-  --rs-tooltip-max-width: @tooltip-max-width;
-  --rs-tooltip-line-height: var(--rs-text-line-height-xs);
-  --rs-tooltip-position-x: var(--rs-position-x);
-  --rs-tooltip-position-y: var(--rs-position-y);
-  --rs-tooltip-opacity: var(--rs-opacity, 0);
-
-  position: absolute;
-  top: var(--rs-tooltip-position-y);
-  left: var(--rs-tooltip-position-x) /* rtl:ignore */;
-  z-index: var(--rs-tooltip-z-index);
-  display: block;
-  font-size: var(--rs-font-size-xs);
-  opacity: var(--rs-tooltip-opacity);
-  line-height: var(--rs-tooltip-line-height);
-  max-width: var(--rs-tooltip-max-width);
-  padding: var(--rs-tooltip-padding-block) var(--rs-tooltip-padding-inline);
-  color: var(--rs-tooltip-text);
-  background-color: var(--rs-tooltip-bg);
-  border-radius: var(--rs-tooltip-border-radius);
-  overflow-wrap: break-word;
-
-  &.rs-anim-fade {
-    transition:
-      opacity 0.1s linear,
-      transform 0.1s ease-out;
-  }
-
-  &.rs-anim-in {
-    opacity: 1;
-    transition:
-      opacity 0.15s linear,
-      transform 0.15s ease-in;
-  }
-
-  // Arrows
-  &-arrow::before,
-  &-arrow::after {
-    content: ' ';
-    display: block;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  &-arrow::before {
-    display: none;
-  }
-
-  .high-contrast-mode({
-    border: 1px solid var(--rs-border-primary);
-
-    &-arrow::before {
-      display: block;
-    }
-  });
-}
-
-.rs-tooltip {
-  // Common style for .placement-top*
-  &:where([data-placement*='top']) {
-    margin-top: -(@tooltip-arrow-width + 2px);
-    .set-translate-transition(0, -@tooltip-translate-distance);
-
-    .with-tooltip-arrow(bottom);
-  }
-
-  // Common style for .placement-bottom*
-  &:where([data-placement*='bottom']) {
-    margin-top: (@tooltip-arrow-width + 2px);
-    .set-translate-transition(0, @tooltip-translate-distance);
-
-    .with-tooltip-arrow(top);
-  }
-
-  // Arrow positioning for different placements
-  // Vertical centered arrow
-  &:where([data-placement='bottom'], [data-placement='top']) {
-    &::before,
-    &::after {
-      left: 50%;
-    }
-  }
-
-  &:where([data-placement='bottom-start'], [data-placement='top-start']) {
-    &::before,
-    &::after {
-      left: @tooltip-arrow-gap-lg;
-    }
-  }
-
-  &:where([data-placement='bottom-end'], [data-placement='top-end']) {
-    &::before {
-      right: @tooltip-arrow-gap-sm - 1px;
-    }
-
-    &::after {
-      right: @tooltip-arrow-gap-sm;
-    }
-  }
-
-  // Horizontal centered arrow
-  &:where([data-placement='left'], [data-placement='right']) {
-    &::before,
-    &::after {
-      top: 50%;
-    }
-  }
-
-  // Horizontal start arrow
-  &:where([data-placement='left-start'], [data-placement='right-start']) {
-    &::before,
-    &::after {
-      top: @tooltip-arrow-gap-lg;
-    }
-  }
-
-  // Horizontal end arrow
-  &:where([data-placement='left-end'], [data-placement='right-end']) {
-    &::before {
-      bottom: @tooltip-arrow-gap-sm - 1px;
-    }
-    &::after {
-      bottom: @tooltip-arrow-gap-sm;
-    }
-  }
-}
-
-/* rtl:begin:ignore */
-.rs-tooltip {
-  // Common style for .placement-right*
-  &:where([data-placement*='right']) {
-    margin-left: (@tooltip-arrow-width + 2px);
-    .set-translate-transition(@tooltip-translate-distance, 0);
-
-    .with-tooltip-arrow(left);
-  }
-
-  // Common style for .placement-lef*
-  &:where([data-placement*='left']) {
-    margin-left: -(@tooltip-arrow-width + 2px);
-    .set-translate-transition(-@tooltip-translate-distance, 0);
-
-    .with-tooltip-arrow(right);
-  }
-}
-/* rtl:end:ignore */

package/Tooltip/styles/mixins.less

@@ -1,60 +0,0 @@
-@import '../../styles/variables';
-@import '../../styles/mixins/hacks';
-@import '../../styles/mixins/color-modes';
-
-// Draw a triangle towards given direction
-// .tooltip-arrow(@direction, @size, @color)
-//
-// @direction: top | right | bottom | left
-// @size:      Size (height) of the triangle
-// @color:     Filling color of the triangle
-
-.tooltip-arrow(top, @size, @color) {
-  top: -@size;
-  margin-left: -@size;
-  border-width: 0 @size @size;
-  border-bottom-color: @color;
-}
-
-.tooltip-arrow(bottom, @size, @color) {
-  bottom: -@size;
-  margin-left: -@size;
-  border-width: @size @size 0;
-  border-top-color: @color;
-}
-
-/* rtl:begin:ignore */
-.tooltip-arrow(right, @size, @color) {
-  right: -@size;
-  margin-top: -@size;
-  border-width: @size 0 @size @size;
-  border-left-color: @color;
-}
-
-.tooltip-arrow(left, @size, @color) {
-  left: -@size;
-  margin-top: -@size;
-  border-width: @size @size @size 0;
-  border-right-color: @color;
-}
-
-/* rtl:end:ignore */
-
-// Append tooltip's arrow to tooltip
-// @direction: The arrow's pointing direction. It's usually opposite of tooltip's placement
-//             e.g. tooltip[placement="top"] has an arrow[direction="bottom"]
-// @size:      The arrow's size (height)
-// @bg:        The arrow's background color, usually equal to tooltip's background
-// @border:    The arrow's border color, usually equal to tooltip's border (which only take effect
-//             in high-contrast theme)
-.with-tooltip-arrow(@direction, @size: @tooltip-arrow-width, @bg: var(--rs-tooltip-bg), @border: var(--rs-tooltip-border)) {
-  &::after {
-    .tooltip-arrow(@direction, @size, @bg);
-  }
-
-  .high-contrast-mode({
-    &::before {
-      .tooltip-arrow(@direction, @size + 1px, @border);
-    }
-  });
-}

package/Tree/styles/indent-line.less

@@ -1,8 +0,0 @@
-.rs-tree-indent-line {
-  border-left: 1px solid var(--rs-tree-indent-line-color);
-  position: absolute;
-  width: 1px;
-  top: -4px;
-  inset-inline-start: 12px;
-  bottom: -4px;
-}

package/Tree/styles/index.less

@@ -1,186 +0,0 @@
-@import '../../styles/common.less';
-@import '../../styles/mixins/listbox.less';
-@import '../../internals/Picker/styles/index.less';
-@import './toggle.less';
-@import './indent-line.less';
-
-// Tree
-// ----------------------
-
-.rs-tree {
-  --rs-tree-node-font-size: var(--rs-font-size-sm);
-  --rs-tree-node-line-height: var(--rs-text-line-height-sm);
-  --rs-tree-node-padding-block: @padding-y;
-  --rs-tree-node-padding-inline: @padding-x;
-  --rs-tree-node-label-padding: var(--rs-spacing);
-  --rs-tree-node-label-border-radius: var(--rs-radius-md);
-
-  height: 100%;
-  flex: 1 1 auto;
-
-  &-drag-preview {
-    position: absolute;
-    top: 0;
-    color: var(--rs-text-primary);
-    background-color: var(--rs-bg-overlay);
-    display: inline-block;
-    margin: 0;
-    padding-inline: var(--rs-tree-node-padding-inline);
-    padding-block: var(--rs-tree-node-padding-block);
-    border-radius: var(--rs-radius-md);
-    box-shadow: var(--rs-shadow-sm);
-    z-index: -1;
-  }
-
-  .rs-search-box {
-    padding: 6px;
-  }
-
-  .rs-tree-empty {
-    padding: 6px 12px;
-    color: var(--rs-text-secondary);
-  }
-
-  &-view {
-    max-height: var(--rs-tree-view-height, 340px);
-    overflow-y: auto;
-  }
-
-  &.rs-tree-virtualized &-view {
-    overflow: hidden;
-  }
-
-  .rs-highlight-mark {
-    padding: 0;
-  }
-}
-
-.rs-tree-group {
-  padding-inline-start: 18px;
-}
-
-.rs-tree-node {
-  position: relative;
-  text-align: start;
-  margin: 0 0 4px 0;
-  display: flex;
-  align-items: center;
-
-  &:focus-visible {
-    .rs-tree-node-label {
-      .focus-ring();
-    }
-  }
-
-  &-label {
-    position: relative;
-    margin: 1px;
-    cursor: pointer;
-    font-size: var(--rs-tree-node-font-size);
-    line-height: var(--rs-tree-node-line-height);
-    padding: var(--rs-tree-node-label-padding);
-    border-radius: var(--rs-tree-node-label-border-radius);
-
-    &:hover,
-    &:focus,
-    &&-focus {
-      .listbox-option-active();
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      inset-inline-start: -8px;
-      border-left: 6px solid var(--rs-text-link);
-      border-top: 3px solid transparent;
-      border-bottom: 3px solid transparent;
-      display: none;
-    }
-  }
-
-  &-active &-label {
-    .picker-item-active();
-
-    color: var(--rs-text-link);
-    background-color: var(--rs-listbox-option-selected-bg);
-  }
-
-  &-drag-over {
-    background-color: var(--rs-listbox-option-hover-bg);
-  }
-
-  &-dragging {
-    outline: 1px dashed var(--rs-primary-500);
-  }
-
-  &-drag-over-top {
-    &.rs-tree-node-label {
-      border-top: 2px solid var(--rs-text-link) !important;
-      border-radius: var(--rs-radius-none);
-
-      &::after {
-        display: block;
-        top: -4px;
-      }
-    }
-  }
-
-  &-drag-over-bottom {
-    &.rs-tree-node-label {
-      border-bottom: 2px solid var(--rs-text-link) !important;
-      border-radius: var(--rs-radius-none);
-
-      &::after {
-        display: block;
-        bottom: -4px;
-      }
-    }
-  }
-
-  &-disabled {
-    .rs-tree-node-label {
-      background: none;
-      color: var(--rs-listbox-option-disabled-text);
-      cursor: @cursor-disabled;
-    }
-
-    > .rs-tree-node-label {
-      cursor: @cursor-disabled;
-      color: var(--rs-listbox-option-disabled-text);
-
-      &,
-      &:hover {
-        background-color: transparent;
-      }
-    }
-  }
-
-  &-disabled&-active > .rs-tree-node-label {
-    &,
-    &:hover {
-      color: var(--rs-listbox-option-disabled-selected-text);
-    }
-  }
-
-  &:not(&-disabled):focus > .rs-tree-node-label {
-    background-color: var(--rs-listbox-option-selected-bg);
-  }
-
-  &:not(&-disabled) > .rs-tree-node-label:focus {
-    background-color: var(--rs-listbox-option-selected-bg);
-  }
-}
-
-// node children
-.rs-tree-node-children {
-  > .rs-tree-group {
-    position: relative;
-    display: none;
-
-    .rs-tree-node-expanded& {
-      display: block;
-    }
-  }
-}

package/Tree/styles/toggle.less

@@ -1,32 +0,0 @@
-.rs-tree-node-toggle {
-  cursor: pointer;
-  width: 24px;
-  padding: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  > .rs-tree-node-toggle-icon {
-    display: inline-block;
-    height: 16px;
-    width: 16px;
-    user-select: none;
-  }
-
-  > .rs-tree-node-custom-icon,
-  > .rs-tree-node-loading-icon {
-    display: flex;
-    align-items: center;
-    font-size: var(--rs-font-size-sm);
-  }
-
-  &-placeholder {
-    width: 24px;
-    height: 24px;
-  }
-}
-
-[dir='rtl'] .rs-tree-node-toggle {
-  inset-inline-end: 0;
-  padding-inline-end: inherit;
-}

package/TreePicker/styles/index.less

@@ -1,16 +0,0 @@
-@import '../../Tree/styles/index.less';
-
-.rs-picker-popup {
-  .rs-tree {
-    &.rs-tree-virtualized {
-      padding: 0;
-    }
-
-    &-node {
-      margin: 0;
-    }
-  }
-  .rs-tree-view {
-    padding: 2px 4px;
-  }
-}