RanchiMall/flowallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: page on mobile not taking full height of view-port

Browse Source
This commit is contained in:
sairaj mote 2021-02-26 03:07:19 +05:30
parent 443925e4f5
commit 64f2690c23
5 changed files with 103 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
css/main.css
View File

@ -8,6 +8,7 @@
} }
:root { :root {
height: 100%;
font-size: clamp(1rem, 1.2vmax, 3rem); font-size: clamp(1rem, 1.2vmax, 3rem);
--ease-in-overshhot: cubic-bezier(0.6, -0.28, 0.735, 0.045); --ease-in-overshhot: cubic-bezier(0.6, -0.28, 0.735, 0.045);
--ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
@ -21,8 +22,7 @@ body {
--background-color: #efefef; --background-color: #efefef;
--error-color: red; --error-color: red;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background: url(lighthouse.svg) no-repeat center; height: calc(100%);
background-size: cover;
} }
body[data-theme=dark] { body[data-theme=dark] {
@ -81,6 +81,10 @@ sm-textarea {
justify-content: space-between; justify-content: space-between;
} }
.full-width {
width: 100%;
}
.hide { .hide {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -161,13 +165,14 @@ sm-textarea {
#main_card { #main_card {
height: 100%; height: 100%;
grid-row: 1/3; grid-row: 1/3;
background: rgba(var(--foreground-color), 0.9);
} }
#main_header { #main_header {
grid-area: header; grid-area: header;
height: max-content; height: max-content;
gap: 0.2rem 0.5rem; gap: 0.2rem 0.5rem;
padding: 1.5rem 0.7rem 1.5rem 1rem; padding: 1rem 0.7rem 1rem 1rem;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-areas: "company setting" "app setting"; grid-template-areas: "company setting" "app setting";
} }
@ -227,7 +232,7 @@ sm-textarea {
} }
.navbar__item__title { .navbar__item__title {
font-size: 0.9rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.7); color: rgba(var(--text-color), 0.7);
} }
@ -248,6 +253,10 @@ sm-textarea {
fill: white; fill: white;
} }
#dashboard_page__header {
height: 7.5rem;
}
#base_header { #base_header {
width: 100%; width: 100%;
} }
@ -259,7 +268,7 @@ sm-textarea {
} }
#send_flo_form { #send_flo_form {
padding: 0 1.5rem; padding: 0 1rem;
gap: 1rem; gap: 1rem;
} }
@ -274,7 +283,6 @@ sm-textarea {
} }
#selected_contact_options { #selected_contact_options {
margin-top: 0.5rem;
list-style: none; list-style: none;
} }
@ -334,6 +342,7 @@ sm-textarea {
border-radius: 0.5rem; border-radius: 0.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06); box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
-webkit-tap-highlight-color: transparent;
} }
.contact-hidden-options { .contact-hidden-options {
@ -397,15 +406,10 @@ sm-textarea {
} }
@media all and (max-width: 640px) { @media all and (max-width: 640px) {
body {
min-height: 100vh;
}
#main_card { #main_card {
min-height: 100%; min-height: 100%;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
grid-template-areas: "header" "page" "nav"; grid-template-areas: "header" "page" "nav";
background: rgba(var(--foreground-color), 0.9);
} }
#main_navbar { #main_navbar {
@ -427,8 +431,10 @@ sm-textarea {
} }
@media all and (min-width: 640px) { @media all and (min-width: 640px) {
body { body {
place-content: center; align-items: center;
min-height: 100vh; justify-content: center;
background: url(lighthouse.svg) no-repeat center;
background-size: cover;
} }
sm-popup { sm-popup {
@ -450,7 +456,6 @@ sm-textarea {
grid-template-rows: min-content 1fr; grid-template-rows: min-content 1fr;
grid-template-areas: "header page" "nav page"; grid-template-areas: "header page" "nav page";
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16); box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
background: rgba(var(--foreground-color), 0.9);
} }
#main_header { #main_header {
@ -464,6 +469,10 @@ sm-textarea {
align-content: flex-start; align-content: flex-start;
} }
.navbar__item__title {
font-size: 0.9rem;
}
#page_container { #page_container {
position: relative; position: relative;
grid-row: 1/3; grid-row: 1/3;
@ -480,7 +489,7 @@ sm-textarea {
} }
.page__header { .page__header {
padding: 2rem 1.5rem; padding: 1.5rem;
} }
#contacts_container { #contacts_container {
@ -490,7 +499,7 @@ sm-textarea {
#add_contact_button { #add_contact_button {
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: 2rem 2.5rem; margin: 2rem;
} }
} }
@media all and (min-width: 1280px) { @media all and (min-width: 1280px) {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

39
css/main.scss
View File

@ -7,6 +7,7 @@
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
:root{ :root{
height: 100%;
font-size: clamp(1rem, 1.2vmax, 3rem); font-size: clamp(1rem, 1.2vmax, 3rem);
--ease-in-overshhot: cubic-bezier(0.6, -0.28, 0.735, 0.045); --ease-in-overshhot: cubic-bezier(0.6, -0.28, 0.735, 0.045);
--ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
@ -19,8 +20,7 @@ body{
--background-color: #efefef; --background-color: #efefef;
--error-color: red; --error-color: red;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background: url(lighthouse.svg) no-repeat center; height: calc(100%);
background-size: cover;
} }
body[data-theme='dark']{ body[data-theme='dark']{
--accent-color:#d7b5ff; --accent-color:#d7b5ff;
@ -68,6 +68,9 @@ sm-textarea{
.space-between{ .space-between{
justify-content: space-between; justify-content: space-between;
} }
.full-width{
width: 100%;
}
.hide{ .hide{
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -134,12 +137,13 @@ sm-textarea{
#main_card{ #main_card{
height: 100%; height: 100%;
grid-row: 1/3; grid-row: 1/3;
background: rgba(var(--foreground-color), 0.9);
} }
#main_header{ #main_header{
grid-area: header; grid-area: header;
height: max-content; height: max-content;
gap: 0.2rem 0.5rem; gap: 0.2rem 0.5rem;
padding: 1.5rem 0.7rem 1.5rem 1rem; padding: 1rem 0.7rem 1rem 1rem;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-areas: 'company setting' 'app setting'; grid-template-areas: 'company setting' 'app setting';
} }
@ -179,7 +183,6 @@ sm-textarea{
padding: 0.8rem; padding: 0.8rem;
border-radius: 0.5rem; border-radius: 0.5rem;
&--active{ &--active{
.navbar__item__icon{ .navbar__item__icon{
fill: var(--accent-color); fill: var(--accent-color);
} }
@ -194,7 +197,7 @@ sm-textarea{
fill: rgba(var(--text-color), 0.7); fill: rgba(var(--text-color), 0.7);
} }
.navbar__item__title{ .navbar__item__title{
font-size: 0.9rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.7); color: rgba(var(--text-color), 0.7);
} }
@ -214,7 +217,9 @@ sm-textarea{
fill: white; fill: white;
} }
#dashboard_page__header{
height: 7.5rem;
}
#base_header{ #base_header{
width: 100%; width: 100%;
} }
@ -224,7 +229,7 @@ sm-textarea{
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
#send_flo_form{ #send_flo_form{
padding: 0 1.5rem; padding: 0 1rem;
gap: 1rem; gap: 1rem;
} }
@ -238,7 +243,6 @@ sm-textarea{
height: 1.2rem; height: 1.2rem;
} }
#selected_contact_options{ #selected_contact_options{
margin-top: 0.5rem;
list-style: none; list-style: none;
} }
.contact-option{ .contact-option{
@ -295,6 +299,7 @@ sm-textarea{
border-radius: 0.5rem; border-radius: 0.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06); box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
-webkit-tap-highlight-color: transparent;
} }
.contact-hidden-options{ .contact-hidden-options{
position: absolute; position: absolute;
@ -352,14 +357,10 @@ sm-textarea{
// mobile only styles // mobile only styles
@media all and (max-width: 640px){ @media all and (max-width: 640px){
body{
min-height: 100vh;
}
#main_card{ #main_card{
min-height: 100%; min-height: 100%;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
grid-template-areas: 'header' 'page' 'nav'; grid-template-areas: 'header' 'page' 'nav';
background: rgba(var(--foreground-color), 0.9);
} }
#main_navbar{ #main_navbar{
flex-direction: row; flex-direction: row;
@ -379,8 +380,10 @@ sm-textarea{
// desktop only styles // desktop only styles
@media all and (min-width: 640px){ @media all and (min-width: 640px){
body{ body{
place-content: center; align-items: center;
min-height: 100vh; justify-content: center;
background: url(lighthouse.svg) no-repeat center;
background-size: cover;
} }
sm-popup{ sm-popup{
--width: 24rem; --width: 24rem;
@ -399,7 +402,6 @@ sm-textarea{
grid-template-rows: min-content 1fr; grid-template-rows: min-content 1fr;
grid-template-areas: 'header page' 'nav page'; grid-template-areas: 'header page' 'nav page';
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16); box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
background: rgba(var(--foreground-color), 0.9);
} }
#main_header{ #main_header{
padding: 1.5rem 1.2rem 1.5rem 2rem; padding: 1.5rem 1.2rem 1.5rem 2rem;
@ -410,6 +412,9 @@ sm-textarea{
padding: 0 1rem; padding: 0 1rem;
align-content: flex-start; align-content: flex-start;
} }
.navbar__item__title{
font-size: 0.9rem;
}
#page_container{ #page_container{
position: relative; position: relative;
grid-row: 1/3; grid-row: 1/3;
@ -425,7 +430,7 @@ sm-textarea{
} }
} }
.page__header{ .page__header{
padding: 2rem 1.5rem; padding: 1.5rem;
} }
#contacts_container{ #contacts_container{
padding: 0 1rem 8rem 2rem; padding: 0 1rem 8rem 2rem;
@ -433,7 +438,7 @@ sm-textarea{
#add_contact_button{ #add_contact_button{
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: 2rem 2.5rem; margin: 2rem;
} }
} }
@media all and (min-width: 1280px){ @media all and (min-width: 1280px){

64
new.html
View File

@ -11,7 +11,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="css/main.min.css">
</head> </head>
<body class="grid" data-theme="light"> <body class="flex" data-theme="light">
<audio id="notification_sound"> <audio id="notification_sound">
<source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg"> <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
<source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg"> <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
@ -54,11 +54,11 @@
</button> </button>
</header> </header>
<nav id="main_navbar" class="flex"> <nav id="main_navbar" class="flex">
<button id="home_button" class="navbar__item navbar__item--active"> <button id="dashboard_page_button" class="navbar__item" data-target-page="dashboard_page">
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg> <svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
<span class="navbar__item__title">Dashboard</span> <span class="navbar__item__title">Dashboard</span>
</button> </button>
<button id="send_flo_button" class="navbar__item"> <button id="send_flo_page_button" class="navbar__item" data-target-page="send_flo_page">
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg> <svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>
<span class="navbar__item__title">Send FLO</span> <span class="navbar__item__title">Send FLO</span>
</button> </button>
@ -66,7 +66,7 @@
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 9h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm1-6h15v4H2V4a1 1 0 0 1 1-1zm12 11v2h3v-2h-3z"/></svg> <svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 9h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm1-6h15v4H2V4a1 1 0 0 1 1-1zm12 11v2h3v-2h-3z"/></svg>
<span class="navbar__item__title">Check balance</span> <span class="navbar__item__title">Check balance</span>
</button> </button>
<button id="get_flo_button" class="navbar__item"> <button id="get_flo_button" class="navbar__item" data-target-page="get_flo_page">
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg> <svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg>
<span class="navbar__item__title">Get FLO address</span> <span class="navbar__item__title">Get FLO address</span>
</button> </button>
@ -76,15 +76,21 @@
</button> </button>
</nav> </nav>
<div id="page_container" class="flex"> <div id="page_container" class="flex">
<section class="page"> <section id="dashboard_page" class="page hide-completely">
<header class="page__header flex direction-column"> <header id="dashboard_page__header" class="page__header flex align-center">
<div id="base_header" class="flex space-between align-center"> <div id="base_header" class="flex space-between align-center">
<h4 class="header__title">Saved addresses</h4> <h4 class="header__title">Saved addresses</h4>
<sm-input id="search_contacts" placeholder="Search" type="search"> <button class="back-button">
<svg slot="icon" class="icon search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg> <svg class="icon search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
</sm-input> </button>
<div class="expanding-search flex align-center hide-completely">
<button class="back-button">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
</button>
<sm-input id="search_contacts" placeholder="Search" type="search"></sm-input>
</div>
</div> </div>
<ul id="selected_contact_options" class="flex align-center hide-completely"> <ul id="selected_contact_options" class="flex align-center full-width hide-completely">
<li class="contact-option"> <li class="contact-option">
<button class="contact-option__button" onclick="clearSelection()"> <button class="contact-option__button" onclick="clearSelection()">
<svg class="icon contact-option__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg> <svg class="icon contact-option__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
@ -538,6 +544,12 @@
}; };
</script> </script>
<script> <script>
const activePage = {}
window.addEventListener('load', e => {
console.log('loaded')
showPage('dashboard_page')
})
// Animations // Animations
//Fly animation //Fly animation
@ -657,7 +669,23 @@
const card = e.target.closest('.contact-card') const card = e.target.closest('.contact-card')
createRipple(e, card) createRipple(e, card)
} }
else if(e.target.closest('.navbar__item')){
showPage(e.target.closest('.navbar__item').dataset.targetPage)
}
}) })
function showPage(pageId){
if(activePage.pageId === pageId) return
if(activePage.pageId){
getRef(activePage.pageId).classList.add('hide-completely')
activePage.button.classList.remove('navbar__item--active')
}
getRef(pageId).classList.remove('hide-completely')
const activeButton = getRef(`${pageId}_button`)
activeButton.classList.add('navbar__item--active')
activePage.pageId = pageId
activePage.button = activeButton
}
const selectedContacts = new Set() const selectedContacts = new Set()
document.addEventListener('change', e => { document.addEventListener('change', e => {
@ -689,13 +717,22 @@
} }
if(show){ if(show){
if(!getRef('selected_contact_options').classList.contains('hide-completely')) return if(!getRef('selected_contact_options').classList.contains('hide-completely')) return
getRef('selected_contact_options').classList.remove('hide-completely')
getRef('selected_contact_options').animate(slideInDown, options) getRef('base_header').animate(slideOutLeft, options)
.onfinish = () => {
getRef('base_header').classList.add('hide-completely')
getRef('selected_contact_options').classList.remove('hide-completely')
getRef('selected_contact_options').animate(slideInLeft, options)
}
} }
else{ else{
if(getRef('selected_contact_options').classList.contains('hide-completely')) return if(getRef('selected_contact_options').classList.contains('hide-completely')) return
getRef('selected_contact_options').animate(slideOutUp, options).onfinish = () => {
getRef('selected_contact_options').animate(slideOutRight, options)
.onfinish = () => {
getRef('selected_contact_options').classList.add('hide-completely') getRef('selected_contact_options').classList.add('hide-completely')
getRef('base_header').classList.remove('hide-completely')
getRef('base_header').animate(slideInRight, options)
} }
} }
} }
@ -706,6 +743,7 @@
}) })
selectedContacts.clear() selectedContacts.clear()
} }
</script> </script>
<script> <script>
//UI for webWallet //UI for webWallet

6
script/components.js
View File

@ -2562,6 +2562,9 @@ smNotifications.innerHTML = `
transform: none; transform: none;
opacity: 1; opacity: 1;
} }
.notification-panel:empty{
display:none;
}
.notification{ .notification{
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -2678,8 +2681,7 @@ smNotifications.innerHTML = `
} }
} }
</style> </style>
<div class="notification-panel"> <div class="notification-panel"></div>
</div>
` `
customElements.define('sm-notifications', class extends HTMLElement { customElements.define('sm-notifications', class extends HTMLElement {