diff --git a/ui/src/style/pages/data-explorer/font-scale.scss b/ui/src/style/pages/data-explorer/font-scale.scss deleted file mode 100644 index 9d7e54a65..000000000 --- a/ui/src/style/pages/data-explorer/font-scale.scss +++ /dev/null @@ -1,100 +0,0 @@ -$breakpoint-a: 1500px; -$breakpoint-b: 1800px; -$breakpoint-c: 2100px; - - -@media only screen and (min-width: $breakpoint-a) { - .data-explorer { - .qeditor--list-item, - .query-builder--tab-label { - font-size: 14px; - } - .query-builder--tab { - height: 38px; - } - .graph-title { - font-size: 16px; - } - .query-builder--column-heading { - font-size: 15px; - } - } -} - -@media only screen and (min-width: $breakpoint-b) { - .data-explorer { - .qeditor--list-item, - .query-builder--tab-label { - font-size: 15px; - } - .query-builder--tab { - height: 42px; - } - .query-builder--column-heading { - font-size: 16px; - } - .toggle-sm .toggle-btn { - font-size: 14px; - } - .btn-xs { - font-size: 13.5px; - } - .query-builder--tab-delete { - width: 20px; - height: 20px; - - &:before, - &:after { - width: 10px; - } - } - .raw-text--field, - .query-builder--query-preview pre, - .query-builder--query-preview pre code { - font-size: 14px !important; - line-height: 16px !important; - } - } -} -@media only screen and (min-width: $breakpoint-c) { - .data-explorer { - .qeditor--list-item { - letter-spacing: 0.3px; - } - .query-builder--tab-label { - font-size: 16px; - } - .query-builder--tab { - height: 46px; - } - .query-builder--column-heading { - font-size: 17px; - font-weight: 400; - text-transform: uppercase; - } - .toggle-sm .toggle-btn { - font-size: 14px; - } - .btn-xs { - font-size: 14px; - } - .multi-select-dropdown .dropdown-toggle { - width: 140px; - } - .query-builder--tab-delete { - width: 22px; - height: 22px; - - &:before, - &:after { - width: 12px; - } - } - .raw-text--field, - .query-builder--query-preview pre, - .query-builder--query-preview pre code { - font-size: 16px !important; - line-height: 18px !important; - } - } -} \ No newline at end of file diff --git a/ui/src/style/pages/data-explorer/query-builder.scss b/ui/src/style/pages/data-explorer/query-builder.scss deleted file mode 100644 index 263c0c437..000000000 --- a/ui/src/style/pages/data-explorer/query-builder.scss +++ /dev/null @@ -1,239 +0,0 @@ -/* Variables */ -$query-builder-tabs-width: 210px; -$query-builder--column-heading-height: 50px; - - -.query-builder { - position: relative; - width: calc(100% - #{($explorer-page-padding * 2)}); - left: $explorer-page-padding; - border: 0; - display: flex; - align-items: stretch; - justify-content: space-between; -} - -// Tabs -.query-builder--tabs { - margin: 16px 0; - display: flex; - width: $query-builder-tabs-width; - flex-direction: column; - align-items: stretch; - background-color: $g3-castle; - border-radius: $radius 0 0 $radius; -} -.query-builder--tabs-heading { - height: 90px; - padding: 0 9px 0 16px; - display: flex; - align-items: center; - justify-content: space-between; - - h1 { - @include no-user-select(); - font-size: 17px; - font-weight: 400; - text-transform: uppercase; - color: $g18-cloud; - margin: 0; - } -} -.query-builder--tab { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - color: $g11-sidewalk; - background: transparent; - height: 30px; - cursor: pointer; - padding: 0 8px 0 16px; - transition: - color 0.25s ease, - background-color 0.25s ease; - - &:hover { - color: $g15-platinum; - background-color: $g4-onyx; - } - &.active { - color: $g18-cloud; - background: $g5-pepper; - } - - &-delete { - margin: 0; - width: 16px; - height: 16px; - background-color: transparent; - display: inline-block; - vertical-align: text-top; - position: relative; - - &:before, - &:after { - display: block; - content: ''; - width: 8px; - height: 2px; - background-color: $g8-storm; - transition: - background-color 0.25s ease; - position: absolute; - top: 50%; - left: 50%; - } - &:before { - transform: translate(-50%,-50%) rotate(45deg); - } - &:after { - transform: translate(-50%,-50%) rotate(-45deg); - } - - &:hover { - &:before, - &:after { - background-color: $c-dreamsicle; - } - } - } -} -.panel--tab-new { - > .dropdown-toggle { - height: 30px !important; - border-radius: $radius; - background-color: $c-pool; - color: $g20-white !important; - padding: 0; - - > .icon { - margin: 0 !important; - font-size: 12px; - position: relative; - top: -1px; - } - &:hover { - background-color: $c-laser; - } - } - > .dropdown-menu { - width: 145px !important; - min-width: 108px !important; - max-width: 145px !important; - } -} -.panel--tab-new.open { - > .dropdown-toggle, - > .dropdown-toggle:hover { - background-color: $c-laser !important; - color: $g20-white !important; - } -} -.query-builder--tab-label { - display: inline-block; - font-size: 12px; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - width: ($query-builder-tabs-width - 8px - 16px - 16px); - text-overflow: ellipsis; - @include no-user-select(); -} - -/* - Tab Contents - ------------------------------------------- -*/ - -.query-builder--tab-contents { - flex: 1 0 0; - margin: 16px 0; - background-color: $g4-onyx; - border-radius: 0 $radius $radius 0; - overflow: hidden; - position: relative; -} -.query-builder--tab-contents > div { - position: absolute; - top: 4px; - left: 4px; - width: calc(100% - 8px); - height: calc(100% - 8px); -} -.query-builder--query-preview { - position: relative; - - pre { - display: flex; - align-items: center; - padding: 10px; - border: 2px solid $query-editor-tab-inactive; - background-color: $query-editor-tab-inactive; - color: $c-pool; - border-radius: $radius; - margin-bottom: 0; - overflow: auto; - height: 86px; - @include custom-scrollbar($query-editor-tab-inactive, $c-pool); - - code { - margin: 0; - } - } -} -.query-builder--columns { - position: absolute; - width: 100%; - height: calc(100% - 90px); - top: 90px; -} -.query-builder--column-heading { - @include no-user-select(); - width: 100%; - height: $query-builder--column-heading-height; - display: flex; - align-items: center; - justify-content: space-between; - font-size: 14px; - font-weight: 600; - color: $g13-mist; - padding: 0 9px; - line-height: $query-builder--column-heading-height; - border-bottom: 2px solid $g5-pepper; -} -.query-builder--column { - position: absolute; - width: 25%; - height: 100%; - top: 0; - - .qeditor--list { - position: absolute; - top: $query-builder--column-heading-height; - height: calc(100% - #{$query-builder--column-heading-height}); - width: 100%; - left: 0; - padding: 0; - overflow: auto; - overflow-x: hidden; - overflow-y: scroll; - @include custom-scrollbar($g4-onyx,$c-pool); - background-color: $g4-onyx; - } - .qeditor--empty { - width: 100%; - margin-top: 0; - height: calc(100% - #{$query-builder--column-heading-height}); - position: absolute; - top: $query-builder--column-heading-height; - left: 0; - background-color: transparent; - - p,h1,h2,h3,h4,h5,h6 { @include no-user-select(); } - } -} -.query-builder--column:nth-of-type(1) { left: 0; } -.query-builder--column:nth-of-type(2) { left: 25%; } -.query-builder--column:nth-of-type(3) { left: 50%; } -.query-builder--column:nth-of-type(4) { left: 75%; } \ No newline at end of file diff --git a/ui/src/style/pages/data-explorer/query-editor.scss b/ui/src/style/pages/data-explorer/query-editor.scss deleted file mode 100644 index 0393608b0..000000000 --- a/ui/src/style/pages/data-explorer/query-editor.scss +++ /dev/null @@ -1,246 +0,0 @@ -/* - - Query Editor Styles - ------------------------------------------------- - Abbreviated as "qeditor" - -*/ - -// Tabs for switching between queries -.qeditor--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; - color: $g9-mountain; - font-weight: 500; - margin-bottom: 8px; - text-transform: uppercase; - letter-spacing: 0.3px; - } -} -.qeditor--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; - @include no-user-select(); - transition: - color 0.25s ease, - background-color 0.25s ease; - - &:hover { - cursor: pointer; - color: $g20-white; - } - &.active { - background-color: $query-editor-tab-active; - color: $g20-white; - } -} - -// List of options -.qeditor--list { - margin: 0; - padding: 9.5px 0 0 0; - background-color: $query-editor-tab-active; - border-radius: 0 0 $radius-small $radius-small; - - &-item { - @include no-user-select(); - color: $g11-sidewalk; - list-style-type: none; - margin: 0; - font-size: 12px; - font-weight: 500; - padding: 4px 9px; - transition: - color 0.25s ease, - background-color 0.25s ease; - - &:hover { - background-color: $g5-pepper; - color: $g15-platinum; - cursor: pointer; - } - } - &-radio { - &.active { - color: $g20-white; - background-color: $g5-pepper; - font-weight: 700; - } - } - &-checkbox { - display: flex; - align-items: center; - justify-content: space-between; - - &.checked { - color: $g20-white; - font-weight: 600; - - // Animate checked state - .qeditor--list-checkbox__checkbox { - &:before { - opacity: 1; - transform: translate(-50%,-50%) scale(0.4,0.4); - } - } - // Fade in & out dropdowns when checked - .qeditor--hidden-dropdown { - visibility: visible; - - .dropdown { - opacity: 1; - } - } - } - - &__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: $g2-kevlar; - border-radius: 3px; - z-index: 1; - } - } - } -} -.qeditor--list-header { - position: absolute; - top: 7px; - right: 16px; - width: calc(50% - 16px); - height: 30px; - padding: 0; - z-index: 10; - display: flex; - align-items: center; - justify-content: flex-end; -} - -// List empty state -.qeditor--empty { - text-align: center; - color: $g10-wolf; - flex: 1 0 0; - margin: 16px 0; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: transparent; - background-color: $g3-castle; - border-radius: 0 $radius $radius 0; - &, - & > * { - @include no-user-select(); - } -} - -// Hidden dropdowns -.qeditor--hidden-dropdown { - visibility: hidden; - transition: all 0.3s all; - - .dropdown { - transition: opacity 0.3s ease; - opacity: 0; - } -} - -// Filter list results -.qeditor--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: 28px; - 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; - - } - } - &::-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: 50%; - left: 11px; - transform: translateY(-50%); - color: $g10-wolf; - transition: color 0.25s ease; - font-size: 12px; - z-index: 2; - } -} diff --git a/ui/src/style/pages/data-explorer/raw-text.scss b/ui/src/style/pages/data-explorer/raw-text.scss deleted file mode 100644 index 5d83ff176..000000000 --- a/ui/src/style/pages/data-explorer/raw-text.scss +++ /dev/null @@ -1,156 +0,0 @@ -/* - Variables - ------------------------------------- -*/ - -$raw-text-color: $c-pool; -$raw-text-height: 52px; -$raw-status-height: 34px; -/* ^ These 2 should total to 86px */ -$query-template-dropdown-width: 135px; -$query-template-dropdown-height: 22px; -$query-template-dropdown-offset: 6px; -$query-template-dropdown-menu-width: 200px; - - -/* - Dropping the metaphorical CSS nuke here, - was experiencing some weird typographic jank - between builder / raw tabs -*/ -.raw-text--field, -.query-builder--query-preview pre, -.query-builder--query-preview pre code { - font-style: normal !important; - letter-spacing: 0 !important; - font-size: 12px !important; - font-variant: normal !important; - line-height: 14px !important; - font-family: $code-font !important; - font-weight: 600 !important; - word-wrap: break-word !important; - word-break: break-all !important; - white-space: pre-wrap !important; - -webkit-font-smoothing: antialiased; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - resize: none; - text-size-adjust: 100% !important; - text-shadow: none !important; -} - - -.raw-text--field { - @include custom-scrollbar($g2-kevlar, $raw-text-color); - display: block; - width: 100%; - height: $raw-text-height; - background-color: $g2-kevlar; - border: 2px solid $g2-kevlar; - border-bottom: 0; - color: $raw-text-color; - padding: 12px 10px 0 10px; - border-radius: $radius $radius 0 0; - margin: 0; - transition: - color 0.25s ease, - background-color 0.25s ease, - border-color 0.25s ease; - - &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: $g8-storm; - } - &::-moz-placeholder { /* Firefox 19+ */ - color: $g8-storm; - } - &:-ms-input-placeholder { /* IE 10+ */ - color: $g8-storm; - } - &:-moz-placeholder { /* Firefox 18- */ - color: $g8-storm; - } - &:hover, - &:hover + .raw-text--status { - border-color: $g5-pepper; - } - &:focus { - outline: none; - color: $raw-text-color !important; - border-color: $c-pool; - } - &:focus + .raw-text--status { - border-color: $c-pool; - } -} -.raw-text--status { - position: relative; - width: 100%; - height: $raw-status-height; - line-height: $raw-status-height; - font-size: 12px; - background-color: $g2-kevlar; - border: 2px solid $g2-kevlar; - padding: 0 10px; - padding-right: ($query-template-dropdown-width + ($query-template-dropdown-offset * 2)) !important; - border-radius: 0 0 $radius $radius; - border-top: 0; - color: $g11-sidewalk; - font-family: $code-font; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - transition: - color 0.25s ease, - background-color 0.25s ease, - border-color 0.25s ease; - - span.icon { - margin-right: 5px; - } - - /* Error State */ - &.raw-text--error { - color: $c-dreamsicle; - } - - /* Warning State */ - &.raw-text--warning { - color: $c-comet; - } - - /* Success State */ - &.raw-text--success { - color: $c-rainforest; - } - - /* Loading State */ - .loading-dots { - top: calc(50% + 2px); - left: 14px; - transform: translateY(-50%); - } -} - -.dropdown.query-template { - position: absolute; - top: ($raw-text-height + (($raw-status-height - $query-template-dropdown-height) / 2)); - right: $query-template-dropdown-offset; - - div.dropdown-toggle.btn.btn-sm { - width: $query-template-dropdown-width; - padding: 0 9px !important; - height: $query-template-dropdown-height !important; - line-height: $query-template-dropdown-height !important; - font-size: 12px; - border-radius: $radius-small; - } - - .dropdown-menu { - left: initial; - right: 0; - width: $query-template-dropdown-menu-width; - min-width: $query-template-dropdown-menu-width; - max-width: $query-template-dropdown-menu-width; - } -} diff --git a/ui/src/style/pages/data-explorer/tag-list.scss b/ui/src/style/pages/data-explorer/tag-list.scss deleted file mode 100644 index 47173b2ad..000000000 --- a/ui/src/style/pages/data-explorer/tag-list.scss +++ /dev/null @@ -1,183 +0,0 @@ -.tag-list { - - &__item { - height: 30px; - display: flex; - align-items: center; - justify-content: space-between; - - &:hover .tag-list__group-by { - display: flex; - } - - &.open { - font-weight: 600; - color: $g20-white; - - .tag-list__caret .icon { - transform: translateY(-50%) rotate(90deg); - } - } - } - &__title { - display: flex; - align-items:center; - justify-content: flex-start; - - .badge { - background-color: $g2-kevlar; - color: $c-pool; - margin-left: 5px; - } - } - &__caret { - width: 16px; - position: relative; - - .icon { - font-size: 10px; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%) rotate(0deg); - transition: transform 0.25s ease; - } - } -} - -.tag-value-list { - padding: 0; - - &__checkbox { - width: 16px; - height: 16px; - background-color: $g2-kevlar; - border-radius: 3px; - position: relative; - margin-right: 8px; - - &:after { - z-index: 2; - content: ''; - position: absolute; - top: 50%; - left: 50%; - 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; - } - } - - &__item { - padding-left: 35px; - position: relative; - display: flex; - align-items: center; - - &.active { - background: $g4-onyx; - color: $g20-white; - font-weight: 600; - - .tag-value-list__checkbox:after { - transform: translate(-50%,-50%) scale(0.4,0.4); - opacity: 1; - } - } - } - &__filter { - position: relative; - width: 100%; - display: block; - background-color: $g3-castle; - border: 2px solid $g5-pepper; - color: $g13-mist; - height: 30px; - border-radius: 15px; - font-size: 13px; - padding-left: 25px; - 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; - - } - } - &::-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: 50%; - left: 39px; - transform: translateY(-50%); - color: $g10-wolf; - transition: color 0.25s ease; - font-size: 12px; - z-index: 2; - } - - &-container { - padding: 8px 9.5px 8px 31px; - position: relative; - } - } -} - -.tag-list__group-by { - display: none; - 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 { - color: $g20-white !important; - background-color: $g7-graphite; - border-color: $g6-smoke; - } - &.active { - display: flex; - background: $c-pool; - border-color: $c-pool; - - &:hover { - background: $c-laser; - border-color: $c-laser; - } - } -}