@julingbase/jly-arco-design 0.0.2 → 0.0.3

package/es/calendar/style/token.less

@@ -1,62 +1,62 @@
-@import '../../style/theme/index.less';
-
-@calendar-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-
-@calendar-header-padding-horizontal: 24px;
-@calendar-header-padding-vertical: 24px;
-
-@calendar-panel-date-cell-padding-vertical: 4px;
-@calendar-panel-date-cell-circle-height: 24px;
-@calendar-panel-year-cell-padding-vertical: 4px;
-@calendar-panel-year-cell-circle-height: 24px;
-
-@calendar-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
-@calendar-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-5');
-@calendar-color-bg-switch-icon_hover: var(
-  ~'@{arco-cssvars-prefix}-color-fill-3'
-);
-
-@calendar-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
-@calendar-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');
-@calendar-color-cell-text-not-in-view: var(
-  ~'@{arco-cssvars-prefix}-color-text-4'
-);
-@calendar-color-bg-circle_selected: @color-primary-6;
-@calendar-color-bg-cell-in-range: var(
-  ~'@{arco-cssvars-prefix}-color-primary-light-1'
-);
-@calendar-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
-@calendar-color-text-cell-range-boundary: var(
-  ~'@{arco-cssvars-prefix}-color-white'
-);
-@calendar-color-bg-cell-range-boundary: @color-primary-6;
-@calendar-color-bg-cell-hover-in-range: var(
-  ~'@{arco-cssvars-prefix}-color-primary-light-1'
-);
-@calendar-color-text-cell-hover-range-boundary: var(
-  ~'@{arco-cssvars-prefix}-color-text-1'
-);
-@calendar-color-bg-cell-hover-range-boundary: var(
-  ~'@{arco-cssvars-prefix}-color-primary-light-2'
-);
-
-@calendar-panel-color-text-cell_hover: @color-primary-6;
-@calendar-panel-color-bg-cell_hover: var(
-  ~'@{arco-cssvars-prefix}-color-primary-light-1'
-);
-@calendar-panel-color-text-cell_selected: var(
-  ~'@{arco-cssvars-prefix}-color-white'
-);
-@calendar-panel-color-bg-cell_selected: @color-primary-6;
-@calendar-panel-color-current-time-dot: @color-primary-6;
-
-// 不放到风格配置平台
-@calendar-panel-cell-boundary-border-radius: (
-  (
-      @calendar-panel-date-cell-circle-height +
-        @calendar-panel-date-cell-padding-vertical * 2
-    ) / 2
-);
-@calendar-color-box-shadow: var(
-  ~'@{arco-cssvars-prefix}-color-primary-light-3'
-);
+@import '../../style/theme/index.less';
+
+@calendar-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+
+@calendar-header-padding-horizontal: 24px;
+@calendar-header-padding-vertical: 24px;
+
+@calendar-panel-date-cell-padding-vertical: 4px;
+@calendar-panel-date-cell-circle-height: 24px;
+@calendar-panel-year-cell-padding-vertical: 4px;
+@calendar-panel-year-cell-circle-height: 24px;
+
+@calendar-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@calendar-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@calendar-color-bg-switch-icon_hover: var(
+  ~'@{arco-cssvars-prefix}-color-fill-3'
+);
+
+@calendar-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
+@calendar-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');
+@calendar-color-cell-text-not-in-view: var(
+  ~'@{arco-cssvars-prefix}-color-text-4'
+);
+@calendar-color-bg-circle_selected: @color-primary-6;
+@calendar-color-bg-cell-in-range: var(
+  ~'@{arco-cssvars-prefix}-color-primary-light-1'
+);
+@calendar-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@calendar-color-text-cell-range-boundary: var(
+  ~'@{arco-cssvars-prefix}-color-white'
+);
+@calendar-color-bg-cell-range-boundary: @color-primary-6;
+@calendar-color-bg-cell-hover-in-range: var(
+  ~'@{arco-cssvars-prefix}-color-primary-light-1'
+);
+@calendar-color-text-cell-hover-range-boundary: var(
+  ~'@{arco-cssvars-prefix}-color-text-1'
+);
+@calendar-color-bg-cell-hover-range-boundary: var(
+  ~'@{arco-cssvars-prefix}-color-primary-light-2'
+);
+
+@calendar-panel-color-text-cell_hover: @color-primary-6;
+@calendar-panel-color-bg-cell_hover: var(
+  ~'@{arco-cssvars-prefix}-color-primary-light-1'
+);
+@calendar-panel-color-text-cell_selected: var(
+  ~'@{arco-cssvars-prefix}-color-white'
+);
+@calendar-panel-color-bg-cell_selected: @color-primary-6;
+@calendar-panel-color-current-time-dot: @color-primary-6;
+
+// 不放到风格配置平台
+@calendar-panel-cell-boundary-border-radius: (
+  (
+      @calendar-panel-date-cell-circle-height +
+        @calendar-panel-date-cell-padding-vertical * 2
+    ) / 2
+);
+@calendar-color-box-shadow: var(
+  ~'@{arco-cssvars-prefix}-color-primary-light-3'
+);

