Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Style query tabs to utilize available space more effectively 

Maximum width is much larger, which increases utility of tabs when
there are < 5 queries
pull/2111/head
Alex P 2017-10-11 17:34:09 -07:00
parent 490cb31192
commit 13cf469726
1 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
ui/src/style/components/query-maker.scss
View File

@ -23,7 +23,7 @@ $query-maker--gutter: 16px;
$query-maker--tabs-height: 44px; $query-maker--tabs-height: 44px;
$query-maker--tabs-header-text: $g18-cloud; $query-maker--tabs-header-text: $g18-cloud;
$query-maker--tab-width: 138px; $query-maker--tab-width: 340px;
$query-maker--tab-text: $g11-sidewalk; $query-maker--tab-text: $g11-sidewalk;
$query-maker--tab-text-hover: $g15-platinum; $query-maker--tab-text-hover: $g15-platinum;
$query-maker--tab-text-active: $g18-cloud; $query-maker--tab-text-active: $g18-cloud;
@ -94,30 +94,16 @@ $query-editor-tab-active: $g3-castle;
height: $query-maker--tabs-height; height: $query-maker--tabs-height;
margin: 0 2px 0 0; margin: 0 2px 0 0;
max-width: $query-maker--tab-width; max-width: $query-maker--tab-width;
flex: 1 0 0%; flex: 1 0 0;
display: flex;
align-items: center;
justify-content: space-between;
color: $query-maker--tab-text; color: $query-maker--tab-text;
background: $query-maker--tab-bg; background: $query-maker--tab-bg;
cursor: pointer; position: relative;
padding: 0 9px 0 12px;
transition: transition:
color 0.25s ease, color 0.25s ease,
background-color 0.25s ease; background-color 0.25s ease;
> label {
font-size: 15px;
font-weight: 600;
margin: 0;
white-space: nowrap;
overflow: hidden;
width: ($query-maker--tab-width - 42px);
text-overflow: ellipsis;
@include no-user-select();
cursor: pointer;
}
&:hover { &:hover {
cursor: pointer;
color: $query-maker--tab-text-hover; color: $query-maker--tab-text-hover;
background-color: $query-maker--tab-bg-hover; background-color: $query-maker--tab-bg-hover;
} }
@ -126,14 +112,31 @@ $query-editor-tab-active: $g3-castle;
background: $query-maker--tab-bg-active; background: $query-maker--tab-bg-active;
} }
} }
.query-maker--tab > label,
.query-maker--delete {
top: 50%;
transform: translateY(-50%);
position: absolute;
}
.query-maker--tab > label {
left: 12px;
font-size: 14px;
font-weight: 600;
margin: 0;
white-space: nowrap;
overflow: hidden;
width: calc(100% - #{$query-maker--tabs-height});
text-overflow: ellipsis;
@include no-user-select();
cursor: inherit !important;
}
.query-maker--delete { .query-maker--delete {
margin: 0; margin: 0;
width: 18px; width: 18px;
height: 18px; height: 18px;
background-color: transparent; background-color: transparent;
display: inline-block; display: block;
vertical-align: text-top; right: 9px;
position: relative;
&:before, &:before,
&:after { &:after {