Remove unused classes and make background of Account and Management apps white. (#9657)

Backports PR #9582

**Commit 1:**
Remove unused kuiPage, kuiPageView, kuiInput, kuiFormPanel, kuiFormPanelLayout, kuiMenuItem, kuiTableControls, and kuiTableControlAction classes from base.less.
- Fix appearance of invalid but untouched TextInput component when controlled by Angular.
- Fix bug with kuiViewContent--constrainedWidth when content doesn't push it to its max-width.
- Set background of account and management sections to white.

* Original sha: c056a56674
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-21T03:46:26Z

**Commit 2:**
Add border around Management panels on white background.

* Original sha: 5866d6fed9
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T22:43:05Z

**Commit 3:**
Add border to Tabs.

* Original sha: ca1ff24847
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-26T21:12:09Z

src/core_plugins/kibana/public/management/styles/main.less

@@ -12,6 +12,14 @@ kbn-management-objects-view {
   display: block;
 }
 
+.tab-account {
+  background-color: #FFFFFF;
+}
+
+.tab-management {
+  background-color: #FFFFFF;
+}
+
 .kbn-management-tab:first-letter {
   text-transform: capitalize;
 }
@@ -30,6 +38,9 @@ kbn-management-landing {
     .panel-body {
       padding-bottom: 30px;
       position: relative;
+      border-left: 1px solid #E4E4E3;
+      border-right: 1px solid #E4E4E3;
+      border-bottom: 1px solid #E4E4E3;
     }
   }
 

src/ui/public/styles/base.less

@@ -620,6 +620,7 @@ fieldset {
 }
 
 .kuiViewContent--constrainedWidth {
+  width: 100%;
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
@@ -630,30 +631,6 @@ fieldset {
   padding-right: 20px;
 }
 
-.kuiPage {
-  padding: 20px 30px 28px;
-  margin: 20px;
-  background-color: white;
-  max-width: 1200px;
-}
-
-/**
- * 1. Center content.
- * 2. Expand to fill container.
- */
-.kuiPageView {
-  display: flex;
-  flex-direction: column;
-  align-items: center; // 1
-  justify-content: center; // 1
-  flex-grow: 1; // 2
-  background-color: #f6f6f6;
-}
-
-  .kuiPageView__content {
-    max-width: 1100px;
-  }
-
 .kuiSubHeader {
   display: flex;
   align-items: center;
@@ -794,7 +771,6 @@ fieldset {
   }
 
 .kuiTextArea,
-.kuiInput,
 .kuiStaticInput {
   display: block;
   width: 100%;
@@ -809,7 +785,6 @@ fieldset {
   border-color: transparent;
 }
 
-.kuiInput,
 .kuiTextArea {
   padding: 5px 15px;
   border-color: #D4D4D4;
@@ -857,54 +832,6 @@ fieldset {
   padding: 12px;
 }
 
-/**
- * 1. Stack title and content children. Necessary for scrollable content;
- */
-.kiuFormPanel--scrollable {
-  display: flex; // 1
-  flex-direction: column; // 1
-}
-
-.kuiFormPanel--verticalLayout {
-  & + & {
-    border-top: 0;
-  }
-}
-
-.kuiFormPanel--horizontalLayout {
-  flex: 1 1 auto;
-
-  & + & {
-    border-left: 0;
-  }
-}
-
-  .kuiFormPanel__title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    font-size: 14px;
-    line-height: 12px;
-    font-weight: 300;
-    color: #2d2d2d;
-    border-bottom: 1px solid #efefef;
-  }
-
-  .kuiFormPanel__label {
-    font-weight: 700;
-  }
-
-  .kuiFormPanel__content {
-    overflow-y: auto;
-  }
-
-.kuiFormPanelLayout {
-  display: flex;
-  align-items: stretch;
-  height: 100%;
-}
-
 .kuiList {
   margin-bottom: 10px;
 }
@@ -925,28 +852,6 @@ fieldset {
   }
 }
 
-.kuiMenuItem {
-  padding: 10px;
-  font-size: 14px;
-  font-weight: 400;
-  color: #2d2d2d;
-  border-bottom: 1px solid #efefef;
-
-  &.kuiMenuItem-isSelected {
-    background-color: #e4e4e4;
-
-    &:hover {
-      background-color: #e4e4e4;
-      cursor: default;
-    }
-  }
-
-  &:hover {
-    background-color: @list-group-menu-item-active-bg;
-    cursor: pointer;
-  }
-}
-
 /**
  * Utility class.
  * TODO: Move to UI Framework.
@@ -975,28 +880,6 @@ fieldset {
     flex: 1 1 auto;
   }
 
-.kuiTableControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-  .kuiTableControls__input {
-    display: flex;
-    align-items: center;
-    flex: 1 1 auto;
-  }
-
-  .kuiTableControls__actions {
-    align-items: center;
-    display: flex;
-  }
-
-  .kuiTableControlAction {
-    margin-right: 5px;
-  }
-
-
 .kuiColumn + .kuiColumn {
   padding-left: 10px;
 }

src/ui_framework/components/index.scss

@@ -72,8 +72,15 @@ $formTransitionTiming: 0.1s linear;
   border-radius: $buttonBorderRadius;
   transition: border-color $formTransitionTiming;
 
+  /**
+   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
+   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
+   *    with it.
+   */
   &:invalid {
-    border-color: $errorBorderColor;
+    &:not(.ng-untouched) { /* 1 */
+      border-color: $errorBorderColor;
+    }
   }
 
   &:focus {

src/ui_framework/components/tabs/_tabs.scss

@@ -13,13 +13,18 @@
     font-size: 14px;
     color: $subduedFontColor;
     background-color: #ffffff; /* 1 */
-    border: 1px solid #ffffff;
+    border: 1px solid $panelColor;
+    border-bottom: none;
     border-radius: 0; /* 1 */
 
+    & + & {
+      border-left: none;
+    }
+
     &:focus {
       color: $linkColor;
-      border-color: $selectedBorderColor;
-      outline: none !important; /* 1 */
+      z-index: 1;
+      outline: 1px solid $selectedBorderColor !important; /* 1 */
     }
 
     &:hover:not(.kuiTab-isSelected) {
@@ -36,7 +41,6 @@
     &.kuiTab-isSelected {
       color: $fontColor;
       background-color: #F2F2F2;
-      border-color: #F2F2F2;
       cursor: default;
     }
   }

src/ui_framework/doc_site/src/components/guide_page/_guide_page.scss

@@ -7,9 +7,9 @@
 
 .guidePageBody {
   flex: 1 1 auto;
-  padding: 0 80px 0 80px + $guideSideNavWidth;
+  padding: 0 80px 0 81px + $guideSideNavWidth;
 
   @include whenNarrowerThan($normalBreakpoint) {
-    padding: 0 20px 0 $guideSideNavSmallWidth;
+    padding: 0 20px 0 1px + $guideSideNavSmallWidth;
   }
 }