@sdata/web-vue 1.5.0 → 1.7.0

package/es/notification/style/token.scss

@@ -0,0 +1,133 @@
+@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 *;
+
+$notification-wrapper-margin-top: global.$spacing-8;
+
+$notification-wrapper-margin-bottom: global.$spacing-8;
+
+$notification-wrapper-margin-left: global.$spacing-8;
+
+$notification-wrapper-margin-right: global.$spacing-8;
+
+$notification-border-radius: global.$radius-medium;
+
+$notification-margin-bottom: global.$spacing-8;
+
+$notification-width: 300px;
+
+$notification-padding-top: global.$spacing-8;
+
+$notification-padding-bottom: global.$spacing-8;
+
+$notification-padding-left: global.$spacing-8;
+
+$notification-padding-right: global.$spacing-8;
+
+$notification-font-size-icon: 24px;
+
+$notification-font-size-title: global.$font-size-title-1;
+
+$notification-font-size-content: global.$font-size-body-3;
+
+$notification-icon-margin-right: global.$spacing-7;
+
+$notification-title-margin-bottom: global.$spacing-2;
+
+$notification-btn-wrapper-margin-top: global.$spacing-7;
+
+$notification-border-width: 1px;
+
+$notification-border-style: solid;
+
+$notification-color-close-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$notification-close-icon-font-size: 12px;
+
+$notification-close-icon-top: global.$spacing-6;
+
+$notification-close-icon-right: global.$spacing-6;
+
+$notification-normal-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$notification-normal-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$notification-normal-color-text-title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-normal-color-text-content: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-normal-color-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+
+$notification-info-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$notification-info-color-icon: global.$color-primary-6;
+
+$notification-info-color-text-title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-info-color-text-content: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-info-color-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+
+$notification-success-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$notification-success-color-icon: global.$color-success-6;
+
+$notification-success-color-text-title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-success-color-text-content: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-success-color-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+
+$notification-warning-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$notification-warning-color-icon: global.$color-warning-6;
+
+$notification-warning-color-text-title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-warning-color-text-content: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-warning-color-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+
+$notification-error-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$notification-error-color-icon: global.$color-danger-6;
+
+$notification-error-color-text-title: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-error-color-text-content: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+
+$notification-error-color-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);

package/es/overflow-list/style/index.css

@@ -27,4 +27,4 @@
   flex: 1;
   min-width: 0;
   height: 1px;
-}
+}

package/es/overflow-list/style/index.d.ts

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

package/es/overflow-list/style/index.js

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

package/es/overflow-list/style/{index.less → index.scss}

@@ -1,8 +1,9 @@
-@import url('../../style/theme/index.less');
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
 
-@overflow-prefix-cls: ~'@{prefix}-overflow-list';
+$overflow-prefix-cls: string.unquote('#{$prefix}-overflow-list');
 
-.@{overflow-prefix-cls} {
+.#{$overflow-prefix-cls} {
   display: flex;
   align-items: center;
   justify-content: flex-start;

package/es/page-header/style/index.css

@@ -109,4 +109,4 @@
 }
 .sd-page-header-wrapper .sd-page-header-header .sd-page-header-head-extra {
   margin-top: 4px;
-}
+}

package/es/page-header/style/index.d.ts

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

package/es/page-header/style/index.js

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

package/es/page-header/style/index.scss

