@shohojdhara/atomix 0.2.5 → 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 +77 -9
- package/dist/atomix.min.css +1 -1
- package/dist/index.d.ts +202 -10
- package/dist/index.esm.js +599 -170
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +608 -170
- 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 +77 -9
- package/dist/themes/applemix.min.css +1 -1
- package/dist/themes/boomdevs.css +77 -9
- package/dist/themes/boomdevs.min.css +1 -1
- package/dist/themes/esrar.css +77 -9
- package/dist/themes/esrar.min.css +1 -1
- package/dist/themes/flashtrade.css +77 -9
- package/dist/themes/flashtrade.min.css +1 -1
- package/dist/themes/mashroom.css +77 -9
- package/dist/themes/mashroom.min.css +1 -1
- package/dist/themes/shaj-default.css +77 -9
- package/dist/themes/shaj-default.min.css +1 -1
- package/package.json +1 -1
- package/src/components/AtomixGlass/AtomixGlass.tsx +0 -2
- package/src/components/AtomixGlass/AtomixGlassContainer.tsx +0 -1
- package/src/components/Button/Button.stories.tsx +25 -0
- package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +121 -11
- package/src/components/ColorModeToggle/ColorModeToggle.tsx +146 -45
- package/src/components/ColorModeToggle/index.ts +1 -1
- 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 +7 -1
- package/src/lib/types/components.ts +98 -0
- package/src/styles/06-components/_components.atomix-glass.scss +4 -3
- package/src/styles/06-components/_components.color-mode-toggle.scss +43 -6
- package/src/styles/06-components/_components.hero.scss +51 -1
- package/src/components/Tab/index.ts +0 -2
package/dist/themes/esrar.css
CHANGED
|
@@ -3575,7 +3575,7 @@ a, a:hover {
|
|
|
3575
3575
|
position: relative;
|
|
3576
3576
|
--atomix-glass-radius: var(--atomix-radius-md, 16px);
|
|
3577
3577
|
--atomix-glass-transform: none;
|
|
3578
|
-
--atomix-glass-transition:
|
|
3578
|
+
--atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
|
|
3579
3579
|
--atomix-glass-position: absolute;
|
|
3580
3580
|
--atomix-glass-container-width: 100%;
|
|
3581
3581
|
--atomix-glass-container-height: 100%;
|
|
@@ -3666,7 +3666,7 @@ a, a:hover {
|
|
|
3666
3666
|
height: var(--atomix-glass-container-height);
|
|
3667
3667
|
position: relative;
|
|
3668
3668
|
border-radius: var(--atomix-glass-radius);
|
|
3669
|
-
transition:
|
|
3669
|
+
transition: var(--atomix-glass-transition);
|
|
3670
3670
|
}
|
|
3671
3671
|
.c-atomix-glass__inner {
|
|
3672
3672
|
width: var(--atomix-glass-container-width);
|
|
@@ -3714,6 +3714,7 @@ a, a:hover {
|
|
|
3714
3714
|
}
|
|
3715
3715
|
.c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
|
|
3716
3716
|
opacity: var(--atomix-opacity-50, 0.5);
|
|
3717
|
+
z-index: -1;
|
|
3717
3718
|
}
|
|
3718
3719
|
.c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
|
|
3719
3720
|
opacity: var(--atomix-opacity-25, 0.25);
|
|
@@ -6247,23 +6248,50 @@ a, a:hover {
|
|
|
6247
6248
|
cursor: pointer;
|
|
6248
6249
|
padding: 0.5rem;
|
|
6249
6250
|
border-radius: 50%;
|
|
6250
|
-
transition: background-color 0.2s ease;
|
|
6251
|
+
transition: background-color 0.2s ease, opacity 0.2s ease;
|
|
6251
6252
|
color: var(--atomix-body-color);
|
|
6252
6253
|
}
|
|
6253
|
-
.c-color-mode-toggle:hover {
|
|
6254
|
+
.c-color-mode-toggle:hover:not(:disabled) {
|
|
6254
6255
|
background-color: rgba(0, 0, 0, 0.05);
|
|
6255
6256
|
}
|
|
6256
|
-
.c-color-mode-toggle:focus {
|
|
6257
|
+
.c-color-mode-toggle:focus-visible {
|
|
6257
6258
|
outline: none;
|
|
6258
6259
|
box-shadow: 0 0 0 2px var(--atomix-primary);
|
|
6259
6260
|
}
|
|
6261
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
6262
|
+
transform: scale(0.95);
|
|
6263
|
+
}
|
|
6260
6264
|
.c-color-mode-toggle svg {
|
|
6261
|
-
|
|
6262
|
-
|
|
6265
|
+
display: block;
|
|
6266
|
+
transition: transform 0.2s ease;
|
|
6267
|
+
}
|
|
6268
|
+
.c-color-mode-toggle--sm {
|
|
6269
|
+
padding: 0.375rem;
|
|
6270
|
+
}
|
|
6271
|
+
.c-color-mode-toggle--md {
|
|
6272
|
+
padding: 0.5rem;
|
|
6263
6273
|
}
|
|
6264
|
-
|
|
6274
|
+
.c-color-mode-toggle--lg {
|
|
6275
|
+
padding: 0.625rem;
|
|
6276
|
+
}
|
|
6277
|
+
.c-color-mode-toggle--disabled, .c-color-mode-toggle:disabled {
|
|
6278
|
+
cursor: not-allowed;
|
|
6279
|
+
opacity: 0.5;
|
|
6280
|
+
}
|
|
6281
|
+
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
|
|
6265
6282
|
background-color: rgba(255, 255, 255, 0.1);
|
|
6266
6283
|
}
|
|
6284
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6285
|
+
.c-color-mode-toggle {
|
|
6286
|
+
transition: none;
|
|
6287
|
+
}
|
|
6288
|
+
.c-color-mode-toggle svg {
|
|
6289
|
+
transition: none;
|
|
6290
|
+
}
|
|
6291
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
6292
|
+
transform: none;
|
|
6293
|
+
}
|
|
6294
|
+
}
|
|
6267
6295
|
.c-countdown {
|
|
6268
6296
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
6269
6297
|
--atomix-countdown-font-size: 1rem;
|
|
@@ -8114,7 +8142,7 @@ a, a:hover {
|
|
|
8114
8142
|
inset: 0;
|
|
8115
8143
|
background-color: var(--atomix-hero-overlay);
|
|
8116
8144
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
8117
|
-
z-index:
|
|
8145
|
+
z-index: 1;
|
|
8118
8146
|
}
|
|
8119
8147
|
.c-hero__container {
|
|
8120
8148
|
position: relative;
|
|
@@ -8184,6 +8212,46 @@ a, a:hover {
|
|
|
8184
8212
|
.c-hero--full-vh {
|
|
8185
8213
|
min-height: 100vh;
|
|
8186
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
|
+
}
|
|
8187
8255
|
.c-form-group {
|
|
8188
8256
|
--atomix-input-group-width: 100%;
|
|
8189
8257
|
--atomix-input-group-label-color: var(--atomix-secondary-text-emphasis);
|