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

Cleanup 

should be slightly easier to search now, was nested like crazy
pull/10616/head
Alex P 2016-12-06 15:36:48 -08:00
parent 9e76d487b0
commit 30a1cd602e
3 changed files with 488 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

273
ui/src/style/chronograf/components/_Explorer.scss
View File

@ -1,143 +1,148 @@
.explorer {
display: block;
background-color: $g6-smoke;
border-radius: $radius;
margin-bottom: 6px;
display: block;
background-color: $g3-castle;
border-radius: $radius;
margin-bottom: 6px;
transition: background-color 0.25s ease;
&__header {
background-color: $g6-smoke;
align-items: center;
text-align: center;
display: flex;
height: 3em;
padding: 1em;
cursor: pointer;
justify-content: space-between;
border-radius: $radius;
&:hover {
background-color: $g4-onyx;
}
&-name {
color: $g13-mist;
font-weight: 400;
font-size: 16px;
position: relative;
padding-left: 24px;
transition: color 0.25s ease;
// For when an explorer item is open
&.active {
background-color: $g5-pepper;
.explorer__header {
&-name {
color: $g20-white;
.icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) rotate(0deg);
font-size: 0.75em;
transition: transform 0.25s ease;
}
&:hover {
color: $g20-white;
}
}
&-delete,
&-rename {
color: $g9-mountain;
transition: color 0.25s ease;
}
&-delete:hover {
color: $c-dreamsicle;
}
&-rename:hover {
color: $g20-white;
}
}
// For when an explorer item is open
&.active {
.explorer__header {
&-name {
color: $g20-white;
font-weight: 600;
.icon {
transform: translateY(-50%) rotate(90deg);
}
}
}
}
// Tabs
&__tabs {
display: flex;
background-color: $g6-smoke;
padding: 2px 1em 0 1em;
}
&__tab {
white-space: nowrap;
color: $g13-mist;
background: $g7-graphite;
height: 30px;
line-height: 30px;
margin-right: 2px;
border-radius: $radius $radius 0 0;
cursor: pointer;
padding: 0 8px 0 8px;
transition:
color 0.25s ease,
background-color 0.25s ease;
&.active {
background: $g8-storm;
color: $g18-cloud;
font-weight: 600;
}
> span.icon.plus {
font-size: 12px;
position: relative;
top: -1px;
}
&:hover {
color: $g18-cloud;
background-color: $g8-storm;
}
&-delete {
right: -2px;
font-size: 10px;
margin-left: 0px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: transparent;
display: inline-block;
vertical-align: text-top;
position: relative;
color: $g10-wolf;
transition:
color 0.25s ease,
background-color 0.25s ease;
span.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-54%,-50%);
}
&:hover {
background-color: $c-dreamsicle;
color: $g20-white;
}
}
}
.icon {
transform: translateY(-50%) rotate(90deg);
}
}
}
}
}
.explorer__header {
align-items: center;
text-align: center;
display: flex;
height: 36px;
padding: 0 11px;
cursor: pointer;
align-items: center;
justify-content: space-between;
border-radius: $radius;
&-name {
color: $g13-mist;
font-weight: 600;
font-size: 14px;
position: relative;
padding-left: 16px;
transition: color 0.25s ease;
.icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) rotate(0deg);
font-size: 0.75em;
transition: transform 0.25s ease;
}
&:hover {
color: $g17-whisper;
}
}
&-delete,
&-rename {
color: $g9-mountain;
transition: color 0.25s ease;
}
&-delete:hover {
color: $c-dreamsicle;
}
&-rename:hover {
color: $g20-white;
}
}
// Tabs
.explorer__tabs {
display: flex;
background-color: $g5-pepper;
padding: 0 11px;
}
.explorer__tab {
white-space: nowrap;
color: $g11-sidewalk;
background: $g6-smoke;
height: 28px;
font-size: 12px;
font-weight: 600;
line-height: 28px;
margin-right: 2px;
border-radius: $radius $radius 0 0;
cursor: pointer;
padding: 0 8px 0 8px;
transition:
color 0.25s ease,
background-color 0.25s ease;
&:hover {
color: $g18-cloud;
background-color: $g7-graphite;
}
&.active {
background: $g7-graphite;
color: $g15-platinum;
}
> span.icon.plus {
font-size: 12px;
position: relative;
top: -1px;
}
&-delete {
right: -2px;
font-size: 10px;
margin-left: 0px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: transparent;
display: inline-block;
vertical-align: text-top;
position: relative;
color: $g10-wolf;
transition:
color 0.25s ease,
background-color 0.25s ease;
span.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-54%,-50%);
}
&:hover {
background-color: $c-dreamsicle;
color: $g20-white;
}
}
}
/* Time Range Selector */
.time-range-dropdown {
display: inline-block;
display: inline-block;
.dropdown-toggle {
width: 160px;
}
.dropdown-toggle {
width: 160px;
}
}
.explorer__header-actions {
@ -149,7 +154,7 @@
}
.alert.alert-rawquery {
border-color: $g5-pepper;
border-color: $g6-smoke;
color: $g12-forge;
border-color: $g5-pepper;
border-color: $g6-smoke;
color: $g12-forge;
}

