Skip to content

Commit 0a09d24

Browse files
fredtitaofredtitao
committed
Adds button-icon
1 parent 469c697 commit 0a09d24

File tree

6 files changed

+99
-31
lines changed

6 files changed

+99
-31
lines changed

‎src/scss/_disabled.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ $button-enabled: false !default;
1515

1616
// Styles
1717
$button-size-enabled: false !default;
18+
$button-icon-enabled: false !default;
1819
$button-text-enabled: false !default;
1920
$button-outline-enabled: false !default;
2021
$button-filled-enabled: false !default;

‎src/scss/buttons/_base.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,30 @@
5050
> * + * {
5151
margin-left: $spacer;
5252
}
53+
> .icon {
54+
display: block;
55+
font-size: inherit;
56+
height: $button-line-height;
57+
width: $button-line-height;
58+
object-fit: contain;
59+
color: inherit;
60+
&-fill {
61+
fill: currentColor;
62+
}
63+
&-stroke {
64+
stroke: currentColor;
65+
}
66+
&-xs {
67+
padding: ($button-line-height * 0.5 * 0.5) 0;
68+
// height: $button-line-height * 0.5;
69+
width: $button-line-height * 0.5;
70+
}
71+
&-sm {
72+
padding: ($button-line-height * 0.25 * 0.5) 0;
73+
// height: $button-line-height * 0.75;
74+
width: $button-line-height * 0.75;
75+
}
76+
}
5377
}
5478

5579
///

‎src/scss/buttons/_colors.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
$color-hover: $white,
1010
$color-active: $white,
1111
$color-disabled: $white,
12+
$icon-color: $white,
13+
$icon-color-hover: rgba($white, 0.125),
14+
$icon-color-active: rgba($white, 0.15),
15+
$icon-color-disabled: rgba($white, 0.075),
1216
$border-color: transparent,
1317
$border-color-hover: transparent,
1418
$border-color-active: transparent,
@@ -28,6 +32,10 @@
2832
$color-hover: $secondary,
2933
$color-active: $secondary,
3034
$color-disabled: color.grayscale($secondary),
35+
$icon-color: $secondary,
36+
$icon-color-hover: color.scale(rgba($secondary, 0.15), $lightness: 10%, $alpha: 10%),
37+
$icon-color-active: color.scale(rgba($secondary, 0.15), $lightness: 5%, $alpha: 20%),
38+
$icon-color-disabled: color.scale(rgba($secondary, 0.15), $saturation: -100%),
3139
$border-color: transparent,
3240
$border-color-hover: transparent,
3341
$border-color-active: transparent,
@@ -47,6 +55,10 @@
4755
$color-hover: $success,
4856
$color-active: $success,
4957
$color-disabled: color.grayscale($success),
58+
$icon-color: $success,
59+
$icon-color-hover: color.scale(rgba($success, 0.15), $lightness: 10%, $alpha: 10%),
60+
$icon-color-active: color.scale(rgba($success, 0.15), $lightness: 5%, $alpha: 20%),
61+
$icon-color-disabled: color.scale(rgba($success, 0.15), $saturation: -100%),
5062
$border-color: transparent,
5163
$border-color-hover: transparent,
5264
$border-color-active: transparent,
@@ -66,6 +78,10 @@
6678
$color-hover: $info,
6779
$color-active: $info,
6880
$color-disabled: color.grayscale($info),
81+
$icon-color: $info,
82+
$icon-color-hover: color.scale(rgba($info, 0.15), $lightness: 10%, $alpha: 10%),
83+
$icon-color-active: color.scale(rgba($info, 0.15), $lightness: 5%, $alpha: 20%),
84+
$icon-color-disabled: color.scale(rgba($info, 0.15), $saturation: -100%),
6985
$border-color: transparent,
7086
$border-color-hover: transparent,
7187
$border-color-active: transparent,
@@ -85,6 +101,10 @@
85101
$color-hover: $warning,
86102
$color-active: $warning,
87103
$color-disabled: color.grayscale($warning),
104+
$icon-color: $warning,
105+
$icon-color-hover: color.scale(rgba($warning, 0.15), $lightness: 10%, $alpha: 10%),
106+
$icon-color-active: color.scale(rgba($warning, 0.15), $lightness: 5%, $alpha: 20%),
107+
$icon-color-disabled: color.scale(rgba($warning, 0.15), $saturation: -100%),
88108
$border-color: transparent,
89109
$border-color-hover: transparent,
90110
$border-color-active: transparent,
@@ -104,6 +124,10 @@
104124
$color-hover: $danger,
105125
$color-active: $danger,
106126
$color-disabled: color.grayscale($danger),
127+
$icon-color: $danger,
128+
$icon-color-hover: color.scale(rgba($danger, 0.15), $lightness: 10%, $alpha: 10%),
129+
$icon-color-active: color.scale(rgba($danger, 0.15), $lightness: 5%, $alpha: 20%),
130+
$icon-color-disabled: color.scale(rgba($danger, 0.15), $saturation: -100%),
107131
$border-color: transparent,
108132
$border-color-hover: transparent,
109133
$border-color-active: transparent,

‎src/scss/buttons/_icon.scss‎

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,47 @@
11
@import 'variables';
22

