Skip to content

Commit 9337954

Browse files
karakara
committed
feat(button): add color attribute and unit tests
1 parent 0359c5e commit 9337954

File tree

13 files changed

+383
-250
lines changed

13 files changed

+383
-250
lines changed

‎src/components/button/_button-base.scss

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
2+
@import "variables";
3+
@import "shadows";
4+
5+
// TODO(jelbourn): This goes away.
6+
@import "default-theme";
7+
@import "button-theme";
8+
9+
// Flat and raised button standards
10+
$md-button-padding: 0 16px !default;
11+
$md-button-min-width: 88px !default;
12+
$md-button-margin: 0 !default;
13+
$md-button-line-height: 36px !default;
14+
$md-button-border-radius: 3px !default;
15+
16+
// Fab standards
17+
$md-fab-border-radius: 50% !default;
18+
$md-fab-size: 56px !default;
19+
$md-fab-padding: 16px !default;
20+
21+
$md-mini-fab-size: 40px !default;
22+
$md-mini-fab-padding: 8px !default;
23+
24+
// Applies base styles to all button types.
25+
%md-button-base {
26+
@include md-button-theme('color');
27+
28+
box-sizing: border-box;
29+
position: relative;
30+
31+
// Reset browser <button> styles.
32+
background: transparent;
33+
text-align: center;
34+
overflow: hidden;
35+
cursor: pointer;
36+
user-select: none;
37+
outline: none;
38+
border: none;
39+
40+
// Make anchors render like buttons.
41+
display: inline-block;
42+
white-space: nowrap;
43+
text-decoration: none;
44+
vertical-align: middle;
45+
46+
// Typography.
47+
font-size: $md-body-font-size-base;
48+
font-family: $md-font-family;
49+
font-weight: 500;
50+
color: md-color($md-foreground, text);
51+
52+
// Sizing.
53+
margin: $md-button-margin;
54+
min-width: $md-button-min-width;
55+
line-height: $md-button-line-height;
56+
padding: $md-button-padding;
57+
border-radius: $md-button-border-radius;
58+
59+
&[disabled] {
60+
cursor: default;
61+
}
62+
}
63+
64+
// Applies styles to buttons with backgrounds: raised, fab, and mini-fab
65+
%md-raised-button {
66+
@extend %md-button-base;
67+
68+
@include md-button-theme('color', default-contrast);
69+
@include md-button-theme('background-color');
70+
71+
background-color: md-color($md-background, background);
72+
box-shadow: $md-shadow-bottom-z-1;
73+
// Force hardware acceleration.
74+
transform: translate3d(0, 0, 0);
75+
76+
// Animation.
77+
transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
78+
box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;
79+
80+
&:active {
81+
box-shadow: $md-shadow-bottom-z-2;
82+
}
83+
84+
&.md-button-focus {
85+
background-color: md-color($md-foreground, base, 0.12);
86+
@include md-button-theme('background-color', 600);
87+
}
88+
89+
&[disabled] {
90+
box-shadow: none;
91+
}
92+
}
93+
94+
// Applies styles to fab and mini-fab button types only
95+
@mixin md-fab($size, $padding) {
96+
@extend %md-raised-button;
97+
98+
min-width: 0;
99+
border-radius: $md-fab-border-radius;
100+
background-color: md-color($md-accent);
101+
width: $size;
102+
height: $size;
103+
padding: $padding;
104+
105+
&.md-button-focus {
106+
background-color: md-color($md-accent, 600);
107+
}
108+
}

‎src/components/button/_button-theme.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
// Applies specified coloring to three supported palettes
3+
@mixin md-button-theme ($property, $color:500, $opacity: 1) {
4+
&.md-primary {
5+
#{$property}: md-color($md-primary, $color, $opacity);
6+
}
7+
&.md-accent {
8+
#{$property}: md-color($md-accent, $color, $opacity);
9+
}
10+
&.md-warn {
11+
#{$property}: md-color($md-warn, $color, $opacity);
12+
}
13+
14+
&.md-primary, &.md-accent, &.md-warn, &[disabled] {
15+
&[disabled] {
16+
$palette: if($property == 'color', $md-foreground, $md-background);
17+
#{$property}: md-color($palette, disabled-button);
18+
}
19+
}
20+
}

‎src/components/button/button.scss

Lines changed: 17 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -1,195 +1,39 @@
1-
@import "variables";
2-
@import "shadows";
3-
4-
// TODO(jelbourn): This goes away.
5-
@import "default-theme";
6-
7-
// TODO(jelbourn): Move variables and mixins into a partial file.
81
// TODO(jelbourn): Measure perf benefits for translate3d and will-change.
92
// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
103

4+
@import "button-base";
115

12-
// Standard button sizing.
13-
$md-button-padding: 0 rem(0.600) !default;
14-
$md-button-min-width: rem(8.800) !default;
15-
$md-button-margin: rem(0.600) rem(0.800) !default;
16-
$md-button-line-height: rem(3.60) !default;
17-
$md-button-border-radius: 3px !default;
18-
19-
// FAB sizing.
20-
$md-fab-size: rem(5.600) !default;
21-
$md-fab-line-height: rem(5.600) !default;
22-
$md-fab-padding: rem(1.60) !default;
23-
$md-fab-mini-size: rem(4.00) !default;
24-
$md-fab-mini-line-height: rem(4.00) !default;
25-
26-
/** Mixin to create distinct classes for fab positions, e.g. ".md-fab-position-bottom-right". */
27-
@mixin md-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
28-
.md-fab-position-#{$spot} {
29-
top: $top;
30-
right: $right;
31-
bottom: $bottom;
32-
left: $left;
33-
position: absolute;
34-
}
35-
}
36-
37-
/** Styles for all disabled buttons. */
38-
@mixin md-button-disabled() {
39-
color: md-color($md-foreground, disabled);
40-
background-color: transparent;
41-
cursor: default;
42-
}
43-
44-
/** Base styles for all buttons. */
45-
@mixin md-button-base() {
46-
box-sizing: border-box;
47-
position: relative;
48-
49-
// Reset browser <button> styles.
50-
background: transparent;
51-
text-align: center;
52-
overflow: hidden;
53-
cursor: pointer;
54-
user-select: none;
55-
outline: none;
56-
border: none;
57-
58-
// Make anchors render like buttons.
59-
display: inline-block;
60-
white-space: nowrap;
61-
text-decoration: none;
62-
vertical-align: middle;
63-
64-
// Typography.
65-
font-size: $md-body-font-size-base;
66-
font-weight: 500;
67-
68-
// Sizing.
69-
padding: $md-button-padding;
70-
margin: $md-button-margin;
71-
min-width: $md-button-min-width;
72-
line-height: $md-button-line-height;
73-
border-radius: $md-button-border-radius;
74-
75-
// Animation.
76-
transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
77-
box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;
78-
79-
// Hide the browser focus indicator, instead applying our own focus style on background-color.
80-
&:focus {
81-
outline: none;
82-
}
83-
84-
&:hover, &:focus {
85-
// Remove anchor underline again for more specific modifiers.
86-
text-decoration: none;
87-
}
6+
// TODO(kara): Replace attribute selectors with class selectors when possible
7+
[md-button] {
8+
@extend %md-button-base;
889

89-
// Use a CSS class for focus style because we only want to render the focus style when
90-
// the focus originated from a keyboard event (see JS source for more details).
9110
&:hover, &.md-button-focus {
92-
background: md-color($md-background, background, 0.2);
93-
}
94-
95-
&.md-primary {
96-
color: md-color($md-primary);
97-
}
98-
99-
&.md-accent {
100-
color: md-color($md-accent);
101-
}
102-
103-
// Use the [disabled] attribute instead of the :disabled pseudo-class because anchors
104-
// cannot technically be :disabled.
105-
&[disabled] {
106-
@include md-button-disabled();
107-
}
108-
}
109-
110-
/** Base styles for raised buttons, including FABs. */
111-
@mixin md-raised-button() {
112-
@include md-button-base();
113-
114-
// Force hardware acceleration.
115-
transform: translate3d(0, 0, 0);
116-
117-
box-shadow: $md-shadow-bottom-z-1;
118-
119-
&:active {
120-
box-shadow: $md-shadow-bottom-z-2;
121-
}
122-
123-
&[disabled] {
124-
box-shadow: none;
125-
}
126-
127-
&.md-primary {
128-
color: md-color($md-primary, default-contrast);
129-
background-color: md-color($md-primary);
130-
131-
&:hover, &.md-button-focus {
132-
background-color: md-color($md-primary, 600);
133-
}
134-
}
135-
136-
&.md-accent {
137-
color: md-color($md-accent, default-contrast);
138-
background-color: md-color($md-accent);
139-
140-
&:hover, &.md-button-focus {
141-
background-color: md-color($md-accent, A700);
142-
}
11+
background-color: md-color($md-foreground, base, 0.12);
12+
@include md-button-theme('background-color', 0.12);
14313
}
14414

145-
&.md-primary, &.md-accent {
146-
&[disabled] {
147-
@include md-button-disabled();
15+
&[disabled]:hover {
16+
&.md-primary, &.md-accent, &.md-warn, &:hover {
17+
background-color: transparent;
14818
}
14919
}
15020
}
15121

152-
153-
[md-button] {
154-
@include md-button-base();
155-
}
156-
15722
[md-raised-button] {
158-
@include md-raised-button();
159-
160-
color: md-color($md-foreground, text);
161-
background-color: md-color($md-background, background);
23+
@extend %md-raised-button;
16224
}
16325

16426
[md-fab] {
165-
@include md-raised-button();
166-
167-
z-index: $z-index-fab;
168-
169-
border-radius: 50%;
170-
min-width: 0;
171-
width: $md-fab-size;
172-
height: $md-fab-size;
173-
line-height: $md-fab-line-height;
174-
vertical-align: middle;
27+
@include md-fab($md-fab-size, $md-fab-padding);
28+
}
17529

176-
&.md-mini {
177-
line-height: $md-fab-mini-line-height;
178-
width: $md-fab-mini-size;
179-
height: $md-fab-mini-size;
180-
}
30+
[md-mini-fab] {
31+
@include md-fab($md-mini-fab-size, $md-mini-fab-padding)
18132
}
18233

183-
// Styles for high contrast mode.
34+
// Applies a clearer border for high-contrast mode (a11y)
18435
@media screen and (-ms-high-contrast: active) {
185-
[md-raised],
186-
[md-fab] {
36+
.md-raised-button, .md-fab, .md-mini-fab {
18737
border: 1px solid #fff;
18838
}
189-
}
190-
191-
$md-fab-pos-offset: ($md-fab-size - $md-fab-padding) / 2;
192-
@include md-fab-position(bottom-right, auto, $md-fab-pos-offset, $md-fab-pos-offset, auto);
193-
@include md-fab-position(bottom-left, auto, auto, $md-fab-pos-offset, $md-fab-pos-offset);
194-
@include md-fab-position(top-right, $md-fab-pos-offset, $md-fab-pos-offset, auto, auto);
195-
@include md-fab-position(top-left, $md-fab-pos-offset, auto, auto, $md-fab-pos-offset);
39+
}

0 commit comments

Comments
 (0)