MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added better drawer position support.

Browse Source
This commit is contained in:
Matt Mo 2020-12-08 11:29:23 -08:00
parent 80a8d2a8f8
commit b75d121cb3
1 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
drawer.js
View File

@ -18,25 +18,33 @@ class Drawer extends IgniteElement {
position: absolute; position: absolute;
} }
mt-drawer > div.left { mt-drawer.left {
order: 0;
}
mt-drawer.left > div {
left: 0; left: 0;
top: 0; top: 0;
height: 100vh; height: 100vh;
} }
mt-drawer > div.right { mt-drawer.right {
order: 9999;
}
mt-drawer.right > div {
right: 0; right: 0;
top: 0; top: 0;
height: 100vh; height: 100vh;
} }
mt-drawer > div.top { mt-drawer.top > div {
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
} }
mt-drawer > div.bottom { mt-drawer.bottom > div {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
@ -54,6 +62,16 @@ class Drawer extends IgniteElement {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
} }
mt-drawer.left > .open-btn {
left: 1em;
bottom: 1em;
}
mt-drawer.right > .open-btn {
right: 1em;
bottom: 1em;
}
mt-drawer > .open-btn { mt-drawer > .open-btn {
position: absolute; position: absolute;
z-index: 999999; z-index: 999999;
@ -63,8 +81,6 @@ class Drawer extends IgniteElement {
background-color: white; background-color: white;
border: none; border: none;
outline: none !important; outline: none !important;
left: 1em;
bottom: 1em;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
border-radius: 100%; border-radius: 100%;
display: flex; display: flex;
@ -73,6 +89,16 @@ class Drawer extends IgniteElement {
text-align: center; text-align: center;
} }
mt-drawer.left > div > .close-btn {
right: -3em;
top: 0.5em;
}
mt-drawer.right > div > .close-btn {
left: -3em;
top: 0.5em;
}
mt-drawer > div > .close-btn { mt-drawer > div > .close-btn {
position: absolute; position: absolute;
z-index: 999999; z-index: 999999;
@ -82,8 +108,6 @@ class Drawer extends IgniteElement {
background-color: white; background-color: white;
border: none; border: none;
outline: none !important; outline: none !important;
right: -3em;
top: 0.5em;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
border-radius: 100%; border-radius: 100%;
display: flex; display: flex;
@ -134,6 +158,7 @@ class Drawer extends IgniteElement {
render() { render() {
return this.template return this.template
.class(this.position)
.child( .child(
new button() new button()
.class("open-btn") .class("open-btn")
@ -143,7 +168,6 @@ class Drawer extends IgniteElement {
new div() new div()
.class(this.absolute, value => value ? "absolute" : null) .class(this.absolute, value => value ? "absolute" : null)
.class(this.mobile, value => value ? "mobile" : null) .class(this.mobile, value => value ? "mobile" : null)
.class(this.position)
.style("width", this.width) .style("width", this.width)
.style("height", this.height) .style("height", this.height)
.style("padding", this.padding) .style("padding", this.padding)