3-
@if ($button-enabled) {
4-
.button {
3+
@if ($button-enabled and $button-icon-enabled) {
4+
.button-icon {
5+
padding: 0;
6+
min-width: 0;
7+
border: 0 none;
8+
background: none;
59
.icon {
6-
display: block;
7-
font-size: inherit;
8-
height: $button-line-height;
9-
width: $button-line-height;
10-
object-fit: contain;
11-
&-xs {
12-
padding: ($button-line-height * 0.5 * 0.5) 0;
13-
// height: $button-line-height * 0.5;
14-
width: $button-line-height * 0.5;
10+
height: $button-font-size * $button-icon-scale-ratio;
11+
width: auto;
12+
}
13+
@if ($button-enabled and $button-size-enabled) {
14+
&.button-xs {
15+
padding: 0;
16+
min-width: 0;
17+
.icon {
18+
height: $button-font-size-xs * $button-icon-scale-ratio;
19+
width: $button-font-size-xs * $button-icon-scale-ratio;
20+
}
21+
}
22+
&.button-sm {
23+
padding: 0;
24+
min-width: 0;
25+
.icon {
26+
height: $button-font-size-sm * $button-icon-scale-ratio;
27+
width: $button-font-size-sm * $button-icon-scale-ratio;
28+
}
29+
}
30+
&.button-md {
31+
padding: 0;
32+
min-width: 0;
33+
.icon {
34+
height: $button-font-size-md * $button-icon-scale-ratio;
35+
width: $button-font-size-md * $button-icon-scale-ratio;
36+
}
1537
}
16-
&-sm {
17-
padding: ($button-line-height * 0.25 * 0.5) 0;
18-
// height: $button-line-height * 0.75;
19-
width: $button-line-height * 0.75;
38+
&.button-lg {
39+
padding: 0;
40+
min-width: 0;
41+
.icon {
42+
height: $button-font-size-lg * $button-icon-scale-ratio;
43+
width: $button-font-size-lg * $button-icon-scale-ratio;
44+
}
2045
}
2146
}
2247
}

‎src/scss/buttons/_mixins.scss‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,10 @@
9090
/// @param {*} $color-hover [null]
9191
/// @param {*} $color-active [null]
9292
/// @param {*} $color-disabled [null]
93+
/// @param {*} $color-icon [null]
94+
/// @param {*} $color-icon-hover [null]
95+
/// @param {*} $color-icon-active [null]
96+
/// @param {*} $color-icon-disabled [null]
9397
/// @param {*} $border-color [null]
9498
/// @param {*} $border-color-hover [null]
9599
/// @param {*} $border-color-active [null]
@@ -107,20 +111,4 @@
107111
@each $name, $value in meta.keywords($vars) {
108112
@include button-css-var($name, $value);
109113
}
110-
// --color: #{$color};
111-
// --color-hover: #{$color-hover};
112-
// --color-active: #{$color-active};
113-
// --color-disabled: #{$color-disabled};
114-
// --border-color: #{$border-color};
115-
// --border-color-hover: #{$border-color-hover};
116-
// --border-color-active: #{$border-color-active};
117-
// --border-color-disabled: #{$border-color-disabled};
118-
// --background-color: #{$background-color};
119-
// --background-color-hover: #{$background-color-hover};
120-
// --background-color-active: #{$background-color-active};
121-
// --background-color-disabled: #{$background-color-disabled};
122-
// --box-shadow: #{$box-shadow};
123-
// --box-shadow-hover: #{$box-shadow-hover};
124-
// --box-shadow-active: #{$box-shadow-active};
125-
// --box-shadow-disabled: #{$box-shadow-disabled};
126114
}

‎src/scss/buttons/_variables.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
$button-enabled: true !default;
99
$button-size-enabled: true !default;
10+
$button-icon-enabled: true !default;
1011
$button-text-enabled: true !default;
1112
$button-outline-enabled: true !default;
1213
$button-filled-enabled: true !default;
@@ -52,6 +53,10 @@ $button-background-color: rgba($primary, 0.15) !default;
5253
$button-background-color-hover: color.scale($button-background-color, $lightness: 10%, $alpha: 10%) !default;
5354
$button-background-color-active: color.scale($button-background-color, $lightness: 5%, $alpha: 20%) !default;
5455
$button-background-color-disabled: color.scale($button-background-color, $saturation: -100%) !default;
56+
$button-icon-color: $primary !default;
57+
$button-icon-color-hover: color.scale($button-icon-color, $lightness: 10%, $alpha: 10%) !default;
58+
$button-icon-color-active: color.scale($button-icon-color, $lightness: 5%, $alpha: 20%) !default;
59+
$button-icon-color-disabled: color.scale($button-icon-color, $saturation: -100%) !default;
5560

5661
// Secondary
5762
$button-secondary-color: $secondary !default;
@@ -112,6 +117,7 @@ $button-list-gap: 4px !default;
112117
/// Sizes
113118
///
114119
$button-scale-ratio: utils.$ratio-major-third !default;
120+
$button-icon-scale-ratio: 3 !default;
115121

116122
// button-xs
117123
$button-font-size-xs: utils.scale($button-font-size, -2, $button-scale-ratio) !default;

0 commit comments

Comments
 (0)