Readapt the misuse of BEM, Code organization

- -- is only for a modifier, not a child "child". Use master__child without the parent__ in it to make it more readable. https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/ - Redefine atom design components
2020-02-29 18:32:32 +01:00
parent 70ce97e9bc
commit 76c8c31c89
17 changed files with 387 additions and 391 deletions
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -0,0 +1,123 @@
+/* ==========================================================================
+   FOOTER
+========================================================================== */
+.footer {
+    background-color: #2D0458;
+
+    .wrap {
+        display: block;
+        padding-top: 48px;
+        padding-bottom: 32px;
+
+        @include breakpoint (sm) {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 120px;
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    }
+
+    // Left part
+    &__left {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 40px;
+
+        @include breakpoint (sm) {
+            margin: 0;
+        }
+    }
+
+    // Right part
+    &__right {
+        font-size: 14px;
+        text-align: center;
+
+        @include breakpoint (sm) {
+            display: flex;
+            align-items: baseline;
+        }
+
+        li {
+            display: block;
+            text-align: center;
+            height: 100%;
+
+            & > ul {
+                display: flex;
+                justify-content: center;
+                margin-bottom: 32px;
+
+                @include breakpoint (sm) {
+                    margin-bottom: 0;
+                    margin-right: 24px;
+                }
+
+                li {
+                    margin: 0 20px;
+                }
+
+                a {
+                    display: block;
+                }
+            }
+        }
+
+        a {
+            position: relative;
+            color: #fff;
+            text-decoration: none;
+            transition: color 85ms $ease-inout;
+
+            img {
+                margin-right: 16px;
+            }
+
+            // Hover
+            &:hover {
+                color: $color-secondary;
+            }
+        }
+
+        // Instagram
+        .instagram {
+            a {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+            }
+            img {
+                display: block;
+            }
+        }
+
+        // Collective
+        .cetrucflotte {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+
+            span {
+                color: rgba(#fff, 0.4)
+            }
+
+            img {
+                display: block;
+                margin: 3px 0 0 12px;
+                transition: transform 400ms $ease-quart;
+                will-change: transform;
+
+                @include breakpoint (sm) {
+                    margin-left: 16px;
+                }
+            }
+
+            // Hover
+            a:hover img {
+                transform: scale(1.04);
+            }
+        }
+    }
+}