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

Commit

Permalink
feat(drawer): custom sass mixins for color, background, scrim (#1730)
Browse files Browse the repository at this point in the history 
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
```
  • Loading branch information
@moog16
moog16 authored Jan 2, 2018
1 parent 5013069 commit 921a41f
Show file tree
Hide file tree
Showing 18 changed files with 515 additions and 210 deletions.
37 changes: 37 additions & 0 deletions demos/drawer/drawer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,44 @@
// limitations under the License.
//

@import "../../packages/mdc-list/mixins";
@import "../../packages/mdc-form-field/mdc-form-field";
@import "../common";
@import "../../packages/mdc-drawer/mdc-drawer";
@import "../../packages/mdc-drawer/mixins";
@import "../../packages/mdc-elevation/mdc-elevation";
@import "../../packages/mdc-list/mdc-list";

.demo-drawer--custom {
@include mdc-drawer-fill-color($material-color-teal-900);
@include mdc-drawer-ink-color(#fff);
@include mdc-list-item-graphic-ink-color(#fff);

.demo-drawer-list-item {
@include mdc-list-item-graphic-ink-color(text-icon-on-dark);
@include mdc-list-item-primary-text-ink-color(text-secondary-on-dark);
}

.demo-drawer-list-item.mdc-list-item--selected {
@include mdc-list-item-graphic-ink-color(text-primary-on-dark);
@include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
}
}

.demo-drawer--accessible {
@include mdc-drawer-fill-color-accessible($material-color-indigo-500);

.demo-drawer-list-item {
@include mdc-list-item-graphic-ink-color(text-icon-on-dark);
@include mdc-list-item-primary-text-ink-color(text-secondary-on-dark);
}

.demo-drawer-list-item.mdc-list-item--selected {
@include mdc-list-item-graphic-ink-color(text-primary-on-dark);
@include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
}
}

.demo-form-field {
margin: 16px 0;
}
88 changes: 68 additions & 20 deletions demos/drawer/permanent-drawer-above-toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/radio.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand Down Expand Up @@ -51,7 +52,7 @@
}

/* Place drawer above toolbar shadow. */
.mdc-permanent-drawer {
.mdc-drawer--permanent {
z-index: 2;
}

Expand All @@ -73,38 +74,38 @@
</style>
</head>
<body class="mdc-typography demo-body">
<nav class="mdc-permanent-drawer">
<div class="mdc-permanent-drawer__toolbar-spacer"></div>
<nav id="demo-drawer" class="mdc-drawer mdc-drawer--permanent demo-drawer">
<div class="mdc-drawer__toolbar-spacer"></div>
<div class="mdc-list-group">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#">
<a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
</a>
<a class="mdc-list-item" href="#">
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Sent Mail
</a>
<a class="mdc-list-item" href="#">
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Drafts
</a>
</nav>

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

<nav class="mdc-list">
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
</a>
</nav>
</div>
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
</a>
</nav>
</div>
</nav>
<div class="demo-content">
<!-- TODO: #324 - Should switch to .mdc-toolbar--fixed -->
Expand All @@ -122,6 +123,40 @@
<main class="demo-main">
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
<p class="mdc-typography--body1">It sits to the left of this content.</p>

<div id="demo-radio-buttons">
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="theme-radio-default" name="theme" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="theme-radio-default">Default</label>
</div>
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="theme-radio-custom" name="theme">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="theme-radio-custom">Custom Theme</label>
</div>
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="theme-radio-accessible" name="theme">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="theme-radio-accessible">Accessible Theme</label>
</div>
</div>

<div class="extra-content-wrapper">
<button id="toggle-wide">Toggle extra-wide content</button>
<div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
Expand All @@ -146,8 +181,8 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
});

// Demonstrate application of --activated modifier to drawer menu items
var activatedClass = 'mdc-list-item--activated';
document.querySelector('.mdc-permanent-drawer').addEventListener('click', function(event) {
var activatedClass = 'mdc-list-item--selected';
document.querySelector('.mdc-drawer').addEventListener('click', function(event) {
var el = event.target;
while (!el.classList.contains('mdc-list-item') && el) {
el = el.parentNode;
Expand All @@ -160,6 +195,19 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
event.target.classList.add(activatedClass);
}
});

var drawerEl = document.getElementById('demo-drawer');
var radioEl = document.querySelector('#demo-radio-buttons');
radioEl.addEventListener('change', function(e) {
drawerEl.classList.remove('demo-drawer--custom');
drawerEl.classList.remove('demo-drawer--accessible');

if(e.target.id === 'accessible') {
drawerEl.classList.add('demo-drawer--accessible');
} else if(e.target.id === 'custom') {
drawerEl.classList.add('demo-drawer--custom');
}
});
</script>
</body>
</html>
68 changes: 58 additions & 10 deletions demos/drawer/permanent-drawer-below-toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/radio.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand Down Expand Up @@ -78,33 +79,33 @@
</header>

<div class="demo-content mdc-toolbar-fixed-adjust">
<nav class="mdc-permanent-drawer">
<nav id="demo-drawer" class="mdc-drawer mdc-drawer--permanent demo-drawer">
<div class="mdc-list-group">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#">
<a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
</a>
<a class="mdc-list-item" href="#">
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Sent Mail
</a>
<a class="mdc-list-item" href="#">
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Drafts
</a>
</nav>

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

<nav class="mdc-list">
<a class="mdc-list-item" href="#">
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item" href="#">
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-list-item" href="#">
<a class="mdc-list-item demo-drawer-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
</a>
</nav>
Expand All @@ -113,6 +114,40 @@
<main class="demo-main">
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
<p class="mdc-typography--body1">It sits to the left of this content.</p>

<div id="demo-radio-buttons">
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="theme-radio-default" name="theme" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="theme-radio-default">Default</label>
</div>
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="theme-radio-custom" name="theme">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="theme-radio-custom">Custom Theme</label>
</div>
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="theme-radio-accessible" name="theme">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="theme-radio-accessible">Accessible Theme</label>
</div>
</div>

<div class="extra-content-wrapper">
<button id="toggle-wide">Toggle extra-wide content</button>
<div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
Expand All @@ -137,8 +172,8 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
});

// Demonstrate application of --activated modifier to drawer menu items
var activatedClass = 'mdc-list-item--activated';
document.querySelector('.mdc-permanent-drawer').addEventListener('click', function(event) {
var activatedClass = 'mdc-list-item--selected';
document.querySelector('.mdc-drawer').addEventListener('click', function(event) {
var el = event.target;
while (!el.classList.contains('mdc-list-item') && el) {
el = el.parentNode;
Expand All @@ -151,6 +186,19 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
event.target.classList.add(activatedClass);
}
});

var drawerEl = document.getElementById('demo-drawer');
var radioEl = document.querySelector('#demo-radio-buttons');
radioEl.addEventListener('change', function(e) {
drawerEl.classList.remove('demo-drawer--custom');
drawerEl.classList.remove('demo-drawer--accessible');

if(e.target.id === 'accessible') {
drawerEl.classList.add('demo-drawer--accessible');
} else if(e.target.id === 'custom') {
drawerEl.classList.add('demo-drawer--custom');
}
});
</script>
</body>
</html>
Loading

0 comments on commit 921a41f

Please sign in to comment.