@sdata/web-vue 1.6.0 → 1.7.0

package/es/date-picker/style/index.scss

@@ -0,0 +1,318 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use 'sass:meta';
+@use '@components/_components/picker/style/index.scss' as *;
+@use '@components/date-picker/style/token.scss' as *;
+
+$picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
+
+.#{theme.$prefix}-picker-container,
+.#{theme.$prefix}-picker-range-container {
+  box-sizing: border-box;
+  min-height: 60px;
+  overflow: hidden;
+  background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-popup'));
+  border: 1px solid $picker-panel-color-border;
+  border-radius: $picker-container-border-radius;
+  box-shadow: theme.$popup-box-shadow-base;
+
+  &-shortcuts-placement-left,
+  &-shortcuts-placement-right {
+    display: flex;
+    align-items: flex-start;
+
+    > .#{theme.$prefix}-picker-shortcuts {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      padding: 5px 8px;
+      overflow: hidden auto;
+
+      > * {
+        margin: 5px 0;
+      }
+    }
+  }
+
+  &-shortcuts-placement-left {
+    .#{$picker-prefix-cls}-panel-wrapper,
+    .#{$picker-prefix-cls}-range-panel-wrapper {
+      border-left: 1px solid $picker-panel-color-border;
+    }
+  }
+
+  &-shortcuts-placement-right {
+    .#{$picker-prefix-cls}-panel-wrapper,
+    .#{$picker-prefix-cls}-range-panel-wrapper {
+      border-right: 1px solid $picker-panel-color-border;
+    }
+  }
+}
+
+// panel only
+.#{theme.$prefix}-picker-container-panel-only,
+.#{theme.$prefix}-picker-range-container-panel-only {
+  box-shadow: none;
+}
+.#{theme.$prefix}-picker-container-panel-only .#{theme.$prefix}-panel-date-inner,
+.#{theme.$prefix}-picker-range-container-panel-only .#{theme.$prefix}-panel-date-inner {
+  width: 100%;
+}
+.#{theme.$prefix}-picker-range-container-panel-only .#{theme.$prefix}-panel-date {
+  width: 100%;
+}
+
+.#{$picker-prefix-cls} {
+  &-header {
+    display: flex;
+    padding: 8px 16px;
+    border-bottom: 1px solid $picker-panel-color-border;
+
+    &-title {
+      flex: 1;
+      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
+      font-size: 14px;
+      line-height: 24px;
+      text-align: center;
+    }
+
+    &-icon {
+      width: 24px;
+      height: 24px;
+      margin-right: 2px;
+      margin-left: 2px;
+      color: $picker-color-switch-icon;
+      font-size: 12px;
+      line-height: 24px;
+      text-align: center;
+      background-color: $picker-color-bg-switch-icon;
+      border-radius: 50%;
+      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      user-select: none;
+    }
+
+    &-icon:not(#{&}-icon-hidden) {
+      cursor: pointer;
+
+      &:hover {
+        background-color: $picker-color-bg-switch-icon_hover;
+      }
+    }
+
+    &-label {
+      padding: 2px;
+      border-radius: 2px;
+      cursor: pointer;
+      transition: all theme.$transition-duration-1;
+
+      &:hover {
+        background-color: $picker-panel-color-bg-label_hover;
+      }
+    }
+  }
+
+  &-body {
+    padding: 14px 16px;
+  }
+
+  &-week-list {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 14px 16px 0;
+
+    &-item {
+      flex: 1;
+      height: 32px;
+      padding: 0;
+      color: #7d7d7f;
+      font-weight: 400;
+      line-height: 32px;
+      text-align: center;
+    }
+  }
+
+  &-row {
+    display: flex;
+    padding: 2px 0;
+  }
+
+  &-cell {
+    flex: 1;
+  }
+
+  &-cell &-date {
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: $picker-panel-cell-padding-vertical 0;
+    cursor: pointer;
+  }
+
+  &-date-value {
+    min-width: $picker-panel-cell-circle-height;
+    height: $picker-panel-cell-circle-height;
+    color: $picker-color-cell-text-not-in-view;
+    font-size: 14px;
+    line-height: $picker-panel-cell-circle-height;
+    text-align: center;
+    border-radius: $picker-panel-border-radius-cell_selected;
+    cursor: pointer;
+  }
+
+  &-cell-in-view &-date-value {
+    color: $picker-color-cell-text-in-view;
+    font-weight: $picker-cell-font-weight-in-view;
+  }
+
+  &-cell-selected &-date-value {
+    color: $picker-panel-color-text-cell_selected;
+    background-color: $picker-panel-color-bg-cell_selected;
+    transition: background-color theme.$transition-duration-1
+      theme.$transition-timing-function-linear;
+  }
+
+  &-cell-in-view:not(
+      &-cell-selected,
+      &-cell-range-start,
+      &-cell-range-end,
+      &-cell-disabled,
+      &-cell-week
+    )
+    &-date-value:hover {
+    color: $picker-panel-color-text-cell_hover;
+    background-color: $picker-panel-color-bg-cell_hover;
+  }
+
+  &-cell-today {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      bottom: -2px;
+      left: 50%;
+      display: block;
+      width: 4px;
+      height: 4px;
+      margin-left: -2px;
+      background-color: $picker-panel-color-current-time-dot;
+      border-radius: 50%;
+      content: '';
+    }
+  }
+
+  &-cell-in-range &-date {
+    background-color: $picker-color-bg-cell-in-range;
+  }
+
+  &-cell-range-start &-date {
+    border-top-left-radius: $picker-panel-cell-boundary-border-radius;
+    border-bottom-left-radius: $picker-panel-cell-boundary-border-radius;
+  }
+
+  &-cell-range-end &-date {
+    border-top-right-radius: $picker-panel-cell-boundary-border-radius;
+    border-bottom-right-radius: $picker-panel-cell-boundary-border-radius;
+  }
+
+  &-cell-in-range-near-hover &-date {
+    border-radius: 0;
+  }
+
+  &-cell-range-start &-date-value,
+  &-cell-range-end &-date-value {
+    color: $picker-color-text-cell-range-boundary;
+    background-color: $picker-color-bg-cell-range-boundary;
+    border-radius: $picker-panel-border-radius-cell_selected;
+  }
+
+  &-cell-hover-in-range &-date {
+    background-color: $picker-color-bg-cell-hover-in-range;
+  }
+
+  &-cell-hover-range-start &-date {
+    border-radius: $picker-panel-cell-boundary-border-radius 0 0
+      $picker-panel-cell-boundary-border-radius;
+  }
+
+  &-cell-hover-range-end &-date {
+    border-radius: 0 $picker-panel-cell-boundary-border-radius
+      $picker-panel-cell-boundary-border-radius 0;
+  }
+
+  &-cell-hover-range-start &-date-value,
+  &-cell-hover-range-end &-date-value {
+    color: $picker-color-text-cell-hover-range-boundary;
+    background-color: $picker-color-bg-cell-hover-range-boundary;
+    border-radius: 50%;
+  }
+
+  &-cell-disabled &-date {
+    background-color: $picker-color-bg-cell-disabled;
+    cursor: not-allowed;
+  }
+
+  &-cell-disabled &-date-value {
+    color: $picker-color-cell-text-not-in-view;
+    background-color: global.$color-transparent;
+    cursor: not-allowed;
+  }
+
+  // Footer
+  &-footer {
+    width: min-content;
+    min-width: 100%;
+
+    &-btn-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 3px 8px;
+      border-top: 1px solid $picker-panel-color-border;
+
+      & :only-child {
+        margin-left: auto;
+      }
+    }
+
+    &-extra-wrapper {
+      box-sizing: border-box;
+      padding: 8px 24px;
+      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
+      font-size: 12px;
+      border-top: 1px solid $picker-panel-color-border;
+    }
+
+    &-now-wrapper {
+      box-sizing: border-box;
+      height: 36px;
+      line-height: 36px;
+      text-align: center;
+      border-top: 1px solid $picker-panel-color-border;
+    }
+  }
+
+  &-btn-confirm {
+    margin: 5px 0;
+  }
+
+  &-shortcuts {
+    flex: 1;
+
+    & > * {
+      margin: 5px 10px 5px 0;
+    }
+  }
+}
+
+@include meta.load-css('./date.scss');
+@include meta.load-css('./month.scss');
+@include meta.load-css('./year.scss');
+@include meta.load-css('./week.scss');
+@include meta.load-css('./quarter.scss');
+@include meta.load-css('./range.scss');
+@include meta.load-css('./shortcuts.scss');

package/es/date-picker/style/month.scss

@@ -0,0 +1,34 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+$picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
+
+@use '@components/date-picker/style/token.scss' as *;
+
+$month-panel-prefix-cls: string.unquote('#{theme.$prefix}-panel-month');
+$quarter-panel-prefix-cls: string.unquote('#{theme.$prefix}-panel-quarter');
+$year-panel-prefix-cls: string.unquote('#{theme.$prefix}-panel-year');
+
+.#{$month-panel-prefix-cls},
+.#{$quarter-panel-prefix-cls},
+.#{$year-panel-prefix-cls} {
+  box-sizing: border-box;
+  width: $picker-panel-month-width;
+
+  .#{theme.$prefix}-picker-date {
+    padding: 4px;
+  }
+
+  .#{theme.$prefix}-picker-date-value {
+    width: 100%;
+    border-radius: $picker-panel-cell-boundary-border-radius;
+  }
+
+  .#{theme.$prefix}-picker-cell:not(.#{theme.$prefix}-picker-cell-selected):not(
+      .#{theme.$prefix}-picker-cell-range-start
+    ):not(.#{theme.$prefix}-picker-cell-range-end):not(.#{theme.$prefix}-picker-cell-disabled):not(
+      .#{theme.$prefix}-picker-cell-week
+    )
+    .#{theme.$prefix}-picker-date-value:hover {
+    border-radius: $picker-panel-cell-boundary-border-radius;
+  }
+}

