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

Commit 7584267

Browse files
allan-chencopybara-github
allan-chen
authored and
copybara-github
committed
refactor(button): organize sass by feature
PiperOrigin-RevId: 351266720
1 parent 1433cce commit 7584267

17 files changed

+937
-651
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ Material Web strives to seamlessly incorporate into a wider range of usage conte
1010

1111
Material Components for the web is the successor to [Material Design Lite](https://getmdl.io/). In addition to implementing the [Material Design guidelines](https://material.io/design), it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically [architected](docs/code/architecture.md) for adaptability to various [major web frameworks](docs/framework-wrappers.md).
1212

13-
> NOTE: Try out our in-progress [Material Web Components](https://github.com/material-components/material-components-web-components) built on the W3C web components standard. Use them in your next web project and let us know how to improve by filing [bugs and feature requests](https://github.com/material-components/material-components-web-components/issues).
13+
> NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows
14+
> [semver](https://semver.org/) so you can control when you incorporate them.
15+
> We typically follow a 2-week release schedule which includes one major release per month with breaking changes,
16+
> and intermediate patch releases with bug fixes.
1417
1518
## Important links
1619

‎packages/mdc-banner/_banner.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
@use '@material/feature-targeting/feature-targeting';
2424
@use '@material/typography/typography';
25-
@use '@material/button/mixins' as button-mixins;
25+
@use '@material/button/button-theme';
2626
@use '@material/ripple/ripple-theme';
2727
@use '@material/rtl/mixins' as rtl-mixins;
2828
@use './banner-theme';
@@ -211,7 +211,7 @@ $_exit-duration: 250ms;
211211
}
212212

213213
.mdc-banner__primary-action {
214-
@include button-mixins.ink-color(
214+
@include button-theme.ink-color(
215215
banner-theme.$primary-action-text-color,
216216
$query: $query
217217
);
@@ -222,7 +222,7 @@ $_exit-duration: 250ms;
222222
}
223223

224224
.mdc-banner__secondary-action {
225-
@include button-mixins.ink-color(
225+
@include button-theme.ink-color(
226226
banner-theme.$secondary-action-text-color,
227227
$query: $query
228228
);

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
//
2+
// Copyright 2020 Google Inc.
3+
//
4+
// Permission is hereby granted, free of charge, to any person obtaining a copy
5+
// of this software and associated documentation files (the "Software"), to deal
6+
// in the Software without restriction, including without limitation the rights
7+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
// copies of the Software, and to permit persons to whom the Software is
9+
// furnished to do so, subject to the following conditions:
10+
//
11+
// The above copyright notice and this permission notice shall be included in
12+
// all copies or substantial portions of the Software.
13+
//
14+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20+
// THE SOFTWARE.
21+
//
22+
23+
// stylelint-disable selector-class-pattern --
24+
// Selector '.mdc-*' should only be used in this project.
25+
26+
@use '@material/elevation/functions' as elevation-functions;
27+
@use '@material/elevation/mixins' as elevation-mixins;
28+
@use '@material/feature-targeting/feature-targeting';
29+
@use './button-theme';
30+
31+
@mixin core-styles($query: feature-targeting.all()) {
32+
.mdc-button--raised,
33+
.mdc-button--unelevated {
34+
@include filled($query);
35+
}
36+
}
37+
38+
/// @deprecated Private style mixin for partners; not available for public use.
39+
@mixin deprecated-filled($query) {
40+
@include filled($query);
41+
}
42+
43+
@mixin filled($query) {
44+
@include button-theme.horizontal-padding(
45+
button-theme.$contained-horizontal-padding,
46+
$query
47+
);
48+
@include button-theme.container-fill-color(primary, $query);
49+
@include button-theme.ink-color(on-primary, $query);
50+
@include button-theme.disabled-container-fill-color(
51+
button-theme.$disabled-container-color,
52+
$query
53+
);
54+
@include button-theme.disabled-ink-color(
55+
button-theme.$disabled-ink-color,
56+
$query
57+
);
58+
}

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
//
2+
// Copyright 2020 Google Inc.
3+
//
4+
// Permission is hereby granted, free of charge, to any person obtaining a copy
5+
// of this software and associated documentation files (the "Software"), to deal
6+
// in the Software without restriction, including without limitation the rights
7+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
// copies of the Software, and to permit persons to whom the Software is
9+
// furnished to do so, subject to the following conditions:
10+
//
11+
// The above copyright notice and this permission notice shall be included in
12+
// all copies or substantial portions of the Software.
13+
//
14+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20+
// THE SOFTWARE.
21+
//
22+
23+
// stylelint-disable selector-class-pattern --
24+
// Selector '.mdc-*' should only be used in this project.
25+
26+
@use '@material/feature-targeting/feature-targeting';
27+
@use './button-theme';
28+
29+
@mixin core-styles($query: feature-targeting.all()) {
30+
.mdc-button--outlined {
31+
@include outlined($query: $query);
32+
}
33+
}
34+
35+
/// @deprecated Private style mixin for partners; not available for public use.
36+
@mixin deprecated-outlined($query) {
37+
@include outlined($query);
38+
}
39+
40+
@mixin outlined($query: feature-targeting.all()) {
41+
$feat-structure: feature-targeting.create-target($query, structure);
42+
43+
@include button-theme.outline-width(
44+
button-theme.$outlined-border-width,
45+
$query: $query
46+
);
47+
@include button-theme.outline-color(button-theme.$outline-color, $query);
48+
@include button-theme.disabled-outline-color(
49+
button-theme.$disabled-container-color,
50+
$query
51+
);
52+
53+
@include feature-targeting.targets($feat-structure) {
54+
border-style: solid;
55+
}
56+
}

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
//
2+
// Copyright 2020 Google Inc.
3+
//
4+
// Permission is hereby granted, free of charge, to any person obtaining a copy
5+
// of this software and associated documentation files (the "Software"), to deal
6+
// in the Software without restriction, including without limitation the rights
7+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
// copies of the Software, and to permit persons to whom the Software is
9+
// furnished to do so, subject to the following conditions:
10+
//
11+
// The above copyright notice and this permission notice shall be included in
12+
// all copies or substantial portions of the Software.
13+
//
14+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20+
// THE SOFTWARE.
21+
//
22+
23+
// stylelint-disable selector-class-pattern --
24+
// Selector '.mdc-*' should only be used in this project.
25+
26+
@use '@material/elevation/functions' as elevation-functions;
27+
@use '@material/elevation/mixins' as elevation-mixins;
28+
@use '@material/feature-targeting/feature-targeting';
29+
30+
@mixin core-styles($query: feature-targeting.all()) {
31+
.mdc-button--raised {
32+
@include raised($query);
33+
}
34+
}
35+
36+
/// @deprecated Private style mixin for partners; not available for public use.
37+
@mixin deprecated-raised($query) {
38+
@include raised($query);
39+
}
40+
41+
@mixin raised($query) {
42+
$feat-animation: feature-targeting.create-target($query, animation);
43+
$feat-color: feature-targeting.create-target($query, color);
44+
45+
@include elevation-mixins.elevation(2, $query: $query);
46+
47+
&:hover,
48+
&:focus {
49+
@include elevation-mixins.elevation(4, $query: $query);
50+
}
51+
52+
&:active {
53+
@include elevation-mixins.elevation(8, $query: $query);
54+
}
55+
56+
&:disabled {
57+
@include elevation-mixins.elevation(0, $query: $query);
58+
}
59+
60+
@include feature-targeting.targets($feat-animation) {
61+
transition: elevation-functions.transition-value();
62+
}
63+
}

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
//
2+
// Copyright 2016 Google Inc.
3+
//
4+
// Permission is hereby granted, free of charge, to any person obtaining a copy
5+
// of this software and associated documentation files (the "Software"), to deal
6+
// in the Software without restriction, including without limitation the rights
7+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
// copies of the Software, and to permit persons to whom the Software is
9+
// furnished to do so, subject to the following conditions:
10+
//
11+
// The above copyright notice and this permission notice shall be included in
12+
// all copies or substantial portions of the Software.
13+
//
14+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20+
// THE SOFTWARE.
21+
//
22+
23+
// stylelint-disable selector-class-pattern --
24+
// Selector '.mdc-*' should only be used in this project.
25+
26+
@use '@material/feature-targeting/feature-targeting';
27+
@use '@material/ripple/ripple';
28+
@use '@material/ripple/ripple-theme';
29+
@use './button-theme';
30+
31+
@mixin core-styles($query: feature-targeting.all()) {
32+
$feat-structure: feature-targeting.create-target($query, structure);
33+
34+
@include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE
35+
36+
.mdc-button {
37+
@include ripple.surface(
38+
$query: $query,
39+
$ripple-target: button-theme.$ripple-target
40+
);
41+
@include ripple.radius-bounded(
42+
$query: $query,
43+
$ripple-target: button-theme.$ripple-target
44+
);
45+
@include button-theme.ripple-states($color: primary, $query: $query);
46+
47+
#{button-theme.$ripple-target} {
48+
@include feature-targeting.targets($feat-structure) {
49+
position: absolute;
50+
// Ripple needs content-box as the box sizing and box-sizing: border-box
51+
// is often set as a default, so we override that here.
52+
box-sizing: content-box;
53+
width: 100%;
54+
height: 100%;
55+
overflow: hidden;
56+
}
57+
}
58+
59+
// Ripple targets inside outlined buttons set their own `top`/`left`,
60+
// depending on the border width.
61+
&:not(.mdc-button--outlined) #{button-theme.$ripple-target} {
62+
@include feature-targeting.targets($feat-structure) {
63+
top: 0;
64+
left: 0;
65+
}
66+
}
67+
}
68+
69+
.mdc-button--raised,
70+
.mdc-button--unelevated {
71+
@include button-theme.ripple-states($color: on-primary, $query: $query);
72+
}
73+
}

0 commit comments

Comments
 (0)