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

Commit 921a41f

Browse files
moog16moog16
authored
feat(drawer): custom sass mixins for color, background, scrim (#1730)
BREAKING CHANGE: Renamed `mdc-permanent-drawer` CSS class to `mdc-drawer--permanent`, renamed `mdc-temporary-drawer` CSS class to `mdc-drawer--temporary`, and renamed `mdc-persistent-drawer` to `mdc-drawer--persistent`. Also renamed all subelement classes by removing the variant from the selectors. Example: ``` mdc-persistent-drawer__drawer --> mdc-drawer__drawer mdc-persistent-drawer__toolbar-spacer --> mdc-drawer__toolbar-spacer mdc-temporary-drawer__header --> mdc-drawer__header mdc-temporary-drawer__header-content --> mdc-drawer__header-content mdc-permanent-drawer__content --> mdc-drawer__content ```
1 parent 5013069 commit 921a41f

18 files changed

+515
-210
lines changed

‎demos/drawer/drawer.scss

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,44 @@
1414
// limitations under the License.
1515
//
1616

17+
@import "../../packages/mdc-list/mixins";
18+
@import "../../packages/mdc-form-field/mdc-form-field";
1719
@import "../common";
1820
@import "../../packages/mdc-drawer/mdc-drawer";
21+
@import "../../packages/mdc-drawer/mixins";
1922
@import "../../packages/mdc-elevation/mdc-elevation";
2023
@import "../../packages/mdc-list/mdc-list";
24+
25+
.demo-drawer--custom {
26+
@include mdc-drawer-fill-color($material-color-teal-900);
27+
@include mdc-drawer-ink-color(#fff);
28+
@include mdc-list-item-graphic-ink-color(#fff);
29+
30+
.demo-drawer-list-item {
31+
@include mdc-list-item-graphic-ink-color(text-icon-on-dark);
32+
@include mdc-list-item-primary-text-ink-color(text-secondary-on-dark);
33+
}
34+
35+
.demo-drawer-list-item.mdc-list-item--selected {
36+
@include mdc-list-item-graphic-ink-color(text-primary-on-dark);
37+
@include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
38+
}
39+
}
40+
41+
.demo-drawer--accessible {
42+
@include mdc-drawer-fill-color-accessible($material-color-indigo-500);
43+
44+
.demo-drawer-list-item {
45+
@include mdc-list-item-graphic-ink-color(text-icon-on-dark);
46+
@include mdc-list-item-primary-text-ink-color(text-secondary-on-dark);
47+
}
48+
49+
.demo-drawer-list-item.mdc-list-item--selected {
50+
@include mdc-list-item-graphic-ink-color(text-primary-on-dark);
51+
@include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
52+
}
53+
}
54+
55+
.demo-form-field {
56+
margin: 16px 0;
57+
}

‎demos/drawer/permanent-drawer-above-toolbar.html

Lines changed: 68 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<meta name="viewport" content="width=device-width, initial-scale=1">
2222
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
2323
<script src="/assets/drawer/drawer.css.js"></script>
24+
<script src="/assets/radio.css.js"></script>
2425
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
2526
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
2627
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
@@ -51,7 +52,7 @@
5152
}
5253

5354
/* Place drawer above toolbar shadow. */
54-
.mdc-permanent-drawer {
55+
.mdc-drawer--permanent {
5556
z-index: 2;
5657
}
5758

@@ -73,38 +74,38 @@
7374
</style>
7475
</head>
7576
<body class="mdc-typography demo-body">
76-
<nav class="mdc-permanent-drawer">
77-
<div class="mdc-permanent-drawer__toolbar-spacer"></div>
77+
<nav id="demo-drawer" class="mdc-drawer mdc-drawer--permanent demo-drawer">
78+
<div class="mdc-drawer__toolbar-spacer"></div>
7879
<div class="mdc-list-group">
7980
<nav class="mdc-list">
80-
<a class="mdc-list-item mdc-list-item--activated" href="#">
81+
<a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item" href="#">
8182
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
8283
</a>
83-
<a class="mdc-list-item" href="#">
84+
<a class="mdc-list-item demo-drawer-list-item" href="#">
8485
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
8586
</a>
86-
<a class="mdc-list-item" href="#">
87+
<a class="mdc-list-item demo-drawer-list-item" href="#">
8788
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Sent Mail
8889
</a>
89-
<a class="mdc-list-item" href="#">
90+
<a class="mdc-list-item demo-drawer-list-item" href="#">
9091
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Drafts
9192
</a>
9293
</nav>
9394

9495
<hr class="mdc-list-divider">
9596

9697
<nav class="mdc-list">
97-
<a class="mdc-list-item" href="#">
98-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
99-
</a>
100-
<a class="mdc-list-item" href="#">
101-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
102-
</a>
103-
<a class="mdc-list-item" href="#">
104-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
105-
</a>
106-
</nav>
107-
</div>
98+
<a class="mdc-list-item demo-drawer-list-item" href="#">
99+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
100+
</a>
101+
<a class="mdc-list-item demo-drawer-list-item" href="#">
102+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
103+
</a>
104+
<a class="mdc-list-item demo-drawer-list-item" href="#">
105+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
106+
</a>
107+
</nav>
108+
</div>
108109
</nav>
109110
<div class="demo-content">
110111
<!-- TODO: #324 - Should switch to .mdc-toolbar--fixed -->
@@ -122,6 +123,40 @@
122123
<main class="demo-main">
123124
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
124125
<p class="mdc-typography--body1">It sits to the left of this content.</p>
126+
127+
<div id="demo-radio-buttons">
128+
<div class="mdc-form-field">
129+
<div class="mdc-radio">
130+
<input class="mdc-radio__native-control" type="radio" id="theme-radio-default" name="theme" checked>
131+
<div class="mdc-radio__background">
132+
<div class="mdc-radio__outer-circle"></div>
133+
<div class="mdc-radio__inner-circle"></div>
134+
</div>
135+
</div>
136+
<label for="theme-radio-default">Default</label>
137+
</div>
138+
<div class="mdc-form-field">
139+
<div class="mdc-radio">
140+
<input class="mdc-radio__native-control" type="radio" id="theme-radio-custom" name="theme">
141+
<div class="mdc-radio__background">
142+
<div class="mdc-radio__outer-circle"></div>
143+
<div class="mdc-radio__inner-circle"></div>
144+
</div>
145+
</div>
146+
<label for="theme-radio-custom">Custom Theme</label>
147+
</div>
148+
<div class="mdc-form-field">
149+
<div class="mdc-radio">
150+
<input class="mdc-radio__native-control" type="radio" id="theme-radio-accessible" name="theme">
151+
<div class="mdc-radio__background">
152+
<div class="mdc-radio__outer-circle"></div>
153+
<div class="mdc-radio__inner-circle"></div>
154+
</div>
155+
</div>
156+
<label for="theme-radio-accessible">Accessible Theme</label>
157+
</div>
158+
</div>
159+
125160
<div class="extra-content-wrapper">
126161
<button id="toggle-wide">Toggle extra-wide content</button>
127162
<div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
@@ -146,8 +181,8 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
146181
});
147182

148183
// Demonstrate application of --activated modifier to drawer menu items
149-
var activatedClass = 'mdc-list-item--activated';
150-
document.querySelector('.mdc-permanent-drawer').addEventListener('click', function(event) {
184+
var activatedClass = 'mdc-list-item--selected';
185+
document.querySelector('.mdc-drawer').addEventListener('click', function(event) {
151186
var el = event.target;
152187
while (!el.classList.contains('mdc-list-item') && el) {
153188
el = el.parentNode;
@@ -160,6 +195,19 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
160195
event.target.classList.add(activatedClass);
161196
}
162197
});
198+
199+
var drawerEl = document.getElementById('demo-drawer');
200+
var radioEl = document.querySelector('#demo-radio-buttons');
201+
radioEl.addEventListener('change', function(e) {
202+
drawerEl.classList.remove('demo-drawer--custom');
203+
drawerEl.classList.remove('demo-drawer--accessible');
204+
205+
if(e.target.id === 'accessible') {
206+
drawerEl.classList.add('demo-drawer--accessible');
207+
} else if(e.target.id === 'custom') {
208+
drawerEl.classList.add('demo-drawer--custom');
209+
}
210+
});
163211
</script>
164212
</body>
165213
</html>

‎demos/drawer/permanent-drawer-below-toolbar.html

Lines changed: 58 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<meta name="viewport" content="width=device-width, initial-scale=1">
2222
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
2323
<script src="/assets/drawer/drawer.css.js"></script>
24+
<script src="/assets/radio.css.js"></script>
2425
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
2526
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
2627
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
@@ -78,33 +79,33 @@
7879
</header>
7980

8081
<div class="demo-content mdc-toolbar-fixed-adjust">
81-
<nav class="mdc-permanent-drawer">
82+
<nav id="demo-drawer" class="mdc-drawer mdc-drawer--permanent demo-drawer">
8283
<div class="mdc-list-group">
8384
<nav class="mdc-list">
84-
<a class="mdc-list-item mdc-list-item--activated" href="#">
85+
<a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item" href="#">
8586
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
8687
</a>
87-
<a class="mdc-list-item" href="#">
88+
<a class="mdc-list-item demo-drawer-list-item" href="#">
8889
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
8990
</a>
90-
<a class="mdc-list-item" href="#">
91+
<a class="mdc-list-item demo-drawer-list-item" href="#">
9192
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Sent Mail
9293
</a>
93-
<a class="mdc-list-item" href="#">
94+
<a class="mdc-list-item demo-drawer-list-item" href="#">
9495
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Drafts
9596
</a>
9697
</nav>
9798

9899
<hr class="mdc-list-divider">
99100

100101
<nav class="mdc-list">
101-
<a class="mdc-list-item" href="#">
102+
<a class="mdc-list-item demo-drawer-list-item" href="#">
102103
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
103104
</a>
104-
<a class="mdc-list-item" href="#">
105+
<a class="mdc-list-item demo-drawer-list-item" href="#">
105106
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
106107
</a>
107-
<a class="mdc-list-item" href="#">
108+
<a class="mdc-list-item demo-drawer-list-item" href="#">
108109
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
109110
</a>
110111
</nav>
@@ -113,6 +114,40 @@
113114
<main class="demo-main">
114115
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
115116
<p class="mdc-typography--body1">It sits to the left of this content.</p>
117+
118+
<div id="demo-radio-buttons">
119+
<div class="mdc-form-field">
120+
<div class="mdc-radio">
121+
<input class="mdc-radio__native-control" type="radio" id="theme-radio-default" name="theme" checked>
122+
<div class="mdc-radio__background">
123+
<div class="mdc-radio__outer-circle"></div>
124+
<div class="mdc-radio__inner-circle"></div>
125+
</div>
126+
</div>
127+
<label for="theme-radio-default">Default</label>
128+
</div>
129+
<div class="mdc-form-field">
130+
<div class="mdc-radio">
131+
<input class="mdc-radio__native-control" type="radio" id="theme-radio-custom" name="theme">
132+
<div class="mdc-radio__background">
133+
<div class="mdc-radio__outer-circle"></div>
134+
<div class="mdc-radio__inner-circle"></div>
135+
</div>
136+
</div>
137+
<label for="theme-radio-custom">Custom Theme</label>
138+
</div>
139+
<div class="mdc-form-field">
140+
<div class="mdc-radio">
141+
<input class="mdc-radio__native-control" type="radio" id="theme-radio-accessible" name="theme">
142+
<div class="mdc-radio__background">
143+
<div class="mdc-radio__outer-circle"></div>
144+
<div class="mdc-radio__inner-circle"></div>
145+
</div>
146+
</div>
147+
<label for="theme-radio-accessible">Accessible Theme</label>
148+
</div>
149+
</div>
150+
116151
<div class="extra-content-wrapper">
117152
<button id="toggle-wide">Toggle extra-wide content</button>
118153
<div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
@@ -137,8 +172,8 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
137172
});
138173

139174
// Demonstrate application of --activated modifier to drawer menu items
140-
var activatedClass = 'mdc-list-item--activated';
141-
document.querySelector('.mdc-permanent-drawer').addEventListener('click', function(event) {
175+
var activatedClass = 'mdc-list-item--selected';
176+
document.querySelector('.mdc-drawer').addEventListener('click', function(event) {
142177
var el = event.target;
143178
while (!el.classList.contains('mdc-list-item') && el) {
144179
el = el.parentNode;
@@ -151,6 +186,19 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
151186
event.target.classList.add(activatedClass);
152187
}
153188
});
189+
190+
var drawerEl = document.getElementById('demo-drawer');
191+
var radioEl = document.querySelector('#demo-radio-buttons');
192+
radioEl.addEventListener('change', function(e) {
193+
drawerEl.classList.remove('demo-drawer--custom');
194+
drawerEl.classList.remove('demo-drawer--accessible');
195+
196+
if(e.target.id === 'accessible') {
197+
drawerEl.classList.add('demo-drawer--accessible');
198+
} else if(e.target.id === 'custom') {
199+
drawerEl.classList.add('demo-drawer--custom');
200+
}
201+
});
154202
</script>
155203
</body>
156204
</html>

0 commit comments

Comments
 (0)