styling select menu arrow

goldipl · Jun 28, 2024 · d699674 · d699674
1 parent 250da08
commit d699674
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 39 deletions.
diff --git a/sass/common/_mobile_menu.scss b/sass/common/_mobile_menu.scss
@@ -7,28 +7,28 @@ html.body-locked {
   /* For Webkit browsers (Chrome, Safari) */
   ::-webkit-scrollbar-thumb {
     background-color: $light_grey02;
-    width: 10px;
-    height: 10px;
+    width: 3px;
+    height: 3px;
   }
 
   /* For Firefox */
   ::-moz-scrollbar-thumb {
     background-color: $light_grey02;
-    width: 10px;
-    height: 10px;
+    width: 3px;
+    height: 3px;
   }
 
   /* For Internet Explorer and Edge */
   ::-ms-thumb {
     background-color: $light_grey02;
-    width: 10px;
-    height: 10px;
+    width: 3px;
+    height: 3px;
   }
 
   /* For standard scrollbars (if supported) */
   ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+    width: 3px;
+    height: 3px;
   }
   .mobile-menu {
     position: fixed;
@@ -38,6 +38,8 @@ html.body-locked {
     z-index: 9999999999999;
     transform: translateX(-100%);
     transition: 0.4s;
+    overflow-x: hidden;
+    overflow-y: scroll;
     &.active {
       transform: translateX(0);
     }
@@ -441,7 +443,7 @@ html.body-locked {
                 }
               }
               &-bottom {
-                height: 100%;
+                height: auto;
                 display: flex;
                 flex-wrap: wrap;
                 flex-direction: row;
@@ -599,6 +601,13 @@ html.body-locked {
             text-align: left;
             color: $grey01;
             background-color: $white;
+            box-shadow: none;
+            cursor: pointer;
+            background: url(./../../assets/icons/menu/menu-select-arrow.svg)
+              no-repeat right $white;
+            appearance: none;
+            -webkit-appearance: none;
+            background-position-x: 90%;
             option {
               font-size: 12px;
               font-weight: 500;
@@ -607,6 +616,13 @@ html.body-locked {
               color: $grey01;
               background-color: $white;
             }
+            &:focus {
+              background: url(./../../assets/icons/menu/menu-select-arrow-rotate.svg)
+                no-repeat right $white;
+              appearance: none;
+              -webkit-appearance: none;
+              background-position-x: 90%;
+            }
             &:hover,
             &:focus,
             &:active {
@@ -678,36 +694,36 @@ html.body-locked {
     /* For Webkit browsers (Chrome, Safari) */
     ::-webkit-scrollbar-thumb {
       background-color: $light_grey02;
-      width: 2px;
-      height: 2px;
+      width: 10px;
+      height: 10px;
     }
 
     /* For Firefox */
     ::-moz-scrollbar-thumb {
       background-color: $light_grey02;
-      width: 2px;
-      height: 2px;
+      width: 10px;
+      height: 10px;
     }
 
     /* For Internet Explorer and Edge */
     ::-ms-thumb {
       background-color: $light_grey02;
-      width: 2px;
-      height: 2px;
+      width: 10px;
+      height: 10px;
     }
 
     /* For standard scrollbars (if supported) */
     ::-webkit-scrollbar {
-      width: 2px;
-      height: 2px;
+      width: 10px;
+      height: 10px;
     }
     .mobile-menu {
       display: none;
       position: fixed;
       top: 0;
       right: calc((100vw - 1728px) / 2);
-      width: 390px;
-      height: 70vh;
+      width: 480px;
+      height: 100vh;
       background-color: $white;
       z-index: 9999999999999;
       transform: translateX(-100%);
@@ -716,6 +732,23 @@ html.body-locked {
       &.active {
         display: flex;
       }
+      &-wrapper {
+        &__content {
+          .second-lvl-menu-wrapper,
+          .menu-inner-third-lvl-content-wrapper {
+            padding: 0 24px;
+          }
+          &-menu-list {
+            padding: 0 24px;
+          }
+          &-lang-select {
+            padding: auto 24px;
+          }
+          &-contact {
+            padding: auto 24px;
+          }
+        }
+      }
     }
   }
 }
diff --git a/sass/main.css b/sass/main.css
@@ -2480,22 +2480,22 @@ html.body-locked {
 }
 .header-2-0 ::-webkit-scrollbar-thumb {
   background-color: #a8a8a9;
-  width: 10px;
-  height: 10px;
+  width: 3px;
+  height: 3px;
 }
 .header-2-0 ::-moz-scrollbar-thumb {
   background-color: #a8a8a9;
-  width: 10px;
-  height: 10px;
+  width: 3px;
+  height: 3px;
 }
 .header-2-0 ::-ms-thumb {
   background-color: #a8a8a9;
-  width: 10px;
-  height: 10px;
+  width: 3px;
+  height: 3px;
 }
 .header-2-0 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 3px;
+  height: 3px;
 }
 .header-2-0 .mobile-menu {
   position: fixed;
@@ -2505,6 +2505,8 @@ html.body-locked {
   z-index: 9999999999999;
   transform: translateX(-100%);
   transition: 0.4s;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 .header-2-0 .mobile-menu.active {
   transform: translateX(0);
@@ -2904,7 +2906,7 @@ html.body-locked {
      object-fit: contain;
 }
 .header-2-0 .mobile-menu-wrapper__content-menu-list .mobile-menu-list__slot .mobile-menu-img-wrapper-bottom {
-  height: 100%;
+  height: auto;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
@@ -3060,6 +3062,13 @@ html.body-locked {
   text-align: left;
   color: #25262b;
   background-color: #ffffff;
+  box-shadow: none;
+  cursor: pointer;
+  background: url(./../../assets/icons/menu/menu-select-arrow.svg) no-repeat right #ffffff;
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  background-position-x: 90%;
 }
 .header-2-0 .mobile-menu-wrapper__content-lang-select .lang-select__select option {
   font-size: 12px;
@@ -3069,6 +3078,13 @@ html.body-locked {
   color: #25262b;
   background-color: #ffffff;
 }
+.header-2-0 .mobile-menu-wrapper__content-lang-select .lang-select__select:focus {
+  background: url(./../../assets/icons/menu/menu-select-arrow-rotate.svg) no-repeat right #ffffff;
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  background-position-x: 90%;
+}
 .header-2-0 .mobile-menu-wrapper__content-lang-select .lang-select__select:hover, .header-2-0 .mobile-menu-wrapper__content-lang-select .lang-select__select:focus, .header-2-0 .mobile-menu-wrapper__content-lang-select .lang-select__select:active {
   border: 1px solid #25262b;
   outline: unset;
@@ -3133,30 +3149,30 @@ html.body-locked {
   }
   .header-2-0 ::-webkit-scrollbar-thumb {
     background-color: #a8a8a9;
-    width: 2px;
-    height: 2px;
+    width: 10px;
+    height: 10px;
   }
   .header-2-0 ::-moz-scrollbar-thumb {
     background-color: #a8a8a9;
-    width: 2px;
-    height: 2px;
+    width: 10px;
+    height: 10px;
   }
   .header-2-0 ::-ms-thumb {
     background-color: #a8a8a9;
-    width: 2px;
-    height: 2px;
+    width: 10px;
+    height: 10px;
   }
   .header-2-0 ::-webkit-scrollbar {
-    width: 2px;
-    height: 2px;
+    width: 10px;
+    height: 10px;
   }
   .header-2-0 .mobile-menu {
     display: none;
     position: fixed;
     top: 0;
     right: calc((100vw - 1728px) / 2);
-    width: 390px;
-    height: 70vh;
+    width: 480px;
+    height: 100vh;
     background-color: #ffffff;
     z-index: 9999999999999;
     transform: translateX(-100%);
@@ -3166,6 +3182,19 @@ html.body-locked {
   .header-2-0 .mobile-menu.active {
     display: flex;
   }
+  .header-2-0 .mobile-menu-wrapper__content .second-lvl-menu-wrapper,
+  .header-2-0 .mobile-menu-wrapper__content .menu-inner-third-lvl-content-wrapper {
+    padding: 0 24px;
+  }
+  .header-2-0 .mobile-menu-wrapper__content-menu-list {
+    padding: 0 24px;
+  }
+  .header-2-0 .mobile-menu-wrapper__content-lang-select {
+    padding: auto 24px;
+  }
+  .header-2-0 .mobile-menu-wrapper__content-contact {
+    padding: auto 24px;
+  }
 }
 .header-2-0 .cart-preview-box {
   display: none;