From 3df613cc9010f614fe5221675eabce80b54426d5 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 3 Sep 2019 15:05:41 -0700 Subject: [PATCH] feat(clay-css): Forms Clay Multiselect `.form-control-tag-group` should have Clear All button and be aligned in the middle feat(clay-css): Forms added Sass map `$form-control-tag-group-input-group-item` to style `.form-control-tag-group .input-group-item` issue #2335 --- packages/clay-css/src/scss/components/_forms.scss | 4 ++++ packages/clay-css/src/scss/variables/_forms.scss | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/clay-css/src/scss/components/_forms.scss b/packages/clay-css/src/scss/components/_forms.scss index b824450e2c..25a3112414 100644 --- a/packages/clay-css/src/scss/components/_forms.scss +++ b/packages/clay-css/src/scss/components/_forms.scss @@ -194,6 +194,10 @@ div { @include clay-container($form-control-tag-group-autofit-col); } + .input-group-item { + @include clay-container($form-control-tag-group-input-group-item); + } + .inline-item { @include clay-container($form-control-tag-group-inline-item); } diff --git a/packages/clay-css/src/scss/variables/_forms.scss b/packages/clay-css/src/scss/variables/_forms.scss index 74510224b1..27a7ea6fbd 100644 --- a/packages/clay-css/src/scss/variables/_forms.scss +++ b/packages/clay-css/src/scss/variables/_forms.scss @@ -87,7 +87,7 @@ $form-control-tag-group: map-merge(( $form-control-tag-group-autofit-row: () !default; $form-control-tag-group-autofit-row: map-merge(( - align-items: flex-end, + align-items: center, flex-grow: 1, margin-left: -0.5rem, margin-right: -0.5rem, @@ -100,6 +100,11 @@ $form-control-tag-group-autofit-col: map-merge(( padding-right: 0.5rem, ), $form-control-tag-group-autofit-col); +$form-control-tag-group-input-group-item: () !default; +$form-control-tag-group-input-group-item: map-merge(( + align-items: flex-start, +), $form-control-tag-group-input-group-item); + $form-control-tag-group-inline-item: () !default; $form-control-tag-group-inline-item: map-merge(( height: $form-control-inset-min-height,