@seed-design/css 0.0.9 → 0.0.12
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/all.css +39 -11
- package/all.min.css +1 -1
- package/base.css +2 -0
- package/base.min.css +1 -1
- package/package.json +1 -1
- package/recipes/avatar.css +10 -0
- package/recipes/avatar.d.ts +1 -1
- package/recipes/avatar.mjs +1 -0
- package/recipes/bottom-sheet.css +11 -2
- package/recipes/bottom-sheet.d.ts +4 -1
- package/recipes/bottom-sheet.mjs +9 -2
- package/recipes/dialog.css +4 -1
- package/recipes/help-bubble.css +2 -2
- package/recipes/snackbar.css +6 -6
- package/vars/component/action-sheet.d.ts +2 -1
- package/vars/component/action-sheet.mjs +2 -1
- package/vars/component/avatar.d.ts +10 -0
- package/vars/component/avatar.mjs +10 -0
- package/vars/component/bottom-sheet-close-button.d.ts +21 -0
- package/vars/component/bottom-sheet-close-button.mjs +21 -0
- package/vars/component/bottom-sheet.d.ts +18 -10
- package/vars/component/bottom-sheet.mjs +18 -10
- package/vars/component/dialog.d.ts +7 -4
- package/vars/component/dialog.mjs +7 -4
- package/vars/component/extended-action-sheet-close-button.d.ts +1 -2
- package/vars/component/extended-action-sheet-close-button.mjs +1 -2
- package/vars/component/extended-action-sheet.d.ts +8 -1
- package/vars/component/extended-action-sheet.mjs +8 -1
- package/vars/component/help-bubble.d.ts +2 -2
- package/vars/component/help-bubble.mjs +2 -2
- package/vars/component/index.d.ts +1 -0
- package/vars/component/index.mjs +1 -0
- package/vars/component/snackbar.d.ts +4 -2
- package/vars/component/snackbar.mjs +4 -2
- package/vars/dimension/spacing-y.d.ts +3 -1
- package/vars/dimension/spacing-y.mjs +3 -1
- package/vars/index.d.ts +12 -0
package/all.css
CHANGED
|
@@ -198,6 +198,8 @@
|
|
|
198
198
|
--seed-dimension-spacing-x-global-gutter: var(--seed-dimension-x4);
|
|
199
199
|
--seed-dimension-spacing-y-component-default: var(--seed-dimension-x3);
|
|
200
200
|
--seed-dimension-spacing-y-nav-to-title: var(--seed-dimension-x5);
|
|
201
|
+
--seed-dimension-spacing-y-screen-bottom: var(--seed-dimension-x14);
|
|
202
|
+
--seed-dimension-spacing-y-between-text: var(--seed-dimension-x1_5);
|
|
201
203
|
--seed-duration-d1: 50ms;
|
|
202
204
|
--seed-duration-d2: .1s;
|
|
203
205
|
--seed-duration-d3: .15s;
|
|
@@ -648,6 +650,18 @@
|
|
|
648
650
|
left: 22.7298px;
|
|
649
651
|
}
|
|
650
652
|
|
|
653
|
+
.seed-avatar__root--size_42 {
|
|
654
|
+
width: 42px;
|
|
655
|
+
height: 42px;
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
.seed-avatar__badge--size_42 {
|
|
659
|
+
width: 24px;
|
|
660
|
+
height: 24px;
|
|
661
|
+
top: 23.8515px;
|
|
662
|
+
left: 23.8515px;
|
|
663
|
+
}
|
|
664
|
+
|
|
651
665
|
.seed-avatar__root--size_48 {
|
|
652
666
|
width: 48px;
|
|
653
667
|
height: 48px;
|
|
@@ -1347,7 +1361,6 @@
|
|
|
1347
1361
|
|
|
1348
1362
|
.seed-bottom-sheet__header {
|
|
1349
1363
|
gap: var(--seed-dimension-x2);
|
|
1350
|
-
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
|
|
1351
1364
|
padding-top: var(--seed-dimension-x6);
|
|
1352
1365
|
padding-bottom: var(--seed-dimension-x4);
|
|
1353
1366
|
flex-direction: column;
|
|
@@ -1400,7 +1413,7 @@
|
|
|
1400
1413
|
top: var(--seed-dimension-x5);
|
|
1401
1414
|
right: var(--seed-dimension-x5);
|
|
1402
1415
|
border-radius: var(--seed-radius-full);
|
|
1403
|
-
background: var(--seed-color-
|
|
1416
|
+
background: var(--seed-color-bg-neutral-weak);
|
|
1404
1417
|
--seed-icon-size: 14px;
|
|
1405
1418
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
1406
1419
|
justify-content: center;
|
|
@@ -1417,6 +1430,18 @@
|
|
|
1417
1430
|
inset: -8px;
|
|
1418
1431
|
}
|
|
1419
1432
|
|
|
1433
|
+
.seed-bottom-sheet__header--headerAlign_left {
|
|
1434
|
+
padding-left: var(--seed-dimension-spacing-x-global-gutter);
|
|
1435
|
+
justify-content: flex-start;
|
|
1436
|
+
padding-right: 50px;
|
|
1437
|
+
}
|
|
1438
|
+
|
|
1439
|
+
.seed-bottom-sheet__header--headerAlign_center {
|
|
1440
|
+
justify-content: center;
|
|
1441
|
+
padding-left: 50px;
|
|
1442
|
+
padding-right: 50px;
|
|
1443
|
+
}
|
|
1444
|
+
|
|
1420
1445
|
.seed-action-sheet__positioner {
|
|
1421
1446
|
overscroll-behavior-y: none;
|
|
1422
1447
|
--sheet-z-index: 2;
|
|
@@ -2104,7 +2129,6 @@
|
|
|
2104
2129
|
background: var(--seed-color-bg-layer-default);
|
|
2105
2130
|
max-width: 272px;
|
|
2106
2131
|
margin: auto var(--seed-dimension-x8);
|
|
2107
|
-
padding: var(--seed-dimension-x5) var(--seed-dimension-x5);
|
|
2108
2132
|
border-radius: var(--seed-radius-r5);
|
|
2109
2133
|
flex-direction: column;
|
|
2110
2134
|
flex: 1;
|
|
@@ -2134,6 +2158,8 @@
|
|
|
2134
2158
|
}
|
|
2135
2159
|
|
|
2136
2160
|
.seed-dialog__header {
|
|
2161
|
+
padding-inline: var(--seed-dimension-x5);
|
|
2162
|
+
padding-top: var(--seed-dimension-x5);
|
|
2137
2163
|
gap: var(--seed-dimension-x1_5);
|
|
2138
2164
|
flex-direction: column;
|
|
2139
2165
|
display: flex;
|
|
@@ -2157,7 +2183,9 @@
|
|
|
2157
2183
|
}
|
|
2158
2184
|
|
|
2159
2185
|
.seed-dialog__footer {
|
|
2186
|
+
padding-inline: var(--seed-dimension-x5);
|
|
2160
2187
|
padding-top: var(--seed-dimension-x4);
|
|
2188
|
+
padding-bottom: var(--seed-dimension-x5);
|
|
2161
2189
|
flex-direction: column;
|
|
2162
2190
|
align-items: stretch;
|
|
2163
2191
|
display: flex;
|
|
@@ -3069,8 +3097,8 @@
|
|
|
3069
3097
|
height: 32px;
|
|
3070
3098
|
display: flex;
|
|
3071
3099
|
position: absolute;
|
|
3072
|
-
top:
|
|
3073
|
-
right:
|
|
3100
|
+
top: 3px;
|
|
3101
|
+
right: 3px;
|
|
3074
3102
|
}
|
|
3075
3103
|
|
|
3076
3104
|
.seed-identity-placeholder__root {
|
|
@@ -3698,22 +3726,22 @@
|
|
|
3698
3726
|
min-height: 44px;
|
|
3699
3727
|
animation: seed-enter;
|
|
3700
3728
|
animation-timing-function: var(--seed-timing-function-enter);
|
|
3701
|
-
animation-duration: var(--seed-duration-
|
|
3729
|
+
animation-duration: var(--seed-duration-d3);
|
|
3702
3730
|
--seed-enter-translate-x: 0;
|
|
3703
|
-
--seed-enter-translate-y:
|
|
3731
|
+
--seed-enter-translate-y: 0;
|
|
3704
3732
|
--seed-enter-opacity: 0;
|
|
3705
|
-
--seed-enter-scale:
|
|
3733
|
+
--seed-enter-scale: .8;
|
|
3706
3734
|
display: flex;
|
|
3707
3735
|
}
|
|
3708
3736
|
|
|
3709
3737
|
.seed-snackbar__root:not([data-open]) {
|
|
3710
3738
|
animation: seed-exit;
|
|
3711
3739
|
animation-timing-function: var(--seed-timing-function-exit);
|
|
3712
|
-
animation-duration: var(--seed-duration-
|
|
3740
|
+
animation-duration: var(--seed-duration-d2);
|
|
3713
3741
|
--seed-exit-translate-x: 0;
|
|
3714
|
-
--seed-exit-translate-y:
|
|
3742
|
+
--seed-exit-translate-y: 0;
|
|
3715
3743
|
--seed-exit-opacity: 0;
|
|
3716
|
-
--seed-exit-scale:
|
|
3744
|
+
--seed-exit-scale: .8;
|
|
3717
3745
|
animation-fill-mode: forwards;
|
|
3718
3746
|
}
|
|
3719
3747
|
|