fix: fixing unaligned border outlines

aws-amplify · Jan 6, 2022 · e1ed113 · e1ed113
1 parent c06fcb4
commit e1ed113
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 0 deletions.
diff --git a/packages/ui/src/theme/css/component/countryCodeSelect.scss b/packages/ui/src/theme/css/component/countryCodeSelect.scss
@@ -0,0 +1,3 @@
+.amplify-countrycodeselect {
+  height: var(--amplify-components-countrycodeselect-height);
+}
diff --git a/packages/ui/src/theme/css/component/select.scss b/packages/ui/src/theme/css/component/select.scss
@@ -1,4 +1,5 @@
 .amplify-select__wrapper {
+  flex: var(--amplify-components-select-wrapper-flex);
   display: var(--amplify-components-select-wrapper-display);
   position: var(--amplify-components-select-wrapper-position);
   cursor: var(--amplify-components-select-wrapper-cursor);

diff --git a/packages/ui/src/theme/css/styles.scss b/packages/ui/src/theme/css/styles.scss
@@ -60,6 +60,7 @@
 @import './component/collection.scss';
 @import './component/checkbox.scss';
 @import './component/checkboxField.scss';
+@import './component/countryCodeSelect.scss';
 @import './component/divider.scss';
 @import './component/expander.scss';
 @import './component/field.scss';

diff --git a/packages/ui/src/theme/tokens/components/countryCodeSelect.js b/packages/ui/src/theme/tokens/components/countryCodeSelect.js
@@ -0,0 +1,5 @@
+module.exports = {
+  height: {
+    value: '100%',
+  },
+};
diff --git a/packages/ui/src/theme/tokens/components/index.js b/packages/ui/src/theme/tokens/components/index.js
@@ -5,6 +5,7 @@ module.exports = {
   card: require('./card'),
   checkbox: require('./checkbox'),
   checkboxfield: require('./checkboxField'),
+  countrycodeselect: require('./countryCodeSelect'),
   divider: require('./divider'),
   expander: require('./expander'),
   field: require('./field'),

diff --git a/packages/ui/src/theme/tokens/components/select.js b/packages/ui/src/theme/tokens/components/select.js
@@ -2,6 +2,7 @@ module.exports = {
   paddingInlineEnd: { value: '{space.xxl.value}' },
   // wrappers
   wrapper: {
+    flex: { value: '1' },
     display: { value: 'block' },
     position: { value: 'relative' },
     cursor: { value: 'pointer' },