@@ -0,0 +1,128 @@
+@use '@style/mixins/icon-hover.scss' as icon-hover;
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@style/mixins/index.scss' as *;
+@use '@components/page-header/style/token.scss' as *;
+
+$page-header-prefix-cls: string.unquote('#{theme.$prefix}-page-header');
+
+.#{$page-header-prefix-cls} {
+  padding: $page-header-padding-vertical 0;
+
+  &-breadcrumb + &-header {
+    margin-top: $page-header-margin-breadcrumb-bottom;
+  }
+
+  &-wrapper {
+    padding-right: $page-header-padding-right;
+    padding-left: $page-header-padding-left;
+  }
+
+  // 头部
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    line-height: $page-header-line-height;
+
+    &-left {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-main {
+    display: flex;
+    align-items: center;
+    // 最小高度避免按钮hover下背景被hidden
+    min-height: $page-header-size-back-icon-bg_hover;
+
+    // 带有返回按钮时，避免 overflow:hidden 导致返回按钮hover状态背景色显示不全
+    &-with-back {
+      margin-left: ($page-header-size-back-icon * 0.5) -
+        ($page-header-size-back-icon-bg_hover * 0.5);
+      padding-left: ($page-header-size-back-icon-bg_hover * 0.5) -
+        ($page-header-size-back-icon * 0.5);
+    }
+  }
+
+  &-extra {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  @include icon-hover.icon-hover(
+    $page-header-prefix-cls,
+    $page-header-size-back-icon,
+    $page-header-size-back-icon-bg_hover
+  );
+  @include icon-hover.icon-hover-bg($page-header-prefix-cls, $page-header-color-back-icon-bg_hover);
+
+  &-back-btn {
+    margin-right: $page-header-margin-back-icon-right;
+    color: $page-header-color-back-icon;
+    font-size: $page-header-size-back-icon;
+
+    &-icon {
+      position: relative;
+    }
+  }
+
+  &-title {
+    @include text-ellipsis();
+
+    color: $page-header-color-title-text;
+    font-weight: $page-header-weight-title-text;
+    font-size: $page-header-size-title-text;
+  }
+
+  &-divider {
+    width: $page-header-size-divider-width;
+    height: $page-header-size-divider-height;
+    margin-right: $page-header-margin-divider-right;
+    margin-left: $page-header-margin-divider-left;
+    background-color: $page-header-color-divider-bg;
+  }
+
+  &-subtitle {
+    @include text-ellipsis();
+
+    color: $page-header-color-sub-title-text;
+    font-size: $page-header-size-sub-title-text;
+  }
+
+  // 内容区
+  &-content {
+    padding: $page-header-padding-content-vertical $page-header-padding-content-horizontal;
+    border-top: $page-header-border-header-width $page-header-border-header-style
+      $page-header-color-header-border;
+  }
+
+  &-footer {
+    padding: $page-header-padding-vertical $page-header-padding-right 0 $page-header-padding-left;
+  }
+
+  &-with-breadcrumb {
+    padding: $page-header-padding-vertical_breadcrumb 0;
+
+    .#{$page-header-prefix-cls}-footer {
+      padding-top: $page-header-padding-vertical_breadcrumb;
+    }
+  }
+
+  &-with-content &-wrapper {
+    padding-bottom: $page-header-padding-vertical_breadcrumb;
+  }
+
+  &-with-footer {
+    padding-bottom: 0;
+  }
+
+  &-wrapper &-header {
+    flex-wrap: wrap;
+
+    .#{$page-header-prefix-cls}-head-extra {
+      margin-top: $page-header-margin-breadcrumb-bottom;
+    }
+  }
+}

package/es/page-header/style/token.scss

@@ -0,0 +1,63 @@
+@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 *;
+
+$page-header-padding-left: global.$spacing-9;
+
+$page-header-padding-right: global.$spacing-8;
+
+$page-header-padding-vertical: global.$spacing-7;
+
+$page-header-padding-vertical_breadcrumb: global.$spacing-6;
+
+$page-header-color-back-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$page-header-size-back-icon: global.$font-size-body-3;
+
+$page-header-margin-back-icon-right: global.$spacing-6;
+
+$page-header-line-height: global.$size-7;
+
+$page-header-color-title-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$page-header-weight-title-text: 600;
+
+$page-header-color-back-icon-bg_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+
+$page-header-size-back-icon-bg_hover: 30px;
+
+$page-header-size-title-text: global.$font-size-title-2;
+
+$page-header-color-divider-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$page-header-size-divider-height: global.$size-4;
+
+$page-header-size-divider-width: 1px;
+
+$page-header-margin-divider-left: global.$spacing-6;
+
+$page-header-margin-divider-right: global.$spacing-6;
+
+$page-header-color-sub-title-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$page-header-size-sub-title-text: global.$font-size-body-3;
+
+$page-header-color-header-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+
+$page-header-border-header-width: global.$border-1;
+
+$page-header-border-header-style: global.$border-solid;
+
+$page-header-padding-content-vertical: global.$spacing-8;
+
+$page-header-padding-content-horizontal: global.$spacing-10;
+
+$page-header-margin-breadcrumb-bottom: global.$spacing-2;

