-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🐛 fix(bal-carousel): Scroll Y on mobile blocked and Controls have wro…
…ng z index (#1265) * Create PR for #1254 * fix(carousel): set z-index for sticky --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]>
- Loading branch information
1 parent
d27fe77
commit e56e249
Showing
3 changed files
with
117 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@baloise/design-system-components': patch | ||
| --- | ||
|
|
||
| Corrected the z-index value for the carousel component with sticky controls. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 111 additions & 0 deletions
111
packages/components/src/components/bal-carousel/test/bal-carousel.sticky.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <!DOCTYPE html> | ||
| <html dir="ltr" lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | ||
|
|
||
| <link rel="stylesheet" href="/assets/baloise-design-system.css" /> | ||
| <script type="module" src="/build/design-system-components.esm.js"></script> | ||
| <script nomodule src="/build/design-system-components.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <bal-app> | ||
| <main class="container is-compact py-medium"> | ||
| <section class="my-normal"> | ||
| <bal-carousel data-testid="card" interface="card" controls="tabs" controls-sticky border> | ||
| <bal-carousel-item label="ECO"> | ||
| <bal-card style="width: 100%"> | ||
| <bal-card-title>Title ECO</bal-card-title> | ||
| <bal-card-content> | ||
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti itaque ipsam illum cumque. | ||
| Perspiciatis laudantium temporibus deleniti fuga. Magnam temporibus possimus deserunt obcaecati | ||
| tempora incidunt inventore neque beatae hic fugiat. Blanditiis amet, soluta ut a repellat | ||
| exercitationem libero magni modi explicabo dolorem molestias cumque id ipsum reiciendis harum tenetur | ||
| quaerat quis assumenda consectetur! Illo explicabo suscipit, accusamus impedit dolor cum? Quidem optio | ||
| fugiat dicta eligendi dolore, iure repudiandae voluptate quod aperiam vero tenetur ea quos nostrum! | ||
| Neque amet velit quisquam, aliquid magnam sapiente sunt officiis dicta ullam facilis repellendus | ||
| accusamus? Reprehenderit quae vel exercitationem, reiciendis suscipit aliquam quis ex laboriosam | ||
| impedit odit eos aperiam ratione recusandae doloribus quia autem culpa sint laborum, tenetur quas | ||
| repudiandae inventore nemo minus voluptate! Animi. Rerum commodi excepturi esse. Voluptatum nemo | ||
| asperiores, voluptate iure minus alias id necessitatibus quia ut odit quibusdam itaque unde ducimus | ||
| dolorum assumenda dolores totam accusamus. Laborum debitis autem repellendus consectetur? Quis | ||
| reprehenderit tempora accusantium quibusdam nihil, sint voluptatem ea vero obcaecati officiis | ||
| veritatis quisquam ratione enim saepe eligendi? Accusantium cum eum reprehenderit nihil, nulla dolor! | ||
| Reiciendis eos eligendi praesentium nobis? Eos dignissimos est ducimus, quas ratione voluptatum magnam | ||
| nostrum sit ex cum repudiandae, iste corporis laborum adipisci voluptas quod labore praesentium. | ||
| Quaerat quos in repellat excepturi recusandae, adipisci et quis? Veniam omnis velit natus. Aperiam | ||
| error at voluptates, blanditiis sequi quod incidunt, similique ipsa sed dolorum repellendus | ||
| dignissimos repellat, aliquam ratione? Nihil modi ipsum quisquam nulla voluptate neque facere aliquam. | ||
| Aliquid officia explicabo porro in fugit nesciunt delectus, commodi impedit molestias officiis cum | ||
| ducimus, ipsum esse quia ullam? Placeat excepturi, quo accusantium delectus ullam nihil qui eius | ||
| adipisci minima perspiciatis! Asperiores sint ipsam autem veritatis. Hic iste, quo quam est nam a | ||
| doloribus delectus optio. Quam tempore pariatur dolores cum culpa molestiae reprehenderit. Porro, | ||
| corrupti labore exercitationem aut vero fuga? Dicta, unde quia. Obcaecati tenetur harum sint dolor | ||
| quibusdam molestiae necessitatibus ducimus, aliquid, reiciendis quae ad illo. Nam dolore saepe odit | ||
| aperiam earum iusto, mollitia tempora veritatis? Perspiciatis, eveniet ratione. Blanditiis, ullam | ||
| repudiandae dignissimos sit vero velit qui minima distinctio possimus maiores quia recusandae, ducimus | ||
| odio doloribus asperiores, modi perferendis ea fugiat sint atque a. Accusamus, nulla natus. | ||
| Voluptatem, commodi. Error at dicta ea, voluptate esse vitae totam fugit quae officiis modi adipisci | ||
| minima molestiae ipsum similique, deserunt omnis alias. Dolores aliquam animi praesentium enim, optio | ||
| blanditiis. Fugiat, consequatur laboriosam. Dolores molestias quos eaque tenetur nam dicta minus | ||
| dolorem. Minima assumenda excepturi vitae eligendi, ut nesciunt? Quos eveniet impedit, amet optio quas | ||
| quam eius illum autem dolores, porro ex temporibus. Iste odit laboriosam hic odio totam eos, | ||
| voluptatibus illum minus, sit sed facilis error veritatis fuga. Beatae quaerat sit delectus dolorum | ||
| asperiores? Adipisci facere, quidem asperiores itaque accusantium perspiciatis aperiam! Tempore | ||
| pariatur recusandae corporis est, ipsa alias nemo nam nihil perferendis veniam quam vel amet deleniti! | ||
| Veniam, pariatur hic odio quae repellat aut sapiente eos iste atque placeat, eaque beatae! Praesentium | ||
| error dignissimos rerum eaque consequuntur nesciunt unde vero. Beatae officiis cum alias pariatur fuga | ||
| explicabo debitis earum magni eius vitae assumenda, voluptatum suscipit ad architecto sunt rem sint | ||
| asperiores. Perferendis perspiciatis a placeat harum, quod fuga praesentium inventore officia maiores. | ||
| Ut consequuntur inventore possimus sed magni tenetur amet maiores eum quisquam quaerat? Eos esse | ||
| eligendi hic ipsa? Perspiciatis, repudiandae. Necessitatibus quam earum recusandae, cupiditate | ||
| similique molestias numquam, officiis ducimus inventore rem quod ipsum. Dolor exercitationem, tempore | ||
| repudiandae rem praesentium temporibus numquam. Dolorum iusto illum praesentium dolorem ipsa sed | ||
| impedit. Dolorum velit adipisci distinctio accusamus expedita animi nulla illum. Dolores tempora | ||
| placeat quis itaque autem eveniet doloremque vitae? Quia, modi eveniet. Commodi quae quibusdam cum | ||
| error ea corporis voluptatum eaque! Sequi, dolor ut ea odio quae accusamus placeat vero quibusdam | ||
| illum doloribus minus animi corporis. Facilis modi aspernatur odit. Cumque neque debitis natus | ||
| voluptas accusantium odit eius error dolorum libero. Quod officiis sunt id molestias? Saepe, sunt amet | ||
| tempore est vero nam minus veritatis repudiandae deleniti fuga. Cumque odio omnis illo, voluptatem | ||
| quibusdam, porro ab culpa ratione in expedita accusantium! Rerum pariatur quas dignissimos voluptas | ||
| sit commodi nostrum modi, facilis amet blanditiis quidem ullam aliquid dicta alias sequi itaque. | ||
| Nulla, sapiente aspernatur expedita libero voluptatum illo veritatis illum cum maiores? Ipsa porro | ||
| minus, accusantium nesciunt quaerat veniam autem corporis eaque fugit reprehenderit! Aliquid illo | ||
| illum dolorum quod dicta eius, deserunt harum velit ea aliquam unde ipsum ducimus. Officiis, cum | ||
| ducimus. Neque incidunt consequatur id suscipit eveniet saepe sapiente inventore asperiores. Aliquid | ||
| sed facere, aliquam, sint numquam odio beatae at perferendis voluptates eius sapiente culpa optio | ||
| quidem ex fugit corrupti labore? Culpa sunt officia quam commodi, quia sint aliquid, error facilis | ||
| optio doloremque a numquam sed dolor tempora nisi maiores provident! Magnam voluptatibus repellendus | ||
| ut ipsum ducimus. Optio exercitationem sint distinctio! Quidem, illum commodi eaque nisi expedita | ||
| dolorem aperiam dolor eius quo, quibusdam repudiandae rem nostrum? Exercitationem consectetur | ||
| repellendus beatae nisi! Reprehenderit temporibus molestias eum nemo, nisi pariatur in ullam | ||
| distinctio. Quis cumque maxime odio accusantium voluptas consequatur eaque non quam. Officiis | ||
| voluptatem optio nam, velit cupiditate maiores quo consequuntur harum facilis suscipit quidem | ||
| architecto, voluptas dolore repellat, odio quis cumque. Quae dicta odio aut cumque molestiae laborum | ||
| nisi, similique est ut aliquid odit, voluptatibus nobis voluptates sunt, quibusdam recusandae esse | ||
| magni doloribus. Incidunt vero non tempore odit a animi fugit! Sit culpa quas libero incidunt beatae | ||
| autem unde, maiores cumque, doloribus dignissimos aliquid dolores eaque explicabo quidem nesciunt. | ||
| Dicta harum quas ad minima ipsa tempora! Aspernatur corporis saepe harum possimus. | ||
| </bal-card-content> | ||
| </bal-card> | ||
| </bal-carousel-item> | ||
| <bal-carousel-item label="SMART"> | ||
| <bal-card style="width: 100%"> | ||
| <bal-card-title>Title SMART</bal-card-title> | ||
| <bal-card-content>Content</bal-card-content> | ||
| </bal-card> | ||
| </bal-carousel-item> | ||
| <bal-carousel-item label="TOP"> | ||
| <bal-card style="width: 100%"> | ||
| <bal-card-title>Title TOP</bal-card-title> | ||
| <bal-card-content>Content</bal-card-content> | ||
| </bal-card> | ||
| </bal-carousel-item> | ||
| </bal-carousel> | ||
| </section> | ||
| </main> | ||
| </bal-app> | ||
| </body> | ||
| </html> |