From 2e9e5792bc7c5fd1ed65b4d72e3915442db060f5 Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvoborni@redhat.com>
Date: Fri, 4 Apr 2014 17:45:56 +0200
Subject: webui: adjust styles to PatternFly

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

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
---
 install/ui/ipa.css                    | 406 ++--------------------------------
 install/ui/less/brand.less            |  15 +-
 install/ui/less/dialog.less           |   1 -
 install/ui/less/forms-override.less   |  51 ++---
 install/ui/less/ipa.less              |   1 +
 install/ui/less/login.less            |   2 +-
 install/ui/less/mixins.less           |  12 +
 install/ui/less/plugins/otp.less      |   1 +
 install/ui/less/widgets.less          |   4 +-
 install/ui/src/freeipa/certificate.js |   2 +-
 install/ui/src/freeipa/details.js     |   7 +-
 install/ui/src/freeipa/dialog.js      |   8 +-
 install/ui/src/freeipa/dns.js         |   2 +-
 install/ui/src/freeipa/facet.js       |   8 +-
 install/ui/src/freeipa/hbactest.js    |  10 +-
 install/ui/src/freeipa/host.js        |   7 +-
 install/ui/src/freeipa/search.js      |   1 +
 install/ui/src/freeipa/widget.js      |  35 +--
 install/ui/test/details_tests.js      |  10 +-
 ipatests/test_webui/ui_driver.py      |   9 +-
 20 files changed, 108 insertions(+), 484 deletions(-)
 create mode 100644 install/ui/less/mixins.less

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index fa56187cf..0bfa7806e 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -17,13 +17,6 @@ html {
 body {
     overflow: auto;
     position: relative;
-    background-repeat: repeat-x;
-    background-position: left top;
-    background-color: #FFFFFF;
-    border-width: 0;
-    font-size: 11px;
-    margin: 0;
-    padding: 0;
     height: 100%;
 }
 
@@ -32,23 +25,17 @@ textarea[readonly] {
 }
 
 .network-activity-indicator {
-    visibility: hidden;
     width: 16px;
     height: 16px;
     line-height: 16px;
-    margin: 5px 3px;
+    margin-right: 5px;
     display: inline-block;
 }
 
 /* ---- Container ---- */
 
 .app-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0 auto 0;
+    height: 100%;
 }
 
 /* ---- Password expiration */
