inl-ui 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/.babelrc +3 -3
  2. package/README.md +28 -28
  3. package/dist/index.js +515 -515
  4. package/dist/index.js.map +1 -1
  5. package/dist/theme/dark.less +204 -204
  6. package/dist/theme/default.less +109 -109
  7. package/package.json +38 -38
  8. package/dist/theme/dark copy.less +0 -448
  9. package/dist/theme/default copy.less +0 -1094
package/dist/theme/dark.less CHANGED
@@ -1,204 +1,204 @@
1
- body{
2
- background-color: #132041;
3
- }
4
-
5
- @theme: dark;
6
- @white: #fff;
7
- @black: #000;
8
- @primary-color: #1D33A2;
9
- @menu-item-height: 48px;
10
- @disabled-color:#A4AABF;
11
- @green:#22CC83;
12
- @red:#EA5858;
13
- @orange:#FF9214;
14
- @blue-1: fade(@primary-color, 20%);
15
- @blue-3: fade(@primary-color, 0%);
16
- @blue-7: fade(@primary-color, 100%);
17
- @green-1: fade(@green, 20%);
18
- @green-3: fade(@green, 0%);
19
- @green-7: fade(@green, 100%);
20
- @red-1: fade(@red, 20%);;
21
- @red-3: fade(@red, 0%);;
22
- @red-7: fade(@red, 100%);;
23
- @orange-1: fade(@orange, 20%);
24
- @orange-3: fade(@orange, 0%);
25
- @orange-7: fade(@orange, 100%);
26
-
27
- @menu-dark-bg: #1b2c55;
28
- @menu-dark-arrow-color: @white;
29
- @menu-dark-inline-submenu-bg: @menu-dark-bg;
30
- @menu-dark-highlight-color: #3e7eff;
31
- @menu-dark-item-active-bg: rgba(255,255,255,0.1);
32
- @menu-dark-item-hover-bg: transparent;
33
- @border-color-base: #B9C2D5;
34
- // 按钮
35
- @btn-default-bg: @white;
36
- @text-color: rgba(53, 64, 82, 1);
37
- @btn-font-weight: 400;
38
- @btn-border-radius-base: 2px;
39
- @btn-border-radius-sm: 2px;
40
- @btn-border-width: 1px;
41
- @btn-border-style: @primary-color;
42
- @btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
43
- @btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
44
-
45
- // form
46
- @label-color: #354052;
47
- @input-disabled-bg: rgba(144, 149, 162, 0.3);
48
- @input-disabled-color:rgba(144, 149, 162, 1);
49
-
50
- @select-item-active-bg: #F2F3F8;
51
- @select-dropdown-bg: @white;
52
- @select-item-selected-bg:rgba(242, 243, 248, 1);
53
- @calendar-item-active-bg: rgba(242, 243, 248, 1);
54
- @calendar-bg: @white;
55
- .ant-picker-clear{
56
- color: @primary-color;
57
- background-color: none;
58
- }
59
- .ant-picker-suffix{
60
- color: @primary-color;
61
- }
62
- .ant-select-arrow{
63
- color: @primary-color;
64
- }
65
- // @input-bg: red;
66
- .ant-switch{
67
- background-color: #A4AABF;
68
- }
69
- .ant-switch-checked {
70
- background-color: @primary-color;
71
- }
72
-
73
- // table
74
- @table-bg: @white;
75
- @table-header-bg: rgba(242, 243, 248, 1);
76
- @table-header-color: rgba(53, 64, 82, 1);
77
- @table-border-color:#F2F3F8;
78
- @table-header-sort-active-bg: #F2F3F8;
79
- @table-font-size: 14px;
80
- @table-padding-vertical: 5px;
81
- @table-padding-horizontal: 5px;
82
- @table-row-hover-bg: rgba(242, 243, 248, 0.6);
83
-
84
- // Pagination
85
- // ---
86
- @pagination-item-bg: transparent;
87
- @pagination-item-bg-active: @primary-color;
88
- @pagination-item-link-bg: transparent;
89
- @pagination-item-disabled-bg-active: fade(@white, 25%);
90
- @pagination-item-disabled-color-active: @black;
91
- @pagination-item-input-bg: @pagination-item-bg;
92
-
93
- // 选中
94
- .ant-pagination-item-active,.ant-pagination-item-active:hover {
95
- a {
96
- color: @white;
97
- }
98
- }
99
-
100
- // Avatar
101
- @avatar-bg: @primary-color;
102
-
103
- // 图标头像
104
- .ant-avatar.ant-avatar-icon{
105
- background-color: #EFF2F6;
106
- color: #959CB9;
107
- }
108
-
109
- // Tag
110
- @tag-default-bg: rgba(53, 64, 82, 0.1);
111
- @border-color-base: rgba(53, 64, 82, 0.2);
112
- @tag-default-color: #556282;
113
- @text-color-secondary:@black;
114
-
115
- // popover
116
- @popover-bg:@white;
117
- @heading-color: #354052;
118
- @popover-color:#5C667D;
119
- @border-color-split: #EFF2F6;
120
-
121
- // modal
122
- @modal-content-bg: @white;
123
- @modal-heading-color:@heading-color;
124
- @modal-header-bg: @white;
125
- @modal-close-color:rgba(0, 0, 0, 0.45);
126
- @icon-color-hover:@modal-close-color;
127
-
128
- // alert
129
- @alert-close-color:rgba(0, 0, 0, 0.45);
130
- @alert-close-hover-color:@alert-close-color;
131
- @alert-success-bg-color:fade(@green, 10%);
132
- @alert-success-border-color:@green;
133
- @alert-success-icon-color:@green;
134
- @alert-info-bg-color:fade(@primary-color, 10%);
135
- @alert-info-border-color:@primary-color;
136
- @alert-info-icon-color:@primary-color;
137
- @alert-warning-bg-color:fade(@orange, 10%);
138
- @alert-warning-border-color:@orange;
139
- @alert-warning-icon-color:@orange;
140
- @alert-error-bg-color:fade(@red, 10%);
141
- @alert-error-border-color:@red;
142
- @alert-error-icon-color:@red;
143
-
144
- // 成功
145
- .ant-alert-success {
146
- .ant-alert-message,.ant-alert-description,.ant-alert-close-text {
147
- color: @green;
148
- }
149
- }
150
- // 提示
151
- .ant-alert-info {
152
- .ant-alert-message,.ant-alert-description,.ant-alert-close-text {
153
- color: @primary-color;
154
- }
155
- }
156
- // 警告
157
- .ant-alert-warning {
158
- .ant-alert-message,.ant-alert-description,.ant-alert-close-text {
159
- color: @orange;
160
- }
161
- }
162
- // 错误
163
- .ant-alert-error {
164
- .ant-alert-message,.ant-alert-description,.ant-alert-close-text {
165
- color: @red;
166
- }
167
- }
168
-
169
- // breadcrumb
170
- @breadcrumb-base-color:#959CB9;
171
- @breadcrumb-link-color:#959CB9;
172
- @breadcrumb-last-item-color:#354052;
173
- @breadcrumb-separator-color:#959CB9;
174
- @breadcrumb-link-color-hover:@primary-color;
175
-
176
- // dropdown
177
- @dropdown-menu-bg:@white;
178
-
179
- // menu
180
- @menu-highlight-color:#3E7EFF;
181
- @menu-dark-selected-item-icon-color:#3E7EFF;
182
- @menu-dark-selected-item-text-color:#3E7EFF;
183
- @menu-dark-highlight-color:#3E7EFF;
184
- @menu-dark-item-active-bg:fade(@white, 10%);
185
- @menu-dark-item-hover-bg:fade(@white, 10%);
186
- @menu-dark-inline-submenu-bg:@menu-dark-bg;
187
- @menu-inline-submenu-bg:@menu-dark-bg;
188
- @menu-item-active-bg:fade(@white, 10%);
189
- @menu-bg:@menu-dark-bg;
190
- @menu-item-color:fade(@white, 65%);
191
- @border-color-split:@menu-dark-bg;
192
- @menu-popup-bg:@menu-dark-bg;
193
-
194
- //
195
- .ant-menu-inline .ant-menu-item::after {
196
- left: 0;
197
- right: initial;
198
- }
199
- .ant-menu.ant-menu-root > li > .ant-menu-title-content {
200
- font-weight: 400;
201
- }
202
- .ant-menu-dark.ant-menu-inline .ant-menu-item-selected::after {
203
- border-right: 3px solid #3E7EFF;
204
- }
1
+ body{
2
+ background-color: #132041;
3
+ }
4
+
5
+ @theme: dark;
6
+ @white: #fff;
7
+ @black: #000;
8
+ @primary-color: #1D33A2;
9
+ @menu-item-height: 48px;
10
+ @disabled-color:#A4AABF;
11
+ @green:#22CC83;
12
+ @red:#EA5858;
13
+ @orange:#FF9214;
14
+ @blue-1: fade(@primary-color, 20%);
15
+ @blue-3: fade(@primary-color, 0%);
16
+ @blue-7: fade(@primary-color, 100%);
17
+ @green-1: fade(@green, 20%);
18
+ @green-3: fade(@green, 0%);
19
+ @green-7: fade(@green, 100%);
20
+ @red-1: fade(@red, 20%);;
21
+ @red-3: fade(@red, 0%);;
22
+ @red-7: fade(@red, 100%);;
23
+ @orange-1: fade(@orange, 20%);
24
+ @orange-3: fade(@orange, 0%);
25
+ @orange-7: fade(@orange, 100%);
26
+
27
+ @menu-dark-bg: #1b2c55;
28
+ @menu-dark-arrow-color: @white;
29
+ @menu-dark-inline-submenu-bg: @menu-dark-bg;
30
+ @menu-dark-highlight-color: #3e7eff;
31
+ @menu-dark-item-active-bg: rgba(255,255,255,0.1);
32
+ @menu-dark-item-hover-bg: transparent;
33
+ @border-color-base: #B9C2D5;
34
+ // 按钮
35
+ @btn-default-bg: @white;
36
+ @text-color: rgba(53, 64, 82, 1);
37
+ @btn-font-weight: 400;
38
+ @btn-border-radius-base: 2px;
39
+ @btn-border-radius-sm: 2px;
40
+ @btn-border-width: 1px;
41
+ @btn-border-style: @primary-color;
42
+ @btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
43
+ @btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
44
+
45
+ // form
46
+ @label-color: #354052;
47
+ @input-disabled-bg: rgba(144, 149, 162, 0.3);
48
+ @input-disabled-color:rgba(144, 149, 162, 1);
49
+
50
+ @select-item-active-bg: #F2F3F8;
51
+ @select-dropdown-bg: @white;
52
+ @select-item-selected-bg:rgba(242, 243, 248, 1);
53
+ @calendar-item-active-bg: rgba(242, 243, 248, 1);
54
+ @calendar-bg: @white;
55
+ .ant-picker-clear{
56
+ color: @primary-color;
57
+ background-color: none;
58
+ }
59
+ .ant-picker-suffix{
60
+ color: @primary-color;
61
+ }
62
+ .ant-select-arrow{
63
+ color: @primary-color;
64
+ }
65
+ // @input-bg: red;
66
+ .ant-switch{
67
+ background-color: #A4AABF;
68
+ }
69
+ .ant-switch-checked {
70
+ background-color: @primary-color;
71
+ }
72
+
73
+ // table
74
+ @table-bg: @white;
75
+ @table-header-bg: rgba(242, 243, 248, 1);
76
+ @table-header-color: rgba(53, 64, 82, 1);
77
+ @table-border-color:#F2F3F8;
78
+ @table-header-sort-active-bg: #F2F3F8;
79
+ @table-font-size: 14px;
80
+ @table-padding-vertical: 5px;
81
+ @table-padding-horizontal: 5px;
82
+ @table-row-hover-bg: rgba(242, 243, 248, 0.6);
83
+
84
+ // Pagination
85
+ // ---
86
+ @pagination-item-bg: transparent;
87
+ @pagination-item-bg-active: @primary-color;
88
+ @pagination-item-link-bg: transparent;
89
+ @pagination-item-disabled-bg-active: fade(@white, 25%);
90
+ @pagination-item-disabled-color-active: @black;
91
+ @pagination-item-input-bg: @pagination-item-bg;
92
+
93
+ // 选中
94
+ .ant-pagination-item-active,.ant-pagination-item-active:hover {
95
+ a {
96
+ color: @white;
97
+ }
98
+ }
99
+
100
+ // Avatar
101
+ @avatar-bg: @primary-color;
102
+
103
+ // 图标头像
104
+ .ant-avatar.ant-avatar-icon{
105
+ background-color: #EFF2F6;
106
+ color: #959CB9;
107
+ }
108
+
109
+ // Tag
110
+ @tag-default-bg: rgba(53, 64, 82, 0.1);
111
+ @border-color-base: rgba(53, 64, 82, 0.2);
112
+ @tag-default-color: #556282;
113
+ @text-color-secondary:@black;
114
+
115
+ // popover
116
+ @popover-bg:@white;
117
+ @heading-color: #354052;
118
+ @popover-color:#5C667D;
119
+ @border-color-split: #EFF2F6;
120
+
121
+ // modal
122
+ @modal-content-bg: @white;
123
+ @modal-heading-color:@heading-color;
124
+ @modal-header-bg: @white;
125
+ @modal-close-color:rgba(0, 0, 0, 0.45);
126
+ @icon-color-hover:@modal-close-color;
127
+
128
+ // alert
129
+ @alert-close-color:rgba(0, 0, 0, 0.45);
130
+ @alert-close-hover-color:@alert-close-color;
131
+ @alert-success-bg-color:fade(@green, 10%);
132
+ @alert-success-border-color:@green;
133
+ @alert-success-icon-color:@green;
134
+ @alert-info-bg-color:fade(@primary-color, 10%);
135
+ @alert-info-border-color:@primary-color;
136
+ @alert-info-icon-color:@primary-color;
137
+ @alert-warning-bg-color:fade(@orange, 10%);
138
+ @alert-warning-border-color:@orange;
139
+ @alert-warning-icon-color:@orange;
140
+ @alert-error-bg-color:fade(@red, 10%);
141
+ @alert-error-border-color:@red;
142
+ @alert-error-icon-color:@red;
143
+
144
+ // 成功
145
+ .ant-alert-success {
146
+ .ant-alert-message,.ant-alert-description,.ant-alert-close-text {
147
+ color: @green;
148
+ }
149
+ }
150
+ // 提示
151
+ .ant-alert-info {
152
+ .ant-alert-message,.ant-alert-description,.ant-alert-close-text {
153
+ color: @primary-color;
154
+ }
155
+ }
156
+ // 警告
157
+ .ant-alert-warning {
158
+ .ant-alert-message,.ant-alert-description,.ant-alert-close-text {
159
+ color: @orange;
160
+ }
161
+ }
162
+ // 错误
163
+ .ant-alert-error {
164
+ .ant-alert-message,.ant-alert-description,.ant-alert-close-text {
165
+ color: @red;
166
+ }
167
+ }
168
+
169
+ // breadcrumb
170
+ @breadcrumb-base-color:#959CB9;
171
+ @breadcrumb-link-color:#959CB9;
172
+ @breadcrumb-last-item-color:#354052;
173
+ @breadcrumb-separator-color:#959CB9;
174
+ @breadcrumb-link-color-hover:@primary-color;
175
+
176
+ // dropdown
177
+ @dropdown-menu-bg:@white;
178
+
179
+ // menu
180
+ @menu-highlight-color:#3E7EFF;
181
+ @menu-dark-selected-item-icon-color:#3E7EFF;
182
+ @menu-dark-selected-item-text-color:#3E7EFF;
183
+ @menu-dark-highlight-color:#3E7EFF;
184
+ @menu-dark-item-active-bg:fade(@white, 10%);
185
+ @menu-dark-item-hover-bg:fade(@white, 10%);
186
+ @menu-dark-inline-submenu-bg:@menu-dark-bg;
187
+ @menu-inline-submenu-bg:@menu-dark-bg;
188
+ @menu-item-active-bg:fade(@white, 10%);
189
+ @menu-bg:@menu-dark-bg;
190
+ @menu-item-color:fade(@white, 65%);
191
+ @border-color-split:@menu-dark-bg;
192
+ @menu-popup-bg:@menu-dark-bg;
193
+
194
+ //
195
+ .ant-menu-inline .ant-menu-item::after {
196
+ left: 0;
197
+ right: initial;
198
+ }
199
+ .ant-menu.ant-menu-root > li > .ant-menu-title-content {
200
+ font-weight: 400;
201
+ }
202
+ .ant-menu-dark.ant-menu-inline .ant-menu-item-selected::after {
203
+ border-right: 3px solid #3E7EFF;
204
+ }
package/dist/theme/default.less CHANGED
@@ -1,109 +1,109 @@
1
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
-
3
- @theme: default;
4
-
5
- // The prefix to use on all css classes from ant.
6
- @ant-prefix: ant;
7
-
8
- // An override for the html selector for theme prefixes
9
- @html-selector: html;
10
-
11
- // [CSS-VARIABLE-REPLACE-BEGIN: html-variables]
12
- // [CSS-VARIABLE-REPLACE-END: html-variables]
13
-
14
- // -------- Colors -----------
15
- @component-background: #fff;
16
-
17
- // >>> Primary
18
- @primary-color: #3e7eff;
19
-
20
- // >>> Info
21
- @info-color: @primary-color;
22
-
23
- // >>> Success
24
- @success-color: #22cc83;
25
-
26
- // >>> Warning
27
- @warning-color: #ff9214;
28
-
29
- // >>> Error
30
- @error-color: #ea5858;
31
-
32
- @text-color: #5d616b;
33
- @text-color-secondary: #8f959e;
34
-
35
- @heading-color: #333333;
36
-
37
- // Border color
38
- @border-color-split: #f0f3f5; // split border inside a component
39
-
40
- // background color
41
- @background-color-light: rgba(
42
- 242,
43
- 243,
44
- 248,
45
- 1
46
- ); // background of header and selected item
47
-
48
- // Disabled states
49
- @disabled-color: rgba(143, 149, 158, 0.5);
50
-
51
- // menu
52
- @menu-inline-submenu-bg: @component-background;
53
-
54
- // table
55
- @table-padding-vertical: 8.5px;
56
- @table-padding-horizontal: 8.5px;
57
- @table-header-sort-active-bg: #c9cdd4;
58
- @table-fixed-header-sort-active-bg: #c9cdd4;
59
-
60
- // avatar
61
- @avatar-bg: @primary-color;
62
- // 图标头像
63
- .ant-avatar.ant-avatar-icon {
64
- background-color: #eff2f6;
65
- color: #8f959e;
66
- }
67
-
68
- // pagination
69
- @pagination-item-bg-active: @primary-color;
70
- .ant-pagination-item-active,
71
- .ant-pagination-item-active:hover,
72
- .ant-pagination-item-active:focus-visible {
73
- a {
74
- color: #fff;
75
- }
76
- }
77
- // Alert
78
- // 成功
79
- .ant-alert-success {
80
- .ant-alert-message,
81
- .ant-alert-description,
82
- .ant-alert-close-text {
83
- color: @success-color;
84
- }
85
- }
86
- // 提示
87
- .ant-alert-info {
88
- .ant-alert-message,
89
- .ant-alert-description,
90
- .ant-alert-close-text {
91
- color: @info-color;
92
- }
93
- }
94
- // 警告
95
- .ant-alert-warning {
96
- .ant-alert-message,
97
- .ant-alert-description,
98
- .ant-alert-close-text {
99
- color: @warning-color;
100
- }
101
- }
102
- // 错误
103
- .ant-alert-error {
104
- .ant-alert-message,
105
- .ant-alert-description,
106
- .ant-alert-close-text {
107
- color: @error-color;
108
- }
109
- }
1
+ /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
+
3
+ @theme: default;
4
+
5
+ // The prefix to use on all css classes from ant.
6
+ @ant-prefix: ant;
7
+
8
+ // An override for the html selector for theme prefixes
9
+ @html-selector: html;
10
+
11
+ // [CSS-VARIABLE-REPLACE-BEGIN: html-variables]
12
+ // [CSS-VARIABLE-REPLACE-END: html-variables]
13
+
14
+ // -------- Colors -----------
15
+ @component-background: #fff;
16
+
17
+ // >>> Primary
18
+ @primary-color: #3e7eff;
19
+
20
+ // >>> Info
21
+ @info-color: @primary-color;
22
+
23
+ // >>> Success
24
+ @success-color: #22cc83;
25
+
26
+ // >>> Warning
27
+ @warning-color: #ff9214;
28
+
29
+ // >>> Error
30
+ @error-color: #ea5858;
31
+
32
+ @text-color: #5d616b;
33
+ @text-color-secondary: #8f959e;
34
+
35
+ @heading-color: #333333;
36
+
37
+ // Border color
38
+ @border-color-split: #f0f3f5; // split border inside a component
39
+
40
+ // background color
41
+ @background-color-light: rgba(
42
+ 242,
43
+ 243,
44
+ 248,
45
+ 1
46
+ ); // background of header and selected item
47
+
48
+ // Disabled states
49
+ @disabled-color: rgba(143, 149, 158, 0.5);
50
+
51
+ // menu
52
+ @menu-inline-submenu-bg: @component-background;
53
+
54
+ // table
55
+ @table-padding-vertical: 8.5px;
56
+ @table-padding-horizontal: 8.5px;
57
+ @table-header-sort-active-bg: #c9cdd4;
58
+ @table-fixed-header-sort-active-bg: #c9cdd4;
59
+
60
+ // avatar
61
+ @avatar-bg: @primary-color;
62
+ // 图标头像
63
+ .ant-avatar.ant-avatar-icon {
64
+ background-color: #eff2f6;
65
+ color: #8f959e;
66
+ }
67
+
68
+ // pagination
69
+ @pagination-item-bg-active: @primary-color;
70
+ .ant-pagination-item-active,
71
+ .ant-pagination-item-active:hover,
72
+ .ant-pagination-item-active:focus-visible {
73
+ a {
74
+ color: #fff;
75
+ }
76
+ }
77
+ // Alert
78
+ // 成功
79
+ .ant-alert-success {
80
+ .ant-alert-message,
81
+ .ant-alert-description,
82
+ .ant-alert-close-text {
83
+ color: @success-color;
84
+ }
85
+ }
86
+ // 提示
87
+ .ant-alert-info {
88
+ .ant-alert-message,
89
+ .ant-alert-description,
90
+ .ant-alert-close-text {
91
+ color: @info-color;
92
+ }
93
+ }
94
+ // 警告
95
+ .ant-alert-warning {
96
+ .ant-alert-message,
97
+ .ant-alert-description,
98
+ .ant-alert-close-text {
99
+ color: @warning-color;
100
+ }
101
+ }
102
+ // 错误
103
+ .ant-alert-error {
104
+ .ant-alert-message,
105
+ .ant-alert-description,
106
+ .ant-alert-close-text {
107
+ color: @error-color;
108
+ }
109
+ }