webui: adjust styles to PatternFly

side effect partially fixes:
https://fedorahosted.org/freeipa/ticket/3435

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

8 files changed, 38 insertions, 49 deletions

diff --git a/install/ui/less/brand.less b/install/ui/less/brand.less
index 37c845ba6..437dd4152 100644
--- a/install/ui/less/brand.less
+++ b/install/ui/less/brand.less
@@ -21,17 +21,14 @@
 // This file contains overrides of reference RCUE implementation to comply
 // with IPA design
 
-.header.rcue {
-    // Use blue instead of red
-    border-top: 3px solid #1d85d9;
-    .brand {
-        // Lower vertical padding by 5px
-        // FreeIPA uses logo with height: 20px instead of 10px.
-        padding: 2px 0;
+@media (min-width: 768px) {
+    .navbar-pf .navbar-brand {
+        padding: 2px 0 3px;
     }
 }
 
-body {
+#simple-container .content {
+    height: 100%;
     background-color: #1D2226;
     background-image: url("../images/login-screen-background.jpg");
     background-position: top left;
@@ -40,7 +37,7 @@ body {
 }
 
 @media (min-width: 1280px) {
-    body {
+    #simple-container .content {
         background-size: 100% auto;
     }
 }
diff --git a/install/ui/less/dialog.less b/install/ui/less/dialog.less
index 10f07a681..fda2b0a2b 100644
--- a/install/ui/less/dialog.less
+++ b/install/ui/less/dialog.less
@@ -80,7 +80,6 @@
             top: 0;
             bottom: 60px;
             clear: both;
-            padding: 0 15px 10px;
         }
 
         footer {
diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
index b987ed59f..4a0a4dbc0 100644
--- a/install/ui/less/forms-override.less
+++ b/install/ui/less/forms-override.less
@@ -31,7 +31,7 @@
 
 /* Checkboxes and Radios */
 
-.radio, .checkbox {
+.radio-cnt, .checkbox-cnt {
     position: relative;
     padding: 0;
 }
@@ -60,7 +60,7 @@ input[type="radio"] + label {
     margin: 0;
 
     &:before {
-        .fa;
+        .fa();
 
         font-size: 125%;
         vertical-align: -7%;
@@ -137,7 +137,6 @@ input[type="radio"]:checked + label:before {
 
         a, label {
             padding-top: 3px;
-            margin-bottom: 3px;
         }
 
         // disable previous in combobox
@@ -148,24 +147,11 @@ input[type="radio"]:checked + label:before {
     }
 }
 
-// this style directly negates the same in forms.less
-.help-inline {
-    margin-top: 0;
-}
-
-.control-group .control-label {
-    position: relative;
-
-    label {
-        margin-bottom: 0;
-    }
-}
-
 // implicit required indicator
-.control-group.required .control-label label:after {
+.form-group.required .control-label label:after {
     display: inline-block;
     position: absolute;
-    right: -11px;
+    right: 6px;
     top: 0px;
     font-size: 125%;
     font-weight: bold;
@@ -173,36 +159,31 @@ input[type="radio"]:checked + label:before {
     color: #1d85d9;
 }
 
-.row-fluid .control-group.required .control-label label:after {
+.fluid-row .form-group.required .control-label label:after {
     position: relative;
     right: -2px;
 }
 
-@media (max-width: 480px) {
-    .control-group.required .control-label label:after {
+@media (max-width: 768px) {
+    .form-group.required .control-label label:after {
         position: relative;
         right: -2px;
     }
 }
 
-// do not show error hint for valid value in multivalued widget if some
-// other value is invalid
-.control-group.error .valid .help-inline {
-    display: none;
-}
+// don't show red highlight for valid controls in multivalued widget with error
+.has-error .valid .form-control {
 
-// only type text for now - it should be replaced when we adopt Bootstrap 3
-// based RCUE (patternfly)
-.control-group.error .valid input[type=text] {
+    border-color: #bababa !important;
 
-    border-color: #62afdb !important;
+    &:hover {
+        border-color: #66afe9 !important;
+    }
 
     &:focus {
-        border-color: rgba(82, 168, 236, 0.8);
+        border-color: #66afe9;
         outline: 0;
-        outline: thin dotted \9;
-        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
     }
 }
diff --git a/install/ui/less/ipa.less b/install/ui/less/ipa.less
index b057f7fd9..e87c15885 100644
--- a/install/ui/less/ipa.less
+++ b/install/ui/less/ipa.less
@@ -5,6 +5,7 @@
 @import "patternfly/variables";
 @import "variables";
 
+@import "mixins";
 @import "dialog";
 @import "brand";
 @import "forms-override";
diff --git a/install/ui/less/login.less b/install/ui/less/login.less
index de9d651b0..7bb6ca0f4 100644
--- a/install/ui/less/login.less
+++ b/install/ui/less/login.less
@@ -60,7 +60,7 @@
 
         fieldset {
             float: left;
-            margin: 30px 30px 30px 0;
+            margin: 30px;
             padding: 10px;
             padding-right: 34px;
             width: 426px;
diff --git a/install/ui/less/mixins.less b/install/ui/less/mixins.less
new file mode 100644
index 000000000..1080f6dc7
--- /dev/null
+++ b/install/ui/less/mixins.less
@@ -0,0 +1,12 @@
+//
+// Originally from Font Awesome
+
+.fa() {
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
\ No newline at end of file
diff --git a/install/ui/less/plugins/otp.less b/install/ui/less/plugins/otp.less
index 8d44fc6bb..bd9d7ab91 100644
--- a/install/ui/less/plugins/otp.less
+++ b/install/ui/less/plugins/otp.less
@@ -5,4 +5,5 @@
 
 .qrcode-widget img {
 	margin: 0 auto;
+	max-width: 100%;
 }
\ No newline at end of file
diff --git a/install/ui/less/widgets.less b/install/ui/less/widgets.less
index 65dee7efe..543bafeed 100644
--- a/install/ui/less/widgets.less
+++ b/install/ui/less/widgets.less
@@ -7,14 +7,12 @@
 	left: 0;
 	right: 0;
 	background-color: rgba(0, 0, 0, 0.3);
-
-	max-height: 22px;
 	text-shadow: none;
 	color: white;
 	font-size: 20px;
 	font-weight: 300;
 	width: 200px;
-	padding: 20px;
+	padding: 15px 20px;
 	margin: auto;
 }