rsuite 6.0.1 → 6.1.0

package/Navbar/styles/index.scss

@@ -0,0 +1,253 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../Dropdown/styles/index' as dropdown;
+@use '../../internals/Ripple/styles/index' as ripple;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../styles/mixins/menu' as menu;
+
+// NavBar
+// --------------------------------------------------
+
+.rs-navbar {
+  --rs-navbar-padding-y: calc(var(--rs-spacing) * 2.5);
+  --rs-navbar-padding-x: calc(var(--rs-spacing) * 4);
+  --rs-navbar-gap: calc(var(--rs-spacing) * 4);
+  --rs-navbar-icon-font-size: var(--rs-font-size-md);
+  --rs-navbar-caret-font-size: var(--rs-font-size-md);
+  --rs-navbar-item-padding-y: 8px;
+  --rs-navbar-item-padding-x: 12px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: var(--rs-navbar-padding-x);
+  padding-block: var(--rs-navbar-padding-y);
+  gap: var(--rs-navbar-gap);
+
+  .rs-input,
+  .rs-input-group {
+    width: auto;
+  }
+}
+
+.rs-navbar-content {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-navbar-gap);
+}
+
+.rs-navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--rs-spacing) * 1.5);
+}
+
+// Common
+.rs-navbar-nav {
+  display: flex;
+
+  &.rs-nav-vertical {
+    flex-direction: column;
+  }
+
+  &:focus {
+    .rs-navbar-item:focus-visible,
+    .rs-navbar-item.rs-navbar-item-focus,
+    .rs-dropdown .rs-dropdown-toggle:focus-visible,
+    .rs-dropdown.rs-dropdown-focus .rs-dropdown-toggle {
+      z-index: 1;
+
+      @include utils.focus-ring;
+
+      @include color-modes.high-contrast-mode {
+        @include utils.focus-ring-slim-inset;
+      }
+    }
+  }
+}
+
+// Nav item content
+.rs-navbar-item {
+  // Reset padding
+  padding-inline: var(--rs-navbar-item-padding-x);
+  padding-block: var(--rs-navbar-item-padding-y);
+  border-radius: var(--rs-radius-md);
+  color: inherit;
+  background-color: transparent;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  &-icon {
+    font-size: var(--rs-navbar-icon-font-size);
+    margin-inline-end: 5px;
+  }
+
+  &-caret {
+    font-size: var(--rs-navbar-caret-font-size);
+    margin-inline-start: 6px;
+  }
+
+  &[data-disabled='true'] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+// Focus style
+.rs-navbar-brand,
+.rs-navbar-item,
+.rs-navbar-nav > .rs-dropdown-item {
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    // Navbar is usually placed by the top edge of the page
+    // thus use an inset focus ring to prevent overflow clipping
+    @include utils.focus-ring-inset;
+
+    @include color-modes.high-contrast-mode {
+      @include utils.focus-ring-slim-inset;
+    }
+
+    & {
+      z-index: 2;
+    }
+  }
+}
+
+.rs-navbar-item,
+.rs-navbar-nav > .rs-dropdown {
+  margin: 0 !important;
+}
+
+.rs-navbar-item[data-active='true'] {
+  @include color-modes.high-contrast-mode {
+    text-decoration: underline;
+  }
+}
+
+// Dropdown
+.rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
+  @extend .rs-navbar-item;
+
+  &:focus,
+  &:focus-visible {
+    @include utils.focus-ring-inset;
+
+    @include color-modes.high-contrast-mode {
+      @include utils.focus-ring-slim-inset;
+    }
+
+    & {
+      z-index: 2;
+    }
+  }
+
+  padding-inline-end: calc(var(--rs-navbar-item-padding-x) + 20px);
+
+  @include color-modes.high-contrast-mode {
+    border: none;
+
+    &:focus-visible {
+      @include utils.focus-ring-slim-inset;
+    }
+  }
+
+  .rs-dropdown-toggle-caret {
+    top: var(--rs-navbar-item-padding-y);
+    inset-inline-end: var(--rs-navbar-item-padding-x);
+  }
+}
+
+.rs-navbar .rs-dropdown-item {
+  &:hover {
+    @include menu.menuitem-active;
+  }
+}
+
+// Default Navbar
+.rs-navbar[data-appearance='default'] {
+  background-color: var(--rs-navbar-default-bg);
+  color: var(--rs-navbar-default-text);
+
+  .rs-navbar-item:hover,
+  .rs-dropdown .rs-dropdown-toggle:hover {
+    background-color: var(--rs-navbar-default-hover-bg);
+    color: var(--rs-navbar-default-hover-text);
+  }
+
+  .rs-navbar-item[data-active='true'] {
+    color: var(--rs-navbar-default-selected-text);
+  }
+}
+
+// Inverse Navbar
+.rs-navbar[data-appearance='inverse'] {
+  background-color: var(--rs-navbar-inverse-bg);
+  color: var(--rs-navbar-inverse-text);
+
+  .rs-navbar-item,
+  .rs-dropdown .rs-dropdown-toggle {
+    &:hover,
+    &:focus {
+      background-color: var(--rs-navbar-inverse-hover-bg);
+      color: var(--rs-navbar-inverse-hover-text);
+    }
+  }
+
+  // Active
+  .rs-navbar-item[data-active='true'] {
+    background-color: var(--rs-navbar-inverse-selected-bg);
+
+    @include color-modes.high-contrast-mode {
+      color: var(--rs-navbar-inverse-selected-text);
+    }
+  }
+
+  .rs-navbar-brand,
+  .rs-text {
+    color: var(--rs-navbar-inverse-text);
+  }
+}
+
+// Subtle Navbar
+.rs-navbar[data-appearance='subtle'] {
+  background-color: transparent;
+  color: var(--rs-navbar-subtle-text);
+
+  .rs-navbar-item,
+  .rs-dropdown .rs-dropdown-toggle {
+    &:hover,
+    &:focus {
+      background-color: var(--rs-navbar-subtle-hover-bg);
+      color: var(--rs-navbar-subtle-hover-text);
+    }
+  }
+
+  // Active
+  .rs-navbar-item[data-active='true'] {
+    color: var(--rs-navbar-subtle-selected-text);
+  }
+}
+
+.rs-navbar-drawer {
+  --rs-drawer-body-padding: 16px;
+
+  .rs-drawer-body {
+    padding: var(--rs-drawer-body-padding);
+  }
+}
+
+.rs-mega-menu {
+  display: inline-flex;
+  gap: calc(var(--rs-spacing) * 1.5);
+}
+.rs-mega-menu-toggle-icon {
+  font-size: var(--rs-navbar-caret-font-size);
+}

