@julingbase/jly-arco-design 0.0.2 → 0.0.3

package/lib/menu/style/token.less

@@ -1,117 +1,117 @@
-@import '../../style/theme/index.less';
-
-@menu-font-size: 14px;
-@menu-line-height: @line-height-base;
-@menu-border-radius: @radius-small;
-@menu-font-weight-item-selected: @font-weight-500;
-@menu-color-label-item-selected: @color-primary-6;
-@menu-height-label-item-selected: 3px;
-@menu-margin-left-item-suffix-icon: @spacing-3;
-@menu-margin-right-item-prefix-icon: @spacing-7;
-@menu-horizontal-margin-right-item-prefix-icon: @spacing-7;
-
-// vertical 模式下 item 之间的间隙
-@menu-item-gap: @spacing-2;
-// vertical 下嵌套子菜单的层级缩进
-@menu-item-indent-spacing: @spacing-8;
-
-// 折叠按钮
-@menu-width-collapse-button: @size-6;
-@menu-height-collapse-button: @size-6;
-@menu-border-radius-collapse-button: @radius-small;
-
-/**********************************************
- * theme: light / dark
- * status: default / disabled / selected / hover
- **********************************************/
-@menu-light-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-light-bg');
-@menu-light-color-bg-item_default: @menu-light-color-bg;
-@menu-light-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@menu-light-color-bg-item_selected: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@menu-light-color-bg-item_disabled: @menu-light-color-bg;
-@menu-light-color-item_default: var(~'@{arco-cssvars-prefix}-color-text-2');
-@menu-light-color-item_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
-@menu-light-color-item_selected: @color-primary-6;
-@menu-light-color-submenu_selected: @color-primary-6;
-@menu-light-color-bg-submenu_selected_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@menu-light-color-item_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-@menu-light-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-3');
-@menu-light-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-3');
-@menu-light-color-icon_selected: @color-primary-6;
-@menu-light-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-@menu-light-color-group-title: var(~'@{arco-cssvars-prefix}-color-text-3');
-
-@menu-dark-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');
-@menu-dark-color-bg-item_default: @menu-dark-color-bg;
-@menu-dark-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
-@menu-dark-color-bg-item_selected: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
-@menu-dark-color-bg-item_disabled: @menu-dark-color-bg;
-@menu-dark-color-submenu_selected: @color-primary-6;
-@menu-dark-color-bg-submenu_selected_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
-@menu-dark-color-item_default: var(~'@{arco-cssvars-prefix}-color-text-4');
-@menu-dark-color-item_hover: var(~'@{arco-cssvars-prefix}-color-text-4');
-@menu-dark-color-item_selected: var(~'@{arco-cssvars-prefix}-color-white');
-@menu-dark-color-item_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');
-@menu-dark-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-3');
-@menu-dark-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-3');
-@menu-dark-color-icon_selected: var(~'@{arco-cssvars-prefix}-color-white');
-@menu-dark-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');
-@menu-dark-color-group-title: var(~'@{arco-cssvars-prefix}-color-text-3');
-
-// popup sub-menu
-@menu-color-border-popup: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-
-// collapse button style
-@menu-light-color-bg-button: var(~'@{arco-cssvars-prefix}-color-fill-1');
-@menu-light-color-bg-button_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@menu-light-color-button: var(~'@{arco-cssvars-prefix}-color-text-3');
-@menu-dark-color-bg-button: @color-primary-6;
-@menu-dark-color-bg-button_hover: @color-primary-7;
-@menu-dark-color-button: var(~'@{arco-cssvars-prefix}-color-white');
-
-/**********************************************
- * horizontal / vertical
- **********************************************/
-@menu-horizontal-padding-vertical: 14px;
-@menu-horizontal-padding-horizontal: @spacing-8;
-@menu-horizontal-item-gap: @spacing-6;
-@menu-horizontal-item-height: 30px;
-@menu-horizontal-item-padding-horizontal: @spacing-6;
-
-@menu-vertical-padding-vertical: @spacing-2;
-@menu-vertical-padding-horizontal: @spacing-4;
-@menu-vertical-item-height: 40px;
-@menu-vertical-item-padding-horizontal: @spacing-6;
-
-/************************************************
- * collapse
- ***********************************************/
-@menu-collapse-width: @size-12;
-@menu-collapse-padding-vertical: @spacing-2;
-@menu-collapse-padding-horizontal: @spacing-2;
-
-/************************************************
- * popButton
- ***********************************************/
-@menu-pop-button-size: @size-10;
-@menu-pop-button-margin-bottom: @spacing-7;
-@menu-pop-button-box-shadow: @shadow2-down;
-@menu-pop-button-border-color: @color-transparent;
-
-/**********************************************
- * Theme dark in dropdown
- **********************************************/
-@dropdown-dark-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');
-@dropdown-dark-color-border: @dropdown-dark-color-bg;
-
-@dropdown-dark-option-color-bg_default: @color-transparent;
-@dropdown-dark-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
-@dropdown-dark-option-color-bg_selected: @color-transparent;
-@dropdown-dark-option-color-bg_disabled: @color-transparent;
-
-@dropdown-dark-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-4');
-@dropdown-dark-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-4');
-@dropdown-dark-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-white');
-@dropdown-dark-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');
-
-@dropdown-dark-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');
+@import '../../style/theme/index.less';
+
+@menu-font-size: 14px;
+@menu-line-height: @line-height-base;
+@menu-border-radius: @radius-small;
+@menu-font-weight-item-selected: @font-weight-500;
+@menu-color-label-item-selected: @color-primary-6;
+@menu-height-label-item-selected: 3px;
+@menu-margin-left-item-suffix-icon: @spacing-3;
+@menu-margin-right-item-prefix-icon: @spacing-7;
+@menu-horizontal-margin-right-item-prefix-icon: @spacing-7;
+
+// vertical 模式下 item 之间的间隙
+@menu-item-gap: @spacing-2;
+// vertical 下嵌套子菜单的层级缩进
+@menu-item-indent-spacing: @spacing-8;
+
+// 折叠按钮
+@menu-width-collapse-button: @size-6;
+@menu-height-collapse-button: @size-6;
+@menu-border-radius-collapse-button: @radius-small;
+
+/**********************************************
+ * theme: light / dark
+ * status: default / disabled / selected / hover
+ **********************************************/
+@menu-light-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-light-bg');
+@menu-light-color-bg-item_default: @menu-light-color-bg;
+@menu-light-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@menu-light-color-bg-item_selected: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@menu-light-color-bg-item_disabled: @menu-light-color-bg;
+@menu-light-color-item_default: var(~'@{arco-cssvars-prefix}-color-text-2');
+@menu-light-color-item_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
+@menu-light-color-item_selected: @color-primary-6;
+@menu-light-color-submenu_selected: @color-primary-6;
+@menu-light-color-bg-submenu_selected_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@menu-light-color-item_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@menu-light-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-3');
+@menu-light-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-3');
+@menu-light-color-icon_selected: @color-primary-6;
+@menu-light-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@menu-light-color-group-title: var(~'@{arco-cssvars-prefix}-color-text-3');
+
+@menu-dark-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');
+@menu-dark-color-bg-item_default: @menu-dark-color-bg;
+@menu-dark-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
+@menu-dark-color-bg-item_selected: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
+@menu-dark-color-bg-item_disabled: @menu-dark-color-bg;
+@menu-dark-color-submenu_selected: @color-primary-6;
+@menu-dark-color-bg-submenu_selected_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
+@menu-dark-color-item_default: var(~'@{arco-cssvars-prefix}-color-text-4');
+@menu-dark-color-item_hover: var(~'@{arco-cssvars-prefix}-color-text-4');
+@menu-dark-color-item_selected: var(~'@{arco-cssvars-prefix}-color-white');
+@menu-dark-color-item_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');
+@menu-dark-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-3');
+@menu-dark-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-3');
+@menu-dark-color-icon_selected: var(~'@{arco-cssvars-prefix}-color-white');
+@menu-dark-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');
+@menu-dark-color-group-title: var(~'@{arco-cssvars-prefix}-color-text-3');
+
+// popup sub-menu
+@menu-color-border-popup: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+
+// collapse button style
+@menu-light-color-bg-button: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@menu-light-color-bg-button_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@menu-light-color-button: var(~'@{arco-cssvars-prefix}-color-text-3');
+@menu-dark-color-bg-button: @color-primary-6;
+@menu-dark-color-bg-button_hover: @color-primary-7;
+@menu-dark-color-button: var(~'@{arco-cssvars-prefix}-color-white');
+
+/**********************************************
+ * horizontal / vertical
+ **********************************************/
+@menu-horizontal-padding-vertical: 14px;
+@menu-horizontal-padding-horizontal: @spacing-8;
+@menu-horizontal-item-gap: @spacing-6;
+@menu-horizontal-item-height: 30px;
+@menu-horizontal-item-padding-horizontal: @spacing-6;
+
+@menu-vertical-padding-vertical: @spacing-2;
+@menu-vertical-padding-horizontal: @spacing-4;
+@menu-vertical-item-height: 40px;
+@menu-vertical-item-padding-horizontal: @spacing-6;
+
+/************************************************
+ * collapse
+ ***********************************************/
+@menu-collapse-width: @size-12;
+@menu-collapse-padding-vertical: @spacing-2;
+@menu-collapse-padding-horizontal: @spacing-2;
+
+/************************************************
+ * popButton
+ ***********************************************/
+@menu-pop-button-size: @size-10;
+@menu-pop-button-margin-bottom: @spacing-7;
+@menu-pop-button-box-shadow: @shadow2-down;
+@menu-pop-button-border-color: @color-transparent;
+
+/**********************************************
+ * Theme dark in dropdown
+ **********************************************/
+@dropdown-dark-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');
+@dropdown-dark-color-border: @dropdown-dark-color-bg;
+
+@dropdown-dark-option-color-bg_default: @color-transparent;
+@dropdown-dark-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
+@dropdown-dark-option-color-bg_selected: @color-transparent;
+@dropdown-dark-option-color-bg_disabled: @color-transparent;
+
+@dropdown-dark-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-4');
+@dropdown-dark-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-4');
+@dropdown-dark-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-white');
+@dropdown-dark-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');
+
+@dropdown-dark-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');

