Fix input lookup button height

This commit is contained in:
Marliana Lara 2018-06-12 14:40:44 -04:00
parent a92c2a2e17
commit acb1336721
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
4 changed files with 43 additions and 11 deletions

View File

@ -221,6 +221,32 @@
padding: 6px @at-padding-input 0 @at-padding-input;
}
.at-InputLookup {
display: flex;
.at-InputLookup-button {
.at-mixin-InputButton();
border-radius: @at-border-radius 0 0 @at-border-radius;
border-right: none;
flex: 0 0 35px;
height: auto;
min-height: 30px
}
.at-InputLookup-tagContainer {
.at-mixin-Border;
display: flex;
flex-flow: row wrap;
padding: 0 10px;
width: 100%;
}
.at-InputLookup-button + .at-Input,
.at-InputLookup-tagContainer {
border-radius: 0 @at-border-radius @at-border-radius 0;
}
}
.at-InputSlider {
display: flex;
padding: 5px 0;

View File

@ -2,14 +2,12 @@
<div class="form-group at-u-flat">
<at-input-label></at-input-label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn at-ButtonHollow--default at-Input-button"
ng-disabled="state._disabled || form.disabled"
ng-click="vm.lookup()">
<i class="fa fa-search"></i>
</button>
</span>
<div class="at-InputLookup">
<button class="at-InputLookup-button"
ng-disabled="state._disabled || form.disabled"
ng-click="vm.lookup()">
<i class="fa fa-search"></i>
</button>
<input type="text"
class="form-control at-Input"
ng-class="{ 'at-Input--rejected': state._rejected }"
@ -20,7 +18,7 @@
ng-hide="state._lookupTags"
ng-disabled="state._disabled || form.disabled">
<span class="form-control Form-textInput Form-textInput--variableHeight LabelList-lookupTags"
<span class="at-InputLookup-tagContainer LabelList-lookupTags"
ng-if="state._lookupTags"
ng-disabled="state._disabled || form.disabled">
<div class="LabelList-tagContainer" ng-repeat="tag in state._value track by $index">

View File

@ -20,6 +20,12 @@
padding: 0;
}
.at-mixin-Border (@color: @at-border-default-color) {
border-width: @at-border-default-width;
border-style: @at-border-default-style;
border-color: @color
}
.at-mixin-Button () {
border-radius: @at-border-radius;
height: @at-height-input;

View File

@ -316,6 +316,10 @@
// 5. Misc ----------------------------------------------------------------------------------------
@at-border-radius: 5px;
@at-border-default-style: solid;
@at-border-default-width: 1px;
@at-border-default-color: @at-gray-b7;
@at-border-style-list-active-indicator: 5px solid @at-color-info;
@at-popover-maxwidth: 320px;
@at-line-height-short: 0.9;
@at-line-height-tall: 2;
@ -325,8 +329,6 @@
@at-z-index-nav: 1040;
@at-z-index-side-nav: 1030;
@at-z-index-footer: 1020;
@at-border-default-width: 1px;
@at-border-style-list-active-indicator: 5px solid @at-color-info;
@at-line-height-list-row-item-tag: 22px;
// 6. Breakpoints ---------------------------------------------------------------------------------