Remove unused styles
Alex P
parent
7316914f8d
commit
bb3320ebc5
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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%; }
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue