rsuite 6.0.1 → 6.1.0

package/CheckboxGroup/styles/index.scss

@@ -0,0 +1,14 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-checkbox-group {
+  --rs-checkbox-group-gap: calc(var(--rs-spacing) * 3);
+  --rs-checkbox-group-direction: column;
+
+  display: flex;
+  flex-direction: var(--rs-checkbox-group-direction);
+  gap: var(--rs-checkbox-group-gap);
+
+  &[data-inline='true'] {
+    --rs-checkbox-group-direction: row;
+  }
+}

package/Col/styles/index.scss

@@ -0,0 +1,2 @@
+// Col styles are included in Grid component
+// --------------------------------------------------

package/Container/stories/styles.scss

@@ -0,0 +1,23 @@
+.show-container {
+  .rs-header,
+  .rs-content,
+  .rs-footer,
+  .rs-sidebar {
+    background-color: var(--rs-primary-500);
+    color: #fff;
+    text-align: center;
+  }
+
+  .rs-header,
+  .rs-footer {
+    line-height: 56px;
+    background-color: var(--rs-primary-400);
+  }
+  .rs-content {
+    line-height: 120px;
+    background-color: var(--rs-primary-300);
+  }
+  .rs-sidebar {
+    line-height: 120px;
+  }
+}

package/Container/styles/index.scss

@@ -0,0 +1,16 @@
+@use '../../internals/Box/styles/index' as box;
+
+// Container styles
+// contains: <Container/> <Header/> <Content/> <Footer/> <Sidebar/>
+
+.rs-container {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+
+  // The sidebar only are combined and containers.
+  // When they combined , change flex-direction value to row.
+  &-has-sidebar {
+    flex-direction: row;
+  }
+}

package/Content/styles/index.scss

@@ -0,0 +1,6 @@
+@use '../../internals/Box/styles/index' as box;
+
+// Full container
+.rs-content {
+  flex: 1 1 auto;
+}

package/DateInput/styles/index.scss

@@ -0,0 +1 @@
+@use '../../Input/styles/index';

package/DatePicker/styles/_mixin.scss

@@ -0,0 +1,10 @@
+@use '../../styles/mixins/color-modes' as color-modes;
+
+@mixin calendar-cell-selected-hover {
+  background-color: var(--rs-calendar-cell-selected-hover-bg);
+  color: var(--rs-calendar-date-selected-text);
+
+  @include color-modes.high-contrast-mode {
+    color: var(--rs-calendar-date-selected-text);
+  }
+}

package/DatePicker/styles/index.scss

@@ -0,0 +1,171 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../internals/Picker/styles/index' as picker;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../styles/mixins/listbox' as listbox;
+@use '../../styles/mixins/color-modes' as color-modes;
+@use '../../Button/styles/mixin' as button-mixin;
+@use '../../Input/styles/index' as input;
+@use '../../InputGroup/styles/index' as input-group;
+@use '../../Calendar/styles/index' as calendar;
+@use '../../Stack/styles/index' as stack;
+@use './mixin' as date-picker-mixin;
+
+// DatePicker Picker
+// ----------------------
+
+// Toolbar
+.rs-picker-toolbar {
+  padding: var(--rs-calendar-base-spacing);
+  border-top: 1px solid var(--rs-divider-border);
+}
+
+// Picker date
+.rs-picker[data-picker='date'] {
+  .rs-input-group-addon {
+    color: var(--rs-text-secondary);
+    cursor: pointer;
+
+    .rs-btn-close {
+      padding: 0;
+    }
+  }
+
+  &.rs-picker[data-appearance='subtle'] {
+    .rs-input-group {
+      border-color: transparent;
+    }
+  }
+
+  > .rs-input-group.rs-input-group-inside .rs-input {
+    padding-inline-end: 0;
+  }
+}
+
+// Predefined Ranges
+.rs-picker-date-predefined {
+  height: 325px;
+  border-right: 1px solid var(--rs-border-primary);
+  padding: 4px 0;
+
+  .rs-btn {
+    display: block;
+  }
+}
+
+// Calendar in DatePicker popup
+.rs-picker-popup {
+  $calendar-width: 264px; // This is a fixed value per design.
+  $calendar-padding-x: 15px;
+  // The padding used when show week numbers.
+  $calendar-padding-x-condensed: 12px;
+
+  &.rs-picker-popup-date {
+    padding: 0;
+  }
+
+  .rs-picker-toolbar {
+    max-width: 100%;
+
+    &-ranges {
+      max-width: 400px;
+    }
+  }
+
+  .rs-calendar {
+    --rs-calendar-in-menu-content-side-length: 30px;
+
+    min-width: $calendar-width;
+    // To make sure <Calendar/> horizontal align at center when toolbar width is so long.
+    display: block;
+    margin: 0 auto;
+
+    &-show-week-numbers {
+      $calendar-width: 278px; // This is a fixed value per design.
+
+      min-width: $calendar-width;
+
+      & .rs-calendar-body {
+        padding-inline-start: $calendar-padding-x-condensed;
+        padding-inline-end: $calendar-padding-x-condensed;
+      }
+    }
+
+    &-header {
+      width: 100%;
+    }
+
+    &-body {
+      padding-inline-start: $calendar-padding-x;
+      padding-inline-end: $calendar-padding-x;
+    }
+
+    &-table {
+      width: unset;
+    }
+
+    &-month-dropdown-cell:focus-visible {
+      .rs-calendar-month-dropdown-cell-content {
+        outline: 3px solid var(--rs-focus-ring-color);
+      }
+    }
+
+    &-table-cell {
+      &:focus-visible {
+        outline: none;
+        .rs-calendar-table-cell-content {
+          outline: 3px solid var(--rs-focus-ring-color);
+        }
+      }
+    }
+
+    .rs-calendar-table-cell-content {
+      width: var(--rs-calendar-in-menu-content-side-length);
+      height: var(--rs-calendar-in-menu-content-side-length);
+    }
+
+    .rs-calendar-month-dropdown-cell-content:hover {
+      @include listbox.listbox-option-active;
+    }
+
+    .rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content:hover {
+      @include date-picker-mixin.calendar-cell-selected-hover;
+    }
+
+    .rs-calendar-table-header-row .rs-calendar-table-cell-content {
+      height: 24px;
+      padding-top: 0;
+    }
+
+    .rs-calendar-table-cell-content {
+      padding-inline-start: 0;
+      padding-inline-end: 0;
+      display: inline-block;
+    }
+
+    // There's a small gap between cell and cell-content (cell-content smaller than cell)
+    // So don't apply hover style directly on cell-content
+    .rs-calendar-table-cell:hover .rs-calendar-table-cell-content {
+      // borrowed from listbox option
+      @include listbox.listbox-option-active;
+    }
+
+    .rs-calendar-table-cell-selected:hover .rs-calendar-table-cell-content {
+      @include date-picker-mixin.calendar-cell-selected-hover;
+    }
+
+    .rs-calendar-time-dropdown-column > ul {
+      height: 198px;
+    }
+
+    &.rs-calendar-only-time {
+      min-width: auto;
+      width: 100%;
+      flex: 1;
+
+      .rs-calendar-time-dropdown-column > ul {
+        height: 100%;
+      }
+    }
+  }
+}

package/DateRangeInput/styles/index.scss

@@ -0,0 +1 @@
+@use '../../Input/styles/index';

package/DateRangePicker/styles/index.scss

