@aloudata/aloudata-design 0.2.0-beta.5 → 0.2.0-beta.8

package/es/Tabs/style/index.less

@@ -0,0 +1,61 @@
+@import '../../style/index.less';
+
+.ald-tabs {
+  &.ant-tabs {
+    color: @NL30;
+  }
+
+  .ant-tabs-tab {
+    font-size: 14px;
+    line-height: 20px;
+
+    &:hover {
+      color: inherit;
+    }
+
+    &.ant-tabs-tab-active {
+      font-weight: 500;
+    }
+  }
+
+  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    text-shadow: none;
+  }
+
+  /* large size */
+  &.ant-tabs-large {
+    .ant-tabs-tab {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+
+  .ant-tabs-nav-more {
+    margin: 0 !important;
+  }
+
+  /* body自适应高度 */
+  &.ald-adapt-height {
+    height: 100%;
+
+    .ant-tabs-content {
+      height: 100%;
+    }
+
+    .ant-tabs-tabpane {
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+
+  &.ant-tabs-top > .ant-tabs-nav,
+  &.ant-tabs-bottom > .ant-tabs-nav,
+  &.ant-tabs-top > div > .ant-tabs-nav,
+  &.ant-tabs-bottom > div > .ant-tabs-nav {
+    margin: 0 0 24px;
+
+    &::before {
+      border-color: @NL90;
+    }
+  }
+}

package/es/Tooltip/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 export declare type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
 export interface ITooltipProps {
     /**

package/es/Tooltip/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import AntdTooltip from 'antd/lib/tooltip';
 import classNames from 'classnames';
-import './style';
 export default function Tooltip(props) {
   var children = props.children,
       title = props.title,

package/es/Tooltip/style/index.js

@@ -1,2 +1,2 @@
 import '../../style';
-import "./index.css";
+import './index.less';

package/es/Tooltip/style/index.less

@@ -0,0 +1,14 @@
+@import '../../style/index.less';
+
+.ald-tooltip-overlay {
+  .ant-tooltip-inner {
+    padding: 6px 12px;
+    border-radius: @border-radius-base;
+    box-shadow: none;
+    background: @BG10;
+  }
+
+  .ant-tooltip-arrow-content {
+    background: @BG10;
+  }
+}

package/es/style/index.js

@@ -1,2 +1,2 @@
 import 'antd/dist/antd.compact.css';
-import "./index.css";
+import './index.less';

package/es/style/index.less

@@ -0,0 +1,3 @@
+@root-entry-name: default;
+@import './mixins/index.less';
+@import './themes/default/index.less';

package/es/style/themes/default/index.less

@@ -0,0 +1,36 @@
+@import './themeColor.module.less';
+@font-family:sans-serif,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol','Noto Color Emoji';
+@ald-prefix: ant;
+
+
+// height rules
+@height-base: 28px;
+@height-lg: 32px;
+@height-sm: 22px;
+
+
+@border-radius-base: 8px;
+@border-radius-sm: 6px;
+@border-color-base: #e7e8e9; // 边框的基础色
+
+// color
+@primary-color: @B40; // 主色调
+@error-color: @SC40; // 错误色
+@success-color: @SA40; // 成功色
+@warning-color: @SB40; // 警告色
+@init-color: rgba(39, 40, 46, 0.5); // 默认颜色
+@adapt-table-border-color: rgba(39, 40, 46, 0.1); // 可拉伸表格的颜色
+@common-text-color: #27282e;
+@tableheader-bg: #f9f9f9; // 表头背景
+@primary-bg: #fff; // 主要背景色
+@btn-shadow: unset; // 取消btn的阴影,
+@text-shadow:unset; // 取消文字阴影
+
+
+@menu-item-font-size: 14px;
+
+
+//Select
+
+@select-placeholder-color: @NL50;
+@select-label-margin-right:4px;

package/es/style/themes/default/themeColor.module.less

@@ -0,0 +1,259 @@
+/**
+*中性浅色背景 Neutral Light
+* 主要用于文字颜色
+**/
+@NL0: #121212;
+@NL97: fade(@NL0, 3%);
+@NL95: fade(@NL0, 5%);
+@NL90: fade(@NL0, 10%);
+@NL80: fade(@NL0, 20%);
+@NL70: fade(@NL0, 30%);
+@NL60: fade(@NL0, 40%);
+@NL50: fade(@NL0, 50%);
+@NL40: fade(@NL0, 60%);
+@NL30: fade(@NL0, 70%);
+@NL20: fade(@NL0, 80%);
+@NL10: fade(@NL0, 90%);
+
+/**
+*中性深色背景 Neutral Dark
+* 主要用于文字颜色
+**/
+@ND0: #FFFFFF;
+@ND97: fade(@ND0, 3%);
+@ND95: fade(@ND0, 5%);
+@ND90: fade(@ND0, 10%);
+@ND80: fade(@ND0, 20%);
+@ND70: fade(@ND0, 30%);
+@ND60: fade(@ND0, 40%);
+@ND50: fade(@ND0, 50%);
+@ND40: fade(@ND0, 60%);
+@ND30: fade(@ND0, 70%);
+@ND20: fade(@ND0, 80%);
+@ND10: fade(@ND0, 90%);
+
+/**
+* 品牌色 Brand
+* 用作主操作强调、文字链、品牌传递
+**/
+@B10: #00127B;
+@B20: #1029BC;
+@B30: #2944D7;
+@B40: #435CF0;
+@B50: #6077FF;
+@B60: #7F92FF;
+@B70: #9FADFF;
+@B80: #BDC9FF;
+@B90: #DFE3FE;
+@B95: #EFF1FF;
+@B98: #F8F9FF;
+
+/**
+* 辅助A Secondary A
+* 表达完成、成功
+**/
+@SA10: #00270F;
+@SA20: #024F20;
+@SA30: #007830;
+@SA40: #059F41;
+@SA50: #08C552;
+@SA60: #1BDE6D;
+@SA70: #35F886;
+@SA80: #70FFAB;
+@SA90: #B8FFD5;
+@SA95: #DBFFEA;
+@SA98: #EFFFF5;
+
+/**
+* 辅助B Secondary B
+* 表达提醒、警告
+**/
+@SB10: #261600;
+@SB20: #542B00;
+@SB30: #7E4100;
+@SB40: #A85700;
+@SB50: #D26E00;
+@SB60: #F48500;
+@SB70: #FFA000;
+@SB80: #FFBF5B;
+@SB90: #FFDEB0;
+@SB95: #FFF0D9;
+@SB98: #FFF8EE;
+
+/**
+* 辅助C Secondary C
+* 表达错误、失败
+**/
+@SC10: #550005;
+@SC20: #AF0001;
+@SC30: #EC0011;
+@SC40: #FF0033;
+@SC50: #FF2755;
+@SC60: #FF5B78;
+@SC70: #FF879A;
+@SC80: #FFAFBB;
+@SC90: #FFD7DE;
+@SC95: #FFEBEE;
+@SC98: #FFF6F7;
+
+/**
+* 背景色 Background
+* 主要用于背景色
+**/
+@BG0: #121212;
+@BG10: #2A2A2A;
+@BG20: #414141;
+@BG30: #595959;
+@BG40: #717171;
+@BG50: #88888B;
+@BG60: #A0A0A0;
+@BG70: #B7B7B7;
+@BG80: #D0D0D0;
+@BG90: #E7E8E8;
+@BG95: #F3F3F3;
+@BG97: #F8F8F8;
+@BG100: #FFFFFF;
+
+/**
+* 品牌背景 Brand Background
+* 品牌色衍生灰调背景
+**/
+@BBG10: #061B3B;
+@BBG15: #112645;
+@BBG20: #203555;
+@BBG30: #3B4F6E;
+@BBG40: #536788;
+@BBG50: #6C82A3;
+@BBG60: #869BBB;
+@BBG70: #A0B5D5;
+@BBG80: #BACDEE;
+@BBG90: #D7E7FE;
+@BBG95: #EBF3FF;
+@BBG97: #F3F8FF;
+@BBG98: #F7F8FF;
+
+/***
+* 黑白
+***/
+@white:#FFFFFF;
+@black:#121212;
+
+/***
+* 图片
+***/
+@imageholder: fade(#999898, 30%);
+@mate: fade(#000000, 50%);
+
+/***
+* 投影
+***/
+@shadow-option: 0 1px 1px rgba(0, 0, 0, 0.12);
+@shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 1px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.08);
+@shadow-actionsheet: 0 3px 5px rgba(0, 0, 0, 0.1), 0 1px 18px rgba(0, 0, 0, 0.06), 0 6px 10px rgba(0, 0, 0, 0.08);
+@shadow-notification: 0 11px 15px rgba(0, 0, 0, 0.1), 0 9px 46px rgba(0, 0, 0, 0.08), 0 24px 38px rgba(0, 0, 0, 0.04);
+
+// 用css module的能力，将less变量输出给js，供js文件中使用
+:export {
+  NL0: @NL0;
+  NL97: @NL97;
+  NL95: @NL95;
+  NL90: @NL90;
+  NL80: @NL80;
+  NL70: @NL70;
+  NL60: @NL60;
+  NL50: @NL50;
+  NL40: @NL40;
+  NL30: @NL30;
+  NL20: @NL20;
+  NL10: @NL10;
+  ND0: @ND0;
+  ND97: @ND97;
+  ND95: @ND95;
+  ND90: @ND90;
+  ND80: @ND80;
+  ND70: @ND70;
+  ND60: @ND60;
+  ND50: @ND50;
+  ND40: @ND40;
+  ND30: @ND30;
+  ND20: @ND20;
+  ND10: @ND10;
+  B10: @B10;
+  B20: @B20;
+  B30: @B30;
+  B40: @B40;
+  B50: @B50;
+  B60: @B60;
+  B70: @B70;
+  B80: @B80;
+  B90: @B90;
+  B95: @B95;
+  B98: @B98;
+  SA10: @SA10;
+  SA20: @SA20;
+  SA30: @SA30;
+  SA40: @SA40;
+  SA50: @SA50;
+  SA60: @SA60;
+  SA70: @SA70;
+  SA80: @SA80;
+  SA90: @SA90;
+  SA95: @SA95;
+  SA98: @SA98;
+  SB10: @SB10;
+  SB20: @SB20;
+  SB30: @SB30;
+  SB40: @SB40;
+  SB50: @SB50;
+  SB60: @SB60;
+  SB70: @SB70;
+  SB80: @SB80;
+  SB90: @SB90;
+  SB95: @SB95;
+  SB98: @SB98;
+  SC10: @SC10;
+  SC20: @SC20;
+  SC30: @SC30;
+  SC40: @SC40;
+  SC50: @SC50;
+  SC60: @SC60;
+  SC70: @SC70;
+  SC80: @SC80;
+  SC90: @SC90;
+  SC95: @SC95;
+  SC98: @SC98;
+  BG0: @BG0;
+  BG10: @BG10;
+  BG20: @BG20;
+  BG30: @BG30;
+  BG40: @BG40;
+  BG50: @BG50;
+  BG60: @BG60;
+  BG70: @BG70;
+  BG80: @BG80;
+  BG90: @BG90;
+  BG95: @BG95;
+  BG97: @BG97;
+  BG100: @BG100;
+  BBG10: @BBG10;
+  BBG15: @BBG15;
+  BBG20: @BBG20;
+  BBG30: @BBG30;
+  BBG40: @BBG40;
+  BBG50: @BBG50;
+  BBG60: @BBG60;
+  BBG70: @BBG70;
+  BBG80: @BBG80;
+  BBG90: @BBG90;
+  BBG95: @BBG95;
+  BBG97: @BBG97;
+  BBG98: @BBG98;
+  WHITE: @white;
+  BLACK: @black;
+  IMAGE_HOLDER: @imageholder;
+  MATE: @mate;
+  SHADOW_OPTION: @shadow-option;
+  SHADOW_CARD: @shadow-card;
+  SHADOW_ACTIONSHEET: @shadow-actionsheet;
+  SHADOW_NOTIFICATION: @shadow-notification;
+}

package/lib/Button/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 import type { ButtonProps as AntdButtonProps } from 'antd/lib/button';
 export declare type ButtonType = 'primary' | 'secondary' | 'danger' | 'text' | 'link';
 export declare type Size = 'small' | 'default' | 'large';

package/lib/Button/index.js

@@ -11,8 +11,6 @@ var _button = _interopRequireDefault(require("antd/es/button"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./style");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _usePrefixCls = _interopRequireDefault(require("../_utils/hooks/usePrefixCls"));

package/lib/Button/style/index.js

@@ -2,4 +2,4 @@
 
 require("../../style");
 
-require("./index.css");
+require("./index.less");

package/lib/Button/style/index.less

@@ -0,0 +1,265 @@
+@import '../../style/index.less';
+
+@ald-prefix:ant;
+@ald-iconfont-css-prefix:anticon;
+
+.ant-btn {
+  &.ant-btn {
+    // &-loading::before{
+    //   // display: none !important;
+    // }
+
+    &-primary,
+    &-dangerous,
+    &-secondary,
+    &-text,
+    &-link {
+      font-size: 12px;
+      height: @height-base;
+      padding: 0 12px;
+      display: inline-flex;
+      line-height: @height-base;
+      align-items: center;
+      font-weight: 500;
+      justify-content: center;
+      .@{ald-iconfont-css-prefix} {
+        + span {
+          margin-left: 4px;
+        }
+
+        &-icon-left {
+          margin-left: -4px;
+        }
+
+        &-icon-right {
+          margin-right: -4px;
+        }
+      }
+    }
+
+    &-primary {
+      background-color: @B40;
+      border-color: @B40;
+      box-shadow: none;
+      border-radius: @border-radius-base;
+      text-shadow: @text-shadow;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.ant-btn-loading {
+        background-color: @B20;
+        border-color: @B20;
+        color: @ND0;
+      }
+
+      &[disabled] {
+        background-color: @NL90;
+        border-color: transparent;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: @NL90;
+          border-color: transparent;
+          color: @NL80;
+        }
+      }
+    }
+
+    &-dangerous.ant-btn-primary {
+      background-color: @SC40;
+      border-color: @SC40;
+      color: @ND0;
+      text-shadow: @text-shadow;
+      box-shadow: unset;
+
+      &:hover {
+        background-color: @SC20;
+        border-color: @SC20;
+        color: @ND0;
+      }
+
+      &:focus,
+      &:active,
+      &.ant-btn-loading {
+        background-color: @SC20;
+        border-color: @SC20;
+        color: @ND0;
+      }
+
+      &[disabled] {
+        background-color: @NL90;
+        border-color: transparent;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: @NL90;
+          border-color: transparent;
+          color: @NL80;
+        }
+      }
+    }
+
+    &-secondary {
+      background-color: @BG100;
+      border-color: @NL90;
+      color: @NL30;
+      box-shadow: none;
+      border-radius: @border-radius-base;
+      text-shadow: @text-shadow;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.ant-btn-loading {
+        background-color: @NL97;
+        border-color: @NL90;
+        color: @NL30;
+      }
+
+      &[disabled] {
+        background-color: @BG100;
+        border-color: @NL90;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: @BG100;
+          border-color: @NL90;
+          color: @NL80;
+        }
+      }
+    }
+
+    &-text {
+      background-color: @BG100;
+      border-color: @BG100;
+      color: @NL30;
+      box-shadow: none;
+      border-radius: @border-radius-base;
+      text-shadow: @text-shadow;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.ant-btn-loading {
+        background-color: @NL97;
+        // border-color: @NL97;
+        color: @NL30;
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border-color: transparent;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: transparent;
+          border-color: transparent;
+          color: @NL80;
+        }
+      }
+    }
+
+    &-link {
+      background-color: @BG100;
+      border-color: @BG100;
+      color: @B40;
+      font-weight: 400;
+      box-shadow: none;
+      border-radius: @border-radius-base;
+      text-shadow: @text-shadow;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.ant-btn-loading {
+        background-color: @BG100;
+        border-color: @BG100;
+        color: @B20;
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border-color: transparent;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: transparent;
+          border-color: transparent;
+          color: @NL80;
+        }
+      }
+    }
+
+    &-icon-only {
+      justify-content: center;
+      padding: 0;
+      vertical-align: bottom;
+      height: @height-base;
+      width: @height-base;
+
+      &.ant-btn-loading-icon {
+        vertical-align: baseline;
+      }
+      .@{ald-iconfont-css-prefix} {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 0;
+      }
+    }
+
+    &-circle {
+      width: @height-base;
+      min-width: auto;
+      padding: 0;
+      justify-content: center;
+      border-radius: 50%;
+    }
+
+    &-lg {
+      height: 32px;
+      font-size: 14px;
+      min-width: auto;
+
+      &.ant-btn-icon-only {
+        height: 32px;
+        width: 32px;
+        min-width: auto;
+      }
+
+      &.ant-btn-circle {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+      }
+    }
+
+    &-sm {
+      height: 24px;
+      border-radius: @border-radius-sm;
+
+      &.ant-btn-icon-only {
+        height: 24px;
+        width: 24px;
+        border-radius: @border-radius-sm;
+      }
+
+      &.ant-btn-circle {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+      }
+    }
+  }
+}

package/lib/Dropdown/Button.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
 import { ButtonType, Size } from '../Button';
-import './style';
 export declare type ActionType = 'hover' | 'click' | 'contextMenu';
 export interface IDropdownButton {
     /**

package/lib/Dropdown/Button.js

@@ -13,8 +13,6 @@ var _index = _interopRequireDefault(require("./index"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-require("./style");
-
 var _excluded = ["children", "overlay", "placement", "trigger", "visible", "disabled", "onVisibleChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }