Alex P
parent
fc1a2cac1b
commit
dd22cb1628
|
|
@ -1,143 +1,148 @@
|
||||||
.explorer {
|
.explorer {
|
||||||
display: block;
|
display: block;
|
||||||
background-color: $g6-smoke;
|
background-color: $g3-castle;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
|
transition: background-color 0.25s ease;
|
||||||
|
|
||||||
&__header {
|
&:hover {
|
||||||
background-color: $g6-smoke;
|
background-color: $g4-onyx;
|
||||||
align-items: center;
|
}
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
height: 3em;
|
|
||||||
padding: 1em;
|
|
||||||
cursor: pointer;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-radius: $radius;
|
|
||||||
|
|
||||||
&-name {
|
// For when an explorer item is open
|
||||||
color: $g13-mist;
|
&.active {
|
||||||
font-weight: 400;
|
background-color: $g5-pepper;
|
||||||
font-size: 16px;
|
.explorer__header {
|
||||||
position: relative;
|
&-name {
|
||||||
padding-left: 24px;
|
color: $g20-white;
|
||||||
transition: color 0.25s ease;
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
position: absolute;
|
transform: translateY(-50%) rotate(90deg);
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.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 Selector */
|
||||||
.time-range-dropdown {
|
.time-range-dropdown {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
.dropdown-toggle {
|
.dropdown-toggle {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.explorer__header-actions {
|
.explorer__header-actions {
|
||||||
|
|
@ -149,7 +154,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert.alert-rawquery {
|
.alert.alert-rawquery {
|
||||||
border-color: $g5-pepper;
|
border-color: $g5-pepper;
|
||||||
border-color: $g6-smoke;
|
border-color: $g6-smoke;
|
||||||
color: $g12-forge;
|
color: $g12-forge;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,39 @@
|
||||||
.panel-builder {
|
.panel-builder {
|
||||||
|
width: 399px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
background: $g1-raven;
|
background: $g1-raven;
|
||||||
background: -moz-linear-gradient(top, $g5-pepper 0%, $g1-raven 100%);
|
@include gradient-v($g2-kevlar,$g0-obsidian);
|
||||||
background: -webkit-linear-gradient(top, $g5-pepper 0%,$g1-raven 100%);
|
@include custom-scrollbar($g2-kevlar,$c-pool);
|
||||||
background: linear-gradient(to bottom, $g5-pepper 0%,$g1-raven 100%);
|
}
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g5-pepper', endColorstr='$g1-raven',GradientType=0 );
|
.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 {
|
&:hover {
|
||||||
display: flex;
|
color: $g20-white;
|
||||||
text-align: center;
|
|
||||||
padding: $explorer-page-padding $explorer-page-padding 0 $explorer-page-padding;
|
|
||||||
background: $g3-castle;
|
|
||||||
}
|
}
|
||||||
&__tab {
|
&.active {
|
||||||
padding: 18px 0 9px 0px;
|
background-color: $g5-pepper;
|
||||||
flex: 1;
|
color: $g20-white;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&__tab-content {
|
&-content {
|
||||||
padding: $explorer-page-padding;
|
padding: $explorer-page-padding;
|
||||||
}
|
}
|
||||||
&__item {
|
}
|
||||||
margin-bottom: 6px;
|
.panel-builder__item {
|
||||||
}
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
@ -1,107 +1,50 @@
|
||||||
.checkbox.checked {
|
|
||||||
background-color: gainsboro !important;
|
|
||||||
}
|
|
||||||
$query-editor-gutter: 16px;
|
$query-editor-gutter: 16px;
|
||||||
$query-editor-tab-inactive: $g5-pepper;
|
$query-editor-tab-inactive: $g2-kevlar;
|
||||||
$query-editor-tab-active: $g6-smoke;
|
$query-editor-tab-active: $g3-castle;
|
||||||
$query-editor-height: 35vh;
|
$query-editor-height: 300px;
|
||||||
|
|
||||||
.query-editor {
|
.query-editor {
|
||||||
padding: 0.5em;
|
padding: 6px;
|
||||||
background-color: $g8-storm;
|
background-color: $g7-graphite;
|
||||||
border-radius: 0 0 $radius $radius;
|
border-radius: 0 0 $radius $radius;
|
||||||
|
}
|
||||||
|
.query-editor__code {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&__code {
|
pre {
|
||||||
position: relative;
|
padding: 9px;
|
||||||
|
white-space: pre-wrap;
|
||||||
pre {
|
border: 0;
|
||||||
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;
|
|
||||||
background-color: $query-editor-tab-inactive;
|
background-color: $query-editor-tab-inactive;
|
||||||
color: $g13-mist;
|
font-weight: 600;
|
||||||
height: 30px;
|
color: $c-comet;
|
||||||
padding: 0 9.5px;
|
|
||||||
line-height: 30px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: $radius-small $radius-small 0 0;
|
border-radius: $radius-small $radius-small 0 0;
|
||||||
margin-right: 2px;
|
border-bottom: 2px solid $query-editor-tab-active;
|
||||||
transition:
|
margin-bottom: 0;
|
||||||
color 0.25s ease,
|
overflow: auto;
|
||||||
background-color 0.25s ease;
|
min-height: 3.25em;
|
||||||
|
@include custom-scrollbar($query-editor-tab-inactive, $c-pool);
|
||||||
|
|
||||||
&.active {
|
code {
|
||||||
background-color: $query-editor-tab-active;
|
white-space: pre-wrap;
|
||||||
color: $g20-white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&.rq-mode {
|
||||||
cursor: pointer;
|
color: $c-rainforest;
|
||||||
color: $g20-white;
|
@include custom-scrollbar($query-editor-tab-inactive, $c-rainforest);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__tabs {
|
}
|
||||||
display: flex;
|
// Tabs for switching between queries
|
||||||
width: 100%;
|
.query-editor__tabs {
|
||||||
justify-content: flex-start;
|
display: flex;
|
||||||
padding: 8px 9.5px 0 9.5px;
|
width: 100%;
|
||||||
background-color: $query-editor-tab-inactive;
|
justify-content: flex-start;
|
||||||
flex-wrap: wrap;
|
padding: 8px 9px 0 9px;
|
||||||
}
|
background-color: $query-editor-tab-inactive;
|
||||||
&__tabs-heading {
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
&-heading {
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
@ -111,326 +54,317 @@ $query-editor-height: 35vh;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.3px;
|
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
|
&:hover {
|
||||||
&__list {
|
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;
|
margin: 0;
|
||||||
padding: 9.5px 0 0 0;
|
font-size: 12px;
|
||||||
background-color: $g6-smoke;
|
padding: 4px 9.5px 4px 19px;
|
||||||
border-radius: 0 0 $radius-small $radius-small;
|
transition:
|
||||||
min-height: $query-editor-height;
|
color 0.25s ease,
|
||||||
max-height: 80vh;
|
background-color 0.25s ease;
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
// Custom Scrollbar styles, pretty sure these only work in chrome
|
&:hover {
|
||||||
&::-webkit-scrollbar {
|
background-color: $g5-pepper;
|
||||||
width: 14px;
|
color: $g17-whisper;
|
||||||
border-bottom-right-radius: $radius;
|
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 {
|
&.checked {
|
||||||
background-color: $g6-smoke;
|
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 {
|
// Fade in & out dropdowns when checked
|
||||||
background-color: $g6-smoke;
|
.query-editor__hidden-dropdown {
|
||||||
border-bottom-right-radius: $radius;
|
visibility: visible;
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&-track-piece {
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
.btn.dropdown-toggle {
|
||||||
|
text-align: left;
|
||||||
background-color: $g5-pepper;
|
background-color: $g5-pepper;
|
||||||
border: 4px solid $g6-smoke;
|
border-color: $g5-pepper;
|
||||||
border-radius: 7px;
|
color: $g13-mist !important;
|
||||||
}
|
|
||||||
&-thumb {
|
|
||||||
background-color: $g8-storm;
|
|
||||||
border: 4px solid $g6-smoke;
|
|
||||||
border-radius: 7px;
|
|
||||||
}
|
|
||||||
&-corner {
|
|
||||||
background-color: $g6-smoke;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&::-webkit-resizer {
|
|
||||||
background-color: $g6-smoke;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-item {
|
&:hover {
|
||||||
color: $g13-mist;
|
background-color: $g6-smoke;
|
||||||
list-style-type: none;
|
border-color: $g6-smoke;
|
||||||
margin: 0;
|
color: $g20-white !important;
|
||||||
font-size: 13px;
|
}
|
||||||
padding: 4px 9.5px 4px 19px;
|
&:active,
|
||||||
transition:
|
&:active:hover,
|
||||||
color 0.25s ease,
|
&:active:focus,
|
||||||
background-color 0.25s ease;
|
&.active {
|
||||||
|
color: $g20-white !important;
|
||||||
&:hover {
|
background-color: $g7-graphite;
|
||||||
background-color: $g7-graphite;
|
border-color: $g6-smoke;
|
||||||
color: $g20-white;
|
}
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
}
|
.dropdown-menu {
|
||||||
&-radio {
|
width: 100%;
|
||||||
&.active {
|
min-width: 100%;
|
||||||
color: $g20-white;
|
max-width: 100%;
|
||||||
background-color: $g7-graphite;
|
background-color: $g5-pepper;
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-checkbox {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
&.checked {
|
li {
|
||||||
color: $g20-white;
|
margin-bottom: 2px;
|
||||||
font-weight: 600;
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li > a {
|
||||||
|
font-size: 13px;
|
||||||
|
padding-left: 31px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
// Animate checked state
|
&:hover {
|
||||||
.query-editor__list-checkbox__checkbox {
|
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 {
|
&:before {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(-50%,-50%) scale(0.4,0.4);
|
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;
|
position: relative;
|
||||||
background-color: $g6-smoke;
|
padding-left: 24px;
|
||||||
padding: 9.5px 19px 0px 19px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// List empty state
|
&:before {
|
||||||
&__empty {
|
z-index: 2;
|
||||||
text-align: center;
|
content: '';
|
||||||
color: $g13-mist;
|
position: absolute;
|
||||||
display: inline-block;
|
top: 50%;
|
||||||
width: 100%;
|
left: 8px;
|
||||||
padding: 18px 0;
|
transform: translate(-50%,-50%);
|
||||||
min-height: $query-editor-height;
|
width: 20px;
|
||||||
max-height: 80vh;
|
height: 20px;
|
||||||
background-color: $g7-graphite;
|
opacity: 0;
|
||||||
border-radius: 0 0 $radius $radius;
|
background-color: $c-pool;
|
||||||
}
|
border-radius: 50%;
|
||||||
|
transition:
|
||||||
// Hidden dropdowns
|
transform 0.25s ease,
|
||||||
&__hidden-dropdown {
|
opacity 0.25s ease;
|
||||||
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;
|
|
||||||
|
|
||||||
|
&: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;
|
&-header {
|
||||||
font-weight: 500;
|
position: relative;
|
||||||
}
|
background-color: $query-editor-tab-active;
|
||||||
&:-moz-placeholder { /* Firefox 18- */
|
padding: 8px 18px 0px 18px;
|
||||||
color: $g10-wolf;
|
}
|
||||||
font-weight: 500;
|
}
|
||||||
}
|
|
||||||
&::-moz-placeholder { /* Firefox 19+ */
|
// List empty state
|
||||||
color: $g10-wolf;
|
.query-editor__empty {
|
||||||
font-weight: 500;
|
text-align: center;
|
||||||
}
|
color: $g10-wolf;
|
||||||
&:-ms-input-placeholder {
|
display: inline-block;
|
||||||
color: $g10-wolf;
|
width: 100%;
|
||||||
font-weight: 500;
|
padding: 18px 0;
|
||||||
}
|
height: $query-editor-height;
|
||||||
+ .icon {
|
background-color: $query-editor-tab-active;
|
||||||
position: absolute;
|
border-radius: 0 0 $radius $radius;
|
||||||
top: calc(50% + 5px);
|
}
|
||||||
left: calc(19px * 2);
|
|
||||||
transform: translateY(-50%);
|
// Hidden dropdowns
|
||||||
color: $g10-wolf;
|
.query-editor__hidden-dropdown {
|
||||||
transition: color 0.25s ease;
|
visibility: hidden;
|
||||||
font-size: 12px;
|
transition: all 0.3s all;
|
||||||
z-index: 2;
|
|
||||||
|
.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;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&::-webkit-input-placeholder {
|
||||||
// Warning for converting to raw query
|
color: $g10-wolf;
|
||||||
&__warning {
|
font-weight: 500;
|
||||||
opacity: 0;
|
}
|
||||||
transition: opacity 0.35s ease;
|
&:-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;
|
position: absolute;
|
||||||
top: 0;
|
top: calc(50% + 5px);
|
||||||
left: 0;
|
left: calc(19px * 2);
|
||||||
width: 100%;
|
transform: translateY(-50%);
|
||||||
height: 100%;
|
color: $g10-wolf;
|
||||||
background-color: rgba(56,56,70,0.8);
|
transition: color 0.25s ease;
|
||||||
z-index: 999;
|
font-size: 12px;
|
||||||
border-radius: $radius-small $radius-small 0 0;
|
z-index: 2;
|
||||||
border-bottom: 2px solid $g6-smoke;
|
}
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&:hover {
|
// Warning for converting to raw query
|
||||||
opacity: 1;
|
.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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue