@aws-amplify/ui 3.0.2 → 3.0.6

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Wed, 24 Nov 2021 22:44:54 GMT
+ * Generated on Wed, 05 Jan 2022 00:00:31 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -81,7 +81,7 @@
   --amplify-font-sizes-xxxs: 0.375rem;
   --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
         "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
-  --amplify-fonts-default-variable: "InterVariable", -apple-system, BlinkMacSystemFont,
+  --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
         "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
         sans-serif;
   --amplify-colors-transparent: transparent;
@@ -274,6 +274,7 @@
   --amplify-components-tabs-item-border-style: solid;
   --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
   --amplify-components-tabs-item-background-color: transparent;
+  --amplify-components-tabs-gap: 0;
   --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
   --amplify-components-tabs-border-style: solid;
   --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
@@ -812,12 +813,12 @@
   --amplify-components-alert-align-items: center;
 }
 
-html {
+[data-amplify-theme] {
   font-family: var(--amplify-fonts-default-static);
 }
 
 @supports (font-variation-settings: normal) {
-  html {
+  [data-amplify-theme] {
     font-family: var(--amplify-fonts-default-variable);
   }
 }
@@ -1436,7 +1437,7 @@ h6.amplify-heading {
   display: grid;
   width: 100vw;
   height: 100vh;
-  overflow: auto;
+  height: -webkit-fill-available;
   background-color: var(--amplify-colors-background-secondary, #e1e5e9);
   /* Override browser default `body { margin: 8px }` */
   position: fixed;
@@ -1444,6 +1445,31 @@ h6.amplify-heading {
   left: 0;
   /* Having a z-index at least "wins" by default */
   z-index: 1;
+  /* top-align at the top 20% of the screen */
+  box-sizing: border-box;
+  padding-top: 20vh;
+  align-content: flex-start;
+}
+@media (max-width: 30rem) {
+  [data-amplify-authenticator][data-variation=modal] {
+    overflow: auto;
+    padding-top: 0;
+  }
+}
+
+[data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
+  max-height: 60vh;
+  overflow-y: auto;
+  /* Scroll shadows, adapted from https://codepen.io/chriscoyier/pen/YzXBYvL */
+  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;
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+}
+@media (max-width: 30rem) {
+  [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
+    max-height: unset;
+  }
 }
 
 /* Texture for modal */
@@ -2616,6 +2642,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-width: 0 0 var(--amplify-components-tabs-border-width) 0;
   border-style: var(--amplify-components-tabs-border-style);
   border-color: var(--amplify-components-tabs-border-color);
+  gap: var(--amplify-components-tabs-gap);
 }
 .amplify-tabs[data-indicator-position=top] {
   border-width: var(--amplify-components-tabs-border-width) 0 0 0;

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Nov 2021 22:44:54 GMT
+ * Generated on Wed, 05 Jan 2022 00:00:31 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -79,7 +79,7 @@
   --amplify-font-sizes-xxxs: 0.375rem;
   --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
         'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
-  --amplify-fonts-default-variable: 'InterVariable', -apple-system, BlinkMacSystemFont,
+  --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,
         'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',
         sans-serif;
   --amplify-colors-transparent: transparent;
@@ -272,6 +272,7 @@
   --amplify-components-tabs-item-border-style: solid;
   --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
   --amplify-components-tabs-item-background-color: transparent;
+  --amplify-components-tabs-gap: 0;
   --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
   --amplify-components-tabs-border-style: solid;
   --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "3.0.2",
+  "version": "3.0.6",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {