rsuite 6.0.1 → 6.1.0

package/Slider/styles/index.scss

@@ -0,0 +1,298 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../Tooltip/styles/index' as tooltip;
+@use '../../styles/mixins/color-modes' as color-modes;
+
+//
+// Slider
+// --------------------------------------------------
+.rs-slider {
+  --rs-slider-size: 6px;
+  --rs-slider-mark-mt: 9px;
+  --rs-slider-handle-size: 12px;
+  --rs-slider-handle-bw: 2px;
+  --rs-slider-calibration-size: 4px;
+  --rs-slider-calibration-bw: 2px;
+  --rs-slider-handle-ratio: 2;
+  --rs-slider-transition: 0.15s ease-in-out;
+  --rs-tooltip-offset: 0;
+
+  position: relative;
+
+  .rs-tooltip {
+    left: var(--rs-tooltip-offset);
+    display: none;
+  }
+
+  &[data-disabled='true'] {
+    opacity: 0.5;
+    cursor: var(--rs-cursor-disabled);
+
+    .rs-slider-bar,
+    .rs-slider-handle::before {
+      pointer-events: none;
+    }
+  }
+
+  &[data-with-mark='true']:not([data-direction='vertical']) {
+    //White space for mark
+    margin-bottom: calc(var(--rs-line-height-base) + var(--rs-slider-mark-mt));
+  }
+
+  &:where([data-size='xs']) {
+    --rs-slider-size: 4px;
+    --rs-slider-handle-size: 8px;
+    --rs-slider-calibration-size: 0;
+  }
+
+  &:where([data-size='md']) {
+    --rs-slider-size: 8px;
+    --rs-slider-handle-size: 16px;
+    --rs-slider-calibration-size: 6px;
+  }
+
+  &:where([data-size='lg']) {
+    --rs-slider-size: 10px;
+    --rs-slider-handle-size: 20px;
+    --rs-slider-calibration-size: 8px;
+  }
+
+  &:where([data-size='xl']) {
+    --rs-slider-size: 12px;
+    --rs-slider-handle-size: 24px;
+    --rs-slider-calibration-size: 10px;
+  }
+}
+
+// Bar
+.rs-slider-bar {
+  height: var(--rs-slider-size);
+  border-radius: var(--rs-radius-sm);
+  background-color: var(--rs-slider-bar);
+  transition: background-color ease-in-out 0.3s;
+  cursor: pointer;
+
+  .rs-slider:hover & {
+    background-color: var(--rs-slider-hover-bar);
+  }
+
+  .rs-slider:where([data-direction='vertical']) & {
+    height: 100%;
+    width: var(--rs-slider-size);
+  }
+}
+
+// Handle
+.rs-slider-handle {
+  position: absolute;
+  top: -50%;
+  outline: none;
+  inset-inline-start: var(--rs-slider-offset);
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: var(--rs-slider-handle-size);
+    height: var(--rs-slider-handle-size);
+    border-radius: var(--rs-radius-full);
+    border-width: var(--rs-slider-handle-bw);
+    border-style: solid;
+    border-color: var(--rs-slider-thumb-border);
+    background-color: var(--rs-slider-thumb-bg);
+    margin-inline-start: calc(var(--rs-slider-handle-size) / -2);
+    cursor: pointer;
+    transition:
+      box-shadow var(--rs-slider-transition),
+      background-color var(--rs-slider-transition),
+      transform var(--rs-slider-transition);
+  }
+
+  &:hover::before,
+  &:focus::before {
+    box-shadow: var(--rs-slider-thumb-hover-shadow);
+  }
+
+  &:active,
+  &.active {
+    &::before {
+      transform: scale(1.2);
+    }
+  }
+
+  .rs-slider[data-direction='vertical'] & {
+    left: unset;
+    top: unset;
+    bottom: var(--rs-slider-offset);
+
+    &::before {
+      inset-inline-start: calc((var(--rs-slider-handle-size) - var(--rs-slider-size)) / 2);
+      margin-top: calc(var(--rs-slider-handle-size) / -2);
+    }
+  }
+}
+
+.rs-slider-handle:hover .rs-tooltip,
+.rs-slider-handle.active .rs-tooltip {
+  display: block;
+  opacity: 1;
+  top: -30px;
+
+  .rs-slider[data-direction='vertical'] & {
+    top: -12px;
+    margin-inline-start: -36px;
+  }
+}
+
+// Mark
+.rs-slider-mark {
+  position: absolute;
+  top: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
+  white-space: nowrap;
+
+  &-content {
+    margin-inline-start: calc(-50% + 2px);
+  }
+}
+
+.rs-slider-mark-last {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+
+  .rs-slider-mark-content {
+    margin-inline-start: calc(50% - 2px);
+  }
+}
+
+// Graduator
+.rs-slider-graduator {
+  --rs-slider-tick-offset: 0;
+  width: 100%;
+
+  .rs-slider-tick {
+    &[data-active='true']::before {
+      visibility: hidden;
+    }
+  }
+  &[data-with-marks='true'] {
+    .rs-slider-tick {
+      position: absolute;
+      left: var(--rs-slider-tick-offset);
+
+      &:last-child::after {
+        display: none;
+      }
+    }
+  }
+
+  ol,
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  > ol {
+    display: flex;
+    padding-inline-start: 0;
+    width: 100%;
+
+    > li {
+      flex: 1 1 1%;
+      position: relative;
+
+      &:last-child::after,
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: var(--rs-slider-calibration-size);
+        height: var(--rs-slider-calibration-size);
+        border-radius: var(--rs-radius-full);
+        background-color: var(--rs-slider-thumb-bg);
+        box-sizing: border-box;
+        margin-inline: 2px;
+        top: 1px;
+
+        // Vertical styles
+        .rs-slider[data-direction='vertical'] & {
+          top: unset;
+          bottom: 2px;
+          margin-inline-start: 1px;
+        }
+      }
+
+      &:last-child::after {
+        inset-inline-end: 0;
+
+        // Vertical styles
+        .rs-slider[data-direction='vertical'] & {
+          inset-inline-start: 0;
+          bottom: unset;
+          top: 2px;
+        }
+      }
+    }
+  }
+
+  // Vertical styles
+  .rs-slider[data-direction='vertical'] & {
+    display: block;
+    height: 100%;
+
+    &[data-with-marks='true'] {
+      .rs-slider-tick {
+        left: unset;
+        bottom: var(--rs-slider-tick-offset);
+      }
+    }
+
+    > ol {
+      width: var(--rs-slider-size);
+      display: flex;
+      flex-direction: column-reverse;
+      height: 100%;
+      padding: 0;
+
+      & > li {
+        display: block;
+        padding: 0;
+      }
+    }
+  }
+}
+
+// Progress bar
+.rs-slider-progress-bar {
+  position: absolute;
+  height: var(--rs-slider-size);
+  border-top-left-radius: var(--rs-radius-sm);
+  border-bottom-left-radius: var(--rs-radius-sm);
+  background-color: var(--rs-slider-progress);
+
+  .rs-slider[data-direction='vertical'] & {
+    width: var(--rs-slider-size);
+    border-bottom-left-radius: var(--rs-radius-sm);
+    border-bottom-right-radius: var(--rs-radius-sm);
+  }
+}
+
+// Vertical
+.rs-slider:where([data-direction='vertical']) {
+  height: 100%;
+
+  // Reset all setting
+  .rs-slider-mark {
+    top: unset;
+    bottom: -8px;
+    inset-inline-start: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
+
+    &-content {
+      margin-inline-start: auto;
+    }
+  }
+
+  .rs-slider-mark-last {
+    bottom: unset;
+    top: -8px;
+  }
+}

