[UI Framework] [K7] Integrate into Kibana (#13693)

* Remove Bootstrap reset and incorporate UI Framework reset.
* Remove naked element selectors from base.less.
* Incorporate K7 UI Framework into Kibana core.

src/ui/public/autoload/styles.js

@@ -1,5 +1,5 @@
 // Kibana UI Framework
-require('../../../../ui_framework/dist/ui_framework.css');
+require('../../../../ui_framework/dist/ui_framework_theme_light.css');
 
 // All Kibana styles inside of the /styles dir
 const context = require.context('../styles', false, /[\/\\](?!mixins|variables|_|\.)[^\/\\]+\.less/);

src/ui/public/styles/base.less

@@ -3,17 +3,6 @@
 @import (reference) "./variables";
 @import (reference) "~ui/styles/bootstrap/bootstrap";
 
-html,
-body {
-  .flex-parent();
-  height: 100%;
-  margin: 0;
-}
-
-label > small {
-  font-weight: normal;
-}
-
 .small {
   font-size: 0.9em !important;
 }
@@ -49,11 +38,6 @@ label > small {
   font-family: @font-family-monospace;
 }
 
-code {
-  word-break: break-all;
-  word-wrap: break-word;
-}
-
 ul.navbar-inline li {
   display: inline;
 }
@@ -120,15 +104,6 @@ notifications {
   margin-bottom: 0px!important;
 }
 
-a {
-  // overriden by next rule for a tags that actually have an href
-  cursor: default;
-}
-
-.link, [ng-click], [clip-copy], [href], [confirm-click] {
-  cursor: pointer;
-}
-
 .application,
 .app-container {
   > * {
@@ -233,16 +208,6 @@ kbn-table, .kbn-table {
   }
 }
 
-//== Generic Table
-table {
-  td .fa {
-    // font-awesome's override of the line-height usually doesn't
-    // cauase problems, but in the table it pushes the icon to the
-    // top of the row
-    line-height: @line-height-base;
-  }
-}
-
 //== SavedObjectFinder
 saved-object-finder,
 paginated-selectable-list {
@@ -346,10 +311,6 @@ input[type="checkbox"],
   }
 }
 
-textarea {
-  resize: vertical;
-}
-
 .field-collapse-toggle {
   color: @field-collapse-toggle-color;
   margin-left: 10px !important;
@@ -397,18 +358,6 @@ style-compile {
   }
 }
 
-mark, .mark {
-  background-color: @mark-bg;
-  border-radius: 2px;
-}
-
-fieldset {
-  margin: @form-group-margin-bottom;
-  padding: @form-group-margin-bottom;
-  border: 1px solid @input-border;
-  border-radius: @input-border-radius-base;
-}
-
 [fixed-scroll] {
   overflow-x: auto;
   padding-bottom: 0px;

src/ui/public/styles/bootstrap/code.less

@@ -1,69 +0,0 @@
-//
-// Code (inline and block)
-// --------------------------------------------------
-
-
-// Inline and block code styles
-code,
-kbd,
-pre,
-samp {
-  font-family: @font-family-monospace;
-}
-
-// Inline code
-code {
-  padding: 2px 4px;
-  font-size: 90%;
-  color: @code-color;
-  background-color: @code-bg;
-  border-radius: @border-radius-base;
-}
-
-// User input typically entered via keyboard
-kbd {
-  padding: 2px 4px;
-  font-size: 90%;
-  color: @kbd-color;
-  background-color: @kbd-bg;
-  border-radius: @border-radius-small;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
-
-  kbd {
-    padding: 0;
-    font-size: 100%;
-    font-weight: bold;
-    box-shadow: none;
-  }
-}
-
-// Blocks of code
-pre {
-  display: block;
-  padding: ((@line-height-computed - 1) / 2);
-  margin: 0 0 (@line-height-computed / 2);
-  font-size: (@font-size-base - 1); // 14px to 13px
-  line-height: @line-height-base;
-  word-break: break-all;
-  word-wrap: break-word;
-  color: @pre-color;
-  background-color: @pre-bg;
-  border: 1px solid @pre-border-color;
-  border-radius: @border-radius-base;
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    padding: 0;
-    font-size: inherit;
-    color: inherit;
-    white-space: pre-wrap;
-    background-color: transparent;
-    border-radius: 0;
-  }
-}
-
-// Enable scrollable blocks of code
-.pre-scrollable {
-  max-height: @pre-scrollable-max-height;
-  overflow-y: scroll;
-}

src/ui/public/styles/bootstrap/forms.less

@@ -3,92 +3,6 @@
 // --------------------------------------------------
 
 
-// Normalize non-controls
-//
-// Restyle and baseline non-control form elements.
-
-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
-  // so we reset that to ensure it behaves more like a standard block element.
-  // See https://github.com/twbs/bootstrap/issues/12359.
-  min-width: 0;
-}
-
-legend {
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin-bottom: @line-height-computed;
-  font-size: (@font-size-base * 1.5);
-  line-height: inherit;
-  color: @legend-color;
-  border: 0;
-  border-bottom: 1px solid @legend-border-color;
-}
-
-label {
-  display: inline-block;
-  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
-
-// Normalize form controls
-//
-// While most of our form styles require extra classes, some basic normalization
-// is required to ensure optimum display with or without those classes to better
-// address browser inconsistencies.
-
-// Override content-box in Normalize (* isn't specific enough)
-input[type="search"] {
-  .box-sizing(border-box);
-}
-
-// Position radios and checkboxes better
-input[type="radio"],
-input[type="checkbox"] {
-  margin: 4px 0 0;
-  margin-top: 1px \9; // IE8-9
-  line-height: normal;
-}
-
-input[type="file"] {
-  display: block;
-}
-
-// Make range inputs behave like textual form controls
-input[type="range"] {
-  display: block;
-  width: 100%;
-}
-
-// Make multiple select elements height not fixed
-select[multiple],
-select[size] {
-  height: auto;
-}
-
-// Focus for file, radio, and checkbox
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-  .tab-focus();
-}
-
-// Adjust output element
-output {
-  display: block;
-  padding-top: (@padding-base-vertical + 1);
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  color: @input-color;
-}
-
-
 // Common form controls
 //
 // Shared size and type resets for form controls. Apply `.form-control` to any
