Merge branch 'develop' of https://gitlab.steamware.net/steamware/gpw_next into develop
This commit is contained in:
Samuele Locatelli
@@ -1,4 +1,4 @@
|
||||
<div class="all" style="@cssAll">
|
||||
@*<div class="all" style="@cssAll">
|
||||
@if (isActive)
|
||||
{
|
||||
<div class="slider">
|
||||
@@ -11,7 +11,7 @@
|
||||
<button @onclick="()=>slideOut()"><i class="fa-solid fa-chevron-up"></i></button>
|
||||
</div>
|
||||
}
|
||||
<div class="navBottomContainer p-2">
|
||||
<div class="navBottomContainer p-2" style="@cssContenuto">
|
||||
<div>
|
||||
<NavLink class="nav-link text-light" href="RichiesteDipe">
|
||||
<span class="oi oi-list-rich" aria-hidden="true"></span> MPF
|
||||
@@ -28,6 +28,45 @@
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>*@
|
||||
|
||||
|
||||
|
||||
<button class="menu__button" @onclick="()=>showMenu()" style="visibility: @hideButtonCSS">
|
||||
<div>
|
||||
<div><i class="fa-solid fa-bars"></i></div>
|
||||
</div>Menù
|
||||
</button>
|
||||
<section class="menu__body" style="visibility: @hideMenuCSS">
|
||||
<div class="menu__header">
|
||||
<label>
|
||||
<div></div>
|
||||
</label>
|
||||
<p>Navigazione</p>
|
||||
<div @onclick="()=>hideMenu()">
|
||||
<i class="fa-regular fa-circle-xmark"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu__contact">
|
||||
<a href="#0">
|
||||
<NavLink class="nav-link" href="Home">
|
||||
<i class="fa-solid fa-person-booth"></i><span>Timbrature</span>
|
||||
</NavLink>
|
||||
|
||||
</a><a href="#0">
|
||||
<NavLink class="nav-link" href="Admin">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
<span>Admin</span>
|
||||
</NavLink>
|
||||
|
||||
</a><a href="#0">
|
||||
<NavLink class="nav-link" href="RichiesteDipe">
|
||||
<div>
|
||||
<i class="fa-solid fa-ticket"></i><span>MFP</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<div class="menu__overlay" hidden="hidden"></div>
|
||||
|
||||
|
||||
@@ -10,10 +10,14 @@ namespace GPW.CORE.Smart.Components
|
||||
public partial class NavBottom
|
||||
{
|
||||
private string cssAll = "";
|
||||
private string cssContenuto = "";
|
||||
private string hideMenuCSS = "hidden";
|
||||
private string hideButtonCSS = "visible";
|
||||
protected bool isActive { get; set; } = false;
|
||||
protected void slideOut()
|
||||
{
|
||||
cssAll = "bottom: 15rem;";
|
||||
cssContenuto = "height: 100%";
|
||||
isActive = true;
|
||||
}
|
||||
protected void slideIn()
|
||||
@@ -21,5 +25,16 @@ namespace GPW.CORE.Smart.Components
|
||||
cssAll = "bottom: 0rem;";
|
||||
isActive = false;
|
||||
}
|
||||
|
||||
protected void showMenu()
|
||||
{
|
||||
hideMenuCSS = "visible";
|
||||
hideButtonCSS = "hidden";
|
||||
}
|
||||
protected void hideMenu()
|
||||
{
|
||||
hideMenuCSS = "hidden";
|
||||
hideButtonCSS = "visible";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,37 +1,307 @@
|
||||
.all {
|
||||
position: fixed;
|
||||
bottom: 0rem;
|
||||
transition: bottom 0.3s linear 0.2s;
|
||||
width: 100%;
|
||||
/*.all {
|
||||
position: fixed;
|
||||
bottom: 0rem;
|
||||
transition: bottom 0.3s linear 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navBottomContainer {
|
||||
position: sticky;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
background-color: #34495E;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.all:hover + .backDrop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
navBottomContainer div {
|
||||
background-color: #ff0000;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
|
||||
.slider button {
|
||||
border: none;
|
||||
width: 4.37rem;
|
||||
height: 1.5rem;
|
||||
background-color: rgba(149, 165, 166, 0.5);
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
box-shadow: 0px -4px 4px rgba(0,0,0,0.3);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
*/
|
||||
:root {
|
||||
--dark: #333;
|
||||
--light: #fff;
|
||||
--neutral: #f6f6f6;
|
||||
--neutral-dark: #d1d1d1;
|
||||
--color: #5607d7;
|
||||
--color-light: #941ed2;
|
||||
--color-dark: #2719cd;
|
||||
--font-stack: 'Josefin Sans', 'Montserrat', 'sans-serif';
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed;
|
||||
font-family: var(--font-stack);
|
||||
}
|
||||
body:before {
|
||||
content: '';
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: linear-gradient(135deg, orange, orangered);
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
top: -50px;
|
||||
left: 10vw;
|
||||
z-index: -1;
|
||||
}
|
||||
body:after {
|
||||
content: '';
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, cyan, blue);
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
bottom: -50px;
|
||||
right: -5vw;
|
||||
z-index: -1;
|
||||
}
|
||||
.hero__wrapper {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.hero__wrapper:before {
|
||||
content: '';
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: linear-gradient(135deg, var(--color-light), var(--color-dark));
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
left: 10px;
|
||||
z-index: -1;
|
||||
}
|
||||
.hero__wrapper > * {
|
||||
margin: 15px;
|
||||
}
|
||||
.hero__header {
|
||||
flex: 0 1 1px;
|
||||
padding-right: 50px;
|
||||
color: var(--dark);
|
||||
font-size: 8vmax;
|
||||
}
|
||||
.hero__phone {
|
||||
width: 300px;
|
||||
height: 630px;
|
||||
background: var(--light);
|
||||
background-color: #ffffff;
|
||||
background: #fff url('https://codepenworldsfair.com/images/small-worlds-fair.png') center / 250px no-repeat;
|
||||
border: 12px solid var(--dark);
|
||||
border-radius: 36px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero__phone:before {
|
||||
content: '';
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background: var(--dark);
|
||||
border-bottom-right-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
z-index: 1000;
|
||||
}
|
||||
.hero__phone:after {
|
||||
content: '';
|
||||
width: 100px;
|
||||
height: 5px;
|
||||
background: var(--dark);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
z-index: 1000;
|
||||
}
|
||||
.menu__button {
|
||||
--x: -50%;
|
||||
--y: 0;
|
||||
--z: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to right, #fc466b, #3f5efb);
|
||||
padding: 10px 20px;
|
||||
border-radius: 28px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 40px -10px #FF00FF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
left: 50%;
|
||||
transform: translate3d(var(--x), var(--y), var(--z));
|
||||
cursor: pointer;
|
||||
z-index: 105;
|
||||
transition: 0.15s cubic-bezier(0.33, 1, 0.53, 1);
|
||||
}
|
||||
.menu__button[hidden] {
|
||||
--y: 200%;
|
||||
}
|
||||
.menu__button div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.menu__button div div {
|
||||
display: table;
|
||||
height: 1px;
|
||||
background: var(--light);
|
||||
box-shadow: 0 4px 0 var(--light), 0 -4px 0 var(--light);
|
||||
}
|
||||
.menu__overlay {
|
||||
width: 100%;
|
||||
background-color: #34495E;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
.menu__body {
|
||||
--x: 0;
|
||||
--y: 0;
|
||||
--z: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding-bottom: 15px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
box-shadow: 0px -9px 50px -30px black;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 105;
|
||||
transform: translate3d(var(--x), var(--y), var(--z));
|
||||
transition: visibility 200ms linear 300ms, opacity 500ms;
|
||||
}
|
||||
.menu__body[hidden] {
|
||||
--y: 150%;
|
||||
}
|
||||
.menu__body > *:not(:last-child) {
|
||||
border-bottom: 2px solid var(--neutral);
|
||||
}
|
||||
.menu__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
bottom: 0;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
.slider {
|
||||
.menu__header label div {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid var(--dark);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
transform: rotate(5.5rad);
|
||||
}
|
||||
.menu__header label div:after {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background: var(--dark);
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.menu__header p {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
vertical-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu__header h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.menu__header button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: var(--neutral-dark);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu__header button div {
|
||||
width: 15px;
|
||||
height: 3px;
|
||||
background: var(--light);
|
||||
position: relative;
|
||||
transform: rotate(5.5rad);
|
||||
}
|
||||
.menu__header button div:before {
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
background: var(--light);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.menu__links {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.menu__links a {
|
||||
flex: 1 1 1px;
|
||||
padding: 10px 8px;
|
||||
color: var(--dark);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu__contact {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
}
|
||||
.menu__contact svg {
|
||||
width: 100%;
|
||||
fill: var(--color);
|
||||
}
|
||||
.menu__contact a {
|
||||
flex: 1 1 30%;
|
||||
padding: 1.5rem;
|
||||
margin: 5px;
|
||||
border-radius: 8px;
|
||||
background: #d1d1d1;
|
||||
color: var(--color);
|
||||
text-align: center;
|
||||
}
|
||||
.all:hover + .backDrop {
|
||||
display: block;
|
||||
}
|
||||
navBottomContainer div {
|
||||
background-color: #ff0000;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
.slider button {
|
||||
border: none;
|
||||
width: 4.37rem;
|
||||
height: 1.5rem;
|
||||
background-color: rgba(149, 165, 166, 0.5);
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.3);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
.all {
|
||||
/*.all {
|
||||
position: fixed;
|
||||
bottom: 0rem;
|
||||
transition: bottom 0.3s linear 0.2s;
|
||||
@@ -41,3 +41,304 @@ navBottomContainer div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--dark: #333;
|
||||
--light: #fff;
|
||||
--neutral: #f6f6f6;
|
||||
--neutral-dark: #d1d1d1;
|
||||
--color: #5607d7;
|
||||
--color-light: #941ed2;
|
||||
--color-dark: #2719cd;
|
||||
--font-stack: 'Josefin Sans', 'Montserrat', 'sans-serif';
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed;
|
||||
font-family: var(--font-stack);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: linear-gradient(135deg, orange, orangered);
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
top: -50px;
|
||||
left: 10vw;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, cyan, blue);
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
bottom: -50px;
|
||||
right: -5vw;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__wrapper {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: linear-gradient(135deg, var(--color-light), var(--color-dark));
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
left: 10px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__header {
|
||||
flex: 0 1 1px;
|
||||
padding-right: 50px;
|
||||
color: var(--dark);
|
||||
font-size: 8vmax;
|
||||
}
|
||||
|
||||
.hero__phone {
|
||||
width: 300px;
|
||||
height: 630px;
|
||||
background: var(--light);
|
||||
background-color: #ffffff;
|
||||
background: #fff url('https://codepenworldsfair.com/images/small-worlds-fair.png') center/250px no-repeat;
|
||||
border: 12px solid var(--dark);
|
||||
border-radius: 36px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background: var(--dark);
|
||||
border-bottom-right-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100px;
|
||||
height: 5px;
|
||||
background: var(--dark);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
.menu__button {
|
||||
--x: -50%;
|
||||
--y: 0;
|
||||
--z: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to right, #fc466b, #3f5efb);
|
||||
padding: 10px 20px;
|
||||
border-radius: 28px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 40px -10px #FF00FF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
left: 50%;
|
||||
transform: translate3d(var(--x), var(--y), var(--z));
|
||||
cursor: pointer;
|
||||
z-index: 105;
|
||||
transition: .15s cubic-bezier(.33,1,.53,1);
|
||||
|
||||
&[hidden] {
|
||||
--y: 200%;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 20px;
|
||||
|
||||
div {
|
||||
display: table;
|
||||
height: 1px;
|
||||
background: var(--light);
|
||||
box-shadow: 0 4px 0 var(--light), 0 -4px 0 var(--light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu__overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(#000, .1);
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.menu__body {
|
||||
--x: 0;
|
||||
--y: 0;
|
||||
--z: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding-bottom: 15px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
box-shadow: 0px -9px 50px -30px black;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 105;
|
||||
transform: translate3d(var(--x), var(--y), var(--z));
|
||||
//transition: .2s cubic-bezier(.33,1,.53,1);
|
||||
transition: visibility 200ms linear 300ms, opacity 500ms;
|
||||
|
||||
&[hidden] {
|
||||
--y: 150%;
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
border-bottom: 2px solid var(--neutral);
|
||||
}
|
||||
}
|
||||
|
||||
.menu__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 20px;
|
||||
|
||||
label {
|
||||
div {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid var(--dark);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
transform: rotate(5.5rad);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background: var(--dark);
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
vertical-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: var(--neutral-dark);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
div {
|
||||
width: 15px;
|
||||
height: 3px;
|
||||
background: var(--light);
|
||||
position: relative;
|
||||
transform: rotate(5.5rad);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
background: var(--light);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu__links {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold;
|
||||
overflow-x: auto;
|
||||
|
||||
a {
|
||||
flex: 1 1 1px;
|
||||
padding: 10px 8px;
|
||||
color: var(--dark);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.menu__contact {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
a {
|
||||
flex: 1 1 30%;
|
||||
padding: 1.5rem;
|
||||
margin: 5px;
|
||||
border-radius: 8px;
|
||||
background: #d1d1d1;
|
||||
color: var(--color);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -70,6 +70,7 @@
|
||||
@*<script type="text/javascript" src="lib/ToastTrigger.js"></script>*@
|
||||
<script type="text/javascript" src="lib/qrcode.js"></script>
|
||||
<script type="text/javascript" src="lib/qrHelper.js"></script>
|
||||
<script type="text/javascript" src="lib/MenuHandler.js"></script>
|
||||
<script src="_framework/blazor.server.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
const button = document.querySelector('.menu__button');
|
||||
const menu = document.querySelector('.menu__body');
|
||||
const close = document.querySelector('.menu__header button');
|
||||
const overlay = document.querySelector('.menu__overlay');
|
||||
|
||||
function showMenu() {
|
||||
button.setAttribute('hidden', '');
|
||||
menu.removeAttribute('hidden');
|
||||
overlay.removeAttribute('hidden');
|
||||
};
|
||||
|
||||
function hideMenu() {
|
||||
menu.setAttribute('hidden', '');
|
||||
overlay.setAttribute('hidden', '');
|
||||
button.removeAttribute('hidden');
|
||||
};
|
||||
|
||||
button.addEventListener('click', showMenu);
|
||||
close.addEventListener('click', hideMenu);
|
||||
overlay.addEventListener('click', hideMenu);
|
||||
Reference in New Issue
Block a user