rsuite 6.0.1 → 6.1.0

package/Modal/styles/_variables.scss

@@ -0,0 +1,16 @@
+:root {
+  --rs-modal-shadow: var(--rs-shadow-lg);
+  --rs-modal-margin-top: 4rem;
+  --rs-modal-title-font-size: var(--rs-font-size-lg);
+  --rs-modal-title-line-height: var(--rs-text-line-height-lg);
+  --rs-modal-body-padding: calc(var(--rs-spacing) * 5);
+  --rs-modal-content-padding: calc(var(--rs-spacing) * 5);
+  --rs-modal-btn-close-spacing: calc(var(--rs-spacing) * 5);
+  --rs-modal-footer-gap: calc(var(--rs-spacing) * 2.5);
+  --rs-modal-size-xs: 400px;
+  --rs-modal-size-sm: 600px;
+  --rs-modal-size-md: 800px;
+  --rs-modal-size-lg: 968px;
+  --rs-modal-max-width: 100%;
+  --rs-modal-padding-inline: calc(var(--rs-spacing) * 5);
+}

package/Modal/styles/index.scss

@@ -0,0 +1,186 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/utilities' as utils;
+@use './animation';
+@use './variables';
+
+//
+// Modals
+// Figma: https://www.figma.com/file/uEq9QBplcKUYZrcWWA3RK2/NXT-UI?node-id=0%3A1348&t=H5h3Dd3AnJVgbAbz-4
+// --------------------------------------------------
+
+// Container that the modal scrolls within
+.rs-modal {
+  display: none;
+  overflow: visible;
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
+  margin: var(--rs-modal-margin-top) auto 0 auto;
+  position: relative;
+  width: var(--rs-modal-size, auto);
+  max-width: var(--rs-modal-max-width);
+  padding-inline: var(--rs-modal-padding-inline);
+  z-index: var(--rs-zindex-modal);
+
+  // Size variants
+  $sizes: lg, md, sm, xs;
+
+  @each $size in $sizes {
+    &.rs-modal-#{$size} {
+      --rs-modal-size: var(--rs-modal-size-#{$size});
+    }
+  }
+
+  &.rs-modal-full {
+    --rs-modal-padding-inline: 0;
+
+    margin: 0;
+    height: 100%;
+
+    .rs-modal-dialog {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      border-radius: var(--rs-radius-none);
+      display: flex;
+      flex-direction: column;
+
+      .rs-modal-header {
+        flex: 0 0 auto;
+      }
+
+      .rs-modal-body {
+        flex: 1 1 auto;
+        overflow: auto;
+      }
+
+      .rs-modal-footer {
+        flex: 0 0 auto;
+      }
+    }
+  }
+
+  &.rs-modal-fill {
+    .rs-modal-dialog,
+    .rs-modal-body {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  // Actual modal
+  .rs-modal-dialog {
+    position: relative;
+    background-color: var(--rs-bg-overlay);
+    border: var(--rs-modal-border, none);
+    border-radius: var(--rs-radius-md);
+    // Remove focus outline from opened modal
+    outline: 0;
+    box-shadow: var(--rs-modal-shadow);
+    padding: var(--rs-modal-content-padding);
+    overflow: auto;
+  }
+
+  // Modal header
+  // Top section of the modal w/ title and dismiss
+  .rs-modal-header {
+    @include utils.clearfix;
+
+    padding-inline-end: var(--rs-line-height-base);
+
+    .rs-modal-header-close {
+      position: absolute;
+      padding: 0;
+      top: var(--rs-modal-btn-close-spacing);
+      inset-inline-end: var(--rs-modal-btn-close-spacing);
+    }
+  }
+
+  .rs-modal-title {
+    font-weight: normal;
+    font-size: var(--rs-modal-title-font-size);
+    line-height: var(--rs-modal-title-line-height);
+    width: 100%;
+    display: block;
+    color: var(--rs-text-heading);
+    margin: 0;
+    @include utils.ellipsis;
+  }
+
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
+  .rs-modal-body {
+    position: relative;
+
+    margin-top: var(--rs-modal-body-padding);
+    // Make sure input error message don't overflow.
+    padding-bottom: var(--rs-modal-body-padding);
+  }
+
+  // Footer (for actions)
+  .rs-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--rs-modal-footer-gap);
+  }
+}
+
+// Modal background
+.rs-modal-backdrop {
+  position: fixed;
+  top: 0;
+  inset-inline-start: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: calc(var(--rs-zindex-modal) - 1);
+  background-color: var(--rs-bg-backdrop);
+
+  // Fade for backdrop
+  &.rs-anim-fade {
+    opacity: 0;
+    transition: opacity 0.3s ease-in;
+  }
+
+  &.rs-anim-in {
+    opacity: 1;
+  }
+}
+
+// Kill the scroll on the body
+.rs-modal-open {
+  overflow: hidden;
+}
+
+.rs-modal-wrapper {
+  position: fixed;
+  overflow: auto;
+  z-index: var(--rs-zindex-modal);
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+
+  &.rs-modal-centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .rs-modal {
+      margin: auto;
+    }
+  }
+}
+
+.rs-modal-shake .rs-modal-dialog {
+  animation: 0.3s linear shakeHead;
+}
+
+// Measure scrollbar width for padding body during modal show/hide
+.rs-modal-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}

