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

Cleaned up drawer css and made it easier to style the component.

Browse Source
This commit is contained in:
Matt Mo 2021-01-05 12:57:59 -08:00
parent d9bca5d579
commit c403c1cb40
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
drawer.js
View File

@ -9,12 +9,16 @@ class Drawer extends IgniteElement {
get styles() {
return /*css*/`
mt-drawer > div {
mt-drawer {
z-index: 999999;
}
mt-drawer > .container {
position: relative;
background-color: #f8f9fa;
}
mt-drawer > div.absolute {
mt-drawer.absolute > .container {
position: absolute;
}
@ -22,7 +26,7 @@ class Drawer extends IgniteElement {
order: 0;
}
mt-drawer.left > div {
mt-drawer.left > .container {
left: 0;
top: 0;
height: 100vh;
@ -32,33 +36,32 @@ class Drawer extends IgniteElement {
order: 9999;
}
mt-drawer.right > div {
mt-drawer.right > .container {
right: 0;
top: 0;
height: 100vh;
}
mt-drawer.top > div {
mt-drawer.top > .container {
top: 0;
left: 0;
width: 100vw;
}
mt-drawer.bottom > div {
mt-drawer.bottom > .container {
bottom: 0;
left: 0;
width: 100vw;
}
mt-drawer > div {
mt-drawer > .container {
display: flex;
flex-direction: column;
}
mt-drawer > div.mobile {
mt-drawer.mobile > .container {
display: none;
position: absolute;
z-index: 999999;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
@ -89,17 +92,17 @@ class Drawer extends IgniteElement {
text-align: center;
}
mt-drawer.left > div > .close-btn {
mt-drawer.left > .container > .close-btn {
right: -3em;
top: 0.5em;
}
mt-drawer.right > div > .close-btn {
mt-drawer.right > .container > .close-btn {
left: -3em;
top: 0.5em;
}
mt-drawer > div > .close-btn {
mt-drawer > .container > .close-btn {
position: absolute;
z-index: 999999;
width: 2.5em;
@ -160,6 +163,8 @@ class Drawer extends IgniteElement {
render() {
return this.template
.class(this.placement)
.class(this.mobile, value => value ? "mobile" : null)
.class(this.absolute, value => value ? "absolute" : null)
.child(
new button()
.class("open-btn")
@ -167,12 +172,11 @@ class Drawer extends IgniteElement {
.onClick(() => this.show = true)
.child("<i class='fas fa-chevron-right'></i>"),
new div()
.class(this.absolute, value => value ? "absolute" : null)
.class(this.mobile, value => value ? "mobile" : null)
.style("width", this.width)
.style("height", this.height)
.style("padding", this.padding)
.style("display", this.show, true, value => value ? "flex" : null)
.style("display", this.show, true, value => value ? "flex" : "none")
.class("container")
.child(
new button()
.class("close-btn")