@shohojdhara/atomix 0.2.6 → 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/README.md +3 -3
- package/dist/atomix.css +41 -1
- package/dist/atomix.min.css +1 -1
- package/dist/index.d.ts +172 -9
- package/dist/index.esm.js +518 -131
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +527 -131
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/themes/applemix.css +41 -1
- package/dist/themes/applemix.min.css +1 -1
- package/dist/themes/boomdevs.css +41 -1
- package/dist/themes/boomdevs.min.css +1 -1
- package/dist/themes/esrar.css +41 -1
- package/dist/themes/esrar.min.css +1 -1
- package/dist/themes/flashtrade.css +41 -1
- package/dist/themes/flashtrade.min.css +1 -1
- package/dist/themes/mashroom.css +41 -1
- package/dist/themes/mashroom.min.css +1 -1
- package/dist/themes/shaj-default.css +41 -1
- package/dist/themes/shaj-default.min.css +1 -1
- package/package.json +1 -1
- package/src/components/Button/Button.stories.tsx +25 -0
- package/src/components/Hero/Hero.stories.tsx +297 -0
- package/src/components/Hero/Hero.tsx +79 -0
- package/src/components/{Tab/Tab.stories.tsx → Tabs/Tabs.stories.tsx} +9 -9
- package/src/components/{Tab/Tab.tsx → Tabs/Tabs.tsx} +7 -7
- package/src/components/Tabs/index.ts +2 -0
- package/src/components/index.ts +12 -2
- package/src/lib/composables/useHero.ts +33 -4
- package/src/lib/composables/useHeroBackgroundSlider.ts +228 -0
- package/src/lib/constants/components.ts +6 -0
- package/src/lib/types/components.ts +98 -0
- package/src/styles/06-components/_components.hero.scss +51 -1
- package/src/components/Tab/index.ts +0 -2
package/dist/themes/esrar.css
CHANGED
|
@@ -8142,7 +8142,7 @@ a, a:hover {
|
|
|
8142
8142
|
inset: 0;
|
|
8143
8143
|
background-color: var(--atomix-hero-overlay);
|
|
8144
8144
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
8145
|
-
z-index:
|
|
8145
|
+
z-index: 1;
|
|
8146
8146
|
}
|
|
8147
8147
|
.c-hero__container {
|
|
8148
8148
|
position: relative;
|
|
@@ -8212,6 +8212,46 @@ a, a:hover {
|
|
|
8212
8212
|
.c-hero--full-vh {
|
|
8213
8213
|
min-height: 100vh;
|
|
8214
8214
|
}
|
|
8215
|
+
.c-hero__slider {
|
|
8216
|
+
position: absolute;
|
|
8217
|
+
inset: 0;
|
|
8218
|
+
overflow: hidden;
|
|
8219
|
+
z-index: 0;
|
|
8220
|
+
}
|
|
8221
|
+
.c-hero__slider-item {
|
|
8222
|
+
position: absolute;
|
|
8223
|
+
inset: 0;
|
|
8224
|
+
opacity: 0;
|
|
8225
|
+
transition: opacity var(--slider-transition-duration, 1000ms) ease-in-out;
|
|
8226
|
+
pointer-events: none;
|
|
8227
|
+
}
|
|
8228
|
+
.c-hero__slider-item img,
|
|
8229
|
+
.c-hero__slider-item video {
|
|
8230
|
+
width: 100%;
|
|
8231
|
+
height: 100%;
|
|
8232
|
+
-o-object-fit: cover;
|
|
8233
|
+
object-fit: cover;
|
|
8234
|
+
-o-object-position: center;
|
|
8235
|
+
object-position: center;
|
|
8236
|
+
}
|
|
8237
|
+
.c-hero__slider-item--active {
|
|
8238
|
+
opacity: 1;
|
|
8239
|
+
pointer-events: auto;
|
|
8240
|
+
z-index: 1;
|
|
8241
|
+
}
|
|
8242
|
+
.c-hero__slider--fade .c-hero__slider-item {
|
|
8243
|
+
transition: opacity var(--slider-transition-duration, 1000ms) ease-in-out;
|
|
8244
|
+
}
|
|
8245
|
+
.c-hero__slider--slide .c-hero__slider-item {
|
|
8246
|
+
transform: translateX(100%);
|
|
8247
|
+
transition: transform var(--slider-transition-duration, 1000ms) ease-in-out;
|
|
8248
|
+
}
|
|
8249
|
+
.c-hero__slider--slide .c-hero__slider-item--active {
|
|
8250
|
+
transform: translateX(0);
|
|
8251
|
+
}
|
|
8252
|
+
.c-hero__slider--custom .c-hero__slider-item {
|
|
8253
|
+
transition: all var(--slider-transition-duration, 1000ms) ease-in-out;
|
|
8254
|
+
}
|
|
8215
8255
|
.c-form-group {
|
|
8216
8256
|
--atomix-input-group-width: 100%;
|
|
8217
8257
|
--atomix-input-group-label-color: var(--atomix-secondary-text-emphasis);
|