package/MultiCascadeTree/styles/index.scss

@@ -0,0 +1,35 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../CascadeTree/styles/index' as cascade-tree;
+@use '../../Checkbox/styles/index' as checkbox;
+@use '../../internals/Picker/styles/index' as picker;
+
+// MultiCascadeTree
+// ----------------------
+
+.rs-cascade-tree {
+  &-items {
+    --rs-check-item-padding-inline: calc(var(--rs-spacing) * 3);
+    --rs-check-item-padding-block: calc(var(--rs-spacing) * 2);
+  }
+
+  &-items .rs-checkbox-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rs-spacing);
+    flex: 1 1 auto;
+  }
+
+  &-items .rs-check-item.rs-check-item-focus,
+  &-items .rs-check-item.rs-checkbox-checked {
+    .rs-checkbox-checker > label {
+      font-weight: bold;
+    }
+  }
+
+  &-column.rs-cascade-tree-column-uncheckable {
+    .rs-check-item .rs-checkbox-checker > label {
+      padding-inline-start: var(--rs-picker-item-content-padding-horizontal);
+    }
+  }
+}

package/MultiCascader/styles/index.scss

@@ -0,0 +1,3 @@
+@use '../../internals/Box/styles/index';
+@use '../../MultiCascadeTree/styles/index' as multi-cascade-tree;
+@use '../../internals/Picker/styles/index' as picker;

package/Nav/styles/index.scss

