Code cleanup. WIP #2738

diff --git a/resources/styles/components/carrousel.styl b/resources/styles/components/carrousel.styl
index e951b48ee111c7d4f16a40bc16b2bd34b02cb8fc..58db0c0af00088a81f787e8dd993bd16336f18e7 100644 (file)
--- a/resources/styles/components/carrousel.styl
+++ b/resources/styles/components/carrousel.styl
@@ -1,54 +1,43 @@
-.slider-container
-
-
-  $h3 = 24px
-  $h2 = 36px
-  $barlow = 'Barlow', sans-serif
-  $muli = 'Muli', sans-serif
-  $dark = #6B7287
-  $lightgrey = #F7F8FC
-  $darkblue = #152F4E
-  $lightblue = #0EAADA
-  $verylightgrey = #E7E9F3
-  $controlSize = 60px;
+$breakpoint-carousel = 768px
 
-  opacity 0;
-  transition opacity 250ms
+.slider-container
+  opacity: 0
+  transition: opacity 250ms
 
   &.visible
-    opacity: 1;
+    opacity: 1
 
   .column-wrapper.hide
-    display none
+    display: none
 
   .arrow
     cursor: pointer
 
   .home-arrow-left
-    position: absolute;
-    top: 50%;
-    left: 2%;
-    z-index 99
-    @media (max-width 769px)
+    position: absolute
+    top: 50%
+    left: 2%
+    z-index: 99
+    +below($breakpoint-carousel)
       top: 88.5%
       left 5%
 
   .home-arrow-right
-    position: absolute;
-    top: 50%;
-    right: 2%;
+    position: absolute
+    top: 50%
+    right: 2%
     z-index 99
-    @media (max-width 769px)
+    +below($breakpoint-carousel)
       top: 88.5%
       right 5%
 
   .column-wrapper.active
-    display grid
+    display: grid
 
   .slide-img
     position: absolute
-    width: 100%;
-    overflow: hidden;
+    width: 100%
+    overflow: hidden
 
   .img-slider
     position: absolute
@@ -57,91 +46,91 @@
 
   .slider
     width: 100%
-    position relative
-    height 620px
-    @media (max-width 769px)
-      height calc(100vh - 134px)
-      overflow hidden
+    position: relative
+    height: 620px
+    +below($breakpoint-carousel)
+      height: calc(100vh - 134px)
+      overflow: hidden
 
   .slide
     width: 100%
     min-height: 100%
-    @media (max-width 769px)
-      overflow hidden
+    +below($breakpoint-carousel)
+      overflow: hidden
 
   .slide-mask
-    overflow hidden
-    height 100%
-    position relative
-    max-height 720px
+    overflow: hidden
+    height: 100%
+    position: relative
+    max-height: 720px
 
   .slider-indicator
-    position absolute
-    bottom 60px
-    @media (max-width 769px)
+    position: absolute
+    bottom: 60px
+    +below($breakpoint-carousel)
       left: 50%
       transform: translateX(-50%)
 
     ul
-      display flex
-      align-items: center;
-      @media (max-width 769px)
+      display: flex
+      align-items: center
+      +below($breakpoint-carousel)
         padding-left: 0 !important
 
   .slider-position
     width: 6px
-    height 6px
+    height: 6px
     background: #6B7287
-    border-radius 50%
+    border-radius: 50%
     margin-right: 10px
-    transition all 400ms ease-in-out
+    transition: all 400ms ease-in-out
     cursor: pointer
 
   .active-indicator
     width: 10px
-    height 10px
+    height: 10px
     background: white
-    transition all 400ms ease-in-out
+    transition: all 400ms ease-in-out
 
   .slide.column-wrapper
-    @media only screen and (max-width: 768px)
-      grid-template-columns: 1fr;
-      grid-auto-columns: 1fr;
-      grid-auto-flow: column;
+    +below($breakpoint-carousel)
+      grid-template-columns: 1fr
+      grid-auto-columns: 1fr
+      grid-auto-flow: column
 
   img
-    max-width unset !important
+    max-width: unset !important
 
   .slide-img-container
-    @media (max-width: 769px)
-      display none
+    +below($breakpoint-carousel)
+      display: none
 
   .mobile-bg
     position: absolute
-    background-repeat no-repeat
-    background-size cover
+    background-repeat: no-repeat
+    background-size: cover
     top: 0
     left: 0
     right: 0
     bottom: 0
     opacity: 0.3
-    height 110%
-    z-index: 0;
+    height: 110%
+    z-index: 0
 
-    @media only screen and (min-width: 769px)
+    +above($breakpoint-carousel)
       display: none
 
 
   .slide-txt
-    @media only screen and (max-width: 769px)
-      margin-bottom 0 !important
+    +below($breakpoint-carousel)
+      margin-bottom: 0 !important
 
   .text-block
