From 36120b3115d765df937bda5d0e03afbbb5d7db9e Mon Sep 17 00:00:00 2001
From: gconsidine <greg@greg-considine.com>
Date: Mon, 10 Jul 2017 11:27:31 -0400
Subject: [PATCH] Fix inconsistencies on inputs in Chrome vs. others

---
 .../client/lib/components/input/_index.less   | 36 +++++++++----------
 .../lib/components/input/secret.partial.html  |  2 +-
 .../input/textarea-secret.partial.html        |  6 ++--
 .../lib/theme/_contextual-variables.less      |  6 +++-
 awx/ui/client/lib/theme/_mixins.less          | 13 +++++++
 5 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less
index bff0e535d6..7ac1b4c392 100644
--- a/awx/ui/client/lib/components/input/_index.less
+++ b/awx/ui/client/lib/components/input/_index.less
@@ -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;
 }
diff --git a/awx/ui/client/lib/components/input/secret.partial.html b/awx/ui/client/lib/components/input/secret.partial.html
index 9102c59b0d..b3d0026d40 100644
--- a/awx/ui/client/lib/components/input/secret.partial.html
+++ b/awx/ui/client/lib/components/input/secret.partial.html
@@ -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 }}
diff --git a/awx/ui/client/lib/components/input/textarea-secret.partial.html b/awx/ui/client/lib/components/input/textarea-secret.partial.html
index dd0bc6e5ac..d7823a1547 100644
--- a/awx/ui/client/lib/components/input/textarea-secret.partial.html
+++ b/awx/ui/client/lib/components/input/textarea-secret.partial.html
@@ -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 }"
diff --git a/awx/ui/client/lib/theme/_contextual-variables.less b/awx/ui/client/lib/theme/_contextual-variables.less
index e400f7c459..b006601d10 100644
--- a/awx/ui/client/lib/theme/_contextual-variables.less
+++ b/awx/ui/client/lib/theme/_contextual-variables.less
@@ -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;
 
diff --git a/awx/ui/client/lib/theme/_mixins.less b/awx/ui/client/lib/theme/_mixins.less
index c963868cc3..05190edff7 100644
--- a/awx/ui/client/lib/theme/_mixins.less
+++ b/awx/ui/client/lib/theme/_mixins.less
@@ -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;