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

Commit 75eb1bc

Browse files
kfranqueiropatrickrodee
kfranqueiro
authored and
patrickrodee
committed
feat(icon-toggle): Use new mdc-states mixin for icon-toggle styles (#1685)
1 parent 28b97a5 commit 75eb1bc

File tree

3 files changed

+73
-99
lines changed

3 files changed

+73
-99
lines changed

‎demos/icon-toggle.html

Lines changed: 3 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -25,83 +25,6 @@
2525
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
2626
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2727
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
28-
<style>
29-
.mdc-theme--dark {
30-
background: #303030;
31-
}
32-
33-
.mdc-theme--dark:not(.demo-color-combo) {
34-
padding-bottom: 1rem;
35-
}
36-
37-
#demo-color-combos {
38-
display: flex;
39-
align-items: center;
40-
justify-content: flex-start;
41-
}
42-
43-
.demo-wrapper {
44-
margin-left: 1rem;
45-
}
46-
47-
.example {
48-
display: flex;
49-
flex-flow: row wrap;
50-
align-content: left;
51-
justify-content: left;
52-
}
53-
54-
.toggle-example {
55-
min-width: 240px;
56-
padding: 24px;
57-
margin: 24px;
58-
}
59-
60-
.example h2 {
61-
font-size: 1.3em;
62-
margin-bottom: 0.8em;
63-
margin-top: 0.8em;
64-
}
65-
66-
.demo-color-combo {
67-
width: 250px;
68-
padding: 1rem;
69-
border-radius: 4px;
70-
display: inline-flex;
71-
flex-direction: column;
72-
align-items: center;
73-
justify-content: center;
74-
margin-right: 8px;
75-
}
76-
77-
.demo-color-combo > p {
78-
margin: 0;
79-
}
80-
81-
#light-on-bg {
82-
background-color: #3e82f7;
83-
}
84-
#light-on-bg .mdc-icon-toggle {
85-
color: white;
86-
}
87-
#light-on-bg .mdc-icon-toggle.mdc-ripple-upgraded::before,
88-
#light-on-bg .mdc-icon-toggle.mdc-ripple-upgraded::after {
89-
background-color: rgba(255, 255, 255, .3);
90-
}
91-
92-
#dark-on-bg {
93-
background-color: #00bcd6;
94-
}
95-
96-
#custom-on-dark .mdc-icon-toggle {
97-
color: #de442c;
98-
}
99-
#custom-on-dark .mdc-icon-toggle.mdc-ripple-upgraded::before,
100-
#custom-on-dark .mdc-icon-toggle.mdc-ripple-upgraded::after {
101-
/* #de442c - opacity .16 */
102-
background-color: rgba(222, 68, 44, .26);
103-
}
104-
</style>
10528
</head>
10629
<body class="mdc-typography">
10730
<header class="mdc-toolbar mdc-toolbar--fixed">
@@ -258,7 +181,7 @@ <h2>Additional Color Combinations</h2>
258181
favorite_border
259182
</i>
260183
</div>
261-
<p class="mdc-theme--text-primary-on-primary">Light icon on background</p>
184+
<div class="mdc-theme--text-primary-on-primary">Light icon on background</div>
262185
</div>
263186
<div id="dark-on-bg" class="demo-color-combo">
264187
<div class="mdc-theme--primary">
@@ -272,7 +195,7 @@ <h2>Additional Color Combinations</h2>
272195
favorite_border
273196
</i>
274197
</div>
275-
<p>Dark icon on background</p>
198+
<div>Dark icon on background</div>
276199
</div>
277200
<div id="custom-on-dark" class="demo-color-combo mdc-theme--dark">
278201
<div>
@@ -286,7 +209,7 @@ <h2>Additional Color Combinations</h2>
286209
favorite_border
287210
</i>
288211
</div>
289-
<p class="mdc-theme--text-primary-on-dark">Custom color on dark background</p>
212+
<div class="mdc-theme--text-primary-on-dark">Custom color on dark background</div>
290213
</div>
291214
</div>
292215
</div>

‎demos/icon-toggle.scss

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,69 @@
1616

