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