From: Stephen Cameron Date: Mon, 9 Sep 2019 16:13:24 +0000 (+0200) Subject: Code cleanup. WIP #2738 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=148316d51dff8a0df47f34e01ef6bb0b3ca9c7bf;p=pmi.git Code cleanup. WIP #2738 --- diff --git a/resources/styles/components/carrousel.styl b/resources/styles/components/carrousel.styl index e951b48..58db0c0 100644 --- 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 79446ab..eb4cc17 100644 --- 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 8f68753..02caa75 100644 --- a/resources/views/pages/home.blade.php +++ b/resources/views/pages/home.blade.php @@ -45,7 +45,6 @@ - @break @endforeach