63
ui/src/style/chronograf/components/_PanelBuilder.scss
View File

@ -1,42 +1,39 @@
.panel-builder {
width: 399px;
overflow-x: hidden;
background: $g1-raven;
background: -moz-linear-gradient(top, $g5-pepper 0%, $g1-raven 100%);
background: -webkit-linear-gradient(top, $g5-pepper 0%,$g1-raven 100%);
background: linear-gradient(to bottom, $g5-pepper 0%,$g1-raven 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g5-pepper', endColorstr='$g1-raven',GradientType=0 );
@include gradient-v($g2-kevlar,$g0-obsidian);
@include custom-scrollbar($g2-kevlar,$c-pool);
}
.panel-builder__tabs {
display: flex;
text-align: center;
padding: $explorer-page-padding $explorer-page-padding 0 $explorer-page-padding;
background: $g3-castle;
}
.panel-builder__tab {
padding: 18px 0 9px 0px;
flex: 1;
background: $g3-castle;
cursor: pointer;
font-weight: 400;
font-size: 20px;
color: $g12-forge;
line-height: calc(60px - $explorer-page-padding - 2px);
border-radius: 4px 4px 0 0;
transition: color 0.25s ease;
&__tabs {
display: flex;
text-align: center;
padding: $explorer-page-padding $explorer-page-padding 0 $explorer-page-padding;
background: $g3-castle;
&:hover {
color: $g20-white;
}
&__tab {
padding: 18px 0 9px 0px;
flex: 1;
background: $g3-castle;
cursor: pointer;
font-weight: 400;
font-size: 20px;
color: $g12-forge;
line-height: calc(60px - $explorer-page-padding - 2px);
border-radius: 4px 4px 0 0;
transition: color 0.25s ease;
&:hover {
color: $g20-white;
}
&.active {
background-color: $g5-pepper;
color: $g20-white;
}
&.active {
background-color: $g5-pepper;
color: $g20-white;
}
&__tab-content {
&-content {
padding: $explorer-page-padding;
}
&__item {
margin-bottom: 6px;
}
}
.panel-builder__item {
margin-bottom: 6px;
}

704
ui/src/style/chronograf/components/_QueryEditor.scss
View File

@ -1,107 +1,50 @@
.checkbox.checked {
background-color: gainsboro !important;
}
$query-editor-gutter: 16px;
$query-editor-tab-inactive: $g5-pepper;
$query-editor-tab-active: $g6-smoke;
$query-editor-height: 35vh;
$query-editor-tab-inactive: $g2-kevlar;
$query-editor-tab-active: $g3-castle;
$query-editor-height: 300px;
.query-editor {
padding: 0.5em;
background-color: $g8-storm;
padding: 6px;
background-color: $g7-graphite;
border-radius: 0 0 $radius $radius;
}
.query-editor__code {
position: relative;
&__code {
position: relative;
pre {
white-space: pre-wrap;
border: 0;
background-color: $query-editor-tab-inactive;
font-weight: 600;
color: $c-comet;
border-radius: $radius-small $radius-small 0 0;
border-bottom: 2px solid $g6-smoke;
margin-bottom: 0;
overflow: auto;
min-height: 3.25em;
code {
white-space: pre-wrap;
}
// Custom Scrollbar styles, pretty sure these only work in chrome
&::-webkit-scrollbar {
width: 14px;
border-top-right-radius: $radius;
&-button {
background-color: $query-editor-tab-inactive;
}
&-track {
background-color: $query-editor-tab-inactive;
border-top-right-radius: $radius;
}
&-track-piece {
background-color: $query-editor-tab-inactive;
border-top-right-radius: $radius;
}
&-thumb {
background-color: $c-comet;
border: 4px solid $query-editor-tab-inactive;
border-radius: 7px;
}
&-corner {
background-color: $query-editor-tab-inactive;
}
}
&::-webkit-resizer {
background-color: $query-editor-tab-inactive;
}
&.rq-mode {
color: $c-honeydew;
&::-webkit-scrollbar-thumb {
background-color: $c-honeydew;
}
}
}
}
// Tabs for switching between queries
&__tab {
text-align: center;
pre {
padding: 9px;
white-space: pre-wrap;
border: 0;
background-color: $query-editor-tab-inactive;
color: $g13-mist;
height: 30px;
padding: 0 9.5px;
line-height: 30px;
font-size: 14px;
font-weight: 600;
color: $c-comet;
border-radius: $radius-small $radius-small 0 0;
margin-right: 2px;
transition:
color 0.25s ease,
background-color 0.25s ease;
border-bottom: 2px solid $query-editor-tab-active;
margin-bottom: 0;
overflow: auto;
min-height: 3.25em;
@include custom-scrollbar($query-editor-tab-inactive, $c-pool);
&.active {
background-color: $query-editor-tab-active;
color: $g20-white;
code {
white-space: pre-wrap;
}
&:hover {
cursor: pointer;
color: $g20-white;
&.rq-mode {
color: $c-rainforest;
@include custom-scrollbar($query-editor-tab-inactive, $c-rainforest);
}
}
&__tabs {
display: flex;
width: 100%;
justify-content: flex-start;
padding: 8px 9.5px 0 9.5px;
background-color: $query-editor-tab-inactive;
flex-wrap: wrap;
}
&__tabs-heading {
}
// Tabs for switching between queries
.query-editor__tabs {
display: flex;
width: 100%;
justify-content: flex-start;
padding: 8px 9px 0 9px;
background-color: $query-editor-tab-inactive;
flex-wrap: wrap;
&-heading {
flex-basis: 100%;
width: 100%;
font-size: 12px;
@ -111,326 +54,317 @@ $query-editor-height: 35vh;
text-transform: uppercase;
letter-spacing: 0.3px;
}
}
.query-editor__tab {
text-align: center;
background-color: $query-editor-tab-inactive;
color: $g13-mist;
height: 28px;
padding: 0 9px;
line-height: 28px;
font-size: 12px;
font-weight: 600;
border-radius: $radius-small $radius-small 0 0;
margin-right: 2px;
transition:
color 0.25s ease,
background-color 0.25s ease;
// List of options
&__list {
&:hover {
cursor: pointer;
color: $g20-white;
}
&.active {
background-color: $query-editor-tab-active;
color: $g20-white;
}
}
// List of options
.query-editor__list {
margin: 0;
padding: 9.5px 0 0 0;
background-color: $query-editor-tab-active;
border-radius: 0 0 $radius-small $radius-small;
min-height: $query-editor-height;
&-item {
color: $g11-sidewalk;
list-style-type: none;
margin: 0;
padding: 9.5px 0 0 0;
background-color: $g6-smoke;
border-radius: 0 0 $radius-small $radius-small;
min-height: $query-editor-height;
max-height: 80vh;
overflow: auto;
font-size: 12px;
padding: 4px 9.5px 4px 19px;
transition:
color 0.25s ease,
background-color 0.25s ease;
// Custom Scrollbar styles, pretty sure these only work in chrome
&::-webkit-scrollbar {
width: 14px;
border-bottom-right-radius: $radius;
&:hover {
background-color: $g5-pepper;
color: $g17-whisper;
cursor: pointer;
}
}
&-radio {
&.active {
color: $g20-white;
background-color: $g5-pepper;
font-weight: 600;
}
}
&-checkbox {
display: flex;
align-items: center;
justify-content: space-between;
&-button {
background-color: $g6-smoke;
&.checked {
color: $g20-white;
font-weight: 600;
// Animate checked state
.query-editor__list-checkbox__checkbox {
&:before {
opacity: 1;
transform: translate(-50%,-50%) scale(0.4,0.4);
}
}
&-track {
background-color: $g6-smoke;
border-bottom-right-radius: $radius;
// Fade in & out dropdowns when checked
.query-editor__hidden-dropdown {
visibility: visible;
.dropdown {
opacity: 1;
}
}
&-track-piece {
}
.dropdown {
.btn.dropdown-toggle {
text-align: left;
background-color: $g5-pepper;
border: 4px solid $g6-smoke;
border-radius: 7px;
}
&-thumb {
background-color: $g8-storm;
border: 4px solid $g6-smoke;
border-radius: 7px;
}
&-corner {
background-color: $g6-smoke;
}
}
&::-webkit-resizer {
background-color: $g6-smoke;
}
border-color: $g5-pepper;
color: $g13-mist !important;
&-item {
color: $g13-mist;
list-style-type: none;
margin: 0;
font-size: 13px;
padding: 4px 9.5px 4px 19px;
transition:
color 0.25s ease,
background-color 0.25s ease;
&:hover {
background-color: $g7-graphite;
color: $g20-white;
cursor: pointer;
&:hover {
background-color: $g6-smoke;
border-color: $g6-smoke;
color: $g20-white !important;
}
&:active,
&:active:hover,
&:active:focus,
&.active {
color: $g20-white !important;
background-color: $g7-graphite;
border-color: $g6-smoke;
}
}
}
&-radio {
&.active {
color: $g20-white;
background-color: $g7-graphite;
font-weight: 600;
}
}
&-checkbox {
display: flex;
align-items: center;
justify-content: space-between;
.dropdown-menu {
width: 100%;
min-width: 100%;
max-width: 100%;
background-color: $g5-pepper;
&.checked {
color: $g20-white;
font-weight: 600;
li {
margin-bottom: 2px;
&:last-child {
margin-bottom: 0;
}
}
li > a {
font-size: 13px;
padding-left: 31px;
position: relative;
// Animate checked state
.query-editor__list-checkbox__checkbox {
&:hover {
background-color: $g6-smoke;
}
// Checkbox background
&:after {
content: '';
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
background-color: $g4-onyx;
border-radius: 2px;
width: 16px;
height: 16px;
z-index: 1;
transition: background-color 0.25s ease;
}
// Checkbox check
&:before {
opacity: 0;
content: '';
position: absolute;
top: 50%;
left: 13px;
transform: translate(-50%,-50%);
background-color: $c-pool;
border-radius: 50%;
width: 20px;
height: 20px;
z-index: 2;
transition: all 0.25s ease;
}
}
li.active > a {
background: none;
background-color: $g7-graphite;
// Checkbox background
&:after {
background-color: $g6-smoke;
}
// Checkbox check
&:before {
opacity: 1;
transform: translate(-50%,-50%) scale(0.4,0.4);
}
}
// Fade in & out dropdowns when checked
.query-editor__hidden-dropdown {
visibility: visible;
.dropdown {
opacity: 1;
}
}
}
.dropdown {
.btn.dropdown-toggle {
text-align: left;
background-color: $g5-pepper;
border-color: $g5-pepper;
color: $g13-mist !important;
&:hover {
background-color: $g6-smoke;
border-color: $g6-smoke;
color: $g20-white !important;
}
&:active,
&:active:hover,
&:active:focus,
&.active {
color: $g20-white !important;
background-color: $g7-graphite;
border-color: $g6-smoke;
}
}
.dropdown-menu {
width: 100%;
min-width: 100%;
max-width: 100%;
background-color: $g5-pepper;
li {
margin-bottom: 2px;
&:last-child {
margin-bottom: 0;
}
}
li > a {
font-size: 13px;
padding-left: 31px;
position: relative;
&:hover {
background-color: $g6-smoke;
}
// Checkbox background
&:after {
content: '';
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
background-color: $g4-onyx;
border-radius: 2px;
width: 16px;
height: 16px;
z-index: 1;
transition: background-color 0.25s ease;
}
// Checkbox check
&:before {
opacity: 0;
content: '';
position: absolute;
top: 50%;
left: 13px;
transform: translate(-50%,-50%);
background-color: $c-pool;
border-radius: 50%;
width: 20px;
height: 20px;
z-index: 2;
transition: all 0.25s ease;
}
}
li.active > a {
background: none;
background-color: $g7-graphite;
// Checkbox background
&:after {
background-color: $g6-smoke;
}
// Checkbox check
&:before {
opacity: 1;
transform: translate(-50%,-50%) scale(0.4,0.4);
}
}
}
}
&__checkbox {
position: relative;
padding-left: 24px;
&:before {
z-index: 2;
content: '';
position: absolute;
top: 50%;
left: 8px;
transform: translate(-50%,-50%);
width: 20px;
height: 20px;
opacity: 0;
background-color: $c-pool;
border-radius: 50%;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
&:after {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-color: $g5-pepper;
border-radius: 3px;
z-index: 1;
}
}
}
&-header {
&__checkbox {
position: relative;
background-color: $g6-smoke;
padding: 9.5px 19px 0px 19px;
}
}
padding-left: 24px;
// List empty state
&__empty {
text-align: center;
color: $g13-mist;
display: inline-block;
width: 100%;
padding: 18px 0;
min-height: $query-editor-height;
max-height: 80vh;
background-color: $g7-graphite;
border-radius: 0 0 $radius $radius;
}
// Hidden dropdowns
&__hidden-dropdown {
visibility: hidden;
transition: all 0.3s all;
.dropdown {
transition: opacity 0.3s ease;
opacity: 0;
}
}
// Filter list results
&__filter {
position: relative;
width: 100%;
display: block;
background-color: $g5-pepper;
border: 2px solid $g5-pepper;
color: $g13-mist;
height: 30px;
border-radius: 15px;
font-size: 13px;
padding-left: 38px;
outline: none;
color: $g20-white;
font-weight: 700;
transition:
border-color 0.25s ease,
color 0.25s ease,
background-color 0.25s ease;
&:focus {
border-color: $c-pool;
& + .icon {
color: $g20-white;
&:before {
z-index: 2;
content: '';
position: absolute;
top: 50%;
left: 8px;
transform: translate(-50%,-50%);
width: 20px;
height: 20px;
opacity: 0;
background-color: $c-pool;
border-radius: 50%;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
&:after {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-color: $g5-pepper;
border-radius: 3px;
z-index: 1;
}
}
&::-webkit-input-placeholder {
color: $g10-wolf;
font-weight: 500;
}
&:-moz-placeholder { /* Firefox 18- */
color: $g10-wolf;
font-weight: 500;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $g10-wolf;
font-weight: 500;
}
&:-ms-input-placeholder {
color: $g10-wolf;
font-weight: 500;
}
+ .icon {
position: absolute;
top: calc(50% + 5px);
left: calc(19px * 2);
transform: translateY(-50%);
color: $g10-wolf;
transition: color 0.25s ease;
font-size: 12px;
z-index: 2;
}
&-header {
position: relative;
background-color: $query-editor-tab-active;
padding: 8px 18px 0px 18px;
}
}
// List empty state
.query-editor__empty {
text-align: center;
color: $g10-wolf;
display: inline-block;
width: 100%;
padding: 18px 0;
height: $query-editor-height;
background-color: $query-editor-tab-active;
border-radius: 0 0 $radius $radius;
}
// Hidden dropdowns
.query-editor__hidden-dropdown {
visibility: hidden;
transition: all 0.3s all;
.dropdown {
transition: opacity 0.3s ease;
opacity: 0;
}
}
// Filter list results
.query-editor__filter {
position: relative;
width: 100%;
display: block;
background-color: $g3-castle;
border: 2px solid $g6-smoke;
color: $g13-mist;
height: 30px;
border-radius: 15px;
font-size: 13px;
padding-left: 38px;
outline: none;
color: $g20-white;
font-weight: 700;
transition:
border-color 0.25s ease,
color 0.25s ease,
background-color 0.25s ease;
&:focus {
border-color: $c-pool;
& + .icon {
color: $g20-white;
}
}
// Warning for converting to raw query
&__warning {
opacity: 0;
transition: opacity 0.35s ease;
&::-webkit-input-placeholder {
color: $g10-wolf;
font-weight: 500;
}
&:-moz-placeholder { /* Firefox 18- */
color: $g10-wolf;
font-weight: 500;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $g10-wolf;
font-weight: 500;
}
&:-ms-input-placeholder {
color: $g10-wolf;
font-weight: 500;
}
+ .icon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(56,56,70,0.8);
z-index: 999;
border-radius: $radius-small $radius-small 0 0;
border-bottom: 2px solid $g6-smoke;
display: flex;
justify-content: center;
align-items: center;
top: calc(50% + 5px);
left: calc(19px * 2);
transform: translateY(-50%);
color: $g10-wolf;
transition: color 0.25s ease;
font-size: 12px;
z-index: 2;
}
}
&:hover {
opacity: 1;
}
// Warning for converting to raw query
.query-editor__warning {
opacity: 0;
transition: opacity 0.35s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(56,56,70,0.8);
z-index: 999;
border-radius: $radius-small $radius-small 0 0;
border-bottom: 2px solid $g6-smoke;
display: flex;
justify-content: center;
align-items: center;
&:hover {
opacity: 1;
}
}