rsuite 6.0.1 → 6.1.0

package/Kbd/styles/_mixin.scss

@@ -0,0 +1,24 @@
+@mixin kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-spacing: -0.4em;
+  user-select: none;
+  border-radius: var(--rs-radius-sm);
+  line-height: 1.7em;
+  padding-inline-start: 0.5em;
+  padding-inline-end: 0.5em;
+  padding-bottom: 0.05em;
+  height: fit-content;
+  box-sizing: border-box;
+  background-color: var(--rs-kbd-bg);
+  border: solid 1px var(--rs-kbd-border);
+  box-shadow: inset 0 -1px 0 var(--rs-kbd-border);
+  color: var(--rs-kbd-text);
+  font-family: var(--rs-kbd-font-family);
+  font-size: var(--rs-kbd-font-size);
+  letter-spacing: var(--rs-kbd-letter-spacing);
+}

package/Kbd/styles/_variables.scss

@@ -0,0 +1,13 @@
+:root {
+  --rs-kbd-font-size-xs: var(--rs-font-size-2xs);
+  --rs-kbd-font-size-sm: var(--rs-font-size-xs);
+  --rs-kbd-font-size-md: var(--rs-font-size-sm);
+  --rs-kbd-font-size-lg: var(--rs-font-size-md);
+  --rs-kbd-letter-spacing-xs: 0.0025em;
+  --rs-kbd-letter-spacing-sm: 0em;
+  --rs-kbd-letter-spacing-md: 0em;
+  --rs-kbd-letter-spacing-lg: -0.0025em;
+  --rs-kbd-font-family: var(--rs-font-family-monospace);
+  --rs-kbd-font-size: var(--rs-kbd-font-size-md);
+  --rs-kbd-letter-spacing: var(--rs-kbd-letter-spacing-md);
+}

package/Kbd/styles/index.scss