package/es/pagination/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -19,7 +20,6 @@
   display: flex;
   align-items: center;
   font-size: 14px;
-  /*** 快速跳转 ***/
 }
 .sd-pagination-list {
   display: inline-block;
@@ -47,8 +47,7 @@
   font-size: 14px;
   line-height: 32px;
 }
-.sd-pagination-item-previous,
-.sd-pagination-item-next {
+.sd-pagination-item-previous, .sd-pagination-item-next {
   font-size: 12px;
 }
 .sd-pagination-item:hover {
@@ -56,15 +55,13 @@
   background-color: var(--color-fill-1);
   border-color: transparent;
 }
-.sd-pagination-item-active,
-.sd-pagination-item-active:hover {
+.sd-pagination-item-active, .sd-pagination-item-active:hover {
   color: rgb(var(--primary-6));
   background-color: var(--color-primary-light-1);
   border-color: transparent;
   transition: color 0.2s cubic-bezier(0, 0, 1, 1), background-color 0.2s cubic-bezier(0, 0, 1, 1);
 }
-.sd-pagination-item-disabled,
-.sd-pagination-item-disabled:hover {
+.sd-pagination-item-disabled, .sd-pagination-item-disabled:hover {
   color: var(--color-text-4);
   background-color: transparent;
   border-color: transparent;
@@ -73,32 +70,31 @@
 .sd-pagination-item:not(:last-child) {
   margin-right: 8px;
 }
-.sd-pagination-item-previous,
-.sd-pagination-item-next {
+.sd-pagination-item-previous, .sd-pagination-item-next {
   color: var(--color-text-2);
   font-size: 12px;
   background-color: transparent;
 }
-.sd-pagination-item-previous:not(.sd-pagination-item-disabled):hover,
-.sd-pagination-item-next:not(.sd-pagination-item-disabled):hover {
+.sd-pagination-item-previous:not(.sd-pagination-item-disabled):hover, .sd-pagination-item-next:not(.sd-pagination-item-disabled):hover {
   color: rgb(var(--primary-6));
   background-color: var(--color-fill-1);
 }
-.sd-pagination-item-previous::after,
-.sd-pagination-item-next::after {
+.sd-pagination-item-previous::after, .sd-pagination-item-next::after {
   display: inline-block;
   font-size: 0;
   vertical-align: middle;
-  content: '.';
+  content: ".";
 }
-.sd-pagination .sd-pagination-item-previous.sd-pagination-item-disabled,
-.sd-pagination .sd-pagination-item-next.sd-pagination-item-disabled {
+.sd-pagination .sd-pagination-item-previous.sd-pagination-item-disabled, .sd-pagination .sd-pagination-item-next.sd-pagination-item-disabled {
   color: var(--color-text-4);
   background-color: transparent;
 }
 .sd-pagination-item-jumper {
   font-size: 16px;
 }
+.sd-pagination {
+  /*** 快速跳转 ***/
+}
 .sd-pagination-jumper {
   display: flex;
   align-items: center;
@@ -107,9 +103,7 @@
 .sd-pagination-jumper > span {
   font-size: 14px;
 }
-.sd-pagination-jumper-text-goto,
-.sd-pagination-jumper-prepend,
-.sd-pagination-jumper-append {
+.sd-pagination-jumper-text-goto, .sd-pagination-jumper-prepend, .sd-pagination-jumper-append {
   color: var(--color-text-3);
   white-space: nowrap;
 }
@@ -149,6 +143,7 @@
   margin-right: 8px;
   color: var(--color-text-1);
   font-size: 14px;
+  font-size: 14px;
   line-height: 32px;
   white-space: nowrap;
 }
@@ -176,26 +171,22 @@
   width: 40px;
   margin-left: 0;
 }
-.sd-pagination-simple .sd-pagination-item-previous,
-.sd-pagination-simple .sd-pagination-item-next {
+.sd-pagination-simple .sd-pagination-item-previous, .sd-pagination-simple .sd-pagination-item-next {
   color: var(--color-text-2);
   background-color: transparent;
 }
-.sd-pagination-simple .sd-pagination-item-previous:not(.sd-pagination-item-disabled):hover,
-.sd-pagination-simple .sd-pagination-item-next:not(.sd-pagination-item-disabled):hover {
+.sd-pagination-simple .sd-pagination-item-previous:not(.sd-pagination-item-disabled):hover, .sd-pagination-simple .sd-pagination-item-next:not(.sd-pagination-item-disabled):hover {
   color: rgb(var(--primary-6));
   background-color: var(--color-fill-1);
 }
-.sd-pagination-simple .sd-pagination-item-previous.sd-pagination-item-disabled,
-.sd-pagination-simple .sd-pagination-item-next.sd-pagination-item-disabled {
+.sd-pagination-simple .sd-pagination-item-previous.sd-pagination-item-disabled, .sd-pagination-simple .sd-pagination-item-next.sd-pagination-item-disabled {
   color: var(--color-text-4);
   background-color: transparent;
 }
 .sd-pagination-disabled {
   cursor: not-allowed;
 }
-.sd-pagination-disabled .sd-pagination-item,
-.sd-pagination-disabled .sd-pagination-item:not(.sd-pagination-item-disabled, .sd-pagination-item-active):hover {
+.sd-pagination-disabled .sd-pagination-item, .sd-pagination-disabled .sd-pagination-item:not(.sd-pagination-item-disabled, .sd-pagination-item-active):hover {
   color: var(--color-text-4);
   background-color: transparent;
   border-color: transparent;
@@ -212,8 +203,7 @@
   font-size: 12px;
   line-height: 24px;
 }
-.sd-pagination-size-mini .sd-pagination-item-previous,
-.sd-pagination-size-mini .sd-pagination-item-next {
+.sd-pagination-size-mini .sd-pagination-item-previous, .sd-pagination-size-mini .sd-pagination-item-next {
   font-size: 12px;
 }
 .sd-pagination-size-mini .sd-pagination-total {
@@ -234,8 +224,7 @@
   font-size: 14px;
   line-height: 28px;
 }
-.sd-pagination-size-small .sd-pagination-item-previous,
-.sd-pagination-size-small .sd-pagination-item-next {
+.sd-pagination-size-small .sd-pagination-item-previous, .sd-pagination-size-small .sd-pagination-item-next {
   font-size: 12px;
 }
 .sd-pagination-size-small .sd-pagination-total {
@@ -256,8 +245,7 @@
   font-size: 14px;
   line-height: 36px;
 }
-.sd-pagination-size-large .sd-pagination-item-previous,
-.sd-pagination-size-large .sd-pagination-item-next {
+.sd-pagination-size-large .sd-pagination-item-previous, .sd-pagination-size-large .sd-pagination-item-next {
   font-size: 14px;
 }
 .sd-pagination-size-large .sd-pagination-total {
@@ -271,4 +259,4 @@
 }
 .sd-pagination-size-large .sd-pagination-jumper > span {
   font-size: 14px;
-}
+}

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

@@ -1,4 +1,4 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../input/style';
 import '../../select/style';
-import './index.less';
+import './index.scss';

package/es/pagination/style/index.js

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