package/Stack/styles/_variables.scss

@@ -0,0 +1,11 @@
+:root {
+  --rs-stack-spacing: calc(var(--rs-spacing) * 1.5);
+  --rs-stack-wrap: nowrap;
+  --rs-stack-direction: row;
+  --rs-stack-align: center;
+  --rs-stack-justify: flex-start;
+
+  --rs-stack-item-grow: 0;
+  --rs-stack-item-shrink: 1;
+  --rs-stack-item-basis: auto;
+}

package/Stack/styles/index.scss

@@ -0,0 +1,79 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/variables' as vars;
+@use 'variables';
+
+// Mixin for generating responsive direction classes
+@mixin responsive-direction($size) {
+  &-#{$size}-column {
+    flex-direction: column;
+  }
+  &-#{$size}-row {
+    flex-direction: row;
+  }
+  &-#{$size}-column-reverse {
+    flex-direction: column-reverse;
+  }
+  &-#{$size}-row-reverse {
+    flex-direction: row-reverse;
+  }
+}
+
+.rs-stack {
+  display: flex;
+  gap: var(--rs-stack-spacing);
+  flex-wrap: var(--rs-stack-wrap);
+  flex-direction: var(--rs-stack-direction);
+  align-items: var(--rs-stack-align);
+  justify-content: var(--rs-stack-justify);
+
+  &-column {
+    --rs-stack-align: flex-start;
+    flex-direction: column;
+  }
+
+  &-row {
+    --rs-stack-align: center;
+    flex-direction: row;
+  }
+
+  &-column-reverse {
+    --rs-stack-align: flex-start;
+    flex-direction: column-reverse;
+  }
+
+  &-row-reverse {
+    --rs-stack-align: center;
+    flex-direction: row-reverse;
+  }
+
+  &[data-wrap="true"] {
+    flex-wrap: wrap;
+  }
+
+  @include responsive-direction(xs);
+
+  // Small grid
+  //
+  // Columns, offsets, pushes, and pulls for the small device range, from phones
+  // to tablets / phones.
+
+  @media (min-width: vars.$screen-sm) {
+    @include responsive-direction(sm);
+  }
+
+  @media (min-width: vars.$screen-md) {
+    @include responsive-direction(md);
+  }
+
+  @media (min-width: vars.$screen-lg) {
+    @include responsive-direction(lg);
+  }
+
+  @media (min-width: vars.$screen-xl) {
+    @include responsive-direction(xl);
+  }
+
+  @media (min-width: vars.$screen-xxl) {
+    @include responsive-direction(xxl);
+  }
+}

package/Stat/styles/index.scss

@@ -0,0 +1,126 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../IconButton/styles/index' as icon-button;
+@use '../../Tooltip/styles/index' as tooltip;
+
+.rs-stat {
+  --rs-stat-icon-size: 50px;
+  --rs-stat-border-radius: var(--rs-radius-md);
+  --rs-stat-spacing: calc(var(--rs-spacing) * 2.5);
+  --rs-stat-value-font-size: var(--rs-font-size-2xl);
+  --rs-stat-value-unit-font-size: var(--rs-font-size-xs);
+  --rs-stat-trend-font-size: var(--rs-font-size-xs);
+
+  display: flex;
+  gap: var(--rs-stat-spacing);
+  align-items: center;
+
+  &-icon {
+    width: var(--rs-stat-icon-size);
+    height: var(--rs-stat-icon-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--rs-stat-border-radius);
+  }
+
+  &-body {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--rs-spacing) * 2);
+    width: 100%;
+    margin: 0;
+  }
+
+  &-bordered {
+    border: 1px solid var(--rs-border-primary);
+    background-color: var(--rs-stat-body-bg);
+    border-radius: var(--rs-stat-border-radius);
+    padding: 16px;
+  }
+
+  &-label {
+    font-weight: 400;
+    display: inline-flex;
+    align-items: center;
+    color: var(--rs-text-secondary);
+    gap: calc(var(--rs-spacing) * 1.5);
+
+    &-uppercase {
+      text-transform: uppercase;
+    }
+  }
+
+  &-value {
+    display: flex;
+    gap: var(--rs-spacing);
+    align-items: baseline;
+    font-size: var(--rs-stat-value-font-size);
+    font-weight: 600;
+    line-height: 1;
+    margin: 0;
+  }
+
+  &-value-unit {
+    font-size: var(--rs-stat-value-unit-font-size);
+    font-weight: 400;
+  }
+
+  &-trend {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--rs-spacing) / 2);
+    border-radius: var(--rs-radius-sm);
+    font-weight: 600;
+    font-size: var(--rs-stat-trend-font-size);
+    line-height: 1;
+
+    &-up {
+      color: var(--rs-green-900);
+    }
+
+    &-down {
+      color: var(--rs-red-900);
+    }
+
+    &-equal {
+      color: var(--rs-primary-900);
+    }
+
+    &-default {
+      padding: 2px 6px;
+    }
+
+    &-default.rs-stat-trend-up {
+      background-color: var(--rs-green-100);
+    }
+
+    &-default.rs-stat-trend-down {
+      background-color: var(--rs-red-100);
+    }
+
+    &-default.rs-stat-trend-equal {
+      background-color: var(--rs-primary-100);
+    }
+
+    &-subtle.rs-stat-trend-up {
+      color: var(--rs-green-600);
+    }
+
+    &-subtle.rs-stat-trend-down {
+      color: var(--rs-red-600);
+    }
+
+    &-subtle.rs-stat-trend-equal {
+      color: var(--rs-primary-600);
+    }
+  }
+
+  &-help-text {
+    color: var(--rs-text-secondary);
+  }
+
+  .rs-progress-line {
+    padding: 0;
+  }
+}

package/StatGroup/styles/index.scss

@@ -0,0 +1,10 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-stat-group {
+  --rs-stat-group-columns: 4;
+  --rs-stat-group-spacing: 6px;
+
+  display: grid;
+  grid-template-columns: repeat(var(--rs-stat-group-columns), 1fr);
+  grid-gap: var(--rs-stat-group-spacing);
+}