package/lib/message/style/index.less

@@ -1,191 +1,191 @@
-@import '../../style/mixins/index.less';
-@import './token.less';
-
-@message-prefix-cls: ~'@{prefix}-message';
-
-.@{message-prefix-cls}-list {
-  position: fixed;
-  z-index: @z-index-message;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  margin: 0;
-  padding: 0 10px;
-  text-align: center;
-  pointer-events: none;
-  left: 0;
-
-  &-top {
-    top: @message-wrapper-margin-top;
-  }
-
-  &-bottom {
-    bottom: @message-wrapper-margin-bottom;
-  }
-}
-
-.@{message-prefix-cls} {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  margin-bottom: @message-margin-bottom;
-  padding: @message-padding-top @message-padding-right @message-padding-bottom
-    @message-padding-left;
-  overflow: hidden;
-  line-height: 1;
-  text-align: center;
-  list-style: none;
-  background-color: @message-normal-color-bg;
-  border: @message-border-width @message-border-style
-    @message-normal-color-border;
-  border-radius: @message-border-radius;
-  box-shadow: @shadow2-down;
-  transition: all @transition-duration-1 @transition-timing-function-linear;
-  pointer-events: auto;
-
-  &-icon {
-    display: inline-block;
-    margin-right: @message-icon-margin-right;
-    color: @message-normal-color-icon;
-    font-size: @message-font-size-icon;
-    vertical-align: middle;
-    animation: ~'@{prefix}-msg-fade' @transition-duration-1 @transition-timing-function-linear,
-      ~'@{prefix}-msg-fade' @transition-duration-4 @transition-timing-function-overshoot;
-  }
-
-  &-content {
-    font-size: @message-font-size-content;
-    color: @message-normal-color-content;
-    vertical-align: middle;
-  }
-
-  &-info {
-    background-color: @message-info-color-bg;
-    border-color: @message-info-color-border;
-  }
-
-  &-info &-icon {
-    color: @message-info-color-icon;
-  }
-
-  &-info &-content {
-    color: @message-info-color-content;
-  }
-
-  &-success {
-    background-color: @message-success-color-bg;
-    border-color: @message-success-color-border;
-  }
-
-  &-success &-icon {
-    color: @message-success-color-icon;
-  }
-
-  &-success &-content {
-    color: @message-success-color-content;
-  }
-
-  &-warning {
-    background-color: @message-warning-color-bg;
-    border-color: @message-warning-color-border;
-  }
-
-  &-warning &-icon {
-    color: @message-warning-color-icon;
-  }
-
-  &-warning &-content {
-    color: @message-warning-color-content;
-  }
-
-  &-error {
-    background-color: @message-error-color-bg;
-    border-color: @message-error-color-border;
-  }
-
-  &-error &-icon {
-    color: @message-error-color-icon;
-  }
-
-  &-error &-content {
-    color: @message-error-color-content;
-  }
-
-  &-loading {
-    background-color: @message-loading-color-bg;
-    border-color: @message-loading-color-border;
-  }
-
-  &-loading &-icon {
-    color: @message-loading-color-icon;
-  }
-
-  &-loading &-content {
-    color: @message-loading-color-content;
-  }
-
-  &-close-btn {
-    margin-left: 8px;
-    color: @message-color-close-icon;
-    font-size: @message-close-icon-font-size;
-  }
-
-  .icon-hover(
-    @message-prefix-cls,
-    @message-close-icon-font-size,
-      @message-close-icon-font-size + 8px
-  );
-}
-
-.fade-message-enter-from,
-.fade-message-appear-from {
-  opacity: 0;
-}
-
-.fade-message-enter-to,
-.fade-message-appear-to {
-  opacity: 1;
-}
-
-.fade-message-enter-active,
-.fade-message-appear-active {
-  transition: opacity @transition-duration-1 @transition-timing-function-linear;
-}
-
-.fade-message-leave-from {
-  opacity: 1;
-}
-
-.fade-message-leave-to {
-  opacity: 0;
-}
-
-.fade-message-leave-active {
-  position: absolute;
-}
-
-.flip-list-move {
-  transition: transform 0.8s ease;
-}
-
-@keyframes ~ '@{prefix}-msg-fade' {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes ~ '@{prefix}-msg-scale' {
-  from {
-    transform: scale(0);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
+@import '../../style/mixins/index.less';
+@import './token.less';
+
+@message-prefix-cls: ~'@{prefix}-message';
+
+.@{message-prefix-cls}-list {
+  position: fixed;
+  z-index: @z-index-message;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0 10px;
+  text-align: center;
+  pointer-events: none;
+  left: 0;
+
+  &-top {
+    top: @message-wrapper-margin-top;
+  }
+
+  &-bottom {
+    bottom: @message-wrapper-margin-bottom;
+  }
+}
+
+.@{message-prefix-cls} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: @message-margin-bottom;
+  padding: @message-padding-top @message-padding-right @message-padding-bottom
+    @message-padding-left;
+  overflow: hidden;
+  line-height: 1;
+  text-align: center;
+  list-style: none;
+  background-color: @message-normal-color-bg;
+  border: @message-border-width @message-border-style
+    @message-normal-color-border;
+  border-radius: @message-border-radius;
+  box-shadow: @shadow2-down;
+  transition: all @transition-duration-1 @transition-timing-function-linear;
+  pointer-events: auto;
+
+  &-icon {
+    display: inline-block;
+    margin-right: @message-icon-margin-right;
+    color: @message-normal-color-icon;
+    font-size: @message-font-size-icon;
+    vertical-align: middle;
+    animation: ~'@{prefix}-msg-fade' @transition-duration-1 @transition-timing-function-linear,
+      ~'@{prefix}-msg-fade' @transition-duration-4 @transition-timing-function-overshoot;
+  }
+
+  &-content {
+    font-size: @message-font-size-content;
+    color: @message-normal-color-content;
+    vertical-align: middle;
+  }
+
+  &-info {
+    background-color: @message-info-color-bg;
+    border-color: @message-info-color-border;
+  }
+
+  &-info &-icon {
+    color: @message-info-color-icon;
+  }
+
+  &-info &-content {
+    color: @message-info-color-content;
+  }
+
+  &-success {
+    background-color: @message-success-color-bg;
+    border-color: @message-success-color-border;
+  }
+
+  &-success &-icon {
+    color: @message-success-color-icon;
+  }
+
+  &-success &-content {
+    color: @message-success-color-content;
+  }
+
+  &-warning {
+    background-color: @message-warning-color-bg;
+    border-color: @message-warning-color-border;
+  }
+
+  &-warning &-icon {
+    color: @message-warning-color-icon;
+  }
+
+  &-warning &-content {
+    color: @message-warning-color-content;
+  }
+
+  &-error {
+    background-color: @message-error-color-bg;
+    border-color: @message-error-color-border;
+  }
+
+  &-error &-icon {
+    color: @message-error-color-icon;
+  }
+
+  &-error &-content {
+    color: @message-error-color-content;
+  }
+
+  &-loading {
+    background-color: @message-loading-color-bg;
+    border-color: @message-loading-color-border;
+  }
+
+  &-loading &-icon {
+    color: @message-loading-color-icon;
+  }
+
+  &-loading &-content {
+    color: @message-loading-color-content;
+  }
+
+  &-close-btn {
+    margin-left: 8px;
+    color: @message-color-close-icon;
+    font-size: @message-close-icon-font-size;
+  }
+
+  .icon-hover(
+    @message-prefix-cls,
+    @message-close-icon-font-size,
+      @message-close-icon-font-size + 8px
+  );
+}
+
+.fade-message-enter-from,
+.fade-message-appear-from {
+  opacity: 0;
+}
+
+.fade-message-enter-to,
+.fade-message-appear-to {
+  opacity: 1;
+}
+
+.fade-message-enter-active,
+.fade-message-appear-active {
+  transition: opacity @transition-duration-1 @transition-timing-function-linear;
+}
+
+.fade-message-leave-from {
+  opacity: 1;
+}
+
+.fade-message-leave-to {
+  opacity: 0;
+}
+
+.fade-message-leave-active {
+  position: absolute;
+}
+
+.flip-list-move {
+  transition: transform 0.8s ease;
+}
+
+@keyframes ~ '@{prefix}-msg-fade' {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ~ '@{prefix}-msg-scale' {
+  from {
+    transform: scale(0);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}