diff --git a/packages/clay-css/src/scss/components/_input-groups.scss b/packages/clay-css/src/scss/components/_input-groups.scss index f99ac58585..1e8f99f92a 100644 --- a/packages/clay-css/src/scss/components/_input-groups.scss +++ b/packages/clay-css/src/scss/components/_input-groups.scss @@ -294,21 +294,27 @@ padding-right: $input-group-addon-padding-x-lg; padding-top: $input-group-addon-padding-y-lg; } - } - - > .input-group-inset-item { - > .btn { - @include clay-button-size($input-group-lg-inset-item-btn); - } - > .form-file { - height: 75%; + > .input-group-inset-item { + > .btn { + @include clay-button-size($input-group-lg-inset-item-btn); + } - .btn { - @include clay-button-size( - $input-group-lg-inset-item-form-file-btn + > .btn-monospaced { + @include clay-button-variant( + $input-group-lg-inset-item-btn-monospaced ); } + + > .form-file { + height: 75%; + + .btn { + @include clay-button-size( + $input-group-lg-inset-item-form-file-btn + ); + } + } } } } @@ -372,21 +378,27 @@ padding-right: $input-group-addon-padding-x-sm; padding-top: $input-group-addon-padding-y-sm; } - } - - > .input-group-inset-item { - > .btn { - @include clay-button-size($input-group-sm-inset-item-btn); - } - > .form-file { - height: 75%; + > .input-group-inset-item { + > .btn { + @include clay-button-size($input-group-sm-inset-item-btn); + } - .btn { - @include clay-button-size( - $input-group-sm-inset-item-form-file-btn + > .btn-monospaced { + @include clay-button-variant( + $input-group-sm-inset-item-btn-monospaced ); } + + > .form-file { + height: 75%; + + .btn { + @include clay-button-size( + $input-group-sm-inset-item-form-file-btn + ); + } + } } } @@ -512,6 +524,12 @@ } } + .btn-monospaced { + @include clay-button-variant( + $input-group-inset-item-btn-monospaced + ); + } + .form-file { height: 75%; diff --git a/packages/clay-css/src/scss/variables/_forms.scss b/packages/clay-css/src/scss/variables/_forms.scss index 5248f7d938..8e9e050004 100644 --- a/packages/clay-css/src/scss/variables/_forms.scss +++ b/packages/clay-css/src/scss/variables/_forms.scss @@ -668,11 +668,13 @@ $input-group-inset-item-padding-right: 5px !default; $input-group-inset-item-btn: () !default; $input-group-inset-item-btn: map-deep-merge( ( - display: block, + align-items: center, + display: flex, height: 75%, + justify-content: center, line-height: 1, - margin-left: 0.125rem, - margin-right: 0.125rem, + margin-left: 0.1875rem, + margin-right: 0.1875rem, padding-bottom: 0, padding-left: 0.5rem, padding-right: 0.5rem, @@ -683,10 +685,24 @@ $input-group-inset-item-btn: map-deep-merge( height: 100%, justify-content: center, ), + lexicon-icon: ( + margin-top: 0, + ), ), $input-group-inset-item-btn ); +$input-group-inset-item-btn-monospaced: () !default; +$input-group-inset-item-btn-monospaced: map-deep-merge( + ( + font-size: 1rem, + height: 2rem, + padding: 0, + width: 2rem, + ), + $input-group-inset-item-btn-monospaced +); + $input-group-inset-form-file-btn: () !default; $input-group-inset-form-file-btn: map-deep-merge( ( @@ -736,6 +752,8 @@ $input-group-lg-item-btn-monospaced: map-deep-merge( $input-group-lg-inset-item-btn: () !default; +$input-group-lg-inset-item-btn-monospaced: () !default; + $input-group-lg-inset-item-form-file-btn: () !default; $input-group-lg-inset-item-form-file-btn: map-deep-merge( ( @@ -799,6 +817,17 @@ $input-group-sm-inset-item-btn: map-deep-merge( $input-group-sm-inset-item-btn ); +$input-group-sm-inset-item-btn-monospaced: () !default; +$input-group-sm-inset-item-btn-monospaced: map-deep-merge( + ( + height: 1.5rem, + margin-left: 0.25rem, + margin-right: 0.25rem, + width: 1.5rem, + ), + $input-group-sm-inset-item-btn-monospaced +); + $input-group-sm-inset-item-form-file-btn: () !default; $input-group-sm-inset-item-form-file-btn: map-deep-merge( (