Skip to content

Commit bba3c5c

Browse files
brandyscarneybrandyscarney
committed
feat(windows): clean up button css, rename Sass variables and add more
references #5565
1 parent 996f944 commit bba3c5c

File tree

1 file changed

+61
-64
lines changed

1 file changed

+61
-64
lines changed

‎ionic/components/button/button.wp.scss

Lines changed: 61 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,46 @@
44
// Windows Button
55
// --------------------------------------------------
66

7-
$button-wp-margin: 0.4rem 0.2rem !default;
8-
$button-wp-padding: 0 1.1em !default;
9-
$button-wp-font-size: 1.4rem !default;
10-
$button-wp-height: 3.6rem !default;
11-
$button-wp-border-width: 3px !default;
12-
13-
$button-wp-border-radius: 0 !default;
14-
15-
$button-wp-clear-hover-background-color: rgba(158, 158, 158, 0.1) !default;
16-
$button-wp-clear-active-background-color: rgba(158, 158, 158, 0.2) !default;
17-
18-
$button-wp-color: map-get($colors-wp, primary) !default;
19-
$button-wp-color-activated: color-shade($button-wp-color) !default;
20-
$button-wp-text-color: color-inverse($button-wp-color) !default;
21-
$button-wp-hover-opacity: 0.8 !default;
22-
23-
$button-wp-large-font-size: 2rem !default;
24-
$button-wp-large-height: 2.8em !default;
25-
$button-wp-large-padding: 1.0em !default;
26-
$button-wp-small-font-size: 1.3rem !default;
27-
$button-wp-small-height: 2.1em !default;
28-
$button-wp-small-padding: 0.9em !default;
29-
$button-wp-small-icon-font-size: 1.4em !default;
30-
7+
$button-wp-margin: 0.4rem 0.2rem !default;
8+
$button-wp-padding: 0 1.1em !default;
9+
$button-wp-font-size: 1.4rem !default;
10+
$button-wp-height: 3.6rem !default;
11+
$button-wp-border-color: transparent !default;
12+
$button-wp-border-width: 3px !default;
13+
$button-wp-border-radius: 0 !default;
14+
15+
// Regular button
16+
$button-wp-background-color: map-get($colors-wp, primary) !default;
17+
$button-wp-background-color-activated: color-shade($button-wp-background-color) !default;
18+
$button-wp-text-color: color-inverse($button-wp-background-color) !default;
19+
20+
// Clear button
21+
$button-wp-clear-background-color-hover: rgba(158, 158, 158, 0.1) !default;
22+
$button-wp-clear-background-color-activated: rgba(158, 158, 158, 0.2) !default;
23+
$button-wp-clear-background-color: transparent !default;
24+
$button-wp-clear-text-color: $button-wp-background-color !default;
25+
26+
// Outline button
27+
$button-wp-outline-background-color: transparent !default;
28+
$button-wp-outline-background-color-activated: $button-wp-background-color !default;
29+
$button-wp-outline-background-color-opacity: 0.16 !default;
30+
$button-wp-outline-border-width: 1px !default;
31+
$button-wp-outline-border-color: $button-wp-background-color !default;
32+
$button-wp-outline-text-color: $button-wp-background-color !default;
33+
34+
// Large button
35+
$button-wp-large-font-size: 2rem !default;
36+
$button-wp-large-height: 2.8em !default;
37+
$button-wp-large-padding: 0 1.0em !default;
38+
39+
// Small button
40+
$button-wp-small-font-size: 1.3rem !default;
41+
$button-wp-small-height: 2.1em !default;
42+
$button-wp-small-padding: 0 0.9em !default;
43+
$button-wp-small-icon-font-size: 1.4em !default;
44+
45+
// FAB button
46+
$button-wp-fab-border-radius: 50% !default;
3147

3248
// Windows Default Button
3349
// --------------------------------------------------
@@ -37,20 +53,20 @@ $button-wp-small-icon-font-size: 1.4em !default;
3753
padding: $button-wp-padding;
3854
height: $button-wp-height;
3955
border-radius: $button-wp-border-radius;
40-
border: $button-wp-border-width solid transparent;
56+
border: $button-wp-border-width solid $button-wp-border-color;
4157

4258
font-size: $button-wp-font-size;
4359

4460
color: $button-wp-text-color;
45-
background-color: $button-wp-color;
61+
background-color: $button-wp-background-color;
4662

4763
&:hover:not(.disable-hover) {
48-
border-color: $button-wp-color-activated;
49-
background-color: $button-wp-color;
64+
border-color: $button-wp-background-color-activated;
65+
background-color: $button-wp-background-color;
5066
}
5167

