@sdata/web-vue 1.6.0 → 1.7.0

package/es/notification/style/index.less

@@ -1,245 +0,0 @@
-@import url('../../style/mixins/index.less');
-@import url('./token.less');
-
-@notification-prefix-cls: ~'@{prefix}-notification';
-
-.@{notification-prefix-cls}-list {
-  position: fixed;
-  z-index: @z-index-notification;
-  margin: 0;
-  padding-left: 0;
-
-  &-top-left {
-    top: @notification-wrapper-margin-top;
-    left: @notification-wrapper-margin-left;
-  }
-
-  &-top-right {
-    top: @notification-wrapper-margin-top;
-    right: @notification-wrapper-margin-right;
-
-    .@{notification-prefix-cls} {
-      margin-left: auto;
-    }
-  }
-
-  &-bottom-left {
-    bottom: @notification-wrapper-margin-bottom;
-    left: @notification-wrapper-margin-left;
-  }
-
-  &-bottom-right {
-    right: @notification-wrapper-margin-right;
-    bottom: @notification-wrapper-margin-bottom;
-
-    .@{notification-prefix-cls} {
-      margin-left: auto;
-    }
-  }
-}
-
-.@{notification-prefix-cls} {
-  position: relative;
-  display: flex;
-  box-sizing: border-box;
-  width: @notification-width + @notification-padding-right + @notification-padding-left;
-  padding: @notification-padding-top @notification-padding-right @notification-padding-bottom
-    @notification-padding-left;
-  overflow: hidden;
-  background-color: @notification-normal-color-bg;
-  border: @notification-border-width @notification-border-style @notification-normal-color-border;
-  border-radius: @notification-border-radius;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-  opacity: 1;
-  transition: opacity @transition-duration-2 @transition-timing-function-linear;
-
-  &:not(:last-child) {
-    margin-bottom: @notification-margin-bottom;
-  }
-
-  &-icon {
-    display: flex;
-    align-items: center;
-    font-size: @notification-font-size-icon;
-  }
-
-  &-info {
-    background-color: @notification-info-color-bg;
-    border-color: @notification-info-color-border;
-  }
-
-  &-info &-icon {
-    color: @notification-info-color-icon;
-  }
-
-  &-success {
-    background-color: @notification-success-color-bg;
-    border-color: @notification-success-color-border;
-  }
-
-  &-success &-icon {
-    color: @notification-success-color-icon;
-  }
-
-  &-warning {
-    background-color: @notification-warning-color-bg;
-    border-color: @notification-warning-color-border;
-  }
-
-  &-warning &-icon {
-    color: @notification-warning-color-icon;
-  }
-
-  &-error {
-    background-color: @notification-error-color-bg;
-    border-color: @notification-error-color-border;
-  }
-
-  &-error &-icon {
-    color: @notification-error-color-icon;
-  }
-
-  &-left {
-    padding-right: @notification-icon-margin-right;
-  }
-
-  &-right {
-    flex: 1;
-    word-break: break-word;
-  }
-
-  &-title {
-    color: @notification-normal-color-text-title;
-    font-weight: @font-weight-500;
-    font-size: @notification-font-size-title;
-  }
-
-  &-title + &-content {
-    margin-top: @notification-title-margin-bottom;
-  }
-
-  &-content {
-    color: @notification-normal-color-text-content;
-    font-size: @notification-font-size-content;
-  }
-
-  &-info &-title {
-    color: @notification-info-color-text-title;
-  }
-
-  &-info &-content {
-    color: @notification-info-color-text-content;
-  }
-
-  &-success &-title {
-    color: @notification-success-color-text-title;
-  }
-
-  &-success &-content {
-    color: @notification-success-color-text-content;
-  }
-
-  &-warning &-title {
-    color: @notification-warning-color-text-title;
-  }
-
-  &-warning &-content {
-    color: @notification-warning-color-text-content;
-  }
-
-  &-error &-title {
-    color: @notification-error-color-text-title;
-  }
-
-  &-error &-content {
-    color: @notification-error-color-text-content;
-  }
-
-  &-footer {
-    margin-top: @notification-btn-wrapper-margin-top;
-    text-align: right;
-  }
-
-  &-close-btn {
-    position: absolute;
-    top: @notification-close-icon-top;
-    right: @notification-close-icon-right;
-    color: @notification-color-close-icon;
-    font-size: @notification-close-icon-font-size;
-    cursor: pointer;
-
-    > svg {
-      position: relative;
-    }
-  }
-
-  .icon-hover(
-    @notification-prefix-cls,
-    @notification-close-icon-font-size,
-    @notification-close-icon-font-size + 8px
-  );
-}
-
-.slide-left-notification-enter-from,
-.slide-left-notification-appear-from {
-  transform: translateX(-100%);
-}
-
-.slide-left-notification-enter-to,
-.slide-left-notification-appear-to {
-  transform: translateX(0);
-}
-
-.slide-left-notification-enter-active,
-.slide-left-notification-appear-active {
-  transition: transform @transition-duration-4 @transition-timing-function-overshoot;
-}
-
-.slide-left-notification-leave-from {
-  opacity: 1;
-}
-
-.slide-left-notification-leave-to {
-  height: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  opacity: 0;
-}
-
-.slide-left-notification-leave-active {
-  transition: all @transition-duration-3 @transition-timing-function-standard;
-}
-
-.slide-right-notification-enter-from,
-.slide-right-notification-appear-from {
-  transform: translateX(100%);
-}
-
-.slide-right-notification-enter-to,
-.slide-right-notification-appear-to {
-  transform: translateX(0);
-}
-
-.slide-right-notification-enter-active,
-.slide-right-notification-appear-active {
-  transition: transform @transition-duration-4 @transition-timing-function-overshoot;
-}
-
-.slide-right-notification-leave-from {
-  opacity: 1;
-}
-
-.slide-right-notification-leave-to {
-  height: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  opacity: 0;
-}
-
-.slide-right-notification-leave-active {
-  transition: all @transition-duration-3 @transition-timing-function-standard;
-}

