Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 5266776

Browse files
yeelan0319yeelan0319
authoredSep 8, 2017
feat(button): create theme mixin for button (#1244)
·
v14.0.0@material/animation@0.4.0
1 parent deb887a commit 5266776

File tree

3 files changed

+172
-107
lines changed

3 files changed

+172
-107
lines changed
 

‎packages/mdc-button/_mixins.scss

+110-13
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,122 @@
1717
@import "@material/ripple/mixins";
1818
@import "@material/theme/mixins";
1919
@import "@material/theme/variables";
20+
@import "./variables";
2021

21-
@mixin mdc-button-filled_() {
22-
@include mdc-ripple-base;
23-
@include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .32));
24-
@include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .32));
25-
@include mdc-theme-prop(color, text-primary-on-dark);
22+
@mixin mdc-button-base_() {
23+
@include mdc-typography(button);
2624

27-
background-color: black;
25+
display: inline-block;
26+
position: relative;
27+
box-sizing: border-box;
28+
min-width: 88px;
29+
height: $mdc-button-height;
30+
padding: 0 16px;
31+
border: none;
32+
outline: none;
33+
text-align: center;
34+
user-select: none;
35+
-webkit-appearance: none;
36+
overflow: hidden;
37+
vertical-align: middle;
2838

29-
@include mdc-theme-dark(".mdc-button") {
30-
@include mdc-ripple-base;
31-
@include mdc-ripple-bg((pseudo: "::before", base-color: black, opacity: .32));
32-
@include mdc-ripple-fg((pseudo: "::after", base-color: black, opacity: .32));
33-
@include mdc-theme-prop(color, text-primary-on-light);
39+
// postcss-bem-linter: ignore
40+
&:active {
41+
outline: none;
42+
}
43+
44+
&:hover {
45+
cursor: pointer;
46+
}
47+
48+
&::-moz-focus-inner {
49+
padding: 0;
50+
border: 0;
51+
}
52+
53+
&:disabled {
54+
cursor: default;
55+
pointer-events: none;
56+
}
57+
}
58+
59+
@mixin mdc-button--raised_() {
60+
@include mdc-elevation(2);
61+
@include mdc-elevation-transition;
62+
63+
&:hover,
64+
&:focus {
65+
@include mdc-elevation(4);
66+
}
67+
68+
&:active {
69+
@include mdc-elevation(8);
70+
}
71+
72+
&:disabled {
73+
@include mdc-elevation(0);
74+
}
75+
}
76+
77+
@mixin mdc-button--compact_() {
78+
padding: 0 8px;
79+
}
80+
81+
@mixin mdc-button--dense_() {
82+
height: $mdc-dense-button-height;
83+
font-size: .8125rem; // 13sp
84+
line-height: $mdc-dense-button-height;
85+
}
86+
87+
@mixin mdc-button-container-fill-color($color) {
88+
// :not(:disabled) is used to support link styled as button
89+
// as link does not support :enabled style
90+
&:not(:disabled) {
91+
@include mdc-theme-prop(background-color, $color);
92+
}
93+
}
94+
95+
@mixin mdc-button-stroke-color($color) {
96+
&:not(:disabled) {
97+
@include mdc-theme-prop(border-color, $color);
98+
}
99+
}
100+
101+
@mixin mdc-button-ink-color($color) {
102+
&:not(:disabled) {
103+
@include mdc-theme-prop(color, $color);
104+
}
105+
}
34106

35-
background-color: white;
107+
@mixin mdc-button-ripple($ripple-config) {
108+
&:not(:disabled) {
109+
@include mdc-ripple-base;
110+
@include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
111+
@include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
36112

37113
&:not(.mdc-ripple-upgraded) {
38-
-webkit-tap-highlight-color: rgba(black, .18);
114+
$tap-highlight-color: rgba(map-get($ripple-config, base-color), map-get($ripple-config, opacity));
115+
116+
@include mdc-theme-prop(-webkit-tap-highlight-color, $tap-highlight-color);
39117
}
40118
}
41119
}
120+
121+
@mixin mdc-button-corner-radius($corner-radius) {
122+
border-radius: $corner-radius;
123+
}
124+
125+
@mixin mdc-button-stroke-width($stroke-width) {
126+
border-width: $stroke-width;
127+
line-height: $mdc-button-height - $stroke-width * 2;
128+
129+
// postcss-bem-linter: ignore
130+
&.mdc-button--dense {
131+
// Minus extra 1 to accommodate odd font size of dense button
132+
line-height: $mdc-dense-button-height - $stroke-width * 2 - 1;
133+
}
134+
}
135+
136+
@mixin mdc-button-stroke-style($stroke-style) {
137+
border-style: $stroke-style;
138+
}

‎packages/mdc-button/_variables.scss

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
//
2+
// Copyright 2017 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
$mdc-button-height: 36px;
18+
$mdc-dense-button-height: 32px;

‎packages/mdc-button/mdc-button.scss

+44-94
Original file line numberDiff line numberDiff line change
@@ -23,102 +23,51 @@
2323

2424
// postcss-bem-linter: define button
2525
.mdc-button {
26-
@include mdc-ripple-base;
27-
@include mdc-ripple-bg((pseudo: "::before"));
28-
@include mdc-ripple-fg((pseudo: "::after"));
29-
@include mdc-typography(button);
30-
@include mdc-theme-prop(color, text-primary-on-light);
31-
32-
display: inline-block;
33-
position: relative;
34-
box-sizing: border-box;
35-
min-width: 88px;
36-
height: 36px;
37-
padding: 0 16px;
38-
border: none;
39-
border-radius: 4px;
40-
outline: none;
41-
background: transparent;
42-
text-align: center;
43-
user-select: none;
44-
-webkit-appearance: none;
45-
overflow: hidden;
46-
vertical-align: middle;
47-
48-
// postcss-bem-linter: ignore
49-
&:active {
50-
outline: none;
51-
}
52-
53-
&:hover {
54-
cursor: pointer;
55-
}
56-
57-
&::-moz-focus-inner {
58-
padding: 0;
59-
border: 0;
60-
}
61-
62-
&:not(.mdc-ripple-upgraded) {
63-
-webkit-tap-highlight-color: rgba(black, .3);
64-
}
26+
@include mdc-button-base_;
27+
@include mdc-button-corner-radius(4px);
28+
@include mdc-button-container-fill-color(transparent);
29+
@include mdc-button-ink-color(text-primary-on-light);
30+
@include mdc-button-ripple((base-color: black, opacity: .16));
6531

6632
@include mdc-theme-dark(".mdc-button") {
67-
@include mdc-ripple-base;
68-
@include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
69-
@include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
70-
@include mdc-theme-prop(color, text-primary-on-dark);
71-
72-
&:not(.mdc-ripple-upgraded) {
73-
-webkit-tap-highlight-color: rgba(white, .18);
74-
}
33+
@include mdc-button-ink-color(text-primary-on-dark);
34+
@include mdc-button-ripple((base-color: white, opacity: .16));
7535
}
7636
}
7737

7838
.mdc-button--raised,
7939
.mdc-button--unelevated {
80-
@include mdc-button-filled_;
81-
}
40+
@include mdc-button-container-fill-color(black);
41+
@include mdc-button-ink-color(text-primary-on-dark);
42+
@include mdc-button-ripple((base-color: white, opacity: .32));
8243

83-
.mdc-button--raised {
84-
@include mdc-elevation(2);
85-
@include mdc-elevation-transition;
86-
87-
&:hover,
88-
&:focus {
89-
@include mdc-elevation(4);
44+
@include mdc-theme-dark(".mdc-button") {
45+
@include mdc-button-container-fill-color(white);
46+
@include mdc-button-ink-color(text-primary-on-light);
47+
@include mdc-button-ripple((base-color: black, opacity: .32));
9048
}
49+
}
9150

92-
&:active {
93-
@include mdc-elevation(8);
94-
}
51+
.mdc-button--raised {
52+
@include mdc-button--raised_;
9553
}
9654

9755
.mdc-button--stroked {
98-
@include mdc-theme-prop(border-color, text-primary-on-light);
99-
100-
border-width: 2px;
101-
border-style: solid;
102-
line-height: 32px;
56+
@include mdc-button-stroke-width(2px);
57+
@include mdc-button-stroke-style(solid);
58+
@include mdc-button-stroke-color(text-primary-on-light);
10359

10460
@include mdc-theme-dark(".mdc-button") {
105-
@include mdc-theme-prop(border-color, text-primary-on-dark);
106-
}
107-
108-
// postcss-bem-linter: ignore
109-
&.mdc-button--dense {
110-
line-height: 27px; // To accommodate odd font size of dense button
61+
@include mdc-button-stroke-color(text-primary-on-dark);
11162
}
11263
}
11364

11465
.mdc-button--compact {
115-
padding: 0 8px;
66+
@include mdc-button--compact_;
11667
}
11768

11869
.mdc-button--dense {
119-
height: 32px;
120-
font-size: .8125rem; // 13sp
121-
line-height: 32px;
70+
@include mdc-button--dense_;
12271
}
12372

12473
@each $theme-style in (primary, secondary) {
@@ -129,34 +78,40 @@
12978
.mdc-button--#{$modifier} {
13079
$theme-value: map-get($mdc-theme-property-values, $theme-style);
13180

132-
@include mdc-ripple-base;
133-
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
134-
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
135-
@include mdc-theme-prop(color, $theme-style);
136-
137-
@include mdc-theme-dark(".mdc-button") {
81+
&:not(:disabled) {
13882
@include mdc-ripple-base;
13983
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
14084
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
14185
@include mdc-theme-prop(color, $theme-style);
86+
87+
@include mdc-theme-dark(".mdc-button") {
88+
@include mdc-ripple-base;
89+
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
90+
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
91+
@include mdc-theme-prop(color, $theme-style);
92+
}
14293
}
14394
// postcss-bem-linter: ignore
14495
&.mdc-button--raised,
14596
&.mdc-button--unelevated {
14697
$theme-value: map-get($mdc-theme-property-values, text-primary-on-#{$theme-style});
14798

148-
@include mdc-ripple-base;
149-
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .32));
150-
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .32));
151-
@include mdc-theme-prop(background-color, $theme-style);
152-
@include mdc-theme-prop(color, text-primary-on-#{$theme-style});
99+
&:not(:disabled) {
100+
@include mdc-ripple-base;
101+
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .32));
102+
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .32));
103+
@include mdc-theme-prop(background-color, $theme-style);
104+
@include mdc-theme-prop(color, text-primary-on-#{$theme-style});
105+
}
153106
}
154107
// postcss-bem-linter: ignore
155108
&.mdc-button--stroked {
156-
@include mdc-theme-prop(border-color, $theme-style);
157-
158-
@include mdc-theme-dark(".mdc-button") {
109+
&:not(:disabled) {
159110
@include mdc-theme-prop(border-color, $theme-style);
111+
112+
@include mdc-theme-dark(".mdc-button") {
113+
@include mdc-theme-prop(border-color, $theme-style);
114+
}
160115
}
161116
}
162117
}
@@ -165,11 +120,9 @@
165120
// Disabled button styles need to be last to ensure they override other primary/accent/dark styles
166121

167122
.mdc-button {
168-
fieldset:disabled &,
169123
&:disabled {
124+
background-color: transparent;
170125
color: rgba(black, .38);
171-
cursor: default;
172-
pointer-events: none;
173126

174127
@include mdc-theme-dark(".mdc-button") {
175128
@include mdc-theme-prop(color, text-disabled-on-dark);
@@ -179,9 +132,7 @@
179132

180133
.mdc-button--raised,
181134
.mdc-button--unelevated {
182-
fieldset:disabled &,
183135
&:disabled {
184-
@include mdc-elevation(0);
185136
@include mdc-theme-prop(color, text-primary-on-dark);
186137

187138
background-color: rgba(black, .15);
@@ -195,7 +146,6 @@
195146
}
196147

197148
.mdc-button--stroked {
198-
fieldset:disabled &,
199149
&:disabled {
200150
border-color: rgba(black, .38);
201151

0 commit comments

Comments
 (0)
This repository has been archived.