From e21c5ac1c173416c988579cdf3131d330bce4cf9 Mon Sep 17 00:00:00 2001 From: Tetrakern <26898880+Tetrakern@users.noreply.github.com> Date: Wed, 30 Oct 2024 20:36:37 +0100 Subject: [PATCH] Revert "Remove Splide slider outset" This reverts commit 236775fcd107fe6ebce79fb19f2ec886f0ef0773. --- css/splide.css | 2 +- src/scss/splide.scss | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/css/splide.css b/css/splide.css index 7c22ee66..aa30d0d1 100644 --- a/css/splide.css +++ b/css/splide.css @@ -1 +1 @@ -@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.splide{--this-arrow-size: clamp(20px, 6.25vw - 0px, 40px);width:100%;max-width:100vw;padding-top:var(--this-arrow-vertical-padding, 0px);padding-left:calc(var(--this-arrow-horizontal-padding, 0px));padding-bottom:var(--this-arrow-vertical-padding, 0px);padding-right:calc(var(--this-arrow-horizontal-padding, 0px) + var(--this-pagination-side-padding, 0px))}.splide._splide-placeholder{visibility:visible}.splide._splide-placeholder:not(.showcase) .splide__slide:first-child{width:100%}.splide:is(.splide--ttb,._list) .splide__slide{height:auto !important}.splide:is(.splide--ttb,._list) .splide__track{padding:0 !important}.splide:has(.splide__pagination){--this-arrow-offset: 16px}.splide:has(.splide__arrows){--this-arrow-horizontal-padding: calc(var(--this-arrow-size))}.splide:has(.splide__arrows--ttb){--this-arrow-offset: 0px;--this-arrow-horizontal-padding: 0px;--this-arrow-vertical-padding: calc(var(--this-arrow-size))}.splide:has(.splide__pagination--ttb){--this-pagination-side-padding: 24px}.splide:has(.splide__pagination--ttb) .splide__arrow--next{right:16px}.splide__track{padding:0 0 var(--this-pagination-vertical-padding, 16px) !important}.splide.article-card-block.is-overflow .splide__track{--this-pagination-vertical-padding: 0px}.splide.article-card-block.is-overflow .splide__track .splide__pagination:not(.splide__pagination--ttb){margin-top:16px}.splide__arrow{position:absolute;z-index:10;top:calc(50% - var(--this-arrow-offset, 0px));display:grid;place-content:center;height:calc(var(--this-arrow-size)*2);width:var(--this-arrow-size);transition:color .15s ease-in-out}.splide__arrow--prev{left:0;transform:translateY(-50%) scale(-1, 1)}.splide__arrow--next{right:0;transform:translateY(-50%)}.splide__arrow svg{height:calc(var(--this-arrow-size)*.675);width:calc(var(--this-arrow-size)*.675);fill:var(--splide-arrow);transition:fill .15s}.splide__arrow:hover svg{fill:var(--splide-arrow-hover)}.splide__arrow:active svg{fill:var(--splide-arrow-active)}.splide__arrows--ttb .splide__arrow{top:unset;left:50%;right:unset;transform:translateX(-50%) rotate(-90deg);height:var(--this-arrow-size)}.splide__arrows--ttb .splide__arrow--prev{top:0}.splide__arrows--ttb .splide__arrow--next{bottom:0;transform:translateX(-50%) rotate(90deg)}.splide__pagination{display:flex;align-items:flex-start;flex-wrap:wrap}.splide__pagination li{display:block}.splide__pagination button{--this-background: var(--splide-pagination);cursor:pointer;position:relative;display:block;padding:8px;transition:background-color .15s;contain:strict}.splide__pagination button::after{content:"";position:absolute;inset:4px;display:block;background:var(--this-background);border-radius:50%}.splide__pagination button.is-active{--this-background: var(--splide-pagination-active)}.splide__pagination button:where(:not(.is-active)):hover{--this-background: var(--splide-pagination-hover, var(--splide-pagination))}.splide__pagination--ttb{position:absolute;top:50%;right:0;flex-direction:column;transform:translateY(-50%)} +@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.splide{--this-arrow-size: clamp(20px, 6.25vw - 0px, 40px);--this-outset: 6px;width:calc(100% + 2*var(--this-outset));max-width:100vw;transform:translateX(calc(-1 * var(--this-outset)));padding-top:var(--this-arrow-vertical-padding, 0px);padding-left:calc(var(--this-arrow-horizontal-padding, 0px));padding-bottom:var(--this-arrow-vertical-padding, 0px);padding-right:calc(var(--this-arrow-horizontal-padding, 0px) + var(--this-pagination-side-padding, 0px))}.splide._splide-placeholder{visibility:visible}.splide._splide-placeholder:not(.showcase) .splide__slide:first-child{width:100%}.splide:is(.splide--ttb,._list){--this-outset: 0px}.splide:is(.splide--ttb,._list) .splide__slide{height:auto !important}.splide:is(.splide--ttb,._list) .splide__track{padding:0 !important}.splide:has(.splide__pagination){--this-arrow-offset: 9px}.splide:has(.splide__arrows){--this-arrow-horizontal-padding: calc(var(--this-arrow-size))}.splide:has(.splide__arrows--ttb){--this-arrow-offset: 0px;--this-arrow-horizontal-padding: 0px;--this-arrow-vertical-padding: calc(var(--this-arrow-size))}.splide:has(.splide__pagination--ttb){--this-pagination-side-padding: 24px}.splide:has(.splide__pagination--ttb) .splide__arrow--next{right:16px}.splide__track{padding:var(--this-outset) var(--this-outset) var(--this-pagination-vertical-padding, 16px) !important}.splide.article-card-block.is-overflow .splide__track{--this-pagination-vertical-padding: 0px}.splide.article-card-block.is-overflow .splide__track .splide__pagination:not(.splide__pagination--ttb){margin-top:16px}.splide__arrow{position:absolute;z-index:10;top:calc(50% - var(--this-arrow-offset, 0px));display:grid;place-content:center;height:calc(var(--this-arrow-size)*2);width:var(--this-arrow-size);transition:color .15s ease-in-out}.splide__arrow--prev{left:0;transform:translateY(-50%) scale(-1, 1)}.splide__arrow--next{right:0;transform:translateY(-50%)}.splide__arrow svg{height:calc(var(--this-arrow-size)*.675);width:calc(var(--this-arrow-size)*.675);fill:var(--splide-arrow);transition:fill .15s}.splide__arrow:hover svg{fill:var(--splide-arrow-hover)}.splide__arrow:active svg{fill:var(--splide-arrow-active)}.splide__arrows--ttb .splide__arrow{top:unset;left:50%;right:unset;transform:translateX(-50%) rotate(-90deg);height:var(--this-arrow-size)}.splide__arrows--ttb .splide__arrow--prev{top:0}.splide__arrows--ttb .splide__arrow--next{bottom:0;transform:translateX(-50%) rotate(90deg)}.splide__pagination{display:flex;align-items:flex-start;flex-wrap:wrap}.splide__pagination li{display:block}.splide__pagination button{--this-background: var(--splide-pagination);cursor:pointer;position:relative;display:block;padding:8px;transition:background-color .15s;contain:strict}.splide__pagination button::after{content:"";position:absolute;inset:4px;display:block;background:var(--this-background);border-radius:50%}.splide__pagination button.is-active{--this-background: var(--splide-pagination-active)}.splide__pagination button:where(:not(.is-active)):hover{--this-background: var(--splide-pagination-hover, var(--splide-pagination))}.splide__pagination--ttb{position:absolute;top:50%;right:0;flex-direction:column;transform:translateY(-50%)} diff --git a/src/scss/splide.scss b/src/scss/splide.scss index 911fe546..fa07c4be 100644 --- a/src/scss/splide.scss +++ b/src/scss/splide.scss @@ -7,8 +7,10 @@ .splide { --this-arrow-size: #{get_clamp(20, 40, 320, 640)}; - width: 100%; + --this-outset: 6px; + width: calc(100% + 2 * var(--this-outset)); max-width: 100vw; + transform: translateX(calc(-1 * var(--this-outset))); padding-top: var(--this-arrow-vertical-padding, 0px); padding-left: calc(var(--this-arrow-horizontal-padding, 0px)); padding-bottom: var(--this-arrow-vertical-padding, 0px); @@ -24,6 +26,8 @@ } &:is(.splide--ttb, ._list) { + --this-outset: 0px; + .splide__slide { height: auto !important; } @@ -34,7 +38,7 @@ } &:has(.splide__pagination) { - --this-arrow-offset: 16px; // Offset bottom pagination + --this-arrow-offset: 9px; // Offset bottom pagination } &:has(.splide__arrows) { @@ -56,7 +60,7 @@ } &__track { - padding: 0 0 var(--this-pagination-vertical-padding, 16px) !important; + padding: var(--this-outset) var(--this-outset) var(--this-pagination-vertical-padding, 16px) !important; } &.article-card-block.is-overflow .splide__track {