@@ -0,0 +1,383 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../internals/Ripple/styles/index' as ripple;
+@use '../../styles/mixins/utilities' as utilities;
+@use '../../styles/mixins/hacks' as hacks;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../Dropdown/styles/index' as dropdown;
+
+//
+// Navs
+// --------------------------------------------------
+
+// Base class
+// --------------------------------------------------
+.rs-nav {
+  --rs-nav-caret-font-size: var(--rs-font-size-md);
+  --rs-nav-pills-item-shadow: var(--rs-shadow-sm);
+  --rs-nav-item-transition: color 0.15s ease-out, background-color 0.15s ease-out;
+
+  position: relative;
+  outline: 0;
+
+  // Rest dropdown height
+  .rs-dropdown > .rs-dropdown-toggle {
+    height: 36px;
+    vertical-align: bottom;
+  }
+
+  // Ripple
+  &[data-appearance='default'] &-item,
+  &[data-appearance='tabs'] &-item {
+    @include ripple.with-ripple;
+
+    & {
+      transition: var(--rs-nav-item-transition);
+    }
+  }
+}
+
+// Nav item
+.rs-nav-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  color: var(--rs-navs-text);
+  font-size: var(--rs-font-size-sm);
+  background: transparent;
+  transition: var(--rs-nav-item-transition);
+  @include utilities.ellipsis-basic;
+  @include hacks.safari-border-radius-overflow-hidden;
+
+  & {
+    outline: none;
+  }
+  @include utilities.reset-link-text-decoration(none);
+
+  @include color-modes.high-contrast-mode {
+    transition: none;
+  }
+
+  &:hover,
+  &:focus,
+  &.rs-nav-item-focus {
+    color: var(--rs-navs-text-hover);
+
+    @include color-modes.high-contrast-mode {
+      text-decoration: underline;
+    }
+  }
+
+  &:focus-visible {
+    @include utilities.focus-ring-slim;
+    z-index: 2;
+  }
+
+  &:active {
+    color: var(--rs-navs-text-active);
+
+    @include color-modes.high-contrast-mode {
+      text-decoration: underline;
+    }
+  }
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--rs-text-disabled);
+  }
+
+  &[data-active='true'] {
+    position: relative;
+    color: var(--rs-navs-selected);
+    z-index: 1;
+
+    @include color-modes.high-contrast-mode {
+      text-decoration: underline;
+    }
+  }
+
+  &-icon {
+    margin-inline-end: 6px;
+  }
+
+  &-caret {
+    font-size: var(--rs-nav-caret-font-size);
+    vertical-align: text-bottom;
+    margin-inline-start: 6px;
+  }
+}
+
+// Orientations
+.rs-nav[data-direction='horizontal'] {
+  white-space: nowrap;
+
+  > .rs-nav-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+  }
+
+  // Waterline
+  .rs-nav-bar {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+
+  // ** Reversed
+  &[data-reversed='true'] .rs-nav-bar {
+    bottom: auto;
+    top: 0;
+  }
+}
+
+.rs-nav[data-direction='vertical'] {
+  > .rs-nav-item {
+    display: flex;
+    align-items: center;
+  }
+
+  > .rs-dropdown {
+    width: 100%;
+
+    > .rs-dropdown-toggle {
+      width: 100%;
+      text-align: start;
+      z-index: 0;
+    }
+  }
+
+  // Waterline
+  .rs-nav-bar {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-end: 0;
+  }
+
+  // ** Reversed
+  &[data-reversed='true'] .rs-nav-bar {
+    inset-inline-end: auto;
+  }
+}
+
+// Alternate Navs
+// --------------------------------------------------
+
+// Default Nav
+.rs-nav[data-appearance='default'] {
+  .rs-nav-item {
+    border-radius: var(--rs-radius-md);
+
+    &:hover {
+      background: var(--rs-navs-bg-hover);
+    }
+  }
+}
+
+// Tab Nav
+.rs-nav[data-appearance='tabs'] {
+  .rs-nav-item {
+    &:hover,
+    &:focus {
+      background: var(--rs-navs-bg-hover);
+    }
+
+    &[data-active='true'] {
+      border: 1px solid var(--rs-navs-tab-border);
+      background-color: var(--rs-bg-card);
+      z-index: 1;
+    }
+  }
+
+  // Horizontal
+  &[data-direction='horizontal'] {
+    //Nav content
+    > .rs-nav-item,
+    > .rs-dropdown .rs-dropdown-toggle {
+      border-top-left-radius: var(--rs-radius-md);
+      border-top-right-radius: var(--rs-radius-md);
+    }
+
+    // ** Waterline
+    .rs-nav-bar {
+      border-top: 1px solid var(--rs-navs-tab-border);
+    }
+
+    // ** Active
+    .rs-nav-item[data-active='true'] {
+      border-bottom-width: 0;
+    }
+
+    // Reversed
+    &[data-reversed='true'] {
+      > .rs-nav-item,
+      > .rs-dropdown .rs-dropdown-toggle {
+        border-top-left-radius: var(--rs-radius-none);
+        border-top-right-radius: var(--rs-radius-none);
+        border-bottom-left-radius: var(--rs-radius-md);
+        border-bottom-right-radius: var(--rs-radius-md);
+      }
+      .rs-nav-item[data-active='true'] {
+        border-bottom-width: 1px;
+        border-top-width: 0;
+      }
+    }
+  }
+
+  // Vertical
+  &[data-direction='vertical'] {
+    //Nav content
+    > .rs-nav-item,
+    > .rs-dropdown .rs-dropdown-toggle {
+      border-end-start-radius: var(--rs-radius-md);
+      border-start-start-radius: var(--rs-radius-md);
+    }
+
+    // ** Waterline
+    .rs-nav-bar {
+      width: 1px;
+      background: var(--rs-navs-tab-border);
+    }
+
+    // ** Active
+    .rs-nav-item[data-active='true'] {
+      border-inline-end-width: 0;
+    }
+
+    // Reversed active item
+    &[data-reversed='true'] {
+      > .rs-nav-item,
+      > .rs-dropdown .rs-dropdown-toggle {
+        border-start-start-radius: var(--rs-radius-none);
+        border-end-start-radius: var(--rs-radius-none);
+        border-start-end-radius: var(--rs-radius-md);
+        border-end-end-radius: var(--rs-radius-md);
+      }
+      .rs-nav-item[data-active='true'] {
+        border-inline-start-width: 0;
+        border-inline-end-width: 1px;
+      }
+    }
+  }
+}
+
+// Subtle Nav
+.rs-nav[data-appearance='subtle'] {
+  .rs-nav-item {
+    position: relative;
+
+    &:hover,
+    &:focus {
+      color: var(--rs-navs-selected);
+    }
+
+    &[data-active='true']::before {
+      content: '';
+      position: absolute;
+      background-color: var(--rs-navs-selected);
+      display: block;
+      z-index: 1;
+    }
+  }
+
+  // Horizontal
+  &[data-direction='horizontal'] {
+    //Waterline
+    .rs-nav-bar {
+      border-top: 2px solid var(--rs-navs-subtle-border);
+    }
+
+    // Active item
+    .rs-nav-item[data-active='true']::before {
+      bottom: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      height: 2px;
+    }
+
+    // Reversed
+    &[data-reversed='true'] .rs-nav-item[data-active='true']::before {
+      bottom: auto;
+      top: 0;
+    }
+  }
+
+  // Vertical
+  &[data-direction='vertical'] {
+    display: flex;
+    flex-direction: column;
+
+    // Waterline
+    .rs-nav-bar {
+      width: 2px;
+      background: var(--rs-navs-subtle-border);
+    }
+
+    // Active item
+    .rs-nav-item[data-active='true']::before {
+      inset-inline-end: 0;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+    }
+
+    // Reversed
+    &[data-reversed='true'] .rs-nav-item[data-active='true']::before {
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+    }
+  }
+}
+
+// Pills Nav
+.rs-nav[data-appearance='pills'] {
+  display: inline-flex;
+  background-color: var(--rs-navs-pills-bg);
+  border-radius: var(--rs-radius-md);
+  padding: 4px;
+  width: max-content;
+
+  .rs-nav-item {
+    border-radius: var(--rs-radius-md);
+    position: relative;
+    padding: 4px 12px;
+    color: var(--rs-navs-pills-item-color);
+
+    &[data-active='true'] {
+      background-color: var(--rs-navs-pills-item-active-bg);
+      color: var(--rs-navs-pills-item-active-color);
+      box-shadow: var(--rs-nav-pills-item-shadow);
+    }
+
+    &[data-disabled='true'] {
+      color: var(--rs-navs-pills-item-disabled-color);
+    }
+  }
+
+  &[data-direction='vertical'] {
+    flex-direction: column;
+
+    .rs-nav-item {
+      padding: 6px 12px;
+      justify-content: center;
+    }
+  }
+}
+
+// Justified
+.rs-nav[data-justified='true'] {
+  display: flex;
+  width: 100%;
+
+  > .rs-nav-item,
+  > .rs-dropdown {
+    flex: 1 1 1%;
+  }
+
+  > .rs-dropdown .rs-dropdown-toggle {
+    width: 100%;
+    text-align: start;
+  }
+}