@florid-kit/components 2.1.3 → 2.1.5
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/index.js +43 -6
- package/index.mjs +43 -6
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1014,7 +1014,11 @@
|
|
|
1014
1014
|
stroke: none;
|
|
1015
1015
|
fill: var(--color-content-action-primary);
|
|
1016
1016
|
}
|
|
1017
|
-
|
|
1017
|
+
|
|
1018
|
+
.icon-button.icon-wishlist.none-light svg path {
|
|
1019
|
+
stroke: var(--color-content-action-primary);
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1018
1022
|
.icon-button.none-light.icon-wishlist svg path {
|
|
1019
1023
|
fill: none;
|
|
1020
1024
|
}
|
|
@@ -4400,35 +4404,61 @@
|
|
|
4400
4404
|
</div>
|
|
4401
4405
|
</header>`}};k.styles=C`
|
|
4402
4406
|
.o-header-simplify {
|
|
4407
|
+
--header-simplify-height-default: 72px;
|
|
4408
|
+
--header-simplify-height-scrolled: 60px;
|
|
4409
|
+
--header-simplify-height-scrolled-mobile: 64px;
|
|
4410
|
+
|
|
4403
4411
|
display: flex;
|
|
4404
4412
|
width: 100%;
|
|
4405
|
-
|
|
4413
|
+
height: var(--header-simplify-height-default);
|
|
4414
|
+
box-sizing: border-box;
|
|
4415
|
+
padding: 0 var(--spacing-s, 8px);
|
|
4406
4416
|
flex-direction: column;
|
|
4407
4417
|
justify-content: center;
|
|
4408
|
-
align-items:
|
|
4409
|
-
gap:
|
|
4418
|
+
align-items: stretch;
|
|
4419
|
+
gap: 0;
|
|
4410
4420
|
border-bottom: var(--border-s, 0.5px) solid
|
|
4411
4421
|
var(--color-border-tertiary, #c3bdbe);
|
|
4412
4422
|
background: var(--color-container-bg-white, #fffefe);
|
|
4413
4423
|
border-radius: var(--radius-m, 4px);
|
|
4424
|
+
transition:
|
|
4425
|
+
height 0.2s ease,
|
|
4426
|
+
box-shadow 0.4s linear,
|
|
4427
|
+
border-color 0.2s ease,
|
|
4428
|
+
padding 0.2s ease,
|
|
4429
|
+
top 0.2s ease,
|
|
4430
|
+
width 0.2s ease;
|
|
4414
4431
|
|
|
4415
4432
|
@media (max-width: 767px) {
|
|
4416
|
-
padding: var(--spacing-2-xs, 4px);
|
|
4433
|
+
padding: 0 var(--spacing-2-xs, 4px);
|
|
4417
4434
|
align-items: center;
|
|
4418
4435
|
}
|
|
4419
4436
|
}
|
|
4420
4437
|
|
|
4421
4438
|
.o-header-simplify.is-scrolled {
|
|
4439
|
+
height: var(--header-simplify-height-scrolled);
|
|
4422
4440
|
border-bottom: none;
|
|
4423
4441
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
|
|
4424
4442
|
}
|
|
4425
4443
|
|
|
4444
|
+
@media (max-width: 767px) {
|
|
4445
|
+
.o-header-simplify.is-scrolled {
|
|
4446
|
+
height: var(--header-simplify-height-scrolled-mobile);
|
|
4447
|
+
}
|
|
4448
|
+
}
|
|
4449
|
+
|
|
4426
4450
|
.o-header-simplify.is-sticky {
|
|
4427
4451
|
position: sticky;
|
|
4428
4452
|
top: var(--header-simplify-sticky-top, 0);
|
|
4429
4453
|
z-index: var(--header-simplify-sticky-z-index, 98);
|
|
4430
4454
|
margin: auto;
|
|
4431
|
-
transition:
|
|
4455
|
+
transition:
|
|
4456
|
+
height 0.2s ease,
|
|
4457
|
+
box-shadow 0.4s linear,
|
|
4458
|
+
border-color 0.2s ease,
|
|
4459
|
+
padding 0.2s ease,
|
|
4460
|
+
top 0.2s ease,
|
|
4461
|
+
width 0.2s ease;
|
|
4432
4462
|
}
|
|
4433
4463
|
|
|
4434
4464
|
.o-header-simplify.is-sticky.is-scrolled {
|
|
@@ -4439,10 +4469,17 @@
|
|
|
4439
4469
|
.o-header-simplify-container {
|
|
4440
4470
|
display: flex;
|
|
4441
4471
|
padding: var(--spacing-s, 8px) var(--spacing-2-xs, 4px);
|
|
4472
|
+
height: 100%;
|
|
4473
|
+
box-sizing: border-box;
|
|
4442
4474
|
justify-content: space-between;
|
|
4443
4475
|
align-items: center;
|
|
4444
4476
|
align-self: stretch;
|
|
4445
4477
|
border-radius: var(--radius-m, 4px);
|
|
4478
|
+
transition: padding 0.2s ease;
|
|
4479
|
+
}
|
|
4480
|
+
|
|
4481
|
+
.o-header-simplify.is-scrolled .o-header-simplify-container {
|
|
4482
|
+
padding: var(--spacing-xs, 6px) var(--spacing-2-xs, 4px);
|
|
4446
4483
|
}
|
|
4447
4484
|
|
|
4448
4485
|
.o-header-simplify-container.no-back-button {
|
package/index.mjs
CHANGED
|
@@ -2004,7 +2004,11 @@ Z.styles = C`
|
|
|
2004
2004
|
stroke: none;
|
|
2005
2005
|
fill: var(--color-content-action-primary);
|
|
2006
2006
|
}
|
|
2007
|
-
|
|
2007
|
+
|
|
2008
|
+
.icon-button.icon-wishlist.none-light svg path {
|
|
2009
|
+
stroke: var(--color-content-action-primary);
|
|
2010
|
+
}
|
|
2011
|
+
|
|
2008
2012
|
.icon-button.none-light.icon-wishlist svg path {
|
|
2009
2013
|
fill: none;
|
|
2010
2014
|
}
|
|
@@ -7398,35 +7402,61 @@ let k = class extends p {
|
|
|
7398
7402
|
};
|
|
7399
7403
|
k.styles = C`
|
|
7400
7404
|
.o-header-simplify {
|
|
7405
|
+
--header-simplify-height-default: 72px;
|
|
7406
|
+
--header-simplify-height-scrolled: 60px;
|
|
7407
|
+
--header-simplify-height-scrolled-mobile: 64px;
|
|
7408
|
+
|
|
7401
7409
|
display: flex;
|
|
7402
7410
|
width: 100%;
|
|
7403
|
-
|
|
7411
|
+
height: var(--header-simplify-height-default);
|
|
7412
|
+
box-sizing: border-box;
|
|
7413
|
+
padding: 0 var(--spacing-s, 8px);
|
|
7404
7414
|
flex-direction: column;
|
|
7405
7415
|
justify-content: center;
|
|
7406
|
-
align-items:
|
|
7407
|
-
gap:
|
|
7416
|
+
align-items: stretch;
|
|
7417
|
+
gap: 0;
|
|
7408
7418
|
border-bottom: var(--border-s, 0.5px) solid
|
|
7409
7419
|
var(--color-border-tertiary, #c3bdbe);
|
|
7410
7420
|
background: var(--color-container-bg-white, #fffefe);
|
|
7411
7421
|
border-radius: var(--radius-m, 4px);
|
|
7422
|
+
transition:
|
|
7423
|
+
height 0.2s ease,
|
|
7424
|
+
box-shadow 0.4s linear,
|
|
7425
|
+
border-color 0.2s ease,
|
|
7426
|
+
padding 0.2s ease,
|
|
7427
|
+
top 0.2s ease,
|
|
7428
|
+
width 0.2s ease;
|
|
7412
7429
|
|
|
7413
7430
|
@media (max-width: 767px) {
|
|
7414
|
-
padding: var(--spacing-2-xs, 4px);
|
|
7431
|
+
padding: 0 var(--spacing-2-xs, 4px);
|
|
7415
7432
|
align-items: center;
|
|
7416
7433
|
}
|
|
7417
7434
|
}
|
|
7418
7435
|
|
|
7419
7436
|
.o-header-simplify.is-scrolled {
|
|
7437
|
+
height: var(--header-simplify-height-scrolled);
|
|
7420
7438
|
border-bottom: none;
|
|
7421
7439
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
|
|
7422
7440
|
}
|
|
7423
7441
|
|
|
7442
|
+
@media (max-width: 767px) {
|
|
7443
|
+
.o-header-simplify.is-scrolled {
|
|
7444
|
+
height: var(--header-simplify-height-scrolled-mobile);
|
|
7445
|
+
}
|
|
7446
|
+
}
|
|
7447
|
+
|
|
7424
7448
|
.o-header-simplify.is-sticky {
|
|
7425
7449
|
position: sticky;
|
|
7426
7450
|
top: var(--header-simplify-sticky-top, 0);
|
|
7427
7451
|
z-index: var(--header-simplify-sticky-z-index, 98);
|
|
7428
7452
|
margin: auto;
|
|
7429
|
-
transition:
|
|
7453
|
+
transition:
|
|
7454
|
+
height 0.2s ease,
|
|
7455
|
+
box-shadow 0.4s linear,
|
|
7456
|
+
border-color 0.2s ease,
|
|
7457
|
+
padding 0.2s ease,
|
|
7458
|
+
top 0.2s ease,
|
|
7459
|
+
width 0.2s ease;
|
|
7430
7460
|
}
|
|
7431
7461
|
|
|
7432
7462
|
.o-header-simplify.is-sticky.is-scrolled {
|
|
@@ -7437,10 +7467,17 @@ k.styles = C`
|
|
|
7437
7467
|
.o-header-simplify-container {
|
|
7438
7468
|
display: flex;
|
|
7439
7469
|
padding: var(--spacing-s, 8px) var(--spacing-2-xs, 4px);
|
|
7470
|
+
height: 100%;
|
|
7471
|
+
box-sizing: border-box;
|
|
7440
7472
|
justify-content: space-between;
|
|
7441
7473
|
align-items: center;
|
|
7442
7474
|
align-self: stretch;
|
|
7443
7475
|
border-radius: var(--radius-m, 4px);
|
|
7476
|
+
transition: padding 0.2s ease;
|
|
7477
|
+
}
|
|
7478
|
+
|
|
7479
|
+
.o-header-simplify.is-scrolled .o-header-simplify-container {
|
|
7480
|
+
padding: var(--spacing-xs, 6px) var(--spacing-2-xs, 4px);
|
|
7444
7481
|
}
|
|
7445
7482
|
|
|
7446
7483
|
.o-header-simplify-container.no-back-button {
|