AAAaaaaAAAAAAMOUR AMOUR

2022-07-07 23:11:09 +03:00
parent ff9404cd94
commit 45ab291d4b
6 changed files with 191 additions and 23 deletions
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -50,22 +50,101 @@ html, body {
 .dropdown {
  position: fixed;
  z-index: 2;
-  background-color: #706fff;
-  width: 100vw;
+  background: linear-gradient(to left bottom, variables.$clr_brand, #003e86);
+  width: 100%;
  height: 90vh;
-  animation: slide-in-right 550ms;
+  -webkit-animation: drawer-open 550ms;
+  animation: drawer-open 550ms;
  flex-direction: column;
  align-items: center;

  .dropdown-nav-item {
-    color: white;
+    display: inline-block;
+    position: relative;
+    margin-top: math.div(variables.$px_horizontalPadding, 4);
+    background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
    font: 600 28px "Montserrat", sans-serif;
    text-decoration: none;
+
+    &:first-of-type {
+      margin-top: math.div(variables.$px_horizontalPadding, 2);
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      transform: scaleX(0);
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(to left, #FFF, #AFF);
+      transform-origin: bottom right;
+      transition: transform 0.25s ease-out;
+    }
+
+    &:hover:after {
+      transform: scaleX(1);
+      transform-origin: bottom left;
+    }
  }
 }

 .dropdown_close_animation {
-  animation: 550ms slide-in-left;
+  -webkit-animation: drawer-close 550ms;
+  animation: drawer-close 550ms;
+}
+
+@-webkit-keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@-webkit-keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
 }

 #container {
--- a/resources/css/partials/header.scss
+++ b/resources/css/partials/header.scss
@@ -68,6 +68,7 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
    width: $dropdown-toggle_l_width;
    height: $dropdown-toggle_l_width;
    position: relative;
+    cursor: pointer;

    .bar {
      padding: 0;
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -152,7 +152,7 @@ $social-button_inner_margin: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
-  background-color: variables.$clr_brand;
+  background: linear-gradient(to left, variables.$clr_brand, #3b8fff);
  color: white;

  p {
--- a/resources/scripts/main.js
+++ b/resources/scripts/main.js
@@ -1,13 +1,19 @@
-function toggleDropdown() {
-    let target = document.getElementsByClassName('dropdown')[0];
-    if (target.classList.contains('hidden')) {
-        target.classList.remove('hidden');
-        target.classList.add('flex');
-        //document.getElementById('container').style.display = 'none';
+async function sleep(milliseconds) {
+    return new Promise(resolve => setTimeout(resolve, milliseconds));
+}
+
+async function toggleDropdown() {
+    let dropdown = document.getElementsByClassName('dropdown')[0];
+    let navitems = document.getElementsByClassName('dropdown-nav-item');
+    if (dropdown.classList.contains('hidden')) {
+        dropdown.classList.remove('hidden');
+        dropdown.classList.add('flex');
    }
    else {
-        target.classList.add('dropdown_close_animation');
-        target.classList.add('hidden');
-        target.classList.remove('flex');
+        dropdown.classList.add('dropdown_close_animation');
+        await sleep(550);
+        dropdown.classList.remove('dropdown_close_animation');
+        dropdown.classList.add('hidden');
+        dropdown.classList.remove('flex');
    }
 }
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -130,7 +130,7 @@
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
-  background-color: #1d60b5;
+  background: linear-gradient(to left, #1d60b5, #3b8fff);
  color: white;
 }
 .social p {
@@ -206,6 +206,7 @@
  width: 36px;
  height: 36px;
  position: relative;
+  cursor: pointer;
 }
 #header .dropdown-toggle .bar {
  padding: 0;
@@ -390,23 +391,93 @@ html, body {
 .dropdown {
  position: fixed;
  z-index: 2;
-  background-color: #706fff;
-  width: 100vw;
+  background: linear-gradient(to left bottom, #1d60b5, #003e86);
+  width: 100%;
  height: 90vh;
-  animation: slide-in-right 550ms;
+  -webkit-animation: drawer-open 550ms;
+  animation: drawer-open 550ms;
  flex-direction: column;
  align-items: center;
 }
 .dropdown .dropdown-nav-item {
-  color: white;
+  display: inline-block;
+  position: relative;
+  margin-top: 50px;
+  background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
  font: 600 28px "Montserrat", sans-serif;
  text-decoration: none;
 }
-
-.dropdown_close_animation {
-  animation: 550ms slide-in-left;
+.dropdown .dropdown-nav-item:first-of-type {
+  margin-top: 100px;
+}
+.dropdown .dropdown-nav-item:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(to left, #FFF, #AFF);
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+.dropdown .dropdown-nav-item:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
 }

+.dropdown_close_animation {
+  -webkit-animation: drawer-close 550ms;
+  animation: drawer-close 550ms;
+}
+
+@-webkit-keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@-webkit-keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
 #container {
  height: 90vh;
  display: grid;