@@ -0,0 +1,151 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../internals/Picker/styles/index' as picker;
+@use '../../styles/colors/colors-base' as colors;
+@use '../../styles/mixins/utilities' as utils;
+@use '../../Button/styles/index' as button;
+@use '../../Input/styles/index' as input;
+@use '../../InputGroup/styles/index' as input-group;
+@use '../../Calendar/styles/index' as calendar;
+@use '../../DatePicker/styles/index' as date-picker;
+@use '../../Stack/styles/index' as stack;
+
+.rs-picker[data-picker='date-range'] {
+  .rs-input-group-addon {
+    color: var(--rs-text-secondary);
+    cursor: pointer;
+
+    .rs-btn-close {
+      padding: 0;
+    }
+  }
+
+  &[data-appearance='subtle'] {
+    .rs-input-group {
+      border-color: transparent;
+    }
+  }
+
+  > .rs-input-group.rs-input-group-inside .rs-input {
+    padding-inline-end: 0;
+  }
+}
+
+// Date range Picker
+// ----------------------
+
+.rs-picker-popup {
+  &.rs-picker-popup-daterange {
+    padding: 0;
+
+    .rs-calendar:first-child {
+      border-right: 1px solid var(--rs-border-primary);
+    }
+  }
+
+  .rs-calendar {
+    height: 274px;
+    padding-bottom: var(--rs-calendar-base-spacing);
+
+    &-header {
+      width: 100%;
+      text-align: center;
+    }
+
+    &-header-month-toolbar {
+      float: none;
+    }
+  }
+
+  .rs-calendar-month-dropdown {
+    z-index: var(--rs-zindex-date-range-picker-calendar-dropdown);
+  }
+
+  .rs-picker-daterange-panel-show-one-calendar {
+    .rs-picker-toolbar {
+      &-ranges {
+        width: 190px;
+      }
+    }
+  }
+
+  .rs-picker-daterange-panel-only-time {
+    height: 100%;
+
+    .rs-picker-daterange-calendar-group {
+      min-width: auto;
+    }
+
+    .rs-picker-daterange-content {
+      flex: 1;
+    }
+  }
+
+  // Calendar single
+  .rs-picker-daterange-calendar-single {
+    .rs-calendar {
+      border: 0;
+      display: block;
+      margin: auto;
+    }
+  }
+}
+
+// Header
+.rs-picker-daterange-header {
+  --rs-date-range-picker-header-line-height: var(--rs-line-height-md);
+  --rs-date-range-picker-header-padding-vertical: 8px;
+
+  padding-block: var(--rs-date-range-picker-header-padding-vertical);
+  padding-inline: var(--rs-picker-menu-padding);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-date-range-picker-header-line-height);
+  border-bottom: 1px solid var(--rs-border-primary);
+
+  .rs-picker-header-date:focus {
+    background-color: transparent;
+  }
+
+  &.rs-picker-tab-active-end,
+  &.rs-picker-tab-active-start {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      width: 50%;
+      bottom: -1px;
+      border-bottom: 2px solid #3498ff;
+      inset-inline-start: 0;
+      transition: left 0.3s;
+    }
+  }
+
+  &.rs-picker-tab-active-end {
+    &::after {
+      inset-inline-start: 50%;
+    }
+  }
+}
+
+// Calendar group
+.rs-picker-daterange-calendar-group {
+  display: flex;
+  flex-wrap: nowrap;
+  height: 274px;
+  // Make sure group wrapper can put 2 date-panels even screen width is not enough.
+  min-width: 492px;
+}
+
+// Predefined Ranges
+.rs-picker-daterange-predefined {
+  height: 366px;
+  border-right: 1px solid var(--rs-border-primary);
+  padding: 4px 0;
+
+  .rs-btn {
+    display: block;
+  }
+}

package/Divider/styles/index.scss

