rsuite 6.0.1 → 6.1.0

package/Calendar/styles/index.scss

@@ -0,0 +1,673 @@
+@use '../../internals/Box/styles/index' as box;
+@use '../../styles/mixins/listbox';
+@use '../../Button/styles/index' as button;
+@use '../../internals/Picker/styles/mixin' as picker-mixin;
+@use '../../styles/mixins/utilities' as utils;
+@use 'variables';
+
+// Calendar panel
+// ----------------------
+
+.rs-calendar {
+  padding-top: var(--rs-calendar-base-spacing);
+  position: relative;
+  min-height: 266px;
+  overflow: hidden;
+
+  &-bordered &-table {
+    border: 1px solid var(--rs-border-primary);
+    border-radius: var(--rs-calendar-border-radius);
+  }
+
+  &-bordered &-table-row:not(:last-child) &-table-cell,
+  &-bordered &-table-header-row &-table-header-cell {
+    border-bottom: 1px solid var(--rs-border-secondary);
+  }
+
+  &-bordered &-month-dropdown {
+    border: 1px solid var(--rs-border-primary);
+    border-radius: var(--rs-calendar-border-radius);
+  }
+
+  &-panel &-header {
+    width: 100%;
+    padding-bottom: 6px;
+    @include utils.clearfix;
+  }
+
+  &-panel &-header &-btn-today {
+    float: inline-end;
+  }
+
+  &-panel &-header-forward,
+  &-panel &-header-backward {
+    float: none !important;
+  }
+
+  &-panel.rs-calendar-month-view &-header-forward,
+  &-panel.rs-calendar-month-view &-header-backward {
+    display: inline-block;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &-panel &-header-month-toolbar {
+    width: auto !important;
+  }
+
+  &-panel.rs-calendar-month-view &-header-month-toolbar {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  &-panel &-month-view {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  &-panel &-table-header-row &-table-header-cell-content {
+    padding-top: 8px; // padding + border = 10px
+    padding-bottom: 8px;
+  }
+
+  &-panel &-table-cell-is-today &-table-cell-day {
+    color: var(--rs-calendar-today-text);
+    width: var(--rs-calendar-panel-today-active-side-length);
+    height: var(--rs-calendar-panel-today-active-side-length);
+    background-color: var(--rs-calendar-today-bg);
+    border-radius: var(--rs-radius-full);
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+  }
+
+  &-panel &-table-cell-is-today &-table-cell-content {
+    box-shadow: none;
+  }
+
+  &-panel &-table-cell-selected &-table-cell-content {
+    background-color: inherit;
+    color: inherit;
+    box-shadow: inset 0 0 0 1px var(--rs-input-focus-border);
+  }
+
+  &-panel &-table-cell-day {
+    display: block;
+    text-align: center;
+  }
+
+  &-panel &-month-dropdown {
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
+    border-radius: var(--rs-radius-md);
+    width: calc(100% - 20px);
+  }
+
+  &-panel:not(.rs-calendar-compact)
+    &-table-row:not(.rs-calendar-table-header-row)
+    &-table-cell-content {
+    width: 100%;
+    height: var(--rs-calendar-panel-cell-height);
+    overflow: hidden;
+  }
+
+  &-panel:not(.rs-calendar-compact) &-table-cell {
+    vertical-align: top;
+  }
+
+  &-panel &-table-cell {
+    padding: 0 1px;
+    line-height: 0;
+  }
+
+  &-panel &-table-cell-content {
+    width: 100%;
+    border-radius: var(--rs-radius-none);
+  }
+
+  &-panel &-table-row:last-child :first-child &-table-cell-content {
+    border-bottom-left-radius: var(--rs-radius-md);
+  }
+
+  &-panel &-table-row:last-child :last-child &-table-cell-content {
+    border-bottom-right-radius: var(--rs-radius-md);
+  }
+
+  &-panel.rs-calendar-compact &-table-row:not(.rs-calendar-table-header-row) &-table-cell-content {
+    min-height: var(--rs-calendar-panel-compact-cell-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  &-btn-close {
+    position: absolute;
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: 14px;
+    padding: 0;
+    border: 0;
+    display: flex;
+    justify-content: center;
+    background: var(--rs-bg-overlay);
+    z-index: 1;
+
+    &:hover {
+      background-color: var(--rs-btn-subtle-hover-bg);
+    }
+  }
+
+  &-panel &-btn-close {
+    bottom: 4px;
+    margin: 0 11px;
+    border-bottom-left-radius: var(--rs-radius-md);
+    border-bottom-right-radius: var(--rs-radius-md);
+  }
+
+  &-panel.rs-calendar-bordered &-btn-close {
+    bottom: 5px;
+  }
+}
+
+// DatePicker
+// ----------------------
+
+// Show month dropdown
+.rs-calendar-month-view {
+  .rs-calendar-header-month-toolbar {
+    padding-inline-start: 24px;
+    padding-inline-end: 24px;
+  }
+
+  .rs-calendar-header-backward,
+  .rs-calendar-header-forward {
+    display: none;
+  }
+
+  .rs-calendar-header-title-date {
+    @include picker-mixin.picker-calendar-title-show;
+
+    &.rs-calendar-header-error {
+      color: var(--rs-text-error);
+
+      &:focus,
+      &:hover:active {
+        color: #fff !important;
+      }
+    }
+  }
+}
+
+// Show time dropdown
+.rs-calendar-time-view {
+  .rs-calendar-header-title-time {
+    @include picker-mixin.picker-calendar-title-show;
+
+    &.rs-calendar-header-error {
+      color: var(--rs-text-error);
+
+      &:hover:active {
+        color: #fff;
+      }
+    }
+  }
+}
+
+// Calendar group
+.rs-calendar-table-cell-selected,
+.rs-calendar-table-cell-in-range {
+  position: relative;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    margin-top: 4px;
+    height: 24px;
+    position: absolute;
+    z-index: calc(var(--rs-zindex-date-range-picker-table-cell-content) - 1);
+    top: 0;
+  }
+
+  .rs-calendar-table-cell-content {
+    z-index: var(--rs-zindex-date-range-picker-table-cell-content);
+    position: relative;
+  }
+}
+
+.rs-calendar-table-cell-in-range::before {
+  background-color: var(--rs-calendar-range-bg);
+}
+
+.rs-calendar-table-cell-in-range:hover::before {
+  display: none;
+}
+
+// Reset outline for scroll list.
+.rs-calendar-month-dropdown-scroll div:focus {
+  outline: none;
+}
+
+.rs-calendar-header {
+  width: var(--rs-calendar-header-width);
+  padding-inline-start: var(--rs-calendar-base-spacing);
+  padding-inline-end: var(--rs-calendar-base-spacing);
+  @include utils.clearfix;
+
+  // Month toolbar && Time toolbar
+  &-month-toolbar,
+  &-time-toolbar {
+    display: inline-block;
+  }
+
+  &-month-toolbar {
+    float: inline-start;
+  }
+
+  &-time-toolbar {
+    float: inline-end;
+  }
+
+  &-title {
+    margin: 0 var(--rs-calendar-header-title-margin);
+  }
+
+  &-meridiem {
+    // Designer think it's nice!
+    font-size: var(--rs-font-size-xs);
+    margin-inline-start: 4px;
+  }
+
+  &-error {
+    @include button.btn-error;
+  }
+
+  &-btn-disabled {
+    &,
+    &:hover,
+    &:hover:focus {
+      cursor: not-allowed;
+      opacity: 0.3;
+      background: none;
+    }
+
+    &::after {
+      display: none !important;
+    }
+  }
+
+  // Only Has month
+  &-has-month:not(&-has-time) {
+    margin: 0 auto;
+    padding-inline: var(--rs-calendar-base-spacing);
+  }
+
+  &-has-month:not(&-has-time) &-month-toolbar {
+    display: block;
+    text-align: center;
+    width: 100%;
+    @include utils.clearfix;
+  }
+
+  &-has-month:not(&-has-time) &-backward {
+    float: inline-start;
+  }
+
+  &-has-month:not(&-has-time) &-forward {
+    float: inline-end;
+  }
+
+  // Only Has time
+  &-has-time:not(&-has-month) {
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  &-has-time:not(&-has-month) &-time-toolbar {
+    float: none;
+    display: inline-block;
+  }
+
+  // Has month && time
+  &-has-month.rs-calendar-header-has-time {
+    margin: 0 auto;
+  }
+}
+
+[dir='rtl'] .rs-calendar-header {
+  &-backward,
+  &-forward {
+    .rs-icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.rs-calendar-body {
+  padding: var(--rs-calendar-base-spacing);
+  padding-top: var(--rs-calendar-body-padding-top);
+}
+
+// Calendar Table
+// TODO-Doma Use CSS grid layout.
+.rs-calendar-table {
+  display: table;
+  table-layout: fixed;
+  width: var(--rs-calendar-table-width);
+}
+
+.rs-calendar-table-row {
+  display: table-row;
+
+  &:nth-child(2) {
+    .rs-calendar-table-cell-week-number {
+      border-top-left-radius: var(--rs-radius-md);
+      border-top-right-radius: var(--rs-radius-md);
+    }
+  }
+
+  &:last-child {
+    .rs-calendar-table-cell-week-number {
+      border-bottom-left-radius: var(--rs-radius-md);
+      border-bottom-right-radius: var(--rs-radius-md);
+    }
+  }
+}
+
+.rs-calendar-table-cell,
+.rs-calendar-table-header-cell {
+  display: table-cell;
+  width: 1%;
+  padding: var(--rs-calendar-table-cell-padding) 0;
+  text-align: center;
+  vertical-align: middle;
+
+  &-un-same-month &-content,
+  &-disabled &-content {
+    &,
+    &:hover {
+      color: var(--rs-text-disabled);
+    }
+  }
+
+  &-disabled &-content {
+    &,
+    &:hover {
+      background: none;
+      text-decoration: line-through;
+      cursor: not-allowed;
+    }
+  }
+
+  &-disabled.rs-calendar-table-cell-is-today.rs-calendar-table-cell-selected &-content {
+    &:hover {
+      @include picker-mixin.picker-calendar-cell-content-selected;
+    }
+  }
+
+  &-disabled.rs-calendar-table-cell-selected &-content {
+    opacity: 0.3;
+  }
+}
+
+.rs-calendar-table-cell-content {
+  @include picker-mixin.picker-calendar-cell-content;
+
+  .rs-calendar-table-cell-is-today & {
+    box-shadow: inset 0 0 0 1px var(--rs-input-focus-border);
+  }
+
+  .rs-calendar-table-cell-selected & {
+    @include picker-mixin.picker-calendar-cell-content-selected;
+  }
+}
+
+// Table header row
+.rs-calendar-table-header-cell-content {
+  display: inline-block;
+  color: var(--rs-text-secondary);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-sm);
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  &,
+  &:hover,
+  &:focus,
+  &:hover:focus {
+    background: none;
+    cursor: auto;
+  }
+}
+
+.rs-calendar-table-cell-week-number {
+  display: table-cell;
+  min-width: 30px;
+  padding: var(--rs-calendar-table-cell-padding);
+  text-align: center;
+  vertical-align: middle;
+  color: var(--rs-text-secondary);
+  background-color: var(--rs-bg-well);
+  font-size: var(--rs-font-size-xs);
+}
+
+// Calendar month dropdown
+.rs-calendar-month-dropdown {
+  display: none;
+  position: absolute;
+  top: var(--rs-calendar-dropdown-top);
+  border-top: 1px solid var(--rs-border-primary);
+  margin-top: 0;
+  width: 100%;
+  background-color: var(--rs-bg-overlay);
+  overflow: hidden;
+  z-index: var(--rs-zindex-date-range-picker-table-cell-content);
+  height: calc(100% - 48px);
+
+  .rs-calendar-month-view & {
+    display: block;
+  }
+
+  .rs-calendar-month-view &-scroll {
+    animation: 0.3s linear slideDown;
+  }
+
+  &-scroll {
+    height: 100%;
+  }
+
+  &-row {
+    position: relative;
+    padding-inline-start: calc(
+      var(--rs-calendar-base-spacing) + 38px
+    ); // 30px for the year label + 8px gap
+    padding-inline-end: var(--rs-calendar-base-spacing);
+    padding-top: 5px;
+    padding-bottom: 5px;
+
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--rs-border-primary);
+    }
+  }
+
+  &-year {
+    position: absolute;
+    top: calc(50% - 0.5em);
+    inset-inline-start: var(--rs-calendar-base-spacing);
+
+    &-active {
+      color: var(--rs-text-active);
+    }
+  }
+
+  &-list {
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+  }
+
+  &-cell {
+    margin: 1px;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  &-cell-content {
+    @include picker-mixin.picker-calendar-cell-content;
+  }
+
+  &-cell:not(.rs-calendar-month-dropdown-cell-active).disabled &-cell-content {
+    color: var(--rs-text-disabled);
+    background: none;
+    text-decoration: line-through;
+    cursor: not-allowed;
+  }
+
+  &-cell-active.disabled &-cell-content {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  &-cell-active &-cell-content {
+    @include picker-mixin.picker-calendar-cell-content-selected;
+  }
+}
+
+// Calendar time dropdown
+.rs-calendar-time-dropdown {
+  display: none;
+  position: absolute;
+  top: var(--rs-calendar-dropdown-top);
+  padding-inline: var(--rs-calendar-base-spacing);
+  width: 100%;
+  background-color: var(--rs-bg-overlay);
+  color: var(--rs-text-primary);
+  overflow: hidden;
+  z-index: var(--rs-zindex-date-range-picker-table-cell-content);
+
+  .rs-calendar-time-view & {
+    display: block;
+  }
+
+  .rs-calendar-time-view &-content {
+    animation: 0.3s linear slideDown;
+  }
+
+  &-row {
+    display: table;
+    width: 100%;
+  }
+
+  &-column {
+    display: table-cell;
+    width: 1%;
+
+    .rs-scroll-view::after {
+      content: '';
+      display: block;
+      height: calc(100% - 30px);
+    }
+
+    > ul,
+    > ul > li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    > ul {
+      height: 230px;
+      overflow-y: auto;
+      scroll-behavior: smooth;
+    }
+  }
+
+  &-column-title {
+    width: 100%;
+    background-color: var(--rs-calendar-time-unit-bg);
+    color: var(--rs-text-secondary);
+    text-align: center;
+    font-size: var(--rs-font-size-xs);
+    line-height: var(--rs-line-height-sm);
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-bottom: 2px;
+
+    .rs-calendar-only-time & {
+      border-top: none;
+    }
+  }
+
+  &-cell {
+    font-size: var(--rs-font-size-sm);
+    line-height: var(--rs-line-height-base);
+    color: inherit;
+    padding: 5px;
+    display: block;
+    text-align: center;
+    cursor: pointer;
+    margin: 1px;
+
+    &,
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+
+    &:hover {
+      @include listbox.listbox-option-active;
+    }
+
+    &.rs-calendar-time-dropdown-cell-active {
+      background-color: var(--rs-bg-active);
+      color: var(--rs-calendar-date-selected-text);
+
+      @media (forced-colors: active) {
+        &:hover {
+          @include listbox.listbox-option-active;
+        }
+      }
+    }
+
+    &.rs-calendar-time-dropdown-cell-disabled {
+      color: var(--rs-text-disabled);
+      background: none;
+      cursor: not-allowed;
+      text-decoration: line-through;
+    }
+
+    &.rs-calendar-time-dropdown-cell-active.rs-calendar-time-dropdown-cell-disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.rs-calendar-only-time {
+  padding-top: var(--rs-calendar-base-spacing);
+  display: block;
+
+  .rs-calendar-time-dropdown {
+    position: relative;
+    top: 2px;
+  }
+
+  .rs-calendar-time-dropdown-row {
+    display: flex;
+  }
+
+  .rs-calendar-time-dropdown-column {
+    min-width: 60px;
+    flex: 1;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}

package/Card/styles/index.scss

@@ -0,0 +1,63 @@
+@use '../../internals/Box/styles/index' as box;
+
+//
+// Card
+// --------------------------------------------------
+
+.rs-card {
+  --rs-card-width: 100%;
+  --rs-card-padding: calc(var(--rs-spacing) * 4);
+  --rs-card-shadow: var(--rs-shadow-md);
+
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--rs-radius-md);
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
+  width: var(--rs-card-width);
+
+  &[data-bordered='true'] {
+    border: 1px solid var(--rs-border-primary);
+    background-color: var(--rs-card-bg);
+  }
+
+  &[data-shaded='true'] {
+    box-shadow: var(--rs-card-shadow);
+  }
+
+  &[data-shaded='hover']:hover {
+    box-shadow: var(--rs-card-shadow);
+    cursor: pointer;
+  }
+
+  &[data-size='sm'] {
+    --rs-card-padding: calc(var(--rs-spacing) * 2);
+  }
+
+  &[data-size='md'] {
+    --rs-card-padding: calc(var(--rs-spacing) * 4);
+  }
+
+  &[data-size='lg'] {
+    --rs-card-padding: calc(var(--rs-spacing) * 6);
+  }
+
+  &[data-direction='row'] {
+    flex-direction: row;
+  }
+
+  &-header {
+    padding: var(--rs-card-padding) var(--rs-card-padding) 0 var(--rs-card-padding);
+  }
+
+  &-body {
+    padding: var(--rs-card-padding);
+  }
+
+  &-footer {
+    display: flex;
+    gap: 8px;
+    padding: 0 var(--rs-card-padding) var(--rs-card-padding) var(--rs-card-padding);
+  }
+}