-    z-index 1
-    position relative
-    @media (max-width: 769px)
-      padding 0 5vw !important
+    z-index: 1
+    position: relative
+    +below($breakpoint-carousel)
+      padding: 0 5vw !important
 
-  @media only screen and (max-width: 769px)
-    padding 0 !important
+  +below($breakpoint-carousel)
+    padding: 0 !important
 

diff --git a/resources/styles/components/mmenu.styl b/resources/styles/components/mmenu.styl
index 79446ab2bf7be6bea02b12cee89ca38cf98761dc..eb4cc17034483ac55ec8cfe714f8a42f2d359016 100644 (file)
--- a/resources/styles/components/mmenu.styl
+++ b/resources/styles/components/mmenu.styl
@@ -1,68 +1,68 @@
 +below($breakpoint-menu)
   #mobile-menu-icon
-    --transition-duration 500ms
+    --transition-duration: 500ms
 
     display: block !important
     cursor: pointer
     flex-shrink: 0
-    position fixed
-    top 45px
-    z-index 10000
-    transition top var(--transition-duration)
+    position: fixed
+    top: 45px
+    z-index: 10000
+    transition: top var(--transition-duration)
 
 
-    &.minimized
-      top 8px;
+    .header-minimized &
+      top: 8px
 
     .nav-icon
-      position: fixed;
-      width: 30px;
-      left 5vw
-      transition left var(--transition-duration)
+      position: fixed
+      width: 30px
+      left: 5vw
+      transition: left var(--transition-duration)
 
       .mm-body--open &
-        left var(--mm-item-indent)
+        left: var(--mm-item-indent)
 
       .mm--subopen.mm-body--open &
-        left var(--mm-item-indent)
+        left: var(--mm-item-indent)
 
         &:after, &:before
-          width 17px
+          width: 17px
 
         &:after
-          transform: translateY(-6px) rotate(-135deg);
+          transform: translateY(-6px) rotate(-135deg)
 
         &:before
-          transform: translateY(6px) rotate(135deg);
+          transform: translateY(6px) rotate(135deg)
 
 
       &:after, &:before, div
-        width 30px
-        background-color: #c4cad2;
+        width: 30px
+        background-color: #c4cad2
+        content: ''
+        display: block
+        height: 2px
+        margin: 10px 0
+        transition: all var(--transition-duration) ease-in-out
 
         .mm-body--open &
           background-color: theme('colors.navy')
-        content: '';
-        display: block;
-        height: 2px;
-        margin: 10px 0;
-        transition: all var(--transition-duration) ease-in-out;
 
       &:after
-        width 15px
+        width: 15px
 
       &:before
         .mm-body--open &
-          transform: translateY(12px) rotate(135deg);
+          transform: translateY(12px) rotate(135deg)
 
       &:after
         .mm-body--open &
-          transform: translateY(-12px) rotate(-135deg);
-          width 100%
+          transform: translateY(-12px) rotate(-135deg)
+          width: 100%
 
       div
         .mm-body--open &
-          transform scale(0)
+          transform: scale(0)
 
 
 #mobile-menu-icon
@@ -70,34 +70,34 @@
   font-family: theme('fontFamily.display')
   font-weight: 400
   color: #152f4e
-  --mm-item-indent: 30px;
+  --mm-item-indent: 30px
   --mm-item-height: var(--header-height)
   --mm-item-item-height: 65px
 
   .mm--close
-    padding 0
-    height: var(--header-height);
-    position: absolute;
-    top 0
-    left 0
+    padding: 0
+    height: var(--header-height)
+    position: absolute
+    top: 0
+    left: 0
     width: 100% !important
-    z-index: 0;
-    cursor pointer
+    z-index: 0
+    cursor: pointer
 
     .mm--subopen &
-      display none
+      display: none
 
   &.mm--main
     &:after
-      text-indent 60px
-      pointer-events none
+      text-indent: 60px
+      pointer-events: none
 
   &:after
-    opacity 1
-    text-indent 30px
+    opacity: 1
+    text-indent: 30px
 
   &:before
-    display none
+    display: none
 
   ul.mm--open
     &.mm--parent
@@ -121,12 +121,12 @@
 
   li
     svg
-      display inline
-      margin-right: 10px;
-      margin-top: -2px;
+      display: inline
+      margin-right: 10px
+      margin-top: -2px
 
     &:after
-      margin-left 0
+      margin-left: 0
 
     &:before
-      opacity: 1;
+      opacity: 1

diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index 8f6875329d9a2b3b592c75347bf85f6593c28f4c..02caa759312c7fda673e861004d8bf508f84354f 100644 (file)
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -45,7 +45,6 @@
                         </column>
 
                     </div>
-                    @break
                 @endforeach
                 <div class="slider-indicator">
                     <ul class="pl-2v">