@@ -0,0 +1,85 @@
+@use '../../internals/Box/styles/index' as box;
+
+.rs-divider {
+  --rs-divider-size-xs: calc(0.0625rem * var(--rs-scale));
+  --rs-divider-size-sm: calc(0.125rem * var(--rs-scale));
+  --rs-divider-size-md: calc(0.1875rem * var(--rs-scale));
+  --rs-divider-size-lg: calc(0.25rem * var(--rs-scale));
+  --rs-divider-size-xl: calc(0.3125rem * var(--rs-scale));
+  --rs-divider-size: var(--rs-divider-size-xs);
+
+  --rs-divider-spacing-xs: calc(var(--rs-spacing) * 2);
+  --rs-divider-spacing-sm: calc(var(--rs-spacing) * 3);
+  --rs-divider-spacing-md: calc(var(--rs-spacing) * 4);
+  --rs-divider-spacing-lg: calc(var(--rs-spacing) * 5);
+  --rs-divider-spacing-xl: calc(var(--rs-spacing) * 6);
+  --rs-divider-spacing: var(--rs-divider-spacing-xs);
+
+  --rs-divider-border-style: solid;
+  --rs-divider-border-color: var(--rs-divider-color, var(--rs-divider-border));
+  --rs-divider-label-font-size: var(--rs-font-size-sm);
+
+  font-size: var(--rs-divider-label-font-size);
+  color: var(--rs-divider-color, inherit);
+  border-style: var(--rs-divider-border-style);
+  border-color: var(--rs-divider-border-color);
+  border-width: 0;
+
+  &:where([data-appearance='dashed']) {
+    --rs-divider-border-style: dashed;
+  }
+
+  &:where([data-appearance='dotted']) {
+    --rs-divider-border-style: dotted;
+  }
+
+  &:where([data-orientation='horizontal']) {
+    width: 100%;
+    margin-block: var(--rs-divider-spacing);
+    border-top-width: var(--rs-divider-size);
+  }
+
+  &:where([data-orientation='vertical']) {
+    display: inline-block;
+    min-height: 1em;
+    height: 100%;
+    width: 1px;
+    vertical-align: middle;
+    margin-inline: var(--rs-divider-spacing);
+    border-inline-start-width: var(--rs-divider-size);
+  }
+
+  &:where([data-orientation='horizontal'][data-with-label='true']) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: transparent;
+    flex: 0 0 auto;
+    border-width: 0;
+
+    &::before,
+    &::after {
+      content: '';
+      flex: 1 1 auto;
+      border-top-style: var(--rs-divider-border-style);
+      border-top-color: var(--rs-divider-border-color);
+      border-top-width: var(--rs-divider-size);
+    }
+
+    &::before {
+      margin-inline-end: var(--rs-divider-spacing-xs);
+    }
+
+    &::after {
+      margin-inline-start: var(--rs-divider-spacing-xs);
+    }
+  }
+
+  &:where([data-placement='start']):before {
+    display: none;
+  }
+
+  &:where([data-placement='end']):after {
+    display: none;
+  }
+}

package/Drawer/styles/_mixin.scss

@@ -0,0 +1,23 @@
+@mixin drawer-content-width($width) {
+  width: $width;
+}
+
+@mixin drawer-content-height($height) {
+  height: $height;
+}
+
+@mixin drawer-animation($timing) {
+  animation-duration: 0.3s;
+  animation-timing-function: $timing;
+  animation-fill-mode: forwards;
+}
+
+@mixin drawer-animation-setting($move-in-animation-name, $move-out-animation-name) {
+  &.rs-slide-out {
+    animation-name: $move-out-animation-name;
+  }
+
+  &.rs-slide-in {
+    animation-name: $move-in-animation-name;
+  }
+}

package/Drawer/styles/_variables.scss

@@ -0,0 +1,18 @@
+:root {
+  --rs-drawer-shadow: var(--rs-shadow-lg);
+  --rs-drawer-title-font-size: var(--rs-font-size-lg);
+  --rs-drawer-title-line-height: 2.25rem;
+  --rs-drawer-body-padding: calc(var(--rs-spacing) * 7.5) calc(var(--rs-spacing) * 15);
+  --rs-drawer-footer-spacing: calc(var(--rs-spacing) * 5);
+
+  --rs-drawer-size-full: 100%;
+  --rs-drawer-inline-size-xs: 400px;
+  --rs-drawer-inline-size-sm: 600px;
+  --rs-drawer-inline-size-md: 800px;
+  --rs-drawer-inline-size-lg: 968px;
+
+  --rs-drawer-block-size-xs: 290px;
+  --rs-drawer-block-size-sm: 400px;
+  --rs-drawer-block-size-md: 480px;
+  --rs-drawer-block-size-lg: 568px;
+}