* Add EUI v0.0.7 as a dependency. - Add support for using dark theme EUI CSS in Dashboard. - Set light theme as the default. - Add comments to chrome.jade about role of theme node. - Add (WTFPL OR MIT) to acceptable licenses. * Remove old reset CSS. - Remove naked element selectors from base.less. - Remove Bootstrap resets. - Remove UI Framework reset. - Remove unused reset styles from UI Framework. * Fix CSS regressions caused by removal of CSS reset. - Replace usage of sr-only with euiScreenReaderOnly. - Apply euiButtonEmpty classes to the 'Add a filter' button. - Fix Notification padding and layout. - Apply euiTabs styles to Timepicker mode tabs. - Fix layout of Available Fields heading in Discover. - Add padding to Popular Fields container in Discover. - Push down Selected Fields heading in Discover sidebar. - Fix appearance of links in Discover sidebar. - Fix height of pills in Filter Bar. * Fix timepicker tests. - Remove kbn-accessible-click from timepicker buttons. * Fix functional tests. - Use byCssSelector inside of testSubjects.find. - Delete flaky view_edit.js test: 'when time changed is stored with dashboard'. - Delete flaky view_edit.js test: 'and preserves edits on cancel > when time changed is stored with dashboard'. - Delete flake Gauge Chart tests. EUI changed the font size, and the text within the gauges doesn't render when the window is too small.
This commit is contained in:
CJ Cenizal
GitHub
parent
492a15eb2d
commit
d67d6206e6
|
|
@ -73,6 +73,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@elastic/datemath": "2.3.0",
|
||||
"@elastic/eui": "0.0.7",
|
||||
"@elastic/filesaver": "1.1.2",
|
||||
"@elastic/numeral": "2.3.0",
|
||||
"@elastic/test-subj-selector": "0.2.1",
|
||||
|
|
@ -96,7 +97,7 @@
|
|||
"babel-plugin-transform-async-generator-functions": "6.24.1",
|
||||
"babel-plugin-transform-class-properties": "6.24.1",
|
||||
"babel-plugin-transform-define": "1.3.0",
|
||||
"babel-plugin-transform-object-rest-spread": "6.23.0",
|
||||
"babel-plugin-transform-object-rest-spread": "6.26.0",
|
||||
"babel-polyfill": "6.20.0",
|
||||
"babel-preset-env": "1.4.0",
|
||||
"babel-preset-react": "6.22.0",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import _ from 'lodash';
|
|||
import angular from 'angular';
|
||||
import { uiModules } from 'ui/modules';
|
||||
import chrome from 'ui/chrome';
|
||||
import { applyTheme } from 'ui/theme';
|
||||
|
||||
import 'ui/query_bar';
|
||||
|
||||
|
|
@ -329,11 +330,13 @@ app.directive('dashboardApp', function ($injector) {
|
|||
function setDarkTheme() {
|
||||
chrome.removeApplicationClass(['theme-light']);
|
||||
chrome.addApplicationClass('theme-dark');
|
||||
applyTheme('dark');
|
||||
}
|
||||
|
||||
function setLightTheme() {
|
||||
chrome.removeApplicationClass(['theme-dark']);
|
||||
chrome.addApplicationClass('theme-light');
|
||||
applyTheme('light');
|
||||
}
|
||||
|
||||
if ($route.current.params && $route.current.params[DashboardConstants.NEW_VISUALIZATION_ID_PARAM]) {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-list-header">
|
||||
<div class="discover-sidebar-list-header sidebar-list-header">
|
||||
<h3 class="sidebar-list-header-label" id="selected_fields" tabindex="0">Selected Fields</h3>
|
||||
</div>
|
||||
<ul class="list-unstyled discover-selected-fields" >
|
||||
|
|
@ -46,15 +46,25 @@
|
|||
</discover-field>
|
||||
</ul>
|
||||
|
||||
<div class="sidebar-list-header sidebar-item">
|
||||
<h3 class="sidebar-list-header-label" id="available_fields" tabindex="0">Available Fields
|
||||
<span
|
||||
ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
|
||||
<div class="sidebar-list-header sidebar-item euiFlexGroup euiFlexGroup--gutterMedium">
|
||||
<h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex="0">
|
||||
Available Fields
|
||||
</h3>
|
||||
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<button
|
||||
ng-click="showFields = !showFields"
|
||||
aria-hidden="true"
|
||||
class="fa visible-xs visible-sm pull-right field-collapse-toggle"
|
||||
></span>
|
||||
|
||||
class="kuiButton kuiButton--small visible-xs visible-sm pull-right field-collapse-toggle"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="kuiIcon"
|
||||
ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
|
||||
></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<button
|
||||
type="button"
|
||||
ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
|
||||
|
|
@ -66,7 +76,7 @@
|
|||
>
|
||||
<span aria-hidden="true" class="kuiIcon fa-gear"></span>
|
||||
</button>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-item discover-field-details" ng-show="showFilter" id="discoverFieldFilter">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
Top 5 values in
|
||||
<span ng-if="!field.details.error">
|
||||
<a
|
||||
href=""
|
||||
class="kuiLink"
|
||||
kbn-accessible-click
|
||||
ng-show="!field.indexPattern.metaFields.includes(field.name) && !field.scripted"
|
||||
ng-click="onAddFilter('_exists_', field.name, '+')">
|
||||
{{::field.details.exists}}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,14 @@
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.discover-sidebar-list-header {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.discover-popular-fields {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.discover-wrapper {
|
||||
padding-right: 0px !important;
|
||||
padding-left: @collapser-width;
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
></div>
|
||||
|
||||
<span
|
||||
class="sr-only"
|
||||
class="euiScreenReaderOnly"
|
||||
aria-hidden="true"
|
||||
id="visDescription_{{ ::getVisTypeId(type) }}"
|
||||
>{{::getVisTypeTooltip(type)}}</span>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@ import { KuiCodeEditor } from 'ui_framework/components';
|
|||
import _ from 'lodash';
|
||||
import 'brace/mode/markdown';
|
||||
import 'brace/theme/github';
|
||||
import {
|
||||
EuiCodeBlock,
|
||||
} from '@elastic/eui';
|
||||
|
||||
class MarkdownEditor extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -129,15 +132,14 @@ class MarkdownEditor extends Component {
|
|||
There is also a special variable named <code>_all</code> which you can use to access the entire tree. This is useful for
|
||||
creating lists with data from a group by...
|
||||
</div>
|
||||
<pre>
|
||||
<code>
|
||||
{`# All servers:
|
||||
|
||||
{{#each _all}}
|
||||
- {{ label }} {{ last.formatted }}
|
||||
{{/each}}`}
|
||||
</code>
|
||||
</pre>
|
||||
<EuiCodeBlock>
|
||||
{`# All servers:
|
||||
|
||||
{{#each _all}}
|
||||
- {{ label }} {{ last.formatted }}
|
||||
{{/each}}`}
|
||||
</EuiCodeBlock>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="alert" ng-class="['alert-' + (type || 'warning'), closeable ? 'alert-dismissable' : null]" role="alert">
|
||||
<button ng-show="closeable" type="button" class="close" ng-click="close()">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
<span class="euiScreenReaderOnly">Close</span>
|
||||
</button>
|
||||
<div ng-transclude></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<span ng-mouseleave="reset()" ng-keydown="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="{{range.length}}" aria-valuenow="{{value}}">
|
||||
<i ng-repeat="r in range track by $index" ng-mouseenter="enter($index + 1)" ng-click="rate($index + 1)" class="glyphicon" ng-class="$index < value && (r.stateOn || 'glyphicon-star') || (r.stateOff || 'glyphicon-star-empty')">
|
||||
<span class="sr-only">({{ $index < value ? '*' : ' ' }})</span>
|
||||
<span class="euiScreenReaderOnly">({{ $index < value ? '*' : ' ' }})</span>
|
||||
</i>
|
||||
</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,19 @@
|
|||
const theme = require('../theme');
|
||||
|
||||
// Kibana UI Framework
|
||||
require('../../../../ui_framework/dist/ui_framework.css');
|
||||
|
||||
// Elastic UI Framework, light theme
|
||||
const euiThemeLight = require('!!raw-loader!@elastic/eui/dist/eui_theme_light.css');
|
||||
theme.registerTheme('light', euiThemeLight);
|
||||
|
||||
// Elastic UI Framework, dark theme
|
||||
const euiThemeDark = require('!!raw-loader!@elastic/eui/dist/eui_theme_dark.css');
|
||||
theme.registerTheme('dark', euiThemeDark);
|
||||
|
||||
// Set default theme.
|
||||
theme.applyTheme('light');
|
||||
|
||||
// All Kibana styles inside of the /styles dir
|
||||
const context = require.context('../styles', false, /[\/\\](?!mixins|variables|_|\.)[^\/\\]+\.less/);
|
||||
context.keys().forEach(key => context(key));
|
||||
|
|
|
|||
|
|
@ -132,14 +132,14 @@ describe('timepicker directive', function () {
|
|||
});
|
||||
|
||||
it('should highlight the right mode', function () {
|
||||
expect($elem.find('.kbn-timepicker-modes .active').text().trim()).to.be('Quick');
|
||||
expect($elem.find('.kbn-timepicker-modes .euiTab-isSelected').text().trim()).to.be('Quick');
|
||||
|
||||
// Each of the 3 modes
|
||||
const modes = ['absolute', 'relative', 'quick'];
|
||||
_.each(modes, function (mode) {
|
||||
$scope.setMode(mode);
|
||||
$scope.$digest();
|
||||
expect($elem.find('.kbn-timepicker-modes .active').text().trim().toLowerCase()).to.be(mode);
|
||||
expect($elem.find('.kbn-timepicker-modes .euiTab-isSelected').text().trim().toLowerCase()).to.be(mode);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -42,14 +42,14 @@
|
|||
ng-show="showAddFilterButton()"
|
||||
>
|
||||
<div class="filter-description small">
|
||||
<a
|
||||
<button
|
||||
ng-click="addFilter()"
|
||||
kbn-accessible-click
|
||||
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
|
||||
data-test-subj="addFilter"
|
||||
>
|
||||
Add a filter
|
||||
<span class="fa fa-plus"></span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ filter-bar {
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.filter {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
|
||||
.alert {
|
||||
padding: 0 15px;
|
||||
padding: 5px 15px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border: 0px;
|
||||
|
|
@ -55,7 +55,6 @@
|
|||
|
||||
.toast-message {
|
||||
flex: 1 1 auto;
|
||||
padding-top: 10px;
|
||||
.ellipsis();
|
||||
line-height: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,17 +6,6 @@
|
|||
@import "./react-select";
|
||||
@import "./pui_react";
|
||||
|
||||
html,
|
||||
body {
|
||||
.flex-parent();
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label > small {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.9em !important;
|
||||
}
|
||||
|
|
@ -52,11 +41,6 @@ label > small {
|
|||
font-family: @font-family-monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
ul.navbar-inline li {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -123,15 +107,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 {
|
||||
> * {
|
||||
|
|
@ -236,16 +211,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 {
|
||||
|
|
@ -358,10 +323,6 @@ input[type="checkbox"],
|
|||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.field-collapse-toggle {
|
||||
color: @field-collapse-toggle-color;
|
||||
margin-left: 10px !important;
|
||||
|
|
@ -409,18 +370,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;
|
||||
|
|
@ -499,6 +448,8 @@ fieldset {
|
|||
.kuiOptionLabel {
|
||||
font-weight: normal; // 1
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.kuiFormPanel {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
424
src/ui/public/styles/bootstrap/normalize.less
vendored
424
src/ui/public/styles/bootstrap/normalize.less
vendored
|
|
@ -1,424 +0,0 @@
|
|||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
// without disabling user zoom.
|
||||
//
|
||||
|
||||
html {
|
||||
font-family: sans-serif; // 1
|
||||
-ms-text-size-adjust: 100%; // 2
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default margin.
|
||||
//
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// HTML5 display definitions
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
// Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
// and Firefox.
|
||||
// Correct `block` display not defined for `main` in IE 11.
|
||||
//
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
//
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
// Remove excess height in iOS 5 devices.
|
||||
//
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `[hidden]` styling not present in IE 8/9/10.
|
||||
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
|
||||
//
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Links
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove the gray background color from active links in IE 10.
|
||||
//
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
//
|
||||
// Improve readability of focused elements when they are also in an
|
||||
// active/hover state.
|
||||
//
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Text-level semantics
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
//
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
//
|
||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in Safari and Chrome.
|
||||
//
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
//
|
||||
// Address variable `h1` font-size and margin within `section` and `article`
|
||||
// contexts in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9.
|
||||
//
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent and variable font size in all browsers.
|
||||
//
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
//
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
// Embedded content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove border when inside `a` element in IE 8/9/10.
|
||||
//
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct overflow not hidden in IE 9/10/11.
|
||||
//
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Grouping content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address margin not present in IE 8/9 and Safari.
|
||||
//
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
//
|
||||
// Address differences between Firefox and other browsers.
|
||||
//
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Contain overflow in all browsers.
|
||||
//
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Address odd `em`-unit font size rendering in all browsers.
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `select`, unless a `border` property is set.
|
||||
//
|
||||
|
||||
//
|
||||
// 1. Correct color not being inherited.
|
||||
// Known issue: affects color of disabled elements.
|
||||
// 2. Correct font properties not being inherited.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; // 1
|
||||
font: inherit; // 2
|
||||
margin: 0; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
//
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
// All other form control elements do not inherit `text-transform` values.
|
||||
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
// Correct `select` style inheritance in Firefox.
|
||||
//
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
// and `video` controls.
|
||||
// 2. Correct inability to style clickable `input` types in iOS.
|
||||
// 3. Improve usability and consistency of cursor style between image-type
|
||||
// `input` and others.
|
||||
//
|
||||
|
||||
button,
|
||||
html input[type="button"], // 1
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
cursor: pointer; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Re-set default cursor for disabled elements.
|
||||
//
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and border in Firefox 4+.
|
||||
//
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet.
|
||||
//
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
//
|
||||
// It's recommended that you don't attempt to style these elements.
|
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
//
|
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
// 2. Remove excess padding in IE 8/9/10.
|
||||
//
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
// `font-size` values of the `input`, it causes the cursor style of the
|
||||
// decrement button to change from `default` to `text`.
|
||||
//
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
|
||||
//
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
box-sizing: content-box; //2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||
// padding (and `textfield` appearance).
|
||||
//
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Define consistent border, margin, and padding.
|
||||
//
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
//
|
||||
|
||||
legend {
|
||||
border: 0; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
//
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Don't inherit the `font-weight` (applied by a rule above).
|
||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
//
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Tables
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove most spacing between table cells.
|
||||
//
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
//
|
||||
// Scaffolding
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Reset the box-sizing
|
||||
//
|
||||
// Heads up! This reset may cause conflicts with some third-party widgets.
|
||||
// For recommendations on resolving such conflicts, see
|
||||
// http://getbootstrap.com/getting-started/#third-box-sizing
|
||||
* {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
*:before,
|
||||
*:after {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
|
||||
|
||||
// Body reset
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-family-base;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
background-color: @body-bg;
|
||||
}
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
// Links
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @link-hover-color;
|
||||
text-decoration: @link-hover-decoration;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Figures
|
||||
//
|
||||
// We reset this here because previously Normalize had no `figure` margins. This
|
||||
// ensures we don't break anyone's use of the element.
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// Images
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
.img-responsive {
|
||||
.img-responsive();
|
||||
}
|
||||
|
||||
// Rounded corners
|
||||
.img-rounded {
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
|
||||
// Image thumbnails
|
||||
//
|
||||
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
|
||||
.img-thumbnail {
|
||||
padding: @thumbnail-padding;
|
||||
line-height: @line-height-base;
|
||||
background-color: @thumbnail-bg;
|
||||
border: 1px solid @thumbnail-border;
|
||||
border-radius: @thumbnail-border-radius;
|
||||
.transition(all .2s ease-in-out);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
.img-responsive(inline-block);
|
||||
}
|
||||
|
||||
// Perfect circle
|
||||
.img-circle {
|
||||
border-radius: 50%; // set radius in percents
|
||||
}
|
||||
|
||||
|
||||
// Horizontal rules
|
||||
|
||||
hr {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: @line-height-computed;
|
||||
border: 0;
|
||||
border-top: 1px solid @hr-border;
|
||||
}
|
||||
|
||||
|
||||
// Only display content to screen readers
|
||||
//
|
||||
// See: http://a11yproject.com/posts/how-to-hide-content/
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Use in conjunction with .sr-only to only display content when it's focused.
|
||||
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
.sr-only-focusable {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS "clickable elements" fix for role="button"
|
||||
//
|
||||
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
||||
// for traditionally non-focusable elements with role="button"
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -3,20 +3,6 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
|
||||
table {
|
||||
background-color: @table-bg;
|
||||
}
|
||||
caption {
|
||||
padding-top: @table-cell-padding;
|
||||
padding-bottom: @table-cell-padding;
|
||||
color: @text-muted;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
// Baseline styles
|
||||
|
||||
.table {
|
||||
|
|
|
|||
|
|
@ -3,90 +3,6 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Headings
|
||||
// -------------------------
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: @headings-font-family;
|
||||
font-weight: @headings-font-weight;
|
||||
line-height: @headings-line-height;
|
||||
color: @headings-color;
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: @headings-small-color;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-top: (@line-height-computed / 2);
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: @font-size-h1; }
|
||||
h2, .h2 { font-size: @font-size-h2; }
|
||||
h3, .h3 { font-size: @font-size-h3; }
|
||||
h4, .h4 { font-size: @font-size-h4; }
|
||||
h5, .h5 { font-size: @font-size-h5; }
|
||||
h6, .h6 { font-size: @font-size-h6; }
|
||||
|
||||
|
||||
// Body text
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-bottom: @line-height-computed;
|
||||
font-size: floor((@font-size-base * 1.15));
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
font-size: (@font-size-base * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Emphasis & misc
|
||||
// -------------------------
|
||||
|
||||
// Ex: (12px small font / 14px base font) * 100% = about 85%
|
||||
small,
|
||||
.small {
|
||||
font-size: floor((100% * @font-size-small / @font-size-base));
|
||||
}
|
||||
|
||||
mark,
|
||||
.mark {
|
||||
background-color: @globalColorTeal;
|
||||
color: @globalColorWhite;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
// Alignment
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
|
|
@ -152,20 +68,6 @@ mark,
|
|||
}
|
||||
|
||||
|
||||
// Lists
|
||||
// -------------------------
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// List options
|
||||
|
||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
||||
|
|
@ -186,21 +88,6 @@ ol {
|
|||
}
|
||||
}
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-top: 0; // Remove browser default
|
||||
margin-bottom: @line-height-computed;
|
||||
}
|
||||
dt,
|
||||
dd {
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
// Horizontal description lists
|
||||
//
|
||||
|
|
@ -226,53 +113,6 @@ dd {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Misc
|
||||
// -------------------------
|
||||
|
||||
// Abbreviations and acronyms
|
||||
abbr[title],
|
||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted @abbr-border-color;
|
||||
}
|
||||
.initialism {
|
||||
font-size: 90%;
|
||||
.text-uppercase();
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
padding: (@line-height-computed / 2) @line-height-computed;
|
||||
margin: 0 0 @line-height-computed;
|
||||
font-size: @blockquote-font-size;
|
||||
border-left: 5px solid @blockquote-border-color;
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Note: Deprecated small and .small as of v3.1.0
|
||||
// Context: https://github.com/twbs/bootstrap/issues/11660
|
||||
footer,
|
||||
small,
|
||||
.small {
|
||||
display: block;
|
||||
font-size: 80%; // back to default font-size
|
||||
line-height: @line-height-base;
|
||||
color: @blockquote-small-color;
|
||||
|
||||
&:before {
|
||||
content: '\2014 \00A0'; // em dash, nbsp
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Opposite alignment of blockquote
|
||||
//
|
||||
// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
|
||||
|
|
@ -294,10 +134,3 @@ blockquote.pull-right {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Addresses
|
||||
address {
|
||||
margin-bottom: @line-height-computed;
|
||||
font-style: normal;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,6 +86,7 @@
|
|||
|
||||
.sidebar-list-header-label {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
5
src/ui/public/theme/index.js
Normal file
5
src/ui/public/theme/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export {
|
||||
registerTheme,
|
||||
applyTheme,
|
||||
getCurrentTheme,
|
||||
} from './theme';
|
||||
26
src/ui/public/theme/theme.js
Normal file
26
src/ui/public/theme/theme.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
const themes = {};
|
||||
let currentTheme = undefined;
|
||||
|
||||
export function registerTheme(theme, styles) {
|
||||
themes[theme] = styles;
|
||||
}
|
||||
|
||||
export function applyTheme(newTheme) {
|
||||
currentTheme = newTheme;
|
||||
|
||||
const styleNode = document.getElementById('themeCss');
|
||||
|
||||
if (styleNode) {
|
||||
const css = themes[currentTheme];
|
||||
|
||||
if (styleNode.styleSheet) {
|
||||
styleNode.styleSheet.cssText = css;
|
||||
} else {
|
||||
styleNode.appendChild(document.createTextNode(css));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function getCurrentTheme() {
|
||||
return currentTheme;
|
||||
}
|
||||
|
|
@ -3,50 +3,49 @@
|
|||
<div class="tab-content kbn-timepicker-content">
|
||||
<!-- Filters -->
|
||||
<div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
|
||||
<div class="kbn-timepicker-title kuiVerticalRhythmSmall">
|
||||
<div class="kbn-timepicker-title">
|
||||
<h2 class="kuiLocalDropdownTitle kbn-timepicker-title__text">
|
||||
Time Range
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="tablist"
|
||||
class="kbn-timepicker-modes kbn-timepicker-title__section"
|
||||
>
|
||||
<a
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
<div role="tablist" class="euiTabs euiTabs--small kbn-timepicker-modes kbn-timepicker-title__section">
|
||||
<button
|
||||
id="timepickerQuick"
|
||||
role="tab"
|
||||
class="kbn-timerpicker-nav-button"
|
||||
ng-class="{active: mode === 'quick' }"
|
||||
class="euiTab"
|
||||
ng-class="{'euiTab-isSelected': mode === 'quick' }"
|
||||
ng-click="setMode('quick')"
|
||||
aria-selected="{{mode === 'quick'}}"
|
||||
kbn-accessible-click
|
||||
data-test-subj="timepicker-quick-button"
|
||||
>
|
||||
Quick
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<a
|
||||
<button
|
||||
id="timepickerRelative"
|
||||
role="tab"
|
||||
class="kbn-timerpicker-nav-button"
|
||||
ng-class="{active: mode === 'relative' }"
|
||||
class="euiTab"
|
||||
ng-class="{'euiTab-isSelected': mode === 'relative' }"
|
||||
ng-click="setMode('relative')"
|
||||
aria-selected="{{mode === 'relative'}}"
|
||||
kbn-accessible-click
|
||||
data-test-subj="timepicker-relative-button"
|
||||
>
|
||||
Relative
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<a
|
||||
<button
|
||||
id="timepickerAbsolute"
|
||||
role="tab"
|
||||
class="kbn-timerpicker-nav-button"
|
||||
ng-class="{active: mode === 'absolute' }"
|
||||
class="euiTab"
|
||||
ng-class="{'euiTab-isSelected': mode === 'absolute' }"
|
||||
ng-click="setMode('absolute')"
|
||||
aria-selected="{{mode === 'absolute'}}"
|
||||
kbn-accessible-click
|
||||
data-test-subj="timepicker-absolute-button"
|
||||
>
|
||||
Absolute
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,17 +75,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.kbn-timerpicker-nav-button {
|
||||
padding: 3px 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
|
||||
&.active {
|
||||
color: @globalColorWhite;
|
||||
background-color: @globalColorBlue;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Avoid last nav overlaping collapse button
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -105,6 +105,11 @@ html(lang='en')
|
|||
}
|
||||
|
||||
block head
|
||||
|
||||
//- Load EUI component styles here. Kibana's styles are loaded afterwards by webpack, which is
|
||||
//- good because we may use them to override EUI styles.
|
||||
style#themeCss
|
||||
|
||||
body(kbn-chrome, id='#{appName}-body')
|
||||
kbn-initial-state(data=JSON.stringify(kibanaPayload))
|
||||
block content
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ module.exports = function () {
|
|||
'(MIT AND CC-BY-3.0)',
|
||||
'(MIT AND Zlib)',
|
||||
'(MIT OR Apache-2.0)',
|
||||
'(WTFPL OR MIT)',
|
||||
'AFLv2.1',
|
||||
'Apache 2.0',
|
||||
'Apache License, v2.0',
|
||||
|
|
@ -15,6 +16,7 @@ module.exports = function () {
|
|||
'Apache*',
|
||||
'Apache, Version 2.0',
|
||||
'Apache-2.0',
|
||||
'BSD 3-Clause',
|
||||
'BSD New',
|
||||
'BSD',
|
||||
'BSD*',
|
||||
|
|
@ -22,11 +24,11 @@ module.exports = function () {
|
|||
'BSD-3-Clause AND MIT',
|
||||
'BSD-3-Clause OR MIT',
|
||||
'BSD-3-Clause',
|
||||
'BSD 3-Clause',
|
||||
'BSD-like',
|
||||
'CC-BY',
|
||||
'CC-BY-4.0',
|
||||
'ISC',
|
||||
'MIT OR GPL-2.0',
|
||||
'MIT',
|
||||
'MIT*',
|
||||
'MIT/X11',
|
||||
|
|
@ -35,7 +37,6 @@ module.exports = function () {
|
|||
'Public domain',
|
||||
'Unlicense',
|
||||
'WTFPL OR ISC',
|
||||
'MIT OR GPL-2.0',
|
||||
'WTFPL',
|
||||
],
|
||||
overrides: {
|
||||
|
|
|
|||
|
|
@ -57,27 +57,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
await PageObjects.dashboard.gotoDashboardEditMode(dashboardName);
|
||||
});
|
||||
|
||||
it('when time changed is stored with dashboard', async function () {
|
||||
const originalFromTime = '2015-09-19 06:31:44.000';
|
||||
const originalToTime = '2015-09-19 06:31:44.000';
|
||||
await PageObjects.header.setAbsoluteRange(originalFromTime, originalToTime);
|
||||
await PageObjects.dashboard.saveDashboard(dashboardName, { storeTimeWithDashboard: true });
|
||||
await PageObjects.header.clickToastOK();
|
||||
|
||||
await PageObjects.dashboard.clickEdit();
|
||||
await PageObjects.header.setAbsoluteRange('2013-09-19 06:31:44.000', '2013-09-19 06:31:44.000');
|
||||
await PageObjects.dashboard.clickCancelOutOfEditMode();
|
||||
|
||||
// confirm lose changes
|
||||
await PageObjects.common.clickConfirmOnModal();
|
||||
|
||||
const newFromTime = await PageObjects.header.getFromTime();
|
||||
const newToTime = await PageObjects.header.getToTime();
|
||||
|
||||
expect(newFromTime).to.equal(originalFromTime);
|
||||
expect(newToTime).to.equal(originalToTime);
|
||||
});
|
||||
|
||||
it('when the query is edited and applied', async function () {
|
||||
const originalQuery = await PageObjects.dashboard.getQuery();
|
||||
await PageObjects.dashboard.setQuery(`${originalQuery} and extra stuff`);
|
||||
|
|
@ -156,32 +135,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
expect(panelCount).to.eql(visualizations.length);
|
||||
});
|
||||
});
|
||||
|
||||
describe('and preserves edits on cancel', function () {
|
||||
it('when time changed is stored with dashboard', async function () {
|
||||
await PageObjects.dashboard.gotoDashboardEditMode(dashboardName);
|
||||
const newFromTime = '2015-09-19 06:31:44.000';
|
||||
const newToTime = '2015-09-19 06:31:44.000';
|
||||
await PageObjects.header.setAbsoluteRange('2013-09-19 06:31:44.000', '2013-09-19 06:31:44.000');
|
||||
await PageObjects.dashboard.saveDashboard(dashboardName, true);
|
||||
await PageObjects.header.clickToastOK();
|
||||
await PageObjects.dashboard.clickEdit();
|
||||
await PageObjects.header.setAbsoluteRange(newToTime, newToTime);
|
||||
await PageObjects.dashboard.clickCancelOutOfEditMode();
|
||||
|
||||
await PageObjects.common.clickCancelOnModal();
|
||||
await PageObjects.dashboard.saveDashboard(dashboardName, { storeTimeWithDashboard: true });
|
||||
await PageObjects.header.clickToastOK();
|
||||
|
||||
await PageObjects.dashboard.loadSavedDashboard(dashboardName);
|
||||
|
||||
const fromTime = await PageObjects.header.getFromTime();
|
||||
const toTime = await PageObjects.header.getToTime();
|
||||
|
||||
expect(fromTime).to.equal(newFromTime);
|
||||
expect(toTime).to.equal(newToTime);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Does not show lose changes warning', async function () {
|
||||
|
|
|
|||
|
|
@ -44,57 +44,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
});
|
||||
});
|
||||
|
||||
it('should show Split Gauges', function () {
|
||||
const expectedTexts = [ 'win 8', 'win xp', 'win 7', 'ios', 'osx' ];
|
||||
return PageObjects.visualize.clickMetricEditor()
|
||||
.then(function clickBucket() {
|
||||
log.debug('Bucket = Split Group');
|
||||
return PageObjects.visualize.clickBucket('Split Group');
|
||||
})
|
||||
.then(function selectAggregation() {
|
||||
log.debug('Aggregation = Terms');
|
||||
return PageObjects.visualize.selectAggregation('Terms');
|
||||
})
|
||||
.then(function selectField() {
|
||||
log.debug('Field = machine.os.raw');
|
||||
return PageObjects.visualize.selectField('machine.os.raw');
|
||||
})
|
||||
.then(function clickGo() {
|
||||
return PageObjects.visualize.clickGo();
|
||||
})
|
||||
.then(function () {
|
||||
return retry.try(function tryingForTime() {
|
||||
return PageObjects.visualize.getGaugeValue()
|
||||
.then(function (metricValue) {
|
||||
expect(expectedTexts).to.eql(metricValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should show correct values for fields with fieldFormatters', async function () {
|
||||
const expectedTexts = [ '2,904\nwin 8: Count', '5.528KB' ];
|
||||
|
||||
|
||||
await PageObjects.visualize.clickMetricEditor();
|
||||
await PageObjects.visualize.clickBucket('Split Group');
|
||||
await PageObjects.visualize.selectAggregation('Terms');
|
||||
await PageObjects.visualize.selectField('machine.os.raw');
|
||||
await PageObjects.visualize.setSize('1');
|
||||
await PageObjects.visualize.clickAddMetric();
|
||||
await PageObjects.visualize.clickBucket('Metric');
|
||||
await PageObjects.visualize.selectAggregation('Average', 'metrics');
|
||||
await PageObjects.visualize.selectField('bytes', 'metrics');
|
||||
await PageObjects.visualize.clickGo();
|
||||
|
||||
return retry.try(function tryingForTime() {
|
||||
return PageObjects.visualize.getGaugeValue()
|
||||
.then(function (metricValue) {
|
||||
expect(expectedTexts).to.eql(metricValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export function HeaderPageProvider({ getService, getPageObjects }) {
|
|||
async clickQuickButton() {
|
||||
await retry.try(async () => {
|
||||
remote.setFindTimeout(defaultFindTimeout);
|
||||
await remote.findByLinkText('Quick').click();
|
||||
await testSubjects.click('timepicker-quick-button');
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -68,8 +68,7 @@ export function HeaderPageProvider({ getService, getPageObjects }) {
|
|||
if (!isAbsoluteSectionShowing) {
|
||||
await retry.try(async () => {
|
||||
await remote.setFindTimeout(defaultFindTimeout);
|
||||
const absoluteButton = await remote.findByLinkText('Absolute');
|
||||
await absoluteButton.click();
|
||||
await testSubjects.click('timepicker-absolute-button');
|
||||
// Check to make sure one of the elements on the absolute section is showing.
|
||||
await this.getFromTime();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export function TestSubjectsProvider({ getService }) {
|
|||
|
||||
async find(selector, timeout = defaultFindTimeout) {
|
||||
log.debug(`TestSubjects.find(${selector})`);
|
||||
return await find.displayedByCssSelector(testSubjSelector(selector), timeout);
|
||||
return await find.byCssSelector(testSubjSelector(selector), timeout);
|
||||
}
|
||||
|
||||
async findAll(selector) {
|
||||
|
|
|
|||
13
ui_framework/dist/ui_framework.css
vendored
13
ui_framework/dist/ui_framework.css
vendored
|
|
@ -54,11 +54,6 @@
|
|||
* 4. Fix an IE bug which causes the last child to overflow the container.
|
||||
* 5. Fixing this bug means we now need to align the children to the right.
|
||||
*/
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
*:before, *:after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
:focus {
|
||||
z-index: 1;
|
||||
/* 1 */
|
||||
|
|
@ -67,9 +62,6 @@
|
|||
box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
|
||||
/* 3 */ }
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", Helvetica, Arial, sans-serif; }
|
||||
|
||||
/**
|
||||
* 1. Required for IE11.
|
||||
*/
|
||||
|
|
@ -77,11 +69,6 @@ main {
|
|||
display: block;
|
||||
/* 1 */ }
|
||||
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"] {
|
||||
border-radius: 0; }
|
||||
|
||||
.kuiScreenReaderOnly {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,11 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// Removes outline, but still provides a two color box shadow that works anywhere.
|
||||
:focus {
|
||||
@include focus;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $kuiFontFamily;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Required for IE11.
|
||||
*/
|
||||
main {
|
||||
display: block; /* 1 */
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue