nsc-react-component 1.0.24 → 1.1.0

package/lib/button/index.less

@@ -1,371 +1,371 @@
-@title-font-size: 24px; //标题字体大小
-
-@page-title-font-size: 20px; //页面标题字体大小
-
-@model-title-font-size: 18px; //模块标题大小
-
-@base-font-size: 16px; //主要字体大小
-
-@tip-font-size: 14px; //副文本大小
-
-@font-title-color: #333333; //一级标题字体颜色
-
-@font-base-color: #666666; //主要字体颜色
-
-@font-sub-color: #999999; //辅助文字颜色
-
-@line-color: #e1e1e1; //分割线颜色
-
-@table-color: #ededed; //表头背景颜色
-
-@theme-color-default: #4286ed; //默认颜色
-
-@theme-color-default-hover: #3372d2; //默认hover颜色
-
-@theme-color-default-press: #1c54a8; //默认press颜色
-
-@theme-color-danger: #ff4d4f; //危险颜色
-
-@theme-color-danger-hover: #e63e40; //危险hover颜色 主要用于按钮
-
-@theme-color-danger-press: #cd2f31; //危险press颜色
-
-@theme-color-success: #28b452; //成功颜色
-
-@theme-color-success-hover: #229b46; //成功hover颜色
-
-@theme-color-success-press: #197033; //成功press颜色
-
-@theme-color-stress: #667ff6; //成功颜色
-
-@theme-color-stress-hover: #5068db; //成功hover颜色
-
-@theme-color-stress-press: #394eb6; //成功press颜色
-
-@theme-color-warning: #faad14; //警告颜色
-
-@buttonHeight: 40px; //按钮高度--固定高度
-
-@buttonRadius: 4px; //按钮圆角
-
-@baseFontFamily: "PingFang SC"; //基本字体
-
-@disabled-font-color: #ffffff80;
-@font-color: #ffffff;
-
-.button_base {
-  display: inline-flex;
-  :global  {
-    .ant-btn  {
-      font-family: @baseFontFamily;
-      border-radius: @buttonRadius;
-      outline: none;
-      cursor: pointer;
-      height: @buttonHeight;
-      font-size: 16px;
-      height: 40px;
-      min-width: 112px;
-    }
-  }
-}
-.button_base[disabled] {
-  cursor: not-allowed;
-}
-
-.button_base[ant-click-animating-without-extra-node]:after {
-  border: 0 none;
-  opacity: 0;
-  animation: none 0 ease 0 1 normal;
-}
-//主题色
-.normal_primary {
-  :global  {
-    .ant-btn  {
-      color: @font-color;
-      background: @theme-color-default;
-      border: 1px solid @theme-color-default;
-    }
-    .ant-btn:hover {
-      color: @font-color;
-      background: @theme-color-default-hover;
-      border: 1px solid @theme-color-default-hover;
-    }
-
-    .ant-btn[disabled],
-    .ant-btn:hover[disabled],
-    .ant-btn:focus[disabled],
-    .ant-btn:active[disabled] {
-      color: @disabled-font-color;
-      background: @theme-color-default;
-      border: 1px solid @theme-color-default;
-    }
-
-    .ant-btn:active,
-    .ant-btn:focus {
-      color: @font-color;
-      background-color: @theme-color-default-press;
-      border: 1px solid @theme-color-default-press;
-    }
-  }
-}
-
-//边框按钮，主题色
-.normal_border {
-  :global  {
-    .ant-btn  {
-      color: @theme-color-default;
-      background: @font-color;
-      border: 1px solid @theme-color-default;
-    }
-    .ant-btn:hover {
-      color: @theme-color-default;
-      background: rgba(229, 239, 255, 1);
-      border: 1px solid @theme-color-default;
-    }
-
-    .ant-btn[disabled],
-    .ant-btn:hover[disabled],
-    .ant-btn:focus[disabled],
-    .ant-btn:active[disabled] {
-      color: rgba(66, 134, 237, 0.5);
-      background: @font-color;
-      border: 1px solid @theme-color-default;
-    }
-
-    .ant-btn:active,
-    .ant-btn:focus {
-      color: @theme-color-default;
-      background-color: rgba(207, 226, 255, 1);
-      border: 1px solid @theme-color-default;
-    }
-  }
-}
-
-//危险
-.danger_primary {
-  :global  {
-    .ant-btn  {
-      color: @font-color;
-      background: @theme-color-danger;
-      border: 1px solid @theme-color-danger;
-    }
-    .ant-btn:hover {
-      color: @font-color;
-      background: @theme-color-danger-hover;
-      border: 1px solid @theme-color-danger-hover;
-    }
-
-    .ant-btn:active,
-    .ant-btn:focus {
-      color: @font-color;
-      background-color: @theme-color-danger-press;
-      border: 1px solid @theme-color-danger-press;
-    }
-    .ant-btn:active::before {
-      background: rgba(0, 0, 0, 5%);
-    }
-
-    .ant-btn[disabled],
-    .ant-btn:hover[disabled],
-    .ant-btn:focus[disabled],
-    .ant-btn:active[disabled] {
-      color: @disabled-font-color;
-      background: @theme-color-danger;
-      border: 1px solid @theme-color-danger;
-    }
-  }
-}
-.danger_border {
-  :global  {
-    .ant-btn  {
-      color: @theme-color-danger;
-      background: @font-color;
-      border: 1px solid @theme-color-danger;
-    }
-    .ant-btn[disabled],
-    .ant-btn:hover[disabled],
-    .ant-btn:focus[disabled],
-    .ant-btn:active[disabled] {
-      color: rgba(255, 63, 63, 0.5);
-      background: @font-color;
-      border: 1px solid @theme-color-danger;
-    }
-
-    .ant-btn:hover {
-      color: @theme-color-danger;
-      background: rgba(255, 244, 244, 1);
-      border: 1px solid @theme-color-danger;
-    }
-
-    .ant-btn:active,
-    .ant-btn:focus {
-      color: @theme-color-danger-press;
-      background: rgba(255, 231, 231, 1);
-      border: 1px solid @theme-color-danger-press;
-    }
-  }
-}
-
-//成功色
-.success_primary {
-  :global  {
-    .ant-btn  {
-      color: @font-color;
-      background: @theme-color-success;
-      border: 1px solid @theme-color-success;
-    }
-    .ant-btn:hover {
-      color: @font-color;
-      background: @theme-color-success-hover;
-      border: 1px solid @theme-color-success-hover;
-    }
-
-    .ant-btn[disabled],
-    .ant-btn:hover[disabled],
-    .ant-btn:focus[disabled],
-    .ant-btn:active[disabled] {
-      color: @disabled-font-color;
-      background: @theme-color-success;
-      border: 1px solid @theme-color-success;
-    }
-
-    .ant-btn:active,
-    .ant-btn:focus {
-      color: @font-color;
-      background-color: @theme-color-success-press;
-      border: 1px solid @theme-color-success-press;
-    }
-  }
-}
-
-//边框按钮，成功色
-.success_border {
-  :global  {
-    .ant-btn  {
-      color: @theme-color-success;
-      background: @font-color;
-      border: 1px solid @theme-color-success;
-    }
-    .ant-btn:hover {
-      color: @theme-color-success;
-      background: rgba(237, 255, 243, 1);
-      border: 1px solid @theme-color-success;
-    }
-
-    .ant-btn[disabled],
-    .ant-btn:hover[disabled],
-    .ant-btn:focus[disabled],
-    .ant-btn:active[disabled] {
-      color: rgba(40, 180, 82, 0.5);
-      background: @font-color;
-      border: 1px solid @theme-color-success;
-    }
-
-    .ant-btn:active,
-    .ant-btn:focus {
-      color: @theme-color-success;
-      background-color: rgba(212, 255, 225, 1);
-      border: 1px solid @theme-color-success;
-    }
-  }
-}
-
-//强调颜色
-.stress_primary {
-  :global  {
-    .ant-btn  {
-      color: @font-color;
-      background: @theme-color-stress;
-      border: 1px solid @theme-color-stress;
-    }
-    .ant-btn:hover {
-      color: @font-color;
-      background: @theme-color-stress-hover;
-      border: 1px solid @theme-color-stress-hover;
-    }
-
-    .ant-btn[disabled],
-    .ant-btn:hover[disabled],
-    .ant-btn:focus[disabled],
-    .ant-btn:active[disabled] {
-      color: @disabled-font-color;
-      background: @theme-color-stress;
-      border: 1px solid @theme-color-stress;
-    }
-
-    .ant-btn:active,
-    .ant-btn:focus {
-      color: @font-color;
-      background-color: @theme-color-stress-press;
-      border: 1px solid @theme-color-stress-press;
-    }
-  }
-}
-
-//边框按钮
-.stress_border {
-  :global  {
-    .ant-btn  {
-      color: @theme-color-stress;
-      background: @font-color;
-      border: 1px solid @theme-color-stress;
-    }
-    .ant-btn:hover {
-      color: @theme-color-stress;
-      background: rgba(232, 236, 255, 1);
-      border: 1px solid @theme-color-stress;
-    }
-
-    .ant-btn[disabled],
-    .ant-btn:hover[disabled],
-    .ant-btn:focus[disabled],
-    .ant-btn:active[disabled] {
-      color: rgba(102, 127, 246, 0.5);
-      background: @font-color;
-      border: 1px solid @theme-color-stress;
-    }
-
-    .ant-btn:active,
-    .ant-btn:focus {
-      color: @theme-color-stress;
-      background-color: rgba(191, 202, 255, 1);
-      border: 1px solid @theme-color-stress;
-    }
-  }
-}
-
-//白色
-.white_primary,
-.white_border {
-  :global  {
-    .ant-btn  {
-      color: @font-base-color;
-      background: @font-color;
-      border: 1px solid #cccccc;
-    }
-    .ant-btn:hover {
-      color: @font-base-color;
-      background: #f0f0f0;
-      border: 1px solid #cccccc;
-    }
-
-    .ant-btn[disabled],
-    .ant-btn:hover[disabled],
-    .ant-btn:focus[disabled],
-    .ant-btn:active[disabled] {
-      color: rgba(102, 102, 102, 0.5);
-      background: #ffffff;
-      border: 1px solid #cccccc;
-    }
-    .ant-btn:active,
-    .ant-btn:focus {
-      color: @font-base-color;
-      background-color: rgba(233, 233, 233, 1);
-      border: 1px solid #cccccc;
-    }
-  }
-}
-
-.icon {
-  font-size: @tip-font-size;
-}
+@title-font-size: 24px; //标题字体大小
+
+@page-title-font-size: 20px; //页面标题字体大小
+
+@model-title-font-size: 18px; //模块标题大小
+
+@base-font-size: 16px; //主要字体大小
+
+@tip-font-size: 14px; //副文本大小
+
+@font-title-color: #333333; //一级标题字体颜色
+
+@font-base-color: #666666; //主要字体颜色
+
+@font-sub-color: #999999; //辅助文字颜色
+
+@line-color: #e1e1e1; //分割线颜色
+
+@table-color: #ededed; //表头背景颜色
+
+@theme-color-default: #4286ed; //默认颜色
+
+@theme-color-default-hover: #3372d2; //默认hover颜色
+
+@theme-color-default-press: #1c54a8; //默认press颜色
+
+@theme-color-danger: #ff4d4f; //危险颜色
+
+@theme-color-danger-hover: #e63e40; //危险hover颜色 主要用于按钮
+
+@theme-color-danger-press: #cd2f31; //危险press颜色
+
+@theme-color-success: #28b452; //成功颜色
+
+@theme-color-success-hover: #229b46; //成功hover颜色
+
+@theme-color-success-press: #197033; //成功press颜色
+
+@theme-color-stress: #667ff6; //成功颜色
+
+@theme-color-stress-hover: #5068db; //成功hover颜色
+
+@theme-color-stress-press: #394eb6; //成功press颜色
+
+@theme-color-warning: #faad14; //警告颜色
+
+@buttonHeight: 40px; //按钮高度--固定高度
+
+@buttonRadius: 4px; //按钮圆角
+
+@baseFontFamily: "PingFang SC"; //基本字体
+
+@disabled-font-color: #ffffff80;
+@font-color: #ffffff;
+
+.button_base {
+  display: inline-flex;
+  :global  {
+    .ant-btn  {
+      font-family: @baseFontFamily;
+      border-radius: @buttonRadius;
+      outline: none;
+      cursor: pointer;
+      height: @buttonHeight;
+      font-size: 16px;
+      height: 40px;
+      min-width: 112px;
+    }
+  }
+}
+.button_base[disabled] {
+  cursor: not-allowed;
+}
+
+.button_base[ant-click-animating-without-extra-node]:after {
+  border: 0 none;
+  opacity: 0;
+  animation: none 0 ease 0 1 normal;
+}
+//主题色
+.normal_primary {
+  :global  {
+    .ant-btn  {
+      color: @font-color;
+      background: @theme-color-default;
+      border: 1px solid @theme-color-default;
+    }
+    .ant-btn:hover {
+      color: @font-color;
+      background: @theme-color-default-hover;
+      border: 1px solid @theme-color-default-hover;
+    }
+
+    .ant-btn[disabled],
+    .ant-btn:hover[disabled],
+    .ant-btn:focus[disabled],
+    .ant-btn:active[disabled] {
+      color: @disabled-font-color;
+      background: @theme-color-default;
+      border: 1px solid @theme-color-default;
+    }
+
+    .ant-btn:active,
+    .ant-btn:focus {
+      color: @font-color;
+      background-color: @theme-color-default-press;
+      border: 1px solid @theme-color-default-press;
+    }
+  }
+}
+
+//边框按钮，主题色
+.normal_border {
+  :global  {
+    .ant-btn  {
+      color: @theme-color-default;
+      background: @font-color;
+      border: 1px solid @theme-color-default;
+    }
+    .ant-btn:hover {
+      color: @theme-color-default;
+      background: rgba(229, 239, 255, 1);
+      border: 1px solid @theme-color-default;
+    }
+
+    .ant-btn[disabled],
+    .ant-btn:hover[disabled],
+    .ant-btn:focus[disabled],
+    .ant-btn:active[disabled] {
+      color: rgba(66, 134, 237, 0.5);
+      background: @font-color;
+      border: 1px solid @theme-color-default;
+    }
+
+    .ant-btn:active,
+    .ant-btn:focus {
+      color: @theme-color-default;
+      background-color: rgba(207, 226, 255, 1);
+      border: 1px solid @theme-color-default;
+    }
+  }
+}
+
+//危险
+.danger_primary {
+  :global  {
+    .ant-btn  {
+      color: @font-color;
+      background: @theme-color-danger;
+      border: 1px solid @theme-color-danger;
+    }
+    .ant-btn:hover {
+      color: @font-color;
+      background: @theme-color-danger-hover;
+      border: 1px solid @theme-color-danger-hover;
+    }
+
+    .ant-btn:active,
+    .ant-btn:focus {
+      color: @font-color;
+      background-color: @theme-color-danger-press;
+      border: 1px solid @theme-color-danger-press;
+    }
+    .ant-btn:active::before {
+      background: rgba(0, 0, 0, 5%);
+    }
+
+    .ant-btn[disabled],
+    .ant-btn:hover[disabled],
+    .ant-btn:focus[disabled],
+    .ant-btn:active[disabled] {
+      color: @disabled-font-color;
+      background: @theme-color-danger;
+      border: 1px solid @theme-color-danger;
+    }
+  }
+}
+.danger_border {
+  :global  {
+    .ant-btn  {
+      color: @theme-color-danger;
+      background: @font-color;
+      border: 1px solid @theme-color-danger;
+    }
+    .ant-btn[disabled],
+    .ant-btn:hover[disabled],
+    .ant-btn:focus[disabled],
+    .ant-btn:active[disabled] {
+      color: rgba(255, 63, 63, 0.5);
+      background: @font-color;
+      border: 1px solid @theme-color-danger;
+    }
+
+    .ant-btn:hover {
+      color: @theme-color-danger;
+      background: rgba(255, 244, 244, 1);
+      border: 1px solid @theme-color-danger;
+    }
+
+    .ant-btn:active,
+    .ant-btn:focus {
+      color: @theme-color-danger-press;
+      background: rgba(255, 231, 231, 1);
+      border: 1px solid @theme-color-danger-press;
+    }
+  }
+}
+
+//成功色
+.success_primary {
+  :global  {
+    .ant-btn  {
+      color: @font-color;
+      background: @theme-color-success;
+      border: 1px solid @theme-color-success;
+    }
+    .ant-btn:hover {
+      color: @font-color;
+      background: @theme-color-success-hover;
+      border: 1px solid @theme-color-success-hover;
+    }
+
+    .ant-btn[disabled],
+    .ant-btn:hover[disabled],
+    .ant-btn:focus[disabled],
+    .ant-btn:active[disabled] {
+      color: @disabled-font-color;
+      background: @theme-color-success;
+      border: 1px solid @theme-color-success;
+    }
+
+    .ant-btn:active,
+    .ant-btn:focus {
+      color: @font-color;
+      background-color: @theme-color-success-press;
+      border: 1px solid @theme-color-success-press;
+    }
+  }
+}
+
+//边框按钮，成功色
+.success_border {
+  :global  {
+    .ant-btn  {
+      color: @theme-color-success;
+      background: @font-color;
+      border: 1px solid @theme-color-success;
+    }
+    .ant-btn:hover {
+      color: @theme-color-success;
+      background: rgba(237, 255, 243, 1);
+      border: 1px solid @theme-color-success;
+    }
+
+    .ant-btn[disabled],
+    .ant-btn:hover[disabled],
+    .ant-btn:focus[disabled],
+    .ant-btn:active[disabled] {
+      color: rgba(40, 180, 82, 0.5);
+      background: @font-color;
+      border: 1px solid @theme-color-success;
+    }
+
+    .ant-btn:active,
+    .ant-btn:focus {
+      color: @theme-color-success;
+      background-color: rgba(212, 255, 225, 1);
+      border: 1px solid @theme-color-success;
+    }
+  }
+}
+
+//强调颜色
+.stress_primary {
+  :global  {
+    .ant-btn  {
+      color: @font-color;
+      background: @theme-color-stress;
+      border: 1px solid @theme-color-stress;
+    }
+    .ant-btn:hover {
+      color: @font-color;
+      background: @theme-color-stress-hover;
+      border: 1px solid @theme-color-stress-hover;
+    }
+
+    .ant-btn[disabled],
+    .ant-btn:hover[disabled],
+    .ant-btn:focus[disabled],
+    .ant-btn:active[disabled] {
+      color: @disabled-font-color;
+      background: @theme-color-stress;
+      border: 1px solid @theme-color-stress;
+    }
+
+    .ant-btn:active,
+    .ant-btn:focus {
+      color: @font-color;
+      background-color: @theme-color-stress-press;
+      border: 1px solid @theme-color-stress-press;
+    }
+  }
+}
+
+//边框按钮
+.stress_border {
+  :global  {
+    .ant-btn  {
+      color: @theme-color-stress;
+      background: @font-color;
+      border: 1px solid @theme-color-stress;
+    }
+    .ant-btn:hover {
+      color: @theme-color-stress;
+      background: rgba(232, 236, 255, 1);
+      border: 1px solid @theme-color-stress;
+    }
+
+    .ant-btn[disabled],
+    .ant-btn:hover[disabled],
+    .ant-btn:focus[disabled],
+    .ant-btn:active[disabled] {
+      color: rgba(102, 127, 246, 0.5);
+      background: @font-color;
+      border: 1px solid @theme-color-stress;
+    }
+
+    .ant-btn:active,
+    .ant-btn:focus {
+      color: @theme-color-stress;
+      background-color: rgba(191, 202, 255, 1);
+      border: 1px solid @theme-color-stress;
+    }
+  }
+}
+
+//白色
+.white_primary,
+.white_border {
+  :global  {
+    .ant-btn  {
+      color: @font-base-color;
+      background: @font-color;
+      border: 1px solid #cccccc;
+    }
+    .ant-btn:hover {
+      color: @font-base-color;
+      background: #f0f0f0;
+      border: 1px solid #cccccc;
+    }
+
+    .ant-btn[disabled],
+    .ant-btn:hover[disabled],
+    .ant-btn:focus[disabled],
+    .ant-btn:active[disabled] {
+      color: rgba(102, 102, 102, 0.5);
+      background: #ffffff;
+      border: 1px solid #cccccc;
+    }
+    .ant-btn:active,
+    .ant-btn:focus {
+      color: @font-base-color;
+      background-color: rgba(233, 233, 233, 1);
+      border: 1px solid #cccccc;
+    }
+  }
+}
+
+.icon {
+  font-size: @tip-font-size;
+}