@julingbase/jly-arco-design 0.0.2 → 0.0.4

package/lib/form/style/status.less

@@ -1,152 +1,152 @@
-@import './token.less';
-
-// for input & textarea
-.input-status(@status) {
-  @input-prefix-cls: ~'@{prefix}-input';
-  @textarea-prefix-cls: ~'@{prefix}-textarea';
-
-  .@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-disabled),
-  .@{textarea-prefix-cls}-wrapper:not(.@{textarea-prefix-cls}-disabled) {
-    background-color: ~'@{form-color-bg_@{status}}';
-    border-color: ~'@{form-color-border_@{status}}';
-
-    &:hover {
-      background-color: ~'@{form-color-bg_@{status}_hover}';
-      border-color: ~'@{form-color-border_@{status}_hover}';
-    }
-  }
-
-  .@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-disabled).@{input-prefix-cls}-focus,
-  .@{textarea-prefix-cls}-wrapper:not(.@{textarea-prefix-cls}-disabled).@{textarea-prefix-cls}-focus {
-    background-color: ~'@{form-color-bg_@{status}_focus}';
-    border-color: ~'@{form-color-border_@{status}_focus}';
-    box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
-  }
-}
-
-.select-view-status(@status) {
-  @input-prefix-cls: ~'@{prefix}-input-tag';
-  @select-view-prefix-cls: ~'@{prefix}-select-view';
-
-  .@{select-view-prefix-cls}:not(.@{select-view-prefix-cls}-disabled),
-  .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled) {
-    background-color: ~'@{form-color-bg_@{status}}';
-    border-color: ~'@{form-color-border_@{status}}';
-
-    &:hover {
-      background-color: ~'@{form-color-bg_@{status}_hover}';
-      border-color: ~'@{form-color-border_@{status}_hover}';
-    }
-  }
-
-  .@{select-view-prefix-cls}:not(.@{select-view-prefix-cls}-disabled).@{select-view-prefix-cls}-focus,
-  .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled).@{input-prefix-cls}-focus {
-    background-color: ~'@{form-color-bg_@{status}_focus}';
-    border-color: ~'@{form-color-border_@{status}_focus}';
-    box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
-  }
-}
-
-// datepicker
-.picker(@status) {
-  .@{prefix}-picker:not(.@{prefix}-picker-disabled) {
-    border-color: ~'@{form-color-border_@{status}}';
-    background-color: ~'@{form-color-bg_@{status}}';
-
-    &:hover {
-      border-color: ~'@{form-color-border_@{status}_hover}';
-      background-color: ~'@{form-color-bg_@{status}_hover}';
-    }
-  }
-
-  .@{prefix}-picker-focused:not(.@{prefix}-picker-disabled) {
-    &,
-    &:hover {
-      border-color: ~'@{form-color-border_@{status}_focus}';
-      background-color: ~'@{form-color-bg_@{status}_focus}';
-      box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
-    }
-  }
-}
-
-.validate-status (@status) {
-  .@{prefix}-form-item-status-@{status} {
-    .input-status(@status);
-    .select-view-status(@status);
-    .picker(@status);
-  }
-
-  .@{prefix}-form-item-status-@{status} {
-    .@{form-prefix-cls}-item-message-help {
-      color: ~'@{form-color-tip-text_@{status}}';
-    }
-
-    .@{form-prefix-cls}-item-feedback {
-      color: ~'@{form-color-tip-icon-text_@{status}}';
-    }
-  }
-}
-
-.validate-status(validating);
-
-.validate-status(success);
-
-.validate-status(warning);
-
-.validate-status(error);
-
-.@{form-prefix-cls}-item-control-children {
-  position: relative;
-}
-
-.@{form-prefix-cls}-item-feedback {
-  position: absolute;
-  top: 50%;
-  right: 9px;
-  font-size: 14px;
-  transform: translateY(-50%);
-
-  .@{prefix}-icon-loading {
-    font-size: 12px;
-  }
-}
-
-.@{form-prefix-cls}-item-has-feedback {
-  .select-view(@prefix) {
-    .@{prefix}.@{prefix}-multiple .@{prefix}-view,
-    .@{prefix}.@{prefix}-single .@{prefix}-view {
-      padding-right: 28px;
-    }
-
-    .@{prefix}.@{prefix}-multiple .@{prefix}-suffix {
-      padding-right: 0;
-    }
-  }
-
-  .@{prefix}-input,
-  .@{prefix}-input-inner-wrapper,
-  .@{prefix}-textarea {
-    padding-right: 28px;
-  }
-
-  .@{prefix}-input-number-mode-embed .@{prefix}-input-number-step-layer {
-    right: 24px;
-  }
-
-  .select-view(~'@{prefix}-select');
-  .select-view(~'@{prefix}-cascader');
-  .select-view(~'@{prefix}-tree-select');
-
-  // datepicker timepicker
-  .@{prefix}-picker {
-    padding-right: 28px;
-  }
-
-  .@{prefix}-picker-suffix {
-    .@{prefix}-picker-suffix-icon,
-    .@{prefix}-picker-clear-icon {
-      margin-right: 0;
-      margin-left: 0;
-    }
-  }
-}
+@import './token.less';
+
+// for input & textarea
+.input-status(@status) {
+  @input-prefix-cls: ~'@{prefix}-input';
+  @textarea-prefix-cls: ~'@{prefix}-textarea';
+
+  .@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-disabled),
+  .@{textarea-prefix-cls}-wrapper:not(.@{textarea-prefix-cls}-disabled) {
+    background-color: ~'@{form-color-bg_@{status}}';
+    border-color: ~'@{form-color-border_@{status}}';
+
+    &:hover {
+      background-color: ~'@{form-color-bg_@{status}_hover}';
+      border-color: ~'@{form-color-border_@{status}_hover}';
+    }
+  }
+
+  .@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-disabled).@{input-prefix-cls}-focus,
+  .@{textarea-prefix-cls}-wrapper:not(.@{textarea-prefix-cls}-disabled).@{textarea-prefix-cls}-focus {
+    background-color: ~'@{form-color-bg_@{status}_focus}';
+    border-color: ~'@{form-color-border_@{status}_focus}';
+    box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
+  }
+}
+
+.select-view-status(@status) {
+  @input-prefix-cls: ~'@{prefix}-input-tag';
+  @select-view-prefix-cls: ~'@{prefix}-select-view';
+
+  .@{select-view-prefix-cls}:not(.@{select-view-prefix-cls}-disabled),
+  .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled) {
+    background-color: ~'@{form-color-bg_@{status}}';
+    border-color: ~'@{form-color-border_@{status}}';
+
+    &:hover {
+      background-color: ~'@{form-color-bg_@{status}_hover}';
+      border-color: ~'@{form-color-border_@{status}_hover}';
+    }
+  }
+
+  .@{select-view-prefix-cls}:not(.@{select-view-prefix-cls}-disabled).@{select-view-prefix-cls}-focus,
+  .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled).@{input-prefix-cls}-focus {
+    background-color: ~'@{form-color-bg_@{status}_focus}';
+    border-color: ~'@{form-color-border_@{status}_focus}';
+    box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
+  }
+}
+
+// datepicker
+.picker(@status) {
+  .@{prefix}-picker:not(.@{prefix}-picker-disabled) {
+    border-color: ~'@{form-color-border_@{status}}';
+    background-color: ~'@{form-color-bg_@{status}}';
+
+    &:hover {
+      border-color: ~'@{form-color-border_@{status}_hover}';
+      background-color: ~'@{form-color-bg_@{status}_hover}';
+    }
+  }
+
+  .@{prefix}-picker-focused:not(.@{prefix}-picker-disabled) {
+    &,
+    &:hover {
+      border-color: ~'@{form-color-border_@{status}_focus}';
+      background-color: ~'@{form-color-bg_@{status}_focus}';
+      box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
+    }
+  }
+}
+
+.validate-status (@status) {
+  .@{prefix}-form-item-status-@{status} {
+    .input-status(@status);
+    .select-view-status(@status);
+    .picker(@status);
+  }
+
+  .@{prefix}-form-item-status-@{status} {
+    .@{form-prefix-cls}-item-message-help {
+      color: ~'@{form-color-tip-text_@{status}}';
+    }
+
+    .@{form-prefix-cls}-item-feedback {
+      color: ~'@{form-color-tip-icon-text_@{status}}';
+    }
+  }
+}
+
+.validate-status(validating);
+
+.validate-status(success);
+
+.validate-status(warning);
+
+.validate-status(error);
+
+.@{form-prefix-cls}-item-control-children {
+  position: relative;
+}
+
+.@{form-prefix-cls}-item-feedback {
+  position: absolute;
+  top: 50%;
+  right: 9px;
+  font-size: 14px;
+  transform: translateY(-50%);
+
+  .@{prefix}-icon-loading {
+    font-size: 12px;
+  }
+}
+
+.@{form-prefix-cls}-item-has-feedback {
+  .select-view(@prefix) {
+    .@{prefix}.@{prefix}-multiple .@{prefix}-view,
+    .@{prefix}.@{prefix}-single .@{prefix}-view {
+      padding-right: 28px;
+    }
+
+    .@{prefix}.@{prefix}-multiple .@{prefix}-suffix {
+      padding-right: 0;
+    }
+  }
+
+  .@{prefix}-input,
+  .@{prefix}-input-inner-wrapper,
+  .@{prefix}-textarea {
+    padding-right: 28px;
+  }
+
+  .@{prefix}-input-number-mode-embed .@{prefix}-input-number-step-layer {
+    right: 24px;
+  }
+
+  .select-view(~'@{prefix}-select');
+  .select-view(~'@{prefix}-cascader');
+  .select-view(~'@{prefix}-tree-select');
+
+  // datepicker timepicker
+  .@{prefix}-picker {
+    padding-right: 28px;
+  }
+
+  .@{prefix}-picker-suffix {
+    .@{prefix}-picker-suffix-icon,
+    .@{prefix}-picker-clear-icon {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+}

package/lib/form/style/token.less

@@ -1,81 +1,81 @@
-@import '../../style/theme/index.less';
-
-@form-size-mini-margin-item-bottom: @spacing-7;
-@form-size-small-margin-item-bottom: @spacing-8;
-@form-size-default-margin-item-bottom: @spacing-8;
-@form-size-large-margin-item-bottom: @spacing-8;
-
-@form-size-mini-font-label-size: @font-size-body-1;
-@form-size-small-font-label-size: @font-size-body-3;
-@form-size-large-font-label-size: @font-size-body-3;
-@form-size-default-font-label-size: @font-size-body-3;
-@form-font-extra-text-size: @font-size-body-1;
-@form-font-error-text-size: @font-size-body-1;
-
-@form-margin-label-right: @spacing-7;
-@form-margin-extra-bottom: @spacing-2;
-@form-margin-extra-top: @spacing-2;
-@form-inline-margin-item-right: @spacing-9;
-@form-inline-margin-item-bottom: @spacing-4;
-@form-vertical-margin-label-bottom: @spacing-4;
-
-@form-color-extra-text: var(~'@{arco-cssvars-prefix}-color-text-3');
-
-@form-color-text-label: var(~'@{arco-cssvars-prefix}-color-text-2');
-@form-margin-tooltip-left: @spacing-2;
-@form-color-text-tooltip: var(~'@{arco-cssvars-prefix}-color-text-4');
-
-@form-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
-@form-color-bg_warning_hover: var(
-  ~'@{arco-cssvars-prefix}-color-warning-light-2'
-);
-@form-color-bg_warning_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@form-color-border_warning: @color-transparent;
-@form-color-border_warning_focus: @color-warning-6;
-@form-color-border_warning_hover: @color-transparent;
-@form-size-shadow_warning_focus: @shadow-distance-none;
-@form-color-shadow_warning_focus: var(
-  ~'@{arco-cssvars-prefix}-color-warning-light-2'
-);
-
-@form-color-bg_success: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@form-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@form-color-bg_success_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@form-color-border_success: @color-transparent;
-@form-color-border_success_focus: @color-success-6;
-@form-color-border_success_hover: @color-transparent;
-@form-size-shadow_success_focus: @shadow-distance-none;
-@form-color-shadow_success_focus: var(
-  ~'@{arco-cssvars-prefix}-color-success-light-2'
-);
-
-@form-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
-@form-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
-@form-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@form-color-border_error: @color-transparent;
-@form-color-border_error_focus: @color-danger-6;
-@form-color-border_error_hover: @color-transparent;
-@form-size-shadow_error_focus: @shadow-distance-none;
-@form-color-shadow_error_focus: var(
-  ~'@{arco-cssvars-prefix}-color-danger-light-2'
-);
-
-@form-color-bg_validating: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@form-color-bg_validating_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@form-color-bg_validating_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@form-color-border_validating: @color-transparent;
-@form-color-border_validating_focus: @color-primary-6;
-@form-color-border_validating_hover: @color-transparent;
-@form-size-shadow_validating_focus: @shadow-distance-none;
-@form-color-shadow_validating_focus: var(
-  ~'@{arco-cssvars-prefix}-color-primary-light-2'
-);
-
-@form-color-tip-text_success: @color-success-6;
-@form-color-tip-icon-text_success: @color-success-6;
-@form-color-tip-text_error: @color-danger-6;
-@form-color-tip-icon-text_error: @color-danger-6;
-@form-color-tip-text_warning: @color-warning-6;
-@form-color-tip-icon-text_warning: @color-warning-6;
-@form-color-tip-text_validating: @color-primary-6;
-@form-color-tip-icon-text_validating: @color-primary-6;
+@import '../../style/theme/index.less';
+
+@form-size-mini-margin-item-bottom: @spacing-7;
+@form-size-small-margin-item-bottom: @spacing-8;
+@form-size-default-margin-item-bottom: @spacing-8;
+@form-size-large-margin-item-bottom: @spacing-8;
+
+@form-size-mini-font-label-size: @font-size-body-1;
+@form-size-small-font-label-size: @font-size-body-3;
+@form-size-large-font-label-size: @font-size-body-3;
+@form-size-default-font-label-size: @font-size-body-3;
+@form-font-extra-text-size: @font-size-body-1;
+@form-font-error-text-size: @font-size-body-1;
+
+@form-margin-label-right: @spacing-7;
+@form-margin-extra-bottom: @spacing-2;
+@form-margin-extra-top: @spacing-2;
+@form-inline-margin-item-right: @spacing-9;
+@form-inline-margin-item-bottom: @spacing-4;
+@form-vertical-margin-label-bottom: @spacing-4;
+
+@form-color-extra-text: var(~'@{arco-cssvars-prefix}-color-text-3');
+
+@form-color-text-label: var(~'@{arco-cssvars-prefix}-color-text-2');
+@form-margin-tooltip-left: @spacing-2;
+@form-color-text-tooltip: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+@form-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
+@form-color-bg_warning_hover: var(
+  ~'@{arco-cssvars-prefix}-color-warning-light-2'
+);
+@form-color-bg_warning_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@form-color-border_warning: @color-transparent;
+@form-color-border_warning_focus: @color-warning-6;
+@form-color-border_warning_hover: @color-transparent;
+@form-size-shadow_warning_focus: @shadow-distance-none;
+@form-color-shadow_warning_focus: var(
+  ~'@{arco-cssvars-prefix}-color-warning-light-2'
+);
+
+@form-color-bg_success: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@form-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@form-color-bg_success_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@form-color-border_success: @color-transparent;
+@form-color-border_success_focus: @color-success-6;
+@form-color-border_success_hover: @color-transparent;
+@form-size-shadow_success_focus: @shadow-distance-none;
+@form-color-shadow_success_focus: var(
+  ~'@{arco-cssvars-prefix}-color-success-light-2'
+);
+
+@form-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
+@form-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
+@form-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@form-color-border_error: @color-transparent;
+@form-color-border_error_focus: @color-danger-6;
+@form-color-border_error_hover: @color-transparent;
+@form-size-shadow_error_focus: @shadow-distance-none;
+@form-color-shadow_error_focus: var(
+  ~'@{arco-cssvars-prefix}-color-danger-light-2'
+);
+
+@form-color-bg_validating: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@form-color-bg_validating_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@form-color-bg_validating_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@form-color-border_validating: @color-transparent;
+@form-color-border_validating_focus: @color-primary-6;
+@form-color-border_validating_hover: @color-transparent;
+@form-size-shadow_validating_focus: @shadow-distance-none;
+@form-color-shadow_validating_focus: var(
+  ~'@{arco-cssvars-prefix}-color-primary-light-2'
+);
+
+@form-color-tip-text_success: @color-success-6;
+@form-color-tip-icon-text_success: @color-success-6;
+@form-color-tip-text_error: @color-danger-6;
+@form-color-tip-icon-text_error: @color-danger-6;
+@form-color-tip-text_warning: @color-warning-6;
+@form-color-tip-icon-text_warning: @color-warning-6;
+@form-color-tip-text_validating: @color-primary-6;
+@form-color-tip-icon-text_validating: @color-primary-6;

package/lib/grid/style/col.less

@@ -1,95 +1,95 @@
-@import '../../style/theme/index.less';
-
-@col-prefix-cls: ~'@{prefix}-col';
-
-.@{col-prefix-cls} {
-  box-sizing: border-box;
-
-  .span(@span, @adaptation) when (@span > 0) and (@adaptation = '') {
-    .span((@span - 1), @adaptation);
-
-    &-@{span} {
-      flex: 0 0 (100% / 24) * @span;
-      width: (100% / 24) * @span;
-    }
-  }
-  .span(@span, @adaptation) when (@span > 0) and (not(@adaptation = '')) {
-    .span((@span - 1), @adaptation);
-
-    &-@{adaptation}-@{span} {
-      flex: 0 0 (100% / 24) * @span;
-      width: (100% / 24) * @span;
-    }
-  }
-
-  .span(24, '');
-
-  .offset(@offset, @adaptation) when (@offset > 0) and (@adaptation = '') {
-    .offset((@offset - 1), @adaptation);
-
-    &-offset-@{offset} {
-      margin-left: (100% / 24) * @offset;
-    }
-  }
-  .offset(@offset, @adaptation) when (@offset > 0) and (not(@adaptation = '')) {
-    .offset((@offset - 1), @adaptation);
-
-    &-@{adaptation}-offset-@{offset} {
-      margin-left: (100% / 24) * @offset;
-    }
-  }
-
-  .offset(23, '');
-
-  .order(@order, @adaptation) when (@order > 0) and (@adaptation = '') {
-    .order((@order - 1), @adaptation);
-
-    &-order-@{order} {
-      order: @order;
-    }
-  }
-  .order(@order, @adaptation) when (@order > 0) and (not(@adaptation = '')) {
-    .order((@order - 1), @adaptation);
-
-    &-@{adaptation}-order-@{order} {
-      order: @order;
-    }
-  }
-
-  .order(24, '');
-
-  // adaptation
-  .span(24, xs);
-  .offset(23, xs);
-  .order(24, xs);
-
-  @media (min-width: 576px) {
-    .span(24, sm);
-    .offset(23, sm);
-    .order(24, sm);
-  }
-
-  @media (min-width: 768px) {
-    .span(24, md);
-    .offset(23, md);
-    .order(24, md);
-  }
-
-  @media (min-width: 992px) {
-    .span(24, lg);
-    .offset(23, lg);
-    .order(24, lg);
-  }
-
-  @media (min-width: 1200px) {
-    .span(24, xl);
-    .offset(23, xl);
-    .order(24, xl);
-  }
-
-  @media (min-width: 1600px) {
-    .span(24, xxl);
-    .offset(23, xxl);
-    .order(24, xxl);
-  }
-}
+@import '../../style/theme/index.less';
+
+@col-prefix-cls: ~'@{prefix}-col';
+
+.@{col-prefix-cls} {
+  box-sizing: border-box;
+
+  .span(@span, @adaptation) when (@span > 0) and (@adaptation = '') {
+    .span((@span - 1), @adaptation);
+
+    &-@{span} {
+      flex: 0 0 (100% / 24) * @span;
+      width: (100% / 24) * @span;
+    }
+  }
+  .span(@span, @adaptation) when (@span > 0) and (not(@adaptation = '')) {
+    .span((@span - 1), @adaptation);
+
+    &-@{adaptation}-@{span} {
+      flex: 0 0 (100% / 24) * @span;
+      width: (100% / 24) * @span;
+    }
+  }
+
+  .span(24, '');
+
+  .offset(@offset, @adaptation) when (@offset > 0) and (@adaptation = '') {
+    .offset((@offset - 1), @adaptation);
+
+    &-offset-@{offset} {
+      margin-left: (100% / 24) * @offset;
+    }
+  }
+  .offset(@offset, @adaptation) when (@offset > 0) and (not(@adaptation = '')) {
+    .offset((@offset - 1), @adaptation);
+
+    &-@{adaptation}-offset-@{offset} {
+      margin-left: (100% / 24) * @offset;
+    }
+  }
+
+  .offset(23, '');
+
+  .order(@order, @adaptation) when (@order > 0) and (@adaptation = '') {
+    .order((@order - 1), @adaptation);
+
+    &-order-@{order} {
+      order: @order;
+    }
+  }
+  .order(@order, @adaptation) when (@order > 0) and (not(@adaptation = '')) {
+    .order((@order - 1), @adaptation);
+
+    &-@{adaptation}-order-@{order} {
+      order: @order;
+    }
+  }
+
+  .order(24, '');
+
+  // adaptation
+  .span(24, xs);
+  .offset(23, xs);
+  .order(24, xs);
+
+  @media (min-width: 576px) {
+    .span(24, sm);
+    .offset(23, sm);
+    .order(24, sm);
+  }
+
+  @media (min-width: 768px) {
+    .span(24, md);
+    .offset(23, md);
+    .order(24, md);
+  }
+
+  @media (min-width: 992px) {
+    .span(24, lg);
+    .offset(23, lg);
+    .order(24, lg);
+  }
+
+  @media (min-width: 1200px) {
+    .span(24, xl);
+    .offset(23, xl);
+    .order(24, xl);
+  }
+
+  @media (min-width: 1600px) {
+    .span(24, xxl);
+    .offset(23, xxl);
+    .order(24, xxl);
+  }
+}

package/lib/grid/style/grid.less

@@ -1,5 +1,5 @@
-@grid-prefix-cls: ~'@{prefix}-grid';
-
-.@{grid-prefix-cls} {
-  display: grid;
-}
+@grid-prefix-cls: ~'@{prefix}-grid';
+
+.@{grid-prefix-cls} {
+  display: grid;
+}

package/lib/grid/style/index.less

@@ -1,3 +1,3 @@
-@import './row.less';
-@import './col.less';
-@import './grid.less';
+@import './row.less';
+@import './col.less';
+@import './grid.less';