@julingbase/jly-arco-design 0.0.2 → 0.0.4

package/lib/color-picker/style/token.less

@@ -1,70 +1,70 @@
-@import '../../style/theme/index.less';
-@import '../../input/style/token.less';
-
-@color-preview-size-mini: @size-4;
-@color-preview-size-small: 22px;
-@color-preview-size-medium: @size-6;
-@color-preview-size-large: 26px;
-
-@color-input-size-mini-padding: (
-    (@input-size-mini-height - @color-preview-size-mini) / 2
-  )
-  @spacing-2;
-@color-input-size-small-padding: (
-    (@input-size-small-height - @color-preview-size-small) / 2
-  )
-  @spacing-2;
-@color-input-size-medium-padding: (
-    (@input-size-medium-height - @color-preview-size-medium) / 2
-  )
-  @spacing-2;
-@color-input-size-large-padding: (
-    (@input-size-large-height - @color-preview-size-large) / 2
-  )
-  5px;
-
-@color-input-bg-color: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@color-value-margin-left: @spacing-2;
-@color-value-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
-@color-value-font-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-
-@color-value-size-mini-font-size: @font-size-body-1;
-@color-value-size-small-font-size: @font-size-body-3;
-@color-value-size-medium-font-size: @font-size-body-3;
-@color-value-size-large-font-size: @font-size-body-3;
-
-@color-input-border-radius: @border-radius-small;
-@color-preview-border-size: @border-1;
-@color-preview-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
-@color-value-font-size: @font-weight-400;
-
-@color-panel-width: 260px;
-@color-panel-padding: @spacing-6;
-@color-panel-border-radius: @border-radius-small;
-@color-panel-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-1');
-@color-panel-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 10%);
-
-@color-palette-height: 178px;
-@color-palette-handle-size: @size-4;
-@color-palette-handle-border-size: @border-2;
-
-@color-control-bar-width: 182px;
-@color-control-bar-height: 14px;
-@color-control-bar-handle-size: @size-4;
-@color-control-bar-alpha-margin-top: @spacing-6;
-@color-control-bar-border-radius: 10px;
-
-@color-panel-input-margin-top: @spacing-6;
-@color-panel-input-group-margin-left: @spacing-6;
-@color-panel-preview-size: 40px;
-@color-panel-format-select-width: 58px;
-@color-panel-alpha-input-width: 52px;
-
-@color-panel-section-title-font-size: @font-size-caption;
-@color-panel-empty-font-size: @font-size-body-1;
-
-@color-panel-block-size: @size-4;
-@color-panel-block-margin: @spacing-3;
-@color-panel-block-border-radius: @border-2;
-
-@color-panel-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
+@import '../../style/theme/index.less';
+@import '../../input/style/token.less';
+
+@color-preview-size-mini: @size-4;
+@color-preview-size-small: 22px;
+@color-preview-size-medium: @size-6;
+@color-preview-size-large: 26px;
+
+@color-input-size-mini-padding: (
+    (@input-size-mini-height - @color-preview-size-mini) / 2
+  )
+  @spacing-2;
+@color-input-size-small-padding: (
+    (@input-size-small-height - @color-preview-size-small) / 2
+  )
+  @spacing-2;
+@color-input-size-medium-padding: (
+    (@input-size-medium-height - @color-preview-size-medium) / 2
+  )
+  @spacing-2;
+@color-input-size-large-padding: (
+    (@input-size-large-height - @color-preview-size-large) / 2
+  )
+  5px;
+
+@color-input-bg-color: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@color-value-margin-left: @spacing-2;
+@color-value-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
+@color-value-font-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+@color-value-size-mini-font-size: @font-size-body-1;
+@color-value-size-small-font-size: @font-size-body-3;
+@color-value-size-medium-font-size: @font-size-body-3;
+@color-value-size-large-font-size: @font-size-body-3;
+
+@color-input-border-radius: @border-radius-small;
+@color-preview-border-size: @border-1;
+@color-preview-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
+@color-value-font-size: @font-weight-400;
+
+@color-panel-width: 260px;
+@color-panel-padding: @spacing-6;
+@color-panel-border-radius: @border-radius-small;
+@color-panel-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-1');
+@color-panel-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 10%);
+
+@color-palette-height: 178px;
+@color-palette-handle-size: @size-4;
+@color-palette-handle-border-size: @border-2;
+
+@color-control-bar-width: 182px;
+@color-control-bar-height: 14px;
+@color-control-bar-handle-size: @size-4;
+@color-control-bar-alpha-margin-top: @spacing-6;
+@color-control-bar-border-radius: 10px;
+
+@color-panel-input-margin-top: @spacing-6;
+@color-panel-input-group-margin-left: @spacing-6;
+@color-panel-preview-size: 40px;
+@color-panel-format-select-width: 58px;
+@color-panel-alpha-input-width: 52px;
+
+@color-panel-section-title-font-size: @font-size-caption;
+@color-panel-empty-font-size: @font-size-body-1;
+
+@color-panel-block-size: @size-4;
+@color-panel-block-margin: @spacing-3;
+@color-panel-block-border-radius: @border-2;
+
+@color-panel-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');

