Refactor template BEM architecture and associated CSS files

1024pix · Oct 16, 2020 · eb4d9bf · eb4d9bf
1 parent 3a9382a
commit eb4d9bf
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 55 deletions.
diff --git a/assets/scss/components/slices/features.scss b/assets/scss/components/slices/features.scss
@@ -26,7 +26,9 @@
       margin-bottom: 0;
     }
   }
+}
 
+.features-wrapper-row {
   &__item {
     display: flex;
     align-items: center;
@@ -43,22 +45,19 @@
       height: 62px;
       width: 55px;
     }
-
-    p {
-      margin: 0;
-    }
   }
 }
 
-.features-wrapper-item {
-    &__title h1 {
+.features-wrapper-row-item {
+
+    &__title h3 {
       width: 217px;
       color: $grey-45;
       font-size: 1rem;
       letter-spacing: 0;
       line-height: 30px;
       font-weight: 600;
-      margin-top: 0;
+      margin-top: 16px;
     }
 
     &__description {
@@ -80,7 +79,7 @@
     }
   }
 
-  .features-wrapper {
+  .features-wrapper-row {
     &__item {
       margin-bottom: 40px;
 
@@ -92,8 +91,9 @@
     }
   }
 
-  .features-wrapper-item {
-    &__title h1 {
+  .features-wrapper-row-item {
+
+    &__title h3 {
       width: 518px;
       font-size: 1.25rem;
     }
@@ -121,7 +121,9 @@
       justify-content: center;
       align-items: baseline;
     }
+  }
 
+  .features-wrapper-row {
     &__item {
       display: block;
       margin-right: 98px;
@@ -133,8 +135,9 @@
     }
   }
 
-  .features-wrapper-item {
-    &__title h1 {
+  .features-wrapper-row-item {
+
+    &__title h3 {
       width: 200px;
       font-size: 1.25rem;
     }
@@ -156,7 +159,7 @@
     }
   }
 
-  .features-wrapper {
+  .features-wrapper-row {
     &__item {
       margin-right: 76px;
       text-align: center;
@@ -168,8 +171,9 @@
     }
   }
 
-  .features-wrapper-item {
-    &__title h1 {
+  .features-wrapper-row-item {
+
+    &__title h3 {
       width: 294px;
     }
 

diff --git a/assets/scss/components/slices/process.scss b/assets/scss/components/slices/process.scss
@@ -38,7 +38,9 @@
       margin-bottom: 0;
     }
   }
+}
 
+.process-wrapper-row {
   &__item {
     display: flex;
     align-items: center;
@@ -58,22 +60,19 @@
       height: 51px;
       width: 51px;
     }
-
-    p {
-      margin: 0;
-    }
   }
 }
 
-.process-wrapper-item {
+.process-wrapper-row-item {
+
   &__title h3 {
     width: 175px;
     color: $grey-45;
     font-size: 1.25rem;
     letter-spacing: 0;
     line-height: 30px;
     font-weight: $font-semi-bold;
-    margin: 0 8px 16px 24px;
+    margin: 0 8px 0 24px;
   }
 
   &__description {
@@ -83,6 +82,10 @@
     letter-spacing: 0.009rem;
     line-height: 22px;
     margin-left: 24px;
+
+    p {
+      margin: 0;
+    }
   }
 }
 
@@ -103,17 +106,25 @@
     }
   }
 
-  .process-wrapper__item {
-    margin-bottom: 40px;
+  .process-wrapper-row {
+    &__item {
+      margin-bottom: 40px;
 
-    div:first-of-type {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+      div:first-of-type {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      img {
+        margin-bottom: 24px;
+      }
     }
+  }
 
-    img {
-      margin-bottom: 24px;
+  .process-wrapper-row-item {
+    &__title h3 {
+      margin-bottom: 8px;
     }
   }
 }
@@ -138,7 +149,9 @@
       justify-content: center;
       align-items: baseline;
     }
+  }
 
+  .process-wrapper-row {
     &__item {
       &:first-of-type {
         margin-left: 56px;
@@ -156,7 +169,8 @@
     }
   }
 
-  .process-wrapper-item {
+  .process-wrapper-row-item {
+
     &__title h3 {
       width: 245px;
       font-size: 1.25rem;
@@ -172,16 +186,18 @@
 }
 
 @include device-is('large-screen') {
-  .process__wrapper {
-    padding: 0 98px 60px 98px;
-    width: 100%;
-    display: flex;
-    align-items: stretch;
-    flex-wrap: wrap;
-    justify-content: space-around;
+  .process {
+    &__wrapper {
+      padding: 0 98px 60px 98px;
+      width: 100%;
+      display: flex;
+      align-items: stretch;
+      flex-wrap: wrap;
+      justify-content: space-around;
+    }
   }
 
-  .process-wrapper {
+  .process-wrapper-row {
     &__item {
       &:first-of-type {
         margin-left: 0;
@@ -192,18 +208,19 @@
       text-align: center;
       height: 100%;
 
+      &:last-of-type {
+        margin-right: 0;
+      }
+
       img {
         height: 51px;
         width: 51px;
       }
-
-      &:last-of-type {
-        margin-right: 0;
-      }
     }
   }
 
-  .process-wrapper-item {
+  .process-wrapper-row-item {
+
     &__description {
       margin-top: 8px;
       width: 245px;

diff --git a/assets/scss/components/slices/statistics.scss b/assets/scss/components/slices/statistics.scss
@@ -3,11 +3,10 @@
     color: $grey-90;
     font-size: 1.75rem;
     font-weight: normal;
-    height: 80px;
     letter-spacing: 0.15px;
     line-height: 40px;
     text-align: center;
-    margin-top: 48px;
+    margin: 60px 0 64px 0;
   }
 
   &__subtitle h3 {
@@ -22,7 +21,7 @@
   }
 
   &__wrapper {
-    padding: 0 34px;
+    padding: 0 34px 61px 34px;
   }
 }
 
@@ -36,7 +35,9 @@
       margin-bottom: 0;
     }
   }
+}
 
+.statistics-wrapper-row {
   &__item {
     height: 196px;
     width: 100%;
@@ -49,14 +50,11 @@
       margin-right: 0;
       margin-bottom: 32px;
     }
-
-    p {
-      margin: 0;
-    }
   }
 }
 
-.statistics-wrapper-item {
+.statistics-wrapper-row-item {
+
   &__title h3 {
     width: 293px;
     color: $grey-90;
@@ -76,6 +74,10 @@
     letter-spacing: 0;
     line-height: 32px;
     margin-top: 5px;
+
+    p {
+      margin: 0;
+    }
   }
 }
 
@@ -99,7 +101,7 @@
     }
   }
 
-  .statistics-wrapper {
+  .statistics-wrapper-row {
     &__item {
       margin-bottom: 61px;
     }

diff --git a/components/slices/MultipleBlock.vue b/components/slices/MultipleBlock.vue
@@ -20,16 +20,16 @@
         <div
           v-for="(item, itemIndex) in itemsByRow"
           :key="`item-${itemIndex}`"
-          :class="`${blockClass}-wrapper__item`"
+          :class="`${blockClass}-wrapper-row__item`"
         >
           <pix-image v-if="hasImage(item)" :field="item.item_image" />
           <div>
             <prismic-rich-text
-              :class="`${blockClass}-wrapper-item__title`"
+              :class="`${blockClass}-wrapper-row-item__title`"
               :field="item.item_title"
             />
             <prismic-rich-text
-              :class="`${blockClass}-wrapper-item__description`"
+              :class="`${blockClass}-wrapper-row-item__description`"
               :field="item.item_description"
             />
           </div>