diff --git a/assets/js/vendors/carousel.js b/assets/js/vendors/carousel.js index eb86fbe6aa7f7d8b01292b355ffe465cdad0f369..5e82fa7b2019dc5ffdbed9826c304c36e2d20fed 100644 --- a/assets/js/vendors/carousel.js +++ b/assets/js/vendors/carousel.js @@ -21,7 +21,7 @@ class Carousel { init () { this.splide = new Splide(this.element).mount(); - const toggleButton = this.splide.root.querySelector('.splide__autoplay'), + const toggleButton = this.splide.root.querySelector('.splide__toggle'), stepButtons = this.splide.root.querySelectorAll('.splide__pagination button'), elements = this.splide.root.querySelectorAll('.splide__pagination, .splide__slide'), autoplay = this.splide.Components.Autoplay; diff --git a/assets/sass/_theme/blocks/testimonials.sass b/assets/sass/_theme/blocks/testimonials.sass index 10cbfcbc6726078df7467a9f4bfbf55fc10b784e..f9f1a713ae707676809615c3fcbd320830a3764c 100644 --- a/assets/sass/_theme/blocks/testimonials.sass +++ b/assets/sass/_theme/blocks/testimonials.sass @@ -38,25 +38,23 @@ .splide display: flex flex-direction: column-reverse - &__autoplay - bottom: auto + &__toggle + @include button-reset + border: 1px solid $block-testimonials-pagination-background + border-radius: 50% + font-size: 0 + height: 42px + padding: 0 + position: absolute + right: 0 top: 0 - button - @include button-reset - font-size: px2rem(14) - line-height: 1 - &::after - border: 1px solid $block-testimonials-pagination-background // TODO : variable - border-radius: 50% - content: "" - height: 42px - left: 50% - position: absolute - top: 50% - transform: translate(-50%, -50%) - width: 42px + width: 42px + font-size: 0 + line-height: 1 + span + color: $color-accent &::before - color: $color-accent + font-size: 42px &:not(.is-active) + .splide__pagination .is-active i diff --git a/assets/sass/_theme/dependencies/splide.sass b/assets/sass/_theme/dependencies/splide.sass index 976f7a904617836a3d926c7702133e49802927a8..e667a6eb140c55e1f0c999f53656f43c4e45df25 100644 --- a/assets/sass/_theme/dependencies/splide.sass +++ b/assets/sass/_theme/dependencies/splide.sass @@ -40,30 +40,19 @@ &::before background-color: $link-color - &__autoplay - bottom: 0 - position: absolute - right: 0 + &__toggle + .splide__toggle__pause + @include icon-block(pause) + display: none + .splide__toggle__play + @include icon-block(play) + display: inline-block &.is-active - .splide__play + .splide__toggle__play display: none - .splide__pause + .splide__toggle__pause display: inline-block - &__pause, - &__play - height: 48px - padding: 0 - width: 48px - - &__play - @include icon-block(play) - - &__pause - @include icon-block(pause) - display: none - - &[data-slides-length="1"] .splide &__autoplay, &__pagination, &__arrow diff --git a/layouts/partials/blocks/templates/testimonials.html b/layouts/partials/blocks/templates/testimonials.html index a7da6ead4763537382c606315f5ee3acf13a87f3..b5f192620a188b8ee8addbd88a520c15da8f0b65 100644 --- a/layouts/partials/blocks/templates/testimonials.html +++ b/layouts/partials/blocks/templates/testimonials.html @@ -73,10 +73,10 @@ </div> </div> - <div class="splide__autoplay is-active"> - <button class="splide__play"></button> - <button class="splide__pause"></button> - </div> + <button class="splide__toggle"> + <span class="splide__toggle__play">Play</span> + <span class="splide__toggle__pause">Pause</span> + </button> </div> {{ end -}}