Fix css encapsulation

Process and Logos components have the same css class name. Because of that, the logos take the style of the process, which we don't want. So we need to encasulate the process css for it to be only used by the process component.
1024pix · Oct 8, 2020 · f94d2da · f94d2da
1 parent b35d709
commit f94d2da
Showing 1 changed file with 142 additions and 142 deletions.
diff --git a/components/slices/Process.vue b/components/slices/Process.vue
@@ -161,191 +161,191 @@ export default {
   &__wrapper {
     padding: 48px 32px;
   }
-}
 
-.wrapper {
-  &__row {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    margin-bottom: 24px;
+  .wrapper {
+    &__row {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      margin-bottom: 24px;
 
-    &:last-child {
-      margin-bottom: 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
-  }
 
-  &__item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 24px;
-    width: 293px;
-    padding: 24px;
-    box-shadow: 0 24px 32px 0 rgba($black, 0.03),
-      0 8px 32px 0 rgba($black, 0.06);
-    border-radius: 20px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
+    &__item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 24px;
+      width: 293px;
+      padding: 24px;
+      box-shadow: 0 24px 32px 0 rgba($black, 0.03),
+        0 8px 32px 0 rgba($black, 0.06);
+      border-radius: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
 
-    img {
-      height: 51px;
-      width: 51px;
-    }
+      img {
+        height: 51px;
+        width: 51px;
+      }
 
-    p {
-      margin: 0;
+      p {
+        margin: 0;
+      }
     }
   }
-}
-
-.item {
-  &__title h1 {
-    width: 175px;
-    color: $grey-1;
-    font-size: 1.25rem;
-    letter-spacing: 0;
-    line-height: 30px;
-    font-weight: $font-semi-bold;
-    margin: 0 8px 16px 24px;
-  }
-
-  &__description {
-    width: 175px;
-    color: $grey-6;
-    font-size: 0.875rem;
-    letter-spacing: 0.009rem;
-    line-height: 22px;
-    margin-left: 24px;
-  }
-}
 
-@include device-is('tablet') {
-  .process {
+  .item {
     &__title h1 {
-      margin-top: 60px;
-    }
-
-    &__subtitle h3 {
-      top: 0;
-      margin-bottom: 48px;
+      width: 175px;
+      color: $grey-1;
+      font-size: 1.25rem;
+      letter-spacing: 0;
+      line-height: 30px;
+      font-weight: $font-semi-bold;
+      margin: 0 8px 16px 24px;
     }
 
-    &__wrapper {
-      flex-direction: row;
-      padding: 80px 0;
+    &__description {
+      width: 175px;
+      color: $grey-6;
+      font-size: 0.875rem;
+      letter-spacing: 0.009rem;
+      line-height: 22px;
+      margin-left: 24px;
     }
   }
 
-  .wrapper__item {
-    margin-bottom: 40px;
+  @include device-is('tablet') {
+    .process {
+      &__title h1 {
+        margin-top: 60px;
+      }
 
-    div:first-of-type {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
+      &__subtitle h3 {
+        top: 0;
+        margin-bottom: 48px;
+      }
 
-    img {
-      margin-bottom: 24px;
+      &__wrapper {
+        flex-direction: row;
+        padding: 80px 0;
+      }
     }
-  }
-}
 
-@include device-is('desktop') {
-  .process {
-    &__title h1 {
-      margin-top: 60px;
-    }
+    .wrapper__item {
+      margin-bottom: 40px;
 
-    &__wrapper {
-      padding: 80px 0 84px;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-around;
+      div:first-of-type {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      img {
+        margin-bottom: 24px;
+      }
     }
   }
 
-  .wrapper {
-    &__row {
-      flex-direction: row;
-      justify-content: center;
-      align-items: baseline;
+  @include device-is('desktop') {
+    .process {
+      &__title h1 {
+        margin-top: 60px;
+      }
+
+      &__wrapper {
+        padding: 80px 0 84px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+      }
     }
 
-    &__item {
-      &:first-of-type {
-        margin-left: 56px;
+    .wrapper {
+      &__row {
+        flex-direction: row;
+        justify-content: center;
+        align-items: baseline;
       }
 
-      padding: 32px 24px 56px 24px;
-      height: 273px;
+      &__item {
+        &:first-of-type {
+          margin-left: 56px;
+        }
 
-      display: block;
-      margin-right: 56px;
-      margin-bottom: 0;
-      text-align: center;
-      height: 100%;
+        padding: 32px 24px 56px 24px;
+        height: 273px;
 
-      img {
-        margin-right: 0;
+        display: block;
+        margin-right: 56px;
+        margin-bottom: 0;
+        text-align: center;
+        height: 100%;
+
+        img {
+          margin-right: 0;
+        }
       }
     }
-  }
 
-  .item {
-    &__title h1 {
-      width: 245px;
-      font-size: 1.25rem;
-      margin-left: 0;
-    }
+    .item {
+      &__title h1 {
+        width: 245px;
+        font-size: 1.25rem;
+        margin-left: 0;
+      }
 
-    &__description {
-      margin-top: 8px;
-      width: 245px;
-      margin-left: 0;
+      &__description {
+        margin-top: 8px;
+        width: 245px;
+        margin-left: 0;
+      }
     }
   }
-}
 
-@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;
-  }
+  @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;
+    }
 
-  .wrapper {
-    &__item {
-      &:first-of-type {
-        margin-left: 0;
-      }
+    .wrapper {
+      &__item {
+        &:first-of-type {
+          margin-left: 0;
+        }
 
-      max-width: 293px;
-      padding: 32px 24px 50px 24px;
-      text-align: center;
-      height: 100%;
+        max-width: 293px;
+        padding: 32px 24px 50px 24px;
+        text-align: center;
+        height: 100%;
 
-      img {
-        height: 51px;
-        width: 51px;
-      }
+        img {
+          height: 51px;
+          width: 51px;
+        }
 
-      &:last-of-type {
-        margin-right: 0;
+        &:last-of-type {
+          margin-right: 0;
+        }
       }
     }
-  }
 
-  .item {
-    &__description {
-      margin-top: 8px;
-      width: 245px;
+    .item {
+      &__description {
+        margin-top: 8px;
+        width: 245px;
+      }
     }
   }
 }