@aws-amplify/ui 3.0.3 → 3.0.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/dist/styles.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Mon, 29 Nov 2021 21:58:32 GMT
6
+ * Generated on Tue, 11 Jan 2022 22:49:01 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -81,7 +81,7 @@
81
81
  --amplify-font-sizes-xxxs: 0.375rem;
82
82
  --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
83
83
  "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
84
- --amplify-fonts-default-variable: "InterVariable", -apple-system, BlinkMacSystemFont,
84
+ --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
85
85
  "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
86
86
  sans-serif;
87
87
  --amplify-colors-transparent: transparent;
@@ -379,6 +379,7 @@
379
379
  --amplify-components-select-small-min-width: 5.5rem;
380
380
  --amplify-components-select-min-width: 6.5rem;
381
381
  --amplify-components-select-white-space: nowrap;
382
+ --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
382
383
  --amplify-components-select-icon-wrapper-pointer-events: none;
383
384
  --amplify-components-select-icon-wrapper-transform: translateY(-50%);
384
385
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
@@ -388,6 +389,7 @@
388
389
  --amplify-components-select-wrapper-cursor: pointer;
389
390
  --amplify-components-select-wrapper-position: relative;
390
391
  --amplify-components-select-wrapper-display: block;
392
+ --amplify-components-select-wrapper-flex: 1;
391
393
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
392
394
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
393
395
  --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
@@ -625,6 +627,7 @@
625
627
  --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
626
628
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
627
629
  --amplify-components-divider-border-style: solid;
630
+ --amplify-components-countrycodeselect-height: 100%;
628
631
  --amplify-components-checkboxfield-justify-content: center;
629
632
  --amplify-components-checkboxfield-flex-direction: column;
630
633
  --amplify-components-checkboxfield-align-content: center;
@@ -813,12 +816,12 @@
813
816
  --amplify-components-alert-align-items: center;
814
817
  }
815
818
 
