diff --git a/.changeset/purple-birds-admire.md b/.changeset/purple-birds-admire.md new file mode 100644 index 0000000000..f3bd33aedf --- /dev/null +++ b/.changeset/purple-birds-admire.md @@ -0,0 +1,5 @@ +--- +'@baloise/design-system-components': patch +--- + +Corrected the z-index value for the carousel component with sticky controls. diff --git a/packages/components/src/components/bal-carousel/bal-carousel.sass b/packages/components/src/components/bal-carousel/bal-carousel.sass index 2496c195ba..defea6e746 100644 --- a/packages/components/src/components/bal-carousel/bal-carousel.sass +++ b/packages/components/src/components/bal-carousel/bal-carousel.sass @@ -141,6 +141,7 @@ .bal-carousel__controls--tabs position: sticky top: var(--bal-carousel-sticky-top) + z-index: var(--bal-z-index-sticky) .bal-carousel__controls--tabs .bal-card diff --git a/packages/components/src/components/bal-carousel/test/bal-carousel.sticky.html b/packages/components/src/components/bal-carousel/test/bal-carousel.sticky.html new file mode 100644 index 0000000000..35064068c1 --- /dev/null +++ b/packages/components/src/components/bal-carousel/test/bal-carousel.sticky.html @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + +
+
+ + + + Title ECO + + 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. + + + + + + Title SMART + Content + + + + + Title TOP + Content + + + +
+
+
+ +