2023-02-28T02:14:36
This commit is contained in:
1
material-design/.gitignore
vendored
Normal file
1
material-design/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/node_modules/
|
||||
6
material-design/README.md
Normal file
6
material-design/README.md
Normal file
@@ -0,0 +1,6 @@
|
||||
```bash
|
||||
yarn init
|
||||
yarn add webpack webpack-cli --dev
|
||||
yarn webpack-cli init
|
||||
yarn add @material/mwc-drawer
|
||||
```
|
||||
208
material-design/dist/index.html
vendored
Normal file
208
material-design/dist/index.html
vendored
Normal file
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webpack App</title>
|
||||
<script defer src="main.js"></script></head>
|
||||
<body>
|
||||
<mwc-top-app-bar-fixed prominent>
|
||||
<div slot="title">Title</div>
|
||||
</mwc-top-app-bar-fixed>
|
||||
|
||||
<div>
|
||||
<main>
|
||||
<article>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener("scroll", (e) => {
|
||||
//console.log(window.scrollY);
|
||||
if (window.scrollY > 128) {
|
||||
document
|
||||
.querySelector("mwc-top-app-bar-fixed")
|
||||
.removeAttribute("prominent");
|
||||
} else if (window.scrollY < 64) {
|
||||
document
|
||||
.querySelector("mwc-top-app-bar-fixed")
|
||||
.setAttribute("prominent", "prominent");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
899
material-design/dist/main.js
vendored
Normal file
899
material-design/dist/main.js
vendored
Normal file
File diff suppressed because one or more lines are too long
163
material-design/dist/main.js.LICENSE.txt
vendored
Normal file
163
material-design/dist/main.js.LICENSE.txt
vendored
Normal file
@@ -0,0 +1,163 @@
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
||||
* This code may only be used under the BSD style license found at
|
||||
* http://polymer.github.io/LICENSE.txt
|
||||
* The complete set of authors may be found at
|
||||
* http://polymer.github.io/AUTHORS.txt
|
||||
* The complete set of contributors may be found at
|
||||
* http://polymer.github.io/CONTRIBUTORS.txt
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at
|
||||
* http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
|
||||
* This code may only be used under the BSD style license found at
|
||||
* http://polymer.github.io/LICENSE.txt
|
||||
* The complete set of authors may be found at
|
||||
* http://polymer.github.io/AUTHORS.txt
|
||||
* The complete set of contributors may be found at
|
||||
* http://polymer.github.io/CONTRIBUTORS.txt
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at
|
||||
* http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2016 Google Inc. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2018 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2018 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2020 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2020 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2021 Google LLC
|
||||
* SPDX-LIcense-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2021 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at
|
||||
http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
|
||||
http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
|
||||
found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
|
||||
part of the polymer project is also subject to an additional IP rights grant
|
||||
found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
42
material-design/package.json
Normal file
42
material-design/package.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "@elex-project/asgard",
|
||||
"version": "1.0.0",
|
||||
"description": "Material Design",
|
||||
"main": "./src/index.js",
|
||||
"author": "Elex",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@elex-project/loggings": "^0.0.6",
|
||||
"@elex-project/persona": "^1.1.1",
|
||||
"@material/mwc-drawer": "^0.22.1",
|
||||
"@material/mwc-icon-button": "^0.22.1",
|
||||
"@material/mwc-list": "^0.22.1",
|
||||
"@material/mwc-top-app-bar": "^0.22.1",
|
||||
"@material/mwc-top-app-bar-fixed": "^0.22.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webpack-cli/generators": "^2.3.0",
|
||||
"autoprefixer": "^10.3.4",
|
||||
"css-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.3.2",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-loader": "^6.1.1",
|
||||
"prettier": "^2.3.2",
|
||||
"sass": "^1.39.0",
|
||||
"sass-loader": "^12.1.0",
|
||||
"style-loader": "^3.2.1",
|
||||
"ts-loader": "^9.2.5",
|
||||
"typescript": "^4.4.2",
|
||||
"webpack": "^5.52.0",
|
||||
"webpack-cli": "^4.8.0",
|
||||
"webpack-dev-server": "^4.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack --mode=production --node-env=production",
|
||||
"build:dev": "webpack --mode=development",
|
||||
"build:prod": "webpack --mode=production --node-env=production",
|
||||
"watch": "webpack --watch",
|
||||
"serve": "webpack serve"
|
||||
}
|
||||
}
|
||||
5
material-design/postcss.config.js
Normal file
5
material-design/postcss.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
// Add you postcss configuration here
|
||||
// Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
|
||||
plugins: [["autoprefixer"]],
|
||||
};
|
||||
256
material-design/src/_article.scss
Normal file
256
material-design/src/_article.scss
Normal file
@@ -0,0 +1,256 @@
|
||||
$dark_gray: #666;
|
||||
$light_gray: #ccc;
|
||||
$pre_max_height: 280px;
|
||||
|
||||
main article {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
border-bottom: thin solid var(--mdc-theme-primary);
|
||||
margin: {
|
||||
top: 2.4rem;
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
padding-bottom: 0.3rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.6rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.4rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.2rem;
|
||||
padding-left: 2.8rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
pre,
|
||||
code {
|
||||
font-family: monospace;
|
||||
}
|
||||
pre {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2;
|
||||
//word-wrap: normal;
|
||||
border-radius: var(--mdc-shape-small);
|
||||
//padding: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
//white-space: nowrap;
|
||||
|
||||
&.scrollable {
|
||||
max-height: $pre_max_height;
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
border-left: 0.43rem solid var(--mdc-theme-secondary);
|
||||
padding: 0.43rem 0 0.43rem 1rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
p,
|
||||
pre,
|
||||
blockquote {
|
||||
margin: {
|
||||
top: 0.2rem;
|
||||
bottom: 0.82rem;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: var(--mdc-theme-primary);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
color: var(--mdc-theme-primary);
|
||||
}
|
||||
em {
|
||||
font-style: italic;
|
||||
border-bottom: thin solid var(--mdc-theme-primary);
|
||||
}
|
||||
mark {
|
||||
background-color: var(--mdc-theme-primary);
|
||||
color: var(--mdc-theme-on-primary);
|
||||
border-radius: var(--mdc-shape-small);
|
||||
padding: 0.2rem 0.34rem;
|
||||
}
|
||||
kbd {
|
||||
font-family: monospace;
|
||||
background-color: var(--mdc-theme-primary);
|
||||
color: var(--mdc-theme-on-primary);
|
||||
border-radius: var(--mdc-shape-small);
|
||||
padding: 0.2rem 0.34rem;
|
||||
}
|
||||
var {
|
||||
font-style: italic;
|
||||
}
|
||||
del,
|
||||
s {
|
||||
text-decoration: line-through;
|
||||
color: $dark_gray;
|
||||
}
|
||||
ins,
|
||||
u {
|
||||
text-decoration: underline;
|
||||
}
|
||||
small {
|
||||
color: $dark_gray;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed inherit;
|
||||
&[title] {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed inherit;
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
address {
|
||||
white-space: nowrap;
|
||||
}
|
||||
cite {
|
||||
font-style: italic;
|
||||
}
|
||||
samp {
|
||||
font-family: monospace;
|
||||
border-radius: var(--mdc-shape-small);
|
||||
font-size: 0.88rem;
|
||||
margin: 0;
|
||||
padding: 0.2rem 0.34rem;
|
||||
}
|
||||
code {
|
||||
font-family: monospace;
|
||||
border-radius: var(--mdc-shape-small);
|
||||
font-size: 0.88rem;
|
||||
margin: 0;
|
||||
padding: 0.2rem 0.34rem;
|
||||
}
|
||||
pre > code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
img {
|
||||
border-style: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin: {
|
||||
top: 0.2rem;
|
||||
bottom: 0.82rem;
|
||||
}
|
||||
&.hover tbody tr:hover {
|
||||
background-color: $light_gray;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
border-bottom: 2px solid var(--mdc-theme-primary);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--mdc-theme-on-primary);
|
||||
color: var(--mdc-theme-primary);
|
||||
}
|
||||
td,
|
||||
th {
|
||||
border: 1px solid $light_gray;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
tr {
|
||||
background-color: var(--mdc-theme-background);
|
||||
border-top: 1px solid $light_gray;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
list-style-position: outside;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
ol ol,
|
||||
ul,
|
||||
ol {
|
||||
list-style-type: lower-roman;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
ol ol ol,
|
||||
ol ul ol,
|
||||
ul ol ol,
|
||||
ul ul ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
li {
|
||||
display: list-item;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dt::after {
|
||||
content: " :";
|
||||
}
|
||||
dd {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: transparent;
|
||||
border: 1px solid $light_gray;
|
||||
height: 0;
|
||||
margin: 2.34rem 0;
|
||||
}
|
||||
details {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
46
material-design/src/index.scss
Normal file
46
material-design/src/index.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
|
||||
@import url("https://fonts.googleapis.com/icon?family=Material+Icons&display=swap");
|
||||
@import "../node_modules/@elex-project/persona/src/index.scss";
|
||||
|
||||
html,
|
||||
body {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:root {
|
||||
--mdc-theme-primary: #443324;
|
||||
--mdc-theme-on-primary: #f4f4f4;
|
||||
--mdc-theme-secondary: #018786;
|
||||
--mdc-theme-on-secondary: #f4f4f4;
|
||||
--mdc-theme-surface: #f4f4f4;
|
||||
--mdc-theme-on-surface: #242424;
|
||||
--mdc-theme-background: #f4f4f4;
|
||||
|
||||
--mdc-drawer-width: 256px;
|
||||
--mdc-shape-small: 4px;
|
||||
--mdc-shape-medium: 12px;
|
||||
--mdc-shape-large: 16px;
|
||||
|
||||
--mdc-icon-font: "Material Icons";
|
||||
--mdc-typography-font-family: "Noto Sans KR", "Noto Sans", sans-serif;
|
||||
}
|
||||
|
||||
.list-item__depth-2 {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.list-item__depth-3 {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
.list-item__depth-4 {
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
@import "./article";
|
||||
//todo get flex from papero
|
||||
37
material-design/src/index.ts
Normal file
37
material-design/src/index.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import '@material/mwc-drawer';
|
||||
import '@material/mwc-top-app-bar';
|
||||
import '@material/mwc-top-app-bar-fixed';
|
||||
import '@material/mwc-icon-button';
|
||||
import '@material/mwc-list';
|
||||
|
||||
import './index.scss'
|
||||
|
||||
window.addEventListener('DOMContentLoaded', e => {
|
||||
const drawer = document.querySelector("mwc-drawer");
|
||||
const appBar = document.querySelector("mwc-top-app-bar-fixed");
|
||||
if (drawer) {
|
||||
/* if (window.innerWidth < 600) {
|
||||
drawer.setAttribute('type', 'modal');
|
||||
drawer.removeAttribute('open');
|
||||
} else {
|
||||
drawer.setAttribute('type', 'dismissible');
|
||||
} */
|
||||
|
||||
const container = drawer.parentNode;
|
||||
container.addEventListener("MDCTopAppBar:nav", e => {
|
||||
drawer.toggleAttribute('open');
|
||||
});
|
||||
|
||||
window.addEventListener("resize", e => {
|
||||
//console.log();
|
||||
if (window.innerWidth < 600) {
|
||||
drawer.setAttribute('type', 'modal');
|
||||
drawer.removeAttribute('open');
|
||||
} else {
|
||||
drawer.setAttribute('type', 'dismissible');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
264
material-design/templates/document.html
Normal file
264
material-design/templates/document.html
Normal file
@@ -0,0 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webpack App</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/styles/atom-one-dark.min.css"
|
||||
/>
|
||||
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<mwc-drawer hasHeader open type="dismissible">
|
||||
<span slot="title">Drawer Title</span>
|
||||
<span slot="subtitle">subtitle</span>
|
||||
<div>
|
||||
<mwc-list>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
</mwc-list>
|
||||
</div>
|
||||
<div slot="appContent">
|
||||
<mwc-top-app-bar-fixed prominent>
|
||||
<mwc-icon-button
|
||||
slot="navigationIcon"
|
||||
icon="menu"
|
||||
></mwc-icon-button>
|
||||
<div slot="title">Title</div>
|
||||
</mwc-top-app-bar-fixed>
|
||||
|
||||
<div>
|
||||
<main>
|
||||
<article>
|
||||
<pre>
|
||||
<code>
|
||||
System.out.println("Hello");
|
||||
</code>
|
||||
</pre>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the
|
||||
1500s "Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa
|
||||
qui officia deserunt mollit anim id est
|
||||
laborum." Section 1.10.32 of "de Finibus Bonorum
|
||||
et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo
|
||||
inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo. Nemo enim ipsam
|
||||
voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores
|
||||
eos qui ratione voluptatem sequi nesciunt. Neque
|
||||
porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci velit, sed quia
|
||||
non numquam eius modi tempora incidunt ut labore
|
||||
et dolore magnam aliquam quaerat voluptatem. Ut
|
||||
enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit
|
||||
laboriosam, nisi ut aliquid ex ea commodi
|
||||
consequatur? Quis autem vel eum iure
|
||||
reprehenderit qui in ea voluptate velit esse
|
||||
quam nihil molestiae consequatur, vel illum qui
|
||||
dolorem eum fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the
|
||||
1500s "Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa
|
||||
qui officia deserunt mollit anim id est
|
||||
laborum." Section 1.10.32 of "de Finibus Bonorum
|
||||
et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo
|
||||
inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo. Nemo enim ipsam
|
||||
voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores
|
||||
eos qui ratione voluptatem sequi nesciunt. Neque
|
||||
porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci velit, sed quia
|
||||
non numquam eius modi tempora incidunt ut labore
|
||||
et dolore magnam aliquam quaerat voluptatem. Ut
|
||||
enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit
|
||||
laboriosam, nisi ut aliquid ex ea commodi
|
||||
consequatur? Quis autem vel eum iure
|
||||
reprehenderit qui in ea voluptate velit esse
|
||||
quam nihil molestiae consequatur, vel illum qui
|
||||
dolorem eum fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the
|
||||
1500s "Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa
|
||||
qui officia deserunt mollit anim id est
|
||||
laborum." Section 1.10.32 of "de Finibus Bonorum
|
||||
et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo
|
||||
inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo. Nemo enim ipsam
|
||||
voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores
|
||||
eos qui ratione voluptatem sequi nesciunt. Neque
|
||||
porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci velit, sed quia
|
||||
non numquam eius modi tempora incidunt ut labore
|
||||
et dolore magnam aliquam quaerat voluptatem. Ut
|
||||
enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit
|
||||
laboriosam, nisi ut aliquid ex ea commodi
|
||||
consequatur? Quis autem vel eum iure
|
||||
reprehenderit qui in ea voluptate velit esse
|
||||
quam nihil molestiae consequatur, vel illum qui
|
||||
dolorem eum fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the
|
||||
1500s "Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa
|
||||
qui officia deserunt mollit anim id est
|
||||
laborum." Section 1.10.32 of "de Finibus Bonorum
|
||||
et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo
|
||||
inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo. Nemo enim ipsam
|
||||
voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores
|
||||
eos qui ratione voluptatem sequi nesciunt. Neque
|
||||
porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci velit, sed quia
|
||||
non numquam eius modi tempora incidunt ut labore
|
||||
et dolore magnam aliquam quaerat voluptatem. Ut
|
||||
enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit
|
||||
laboriosam, nisi ut aliquid ex ea commodi
|
||||
consequatur? Quis autem vel eum iure
|
||||
reprehenderit qui in ea voluptate velit esse
|
||||
quam nihil molestiae consequatur, vel illum qui
|
||||
dolorem eum fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the
|
||||
1500s "Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa
|
||||
qui officia deserunt mollit anim id est
|
||||
laborum." Section 1.10.32 of "de Finibus Bonorum
|
||||
et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo
|
||||
inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo. Nemo enim ipsam
|
||||
voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores
|
||||
eos qui ratione voluptatem sequi nesciunt. Neque
|
||||
porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci velit, sed quia
|
||||
non numquam eius modi tempora incidunt ut labore
|
||||
et dolore magnam aliquam quaerat voluptatem. Ut
|
||||
enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit
|
||||
laboriosam, nisi ut aliquid ex ea commodi
|
||||
consequatur? Quis autem vel eum iure
|
||||
reprehenderit qui in ea voluptate velit esse
|
||||
quam nihil molestiae consequatur, vel illum qui
|
||||
dolorem eum fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</mwc-drawer>
|
||||
<script>
|
||||
hljs.highlightAll();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
95
material-design/templates/editor.html
Normal file
95
material-design/templates/editor.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webpack App</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/easymde/dist/easymde.min.css"
|
||||
/>
|
||||
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<mwc-drawer hasHeader open type="dismissible">
|
||||
<span slot="title">Drawer Title</span>
|
||||
<span slot="subtitle">subtitle</span>
|
||||
<div>
|
||||
<mwc-list>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
<mwc-list-item>Item 0</mwc-list-item>
|
||||
<mwc-list-item class="list-item__depth-2"
|
||||
>Item 1</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="list-item__depth-3"
|
||||
>Item 2</mwc-list-item
|
||||
>
|
||||
<mwc-list-item>Item 3</mwc-list-item>
|
||||
</mwc-list>
|
||||
</div>
|
||||
<div slot="appContent">
|
||||
<mwc-top-app-bar-fixed prominent>
|
||||
<mwc-icon-button
|
||||
slot="navigationIcon"
|
||||
icon="menu"
|
||||
></mwc-icon-button>
|
||||
<div slot="title">Title</div>
|
||||
</mwc-top-app-bar-fixed>
|
||||
|
||||
<div>
|
||||
<main>
|
||||
<textarea id="editor"></textarea>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</mwc-drawer>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let mde = new EasyMDE({
|
||||
element: document.querySelector("#editor"),
|
||||
renderingConfig: {
|
||||
codeSyntaxHighlighting: true,
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
211
material-design/templates/index.html
Normal file
211
material-design/templates/index.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webpack App</title>
|
||||
</head>
|
||||
<body>
|
||||
<mwc-top-app-bar-fixed prominent>
|
||||
<div slot="title">Title</div>
|
||||
</mwc-top-app-bar-fixed>
|
||||
|
||||
<div>
|
||||
<a href="document.html"> doc</a>
|
||||
<a href="editor.html"> edit</a>
|
||||
<p class="shadow-4 text-right">Hello</p>
|
||||
<main>
|
||||
<article>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
<p>
|
||||
The standard Lorem Ipsum passage, used since the 1500s
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
||||
non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum." Section 1.10.32 of "de Finibus
|
||||
Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
|
||||
perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit
|
||||
aut fugit, sed quia consequuntur magni dolores eos qui
|
||||
ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora
|
||||
incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. Ut enim ad minima veniam, quis nostrum
|
||||
exercitationem ullam corporis suscipit laboriosam, nisi
|
||||
ut aliquid ex ea commodi consequatur? Quis autem vel eum
|
||||
iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum
|
||||
fugiat quo voluptas nulla pariatur?"
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener("scroll", (e) => {
|
||||
//console.log(window.scrollY);
|
||||
if (window.scrollY > 128) {
|
||||
document
|
||||
.querySelector("mwc-top-app-bar-fixed")
|
||||
.removeAttribute("prominent");
|
||||
} else if (window.scrollY < 64) {
|
||||
document
|
||||
.querySelector("mwc-top-app-bar-fixed")
|
||||
.setAttribute("prominent", "prominent");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
10
material-design/tsconfig.json
Normal file
10
material-design/tsconfig.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"noImplicitAny": true,
|
||||
"module": "es6",
|
||||
"target": "es6",
|
||||
"allowJs": true
|
||||
},
|
||||
"files": ["src/index.ts"]
|
||||
}
|
||||
74
material-design/webpack.config.js
Normal file
74
material-design/webpack.config.js
Normal file
@@ -0,0 +1,74 @@
|
||||
// Generated using webpack-cli https://github.com/webpack/webpack-cli
|
||||
|
||||
const path = require("path");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
|
||||
const isProduction = process.env.NODE_ENV == "production";
|
||||
|
||||
const config = {
|
||||
entry: "./src/index.ts",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
},
|
||||
devServer: {
|
||||
open: true,
|
||||
host: "localhost",
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: "templates/index.html",
|
||||
filename: "index.html",
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: "templates/document.html",
|
||||
filename: "document.html",
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: "templates/editor.html",
|
||||
filename: "editor.html",
|
||||
}),
|
||||
// Add your plugins here
|
||||
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(ts|tsx)$/i,
|
||||
loader: "ts-loader",
|
||||
exclude: ["/node_modules/"],
|
||||
},
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
"postcss-loader",
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ["style-loader", "css-loader", "postcss-loader"],
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
|
||||
type: "asset",
|
||||
},
|
||||
|
||||
// Add your rules for custom modules here
|
||||
// Learn more about loaders from https://webpack.js.org/loaders/
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".tsx", ".ts", ".js"],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = () => {
|
||||
if (isProduction) {
|
||||
config.mode = "production";
|
||||
} else {
|
||||
config.mode = "development";
|
||||
}
|
||||
return config;
|
||||
};
|
||||
4904
material-design/yarn-error.log
Normal file
4904
material-design/yarn-error.log
Normal file
File diff suppressed because it is too large
Load Diff
4887
material-design/yarn.lock
Normal file
4887
material-design/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user