816
- html {
819
+ [data-amplify-theme] {
817
820
  font-family: var(--amplify-fonts-default-static);
818
821
  }
819
822
 
820
823
  @supports (font-variation-settings: normal) {
821
- html {
824
+ [data-amplify-theme] {
822
825
  font-family: var(--amplify-fonts-default-variable);
823
826
  }
824
827
  }
@@ -1437,7 +1440,7 @@ h6.amplify-heading {
1437
1440
  display: grid;
1438
1441
  width: 100vw;
1439
1442
  height: 100vh;
1440
- overflow: auto;
1443
+ height: -webkit-fill-available;
1441
1444
  background-color: var(--amplify-colors-background-secondary, #e1e5e9);
1442
1445
  /* Override browser default `body { margin: 8px }` */
1443
1446
  position: fixed;
@@ -1445,6 +1448,31 @@ h6.amplify-heading {
1445
1448
  left: 0;
1446
1449
  /* Having a z-index at least "wins" by default */
1447
1450
  z-index: 1;
1451
+ /* top-align at the top 20% of the screen */
1452
+ box-sizing: border-box;
1453
+ padding-top: 20vh;
1454
+ align-content: flex-start;
1455
+ }
1456
+ @media (max-width: 30rem) {
1457
+ [data-amplify-authenticator][data-variation=modal] {
1458
+ overflow: auto;
1459
+ padding-top: 0;
1460
+ }
1461
+ }
1462
+
1463
+ [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1464
+ max-height: 60vh;
1465
+ overflow-y: auto;
1466
+ /* Scroll shadows, adapted from https://codepen.io/chriscoyier/pen/YzXBYvL */
1467
+ background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center bottom;
1468
+ background-repeat: no-repeat;
1469
+ background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
1470
+ background-attachment: local, local, scroll, scroll;
1471
+ }
1472
+ @media (max-width: 30rem) {
1473
+ [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1474
+ max-height: unset;
1475
+ }
1448
1476
  }
1449
1477
 
1450
1478
  /* Texture for modal */
@@ -1520,6 +1548,36 @@ h6.amplify-heading {
1520
1548
  padding: 0px 1.5rem;
1521
1549
  }
1522
1550
 
1551
+ [data-amplify-copy] {
1552
+ display: flex;
1553
+ font-size: 0.688rem;
1554
+ gap: 1rem;
1555
+ justify-content: center;
1556
+ align-items: center;
1557
+ }
1558
+ @media (max-width: 30rem) {
1559
+ [data-amplify-copy] {
1560
+ word-break: break-all;
1561
+ }
1562
+ }
1563
+
1564
+ [data-amplify-copy-svg] {
1565
+ cursor: pointer;
1566
+ position: relative;
1567
+ }
1568
+ [data-amplify-copy-svg]:hover [data-amplify-copy-tooltip] {
1569
+ visibility: visible;
1570
+ font-size: 0.55rem;
1571
+ }
1572
+
1573
+ [data-amplify-copy-tooltip] {
1574
+ visibility: hidden;
1575
+ position: absolute;
1576
+ top: -1rem;
1577
+ left: -0.1rem;
1578
+ color: var(--amplify-colors-teal-100);
1579
+ }
1580
+
1523
1581
  .amplify-card {
1524
1582
  background-color: var(--amplify-components-card-background-color);
1525
1583
  border-radius: var(--amplify-components-card-border-radius);
@@ -1634,6 +1692,10 @@ h6.amplify-heading {
1634
1692
  justify-content: var(--amplify-components-checkboxfield-justify-content);
1635
1693
  }
1636
1694
 
1695
+ .amplify-countrycodeselect {
1696
+ height: var(--amplify-components-countrycodeselect-height);
1697
+ }
1698
+
1637
1699
  .amplify-divider {
1638
1700
  border-color: var(--amplify-components-divider-border-color);
1639
1701
  border-style: var(--amplify-components-divider-border-style);
@@ -2261,6 +2323,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2261
2323
  }
2262
2324
 
2263
2325
  .amplify-select__wrapper {
2326
+ flex: var(--amplify-components-select-wrapper-flex);
2264
2327
  display: var(--amplify-components-select-wrapper-display);
2265
2328
  position: var(--amplify-components-select-wrapper-position);
2266
2329
  cursor: var(--amplify-components-select-wrapper-cursor);
@@ -2281,6 +2344,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
2281
2344
  min-width: var(--amplify-components-select-min-width);
2282
2345
  white-space: var(--amplify-components-select-white-space);
2283
2346
  }
2347
+ @-moz-document url-prefix() {
2348
+ .amplify-select option {
2349
+ background-color: var(--amplify-components-select-option-background-color);
2350
+ }
2351
+ }
2284
2352
  .amplify-select[data-size=small] {
2285
2353
  min-width: var(--amplify-components-select-small-min-width);
2286
2354
  }
package/dist/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 29 Nov 2021 21:58:32 GMT
3
+ * Generated on Tue, 11 Jan 2022 22:49:01 GMT
4
4
  */
5
5
 
6
6
  :root, [data-amplify-theme] {
@@ -79,7 +79,7 @@
79
79
  --amplify-font-sizes-xxxs: 0.375rem;
80
80
  --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
81
81
  'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
82
- --amplify-fonts-default-variable: 'InterVariable', -apple-system, BlinkMacSystemFont,
82
+ --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,
83
83
  'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',
84
84
  sans-serif;
85
85
  --amplify-colors-transparent: transparent;
@@ -377,6 +377,7 @@
377
377
  --amplify-components-select-small-min-width: 5.5rem;
378
378
  --amplify-components-select-min-width: 6.5rem;
379
379
  --amplify-components-select-white-space: nowrap;
380
+ --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
380
381
  --amplify-components-select-icon-wrapper-pointer-events: none;
381
382
  --amplify-components-select-icon-wrapper-transform: translateY(-50%);
382
383
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
@@ -386,6 +387,7 @@
386
387
  --amplify-components-select-wrapper-cursor: pointer;
387
388
  --amplify-components-select-wrapper-position: relative;
388
389
  --amplify-components-select-wrapper-display: block;
390
+ --amplify-components-select-wrapper-flex: 1;
389
391
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
390
392
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
391
393
  --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
@@ -623,6 +625,7 @@
623
625
  --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
624
626
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
625
627
  --amplify-components-divider-border-style: solid;
628
+ --amplify-components-countrycodeselect-height: 100%;
626
629
  --amplify-components-checkboxfield-justify-content: center;
627
630
  --amplify-components-checkboxfield-flex-direction: column;
628
631
  --amplify-components-checkboxfield-align-content: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "3.0.3",
3
+ "version": "3.0.7",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {