Skip to content

Commit

Permalink
feat: update theme swiper (#2404)
Browse files Browse the repository at this point in the history
* Update template and styles StackedCardsSwiper

* Update styles and add hover transitions

* Hide partly visible slides

* Firefox fix wrapper overflowing slides

* Tweak transitions

* Show description on keyup, touchend and pointerup events

* Keep hover effect on initial slide and make entire slide a link

* Clean up now redundant outline-overlay button style

* Use pointer-events instead of pseudo element

* Fix indentation

* Show initial slide content on non-hover devices

* Update unit tests

* Fix descending specificity

* chore: update swiper package (#2407)

* Update swiper to lastest v11.1.5; update and clean up swiper instances

* Enable the swiper A11y module

* Add translation strings for a11y labels

* Use ImageOptimised in StackedCardsSwiper

* disable pointer events on cards

* button hover styles for background-cards

* Handle slide click instead of relying on slideToClickedSlide

* Make slides visible when not overflowing container

* Fix active swiper slide class

* Fix visible slide at breakpoint 1666px

* Fix unit tests

* Set default transform scale to prevent FF image disappearing

* bump size limits

---------

Co-authored-by: lbiedinger <lutz.biedinger@gmail.com>
  • Loading branch information
LeoniePeters and lbiedinger committed Sep 4, 2024
1 parent c18d6ac commit 7534658
Show file tree
Hide file tree
Showing 6 changed files with 341 additions and 115 deletions.
22 changes: 0 additions & 22 deletions packages/portal/docs/style/BootstrapVue/Button.md
Original file line number Diff line number Diff line change
Expand Up @@ -288,25 +288,3 @@ _Used in the 'add item to gallery' modal_
</b-button>
</b-container>
```

Variant "outline-overlay"<br>
_Used in the themes swiper_

```jsx
<b-container class="d-flex flex-wrap">
<div class="mr-3 mb-3" :style="`{ margin: -16px; padding: 32px; background-color: #000; }`">
<b-button
variant="outline-overlay"
>
<span>Label no image</span>
</b-button>
</div>
<div class="mr-3 mb-3" :style="`{ margin: -16px; padding: 32px; background-image: url(${thumbnails[3]}); background-size: cover; }`">
<b-button
variant="outline-overlay"
>
<span>Label with image</span>
</b-button>
</div>
</b-container>
```
Loading

0 comments on commit 7534658

Please sign in to comment.