loader ajax

user/themes/figureslibres/scss/theme/_start.scss

@@ -2,28 +2,95 @@
   box-sizing: border-box;
 }
 
-html, body, header{
-  background: #f9f9f9fe;
+.loader{
+  display: none;
+  background-image: url('/user/themes/figureslibres/images/ajax-loader.gif');
+  background-size: 10px 10px;
+  background-position: center;
+  background-repeat: no-repeat;
+  vertical-align: middle;
+  margin-left: 10px;
+  width: 10px;
+  height: 10px;
 }
 
+.card{
+  .loader{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    z-index: 999;
+    margin-left: 0;
+  }
+}
+
+html, body{
+  background: #f9f9f9fe;
+}
+img.lazy{
+  display: block;
+}
 body{
   #start{
-      width: $Wi50;
+      width: $Wi80;
       margin: $marg auto auto $marg;
       #text_figli{
         p {
           a{
-            // position: relative;
+            #icone_list{
+              opacity: 0;
+              margin-left: -30px;
+              z-index: 999;
+              position: relative;
+              display: inline-block;
+              .hamburger{
+                padding: 0;
+                margin-left: 10px;
+                .hamburger-box{
+                  vertical-align: middle;
+                }
+              }
+            }
             &.marg{
               margin-right: $marg;
             }
+            &.open{
+              #icone_list{
+                z-index: 999;
+                position: relative;
+                display: inline-block;
+                margin-left: 0px;
+                opacity: 1;
+                transition: 0.5s margin-left, 0.5s opacity;
+                .hamburger{
+                  padding: 0;
+                  margin-left: 10px;
+                  &.hamburger--slider{
+                    .hamburger-inner{
+                      transform: translate3d(0,5px,0) rotate(45deg);
+                      transition: 0.8s 0.2s transform;
+                      &:after{
+                        transform: translate3d(0,-10px,0) rotate(90deg);
+                        transition: 1s 0.2s transform;
+                      }
+                    }
+                  }
+                  .hamburger-box{
+                    vertical-align: middle;
+                  }
+                }
+              }
+            }
           }
         }
         #item_list{
           width: 80vw;
           margin-top: 0.5rem;
+          position: relative;
         .card{
           width: calc((100% / 5) - ( #{$marg} * 2) );
+          min-width: 250px;
           display: inline-block;
           vertical-align: top;
           position: relative;
@@ -84,6 +151,7 @@ body{
             padding: 2rem;
             margin-top: $marg;
             border-radius: 5px;
+            position: relative;
             .content-title{
               margin: 0 auto 0 auto;
               display: flex;
@@ -112,6 +180,12 @@ body{
             &.culturelle{
               background: $color_culturelle;
             }
+            #icone_list{
+              position: absolute;
+              top: 0px;
+              right: 0;
+              line-height: 0;
+            }
           }
         }
         &.publique{
@@ -141,6 +215,17 @@ body{
             }
           }
         }
+        &.commanditaires{
+          columns: 4 150px;
+          -webkit-column-gap: 2em;
+          -moz-column-gap: 2em;
+          column-gap: 2em;
+          display: block;
+          p{
+            font-size: 1rem;
+            line-height: 1.2rem;
+          }
+        }
       }
     }
   }
@@ -150,3 +235,35 @@ body{
     }
   }
 }
+
+#icone_list{
+  .hamburger{
+    padding: 0.8rem;
+    .hamburger-box{
+      width: 18px;
+      height: 12px;
+      .hamburger-inner{
+        height: 2px;
+        width: 18px;
+        &::before{
+          width: 15px;
+          height: inherit;
+          top: 5px;
+        }
+        &::after{
+          top: 10px;
+          height: inherit;
+          width: inherit;
+        }
+      }
+    }
+    &.hamburger--slider.is-active{
+      .hamburger-inner{
+        transform: translate3d(0, 5px, 0) rotate(45deg);
+        &::after  {
+          transform: translate3d(0, -10px, 0) rotate(-90deg);
+        }
+      }
+    }
+  }
+}