package/lib/comment/style/index.less

@@ -1,66 +1,66 @@
-@import './token.less';
-
-@comment-prefix-cls: ~'@{prefix}-comment';
-
-.@{comment-prefix-cls} {
-  display: flex;
-  flex-wrap: nowrap;
-  font-size: @comment-font-size;
-  line-height: @line-height-base;
-
-  &:not(:first-of-type),
-  &-inner-comment {
-    margin-top: @comment-margin-bottom;
-  }
-
-  &-inner {
-    flex: 1;
-  }
-
-  &-avatar {
-    flex-shrink: 0;
-    margin-right: @comment-margin-avatar-right;
-    cursor: pointer;
-
-    > img {
-      width: @comment-size-avatar-width;
-      height: @comment-size-avatar-width;
-      border-radius: @radius-circle;
-    }
-  }
-
-  &-author {
-    margin-right: @comment-margin-author-right;
-    color: @comment-color-author-text;
-    font-size: @comment-font-author-size;
-  }
-
-  &-datetime {
-    color: @comment-color-datetime-text;
-    font-size: @comment-font-datetime-size;
-  }
-
-  &-content {
-    color: @comment-color-content-text;
-  }
-
-  &-title-align-right {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &-actions {
-    margin-top: @comment-margin-actions-top;
-    color: @comment-color-actions-text;
-    font-size: @comment-font-action-size;
-
-    > *:not(:last-child) {
-      margin-right: @comment-margin-actions-right;
-    }
-  }
-
-  &-actions-align-right {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
+@import './token.less';
+
+@comment-prefix-cls: ~'@{prefix}-comment';
+
+.@{comment-prefix-cls} {
+  display: flex;
+  flex-wrap: nowrap;
+  font-size: @comment-font-size;
+  line-height: @line-height-base;
+
+  &:not(:first-of-type),
+  &-inner-comment {
+    margin-top: @comment-margin-bottom;
+  }
+
+  &-inner {
+    flex: 1;
+  }
+
+  &-avatar {
+    flex-shrink: 0;
+    margin-right: @comment-margin-avatar-right;
+    cursor: pointer;
+
+    > img {
+      width: @comment-size-avatar-width;
+      height: @comment-size-avatar-width;
+      border-radius: @radius-circle;
+    }
+  }
+
+  &-author {
+    margin-right: @comment-margin-author-right;
+    color: @comment-color-author-text;
+    font-size: @comment-font-author-size;
+  }
+
+  &-datetime {
+    color: @comment-color-datetime-text;
+    font-size: @comment-font-datetime-size;
+  }
+
+  &-content {
+    color: @comment-color-content-text;
+  }
+
+  &-title-align-right {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &-actions {
+    margin-top: @comment-margin-actions-top;
+    color: @comment-color-actions-text;
+    font-size: @comment-font-action-size;
+
+    > *:not(:last-child) {
+      margin-right: @comment-margin-actions-right;
+    }
+  }
+
+  &-actions-align-right {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/lib/comment/style/token.less

@@ -1,17 +1,17 @@
-@import '../../style/theme/index.less';
-
-@comment-color-author-text: var(~'@{arco-cssvars-prefix}-color-text-2');
-@comment-color-datetime-text: var(~'@{arco-cssvars-prefix}-color-text-3');
-@comment-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');
-@comment-color-actions-text: var(~'@{arco-cssvars-prefix}-color-text-2');
-
-@comment-font-size: @font-size-body-3;
-@comment-font-author-size: @font-size-body-3;
-@comment-font-datetime-size: @font-size-body-1;
-@comment-margin-avatar-right: @spacing-6;
-@comment-margin-author-right: @spacing-4;
-@comment-margin-actions-top: @spacing-4;
-@comment-margin-bottom: @spacing-8;
-@comment-margin-actions-right: @spacing-4;
-@comment-size-avatar-width: @size-8;
-@comment-font-action-size: @font-size-body-3;
+@import '../../style/theme/index.less';
+
+@comment-color-author-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@comment-color-datetime-text: var(~'@{arco-cssvars-prefix}-color-text-3');
+@comment-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');
+@comment-color-actions-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+
+@comment-font-size: @font-size-body-3;
+@comment-font-author-size: @font-size-body-3;
+@comment-font-datetime-size: @font-size-body-1;
+@comment-margin-avatar-right: @spacing-6;
+@comment-margin-author-right: @spacing-4;
+@comment-margin-actions-top: @spacing-4;
+@comment-margin-bottom: @spacing-8;
+@comment-margin-actions-right: @spacing-4;
+@comment-size-avatar-width: @size-8;
+@comment-font-action-size: @font-size-body-3;

package/lib/date-picker/style/date.less

@@ -1,128 +1,128 @@
-@import '../../time-picker/style/token.less';
-
-@date-panel-prefix-cls: ~'@{prefix}-panel-date';
-@time-picker-prefix-cls: ~'@{prefix}-timepicker';
-
-@datepicker-timepicker-height: 276px;
-
-.@{date-panel-prefix-cls} {
-  display: flex;
-  box-sizing: border-box;
-
-  &-inner {
-    width: @picker-panel-date-width;
-  }
-
-  &-inner .@{prefix}-picker-body {
-    padding-top: 0;
-  }
-
-  &-timepicker {
-    display: flex;
-    flex-direction: column;
-    border-left: 1px solid @picker-panel-color-border;
-
-    &-title {
-      width: 100%;
-      height: 40px;
-      color: var(~'@{arco-cssvars-prefix}-color-text-1');
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 40px;
-      text-align: center;
-      border-bottom: 1px solid @picker-panel-color-border;
-    }
-
-    .@{time-picker-prefix-cls} {
-      height: @datepicker-timepicker-height;
-      padding: 0 6px;
-      overflow: hidden;
-
-      &-column {
-        box-sizing: border-box;
-        width: auto;
-        height: 100%;
-        padding: 0 4px;
-
-        &::-webkit-scrollbar {
-          width: 0;
-        }
-      }
-
-      &-column:not(:last-child) {
-        border-right: 0;
-      }
-
-      ul::after {
-        height: @datepicker-timepicker-height - @timepicker-cell-height -
-          @timepicker-cell-spacing * 2;
-      }
-
-      &-cell {
-        width: 36px;
-
-        &-inner {
-          padding-left: 10px;
-        }
-      }
-    }
-  }
-
-  &-footer {
-    border-right: 1px solid @picker-panel-color-border;
-  }
-
-  &-with-view-tabs {
-    flex-direction: column;
-    min-width: 265px;
-
-    .@{date-panel-prefix-cls}-timepicker {
-      .@{time-picker-prefix-cls} {
-        &-column {
-          flex: 1;
-
-          &::-webkit-scrollbar {
-            width: 0;
-          }
-        }
-
-        &-cell {
-          width: 100%;
-          text-align: center;
-
-          &-inner {
-            padding-left: 0;
-          }
-        }
-      }
-    }
-  }
-
-  &-view-tabs {
-    display: flex;
-    border-top: 1px solid @picker-panel-color-border;
-  }
-
-  &-view-tab-pane {
-    flex: 1;
-    height: @datepicker-view-tabs-height;
-    color: @datepicker-view-tab-pane-color-text_unactive;
-    font-size: @datepicker-view-tab-pane-font-size;
-    line-height: @datepicker-view-tabs-height;
-    text-align: center;
-    border-right: 1px solid @picker-panel-color-border;
-    cursor: pointer;
-
-    &:last-child {
-      border-right: none;
-    }
-
-    &-text {
-      margin-left: @datepicker-view-tab-pane-spacing-text-icon;
-    }
-
-    &-active {
-      color: @datepicker-view-tab-pane-color-text_active;
-    }
-  }
-}
+@import '../../time-picker/style/token.less';
+
+@date-panel-prefix-cls: ~'@{prefix}-panel-date';
+@time-picker-prefix-cls: ~'@{prefix}-timepicker';
+
+@datepicker-timepicker-height: 276px;
+
+.@{date-panel-prefix-cls} {
+  display: flex;
+  box-sizing: border-box;
+
+  &-inner {
+    width: @picker-panel-date-width;
+  }
+
+  &-inner .@{prefix}-picker-body {
+    padding-top: 0;
+  }
+
+  &-timepicker {
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid @picker-panel-color-border;
+
+    &-title {
+      width: 100%;
+      height: 40px;
+      color: var(~'@{arco-cssvars-prefix}-color-text-1');
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 40px;
+      text-align: center;
+      border-bottom: 1px solid @picker-panel-color-border;
+    }
+
+    .@{time-picker-prefix-cls} {
+      height: @datepicker-timepicker-height;
+      padding: 0 6px;
+      overflow: hidden;
+
+      &-column {
+        box-sizing: border-box;
+        width: auto;
+        height: 100%;
+        padding: 0 4px;
+
+        &::-webkit-scrollbar {
+          width: 0;
+        }
+      }
+
+      &-column:not(:last-child) {
+        border-right: 0;
+      }
+
+      ul::after {
+        height: @datepicker-timepicker-height - @timepicker-cell-height -
+          @timepicker-cell-spacing * 2;
+      }
+
+      &-cell {
+        width: 36px;
+
+        &-inner {
+          padding-left: 10px;
+        }
+      }
+    }
+  }
+
+  &-footer {
+    border-right: 1px solid @picker-panel-color-border;
+  }
+
+  &-with-view-tabs {
+    flex-direction: column;
+    min-width: 265px;
+
+    .@{date-panel-prefix-cls}-timepicker {
+      .@{time-picker-prefix-cls} {
+        &-column {
+          flex: 1;
+
+          &::-webkit-scrollbar {
+            width: 0;
+          }
+        }
+
+        &-cell {
+          width: 100%;
+          text-align: center;
+
+          &-inner {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &-view-tabs {
+    display: flex;
+    border-top: 1px solid @picker-panel-color-border;
+  }
+
+  &-view-tab-pane {
+    flex: 1;
+    height: @datepicker-view-tabs-height;
+    color: @datepicker-view-tab-pane-color-text_unactive;
+    font-size: @datepicker-view-tab-pane-font-size;
+    line-height: @datepicker-view-tabs-height;
+    text-align: center;
+    border-right: 1px solid @picker-panel-color-border;
+    cursor: pointer;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &-text {
+      margin-left: @datepicker-view-tab-pane-spacing-text-icon;
+    }
+
+    &-active {
+      color: @datepicker-view-tab-pane-color-text_active;
+    }
+  }
+}