package/es/card/style/index.less

@@ -1,219 +1,219 @@
-@import '../../style/mixins/index.less';
-@import './token.less';
-
-@card-prefix-cls: ~'@{prefix}-card';
-
-.@{card-prefix-cls} {
-  position: relative;
-  background: @card-color-bg;
-  border-radius: @card-border-radius-no-border;
-  transition: box-shadow @transition-duration-2
-    @transition-timing-function-linear;
-
-  &-header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    overflow: hidden;
-    border-bottom: @card-border-width-title-bottom solid @card-color-border;
-
-    &-no-title::before {
-      display: block;
-      content: ' ';
-    }
-
-    &-title {
-      flex: 1;
-      color: @card-color-title;
-      font-weight: @card-font-weight-title;
-      line-height: @line-height-base;
-      .text-ellipsis();
-    }
-
-    &-extra {
-      color: @card-color-title-extra;
-      .text-ellipsis();
-    }
-  }
-
-  &-body {
-    color: @card-color-body;
-  }
-
-  &-cover {
-    overflow: hidden;
-
-    > * {
-      display: block;
-      width: 100%;
-    }
-  }
-
-  &-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: @card-margin-top-meta-footer;
-
-    &::before {
-      visibility: hidden;
-      content: '';
-    }
-
-    &-right {
-      display: flex;
-      align-items: center;
-    }
-
-    &-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: @card-color-action;
-      cursor: pointer;
-      transition: color @transition-duration-2
-        @transition-timing-function-linear;
-      .text-ellipsis();
-
-      &:hover {
-        color: @card-color-action_hover;
-      }
-
-      &:not(:last-child) {
-        margin-right: @card-margin-right-action-item;
-      }
-    }
-  }
-
-  &-meta {
-    &-footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      &:last-child {
-        margin-top: @card-margin-top-meta-footer;
-      }
-
-      &-only-actions::before {
-        visibility: hidden;
-        content: '';
-      }
-
-      .@{card-prefix-cls}-actions {
-        margin-top: 0;
-      }
-    }
-
-    &-title {
-      color: @card-color-title;
-      font-weight: @card-font-weight-title;
-      .text-ellipsis();
-    }
-
-    &-description:not(:first-child) {
-      margin-top: @card-margin-top-meta-description;
-    }
-  }
-
-  &-grid {
-    position: relative;
-    box-sizing: border-box;
-    width: 33.33%;
-    box-shadow: @card-border-width 0 0 0 @card-color-border,
-      0 @card-border-width 0 0 @card-color-border,
-      @card-border-width @card-border-width 0 0 @card-color-border,
-      @card-border-width 0 0 0 @card-color-border inset,
-      0 @card-border-width 0 0 @card-color-border inset;
-
-    &::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      transition: box-shadow @transition-duration-2
-        @transition-timing-function-linear;
-      content: '';
-      pointer-events: none;
-    }
-
-    &-hoverable:hover {
-      z-index: 1;
-
-      &::before {
-        box-shadow: 0 4px 10px @card-color-box-shadow;
-      }
-    }
-
-    // 避免 Card 的背景色遮住由 box-shadow 实现的 Grid 的边框
-    .@{card-prefix-cls} {
-      background: none;
-      box-shadow: none;
-    }
-  }
-
-  // 以下为特殊状态的补充
-  &-contain-grid:not(&-loading) > &-body {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -@card-border-width;
-    padding: 0;
-  }
-
-  &-hoverable:hover {
-    box-shadow: 0 4px 10px @card-color-box-shadow;
-  }
-
-  &-bordered {
-    border: @card-border-width solid @card-color-border;
-    border-radius: @card-border-radius;
-
-    .@{card-prefix-cls}-cover {
-      border-radius: @card-border-radius @card-border-radius 0 0;
-    }
-  }
-
-  &-loading &-body {
-    overflow: hidden;
-    text-align: center;
-  }
-
-  // 不同尺寸
-  .size(@name, @size) {
-    &-size-@{name} {
-      font-size: ~'@{card-size-@{size}-font-size}';
-
-      .@{card-prefix-cls}-header {
-        height: ~'@{card-size-@{size}-height-title}';
-        padding: ~'@{card-size-@{size}-padding-vertical-title}' ~'@{card-size-@{size}-padding-horizontal-title}';
-      }
-
-      .@{card-prefix-cls}-header-title,
-      .@{card-prefix-cls}-meta-title {
-        font-size: ~'@{card-size-@{size}-font-size-title}';
-      }
-
-      .@{card-prefix-cls}-header-extra {
-        font-size: ~'@{card-size-@{size}-font-size-title-extra}';
-      }
-
-      .@{card-prefix-cls}-body {
-        padding: ~'@{card-size-@{size}-padding-vertical-body}' ~'@{card-size-@{size}-padding-horizontal-body}';
-      }
-    }
-  }
-
-  .size(medium, default);
-  .size(small, small);
-}
-
-// dark mode
-@{arco-theme-tag}[arco-theme='dark'] {
-  .@{card-prefix-cls}-grid-hoverable:hover::before,
-  .@{card-prefix-cls}-hoverable:hover {
-    box-shadow: 0 4px 10px @card-color-box-shadow_dark;
-  }
-}
+@import '../../style/mixins/index.less';
+@import './token.less';
+
+@card-prefix-cls: ~'@{prefix}-card';
+
+.@{card-prefix-cls} {
+  position: relative;
+  background: @card-color-bg;
+  border-radius: @card-border-radius-no-border;
+  transition: box-shadow @transition-duration-2
+    @transition-timing-function-linear;
+
+  &-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-bottom: @card-border-width-title-bottom solid @card-color-border;
+
+    &-no-title::before {
+      display: block;
+      content: ' ';
+    }
+
+    &-title {
+      flex: 1;
+      color: @card-color-title;
+      font-weight: @card-font-weight-title;
+      line-height: @line-height-base;
+      .text-ellipsis();
+    }
+
+    &-extra {
+      color: @card-color-title-extra;
+      .text-ellipsis();
+    }
+  }
+
+  &-body {
+    color: @card-color-body;
+  }
+
+  &-cover {
+    overflow: hidden;
+
+    > * {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  &-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: @card-margin-top-meta-footer;
+
+    &::before {
+      visibility: hidden;
+      content: '';
+    }
+
+    &-right {
+      display: flex;
+      align-items: center;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: @card-color-action;
+      cursor: pointer;
+      transition: color @transition-duration-2
+        @transition-timing-function-linear;
+      .text-ellipsis();
+
+      &:hover {
+        color: @card-color-action_hover;
+      }
+
+      &:not(:last-child) {
+        margin-right: @card-margin-right-action-item;
+      }
+    }
+  }
+
+  &-meta {
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &:last-child {
+        margin-top: @card-margin-top-meta-footer;
+      }
+
+      &-only-actions::before {
+        visibility: hidden;
+        content: '';
+      }
+
+      .@{card-prefix-cls}-actions {
+        margin-top: 0;
+      }
+    }
+
+    &-title {
+      color: @card-color-title;
+      font-weight: @card-font-weight-title;
+      .text-ellipsis();
+    }
+
+    &-description:not(:first-child) {
+      margin-top: @card-margin-top-meta-description;
+    }
+  }
+
+  &-grid {
+    position: relative;
+    box-sizing: border-box;
+    width: 33.33%;
+    box-shadow: @card-border-width 0 0 0 @card-color-border,
+      0 @card-border-width 0 0 @card-color-border,
+      @card-border-width @card-border-width 0 0 @card-color-border,
+      @card-border-width 0 0 0 @card-color-border inset,
+      0 @card-border-width 0 0 @card-color-border inset;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transition: box-shadow @transition-duration-2
+        @transition-timing-function-linear;
+      content: '';
+      pointer-events: none;
+    }
+
+    &-hoverable:hover {
+      z-index: 1;
+
+      &::before {
+        box-shadow: 0 4px 10px @card-color-box-shadow;
+      }
+    }
+
+    // 避免 Card 的背景色遮住由 box-shadow 实现的 Grid 的边框
+    .@{card-prefix-cls} {
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  // 以下为特殊状态的补充
+  &-contain-grid:not(&-loading) > &-body {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -@card-border-width;
+    padding: 0;
+  }
+
+  &-hoverable:hover {
+    box-shadow: 0 4px 10px @card-color-box-shadow;
+  }
+
+  &-bordered {
+    border: @card-border-width solid @card-color-border;
+    border-radius: @card-border-radius;
+
+    .@{card-prefix-cls}-cover {
+      border-radius: @card-border-radius @card-border-radius 0 0;
+    }
+  }
+
+  &-loading &-body {
+    overflow: hidden;
+    text-align: center;
+  }
+
+  // 不同尺寸
+  .size(@name, @size) {
+    &-size-@{name} {
+      font-size: ~'@{card-size-@{size}-font-size}';
+
+      .@{card-prefix-cls}-header {
+        height: ~'@{card-size-@{size}-height-title}';
+        padding: ~'@{card-size-@{size}-padding-vertical-title}' ~'@{card-size-@{size}-padding-horizontal-title}';
+      }
+
+      .@{card-prefix-cls}-header-title,
+      .@{card-prefix-cls}-meta-title {
+        font-size: ~'@{card-size-@{size}-font-size-title}';
+      }
+
+      .@{card-prefix-cls}-header-extra {
+        font-size: ~'@{card-size-@{size}-font-size-title-extra}';
+      }
+
+      .@{card-prefix-cls}-body {
+        padding: ~'@{card-size-@{size}-padding-vertical-body}' ~'@{card-size-@{size}-padding-horizontal-body}';
+      }
+    }
+  }
+
+  .size(medium, default);
+  .size(small, small);
+}
+
+// dark mode
+@{arco-theme-tag}[arco-theme='dark'] {
+  .@{card-prefix-cls}-grid-hoverable:hover::before,
+  .@{card-prefix-cls}-hoverable:hover {
+    box-shadow: 0 4px 10px @card-color-box-shadow_dark;
+  }
+}

package/es/card/style/token.less

@@ -1,40 +1,40 @@
-@import '../../style/theme/index.less';
-
-@card-size-small-height-title: @size-10;
-@card-size-small-font-size-title: @font-size-title-1;
-@card-size-small-font-size-title-extra: @font-size-body-3;
-@card-size-small-font-size: @font-size-body-3;
-@card-size-small-padding-horizontal-title: @spacing-7;
-@card-size-small-padding-vertical-title: @spacing-4;
-@card-size-small-padding-horizontal-body: @spacing-7;
-@card-size-small-padding-vertical-body: @spacing-6;
-
-@card-size-default-height-title: 46px;
-@card-size-default-font-size-title: @font-size-title-1;
-@card-size-default-font-size-title-extra: @font-size-body-3;
-@card-size-default-font-size: @font-size-body-3;
-@card-size-default-padding-horizontal-title: @spacing-7;
-@card-size-default-padding-vertical-title: @spacing-5;
-@card-size-default-padding-horizontal-body: @spacing-7;
-@card-size-default-padding-vertical-body: @spacing-7;
-
-@card-line-height: @line-height-base;
-@card-font-weight-title: @font-weight-500;
-@card-margin-top-meta-footer: @spacing-8;
-@card-margin-top-meta-description: @spacing-2;
-@card-margin-right-action-item: @spacing-6;
-
-@card-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@card-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-@card-color-title: var(~'@{arco-cssvars-prefix}-color-text-1');
-@card-color-title-extra: @color-primary-6;
-@card-color-body: var(~'@{arco-cssvars-prefix}-color-text-2');
-@card-color-action: var(~'@{arco-cssvars-prefix}-color-text-2');
-@card-color-action_hover: @color-primary-6;
-@card-color-box-shadow: rgb(var(~'@{arco-cssvars-prefix}-gray-2'));
-@card-color-box-shadow_dark: rgba(var(~'@{arco-cssvars-prefix}-gray-1'), 40%);
-
-@card-border-width: @border-1;
-@card-border-width-title-bottom: @border-1;
-@card-border-radius: @radius-small;
-@card-border-radius-no-border: @radius-none;
+@import '../../style/theme/index.less';
+
+@card-size-small-height-title: @size-10;
+@card-size-small-font-size-title: @font-size-title-1;
+@card-size-small-font-size-title-extra: @font-size-body-3;
+@card-size-small-font-size: @font-size-body-3;
+@card-size-small-padding-horizontal-title: @spacing-7;
+@card-size-small-padding-vertical-title: @spacing-4;
+@card-size-small-padding-horizontal-body: @spacing-7;
+@card-size-small-padding-vertical-body: @spacing-6;
+
+@card-size-default-height-title: 46px;
+@card-size-default-font-size-title: @font-size-title-1;
+@card-size-default-font-size-title-extra: @font-size-body-3;
+@card-size-default-font-size: @font-size-body-3;
+@card-size-default-padding-horizontal-title: @spacing-7;
+@card-size-default-padding-vertical-title: @spacing-5;
+@card-size-default-padding-horizontal-body: @spacing-7;
+@card-size-default-padding-vertical-body: @spacing-7;
+
+@card-line-height: @line-height-base;
+@card-font-weight-title: @font-weight-500;
+@card-margin-top-meta-footer: @spacing-8;
+@card-margin-top-meta-description: @spacing-2;
+@card-margin-right-action-item: @spacing-6;
+
+@card-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@card-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@card-color-title: var(~'@{arco-cssvars-prefix}-color-text-1');
+@card-color-title-extra: @color-primary-6;
+@card-color-body: var(~'@{arco-cssvars-prefix}-color-text-2');
+@card-color-action: var(~'@{arco-cssvars-prefix}-color-text-2');
+@card-color-action_hover: @color-primary-6;
+@card-color-box-shadow: rgb(var(~'@{arco-cssvars-prefix}-gray-2'));
+@card-color-box-shadow_dark: rgba(var(~'@{arco-cssvars-prefix}-gray-1'), 40%);
+
+@card-border-width: @border-1;
+@card-border-width-title-bottom: @border-1;
+@card-border-radius: @radius-small;
+@card-border-radius-no-border: @radius-none;