@@ -0,0 +1,21 @@
+@use 'sass:list';
+@use '../../internals/Box/styles/index' as box;
+@use './variables';
+@use './mixin' as kbd-mixin;
+
+// Kbd
+// -------------------------
+
+.rs-kbd {
+  @include kbd-mixin.kbd();
+
+  // Size variants
+  $sizes: lg, md, sm, xs;
+
+  @each $size in $sizes {
+    &-#{$size} {
+      --rs-kbd-font-size: var(--rs-kbd-font-size-#{$size});
+      --rs-kbd-letter-spacing: var(--rs-kbd-letter-spacing-#{$size});
+    }
+  }
+}

package/Link/styles/index.scss

@@ -0,0 +1,41 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-link {
+  --rs-link-disabled-opacity: 0.5;
+  --rs-link-spacing: var(--rs-spacing);
+
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+
+  &-icon {
+    margin-inline: var(--rs-link-spacing);
+  }
+
+  &:where([data-underline='always']) {
+    text-decoration: underline;
+  }
+
+  &:where([data-underline='hover']) {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &:where([data-underline='never']) {
+    text-decoration: none !important;
+  }
+
+  &:where([data-underline='not-hover']) {
+    text-decoration: underline;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &:where([data-disabled='true']) {
+    pointer-events: none;
+    opacity: var(--rs-link-disabled-opacity);
+  }
+}

package/List/styles/index.scss

@@ -0,0 +1,111 @@
+@use '../../internals/Box/styles/index' as box;
+
+//
+// List
+// --------------------------------------------------
+
+.rs-list {
+  --rs-list-border-width: 1px;
+
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &[data-bordered='true'] {
+    border-radius: var(--rs-radius-md);
+    border: var(--rs-list-border-width) solid var(--rs-list-border);
+  }
+
+  &[data-hover='true'] .rs-list-item:hover {
+    background-color: var(--rs-list-hover-bg);
+  }
+
+  &[data-sortable='true'] .rs-list-item {
+    cursor: move; // fallback on IE 11
+    cursor: grab;
+
+    &-disabled,
+    &-disabled:active {
+      cursor: not-allowed;
+    }
+  }
+}
+
+// default list item ( axis-y )
+.rs-list-item {
+  position: relative;
+
+  &[data-bordered='true'] {
+    padding-inline-start: 20px;
+    padding-inline-end: 20px;
+  }
+
+  &[data-size='lg'] {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  &[data-size='md'] {
+    padding-top: 13px;
+    padding-bottom: 13px;
+  }
+
+  &[data-size='sm'] {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  &[data-size='xs'] {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+}
+
+.rs-list-item {
+  background-color: var(--rs-list-bg);
+
+  &-helper {
+    position: absolute;
+    background-color: var(--rs-list-bg);
+    box-shadow: var(--rs-shadow-sm);
+    width: calc(100% - 2px);
+    border-radius: var(--rs-radius-md);
+    top: 0;
+    inset-inline-start: 0;
+    z-index: var(--rs-zindex-list-helper);
+    border: none;
+    cursor: move;
+
+    // Increase z-index when modal opened.
+    .rs-modal-open & {
+      z-index: calc(var(--rs-zindex-modal) + var(--rs-zindex-list-helper));
+    }
+
+    // Increase z-index when drawer opened.
+    .rs-drawer-open & {
+      z-index: calc(var(--rs-zindex-drawer) + var(--rs-zindex-list-helper));
+    }
+  }
+
+  &-holder {
+    background-color: var(--rs-list-placeholder-bg);
+    visibility: hidden;
+
+    &::after {
+      content: '';
+      position: absolute;
+      visibility: visible;
+      top: var(--rs-list-border-width);
+      inset-inline-start: var(--rs-list-border-width);
+      width: calc(100% - 2 * var(--rs-list-border-width));
+      height: calc(100% - 2 * var(--rs-list-border-width));
+      border: var(--rs-list-border-width) var(--rs-list-placeholder-border) dashed;
+    }
+  }
+}
+
+.rs-list[data-divider='true'] {
+  .rs-list-item + .rs-list-item {
+    border-top: var(--rs-list-border-width) solid var(--rs-list-border);
+  }
+}

package/Loader/styles/_mixin.scss

@@ -0,0 +1,37 @@
+@use 'sass:map';
+
+// Loader size mixin
+@mixin loader-size($side) {
+  width: $side;
+  height: $side;
+
+  &::before,
+  &::after {
+    width: $side;
+    height: $side;
+  }
+}
+
+// Loader spin animation mixin
+@mixin loader-spin {
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    display: block;
+    border-radius: var(--rs-radius-full);
+  }
+
+  &::before {
+    border: var(--rs-loader-spin-ring-width) solid var(--rs-loader-ring);
+  }
+
+  &::after {
+    border-width: var(--rs-loader-spin-ring-width);
+    border-style: solid;
+    border-color: var(--rs-loader-rotor) transparent transparent;
+    animation: loaderSpin var(--rs-loader-duration-normal) infinite linear;
+  }
+}

package/Loader/styles/_variables.scss

@@ -0,0 +1,19 @@
+// Loader variables
+:root {
+  --rs-loader-duration-fast: 0.4s;
+  --rs-loader-duration-normal: 0.6s;
+  --rs-loader-duration-slow: 0.8s;
+  --rs-loader-duration-paused: paused;
+
+  --rs-loader-size-xs: 1rem;
+  --rs-loader-size-sm: 1.125rem;
+  --rs-loader-size-md: 2.25rem;
+  --rs-loader-size-lg: 4rem;
+
+  --rs-loader-font-size-xs: var(--rs-font-size-xs);
+  --rs-loader-font-size-sm: var(--rs-font-size-sm);
+  --rs-loader-font-size-md: var(--rs-font-size-sm);
+  --rs-loader-font-size-lg: var(--rs-font-size-md);
+
+  --rs-loader-spin-ring-width: 3px;
+}

package/Loader/styles/index.scss

@@ -0,0 +1,120 @@
+@use '../../internals/Box/styles/index' as box;
+@use './mixin';
+@use './variables';
+
+//
+// Loader
+// --------------------------------------------------
+
+.rs-loader {
+  &-box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--rs-spacing) * 3);
+  }
+
+  // Loader spin
+  &-spin {
+    position: relative;
+    display: inline-block;
+    @include mixin.loader-size(var(--rs-loader-size));
+    @include mixin.loader-spin;
+  }
+
+  &-content {
+    font-size: var(--rs-loader-font-size);
+  }
+
+  // Backdrop
+  &-backdrop {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--rs-loader-backdrop);
+  }
+
+  // Vertical
+  &[data-direction="vertical"] {
+    .rs-loader-box {
+      flex-direction: column;
+    }
+  }
+
+  // inverse
+  &[data-inverse="true"] {
+    .rs-loader-content {
+      color: var(--rs-text-inverse);
+    }
+
+    .rs-loader-backdrop {
+      background: var(--rs-loader-backdrop-inverse);
+    }
+
+    .rs-loader-spin::before {
+      border-color: var(--rs-loader-ring-inverse);
+    }
+
+    .rs-loader-spin::after {
+      border-top-color: var(--rs-loader-rotor-inverse);
+    }
+  }
+
+  // Loader speeds
+  &[data-speed="fast"] &-spin::after {
+    animation-duration: var(--rs-loader-duration-fast);
+  }
+
+  &[data-speed="normal"] &-spin::after {
+    animation-duration: var(--rs-loader-duration-normal);
+  }
+
+  &[data-speed="slow"] &-spin::after {
+    animation-duration: var(--rs-loader-duration-slow);
+  }
+
+  &[data-speed="paused"] &-spin::after {
+    animation-play-state: var(--rs-loader-duration-paused);
+  }
+
+  // Position center
+  &[data-center="true"] {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    margin: auto;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .rs-loader-content {
+      z-index: 1;
+    }
+  }
+}
+
+// Size variants
+$sizes: (xs, sm, md, lg);
+
+@each $size in $sizes {
+  .rs-loader[data-size='#{$size}'] {
+    --rs-loader-size: var(--rs-loader-size-#{$size});
+    --rs-loader-font-size: var(--rs-loader-font-size-#{$size});
+  }
+}
+
+@keyframes loaderSpin {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/Menu/styles/index.scss

@@ -0,0 +1,109 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/menu' as menu;
+@use '../../styles/mixins/utilities' as utils;
+
+//
+// Menu
+// --------------------------------------------------
+
+.rs-menu {
+  --rs-menu-divider-color: var(--rs-divider-border);
+  --rs-menu-shadow: var(--rs-shadow-md);
+  --rs-menu-padding: calc(var(--rs-spacing) * 1.5);
+  --rs-menu-font-size: var(--rs-font-size-sm);
+  --rs-menuitem-padding-inline: calc(var(--rs-spacing) * 3);
+  --rs-menuitem-padding-block: calc(var(--rs-spacing) * 2);
+  --rs-menuitem-divider-margin-block: calc(var(--rs-spacing) * 1.5);
+  --rs-menuitem-spacing: calc(var(--rs-spacing) * 2);
+
+  margin: 0; // override default ul
+  list-style: none;
+  font-size: var(--rs-menu-font-size);
+  text-align: start;
+  background-color: var(--rs-bg-overlay);
+  border-radius: var(--rs-radius-md);
+  padding: var(--rs-menu-padding);
+  outline: 0;
+}
+
+// Links within the menu menu
+.rs-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--rs-menuitem-spacing);
+  padding-inline: var(--rs-menuitem-padding-inline);
+  padding-block: var(--rs-menuitem-padding-block);
+  color: var(--rs-text-primary);
+  border-radius: var(--rs-radius-sm);
+  cursor: pointer;
+  @include utils.reset-link-text-decoration(none);
+
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rs-menu-item-shortcut {
+    border: none;
+    line-height: var(--rs-text-line-height-xs);
+  }
+
+  > .rs-icon {
+    width: var(--rs-font-size-base);
+    text-align: center;
+  }
+
+  &[data-active="true"] {
+    outline: 0;
+    font-weight: bold;
+
+    &,
+    &:hover,
+    &:focus {
+      color: var(--rs-menuitem-text-active);
+      background-color: var(--rs-menuitem-bg-active);
+
+      .rs-text {
+        color: var(--rs-menuitem-text-active);
+      }
+    }
+  }
+
+  // Hover/Focus state
+  &:focus-visible,
+  &[data-focus="true"] {
+    @include menu.menuitem-active;
+  }
+  &:focus {
+    outline: 0;
+  }
+
+  // Disabled state
+  //
+  // Gray out text and ensure the hover/focus state remains gray
+  &[data-disabled="true"] {
+    color: var(--rs-text-disabled);
+    cursor: var(--rs-cursor-disabled);
+
+    .rs-text {
+      color: var(--rs-text-disabled);
+    }
+
+    // Nuke hover/focus effects
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      background-color: transparent;
+      background-image: none; // Remove CSS gradient
+    }
+  }
+}
+
+.rs-menu-item-divider {
+  height: 1px;
+  margin-block: var(--rs-menuitem-divider-margin-block);
+  overflow: hidden;
+  background-color: var(--rs-menu-divider-color);
+}

package/Message/styles/index.scss

@@ -0,0 +1,189 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../styles/mixins/utilities' as utils;
+
+//
+// Messages
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+
+.rs-message {
+  --rs-message-font-size: var(--rs-font-size-sm);
+  --rs-message-line-height: var(--rs-text-line-height-sm);
+  --rs-message-border-radius: var(--rs-radius-md);
+  --rs-message-icon-size: var(--rs-font-size-md);
+  --rs-message-padding: calc(var(--rs-spacing) * 4);
+  --rs-message-header-color: var(--rs-text-heading);
+  --rs-message-body-color: var(--rs-text-primary);
+  --rs-message-icon-color: var(--rs-text-secondary);
+  --rs-message-spacing: calc(var(--rs-spacing) * 2);
+
+  border-radius: var(--rs-message-border-radius);
+  font-size: var(--rs-message-font-size);
+  line-height: var(--rs-message-line-height);
+  position: relative;
+  animation-fill-mode: forwards;
+  overflow: hidden;
+  background: #fff;
+
+  // Alternate styles
+  // -------------------------
+  // Generate contextual modifier classes for colorizing the message.
+  $types: success, info, warning, error;
+  @each $type in $types {
+    &.rs-message-#{$type} {
+      --rs-message-bg-color: var(--rs-message-#{$type}-bg);
+      --rs-message-header-color: var(--rs-message-#{$type}-header);
+      --rs-message-body-color: var(--rs-message-#{$type}-text);
+      --rs-message-icon-color: var(--rs-message-#{$type}-icon);
+      --rs-message-border-color: var(--rs-message-#{$type}-border);
+      --rs-message-icon-border-color: var(--rs-message-#{$type}-icon-border);
+    }
+  }
+
+  @include color-modes.high-contrast-mode {
+    border: 1px solid var(--rs-message-border-color);
+  }
+
+  &-container {
+    background-color: var(--rs-message-bg-color);
+    padding: var(--rs-message-padding);
+    display: flex;
+    align-items: baseline;
+    gap: var(--rs-message-spacing);
+  }
+
+  // Message with a title
+  &.rs-message-has-title {
+    --rs-message-icon-size: var(--rs-font-size-2xl);
+
+    // Bigger icon
+    .rs-message-icon {
+      align-self: flex-start;
+
+      .rs-icon {
+        line-height: 1;
+      }
+    }
+  }
+
+  &-bordered {
+    border: 1px solid var(--rs-message-border-color);
+    border-left-width: 4px;
+
+    .rs-message-icon {
+      box-sizing: content-box;
+      border: 4px solid var(--rs-message-icon-border-color);
+      border-radius: 50%;
+    }
+  }
+
+  &.rs-message-centered {
+    --rs-message-icon-size: var(--rs-font-size-5xl);
+
+    .rs-message-container {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: calc(var(--rs-spacing) * 4);
+    }
+
+    .rs-message-icon {
+      align-self: center;
+    }
+
+    &.rs-message-bordered {
+      border-style: solid;
+      border-width: 4px 1px 1px 1px;
+      border-color: var(--rs-message-border-color);
+
+      .rs-message-icon {
+        box-sizing: content-box;
+        border: 4px solid var(--rs-message-icon-border-color);
+        border-radius: var(--rs-radius-full);
+      }
+    }
+  }
+
+  // Message icon
+  &-icon {
+    align-self: center;
+    font-size: 0; // remove whitespace before svg
+
+    // Icon
+    .rs-icon {
+      font-size: var(--rs-message-icon-size);
+      align-items: center;
+    }
+  }
+
+  &-content {
+    flex-grow: 1;
+  }
+
+  // Header
+  &-header {
+    color: var(--rs-message-header-color);
+    line-height: var(--rs-text-line-height-md);
+    font-weight: bold;
+    @include utils.ellipsis;
+
+    & + .rs-message-body {
+      margin-top: 4px;
+    }
+  }
+
+  // Description
+  &-body {
+    color: var(--rs-message-body-color);
+    ul,
+    ol {
+      margin: 0;
+      padding: 0;
+      padding-inline-start: 16px;
+    }
+  }
+
+  .rs-message-icon > .rs-icon,
+  .rs-btn-close {
+    color: var(--rs-message-icon-color);
+  }
+
+  // Multiple messages should have spacing
+  // Hiding Message haven't spacing.
+  &:not(.rs-message-hiding) + & {
+    margin-top: 10px;
+
+    //The last message hiding haven't clearance.
+    &.rs-message-hiding:last-child {
+      transition: margin-top 0.1s linear 0.3s;
+      margin-top: 0;
+    }
+  }
+
+  &.rs-message-hiding {
+    // The same with notification
+    animation: notificationMoveOut 0.3s ease-in forwards;
+  }
+
+  // In dark mode, links inside Message body shows underline by default
+  @include color-modes.dark-mode {
+    .rs-btn[data-appearance='link'],
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+}
+
+// Full the containers
+.rs-message-full {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  border-radius: var(--rs-radius-none);
+  z-index: var(--rs-zindex-message-full);
+}

package/Modal/styles/_animation.scss

@@ -0,0 +1,15 @@
+@keyframes shakeHead {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  25%,
+  75% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(10px, 0, 0);
+  }
+}