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

chore(demos): Use CSS files directly instead of Webpack's .css.js #1916

Merged
merged 3 commits into from
Jan 10, 2018
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion demos/button.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<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">
<script src="/assets/button.css.js"></script>
<link rel="stylesheet" href="/assets/button.css">
<style>
.demo-wrapper {
padding-bottom: 100px;
Expand Down
2 changes: 1 addition & 1 deletion demos/card.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Card - Material Components Catalog</title>
<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/card.css.js"></script>
<link rel="stylesheet" href="/assets/card.css">
<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
2 changes: 1 addition & 1 deletion demos/checkbox.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Checkbox - Material Components Catalog</title>
<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/checkbox.css.js"></script>
<link rel="stylesheet" href="/assets/checkbox.css">
<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
2 changes: 1 addition & 1 deletion demos/dialog.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Dialog - Material Components Catalog</title>
<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/dialog.css.js"></script>
<link rel="stylesheet" href="/assets/dialog.css">
<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
4 changes: 2 additions & 2 deletions demos/drawer/permanent-drawer-above-toolbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
<title>Drawer Above Toolbar - Material Components Catalog</title>
<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="/assets/drawer/drawer.css">
<link rel="stylesheet" href="/assets/radio.css">
<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
4 changes: 2 additions & 2 deletions demos/drawer/permanent-drawer-below-toolbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
<title>Drawer Below Toolbar - Material Components Catalog</title>
<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="/assets/drawer/drawer.css">
<link rel="stylesheet" href="/assets/radio.css">
<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
4 changes: 2 additions & 2 deletions demos/drawer/persistent-drawer.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
<title>Drawer (Persistent) - Material Components Catalog</title>
<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="/assets/drawer/drawer.css">
<link rel="stylesheet" href="/assets/radio.css">
<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
4 changes: 2 additions & 2 deletions demos/drawer/temporary-drawer.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
<title>Drawer (Temporary) - Material Components Catalog</title>
<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="/assets/drawer/drawer.css">
<link rel="stylesheet" href="/assets/radio.css">
<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
2 changes: 1 addition & 1 deletion demos/elevation.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Elevation - Material Components Catalog</title>
<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/elevation.css.js"></script>
<link rel="stylesheet" href="/assets/elevation.css">
<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
2 changes: 1 addition & 1 deletion demos/fab.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Floating Action Button - Material Components Catalog</title>
<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/fab.css.js"></script>
<link rel="stylesheet" href="/assets/fab.css">
<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
32 changes: 12 additions & 20 deletions demos/grid-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,14 @@
<title>Grid List - Material Components Catalog</title>
<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/grid-list.css.js"></script>
<link rel="stylesheet" href="/assets/grid-list.css">
<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">
<style>
.demo-grid-tile-content {
background-image: url("images/16-9.jpg");
}
/* Hack for webpack async loading: Hide grid list until styles have loaded */
.mdc-grid-list-demo {
visibility: hidden;
}

.example {
padding: 24px;
Expand All @@ -57,7 +53,7 @@
}
</style>
</head>
<body class="mdc-typography mdc-grid-list-demo">
<body class="mdc-typography">
<header class="mdc-toolbar mdc-toolbar--fixed">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
Expand Down Expand Up @@ -87,24 +83,23 @@
<li class="mdc-grid-tile"><div class="mdc-grid-tile__primary"></div></li>
<li class="mdc-grid-tile"><div class="mdc-grid-tile__primary"></div></li>
<li class="mdc-grid-tile"><div class="mdc-grid-tile__primary"></div></li>

</ul>
</div>
</section>

<section class="example">
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
</div>
<label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
</div>
</section>

<section class="example examples">
Expand Down Expand Up @@ -746,9 +741,6 @@ <h2>Grid List: use div's background instead of img tag (useful when image ratio
// This is not needed when using pre-built css and js
setTimeout(function() {
initGridList();
setTimeout (function() {
document.querySelector('.mdc-grid-list-demo').style.visibility = 'visible';
}, 250);
}, 100);
</script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion demos/icon-toggle.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Icon Toggle - Material Components Demo</title>
<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/icon-toggle.css.js"></script>
<link rel="stylesheet" href="/assets/icon-toggle.css">
<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
2 changes: 1 addition & 1 deletion demos/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Material Components Catalog</title>
<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/index.css.js"></script>
<link rel="stylesheet" href="/assets/index.css">
<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">
</head>
Expand Down
2 changes: 1 addition & 1 deletion demos/layout-grid.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Layout Grid - Material Components</title>
<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/layout-grid.css.js"></script>
<link rel="stylesheet" href="/assets/layout-grid.css">
<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
2 changes: 1 addition & 1 deletion demos/linear-progress.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Linear Progress - Material Components Catalog</title>
<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/linear-progress.css.js"></script>
<link rel="stylesheet" href="/assets/linear-progress.css">
<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
2 changes: 1 addition & 1 deletion demos/list.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>List Item - Material Components Catalog</title>
<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/list.css.js"></script>
<link rel="stylesheet" href="/assets/list.css">
<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
2 changes: 1 addition & 1 deletion demos/radio.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Radio Button - Material Components Demo</title>
<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/radio.css.js"></script>
<link rel="stylesheet" href="/assets/radio.css">
<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
2 changes: 1 addition & 1 deletion demos/ripple.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Ripple - Material Components Catalog</title>
<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/ripple.css.js"></script>
<link rel="stylesheet" href="/assets/ripple.css">
<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
2 changes: 1 addition & 1 deletion demos/select.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Select Menu - Material Components Catalog</title>
<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/select.css.js"></script>
<link rel="stylesheet" href="/assets/select.css">
<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
2 changes: 1 addition & 1 deletion demos/simple-menu.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Simple Menu - Material Components Catalog</title>
<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/simple-menu.css.js"></script>
<link rel="stylesheet" href="/assets/simple-menu.css">
<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
2 changes: 1 addition & 1 deletion demos/slider.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Slider - Material Components Catalog</title>
<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/slider.css.js"></script>
<link rel="stylesheet" href="/assets/slider.css">
<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
2 changes: 1 addition & 1 deletion demos/snackbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Snackbar - Material Components Catalog</title>
<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/snackbar.css.js"></script>
<link rel="stylesheet" href="/assets/snackbar.css">
<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
2 changes: 1 addition & 1 deletion demos/switch.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Switch - Material Components Catalog</title>
<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/switch.css.js"></script>
<link rel="stylesheet" href="/assets/switch.css">
<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
2 changes: 1 addition & 1 deletion demos/tabs.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Tabs - Material Components Catalog</title>
<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/tabs.css.js"></script>
<link rel="stylesheet" href="/assets/tabs.css">
<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
2 changes: 1 addition & 1 deletion demos/text-field.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Text Field - Material Components Catalog</title>
<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/text-field.css.js"></script>
<link rel="stylesheet" href="/assets/text-field.css">
<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
2 changes: 1 addition & 1 deletion demos/theme/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<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">
<script src="/assets/theme/index.css.js"></script>
<link rel="stylesheet" href="/assets/theme/index.css">
</head>
<body class="mdc-typography">
<header class="mdc-toolbar mdc-toolbar--fixed">
Expand Down
2 changes: 1 addition & 1 deletion demos/toolbar/custom-toolbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<title>Custom Toolbar - Material Components Catalog</title>
<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/toolbar/toolbar.css.js"></script>
<link rel="stylesheet" href="/assets/toolbar/toolbar.css">
<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
Loading