@spalger/kibana
Version:
Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic
373 lines (306 loc) • 7.41 kB
text/less
.vis-editor {
.flex-parent();
@vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
@vis-editor-sidebar-min-width: 350px;
@vis-editor-nesting-width: 8px;
@vis-editor-agg-editor-spacing: 5px;
// For the vis-editor sidebar nav
.navbar-default .navbar-nav {
&> .active > a:before {
border: 7px solid transparent;
border-bottom-color: @gray-lighter;
}
.danger {
color: @btn-danger-color;
background-color: @btn-danger-bg;
}
}
.btn-xs {
line-height: 1.3;
}
navbar {
.bitty-modal-container {
position: relative;
.bitty-modal {
position: absolute;
cursor: pointer;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 10;
background: fadeout(@navbar-default-bg, 10%);
color: white;
text-align: center;
padding-top: 6px;
// Don't overflow container
padding-left: 20px;
padding-right: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
}
a {
color: white;
}
}
}
&-content {
.flex-parent();
// overrides for tablet and desktop
@media (min-width: @screen-md-min) {
flex-direction: row;
}
}
&-sidebar {
.flex-parent(0, 0, auto);
// overflow: auto;
// overrided for tablet and desktop
@media (min-width: @screen-md-min) {
flex-basis: @vis-editor-sidebar-basis;
min-width: @vis-editor-sidebar-min-width;
max-width: @vis-editor-sidebar-min-width;
// margin-bottom: (@input-height-base * 2) - 3;
}
nav {
border-radius: 0px;
}
.sidebar-item {
border-top: 0 ;
}
.sidebar-container {
.flex-parent(1, 1, auto);
background-color: @body-bg;
border-right-color: @sidebar-bg;
form {
.flex-parent(1, 1, auto);
> div.vis-editor-config {
@media (min-width: @screen-md-min) {
.flex-parent(1, 1, 1px);
overflow: auto;
}
@media (max-width: @screen-md-min) {
.flex-parent(1, 1, auto);
}
}
> .vis-edit-sidebar-buttons {
flex: 0 0 auto;
}
label {
margin-bottom: 0px;
}
}
}
.sidebar-item-title {
font-size: 20px;
font-weight: bold;
border: inherit ;
background-color: @gray-lighter;
margin-bottom: @vis-editor-agg-editor-spacing;
padding: 2px 5px ;
}
.sidebar-item-title:hover {
color: @text-color ;
background-color: @gray-lighter ;
}
.hintbox {
padding: @vis-editor-agg-editor-spacing;
margin-bottom: @vis-editor-agg-editor-spacing;
}
label {
flex: 2 0 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 0;
}
}
.visualization-options {
padding: @vis-editor-agg-editor-spacing;
.form-group {
margin-bottom: @vis-editor-agg-editor-spacing;
}
.form-horizontal .control-label {
text-align: left;
}
}
nesting-indicator {
display: flex;
flex: 0 0 auto;
> span {
width: @vis-editor-nesting-width;
background-color: @brand-success;
}
}
&-agg {
.flex-parent();
//IE10/11 - prevent flex item from overflowing
flex-basis: 100%;
padding: @vis-editor-agg-editor-spacing;
// wraps the .vis-editor-agg and nesting-indicator ^^
&-wrapper {
display: flex;
}
&-group {
.flex-parent(0, 1, auto);
color: @text-color;
}
&-header {
display: flex;
align-items: center;
flex: 1 0 auto;
margin-bottom: @vis-editor-agg-editor-spacing;
&-toggle {
flex: 0 0 auto;
margin-right: @vis-editor-agg-editor-spacing;
}
&-subagg-icon {
flex: 0 1 auto;
padding-right: @padding-base-vertical;
}
&-title {
flex: 1 1 auto;
.ellipsis();
font-weight: bold;
}
&-description {
font-weight: normal;
padding-right: @vis-editor-agg-editor-spacing;
&.danger {
.text-danger();
font-weight: bold;
}
}
&-controls {
flex: 0 0 auto;
}
}
&-error {
margin: @vis-editor-agg-editor-spacing 0;
padding: @vis-editor-agg-editor-spacing;
text-align: center;
background: @btn-danger-bg;
color: @btn-danger-color;
}
&-editor {
&-ranges {
td {
padding: 0 @vis-editor-agg-editor-spacing @vis-editor-agg-editor-spacing 0;
&:last-child {
padding-right: 0;
}
}
}
.regex .flags {
.docs {
text-align: right;
}
a {
color: @link-color;
}
}
&-advanced-toggle {
text-align: right;
}
}
&-form-row {
display: flex;
> * {
flex: 1 1 auto;
margin-right: @vis-editor-agg-editor-spacing;
&:last-child {
margin-right: 0px;
}
}
> .btn {
align-self: center;
}
}
&-form-value {
align-self: center;
margin: 0 0 0 @vis-editor-agg-editor-spacing;
font-size: 1.2em;
}
&-wide-btn {
border-radius: 0;
border-top: 2px solid @gray-lighter;
&-add {
width: 140px;
margin: -2px auto 5px auto;
text-align: center;
border: 2px solid @gray-lighter;
border-top: 0px;
padding: 3px;
border-bottom-right-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
background-color: @body-bg;
font-weight: bold;
}
&-add:hover {
background-color: @gray-lighter;
}
}
&-add {
.flex-parent();
&-subagg {
margin-bottom: -@vis-editor-agg-editor-spacing - 1; // extra one pixel covers the aggs bottom border
margin-right: -@vis-editor-agg-editor-spacing;
margin-left: -@vis-editor-agg-editor-spacing;
}
&-schemas {
margin: @vis-editor-agg-editor-spacing * 3;
}
}
&-order-agg {
border: 2px solid @gray-lighter;
border-radius: @border-radius-base;
margin: @vis-editor-agg-editor-spacing;
padding: @vis-editor-agg-editor-spacing;
}
}
vis-editor-agg-group {
.flex-parent(0, 1, auto);
}
&-canvas {
flex: 1 0 (@screen-md-min - @vis-editor-sidebar-basis);
display: flex;
flex-direction: column;
overflow: auto;
&.embedded {
flex-shrink: 1;
flex-basis: 100%;
}
// overrided for tablet and desktop
@media (min-width: @screen-md-min) {
flex-shrink: 1;
flex-basis: 100%;
}
&-title {
text-align: center;
margin: 10px 0 0;
}
visualize {
.flex-parent();
flex: 1 1 100%;
}
.visualize-chart {
flex: 1 1 100%;
position: relative;
}
}
}
vis-editor,
vis-editor-agg-group,
vis-editor-agg,
vis-editor-agg-params,
vis-editor-agg-param,
vis-editor-vis-options,
vis-editor-vis-options > * {
.flex-parent();
}
form.vis-share {
div.form-control {
height: inherit;
}
}