@@ -63,7 +50,7 @@ textarea[readonly] {
 /* ---- Notification area ---- */
 
 .notification-area {
-    position: absolute;
+    position: fixed;
     left: 50%;
     top: 15px;
 }
@@ -75,7 +62,6 @@ textarea[readonly] {
     line-height: 1.5em;
     z-index: 20;
     padding: 4px;
-    font-weight: bold;
     text-align: center;
     word-wrap: break-word;
     max-width: 500px;
@@ -88,19 +74,10 @@ textarea[readonly] {
     display: none;
 }
 
-#simple-container .content {
-    height: 100%;
-}
-
 .active-facet {
     display: block;
 }
 
-.facet-header {
-    position: relative;
-    margin: 0 12px 0;
-}
-
 .facet-title {
     position: relative;
     margin-top: 5px;
@@ -125,7 +102,6 @@ textarea[readonly] {
 }
 
 .breadcrumb {
-    background-color: transparent;
     padding: 0;
     margin: 5px 0 0 0;
 }
@@ -136,15 +112,9 @@ textarea[readonly] {
 
 /* ---- Facet Tabs ---- */
 
-.facet-tabs {
-    z-index: 1; /* need to be above facet header */
-}
-
 .facet-group {
     float: left;
     margin-right: 1em;
-    position: relative;
-    height: 100%;
 }
 
 .facet-group-label {
@@ -152,7 +122,6 @@ textarea[readonly] {
 }
 
 .facet-tab {
-    /*height: 31px;*/
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -161,7 +130,6 @@ textarea[readonly] {
 
 .facet-tab li {
     display: inline-block;
-    position: relative;
     padding-right: 1px;
 }
 
@@ -181,7 +149,6 @@ textarea[readonly] {
     color: #6C6F73;
     background-color: #f1f0ee;
     font-weight: bold;
-    height: 20px;
 }
 
 .facet-tab li.settings {
@@ -217,8 +184,7 @@ div[name=settings].facet-group li a {
 /* ---- Facet Controls ---- */
 
 .facet-controls {
-    line-height: 30px;
-    padding: 0 6px 0 6px;
+    padding: 5px 0px;
     clear: both;
 }
 
@@ -231,18 +197,6 @@ div[name=settings].facet-group li a {
     margin: 0 16px 0 0;
 }
 
-.facet-controls .network-activity-indicator img {
-    margin-top: -15px;
-}
-
-/* ---- Facet Content ---- */
-
-.facet-content {
-    position: relative;
-    margin: 0 12px;
-    padding: 0;
-}
-
 /* --- Facet error --- */
 
 .facet-error {
@@ -262,24 +216,23 @@ div[name=settings].facet-group li a {
 
 .search-option {
     margin-right: 8px;
-    width: 206px;
+    width: 178px;
+    display: inline-block;
 }
 
 .search-filter {
-    margin-top: 2px;
-    width: 215px;
+    margin-top: -2px;
     display: inline-block;
 }
 
 .search-filter input {
-    padding-right: 20px;
     width: 178px;
+    display: inline-block;
 }
 
 .search-filter a {
     position: relative;
     margin: 0 0 0 -20px;
-    top: -5px;
 }
 
 .pagination-control {
@@ -296,166 +249,14 @@ div[name=settings].facet-group li a {
     margin: 0;
 }
 
-h1 {
-    font-size: 1.5em;
-    color: #555555;
-    text-transform: uppercase;
-    text-shadow: 1px 1px 0 #FFFFFF;
-}
-
-
-h2 {
-    font-size: 1.5em;
-    color: #333333;
-    text-transform: uppercase;
-    margin-left: 1em;
-    margin-bottom: 0;
-    text-align: left;
-}
-
-h3 {
-    font-size: 1.8em;
-    color: #3c3c3c;
-    text-transform: uppercase;
-    text-shadow: 1px 1px 0 #FFFFFF;
-}
-
 /* ---- Details Facet ---- */
 
 .details-content {
-    border: none;
-    border-top: 1px solid #DFDFDF;
-}
-
-.details-summary {
     border-top: 1px solid #DFDFDF;
-    padding-left: 0.5em;
-    line-height: 25px;
-}
-
-.dialog-section {
-    margin-bottom: 10px;
-}
-
-.section-table {
-    width: 100%;
-}
-
-.section-cell-label {
-    vertical-align: top;
-    width: 120px;
-    max-width: 120px;
-}
-
-.section-cell-field {
-    max-width: 650px;
-}
-
-.details-section {
-    position: relative;
-    margin-top: 1em;
-    margin-right: 3.3em;
-    margin-bottom: 1em;
-}
-
-.details-section .section-table {
-    width: 100%;
-    border-spacing: 12px;
-}
-
-.details-section .section-cell-label {
-    text-align: right;
-    vertical-align: top;
-    width: 120px;
-    word-wrap: break-word;
-}
-
-.details-section .section-cell-field {
-    font-weight: bold;
-    word-wrap: break-word;
-}
-
-.undo {
-    cursor:pointer;
-    padding: 0.2em;
-}
-
-span.attrhint {
-    font-size: 8pt;
-    left: 5em;
-    margin-left: 12.5em;
-    position: absolute;
-    overflow-x: hidden;
-}
-
-a, .ui-widget-content a {
-    text-decoration: none;
-    color: #1d85d5;
-    font-weight: normal;
-    text-transform: none;
 }
 
 /* ---- Dialog ---- */
 
-.ui-dialog {
-    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
-    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
-}
-
-
-.ui-dialog .ui-dialog-content {
-    word-wrap: break-word;
-}
-
-
-.dialog-message {
-    margin: 5px 5px 10px;
-    padding: 10px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    text-align: center;
-}
-
-.ui-widget input, .ui-widget select,
-.ui-widget textarea, .ui-widget button {
-    margin-right: .1em;
-}
-
-span.sub-nav-off > a:link, span.sub-nav-off >  a:visited{
-    color:white;
-}
-
-span.main-nav-off > a:link, span.main-nav-off >  a:visited{
-    color:white;
-}
-
-span.main-separator{
-    background: #333339;
-    padding:0.1em;
-}
-
-.button {
-    text-decoration: none;
-    cursor: pointer;
-    display: inline-block;
-    height: 18px;
-}
-
-.button-label {
-    padding: 0 0.2em;
-    display: inline-block;
-    height: 16px;
-    line-height: 16px;
-}
-
-.action-button {
-    background: none;
-    background-image: none;
-    font-size: 0.9em;
-}
-
 .action-button-disabled,
 .action-button-disabled:focus,
 .action-button-disabled:hover {
@@ -464,13 +265,7 @@ span.main-separator{
     outline: none;
 }
 
-.button-disabled {
-    color: gray;
-    cursor: default;
-}
-
 .aci-attribute-table tbody {
-    border-bottom: 1px solid #8a8a8a;
     height: 10em;
 }
 
@@ -483,16 +278,6 @@ span.main-separator{
     overflow: hidden;
 }
 
-.entity-views{
-    list-style-type:none;
-}
-
-.entity-views li {
-    display:inline;
-    cursor: pointer;
-    padding: 0.4em;
-}
-
 .strikethrough { text-decoration: line-through; }
 
 textarea.certificate {
@@ -673,30 +458,14 @@ table.scrollable tbody {
 
 /* ---- Widgets ---- */
 
-.text-widget input {
-    width: 250px;
-}
-
 .multivalued-widget [name=value] {
     margin-bottom: 1em;
 }
 
-.multivalued-widget input {
-    width: 250px;
-}
-
 .multivalued-widget a[name=add] {
     margin-right: 5px;
 }
 
-.textarea-widget textarea {
-    width: 250px;
-}
-
-.facet-content .textarea-widget textarea {
-    width: 400px;
-}
-
 .option_widget {
     list-style-type: none;
     margin: 0;
@@ -710,6 +479,7 @@ table.scrollable tbody {
 .option_widget.inline,
 .option_widget.inline > li {
     display: inline;
+    margin-right: 8px;
 }
 
 .option_widget.columns > li {
@@ -720,12 +490,11 @@ table.scrollable tbody {
 }
 
 .combobox-widget-input {
-    display: inline-block;
     position: relative;
 }
 
 .combobox-widget-input input {
-    width: 250px;
+    padding-right: 20px;
 }
 
 .combobox-widget-input a i {
@@ -748,91 +517,33 @@ table.scrollable tbody {
     right: 0;
 }
 
-.combobox-widget-list input {
-    width: 238px;
-}
-
 .combobox-widget-list a {
-    position: relative;
-    padding: 0;
-    margin: 0;
-}
-
-.combobox-widget-list a i {
     position: absolute;
     top: 0;
-    bottom: 0;
     right: 0;
-    margin-top: 6px;
-    margin-right: 3px;
-    font-size: 16px;
-}
-
-.host-adder-dialog table.fqdn {
-    width: 100%;
 }
 
-.host-adder-dialog th.hostname {
-    width: 250px;
-}
-
-.host-adder-dialog td.hostname {
-    vertical-align: top;
-}
-
-.host-adder-dialog td.dnszone {
-    vertical-align: top;
-}
-
-.host-adder-dialog input[name=hostname] {
-    width: 100%;
+.combobox-widget-list a i {
+    margin-right: 5px;
 }
 
-.dnszone-adder-dialog .section-cell-label {
-    width: 180px;
+.combobox-widget-list select {
+    margin-top: 3px;
 }
 
-.certificate-status {
-    display: inline-block;
+.combobox-widget .undo {
+    margin-top: 3px;
 }
 
-
 /* ---- HBAC Test ---- */
 
-.hbac-test-header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 30px;
-    line-height: normal;
-}
-
 .hbac-test-header .search-filter {
     float: right;
 }
 
-.hbac-test-content {
-    position: absolute;
-    top: 30px;
-    left: 0;
-    right: 0;
-    bottom: 30px;
-}
-
-.hbac-test-footer {
-    position: absolute;
-    height: 29px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
 .hbac-test-title {
     font-size: 1.8em;
-    color: #3c3c3c;
     text-transform: uppercase;
-    text-shadow: 1px 1px 0 #FFFFFF;
     margin:  0;
 }
 
@@ -841,61 +552,8 @@ table.scrollable tbody {
     margin-right: 5px !important;
 }
 
-div.facet[data-entity=hbactest] .content-table tbody {
-    bottom: 68px;
-}
-
-div.facet[data-entity=hbactest] .content-table tfoot td[name=external] {
-    background-color: #F6F6F6;
-    border: 1px solid #DFDFDF;
-    color: #333333;
-    height: 30px;
-    padding: 0 0.5em;
-    text-align: left;
-}
-
-div.facet[data-name=run_test][data-entity=hbactest] .hbac-test-header {
-    height: 100px;
-}
-
-div.facet[data-name=run_test][data-entity=hbactest] .hbac-test-content {
-    top: 100px;
-}
-
 .hbac-test-top-panel {
-    position: relative;
-    width: 100%;
-    height: 50px;
-    margin-bottom: 20px;
-}
-
-.hbac-test-button-panel {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 130px;
-    padding: 10px;
-
-    border: 1px solid #C9C3BA;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    background-color: #F6F6F6;
-}
-
-.hbac-test-result-panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 151px;
-
-    padding: 10px;
-
-    border: 1px solid #C9C3BA;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-    background-color: #F6F6F6;
+    position: relative;;
 }
 
 .hbac-test-navigation-buttons {
@@ -913,39 +571,16 @@ div.facet[data-name=run_test][data-entity=hbactest] .hbac-test-content {
     font-weight: normal;
 }
 
-/* --- SSH key store --- */
 
-span.sshkey-status, a.sshkey-set {
-    padding-right: 5px;
-}
 /* --- Automember --- */
 
-.automember-header {
-    position: absolute;
-    top: 0;
-    left: 3px;
-    right: 3px;
-    height: 52px;
-}
-
-.automember-content {
-    position: absolute;
-    top: 52px;
-    left: 0;
-    right: 0;
-    bottom: 0px;
-}
-
 .automember-header .default_group {
-    border-bottom: 1px solid #DFDFDF;
-    border-top: 1px solid #DFDFDF;
     padding-bottom: 5px;
-    padding-top: 8px;
 }
 
 .automember-header .default_group h2 {
     display: inline-block;
-    margin: 0 15px 0 20px;
+    margin: 0 15px 0 0;
 }
 
 .automember-header .default_group label {
@@ -1089,7 +724,6 @@ form#login {
     display: none;
     font-size: 70%;
     vertical-align: 20%;
-    margin-right: 3px;
     /* Font awesome style, TODO: use mixin */
     display: inline-block;
     font-family: FontAwesome;
@@ -1149,7 +783,3 @@ form#login {
     font-weight: bold;
     font-size: 1.1em;
 }
-
-.choice-header {
-    font-weight: bold;
-}
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;
 }
 
diff --git a/install/ui/src/freeipa/certificate.js b/install/ui/src/freeipa/certificate.js
index 001f70f6d..b557081d1 100755
--- a/install/ui/src/freeipa/certificate.js
+++ b/install/ui/src/freeipa/certificate.js
@@ -1191,7 +1191,7 @@ IPA.cert.search_facet = function(spec) {
 
         that.search_option = $('<select/>', {
             name: 'search_option',
-            'class': 'search-option'
+            'class': 'search-option form-control'
         });
 
         that.filter_container.before(that.search_option);
diff --git a/install/ui/src/freeipa/details.js b/install/ui/src/freeipa/details.js
index b2f07e463..8359b7fcb 100644
--- a/install/ui/src/freeipa/details.js
+++ b/install/ui/src/freeipa/details.js
@@ -630,15 +630,10 @@ exp.details_facet = IPA.details_facet = function(spec, no_init) {
     that.create_content = function(container) {
 
         that.content = $('<div/>', {
-            'class': 'details-content'
+            'class': 'details-content row'
         }).appendTo(container);
 
         that.widgets.create(that.content);
-
-        $('<span/>', {
-            name: 'summary',
-            'class': 'details-summary'
-        }).appendTo(container);
     };
 
     /**
diff --git a/install/ui/src/freeipa/dialog.js b/install/ui/src/freeipa/dialog.js
index 6fdfbc62d..a7f5e09fd 100644
--- a/install/ui/src/freeipa/dialog.js
+++ b/install/ui/src/freeipa/dialog.js
@@ -264,7 +264,7 @@ IPA.dialog = function(spec) {
         that.header_node.appendTo(that.dialog_node);
 
         that.body_node = $('<div/>', {
-            'class': 'rcue-dialog-body'
+            'class': 'rcue-dialog-body row'
         });
         // for backwards compatibility
         that.container = that.body_node;
@@ -768,7 +768,7 @@ IPA.adder_dialog = function(spec) {
 
         $('<div/>', {
             html: text.get('@i18n:dialogs.available'),
-            'class': 'adder-dialog-header ui-widget-header'
+            'class': 'adder-dialog-header'
         }).appendTo(available_panel);
 
         var available_content = $('<div/>', {
@@ -789,7 +789,7 @@ IPA.adder_dialog = function(spec) {
 
         $('<div/>', {
             html: text.get('@i18n:dialogs.prospective'),
-            'class': 'adder-dialog-header ui-widget-header'
+            'class': 'adder-dialog-header'
         }).appendTo(selected_panel);
 
         var selected_content = $('<div/>', {
@@ -838,7 +838,7 @@ IPA.adder_dialog = function(spec) {
 
             $('<div/>', {
                 html: text.get('@i18n:objects.sudorule.external'),
-                'class': 'adder-dialog-header ui-widget-header'
+                'class': 'adder-dialog-header'
             }).appendTo(external_panel);
 
             var external_content = $('<div/>', {
diff --git a/install/ui/src/freeipa/dns.js b/install/ui/src/freeipa/dns.js
index 5b8c5c090..ae76b59a1 100644
--- a/install/ui/src/freeipa/dns.js
+++ b/install/ui/src/freeipa/dns.js
@@ -416,7 +416,7 @@ IPA.dnszone_name_section_layout = function(spec) {
 
         var label_text = widget.label + that.get_measurement_unit_text(widget);
 
-        var label_cont = $('<div/>', { 'class': 'control-label' });
+        var label_cont = $('<div/>', { 'class': 'control-label col-sm-3' });
 
         widget.create_radio(label_cont);
 
diff --git a/install/ui/src/freeipa/facet.js b/install/ui/src/freeipa/facet.js
index ccaf6ad28..12d8a390a 100644
--- a/install/ui/src/freeipa/facet.js
+++ b/install/ui/src/freeipa/facet.js
@@ -542,7 +542,7 @@ exp.facet = IPA.facet = function(spec, no_init) {
             that.dom_node.detach();
         } else {
             that.dom_node = $('<div/>', {
-                'class': 'facet active-facet',
+                'class': 'facet active-facet fluid-container',
                 name: that.name,
                 'data-name': that.name,
                 'data-entity': entity_name
@@ -563,16 +563,16 @@ exp.facet = IPA.facet = function(spec, no_init) {
         dom_node.addClass(that.display_class);
 
         that.header_container = $('<div/>', {
-            'class': 'facet-header'
+            'class': 'facet-header col-sm-12'
         }).appendTo(dom_node);
         that.create_header(that.header_container);
 
         that.content = $('<div/>', {
-            'class': 'facet-content'
+            'class': 'facet-content col-sm-12'
         }).appendTo(dom_node);
 
         that.error_container = $('<div/>', {
-            'class': 'facet-content facet-error'
+            'class': 'facet-content facet-error col-sm-12'
         }).appendTo(dom_node);
 
         that.create_content(that.content);
diff --git a/install/ui/src/freeipa/hbactest.js b/install/ui/src/freeipa/hbactest.js
index 1bf90b766..a936029b6 100644
--- a/install/ui/src/freeipa/hbactest.js
+++ b/install/ui/src/freeipa/hbactest.js
@@ -298,6 +298,7 @@ IPA.hbac.test_select_facet = function(spec) {
 
         that.filter = $('<input/>', {
             type: 'text',
+            'class': 'form-control',
             name: 'filter'
         }).appendTo(filter_container);
 
@@ -331,7 +332,8 @@ IPA.hbac.test_select_facet = function(spec) {
         var tr = $('<tr/>').appendTo(that.table.tfoot);
 
         var td = $('<td/>', {
-            name: 'external'
+            name: 'external',
+            colspan: that.columns.length + 1
         }).appendTo(tr);
 
         that.external_radio = $('<input/>', {
@@ -524,11 +526,11 @@ IPA.hbac.test_run_facet = function(spec) {
         }).appendTo(container);
 
         var top_panel = $('<div/>', {
-            'class': 'hbac-test-top-panel'
+            'class': 'hbac-test-top-panel row'
         }).appendTo(header);
 
         var button_panel = $('<div/>', {
-            'class': 'hbac-test-button-panel'
+            'class': 'hbac-test-button-panel col-sm-2'
         }).appendTo(top_panel);
 
         that.run_button = IPA.button({
@@ -544,7 +546,7 @@ IPA.hbac.test_run_facet = function(spec) {
         }).appendTo(button_panel);
 
         var result_panel = $('<div/>', {
-            'class': 'hbac-test-result-panel'
+            'class': 'hbac-test-result-panel col-sm-10'
         }).appendTo(top_panel);
 
         that.test_result = $('<p/>', {
diff --git a/install/ui/src/freeipa/host.js b/install/ui/src/freeipa/host.js
index aa08409c3..c550e528d 100644
--- a/install/ui/src/freeipa/host.js
+++ b/install/ui/src/freeipa/host.js
@@ -325,14 +325,15 @@ IPA.host_fqdn_widget = function(spec) {
 
     that.create = function(container) {
         that.container = container;
+        container.addClass('col-sm-12');
 
         var hostname = that.widgets.get_widget('hostname');
         var dnszone = that.widgets.get_widget('dnszone');
 
         var layout = IPA.fluid_layout({
-            cont_cls: 'row-fluid',
-            group_cls: 'control-group span6',
-            widget_cls: 'control',
+            cont_cls: 'row fluid-row',
+            group_cls: 'col-sm-6 form-group',
+            widget_cls: 'controls',
             label_cls: 'control-label'
         });
 
diff --git a/install/ui/src/freeipa/search.js b/install/ui/src/freeipa/search.js
index dc7bfcf42..0a26dac9b 100644
--- a/install/ui/src/freeipa/search.js
+++ b/install/ui/src/freeipa/search.js
@@ -117,6 +117,7 @@ IPA.search_facet = function(spec, no_init) {
 
         that.filter = $('<input/>', {
             type: 'text',
+            'class': 'form-control',
             name: 'filter'
         }).appendTo(that.filter_container);
 
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index 2b3d3e81d..6bec38275 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -321,7 +321,7 @@ IPA.input_widget = function(spec) {
 
         $('<span/>', {
             name: 'error_link',
-            'class': 'help-inline',
+            'class': 'help-block',
             style: 'display:none'
         }).appendTo(container);
     };
@@ -674,8 +674,9 @@ IPA.text_widget = function(spec) {
 
         container.addClass('text-widget');
 
-        that.display_control = $('<label/>', {
+        that.display_control = $('<p/>', {
             name: that.name,
+            'class': 'form-control-static',
             style: 'display: none;'
         }).appendTo(container);
 
@@ -685,6 +686,7 @@ IPA.text_widget = function(spec) {
             type: that.input_type,
             name: that.name,
             id: id,
+            'class': 'form-control',
             size: that.size,
             title: that.tooltip,
             keyup: function() {
@@ -1324,7 +1326,7 @@ IPA.option_widget_base = function(spec, that) {
         var enabled = that.enabled && option.enabled;
 
         var opt_cont = $('<span/>', {
-            "class": that.intput_type
+            "class": that.intput_type + '-cnt'
         }).appendTo(container);
 
         option.input_node = $('<input/>', {
@@ -1720,7 +1722,7 @@ IPA.standalone_option = function(spec, container, label) {
     spec.type = spec.type || 'checkbox';
 
     var opt_cont = $('<span/>', {
-        'class': spec.type
+        'class': spec.type + '-cnt'
     });
 
     var input = $('<input/>', spec);
@@ -1767,6 +1769,7 @@ IPA.select_widget = function(spec) {
 
         that.select = $('<select/>', {
             name: that.name,
+            'class':'form-control',
             change: function() {
                 that.value_changed.notify([], that);
                 that.emit('value-change', { source: that });
@@ -1902,6 +1905,7 @@ IPA.textarea_widget = function (spec) {
             name: that.name,
             rows: that.rows,
             cols: that.cols,
+            'class': 'form-control',
             readOnly: !!that.read_only,
             title: that.tooltip,
             keyup: function() {
@@ -2375,7 +2379,7 @@ IPA.table_widget = function (spec) {
         container.addClass('table-widget table-responsive');
 
         that.table = $('<table/>', {
-            'class': 'content-table table table-condensed table-striped table-bordered',
+            'class': 'content-table table table-condensed table-striped table-hover table-bordered',
             name: that.name
         }).appendTo(container);
 
@@ -3222,6 +3226,7 @@ IPA.combobox_widget = function(spec) {
         that.input = $('<input/>', {
             type: 'text',
             name: that.name,
+            'class': 'form-control',
             id: id,
             title: that.tooltip,
             keydown: that.on_input_keydown,
@@ -3276,6 +3281,7 @@ IPA.combobox_widget = function(spec) {
             that.filter = $('<input/>', {
                 type: 'text',
                 name: 'filter',
+                'class': 'form-control',
                 keyup: that.on_filter_keyup,
                 keydown: that.on_filter_keydown,
                 blur: that.list_child_on_blur
@@ -3297,8 +3303,6 @@ IPA.combobox_widget = function(spec) {
             }).appendTo(div);
 
             that.search_button.bind('mousedown', that.on_no_close);
-
-            div.append('<br/>');
         }
 
         that.list = $('<select/>', {
@@ -3884,7 +3888,7 @@ IPA.button = function(spec) {
     spec = spec || {};
 
     var el = spec.element || '<button/>';
-    var button_class = spec.button_class || 'btn';
+    var button_class = spec.button_class || 'btn btn-default';
 
     var button = $(el, {
         id: spec.id,
@@ -4074,6 +4078,7 @@ IPA.section = function(spec) {
     that.create = function(container) {
 
         that.widget_create(container);
+        container.addClass('details-section col-sm-12');
 
         if (that.show_header) {
             that.create_header(container);
@@ -4081,7 +4086,7 @@ IPA.section = function(spec) {
 
         that.content_container = $('<div/>', {
             name: that.name,
-            'class': 'details-section'
+            'class': 'details-section-content'
         }).appendTo(container);
 
         that.create_content();
@@ -4212,9 +4217,9 @@ exp.fluid_layout = IPA.fluid_layout = function(spec) {
     var that = IPA.layout(spec);
 
     that.cont_cls = spec.cont_cls || 'form-horizontal';
-    that.widget_cls = spec.widget_cls || 'controls';
-    that.label_cls = spec.label_cls || 'control-label';
-    that.group_cls = spec.group_cls || 'control-group';
+    that.widget_cls = spec.widget_cls || 'col-md-6 controls';
+    that.label_cls = spec.label_cls || 'col-md-2 control-label';
+    that.group_cls = spec.group_cls || 'form-group';
 
     that.create = function(widgets) {
 
@@ -4317,14 +4322,14 @@ exp.fluid_layout = IPA.fluid_layout = function(spec) {
 
         var row = that._get_row(event);
         if (!row) return;
-        row.toggleClass('error', true);
+        row.toggleClass('has-error', true);
     };
 
     that.on_error_hide= function(event) {
 
         var row = that._get_row(event);
         if (!row) return;
-        row.toggleClass('error', false);
+        row.toggleClass('has-error', false);
     };
 
     that.on_visible_change = function(event) {
@@ -4476,7 +4481,7 @@ IPA.multiple_choice_section = function(spec) {
         var i, choice, choices;
 
         that.widget_create(container);
-        that.container.addClass('multiple-choice-section');
+        that.container.addClass('multiple-choice-section col-sm-12');
 
         that.header_element = $('<div/>', {
             'class': 'multiple-choice-section-header',
diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js
index 33d49aa47..9e7ea361b 100644
--- a/install/ui/test/details_tests.js
+++ b/install/ui/test/details_tests.js
@@ -90,13 +90,13 @@ test("Testing IPA.details_section.create().", function() {
     var container = $("<div/>");
     section.create(container);
 
-    var section_el = $('.details-section', container);
+    var section_el = $('.details-section-content', container);
 
     same(
         section_el.length, 1,
         'Verifying section element');
 
-    var controls = $('.control-group', section_el);
+    var controls = $('.form-group', section_el);
     same(
         controls.length, fields.length,
         'Verifying number of controls');
@@ -247,7 +247,7 @@ test("Testing details lifecycle: create, load.", function(){
         identity.length,
         'Verifying section for identity is created');
 
-    var rows = $('.control-group', identity);
+    var rows = $('.form-group', identity);
 
     same(
         rows.length, 6,
@@ -313,13 +313,13 @@ test("Testing IPA.details_section_create again()",function() {
     section.create(container);
     facet.load(data);
 
-   var section_el = $('.details-section', container);
+   var section_el = $('.details-section-content', container);
 
     same(
         section_el.length, 1,
         'Verifying section element');
 
-    var controls = $('.control-group', section_el);
+    var controls = $('.form-group', section_el);
     same(
         controls.length, fields.length,
         'Verifying number of controls');
diff --git a/ipatests/test_webui/ui_driver.py b/ipatests/test_webui/ui_driver.py
index 1345d2d32..3abc33027 100644
--- a/ipatests/test_webui/ui_driver.py
+++ b/ipatests/test_webui/ui_driver.py
@@ -789,6 +789,7 @@ class UI_driver(object):
         self.wait()
         self.wait_for_request()
 
+        list_cnt = self.find('.combobox-widget-list', By.CSS_SELECTOR, cb, strict=True)
         search_btn = self.find('a[name=search] i', By.CSS_SELECTOR, cb, strict=True)
         opt_s = "select[name=list] option[value='%s']" % value
         option = self.find(opt_s, By.CSS_SELECTOR, cb)
@@ -803,7 +804,7 @@ class UI_driver(object):
         option.click()
 
         # Chrome does not close search area on click
-        if search_btn.is_displayed():
+        if list_cnt.is_displayed():
             self.driver.switch_to_active_element().send_keys(Keys.RETURN)
 
         self.wait()
@@ -822,13 +823,13 @@ class UI_driver(object):
         value = el.get_attribute('value')
         return value
 
-    def get_field_text(self, name, parent=None, element='label'):
+    def get_field_text(self, name, parent=None, element='p'):
 
-        s = "div[name='%s'] %s[name='%s']" % (name, element, name)
+        s = ".controls %s[name='%s']" % (element, name)
         return self.get_text(s, parent)
 
     def get_field_value(self, name, parent=None, element='input'):
-        s = "div[name='%s'] %s[name='%s']" % (name, element, name)
+        s = ".controls %s[name='%s']" % (element, name)
         return self.get_value(s, parent)
 
     def get_multivalued_value(self, name, parent=None):
-- 
cgit