Authenticator style overrides (aws-amplify#6531)

* Additional box styling options - box-shadow, border-radius, padding & margin-bottom * moved authenticator overrides to amplify-authenticator.scss
abdielou · Aug 7, 2020 · ed3446a · ed3446a
1 parent e32d7bb
commit ed3446a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/...ges/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.scss b/...ges/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.scss
@@ -4,4 +4,8 @@
   --min-width: 20rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  --box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
+  --border-radius: 6px;
+  --padding: 35px 40px;
+  --margin-bottom: 20px;
 }
diff --git a/packages/amplify-ui-components/src/components/amplify-section/amplify-section.scss b/packages/amplify-ui-components/src/components/amplify-section/amplify-section.scss
@@ -5,13 +5,13 @@
 
 .section {
   position: relative;
-  margin-bottom: 20px;
+  margin-bottom: var(--margin-bottom);
   background-color: var(--background-color);
-  padding: 35px 40px;
+  padding: var(--padding);
   text-align: left;
   display: inline-block;
-  border-radius: 6px;
-  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
   box-sizing: border-box;
   font-family: var(--font-family);