External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-20 02:17:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

Fix inconsistencies on inputs in Chrome vs. others

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

36
awx/ui/client/lib/components/input/_index.less
View File

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

2
awx/ui/client/lib/components/input/secret.partial.html
View File

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

6
awx/ui/client/lib/components/input/textarea-secret.partial.html
View File

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

6
awx/ui/client/lib/theme/_contextual-variables.less
View File

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

13
awx/ui/client/lib/theme/_mixins.less
View File

@@ -27,6 +27,19 @@
line-height: 1; 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') { .at-mixin-ButtonColor (@background, @color, @hover: '@{background}-hover') {
background-color: @@background; background-color: @@background;