Skip to content

Commit d5499ad

Browse files
kagolkagol
authored
Merge pull request #2 from Zcating/dev
feat(button): add button
2 parents 4c7e391 + ee5eacc commit d5499ad

File tree

14 files changed

+898
-62
lines changed

14 files changed

+898
-62
lines changed

‎devui/button/button.scss

Lines changed: 390 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,390 @@
1+
@import '../style/mixins/index';
2+
@import '../style/theme/color';
3+
@import '../style/theme/variables';
4+
@import '../style/theme/font';
5+
@import '../style/theme/corner';
6+
7+
$devui-btn-loading-color: $devui-text;
8+
$devui-btn-xs-padding: 1px 5px;
9+
$devui-btn-xs-height: 24px;
10+
$devui-btn-icon-xs-min-width: 24px;
11+
$devui-btn-xs-min-width: 48px;
12+
$devui-btn-sm-padding: 1px 15px;
13+
$devui-btn-sm-min-width: 56px;
14+
$devui-btn-icon-sm-min-width: 24px;
15+
$devui-btn-sm-height: 24px;
16+
$devui-btn-min-width: 64px;
17+
$devui-btn-height: 28px;
18+
$devui-btn-padding: 3px 20px;
19+
$devui-btn-lg-padding: 5px 23px;
20+
$devui-btn-lg-min-width: 72px;
21+
$devui-btn-icon-lg-min-width: 32px;
22+
$devui-btn-lg-height: 32px;
23+
$devui-btn-xs-font-size: $devui-font-size-sm;
24+
$devui-btn-sm-font-size: $devui-font-size-sm;
25+
$devui-btn-font-size: $devui-font-size-md;
26+
$devui-btn-lg-font-size: $devui-font-size-lg;
27+
$devui-btn-line-height: $devui-line-height-base;
28+
29+
$devui-btn-normal-config: (
30+
text: (
31+
color: $devui-brand-active,
32+
padding: 0
33+
),
34+
text-dark: (
35+
color: $devui-brand-active,
36+
padding: 0
37+
),
38+
common: (
39+
color: $devui-text,
40+
min-width: $devui-btn-min-width,
41+
background-color: $devui-block,
42+
border-color: $devui-line
43+
),
44+
stress: (
45+
color: $devui-light-text,
46+
min-width: $devui-btn-min-width,
47+
background-color: $devui-primary
48+
),
49+
primary: (
50+
color: $devui-light-text,
51+
min-width: $devui-btn-min-width,
52+
background-color: $devui-primary
53+
),
54+
danger: (
55+
color: $devui-light-text,
56+
min-width: $devui-btn-min-width,
57+
background-color: $devui-contrast
58+
),
59+
xs: (
60+
padding: $devui-btn-xs-padding,
61+
height: $devui-btn-xs-height,
62+
font-size: $devui-btn-xs-font-size,
63+
min-width: $devui-btn-xs-min-width
64+
),
65+
sm: (
66+
padding: $devui-btn-sm-padding,
67+
height: $devui-btn-sm-height,
68+
font-size: $devui-btn-sm-font-size,
69+
min-width: $devui-btn-sm-min-width,
70+
),
71+
lg: (
72+
padding: $devui-btn-lg-padding,
73+
height: $devui-btn-lg-height,
74+
font-size: $devui-btn-lg-font-size,
75+
min-width: $devui-btn-lg-min-width,
76+
),
77+
left: (
78+
border-radius: $devui-border-radius 0 0 $devui-border-radius,
79+
),
80+
right: (
81+
border-radius: 0 $devui-border-radius $devui-border-radius 0,
82+
),
83+
default: (
84+
border-radius: $devui-border-radius,
85+
)
86+
);
87+
88+
$devui-btn-pseudo-config: (
89+
text: (
90+
hover: (
91+
background-color: transparent,
92+
color: $devui-brand-active-focus
93+
),
94+
focus: (
95+
background-color: transparent,
96+
color: $devui-brand-active-focus
97+
),
98+
active: (
99+
background-color: transparent,
100+
color: $devui-brand-active-focus
101+
)
102+
),
103+
text-dark: (
104+
hover: (
105+
background-color: transparent,
106+
color: $devui-brand-active-focus
107+
),
108+
focus: (
109+
background-color: transparent,
110+
color: $devui-brand-active-focus
111+
),
112+
active: (
113+
background-color: transparent,
114+
color: $devui-brand-active-focus
115+
)
116+
),
117+
common: (
118+
hover: (
119+
border-color: $devui-form-control-line-active,
120+
color: $devui-brand-active
121+
),
122+
focus: (
123+
border-color: $devui-form-control-line-active,
124+
color: $devui-brand-active
125+
),
126+
active: (
127+
border-color: $devui-form-control-line-active,
128+
color: $devui-brand-active
129+
)
130+
),
131+
stress: (
132+
hover: (
133+
background-color: $devui-primary-hover
134+
),
135+
focus: (
136+
background-color: $devui-primary-hover
137+
),
138+
active: (
139+
background-color: $devui-primary-active
140+
)
141+
),
142+
primary: (
143+
hover: (
144+
background-color: $devui-primary-hover
145+
),
146+
focus: (
147+
background-color: $devui-primary-hover
148+
),
149+
active: (
150+
background-color: $devui-primary-active
151+
)
152+
),
153+
danger: (
154+
hover: (
155+
background-color: $devui-contrast-hover
156+
),
157+
focus: (
158+
background-color: $devui-contrast-hover
159+
),
160+
active: (
161+
background-color: $devui-contrast-active
162+
)
163+
)
164+
);
165+
166+
.devui-btn {
167+
padding: $devui-btn-padding;
168+
font-size: $devui-btn-font-size;
169+
height: $devui-btn-height;
170+
line-height: $devui-btn-line-height;
171+
border-radius: $devui-border-radius;
172+
border-width: 1px;
173+
border-color: transparent;
174+
background-color: transparent;
175+
@each $type in text, text-dark, common, stress, primary, danger, left, right, xs, sm, lg {
176+
&.devui-btn-#{$type} {
177+
@each $key, $value in map-get($devui-btn-normal-config, $type) {
178+
#{$key}: $value;
179+
}
180+
}
181+
}
182+
@each $type in text, text-dark, common, stress, primary, danger {
183+
&.devui-btn-#{$type} {
184+
@each $pseudo, $value in map-get($devui-btn-pseudo-config, $type) {
185+
&:#{$pseudo} {
186+
@each $key, $value2 in map-get(map-get($devui-btn-pseudo-config, $type), $pseudo) {
187+
#{$key}: $value2;
188+
}
189+
}
190+
}
191+
}
192+
}
193+
194+
&.devui-btn-common {
195+
&:disabled {
196+
color: $devui-disabled-text;
197+
background: $devui-disabled-bg;
198+
border: 1px solid $devui-disabled-line;
199+
}
200+
}
201+
202+
&.devui-btn-primary {
203+
&:disabled {
204+
color: $devui-light-text;
205+
background: $devui-primary-disabled;
206+
border: none;
207+
}
208+
}
209+
210+
&.devui-btn-danger {
211+
&:disabled {
212+
color: $devui-disabled-text;
213+
background: $devui-disabled-bg;
214+
border: 1px solid $devui-disabled-line;
215+
}
216+
}
217+
218+
&.devui-btn-text-dark {
219+
&:disabled {
220+
color: $devui-disabled-text;
221+
}
222+
}
223+
224+
&.devui-btn-text {
225+
&:disabled {
226+
color: $devui-disabled-text;
227+
}
228+
}
229+
230+
&.bordered {
231+
&.devui-btn-common {
232+
color: $devui-text;
233+
border-color: transparent;
234+
235+
&:hover,
236+
&:focus {
237+
border-color: $devui-primary-hover;
238+
}
239+
240+
&:active {
241+
border-color: $devui-primary-active;
242+
}
243+
}
244+
245+
&.devui-btn-stress,
246+
&.devui-btn-primary {
247+
border-color: $devui-brand;
248+
color: $devui-brand;
249+
background-color: $devui-block;
250+
}
251+
252+
&.devui-btn-success {
253+
border-color: $devui-success;
254+
color: $devui-success;
255+
background-color: $devui-block;
256+
}
257+
258+
&.devui-btn-warning {
259+
border-color: $devui-warning;
260+
color: $devui-warning;
261+
background-color: $devui-block;
262+
}
263+
264+
&.devui-btn-danger {
265+
border-color: $devui-danger;
266+
color: $devui-danger;
267+
background-color: $devui-block;
268+
}
269+
}
270+
271+
&.d-btn-icon {
272+
&:hover,
273+
&:focus {
274+
border: 1px solid $devui-list-item-hover-bg;
275+
background-color: $devui-list-item-hover-bg;
276+
}
277+
278+
&:disabled {
279+
background-color: $devui-disabled-bg;
280+
}
281+
}
282+
283+
&:not(:disabled) {
284+
&.devui-btn-text,
285+
&.devui-btn-text-dark {
286+
&.d-btn-icon-wrap {
287+
color: $devui-text;
288+
289+
.devui-icon-fix {
290+
color: $devui-text-weak;
291+
}
292+
293+
&:hover {
294+
color: $devui-list-item-hover-text;
295+
296+
.devui-icon-fix {
297+
color: $devui-icon-fill-active;
298+
}
299+
}
300+
}
301+
}
302+
}
303+
}
304+
305+
.devui-loading {
306+
.devui-loading-default-spinner {
307+
div {
308+
background-color: $devui-text;
309+
}
310+
}
311+
}
312+
313+
:host {
314+
display: inline-block;
315+
}
316+
317+
.devui-btn {
318+
transition: background-color 0.2s;
319+
border-style: solid;
320+
white-space: nowrap;
321+
display: flex;
322+
align-items: center;
323+
justify-content: center;
324+
325+
&:disabled,
326+
&[disabled] {
327+
cursor: not-allowed;
328+
}
329+
330+
&.d-btn-icon {
331+
padding: 7px 8px;
332+
line-height: 1em;
333+
border: 1px solid transparent;
334+
335+
&.devui-btn-xs,
336+
&.devui-btn-sm {
337+
padding: 5px;
338+
}
339+
340+
&.devui-btn-xs {
341+
min-width: $devui-btn-icon-xs-min-width;
342+
}
343+
344+
&.devui-btn-sm {
345+
min-width: $devui-btn-icon-sm-min-width;
346+
}
347+
348+
&.devui-btn-lg {
349+
.icon {
350+
font-size: $devui-font-size-icon;
351+
}
352+
353+
min-width: $devui-btn-icon-lg-min-width;
354+
}
355+
}
356+
357+
&:not(.d-btn-icon) {
358+
.icon-fix {
359+
font-size: $devui-font-size-icon;
360+
}
361+
}
362+
}
363+
364+
.devui-icon-fix {
365+
position: relative;
366+
font-size: $devui-font-size;
367+
}
368+
369+
.devui-btn.devui-btn-common:not(:disabled) {
370+
.devui-icon-fix {
371+
color: $devui-text-weak;
372+
}
373+
374+
&:hover,
375+
&:active,
376+
&:focus {
377+
.devui-icon-fix {
378+
color: $devui-icon-fill-active;
379+
}
380+
}
381+
}
382+
383+
.button-content {
384+
display: inline-block;
385+
position: relative;
386+
}
387+
388+
.clear-right-5 {
389+
margin-right: 5px;
390+
}

0 commit comments

Comments
 (0)