rsuite 6.0.1 → 6.1.1

package/FormControl/styles/index.scss

@@ -0,0 +1,82 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/utilities' as utils;
+@use './variables';
+
+// Full container.
+.rs-form-stack-fluid {
+  .rs-form-control-wrapper {
+    width: 100%;
+
+    > .rs-number-input,
+    > .rs-input {
+      width: 100%;
+    }
+  }
+
+  &.rs-form-stack-vertical .rs-form-group {
+    .rs-input-group {
+      width: 100%;
+    }
+  }
+}
+
+// Fixed width.
+.rs-form-control-wrapper {
+  // Used to provide relation for error message
+  position: relative;
+
+  > .rs-number-input,
+  > .rs-input {
+    width: var(--rs-form-control-width);
+  }
+
+  &.read-only {
+    pointer-events: none;
+    touch-action: none;
+  }
+}
+
+// Vertical forms
+.rs-form-stack-vertical .rs-form-group {
+  .rs-input-group {
+    width: var(--rs-form-control-width);
+  }
+
+  .rs-form-control-wrapper {
+    display: inline-block;
+  }
+}
+
+// Horizontal forms
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
+
+.rs-form-stack-horizontal .rs-form-group {
+  .rs-form-control-wrapper {
+    float: inline-start;
+  }
+
+  .rs-form-control-wrapper + .rs-form-help-text {
+    clear: both;
+  }
+}
+
+// Inline
+.rs-form-stack-inline .rs-form-group {
+  .rs-form-control-wrapper {
+    display: inline-block;
+  }
+
+  // Form control wrapper behind Screen only dom no need margin left.
+  .rs-sr-only + .rs-form-control-wrapper {
+    margin-inline-start: 0;
+  }
+}
+
+.rs-input-group > .rs-form-control > .rs-input {
+  border-radius: var(--rs-radius-none);
+  border: none;
+  outline: none;
+}

package/FormControlLabel/styles/index.scss

@@ -0,0 +1,7 @@
+@use '../../internals/Box/styles/index' as box;
+
+// FormControlLabel
+
+[data-rs='form'][data-plaintext='true'] .rs-form-control-label {
+  color: var(--rs-text-secondary);
+}

package/FormErrorMessage/styles/_animation.scss

