diff --git a/GPW.CORE.SMART/Components/NavBottom.razor.cs b/GPW.CORE.SMART/Components/NavBottom.razor.cs index c3008c6..8b11499 100644 --- a/GPW.CORE.SMART/Components/NavBottom.razor.cs +++ b/GPW.CORE.SMART/Components/NavBottom.razor.cs @@ -28,12 +28,12 @@ namespace GPW.CORE.Smart.Components protected void showMenu() { - hideMenuCSS = "visible"; + hideMenuCSS = "visible; height: 40%"; hideButtonCSS = "hidden"; } protected void hideMenu() { - hideMenuCSS = "hidden"; + hideMenuCSS = "hidden; height: 0%;"; hideButtonCSS = "visible"; } } diff --git a/GPW.CORE.SMART/Components/NavBottom.razor.css b/GPW.CORE.SMART/Components/NavBottom.razor.css index 508c31c..3dac9c3 100644 --- a/GPW.CORE.SMART/Components/NavBottom.razor.css +++ b/GPW.CORE.SMART/Components/NavBottom.razor.css @@ -88,21 +88,22 @@ body:after { display: flex; align-items: center; justify-content: space-between; - background: linear-gradient(to right, #fc466b, #3f5efb); + background: linear-gradient(to right, #606c88, #3f4c6b); padding: 10px 20px; - border-radius: 28px; + border-radius: 1.5rem 1.5rem 0 0; border: none; box-shadow: 0 2px 40px -10px #FF00FF; color: #fff; font-size: 16px; white-space: nowrap; position: fixed; - bottom: 1rem; + bottom: 0rem; 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); + /*transition: .15s cubic-bezier(.33,1,.53,1);*/ + /*transition: visibility 200ms ease-in-out 400ms, opacity 500ms;*/ } .menu__button[hidden] { --y: 200%; @@ -143,7 +144,9 @@ body:after { bottom: 0; z-index: 105; transform: translate3d(var(--x), var(--y), var(--z)); - transition: visibility 200ms linear 300ms, opacity 500ms; + height: 0%; + /*transition: height 200ms ease-in-out 400ms, opacity 700ms;*/ + transition: height 0.3s cubic-bezier(0.54, 0.57, 0.36, 0.98) 0.2s; } .menu__body[hidden] { --y: 150%; diff --git a/GPW.CORE.SMART/Components/NavBottom.razor.less b/GPW.CORE.SMART/Components/NavBottom.razor.less index 125cf0f..bb0d7fe 100644 --- a/GPW.CORE.SMART/Components/NavBottom.razor.less +++ b/GPW.CORE.SMART/Components/NavBottom.razor.less @@ -97,21 +97,23 @@ body { display: flex; align-items: center; justify-content: space-between; - background: linear-gradient(to right, #fc466b, #3f5efb); + background: linear-gradient(to right, #606c88, #3f4c6b); padding: 10px 20px; - border-radius: 28px; + border-radius: 1.5rem 1.5rem 0 0; border: none; box-shadow: 0 2px 40px -10px #FF00FF; color: #fff; font-size: 16px; white-space: nowrap; position: fixed; - bottom: 1rem; + bottom: 0rem; left: 50%; transform: translate3d(var(--x), var(--y), var(--z)); cursor: pointer; z-index: 105; - transition: .15s cubic-bezier(.33,1,.53,1); + /*transition: .15s cubic-bezier(.33,1,.53,1);*/ + /*transition: visibility 200ms ease-in-out 400ms, opacity 500ms;*/ + &[hidden] { --y: 200%; @@ -158,7 +160,9 @@ body { 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; + height: 0%; + /*transition: height 200ms ease-in-out 400ms, opacity 700ms;*/ + transition: height 0.3s cubic-bezier(0.54, 0.57, 0.36, 0.98) 0.2s; &[hidden] { --y: 150%; @@ -274,4 +278,4 @@ body { font-weight: bold; text-decoration: none; } -} \ No newline at end of file +} diff --git a/GPW.CORE.SMART/Components/NavBottom.razor.min.css b/GPW.CORE.SMART/Components/NavBottom.razor.min.css index 1c9a0f8..e1f71fa 100644 --- a/GPW.CORE.SMART/Components/NavBottom.razor.min.css +++ b/GPW.CORE.SMART/Components/NavBottom.razor.min.css @@ -1 +1 @@ -: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,#ffa500,#ff4500);border-radius:50%;position:fixed;top:-50px;left:10vw;z-index:-1;}body:after{content:'';width:300px;height:300px;background:linear-gradient(135deg,#0ff,#00f);border-radius:50%;position:fixed;bottom:-50px;right:-5vw;z-index:-1;}.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:0;box-shadow:0 2px 40px -10px #f0f;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);}.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%;height:100%;background:rgba(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:0 -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;padding:15px 20px;}.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;font-size:14px;font-weight:bold;text-decoration:none;} \ No newline at end of file +: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,#ffa500,#ff4500);border-radius:50%;position:fixed;top:-50px;left:10vw;z-index:-1;}body:after{content:'';width:300px;height:300px;background:linear-gradient(135deg,#0ff,#00f);border-radius:50%;position:fixed;bottom:-50px;right:-5vw;z-index:-1;}.menu__button{--x:-50%;--y:0;--z:0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#606c88,#3f4c6b);padding:10px 20px;border-radius:1.5rem 1.5rem 0 0;border:0;box-shadow:0 2px 40px -10px #f0f;color:#fff;font-size:16px;white-space:nowrap;position:fixed;bottom:0;left:50%;transform:translate3d(var(--x),var(--y),var(--z));cursor:pointer;z-index:105;}.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%;height:100%;background:rgba(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:0 -9px 50px -30px black;font-family:'Montserrat',sans-serif;position:absolute;bottom:0;z-index:105;transform:translate3d(var(--x),var(--y),var(--z));height:0%;transition:height .3s cubic-bezier(.54,.57,.36,.98) .2s;}.menu__body[hidden]{--y:150%;}.menu__body>*:not(:last-child){border-bottom:2px solid var(--neutral);}.menu__header{display:flex;justify-content:space-between;padding:15px 20px;}.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;font-size:14px;font-weight:bold;text-decoration:none;} \ No newline at end of file