package/es/date-picker/style/quarter.scss

@@ -0,0 +1,12 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+$picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
+
+@use '@components/date-picker/style/token.scss' as *;
+
+$quarter-panel-prefix-cls: string.unquote('#{theme.$prefix}-panel-quarter');
+
+.#{$quarter-panel-prefix-cls} {
+  box-sizing: border-box;
+  width: $picker-panel-quarter-width;
+}

package/es/date-picker/style/range.scss

@@ -0,0 +1,12 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/date-picker/style/token.scss' as *;
+$picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
+
+$range-picker-prefix-cls: string.unquote('#{theme.$prefix}-picker-range');
+
+.#{$range-picker-prefix-cls} {
+  &-wrapper {
+    display: flex;
+  }
+}

package/es/date-picker/style/shortcuts.scss

@@ -0,0 +1,29 @@
+@use '@style/theme/index.scss' as global;
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/date-picker/style/token.scss' as *;
+$picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
+
+$date-picker-prefix-cls: string.unquote('#{theme.$prefix}-datepicker');
+
+.#{$date-picker-prefix-cls}-shortcuts-wrapper {
+  box-sizing: border-box;
+  width: 106px;
+  height: 100%;
+  max-height: 300px;
+  margin: 10px 0 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+
+  > li {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 6px 16px;
+    cursor: pointer;
+
+    &:hover {
+      color: global.$color-primary-6;
+    }
+  }
+}

package/es/date-picker/style/token.scss

@@ -0,0 +1,86 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+// Panel
+$picker-container-border-radius: global.$radius-medium;
+
+$picker-header-padding-horizontal: 24px;
+$picker-header-padding-vertical: 24px;
+
+$picker-panel-date-width: 265px;
+$picker-panel-month-width: 265px;
+$picker-panel-year-width: 265px;
+$picker-panel-week-width: 298px;
+$picker-panel-quarter-width: 265px;
+
+$picker-panel-time-cell-width: 36px;
+$picker-panel-time-cell-spacing-horizontal: 4px;
+$picker-panel-time-padding-horizontal: 10px;
+
+$picker-panel-cell-padding-vertical: 4px;
+$picker-panel-cell-circle-height: 24px;
+
+$picker-color-switch-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$picker-color-bg-switch-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+$picker-color-bg-switch-icon_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+
+$picker-cell-font-weight-in-view: global.$font-weight-500;
+$picker-color-cell-text-in-view: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$picker-color-cell-text-not-in-view: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+$picker-color-bg-circle_selected: global.$color-primary-6;
+$picker-color-bg-circle_selected: global.$color-primary-6;
+$picker-color-bg-cell-in-range: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+$picker-color-bg-cell-disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+$picker-color-text-cell-range-boundary: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+$picker-color-bg-cell-range-boundary: global.$color-primary-6;
+$picker-color-bg-cell-hover-in-range: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+$picker-color-text-cell-hover-range-boundary: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$picker-color-bg-cell-hover-range-boundary: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2')
+);
+
+$picker-panel-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+$picker-panel-color-text-cell_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$picker-panel-color-bg-cell_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$picker-panel-color-text-cell_selected: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+$picker-panel-color-bg-cell_selected: global.$color-primary-6;
+$picker-panel-color-current-time-dot: global.$color-primary-6;
+
+$picker-panel-border-radius-cell_selected: global.$radius-circle;
+$picker-panel-cell-boundary-border-radius: $picker-panel-cell-circle-height;
+$picker-panel-cell-border-radius: $picker-panel-cell-circle-height;
+
+$datepicker-view-tabs-height: 50px;
+$datepicker-view-tab-pane-color-text_unactive: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+$datepicker-view-tab-pane-color-text_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$datepicker-view-tab-pane-font-size: 14px;
+$datepicker-view-tab-pane-spacing-text-icon: 8px;
+
+$picker-panel-color-bg-label_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);

package/es/date-picker/style/week.scss

@@ -0,0 +1,72 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/date-picker/style/token.scss' as *;
+
+$week-panel-prefix-cls: string.unquote('#{theme.$prefix}-panel-week');
+$picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
+
+.#{$week-panel-prefix-cls} {
+  box-sizing: border-box;
+
+  &-wrapper {
+    display: flex;
+  }
+
+  &-inner {
+    width: $picker-panel-week-width;
+  }
+
+  &-inner .#{$picker-prefix-cls}-body {
+    padding-top: 0;
+  }
+
+  .#{$picker-prefix-cls}-row-week {
+    cursor: pointer;
+
+    .#{$picker-prefix-cls}-date-value {
+      width: 100%;
+      border-radius: 0;
+    }
+  }
+
+  .#{$picker-prefix-cls}-cell {
+    .#{$picker-prefix-cls}-date {
+      border-radius: 0;
+    }
+
+    &:nth-child(2) {
+      .#{$picker-prefix-cls}-date {
+        padding-left: 4px;
+        border-top-left-radius: $picker-panel-cell-boundary-border-radius;
+        border-bottom-left-radius: $picker-panel-cell-boundary-border-radius;
+
+        .#{$picker-prefix-cls}-date-value {
+          border-top-left-radius: $picker-panel-cell-border-radius;
+          border-bottom-left-radius: $picker-panel-cell-border-radius;
+        }
+      }
+    }
+
+    &:nth-child(8) {
+      .#{$picker-prefix-cls}-date {
+        padding-right: 4px;
+        border-top-right-radius: $picker-panel-cell-boundary-border-radius;
+        border-bottom-right-radius: $picker-panel-cell-boundary-border-radius;
+
+        .#{$picker-prefix-cls}-date-value {
+          border-top-right-radius: $picker-panel-cell-border-radius;
+          border-bottom-right-radius: $picker-panel-cell-border-radius;
+        }
+      }
+    }
+  }
+
+  .#{$picker-prefix-cls}-row-week:hover
+    .#{$picker-prefix-cls}-cell:not(.#{$picker-prefix-cls}-cell-week):not(
+      .#{$picker-prefix-cls}-cell-selected
+    ):not(.#{$picker-prefix-cls}-cell-range-start):not(.#{$picker-prefix-cls}-cell-range-end) {
+    .#{$picker-prefix-cls}-date-value {
+      background-color: $picker-panel-color-bg-cell_hover;
+    }
+  }
+}

package/es/date-picker/style/year.scss

@@ -0,0 +1,12 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+$picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');
+
+@use '@components/date-picker/style/token.scss' as *;
+
+$year-panel-prefix-cls: string.unquote('#{theme.$prefix}-panel-year');
+
+.#{$year-panel-prefix-cls} {
+  box-sizing: border-box;
+  width: $picker-panel-year-width;
+}

package/es/descriptions/style/index.css

@@ -29,9 +29,7 @@
   font-size: 16px;
   line-height: 1.5715;
 }
-.sd-descriptions-item,
-.sd-descriptions-item-label,
-.sd-descriptions-item-value {
+.sd-descriptions-item, .sd-descriptions-item-label, .sd-descriptions-item-value {
   box-sizing: border-box;
   font-size: 14px;
   line-height: 1.5715;
@@ -54,8 +52,7 @@
   white-space: pre-wrap;
   word-break: break-word;
 }
-.sd-descriptions-item-label-inline,
-.sd-descriptions-item-value-inline {
+.sd-descriptions-item-label-inline, .sd-descriptions-item-value-inline {
   box-sizing: border-box;
   font-size: 14px;
   line-height: 1.5715;
@@ -73,8 +70,7 @@
 .sd-descriptions-layout-inline-horizontal .sd-descriptions-item-label-inline {
   margin-right: 4px;
 }
-.sd-descriptions-layout-inline-horizontal .sd-descriptions-item-label-inline,
-.sd-descriptions-layout-inline-horizontal .sd-descriptions-item-value-inline {
+.sd-descriptions-layout-inline-horizontal .sd-descriptions-item-label-inline, .sd-descriptions-layout-inline-horizontal .sd-descriptions-item-value-inline {
   display: inline-block;
   margin-bottom: 0;
 }
@@ -89,9 +85,7 @@
 .sd-descriptions-border .sd-descriptions-row:not(:last-child) {
   border-bottom: 1px solid var(--color-neutral-3);
 }
-.sd-descriptions-border .sd-descriptions-item,
-.sd-descriptions-border .sd-descriptions-item-label-block,
-.sd-descriptions-border .sd-descriptions-item-value-block {
+.sd-descriptions-border .sd-descriptions-item, .sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-border .sd-descriptions-item-value-block {
   padding: 7px 20px;
   border-right: 1px solid var(--color-neutral-3);
 }
@@ -113,14 +107,12 @@
 .sd-descriptions-size-mini .sd-descriptions-title {
   margin-bottom: 6px;
 }
-.sd-descriptions-size-mini .sd-descriptions-item-label-block,
-.sd-descriptions-size-mini .sd-descriptions-item-value-block {
+.sd-descriptions-size-mini .sd-descriptions-item-label-block, .sd-descriptions-size-mini .sd-descriptions-item-value-block {
   padding-right: 20px;
   padding-bottom: 2px;
   font-size: 12px;
 }
-.sd-descriptions-size-mini.sd-descriptions-border .sd-descriptions-item-label-block,
-.sd-descriptions-size-mini.sd-descriptions-border .sd-descriptions-item-value-block {
+.sd-descriptions-size-mini.sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-size-mini.sd-descriptions-border .sd-descriptions-item-value-block {
   padding: 3px 20px;
 }
 .sd-descriptions-size-mini.sd-descriptions-border.sd-descriptions-layout-inline-vertical .sd-descriptions-item {
@@ -129,14 +121,12 @@
 .sd-descriptions-size-small .sd-descriptions-title {
   margin-bottom: 8px;
 }
-.sd-descriptions-size-small .sd-descriptions-item-label-block,
-.sd-descriptions-size-small .sd-descriptions-item-value-block {
+.sd-descriptions-size-small .sd-descriptions-item-label-block, .sd-descriptions-size-small .sd-descriptions-item-value-block {
   padding-right: 20px;
   padding-bottom: 4px;
   font-size: 14px;
 }
-.sd-descriptions-size-small.sd-descriptions-border .sd-descriptions-item-label-block,
-.sd-descriptions-size-small.sd-descriptions-border .sd-descriptions-item-value-block {
+.sd-descriptions-size-small.sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-size-small.sd-descriptions-border .sd-descriptions-item-value-block {
   padding: 3px 20px;
 }
 .sd-descriptions-size-small.sd-descriptions-border.sd-descriptions-layout-inline-vertical .sd-descriptions-item {
@@ -145,14 +135,12 @@
 .sd-descriptions-size-medium .sd-descriptions-title {
   margin-bottom: 12px;
 }
-.sd-descriptions-size-medium .sd-descriptions-item-label-block,
-.sd-descriptions-size-medium .sd-descriptions-item-value-block {
+.sd-descriptions-size-medium .sd-descriptions-item-label-block, .sd-descriptions-size-medium .sd-descriptions-item-value-block {
   padding-right: 20px;
   padding-bottom: 8px;
   font-size: 14px;
 }
-.sd-descriptions-size-medium.sd-descriptions-border .sd-descriptions-item-label-block,
-.sd-descriptions-size-medium.sd-descriptions-border .sd-descriptions-item-value-block {
+.sd-descriptions-size-medium.sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-size-medium.sd-descriptions-border .sd-descriptions-item-value-block {
   padding: 5px 20px;
 }
 .sd-descriptions-size-medium.sd-descriptions-border.sd-descriptions-layout-inline-vertical .sd-descriptions-item {
@@ -161,16 +149,14 @@
 .sd-descriptions-size-large .sd-descriptions-title {
   margin-bottom: 20px;
 }
-.sd-descriptions-size-large .sd-descriptions-item-label-block,
-.sd-descriptions-size-large .sd-descriptions-item-value-block {
+.sd-descriptions-size-large .sd-descriptions-item-label-block, .sd-descriptions-size-large .sd-descriptions-item-value-block {
   padding-right: 20px;
   padding-bottom: 16px;
   font-size: 14px;
 }
-.sd-descriptions-size-large.sd-descriptions-border .sd-descriptions-item-label-block,
-.sd-descriptions-size-large.sd-descriptions-border .sd-descriptions-item-value-block {
+.sd-descriptions-size-large.sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-size-large.sd-descriptions-border .sd-descriptions-item-value-block {
   padding: 9px 20px;
 }
 .sd-descriptions-size-large.sd-descriptions-border.sd-descriptions-layout-inline-vertical .sd-descriptions-item {
   padding: 14px 20px;
-}
+}

package/es/descriptions/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';