@seed-design/css 2.8.3 → 2.9.0

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.
Files changed (17) hide show
  1. package/all.css +19 -10
  2. package/all.layered.css +19 -10
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +6 -0
  6. package/base.layered.css +6 -0
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/app-bar-main.css +2 -1
  11. package/recipes/app-bar-main.layered.css +2 -1
  12. package/recipes/app-bar.css +5 -3
  13. package/recipes/app-bar.layered.css +5 -3
  14. package/recipes/app-screen.css +5 -1
  15. package/recipes/app-screen.layered.css +6 -6
  16. package/vars/component/top-navigation.d.ts +1 -4
  17. package/vars/component/top-navigation.mjs +1 -4
package/all.css CHANGED
@@ -1,12 +1,16 @@
1
1
  :root {
2
2
  --seed-safe-area-top: 0px;
3
3
  --seed-safe-area-bottom: 0px;
4
+ --seed-safe-area-left: 0px;
5
+ --seed-safe-area-right: 0px;
4
6
  }
5
7
 
6
8
  @supports (left: constant(safe-area-inset-left)) {
7
9
  :root {
8
10
  --seed-safe-area-top: constant(safe-area-inset-top);
9
11
  --seed-safe-area-bottom: constant(safe-area-inset-bottom);
12
+ --seed-safe-area-left: constant(safe-area-inset-left);
13
+ --seed-safe-area-right: constant(safe-area-inset-right);
10
14
  }
11
15
  }
12
16
 
@@ -14,6 +18,8 @@
14
18
  :root {
15
19
  --seed-safe-area-top: env(safe-area-inset-top);
16
20
  --seed-safe-area-bottom: env(safe-area-inset-bottom);
21
+ --seed-safe-area-left: env(safe-area-inset-left);
22
+ --seed-safe-area-right: env(safe-area-inset-right);
17
23
  }
18
24
  }
19
25
 
@@ -2063,8 +2069,9 @@
2063
2069
  }
2064
2070
 
2065
2071
  .seed-app-bar__root--theme_cupertino {
2066
- height: calc(44px + var(--seed-safe-area-top));
2067
- padding-inline: var(--seed-dimension-x4);
2072
+ height: calc(56px + var(--seed-safe-area-top));
2073
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
2074
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2068
2075
  padding-top: var(--seed-safe-area-top);
2069
2076
  }
2070
2077
 
@@ -2088,7 +2095,8 @@
2088
2095
 
2089
2096
  .seed-app-bar__root--theme_android {
2090
2097
  height: calc(56px + var(--seed-safe-area-top));
2091
- padding-inline: var(--seed-dimension-x4);
2098
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
2099
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2092
2100
  padding-top: var(--seed-safe-area-top);
2093
2101
  }
2094
2102
 
@@ -2162,7 +2170,8 @@
2162
2170
  text-align: center;
2163
2171
  top: var(--seed-safe-area-top);
2164
2172
  bottom: 0;
2165
- padding-inline: var(--centered-title-padding-x, 0);
2173
+ padding-left: calc(var(--seed-safe-area-left) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-left) - var(--seed-dimension-x4)))), 0px));
2174
+ padding-right: calc(var(--seed-safe-area-right) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-right) - var(--seed-dimension-x4)))), 0px));
2166
2175
  pointer-events: none;
2167
2176
  justify-content: center;
2168
2177
  align-items: center;
@@ -2212,9 +2221,11 @@
2212
2221
  .seed-app-screen__layer {
2213
2222
  z-index: var(--z-index-layer);
2214
2223
  box-sizing: border-box;
2215
- -webkit-overflow-scrolling: touch;
2216
2224
  width: 100%;
2217
2225
  height: 100%;
2226
+ padding-left: var(--seed-safe-area-left);
2227
+ padding-right: var(--seed-safe-area-right);
2228
+ -webkit-overflow-scrolling: touch;
2218
2229
  position: absolute;
2219
2230
  inset-inline: 0;
2220
2231
  overflow-y: scroll;
@@ -2240,11 +2251,7 @@
2240
2251
  inset-inline: 0;
2241
2252
  }
2242
2253
 
