Skip to content

Commit b70614b

Browse files
manucorporatmanucorporat
committed
fix(fab): colors in speed dial buttons
1 parent 7cf01fb commit b70614b

File tree

6 files changed

+177
-93
lines changed

6 files changed

+177
-93
lines changed

‎src/components/fab/fab.ios.scss‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,40 @@
33
// iOS FAB Button
44
// --------------------------------------------------
55

6-
/// @prop - Border radius of the FAB button
7-
$button-ios-fab-border-radius: 50% !default;
6+
/// @prop - Background color of the button
7+
$fab-ios-background-color: color($colors-ios, primary) !default;
88

9-
.fab-button {
10-
border-radius: $button-ios-fab-border-radius;
9+
/// @prop - Text color of the button
10+
$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default;
11+
12+
/// @prop - Background color of the activated button
13+
$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default;
14+
15+
/// @prop - Background color of the button
16+
$fab-ios-in-list-background-color: color($colors-ios, light) !default;
17+
18+
/// @prop - Text color of the button
19+
$fab-ios-in-list-text-color: color-contrast($colors-ios, $fab-ios-in-list-background-color) !default;
20+
21+
/// @prop - Background color of the activated button
22+
$fab-ios-in-list-background-color-activated: color-shade($fab-ios-in-list-background-color) !default;
23+
24+
.fab-ios {
25+
color: $fab-ios-text-color;
26+
background-color: $fab-ios-background-color;
27+
}
28+
29+
.fab-ios.activated {
30+
background-color: $fab-ios-background-color-activated;
31+
}
32+
33+
.fab-ios.fab-in-list {
34+
color: $fab-ios-in-list-text-color;
35+
background-color: $fab-ios-in-list-background-color;
36+
}
37+
38+
.fab-ios.fab-in-list.activated {
39+
background-color: $fab-ios-in-list-background-color-activated;
1140
}
1241

1342

@@ -20,12 +49,12 @@ $button-ios-fab-border-radius: 50% !default;
2049
$background-color-activated: color-shade($background-color);
2150
$fg-color: $color-contrast;
2251

23-
.fab-ios-#{$color-name} {
52+
.fab-ios.fab-ios-#{$color-name} {
2453
color: $fg-color;
2554
background-color: $background-color;
2655
}
2756

28-
.fab-ios-#{$color-name}.activated {
57+
.fab-ios.fab-ios-#{$color-name}.activated {
2958
background-color: $background-color-activated;
3059
}
3160
}

‎src/components/fab/fab.md.scss‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,58 @@
33
// Material Design FAB Button
44
// --------------------------------------------------
55

6-
/// @prop - Border radius of the FAB button
7-
$button-md-fab-border-radius: 50% !default;
8-
96
/// @prop - Box shadow of the FAB button
10-
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
7+
$fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
118

129
/// @prop - Box shadow of the activated FAB button
13-
$button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
10+
$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
11+
12+
/// @prop - Background color of the button
13+
$fab-md-background-color: color($colors-md, primary) !default;
14+
15+
/// @prop - Text color of the button
16+
$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default;
17+
18+
/// @prop - Background color of the activated button
19+
$fab-md-background-color-activated: color-shade($fab-md-background-color) !default;
20+
21+
/// @prop - Background color of the button
22+
$fab-md-in-list-background-color: color($colors-md, light) !default;
23+
24+
/// @prop - Text color of the button
25+
$fab-md-in-list-text-color: color-contrast($colors-md, $fab-md-in-list-background-color) !default;
26+
27+
/// @prop - Background color of the activated button
28+
$fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-background-color) !default;
1429

1530

16-
.fab-button {
17-
border-radius: $button-md-fab-border-radius;
18-
box-shadow: $button-md-fab-box-shadow;
31+
.fab-md {
32+
color: $fab-md-text-color;
33+
background-color: $fab-md-background-color;
34+
35+
box-shadow: $fab-md-box-shadow;
1936

2037
transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
2138
background-color $button-md-transition-duration $button-md-transition-timing-function,
2239
color $button-md-transition-duration $button-md-transition-timing-function;
40+
}
2341

24-
&.activated {
25-
box-shadow: $button-md-fab-box-shadow-activated;
26-
}
42+
.fab-md.activated {
43+
background-color: $fab-md-background-color-activated;
44+
box-shadow: $fab-md-box-shadow-activated;
45+
}
46+
47+
.fab-md.fab-in-list {
48+
color: $fab-md-in-list-text-color;
49+
background-color: $fab-md-in-list-background-color;
50+
}
51+
52+
.fab-md.fab-wp.fab-in-list.activated {
53+
background-color: $fab-md-in-list-background-color-activated;
2754
}
2855

2956

30-
// Generate iOS FAB colors
57+
// Generate MD FAB colors
3158
// --------------------------------------------------
3259

3360
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@@ -36,12 +63,12 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
3663
$background-color-activated: color-shade($background-color);
3764
$fg-color: $color-contrast;
3865

39-
.fab-md-#{$color-name} {
66+
.fab-md.fab-md-#{$color-name} {
4067
color: $fg-color;
4168
background-color: $background-color;
4269
}
4370

44-
.fab-md-#{$color-name}.activated {
71+
.fab-md.fab-md-#{$color-name}.activated {
4572
background-color: $background-color-activated;
4673
}
4774
}

‎src/components/fab/fab.scss‎

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,33 @@
44
// --------------------------------------------------
55

66
/// @prop - Width and height of the FAB button
7-
$button-fab-size: 56px !default;
8-
$button-fab-mini-size: 40px !default;
9-
$button-fab-content-margin: 10px !default;
10-
$button-fab-list-margin: 10px !default;
7+
$fab-size: 56px !default;
8+
$fab-mini-size: 40px !default;
9+
$fab-content-margin: 10px !default;
10+
$fab-list-margin: 10px !default;
1111

1212

13-
.fab-button {
13+
.fab {
14+
@include appearance(none);
15+
1416
position: relative;
1517
z-index: 0;
1618
display: block;
1719
overflow: hidden;
1820

19-
width: $button-fab-size;
20-
height: $button-fab-size;
21+
width: $fab-size;
22+
height: $fab-size;
2123

24+
border-radius: 50%;
2225
font-size: 14px;
23-
line-height: $button-fab-size;
26+
line-height: $fab-size;
2427
text-align: center;
2528
text-overflow: ellipsis;
2629
text-transform: none;
2730
white-space: nowrap;
28-
color: #fff;
29-
background-color: #327eff;
3031
cursor: pointer;
3132
transition: background-color, opacity 100ms linear;
3233

33-
-moz-appearance: none;
34-
-webkit-appearance: none;
3534
background-clip: padding-box;
3635
font-kerning: none;
3736
user-select: none;
@@ -46,16 +45,16 @@ $button-fab-list-margin: 10px !default;
4645
// FAB mini
4746
// --------------------------------------------------
4847

49-
.fab-button[mini] {
50-
margin: ($button-fab-size - $button-fab-mini-size) / 2;
48+
.fab[mini] {
49+
margin: ($fab-size - $fab-mini-size) / 2;
5150

52-
width: $button-fab-mini-size;
53-
height: $button-fab-mini-size;
51+
width: $fab-mini-size;
52+
height: $fab-mini-size;
5453

55-
line-height: $button-fab-mini-size;
54+
line-height: $fab-mini-size;
5655

5756
.fab-close-icon {
58-
line-height: $button-fab-mini-size;
57+
line-height: $fab-mini-size;
5958
}
6059
}
6160

@@ -70,37 +69,37 @@ ion-fab {
7069
&[center] {
7170
left: 50%;
7271

73-
margin-left: -$button-fab-size / 2;
72+
margin-left: -$fab-size / 2;
7473
}
7574

7675
&[middle] {
7776
top: 50%;
7877

79-
margin-top: -$button-fab-size / 2;
78+
margin-top: -$fab-size / 2;
8079
}
8180

8281
&[top] {
83-
top: $button-fab-content-margin;
82+
top: $fab-content-margin;
8483
}
8584

8685
&[right] {
87-
right: $button-fab-content-margin;
86+
right: $fab-content-margin;
8887
}
8988

9089
&[bottom] {
91-
bottom: $button-fab-content-margin;
90+
bottom: $fab-content-margin;
9291
}
9392

9493
&[left] {
95-
left: $button-fab-content-margin;
94+
left: $fab-content-margin;
9695
}
9796

9897
&[top][edge] {
99-
top: -$button-fab-size / 2;
98+
top: -$fab-size / 2;
10099
}
101100

102101
&[bottom][edge] {
103-
bottom: -$button-fab-size / 2;
102+
bottom: -$fab-size / 2;
104103
}
105104
}
106105

@@ -116,32 +115,30 @@ ion-fab-list {
116115
flex-direction: column;
117116
align-items: center;
118117

119-
margin: $button-fab-size + $button-fab-list-margin 0;
118+
margin: $fab-size + $fab-list-margin 0;
120119

121-
min-width: $button-fab-size;
122-
min-height: $button-fab-size;
120+
min-width: $fab-size;
121+
min-height: $fab-size;
122+
}
123123

124-
.fab-button {
125-
margin: 8px;
124+
ion-fab-list .fab-in-list {
125+
margin: 8px;
126126

127-
width: $button-fab-mini-size;
128-
height: $button-fab-mini-size;
127+
width: $fab-mini-size;
128+
height: $fab-mini-size;
129129

130-
color: #797979;
131-
background: #fff;
132-
opacity: 0;
133-
visibility: hidden;
134-
transform: scale(0);
135-
transition: all 200ms ease;
136-
transition-delay: 10ms;
137-
transition-property: transform, opacity;
130+
opacity: 0;
131+
visibility: hidden;
132+
transform: scale(0);
133+
transition: all 200ms ease;
134+
transition-delay: 10ms;
135+
transition-property: transform, opacity;
136+
}
138137

139-
&.fab-dial-button-visible {
140-
opacity: 1;
141-
visibility: visible;
142-
transform: scale(1);
143-
}
144-
}
138+
ion-fab-list .fab-in-list.show {
139+
opacity: 1;
140+
visibility: visible;
141+
transform: scale(1);
145142
}
146143

147144
ion-fab-list[side=top] {
@@ -156,15 +153,15 @@ ion-fab-list[side=left] {
156153

157154
flex-direction: row-reverse;
158155

159-
margin: 0 $button-fab-size + $button-fab-list-margin;
156+
margin: 0 $fab-size + $fab-list-margin;
160157
}
161158

162159
ion-fab-list[side=right] {
163160
left: 0;
164161

165162
flex-direction: row;
166163

167-
margin: 0 $button-fab-size + $button-fab-list-margin;
164+
margin: 0 $fab-size + $fab-list-margin;
168165
}
169166

170167

@@ -181,13 +178,13 @@ ion-fab-list[side=right] {
181178
right: 0;
182179
left: 0;
183180

184-
line-height: $button-fab-size;
181+
line-height: $fab-size;
185182
opacity: 0;
186183
transform: scale(.4) rotateZ(-45deg);
187184
transition: all ease-in-out 300ms;
188185
}
189186

190-
.fab-button .button-inner {
187+
.fab .button-inner {
191188
transition: all ease-in-out 300ms;
192189
}
193190

0 commit comments

Comments
 (0)