From 5208b2b5c837dfb2532a57804bef5b41d21c96b0 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Thu, 19 Mar 2020 12:33:48 +0000 Subject: [PATCH] Responsive adjustments + tidy up. Wait #3470 @2.5 --- .../assets/styles/common/global.styl | 5 ++ .../assets/styles/common/mixins.styl | 9 ++ .../styles/components/slick-carousel.styl | 76 +++++++++++++++++ .../resources/assets/styles/main.styl | 2 +- .../styles/widgets/resource-carousel.styl | 17 +++- .../assets/styles/widgets/video-carousel.styl | 82 ------------------- 6 files changed, 105 insertions(+), 86 deletions(-) create mode 100644 wp-content/themes/physioassist/resources/assets/styles/components/slick-carousel.styl diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl index 7a7bb327..d9f94b04 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl @@ -102,3 +102,8 @@ p:not(:last-of-type) // Override text colour (previously only for home, now it's white in all uses) path, rect fill: #fff + + +//-- Elementor Lightbox customisations +.dialog-type-lightbox + background-color: rgba($colors.dark-blue, 0.9) diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl b/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl index 092d2068..911c83b7 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl @@ -12,6 +12,15 @@ constrain(property, value = $horizontal-gutter, max-width = $content-max-width) {property}: $max } } + + // Prevent vw / % units from getting too small + +below(700px) { + // Only do this if we are dealing with a percentage or vw unit + if (unit(value) is '%' || unit(value) is 'vw') { + $min = 700px * unit(value / 100, '') // Convert percentage to a decimal + {property}: round($min) + } + } } // Apply percentage based vertical padding - defaults to global gutter value if nothing passed diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/slick-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/components/slick-carousel.styl new file mode 100644 index 00000000..573b5927 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/styles/components/slick-carousel.styl @@ -0,0 +1,76 @@ +//=== Shared Slick overrides +.slick-slider + padding: 0 80px + overflow-x: hidden // For some reason on smaller screens, the right arrow causes a horizontal scroll + + +below(768px) + padding: 0 60px + margin: 0 -25px // Give a bit more space to content even though this pushes arrows closer to edges + +below(500px) + padding: 0 40px + + + .slick-slide + outline: none + + .slick-arrow, .slick-arrow:focus + background: $colors.light-grey + border-radius: 50% + font-size: 56px + line-height: 1.25 + width: 1.25em + height: @width + text-align: center + transition: all 0.2s ease-out + + +below(768px) + font-size: 45px + +below(500px) + font-size: 35px + + &:before + display: inline-block + color: $colors.headings + font-size: 1em + opacity: 1 + transition: inherit + position: relative + top: -0.02em + + &:hover + background: $colors.headings + &:before + color: #fff + + + .slick-prev + left: 0 + .slick-next + right: 0 + + + ul.slick-dots + position: relative + bottom: 0 + white-space: nowrap + constrain(margin-top, 2.5vw) + + li + &:not(:last-child) + margin-right: 11px + + button + width: 18px + height: @width + + &:before + content: '' + width: 100% + height: @width + border-radius: 50% + background-color: #dbdcdf + opacity: 1 !important + + &.slick-active + button:before + background-color: #1f8ccc diff --git a/wp-content/themes/physioassist/resources/assets/styles/main.styl b/wp-content/themes/physioassist/resources/assets/styles/main.styl index 3e85e4ae..c7d0e6d1 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/main.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/main.styl @@ -13,7 +13,7 @@ @import '~lity/dist/lity.css' @import 'components/lity-lightbox' -// @import 'components/svg' +@import 'components/slick-carousel' @import 'components/headings' @import 'components/buttons' @import 'components/navigation' diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl index 82e5c257..d80dc84d 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl @@ -1,8 +1,14 @@ +$breakpoint-resource-carousel = 500px + .resource-carousel &-item-content display: flex + +below($breakpoint-resource-carousel) + flex-wrap: wrap + text-align: center + &-image flex: 0 1 auto display: block @@ -10,9 +16,11 @@ max-width: 35% !important box-shadow: -4px 6px 10px -2px rgba(0,0,0,0.4) !important margin-left: 30px !important + margin-bottom: 20px !important // Slick has overflow-hidden so we need this to stop drop-shadow being cropped - +below(680px) - margin-left: 0 + +below($breakpoint-resource-carousel) + max-width: none !important + margin: 0 auto 20px !important &-text flex: 1 1 auto @@ -28,11 +36,14 @@ line-height: 1.2 &-link - display: block + display: inline-block position: relative margin-top: 1.4em padding-left: 1em + +below($breakpoint-resource-carousel) + margin-top: 0 + svg position: absolute top: 0.425em diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl index d582679b..6f00e462 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl @@ -46,85 +46,3 @@ &-details color: $colors.sub-headings - - -// Slick overrides -.slick-slider - padding: 0 80px - overflow-x: hidden // For some reason on smaller screens, the right arrow causes a horizontal scroll - - +below(768px) - padding: 0 60px - +below(500px) - padding: 0 40px - - - .slick-slide - outline: none - - .slick-arrow, .slick-arrow:focus - width: auto - background: $colors.light-grey - border-radius: 50% - font-size: 56px - line-height: 1.25 - width: 1.25em - height: @width - text-align: center - transition: all 0.2s ease-out - - +below(768px) - font-size: 45px - +below(500px) - font-size: 35px - - &:before - display: inline-block - color: $colors.headings - font-size: 1em - opacity: 1 - transition: inherit - position: relative - top: -0.02em - - &:hover - background: $colors.headings - &:before - color: #fff - - - .slick-prev - left: 0 - .slick-next - right: 0 - - - ul.slick-dots - position: relative - bottom: 0 - constrain(margin-top, 2.5vw) - - li - &:not(:last-child) - margin-right: 11px - - button - width: 18px - height: @width - - &:before - content: '' - width: 100% - height: @width - border-radius: 50% - background-color: #dbdcdf - opacity: 1 !important - - &.slick-active - button:before - background-color: #1f8ccc - - -//=== Elementor Lightbox customisations -.dialog-type-lightbox - background-color: rgba($colors.dark-blue, 0.9) -- 2.39.5