2243
- .seed-app-screen__root--theme_cupertino {
2244
- --app-bar-height: 44px;
2245
- }
2246
-
2247
- .seed-app-screen__root--theme_android {
2254
+ .seed-app-screen__root--theme_cupertino, .seed-app-screen__root--theme_android {
2248
2255
  --app-bar-height: 56px;
2249
2256
  }
2250
2257
 
@@ -2311,6 +2318,8 @@
2311
2318
  content: "";
2312
2319
  inset-inline: 0;
2313
2320
  margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
2321
+ margin-left: calc(-1 * var(--seed-safe-area-left));
2322
+ margin-right: calc(-1 * var(--seed-safe-area-right));
2314
2323
  height: calc(66px + 400px + var(--seed-safe-area-top));
2315
2324
  pointer-events: none;
2316
2325
  z-index: 1;
package/all.layered.css CHANGED
@@ -2,12 +2,16 @@
2
2
  :root {
3
3
  --seed-safe-area-top: 0px;
4
4
  --seed-safe-area-bottom: 0px;
5
+ --seed-safe-area-left: 0px;
6
+ --seed-safe-area-right: 0px;
5
7
  }
6
8
 
7
9
  @supports (left: constant(safe-area-inset-left)) {
8
10
  :root {
9
11
  --seed-safe-area-top: constant(safe-area-inset-top);
10
12
  --seed-safe-area-bottom: constant(safe-area-inset-bottom);
13
+ --seed-safe-area-left: constant(safe-area-inset-left);
14
+ --seed-safe-area-right: constant(safe-area-inset-right);
11
15
  }
12
16
  }
13
17
 
@@ -15,6 +19,8 @@
15
19
  :root {
16
20
  --seed-safe-area-top: env(safe-area-inset-top);
17
21
  --seed-safe-area-bottom: env(safe-area-inset-bottom);
22
+ --seed-safe-area-left: env(safe-area-inset-left);
23
+ --seed-safe-area-right: env(safe-area-inset-right);
18
24
  }
19
25
  }
20
26
 
@@ -2312,8 +2318,9 @@
2312
2318
  }
2313
2319
 
2314
2320
  .seed-app-bar__root--theme_cupertino {
2315
- height: calc(44px + var(--seed-safe-area-top));
2316
- padding-inline: var(--seed-dimension-x4);
2321
+ height: calc(56px + var(--seed-safe-area-top));
2322
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
2323
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2317
2324
  padding-top: var(--seed-safe-area-top);
2318
2325
  }
2319
2326
 
@@ -2337,7 +2344,8 @@
2337
2344
 
2338
2345
  .seed-app-bar__root--theme_android {
2339
2346
  height: calc(56px + var(--seed-safe-area-top));
2340
- padding-inline: var(--seed-dimension-x4);
2347
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
2348
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2341
2349
  padding-top: var(--seed-safe-area-top);
2342
2350
  }
2343
2351
 
@@ -2411,7 +2419,8 @@
2411
2419
  text-align: center;
2412
2420
  top: var(--seed-safe-area-top);
2413
2421
  bottom: 0;
2414
- padding-inline: var(--centered-title-padding-x, 0);
2422
+ padding-left: calc(var(--seed-safe-area-left) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-left) - var(--seed-dimension-x4)))), 0px));
2423
+ padding-right: calc(var(--seed-safe-area-right) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-right) - var(--seed-dimension-x4)))), 0px));
2415
2424
  pointer-events: none;
2416
2425
  justify-content: center;
2417
2426
  align-items: center;
@@ -2461,9 +2470,11 @@
2461
2470
  .seed-app-screen__layer {
2462
2471
  z-index: var(--z-index-layer);
2463
2472
  box-sizing: border-box;
2464
- -webkit-overflow-scrolling: touch;
2465
2473
  width: 100%;
2466
2474
  height: 100%;
2475
+ padding-left: var(--seed-safe-area-left);
2476
+ padding-right: var(--seed-safe-area-right);
2477
+ -webkit-overflow-scrolling: touch;
2467
2478
  position: absolute;
2468
2479
  inset-inline: 0;
2469
2480
  overflow-y: scroll;
@@ -2489,11 +2500,7 @@
2489
2500
  inset-inline: 0;
2490
2501
  }
2491
2502
 
2492
- .seed-app-screen__root--theme_cupertino {
2493
- --app-bar-height: 44px;
2494
- }
2495
-
2496
- .seed-app-screen__root--theme_android {
2503
+ .seed-app-screen__root--theme_cupertino, .seed-app-screen__root--theme_android {
2497
2504
  --app-bar-height: 56px;
2498
2505
  }
2499
2506
 
@@ -2560,6 +2567,8 @@
2560
2567
  content: "";
2561
2568
  inset-inline: 0;
2562
2569
  margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
2570
+ margin-left: calc(-1 * var(--seed-safe-area-left));
2571
+ margin-right: calc(-1 * var(--seed-safe-area-right));
2563
2572
  height: calc(66px + 400px + var(--seed-safe-area-top));
2564
2573
  pointer-events: none;
2565
2574
  z-index: 1;