5268
&.activated {
53-
background-color: $button-wp-color-activated;
69+
background-color: $button-wp-background-color-activated;
5470
}
5571
}
5672

@@ -74,7 +90,6 @@ $button-wp-small-icon-font-size: 1.4em !default;
7490
}
7591

7692
&.activated {
77-
opacity: 1;
7893
background-color: $bg-color-activated;
7994
}
8095
}
@@ -86,13 +101,13 @@ $button-wp-small-icon-font-size: 1.4em !default;
86101
// --------------------------------------------------
87102

88103
.button-large {
89-
padding: 0 $button-wp-large-padding;
104+
padding: $button-wp-large-padding;
90105
height: $button-wp-large-height;
91106
font-size: $button-wp-large-font-size;
92107
}
93108

94109
.button-small {
95-
padding: 0 $button-wp-small-padding;
110+
padding: $button-wp-small-padding;
96111
height: $button-wp-small-height;
97112
font-size: $button-wp-small-font-size;
98113
}
@@ -124,21 +139,18 @@ $button-wp-small-icon-font-size: 1.4em !default;
124139
// --------------------------------------------------
125140

126141
.button-outline {
127-
border-width: 1px;
142+
border-width: $button-wp-outline-border-width;
128143
border-style: solid;
129-
border-color: $button-wp-color;
130-
background-color: transparent;
131-
color: $button-wp-color;
132-
box-shadow: none;
144+
border-color: $button-wp-outline-border-color;
145+
background-color: $button-wp-outline-background-color;
146+
color: $button-wp-outline-text-color;
133147

134148
&:hover:not(.disable-hover) {
135-
background-color: $button-wp-clear-hover-background-color;
149+
background-color: $button-wp-clear-background-color-hover;
136150
}
137151

138152
&.activated {
139-
opacity: 1;
140-
box-shadow: none;
141-
background-color: transparent;
153+
background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity);
142154
}
143155
}
144156

@@ -151,16 +163,15 @@ $button-wp-small-icon-font-size: 1.4em !default;
151163
.button-outline-#{$color-name} {
152164
$fg-color: color-shade($color-value, 5%);
153165
border-color: $fg-color;
154-
background-color: transparent;
155166
color: $fg-color;
156167

157168
&:hover:not(.disable-hover) {
158169
border-color: $fg-color;
159-
background-color: $button-wp-clear-hover-background-color;
170+
background-color: $button-wp-clear-background-color-hover;
160171
}
161172

162173
&.activated {
163-
background-color: transparent;
174+
background-color: rgba($fg-color, $button-wp-outline-background-color-opacity);
164175
}
165176
}
166177

@@ -171,21 +182,15 @@ $button-wp-small-icon-font-size: 1.4em !default;
171182
// --------------------------------------------------
172183

173184
.button-clear {
174-
border-color: transparent;
175-
opacity: 1;
176-
box-shadow: none;
177-
background-color: transparent;
178-
color: $button-wp-color;
185+
background-color: $button-wp-clear-background-color;
186+
color: $button-wp-clear-text-color;
179187

180188
&.activated {
181-
border-color: transparent;
182-
background-color: $button-wp-clear-active-background-color;
183-
box-shadow: none;
189+
background-color: $button-wp-clear-background-color-activated;
184190
}
185191

186192
&:hover:not(.disable-hover) {
187-
border-color: transparent;
188-
background-color: $button-wp-clear-hover-background-color;
193+
background-color: $button-wp-clear-background-color-hover;
189194
}
190195
}
191196

@@ -197,13 +202,10 @@ $button-wp-small-icon-font-size: 1.4em !default;
197202

198203
.button-clear-#{$color-name} {
199204
$fg-color: $color-value;
200-
border-color: transparent;
201-
background-color: transparent;
202205
color: $fg-color;
203206

204207
&.activated {
205-
background-color: $button-wp-clear-active-background-color;
206-
box-shadow: none;
208+
background-color: $button-wp-clear-background-color-activated;
207209
}
208210

209211
&:hover:not(.disable-hover) {
@@ -226,12 +228,7 @@ $button-wp-small-icon-font-size: 1.4em !default;
226228
// --------------------------------------------------
227229

228230
.button-fab {
229-
border-radius: 50%;
230-
border-color: transparent;
231-
232-
&:hover:not(.disable-hover) {
233-
border-color: transparent;
234-
}
231+
border-radius: $button-wp-fab-border-radius;
235232
}
236233

237234
.button-icon-only {

0 commit comments

Comments
 (0)