Fix inconsistencies on inputs in Chrome vs. others

This commit is contained in:
gconsidine 2017-07-10 11:27:31 -04:00
parent b79600d2e5
commit 36120b3115
5 changed files with 38 additions and 25 deletions

View File

@ -5,6 +5,7 @@
background: @at-color-input-background;
border-radius: @at-border-radius;
color: @at-color-input-text;
padding: 0 @at-padding-input;
&, &:active {
border-color: @at-color-input-border;
@ -43,16 +44,20 @@
}
.at-Input-button {
display: block;
height: @at-height-button;
line-height: 1;
.at-mixin-InputButton();
}
&, &:active, &:hover, &:focus {
color: @at-color-button-text-default;
border-color: @at-color-input-border;
background-color: @at-color-default;
cursor: pointer;
}
.at-Input-button--fixed-sm {
.at-mixin-InputButton();
min-width: @at-width-input-button-sm;
height: @at-height-input;
}
.at-Input-button--fixed-md {
.at-mixin-InputButton();
display: inherit;
min-width: @at-width-input-button-md;
height: @at-height-textarea;
}
.at-Input--focus {
@ -91,17 +96,6 @@
left: -5px;
}
.at-InputGroup-button {
height: 100%;
& > button {
height: 100%;
border-right: none;
color: @at-color-button-text-default;
min-width: @at-input-button-width;
}
}
.at-InputGroup-title {
.at-mixin-Heading(@at-font-size-panel-inset-heading);
margin: 0 0 0 @at-margin-panel-inset;
@ -211,4 +205,6 @@
.at-InputTextarea {
.at-mixin-FontFixedWidth();
min-height: @at-height-textarea;
padding: 6px @at-padding-input 0 @at-padding-input;
}

View File

@ -4,7 +4,7 @@
<div class="input-group">
<span class="input-group-btn at-InputGroup-button">
<button class="btn at-ButtonHollow--white at-Input-button"
<button class="btn at-ButtonHollow--white at-Input-button--fixed-sm"
ng-disabled="!state._enableToggle && (state._disabled || form.disabled)"
ng-click="vm.toggle()">
{{ state._buttonText }}

View File

@ -3,13 +3,13 @@
<at-input-label></at-input-label>
<div ng-class="{ 'input-group': state._edit }">
<span ng-if="state._edit" class="input-group-btn at-InputGroup-button">
<button class="btn at-ButtonHollow--white at-Input-button"
<div ng-if="state._edit" class="input-group-btn at-InputGroup-button">
<button class="btn at-ButtonHollow--white at-Input-button--fixed-md"
ng-disabled="!state._enableToggle && (state._disabled || form.disabled)"
ng-click="vm.toggle()">
{{ state._buttonText }}
</button>
</span>
</div>
<input ng-show="ssh"
class="at-InputFile--hidden"
ng-class="{'at-InputFile--drag': drag }"

View File

@ -107,6 +107,7 @@
@at-padding-panel: @at-space-4x;
@at-padding-popover: @at-space-2x;
@at-padding-well: @at-space-2x;
@at-padding-input: @at-space-2x;
@at-margin-input-message: @at-space;
@at-margin-item-column: @at-space-3x;
@ -121,9 +122,13 @@
@at-height-divider: @at-margin-panel;
@at-height-input: 30px;
@at-height-textarea: 144px;
@at-height-button: 30px;
@at-height-tab: 30px;
@at-width-input-button-sm: 72px;
@at-width-input-button-md: 84px;
// 4. Transitions ---------------------------------------------------------------------------------
@at-transition-icon-button: 0.2s;
@ -135,5 +140,4 @@
@at-line-height-short: 0.9;
@at-line-height-tall: 2;
@at-line-height: 24px;
@at-input-button-width: 72px;

View File

@ -27,6 +27,19 @@
line-height: 1;
}
.at-mixin-InputButton () {
display: block;
height: @at-height-button;
line-height: 1;
&, &:active, &:hover, &:focus {
color: @at-color-button-text-default;
border-color: @at-color-input-border;
background-color: @at-color-default;
cursor: pointer;
}
}
.at-mixin-ButtonColor (@background, @color, @hover: '@{background}-hover') {
background-color: @@background;