package/es/notification/style/token.less

@@ -1,97 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@notification-wrapper-margin-top: @spacing-8;
-
-@notification-wrapper-margin-bottom: @spacing-8;
-
-@notification-wrapper-margin-left: @spacing-8;
-
-@notification-wrapper-margin-right: @spacing-8;
-
-@notification-border-radius: @radius-medium;
-
-@notification-margin-bottom: @spacing-8;
-
-@notification-width: 300px;
-
-@notification-padding-top: @spacing-8;
-
-@notification-padding-bottom: @spacing-8;
-
-@notification-padding-left: @spacing-8;
-
-@notification-padding-right: @spacing-8;
-
-@notification-font-size-icon: 24px;
-
-@notification-font-size-title: @font-size-title-1;
-
-@notification-font-size-content: @font-size-body-3;
-
-@notification-icon-margin-right: @spacing-7;
-
-@notification-title-margin-bottom: @spacing-2;
-
-@notification-btn-wrapper-margin-top: @spacing-7;
-
-@notification-border-width: 1px;
-
-@notification-border-style: solid;
-
-@notification-color-close-icon: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-close-icon-font-size: 12px;
-
-@notification-close-icon-top: @spacing-6;
-
-@notification-close-icon-right: @spacing-6;
-
-@notification-normal-color-bg: var(~'@{sd-cssvars-prefix}-color-bg-popup');
-
-@notification-normal-color-icon: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-normal-color-text-title: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-normal-color-text-content: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-normal-color-border: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@notification-info-color-bg: var(~'@{sd-cssvars-prefix}-color-bg-popup');
-
-@notification-info-color-icon: @color-primary-6;
-
-@notification-info-color-text-title: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-info-color-text-content: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-info-color-border: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@notification-success-color-bg: var(~'@{sd-cssvars-prefix}-color-bg-popup');
-
-@notification-success-color-icon: @color-success-6;
-
-@notification-success-color-text-title: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-success-color-text-content: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-success-color-border: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@notification-warning-color-bg: var(~'@{sd-cssvars-prefix}-color-bg-popup');
-
-@notification-warning-color-icon: @color-warning-6;
-
-@notification-warning-color-text-title: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-warning-color-text-content: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-warning-color-border: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@notification-error-color-bg: var(~'@{sd-cssvars-prefix}-color-bg-popup');
-
-@notification-error-color-icon: @color-danger-6;
-
-@notification-error-color-text-title: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-error-color-text-content: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@notification-error-color-border: var(~'@{sd-cssvars-prefix}-color-neutral-3');

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

@@ -1,123 +0,0 @@
-@import url('../../style/mixins/index.less');
-@import url('./token.less');
-
-@page-header-prefix-cls: ~'@{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 / 2) - (@page-header-size-back-icon-bg_hover / 2);
-      padding-left: (@page-header-size-back-icon-bg_hover / 2) - (@page-header-size-back-icon / 2);
-    }
-  }
-
-  &-extra {
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .icon-hover(@page-header-prefix-cls, @page-header-size-back-icon, @page-header-size-back-icon-bg_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 {
-    .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 {
-    .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.less

@@ -1,53 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@page-header-padding-left: @spacing-9;
-
-@page-header-padding-right: @spacing-8;
-
-@page-header-padding-vertical: @spacing-7;
-
-@page-header-padding-vertical_breadcrumb: @spacing-6;
-
-@page-header-color-back-icon: var(~'@{sd-cssvars-prefix}-color-text-2');
-
-@page-header-size-back-icon: @font-size-body-3;
-
-@page-header-margin-back-icon-right: @spacing-6;
-
-@page-header-line-height: @size-7;
-
-@page-header-color-title-text: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@page-header-weight-title-text: 600;
-
-@page-header-color-back-icon-bg_hover: var(~'@{sd-cssvars-prefix}-color-fill-2');
-
-@page-header-size-back-icon-bg_hover: 30px;
-
-@page-header-size-title-text: @font-size-title-2;
-
-@page-header-color-divider-bg: var(~'@{sd-cssvars-prefix}-color-fill-3');
-
-@page-header-size-divider-height: @size-4;
-
-@page-header-size-divider-width: 1px;
-
-@page-header-margin-divider-left: @spacing-6;
-
-@page-header-margin-divider-right: @spacing-6;
-
-@page-header-color-sub-title-text: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@page-header-size-sub-title-text: @font-size-body-3;
-
-@page-header-color-header-border: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@page-header-border-header-width: @border-1;
-
-@page-header-border-header-style: @border-solid;
-
-@page-header-padding-content-vertical: @spacing-8;
-
-@page-header-padding-content-horizontal: @spacing-10;
-
-@page-header-margin-breadcrumb-bottom: @spacing-2;