refactored the classes

Alina-Halchenko · Aug 3, 2022 · 1f4f1f7 · 1f4f1f7
1 parent 19e31ae
commit 1f4f1f7
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 209 deletions.
diff --git a/src/partials/about.html b/src/partials/about.html
@@ -103,13 +103,15 @@ <h2 class="section__title about__title">how it’s made?</h2>
 
       <div class="about__column about__column--second">
         <p class="about__paragraph about__paragraph--first">
-          Ice cream is a sweetened frozen food usually made from milk or cream and is flavoured with a sweetener, a spice, such as cocoa or vanilla, or with fruit.
+          Ice cream is a sweetened frozen food usually made from milk or cream
+          and is flavoured with a sweetener, a spice, such as cocoa or vanilla,
+          or with fruit.
         </p>
         <p class="about__paragraph about__paragraph--second">
           Milk is a nutrient-rich liquid food produced by the mammary glands of
           mammals. It is the primary source of nutrition for young mammals
-          (including breastfed human infants) before they are able to digest solid
-          food.<span class="about__ending">
+          (including breastfed human infants) before they are able to digest
+          solid food.<span class="about__ending">
             Immune factors and immune-modulating components...</span
           >
         </p>

diff --git a/src/partials/contactmodal.html b/src/partials/contactmodal.html
@@ -32,9 +32,7 @@
             placeholder=" "
             required
           />
-          <label for="user-tel" class="modal__fr-label"
-            >Tel: (0xx-xxx-xx-xx)</label
-          >
+          <label for="user-tel" class="modal__fr-label">Tel:</label>
         </div>
       </div>
       <div class="modal__fr-field">
@@ -51,7 +49,7 @@
         </div>
       </div>
 
-      <button type="submit" class="modal__fr-btn">Submit</button>
+      <button type="submit" class="btn btn--centered">Submit</button>
     </form>
   </div>
 </div>

diff --git a/src/partials/header.html b/src/partials/header.html
@@ -52,7 +52,7 @@
       </nav>
       <button
         type="button"
-        class="header__btn-buy header__btn-buy--fixed"
+        class="btn btn--with-icon btn--reverse header__btn-buy header__btn-buy--fixed"
         data-modal-open
       >
         Buy now
@@ -68,7 +68,10 @@
             <use href="./images/icons-sprite.svg#icon-menu-cross"></use>
           </svg>
         </button>
-        <button type="button" class="header__btn-buy header__btn-buy--mobile">
+        <button
+          type="button"
+          class="btn btn--with-icon btn--reverse header__btn-buy header__btn-buy--mobile"
+        >
           Buy now
           <svg class="buy__btn-arrow" width="6" height="9">
             <use href="./images/icons-sprite.svg#icon-arrow-right-btn"></use>

diff --git a/src/partials/videomodal.html b/src/partials/videomodal.html
@@ -1,11 +1,7 @@
-<div class="video-backdrop is-hidden" data-hero-video>
-  <div class="videomodal">
-    <button
-      type="button"
-      class="videomodal__button-close"
-      id="close-video-modal"
-    >
-      <svg class="videomodal__icon-close" width="15" height="15">
+<div class="modal-backdrop is-hidden" data-hero-video>
+  <div class="modal modal--video">
+    <button type="button" class="modal__close-btn" id="close-video-modal">
+      <svg class="modal__close-icon" width="12" height="12">
         <use href="./images/icons-sprite.svg#icon-menu-cross"></use>
       </svg>
     </button>

diff --git a/src/sass/components/_about.scss b/src/sass/components/_about.scss
@@ -1,18 +1,33 @@
 .about {
   padding-top: var(--section-padding);
   background-color: var(--bg-color-light);
+  position: relative;
 
   @include tablet() {
     padding-bottom: 0;
   }
 }
 
 .about .container {
+  position: relative;
+  z-index: 2;
+}
+
+.about::before {
   @include desktop() {
+    content: "";
+    display: block;
+    width: 1200px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+
     background-image: url(../images/about/milk-bg-desk.png);
     background-size: 100%;
     background-repeat: no-repeat;
-    background-position: right 241px;
+    background-position: right 240px;
 
     @include retina() {
       background-image: url(../images/about/[email protected]);
@@ -34,22 +49,6 @@
 .about__wrap {
   min-width: 280px;
 
-  background-image: url(../images/about/milk-bg-mob.png);
-  background-repeat: no-repeat;
-  background-size: 100%;
-  background-position: right 395px;
-
-  @media screen and (min-width: 330px) {
-    background-position: right 380px;
-  }
-  @media screen and (min-width: 403px) {
-    background-position: right 357px;
-  }
-
-  @include retina() {
-    background-image: url(../images/about/[email protected]);
-  }
-
   @include tablet() {
     display: flex;
     flex-direction: row;
@@ -87,6 +86,15 @@
 .about__column--second {
   @include mobile-only() {
     padding-right: 60px;
+
+    background-image: url(../images/about/milk-bg-mob.png);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: right 25%;
+
+    @include retina() {
+      background-image: url(../images/about/[email protected]);
+    }
   }
 
   @include desktop() {

diff --git a/src/sass/components/_buttons.scss b/src/sass/components/_buttons.scss
@@ -2,7 +2,7 @@
     display: block;
     min-width: 161px;
     min-height: 44px;
-    padding: 14px 17px;
+    padding: 12px 17px;
 
     border: 0;
     border-radius: 22px;
@@ -78,6 +78,13 @@
     margin-left: auto;
 }
 
+.btn--animated {
+    animation-name: shadow-drop-center;
+    animation-duration: 2000ms;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
 .btn-round {
     width: 40px;
     height: 40px;

diff --git a/src/sass/components/_contactmodal.scss b/src/sass/components/_contactmodal.scss
@@ -9,15 +9,26 @@
 
 .modal__fr-input {
   width: 100%;
-  height: 40px;
+  padding: 10px;
+
+  @include font(400, 12px, 1.15, 0.04em);
   border: 1px solid rgba(33, 33, 33, 0.2);
   border-radius: 4px;
-  padding: 0 10px;
-  background-color: transparent;
-  outline: transparent;
   cursor: pointer;
+  outline: transparent;
+
   transition: border-color var(--transition-prop);
-  &:focus {
+
+  @include tablet-only() {
+    font-size: 14px;
+  }
+
+  @include desktop() {
+    font-size: 16px;
+  }
+
+  &:focus,
+  &:hover {
     border-color: var(--accent-color);
   }
 }
@@ -53,9 +64,9 @@
   top: -25%;
   left: 0;
   font-size: 12px;
+  color: var(--text-color-main);
 
   @include tablet() {
-    color: var(--text-color-main);
     font-size: 14px;
   }
 

diff --git a/src/sass/components/_header.scss b/src/sass/components/_header.scss
@@ -37,6 +37,12 @@
         justify-content: space-between;
         padding-top: 37px;
     }
+
+    & .header__btn-buy {
+        @include mobile-only() {
+            display: none;
+        }
+    }
 }
 .header.fixed .header-wrapper {
     padding-top: 3px;
@@ -73,46 +79,19 @@
 }
 
 .header__btn-buy {
-    justify-content: center;
-    align-items: center;
-    min-width: 160px;
-    min-height: 44px;
-    border-radius: 22px;
-    padding: 5px 10px;
-
-    background-color: #fff;
-    border: 0;
-
-    font-family: var(--font-main);
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 1.31;
-    color: var(--primary-color);
-
-    transition: background-color var(--transition-prop);
     animation-name: shadow-drop-center;
-    // change-color;
     animation-duration: 2000ms;
     animation-iteration-count: infinite;
     animation-direction: alternate;
 
-    &:hover,
-    &:focus {
-        background-color: #ecebeb;
-    }
-    @media screen and (max-width: 767px) {
-        display: none;
-    }
     @include desktop() {
         cursor: pointer;
     }
 
     &--mobile {
-        display: block;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 32px;
-        padding: 8px 16px;
         min-width: 209px;
 
         @include desktop() {
@@ -124,6 +103,8 @@
 .header.fixed .header__btn-buy--fixed {
     min-width: 114px;
     min-height: 34px;
+    padding-top: 9px;
+    padding-bottom: 9px;
 
     font-size: 12px;
 }

diff --git a/src/sass/components/_modals.scss b/src/sass/components/_modals.scss
@@ -40,6 +40,12 @@
     @include desktop() {
         padding: 32px;
     }
+
+    &--video {
+        width: 80%;
+        height: 80%;
+        padding: 35px;
+    }
 }
 
 .modal__close-btn {

diff --git a/src/sass/components/_products.scss b/src/sass/components/_products.scss
@@ -206,37 +206,6 @@
   }
 }
 
-// .products__btn {
-//   display: flex;
-//   @include centered();
-//   margin-left: auto;
-//   margin-right: auto;
-//   width: 40px;
-//   height: 40px;
-//   border-radius: 50%;
-//   border: none;
-//   background-color: #ffffff;
-//   cursor: pointer;
-//   transition: var(--transition-prop);
-
-//   &:hover,
-//   &:focus {
-//     background-color: var(--btn-accent-color);
-//   }
-// }
-
-// .products__btn-icon {
-//   fill: var(--btn-primary-color);
-
-//   transform: rotate(0);
-
-//   transition: transform var(--transition-prop);
-
-//   .arrow--turned & {
-//     transform: rotate(0.5turn);
-//   }
-// }
-
 .description {
   position: absolute;
   z-index: 1;
@@ -387,10 +356,6 @@
   color: #dd9312;
 }
 
-.description__list--ice-coffee li {
-  padding-bottom: 5px;
-}
-
 .description__list--milkshakes {
   color: #569256;
 }