package/Notification/styles/index.scss

@@ -0,0 +1,116 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../toaster/styles/animation';
+
+//
+// Notifications
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.rs-notification {
+  --rs-notify-padding: 1.25rem;
+  --rs-notify-max-width: 400px;
+  --rs-notify-spacing: calc(var(--rs-spacing) * 2.5);
+  --rs-notify-border-radius: var(--rs-radius-md);
+  --rs-notify-box-shadow: var(--rs-shadow-md);
+  --rs-notify-title-font-size: var(--rs-font-size-md);
+  --rs-notify-line-height: var(--rs-text-line-height-md);
+  --rs-notify-icon-size: 24px;
+  --rs-notify-title-description-gap: 8px;
+
+  // Recovery mouse event.
+  pointer-events: auto;
+  animation-fill-mode: forwards;
+  position: relative;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-notify-spacing);
+
+  border-radius: var(--rs-notify-border-radius);
+  background: var(--rs-bg-overlay);
+  box-shadow: var(--rs-notify-box-shadow);
+  padding: var(--rs-notify-padding);
+  overflow: hidden;
+
+  &:has(.rs-notification-header) {
+    align-items: flex-start;
+  }
+
+  // Multiple notification should have spacing
+  // Hiding notification haven't spacing.
+  &:not(.rs-toast-fade-exited) ~ .rs-notification {
+    margin-top: var(--rs-notify-spacing);
+  }
+
+  @at-root .high-contrast-mode & {
+    border: 1px solid var(--rs-border-primary);
+  }
+
+  // Notification content
+  &-content {
+    max-width: var(--rs-notify-max-width);
+    flex: 1;
+  }
+
+  // Title
+  &-header {
+    @include utils.ellipsis;
+
+    color: var(--rs-text-heading);
+    font-size: var(--rs-notify-title-font-size);
+    line-height: var(--rs-notify-line-height);
+
+    > p {
+      margin: 0;
+    }
+  }
+
+  &-icon {
+    display: flex;
+    align-items: center;
+
+    .rs-icon {
+      font-size: var(--rs-notify-icon-size);
+      width: var(--rs-notify-icon-size);
+      line-height: 1;
+      color: var(--rs-notify-icon-color);
+
+      &::before {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  // Description
+  &-description {
+    color: var(--rs-text-primary);
+  }
+
+  // Has header and description need to ajust distance
+  &-header + &-description {
+    margin-top: var(--rs-notify-title-description-gap);
+  }
+
+  &.rs-notification-hiding {
+    animation: notificationMoveOut 0.3s ease-in forwards;
+
+    & ~ .rs-notification {
+      margin-top: 0;
+    }
+  }
+
+  .rs-btn-close {
+    padding: 0;
+  }
+}
+
+// Types
+$types: success, info, warning, error;
+
+@each $type in $types {
+  .rs-notification-#{$type} {
+    --rs-notify-icon-color: var(--rs-state-#{$type});
+  }
+}

package/NumberInput/styles/_mixin.scss

@@ -0,0 +1,11 @@
+@mixin input-touchspin($size) {
+  $size-name: 'input-height-#{$size}';
+  $height: ((var(--rs-#{$size-name}) - 2px) / 2);
+
+  height: $height;
+
+  > .rs-icon {
+    height: $height;
+    color: var(--rs-text-secondary);
+  }
+}

package/NumberInput/styles/index.scss

@@ -0,0 +1,78 @@
+@use 'sass:list';
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../Button/styles/index' as button;
+@use '../../Input/styles/index' as input;
+@use '../../InputGroup/styles/index' as input-group;
+@use './mixin' as number-input-mixin;
+
+.rs-number-input {
+  --rs-number-input-touchspin-font-size: var(--rs-font-size-xs);
+  --rs-number-input-touchspin-height-xs: calc(calc(var(--rs-input-height-xs) - 2px) / 2);
+  --rs-number-input-touchspin-height-sm: calc(calc(var(--rs-input-height-sm) - 2px) / 2);
+  --rs-number-input-touchspin-height-md: calc(calc(var(--rs-input-height-md) - 2px) / 2);
+  --rs-number-input-touchspin-height-lg: calc(calc(var(--rs-input-height-lg) - 2px) / 2);
+
+  &.rs-input-group {
+    width: auto;
+  }
+
+  $sizes: xs, sm, md, lg;
+
+  @each $size in $sizes {
+    $index: list.index($sizes, $size);
+    $offset: ($index - 1) * 2px;
+
+    &[data-size='#{$size}'] {
+      --rs-number-input-touchspin-height: var(--rs-number-input-touchspin-height-#{$size});
+      --rs-number-input-icon-height: calc(var(--rs-number-input-touchspin-height) - #{$offset});
+    }
+  }
+
+  &-btn-group-vertical {
+    border-left: 1px solid var(--rs-border-secondary);
+    position: relative;
+    width: 20px;
+    flex: 0 0 20px;
+    display: block;
+
+    & > .rs-btn {
+      display: block;
+      float: none;
+      width: 100%;
+      max-width: 100%;
+      position: relative;
+      border: none;
+    }
+  }
+
+  .rs-number-input-touchspin-up,
+  .rs-number-input-touchspin-down {
+    position: relative;
+    border-radius: var(--rs-radius-none);
+    padding: 0;
+    box-shadow: none !important;
+    height: var(--rs-number-input-touchspin-height);
+
+    > .rs-icon {
+      width: 100%;
+      font-size: var(--rs-number-input-touchspin-font-size);
+      color: var(--rs-text-secondary);
+      height: var(--rs-number-input-icon-height);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  // Reset Input Number styling
+  // Reference https://stackoverflow.com/questions/26024771/styling-a-input-type-number#answer-40189766
+  input[type='number'] {
+    appearance: textfield;
+
+    &::-webkit-inner-spin-button {
+      /* stylelint-disable */
+      -webkit-appearance: none;
+    }
+  }
+}

package/Pagination/styles/_pagination-group.scss

@@ -0,0 +1,52 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-pagination-group {
+  --rs-pagination-font-size-xs: var(--rs-font-size-xs);
+  --rs-pagination-font-size-sm: var(--rs-font-size-sm);
+  --rs-pagination-font-size-md: var(--rs-font-size-sm);
+  --rs-pagination-font-size-lg: var(--rs-font-size-md);
+  --rs-pagination-group-gap: calc(var(--rs-spacing) * 2.5);
+
+  display: flex;
+  align-items: center;
+  gap: var(--rs-pagination-group-gap);
+
+  &-total,
+  &-skip {
+    font-size: var(--rs-pagination-font-size-md);
+  }
+
+  $sizes: (xs, sm, md, lg);
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .rs-pagination-group-total,
+      .rs-pagination-group-skip {
+        font-size: var(--rs-pagination-font-size-#{$size});
+      }
+    }
+  }
+
+  &-grow {
+    flex-grow: 1;
+  }
+
+  .rs-pagination {
+    vertical-align: middle;
+  }
+
+  &-limit {
+    position: relative;
+  }
+
+  &-skip {
+    vertical-align: middle;
+    display: inline-block;
+
+    .rs-input {
+      width: 46px;
+      margin: 0 5px;
+      display: inline-block;
+    }
+  }
+}

package/Pagination/styles/index.scss

@@ -0,0 +1,77 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../Button/styles/index' as button;
+@use '../../Button/styles/mixin' as button-mixin;
+@use '../../Divider/styles/index' as divider;
+@use '../../SelectPicker/styles/index' as select-picker;
+@use './pagination-group';
+
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
+.rs-pagination {
+  display: inline-block;
+  padding-inline-start: 0;
+  margin-bottom: 0;
+  // Pagination Sizes
+  // --------------------------------------------------
+
+  &[data-size='lg'] {
+    .rs-pagination-btn {
+      min-width: 42px;
+
+      .rs-pagination-symbol {
+        height: var(--rs-line-height-plus);
+      }
+    }
+  }
+
+  &[data-size='md'] {
+    .rs-pagination-btn {
+      min-width: 36px;
+    }
+  }
+
+  &[data-size='sm'] {
+    .rs-pagination-btn {
+      min-width: 30px;
+    }
+  }
+
+  &[data-size='xs'] {
+    .rs-pagination-btn {
+      min-width: 24px;
+    }
+  }
+}
+
+.rs-pagination-btn {
+  margin: 0 2px;
+  position: relative;
+  float: inline-start; // Collapse white-space
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  justify-content: center;
+
+  .rs-pagination-symbol {
+    display: flex;
+    align-items: center;
+    height: var(--rs-line-height-base);
+
+    [dir='rtl'] & {
+      transform: rotate(180deg);
+    }
+  }
+
+  @at-root .high-contrast-mode & {
+    transition: none;
+    color: var(--rs-pagination-item-text);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--rs-pagination-item-current-text);
+      text-decoration: underline;
+    }
+  }
+}

package/Panel/styles/index.scss

@@ -0,0 +1,122 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../Heading/styles/index' as heading;
+@use '../../internals/ScrollView/styles/index' as scroll-view;
+@use '../../Animation/styles/index' as animation;
+
+//
+// Panel
+// --------------------------------------------------
+
+.rs-panel {
+  --rs-panel-header-font-size: var(--rs-font-size-md);
+  --rs-panel-header-line-height: var(--rs-text-line-height-md);
+  --rs-panel-padding: 1.25rem;
+  --rs-panel-border-radius: var(--rs-radius-md);
+  --rs-panel-btn-font-size: var(--rs-font-size-md);
+  --rs-panel-btn-padding: 0.625rem;
+  --rs-panel-shadow: var(--rs-shadow-md);
+
+  border-radius: var(--rs-panel-border-radius);
+  overflow: hidden;
+
+  .rs-anim-collapse {
+    display: none;
+
+    &.rs-anim-in {
+      display: block;
+    }
+  }
+
+  &-bordered {
+    border: 1px solid var(--rs-border-primary);
+  }
+
+  &-shaded {
+    box-shadow: var(--rs-panel-shadow);
+  }
+
+  &-header,
+  &-body {
+    padding: var(--rs-panel-padding);
+  }
+
+  // When the width is set to full, reset the value of padding.
+  &-body-fill {
+    padding: 0 !important;
+  }
+
+  &-header {
+    color: var(--rs-text-heading);
+    font-size: var(--rs-panel-header-font-size);
+    line-height: var(--rs-panel-header-line-height);
+    font-weight: inherit;
+  }
+
+  &-btn {
+    width: 100%;
+    border: none;
+    background: none;
+    outline: transparent solid 2px;
+    display: flex;
+    align-items: center;
+    font-size: var(--rs-panel-btn-font-size);
+    padding: var(--rs-panel-btn-padding);
+    border-radius: var(--rs-panel-border-radius);
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--rs-btn-subtle-hover-bg);
+      color: var(--rs-btn-subtle-hover-text);
+      outline: transparent solid 2px;
+    }
+
+    &-icon {
+      transition: transform 0.2s ease 0s;
+    }
+
+    &[aria-expanded='true'] {
+      .rs-panel-btn-icon {
+        transform: rotate(180deg);
+      }
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      color: var(--rs-text-disabled);
+      background-color: var(--rs-btn-subtle-disabled-bg);
+    }
+  }
+
+  &-title {
+    margin: 0;
+    flex: 1 1 0%;
+    text-align: start;
+
+    a {
+      color: inherit;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // Adjust the padding value when the head and body are combined.
+  &-header + &-body-collapse &-body,
+  &-header + &-body {
+    padding-top: 0;
+  }
+
+  // Collapsible panel header hover background
+  &-collapsible > &-header {
+    cursor: pointer;
+    transition:
+      background-color 0.3s linear,
+      border-radius 0.3s linear;
+    position: relative;
+    padding: calc(var(--rs-spacing) * 2.5);
+  }
+}