@@ -0,0 +1,43 @@
+@keyframes errorMessageSlideUpIn {
+  0% {
+    transform: translate3d(0, 2px, 0);
+    visibility: visible;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes errorMessageSlideDownIn {
+  0% {
+    transform: translate3d(0, -2px, 0);
+    visibility: visible;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes errorMessageSlideLeftIn {
+  0% {
+    transform: translate3d(-2px, 0, 0);
+    visibility: visible;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes errorMessageSlideRightIn {
+  0% {
+    transform: translate3d(2px, 0, 0);
+    visibility: visible;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}

package/FormErrorMessage/styles/_variables.scss

@@ -0,0 +1,7 @@
+// FormErrorMessage variables
+:root {
+  --rs-form-errormessage-font-size: var(--rs-font-size-xs);
+  --rs-form-errormessage-line-height: 1.25rem;
+  --rs-form-errormessage-triangle-vertical: 4px;
+  --rs-form-errormessage-triangle-gap: 10px;
+}

package/FormErrorMessage/styles/index.scss

@@ -0,0 +1,146 @@
+@use '../../internals/Box/styles/index' as box;
+@use './animation';
+@use './variables';
+
+// Mixins for common arrow styles
+@mixin arrow-base {
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+
+@mixin arrow-position($position, $offset) {
+  &::before,
+  &::after {
+    #{$position}: $offset;
+  }
+}
+
+@mixin arrow-border($direction, $w1, $w2, $w3, $position, $offset) {
+  &::before,
+  &::after {
+    border-width: $w1 $w2 $w3;
+    border-#{$direction}-color: var(--rs-form-errormessage-border);
+    #{$position}: -1 * $offset;
+  }
+
+  &::after {
+    #{$position}: -1 * ($offset - 1);
+    border-#{$direction}-color: var(--rs-form-errormessage-bg);
+  }
+}
+
+.rs-form-error-message {
+  position: absolute;
+  padding: 3px 7px;
+  background-color: var(--rs-form-errormessage-bg);
+  border: 1px solid var(--rs-form-errormessage-border);
+  border-radius: var(--rs-radius-md);
+  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
+  z-index: var(--rs-zindex-form-error-message);
+  color: var(--rs-form-errormessage-text);
+  font-size: var(--rs-form-errormessage-font-size);
+  line-height: var(--rs-form-errormessage-line-height);
+  display: none;
+  white-space: nowrap;
+
+  &-show {
+    display: block;
+    animation-duration: 0.3s;
+    animation-timing-function: ease-out;
+  }
+
+  &-arrow {
+    @include arrow-base;
+  }
+}
+
+.rs-form-error-message-wrapper {
+  position: absolute;
+
+  &[data-placement='static'] {
+    --rs-form-errormessage-text: var(--rs-color-red);
+    --rs-form-errormessage-bg: transparent;
+
+    position: static;
+    margin-top: var(--rs-spacing);
+    display: block;
+    width: 100%;
+
+    .rs-form-error-message {
+      position: static;
+      display: block;
+      width: 100%;
+      white-space: normal;
+      word-wrap: break-word;
+      padding: 0;
+      filter: none;
+      border: none;
+      border-radius: 0;
+
+      &-show {
+        animation: none;
+      }
+
+      &-arrow {
+        display: none;
+      }
+    }
+  }
+
+  // Vertical placements (top/bottom)
+  &:where([data-placement='bottom-start'], [data-placement='bottom-end']) {
+    bottom: 0;
+
+    .rs-form-error-message {
+      top: 0;
+      &-show {
+        animation-name: errorMessageSlideDownIn;
+      }
+    }
+
+    .rs-form-error-message-arrow {
+      @include arrow-border(bottom, 0, 6px, 6px, top, 6px);
+    }
+  }
+
+  &:where([data-placement='top-start'], [data-placement='top-end']) {
+    top: 0;
+
+    .rs-form-error-message {
+      bottom: 0;
+      &-show {
+        animation-name: errorMessageSlideUpIn;
+      }
+    }
+
+    .rs-form-error-message-arrow {
+      @include arrow-border(top, 6px, 6px, 0, bottom, 6px);
+    }
+  }
+
+  // Inline start/end positions
+  &:where([data-placement='bottom-start'], [data-placement='top-start']) {
+    inset-inline-start: 0;
+    .rs-form-error-message {
+      inset-inline-start: 0;
+    }
+    .rs-form-error-message-arrow {
+      @include arrow-position(inset-inline-start, var(--rs-form-errormessage-triangle-gap));
+    }
+  }
+
+  &:where([data-placement='bottom-end'], [data-placement='top-end']) {
+    inset-inline-end: 0;
+    .rs-form-error-message {
+      inset-inline-end: 0;
+    }
+    .rs-form-error-message-arrow {
+      @include arrow-position(inset-inline-end, var(--rs-form-errormessage-triangle-gap));
+    }
+  }
+}

package/FormGroup/styles/index.scss

@@ -0,0 +1,75 @@
+@use '../../internals/Box/styles/index' as box;
+
+//
+// FormGroup
+// --------------------------------------------------
+.rs-form-group {
+  position: relative;
+  display: flex;
+  flex-direction: var(--rs-form-group-direction);
+  gap: var(--rs-form-group-spacing);
+
+  .rs-input {
+    display: inline-block;
+  }
+
+  // Fixed inline element will produce a whitespace
+  textarea.rs-input {
+    vertical-align: bottom;
+  }
+}
+
+// Vertical forms
+.rs-form-stack-vertical .rs-form-group {
+  .rs-form-control-label {
+    display: block;
+    width: fit-content;
+  }
+}
+
+.rs-form-stack {
+  --rs-form-group-spacing: var(--rs-spacing);
+  --rs-form-group-direction: column;
+}
+
+// Horizontal forms
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
+
+.rs-form-stack-horizontal {
+  --rs-form-control-label-width: 170px;
+  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+  --rs-form-group-direction: row;
+
+  .rs-form-group {
+    align-items: baseline;
+
+    .rs-form-control-label {
+      display: inline-block;
+      font-size: var(--rs-font-size-sm);
+      width: var(--rs-form-control-label-width);
+      text-align: end;
+    }
+
+    .rs-btn-toolbar {
+      padding-inline-start: calc(var(--rs-form-control-label-width) + var(--rs-form-group-spacing));
+    }
+  }
+}
+
+// Inline
+.rs-form-stack-inline {
+  --rs-form-group-direction: row;
+  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+
+  .rs-form-group {
+    align-items: center;
+  }
+}
+
+.rs-form-stack-fluid {
+  .rs-form-group {
+    width: 100%;
+  }
+}

package/FormHelpText/styles/index.scss

@@ -0,0 +1,21 @@
+@use '../../internals/Box/styles/index' as box;
+
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
+
+.rs-form-help-text {
+  display: block; // account for any element using form-help-text
+  color: var(--rs-text-secondary); // lighten the text some for contrast
+  //Sometimes help info is more than one line，so height can't set a fixed value
+  min-height: var(--rs-line-height-base);
+  line-height: var(--rs-line-height-sm);
+  font-size: var(--rs-font-size-xs);
+
+  &-tooltip {
+    display: inline-flex;
+    align-items: center;
+    font-size: var(--rs-font-size-md);
+  }
+}

package/FormStack/styles/index.scss

@@ -0,0 +1,15 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-form-stack {
+  --rs-form-stack-dir: column;
+  --rs-form-stack-spacing: calc(var(--rs-spacing) * 4);
+
+  display: flex;
+  flex-direction: var(--rs-form-stack-dir);
+  gap: var(--rs-form-stack-spacing);
+  align-items: flex-start;
+}
+
+.rs-form-stack-inline {
+  --rs-form-stack-dir: row;
+}

package/Grid/styles/_columns.scss

@@ -0,0 +1,23 @@
+@use './mixin' as grid;
+
+// Columns
+//
+// Common styles for small and large grid columns
+.rs-col {
+  position: relative;
+  display: block;
+  max-width: 100%;
+  min-height: 1px;
+  padding-inline: var(--rs-col-gutter);
+
+  &[class*='rs-col-auto-'] {
+    flex-grow: var(--rs-col-auto-flex-grow);
+    flex-basis: var(--rs-col-auto-flex-basis);
+    max-width: var(--rs-col-auto-max-width);
+  }
+}
+
+// Auto column styles for xs (default)
+.rs-col-auto-xs {
+  @include grid.rs-col-auto-styles;
+}

package/Grid/styles/_mixin.scss

@@ -0,0 +1,110 @@
+@use '../../styles/mixins/utilities' as utils;
+@use 'sass:math';
+
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+// Centered container element
+@mixin container-fixed {
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  padding-inline-start: calc(var(--rs-grid-gutter) / 2);
+  padding-inline-end: calc(var(--rs-grid-gutter) / 2);
+  @include utils.clearfix;
+}
+
+// Auto column styles
+@mixin rs-col-auto-styles {
+  --rs-col-auto-flex-grow: 1;
+  --rs-col-auto-flex-basis: 0;
+  --rs-col-auto-max-width: 100%;
+}
+
+// Mixin for responsive alignment
+@mixin responsive-align($size) {
+  &-#{$size}-top {
+    align-items: flex-start;
+  }
+  &-#{$size}-middle {
+    align-items: center;
+  }
+  &-#{$size}-bottom {
+    align-items: flex-end;
+  }
+}
+
+// Mixin for responsive justify
+@mixin responsive-justify($size) {
+  &-#{$size}-start {
+    justify-content: flex-start;
+  }
+  &-#{$size}-end {
+    justify-content: flex-end;
+  }
+  &-#{$size}-center {
+    justify-content: center;
+  }
+  &-#{$size}-space-between {
+    justify-content: space-between;
+  }
+  &-#{$size}-space-around {
+    justify-content: space-around;
+  }
+}
+
+// Create grid for specific class
+@mixin make-grid($size) {
+  @for $value from 1 through 24 {
+    .rs-col-#{$size}-#{$value} {
+      width: math.percentage(math.div($value, 24));
+    }
+
+    .rs-col-#{$size}-pull-#{$value} {
+      inset-inline-end: math.percentage(math.div($value, 24));
+    }
+
+    .rs-col-#{$size}-push-#{$value} {
+      inset-inline-start: math.percentage(math.div($value, 24));
+    }
+
+    .rs-col-#{$size}-offset-#{$value} {
+      margin-inline-start: math.percentage(math.div($value, 24));
+    }
+
+    .rs-col-#{$size}-order-#{$value} {
+      order: $value;
+    }
+  }
+
+  .rs-col-#{$size}-pull-0 {
+    inset-inline-end: auto;
+  }
+
+  .rs-col-#{$size}-push-0 {
+    inset-inline-start: auto;
+  }
+
+  .rs-col-auto-#{$size} {
+    @include rs-col-auto-styles;
+  }
+
+  .rs-col {
+    --rs-col-gutter: calc(var(--rs-grid-gutter-#{$size}, var(--rs-grid-gutter)) / 2);
+  }
+  
+  .rs-row {
+    --rs-row-gutter: calc(var(--rs-grid-gutter-#{$size}, var(--rs-grid-gutter)) / -2);
+    --rs-row-gap: var(--rs-grid-row-gutter-#{$size}, var(--rs-grid-row-gutter));
+
+    @include responsive-align($size);
+    @include responsive-justify($size);
+  }
+}
+
+// Hidden styles
+@mixin hidden($size) {
+  .rs-hidden-#{$size} {
+    display: none;
+  }
+}

package/Grid/styles/_row.scss

@@ -0,0 +1,44 @@
+@use './mixin' as grid;
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+.rs-row {
+  display: flex;
+  flex-flow: row wrap;
+
+  // Base styles (xs breakpoint)
+  margin-inline: var(--rs-row-gutter);
+  row-gap: var(--rs-row-gap);
+
+  // Default alignment without breakpoint prefix
+  &-top {
+    align-items: flex-start;
+  }
+  &-middle {
+    align-items: center;
+  }
+  &-bottom {
+    align-items: flex-end;
+  }
+
+  // Default justify without breakpoint prefix
+  &-start {
+    justify-content: flex-start;
+  }
+  &-end {
+    justify-content: flex-end;
+  }
+  &-center {
+    justify-content: center;
+  }
+  &-space-between {
+    justify-content: space-between;
+  }
+  &-space-around {
+    justify-content: space-around;
+  }
+
+  @include grid.responsive-align(xs);
+  @include grid.responsive-justify(xs);
+}

package/Grid/styles/_variables.scss

@@ -0,0 +1,6 @@
+// Grid variables
+:root {
+  --rs-grid-gutter: calc(var(--rs-spacing) * 3);
+  --rs-row-gutter: calc(var(--rs-grid-gutter) / -2);
+  --rs-col-gutter: calc(var(--rs-grid-gutter) / 2);
+}

package/Grid/styles/index.scss

@@ -0,0 +1,115 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/_variables' as vars;
+@use './variables';
+@use './mixin';
+@use './row';
+@use './columns';
+
+//
+// Grid system
+// --------------------------------------------------
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+.rs-grid-container {
+  --rs-grid-gutter-width: calc(var(--rs-spacing) * 3);
+  --rs-grid-container-sm: calc(540px + var(--rs-grid-gutter-width));
+  --rs-grid-container-md: calc(720px + var(--rs-grid-gutter-width));
+  --rs-grid-container-lg: calc(960px + var(--rs-grid-gutter-width));
+  --rs-grid-container-xl: calc(1140px + var(--rs-grid-gutter-width));
+  --rs-grid-container-xxl: calc(1320px + var(--rs-grid-gutter-width));
+
+  @include mixin.container-fixed;
+
+  @media (min-width: vars.$screen-sm) {
+    width: var(--rs-grid-container-sm);
+  }
+
+  @media (min-width: vars.$screen-md) {
+    width: var(--rs-grid-container-md);
+  }
+
+  @media (min-width: vars.$screen-lg) {
+    width: var(--rs-grid-container-lg);
+  }
+
+  @media (min-width: vars.$screen-xl) {
+    width: var(--rs-grid-container-xl);
+  }
+
+  @media (min-width: vars.$screen-xxl) {
+    width: var(--rs-grid-container-xxl);
+  }
+}
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.rs-grid-container-fluid {
+  @include mixin.container-fixed;
+}
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+@include mixin.make-grid(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 mixin.make-grid(sm);
+}
+
+@media (min-width: vars.$screen-md) {
+  @include mixin.make-grid(md);
+}
+
+@media (min-width: vars.$screen-lg) {
+  @include mixin.make-grid(lg);
+}
+
+@media (min-width: vars.$screen-xl) {
+  @include mixin.make-grid(xl);
+}
+
+@media (min-width: vars.$screen-xxl) {
+  @include mixin.make-grid(xxl);
+}
+
+// Hiddens
+//
+// All hidden styles.
+
+@media (max-width: (vars.$screen-sm - 1)) {
+  @include mixin.hidden(xs);
+}
+
+@media (min-width: vars.$screen-sm) and (max-width: (vars.$screen-md - 1)) {
+  @include mixin.hidden(sm);
+}
+
+@media (min-width: vars.$screen-md) and (max-width: (vars.$screen-lg - 1)) {
+  @include mixin.hidden(md);
+}
+
+@media (min-width: vars.$screen-lg) and (max-width: (vars.$screen-xl - 1)) {
+  @include mixin.hidden(lg);
+}
+
+@media (min-width: vars.$screen-xl) and (max-width: (vars.$screen-xxl - 1)) {
+  @include mixin.hidden(xl);
+}
+
+@media (min-width: vars.$screen-xxl) {
+  @include mixin.hidden(xxl);
+}

package/Header/styles/index.scss

@@ -0,0 +1,5 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-header {
+  flex: 0 0 auto;
+}