1717
@import "./common";
1818
@import "../packages/mdc-icon-toggle/mdc-icon-toggle";
19+
@import "../packages/mdc-ripple/mixins";
20+
21+
.mdc-theme--dark {
22+
background: #303030;
23+
}
24+
25+
.demo-wrapper {
26+
margin-left: 1rem;
27+
}
28+
29+
.example {
30+
display: flex;
31+
flex-flow: row wrap;
32+
align-content: left;
33+
justify-content: left;
34+
}
35+
36+
.toggle-example {
37+
min-width: 240px;
38+
padding: 24px;
39+
margin: 24px;
40+
}
41+
42+
#demo-color-combos {
43+
display: flex;
44+
align-items: center;
45+
justify-content: flex-start;
46+
}
47+
48+
.demo-color-combo {
49+
width: 250px;
50+
padding: 1rem;
51+
border-radius: 4px;
52+
display: inline-flex;
53+
flex-direction: column;
54+
align-items: center;
55+
justify-content: center;
56+
margin-right: 8px;
57+
}
58+
59+
#light-on-bg {
60+
background-color: #3e82f7;
61+
}
62+
#light-on-bg .mdc-icon-toggle {
63+
color: white;
64+
@include mdc-states-base-color(white);
65+
@include mdc-states-hover-opacity(.1);
66+
@include mdc-states-focus-opacity(.3);
67+
@include mdc-states-press-opacity(.4);
68+
}
69+
70+
#dark-on-bg {
71+
background-color: #00bcd6;
72+
}
73+
#dark-on-bg .mdc-icon-toggle {
74+
color: black;
75+
@include mdc-states(black);
76+
}
77+
78+
#custom-on-dark .mdc-icon-toggle {
79+
color: #de442c;
80+
@include mdc-states-base-color(#de442c);
81+
@include mdc-states-hover-opacity(.09);
82+
@include mdc-states-focus-opacity(.26);
83+
@include mdc-states-press-opacity(.35);
84+
}

‎packages/mdc-icon-toggle/mdc-icon-toggle.scss

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,11 @@
2323
.mdc-icon-toggle {
2424
@include mdc-theme-prop(color, text-secondary-on-light);
2525
@include mdc-ripple-surface;
26-
// NOTE: The spec denotes specific opacity values to use for different styles of icon buttons,
27-
// either "light", "dark", or "color". Because ripples are made up of two distinct elements,
28-
// we need to use an opacity value such that when two elements of the same color and opacity are
29-
// layered on top of one another, they create the opacity specified in the spec.
30-
// This is done by using the painter's compositing algorithm:
31-
//
32-
// alpha[desired] = alpha[a] + alpha[b](1 - alpha[a]).
33-
//
34-
// Because both alpha values are the same this reduces to:
35-
//
36-
// alpha[desired] = alpha[a] + alpha[a](1 - alpha[a]).
37-
//
38-
// We simply solve this quadratic equation for the nonnegative root between [0, 1].
39-
// E.g. for black 12% opacity:
40-
// https://www.wolframalpha.com/input/?i=x+%2B+x(1+-+x)+%3D+.12,+x+%3C%3D+1,+x+%3E%3D+0
41-
@include mdc-ripple-color(black, .062);
4226
@include mdc-ripple-radius;
27+
@include mdc-states(black);
4328

4429
@include mdc-theme-dark(".mdc-icon-toggle", true) {
45-
@include mdc-ripple-color(white, .16);
30+
@include mdc-states(white);
4631
}
4732

4833
display: flex;
@@ -75,12 +60,12 @@
7560

7661
.mdc-icon-toggle--primary {
7762
@include mdc-theme-prop(color, primary);
78-
@include mdc-ripple-color(primary, .14);
63+
@include mdc-states(primary);
7964
}
8065

8166
.mdc-icon-toggle--accent {
8267
@include mdc-theme-prop(color, secondary);
83-
@include mdc-ripple-color(secondary, .14);
68+
@include mdc-states(secondary);
8469
}
8570

8671
.mdc-icon-toggle--disabled {

0 commit comments

Comments
 (0)