@@ -161,50 +75,6 @@ output {
   }
 }
 
-
-// Search inputs in iOS
-//
-// This overrides the extra rounded corners on search inputs in iOS so that our
-// `.form-control` class can properly style them. Note that this cannot simply
-// be added to `.form-control` as it's not specific enough. For details, see
-// https://github.com/twbs/bootstrap/issues/11586.
-
-input[type="search"] {
-  -webkit-appearance: none;
-}
-
-
-// Special styles for iOS temporal inputs
-//
-// In Mobile Safari, setting `display: block` on temporal inputs causes the
-// text within the input to become vertically misaligned. As a workaround, we
-// set a pixel line-height that matches the given height of the input, but only
-// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
-//
-// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  input[type="date"],
-  input[type="time"],
-  input[type="datetime-local"],
-  input[type="month"] {
-    &.form-control {
-      line-height: @input-height-base;
-    }
-
-    &.input-sm,
-    .input-group-sm & {
-      line-height: @input-height-small;
-    }
-
-    &.input-lg,
-    .input-group-lg & {
-      line-height: @input-height-large;
-    }
-  }
-}
-
-
 // Form groups
 //
 // Designed to help with the organization and spacing of vertical forms. For
@@ -265,18 +135,6 @@ input[type="search"] {
   margin-left: 10px; // space out consecutive inline controls
 }
 
-// Apply same disabled cursor tweak as for inputs
-// Some special care is needed because <label>s don't inherit their parent's `cursor`.
-//
-// Note: Neither radios nor checkboxes can be readonly.
-input[type="radio"],
-input[type="checkbox"] {
-  &[disabled],
-  &.disabled,
-  fieldset[disabled] & {
-    cursor: @cursor-disabled;
-  }
-}
 // These classes are used directly on <label>s
 .radio-inline,
 .checkbox-inline {