fixed paddings, hover effects, autofill styles

mate-academy · Oct 4, 2024 · ad35265 · ad35265
1 parent 7832449
commit ad35265
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git a/src/index.html b/src/index.html
@@ -51,7 +51,6 @@
               alt="Logo"
             />
           </a>
-
           <a
             href="#menu"
             class="top-bar__menu-link"
@@ -63,7 +62,6 @@
             />
           </a>
         </div>
-
         <nav class="top-bar__nav nav">
           <ul class="nav__list">
             <li class="nav__item">
@@ -105,15 +103,13 @@
             </li>
           </ul>
         </nav>
-
         <a
           href="#contacts"
           class="top-bar__hire"
         >
           Hire Us
         </a>
       </div>
-
       <div class="header__content">
         <h1 class="header__title">Strategic Agency</h1>
         <p class="header__subtitle">
@@ -126,7 +122,6 @@ <h1 class="header__title">Strategic Agency</h1>
         >
           Learn more
         </a>
-
         <div class="header__slider slider">
           <div class="slider__slides">
             <img
@@ -145,7 +140,6 @@ <h1 class="header__title">Strategic Agency</h1>
               alt="Slide 3"
             />
           </div>
-
           <div class="slider__wrapper">
             <div class="slider__scrollers scrollers">
               <div class="scrollers__ellipse scrollers__ellipse--left">
@@ -177,7 +171,6 @@ <h1 class="header__title">Strategic Agency</h1>
                 </svg>
               </div>
             </div>
-
             <div class="slider__description">
               <h5 class="slider__title">Intro</h5>
               <p class="slider__subtitle">

diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss
@@ -33,6 +33,11 @@
     &:focus {
       outline: none;
       border-bottom-color: $c-blue;
+      transition: border-bottom-color 0.3s ease;
+    }
+
+    &:not(:focus) {
+      border-bottom-color: initial;
     }
 
     &:last-child {
@@ -46,6 +51,15 @@
     &::placeholder {
       color: rgba(255, 255, 255, 0.7);
     }
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus {
+      border-bottom-color: $c-blue;
+      -webkit-text-fill-color: $c-white;
+      -webkit-box-shadow: 0 0 0px 1000px $c-dark-gray inset;
+      caret-color: $c-white;
+    }
   }
 
   &__button {

diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -1,6 +1,4 @@
 .header {
-  @include element-grid;
-
   width: 100%;
   height: 100vh;
   background-color: $c-dark-gray;

diff --git a/src/styles/blocks/info.scss b/src/styles/blocks/info.scss
@@ -24,6 +24,7 @@
     &-link {
       color: $c-white;
       text-decoration: none;
+      @include hover(text-shadow, 0 0 2px $c-white);
     }
 
     @include text-styler(Open Sans, 600, 24px, 36px, $c-white);

diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
@@ -24,7 +24,7 @@
 }
 
 @mixin on-tablet {
-  @media (max-width: 1023px) {
+  @media (max-width: 1080px) {
     @content;
   }
 }
@@ -44,26 +44,26 @@
   grid-template-columns: repeat(var(--columns), 68px);
 
   @include on-desktop-xl {
-    margin-inline: 54px;
+    padding-inline: 54px;
   }
 
   @include on-desktop {
-    margin-inline: 54px;
+    padding-inline: 54px;
     column-gap: 20px;
   }
 
   @include on-tablet {
     --columns: 6;
 
-    margin-inline: 41px;
+    padding-inline: 41px;
     column-gap: 30px;
   }
 
   @include on-phone {
     --columns: 2;
 
     grid-template-columns: repeat(var(--columns), 130px);
-    margin-inline: 20px;
+    padding-inline: 20px;
     column-gap: 20px;
   }
 }
@@ -96,19 +96,19 @@
 
 @mixin paddings {
   @include on-desktop-xl {
-    margin-inline: 54px;
+    padding-inline: 54px;
   }
 
   @include on-desktop {
-    margin-inline: 54px;
+    padding-inline: 54px;
   }
 
   @include on-tablet {
-    margin-inline: 41px;
+    padding-inline: 41px;
   }
 
   @include on-phone {
-    margin-inline: 20px;
+    padding-inline: 20px;
   }
 }