@finos/perspective-viewer
Version:
The `<perspective-viewer>` Custom Element, frontend for Perspective.js
392 lines (338 loc) • 11.7 kB
text/less
/******************************************************************************
*
* Copyright (c) 2017, the Perspective Authors.
*
* This file is part of the Perspective library, distributed under the terms of
* the Apache License 2.0. The full license can be found in the LICENSE file.
*
*/
@import "./aggregate-selector.less";
:host {
.column-selector-column-title {
display: flex;
width: 100%;
flex-direction: row ;
}
#expression-columns .column-selector-column-title {
width: calc(100% - 24px);
}
#side_panel {
& > :not(:last-child) {
margin-bottom: 6px;
}
.psp-icon {
&:hover {
cursor: pointer;
}
}
.psp-icon__add {
display: flex;
width: 20px;
min-width: 20px;
margin-top: -2px;
height: 0px;
font-family: var(
--column-add--font-family,
var(--button--font-family, inherit)
);
font-display: block;
&:before {
font-feature-settings: "liga";
content: var(--column-add--content, "+");
}
}
.psp-title__columnName {
display: flex;
margin-left: 24px;
margin-top: 3px;
font-size: 12px;
font-weight: 300;
white-space: nowrap;
}
#add-expression {
padding: 6px 0 6px 0;
margin: -6px 0 0 0;
&.expr_editor_open {
background: rgba(0, 0, 0, 0.05);
}
}
.side_panel-action:hover {
cursor: pointer;
}
.dragdrop-highlight {
.column_selector_draggable.dragover,
.column-selector-column:not(:last-child):not(:nth-last-child(2)):not(:nth-last-child(3))
.column_selector_draggable {
border-bottom-color: var(--active--color) ;
}
.column-selector-column:not(:first-child):not([data-label]):not(:nth-last-child(2))
.column_selector_draggable.dragover {
border-top-color: rgb(0 0 0 / 5%) ;
}
}
.column-selector-column {
display: flex;
flex-direction: row;
align-items: stretch;
font-size: 12px;
&:last-child,
&:nth-last-child(2) {
.column_selector_draggable {
border-color: transparent;
}
}
// Expression column toolbar buttons
span.expression-edit-button,
span.expression-delete-button {
padding-top: 1px;
font-family: var(--button--font-family, inherit);
font-display: block;
cursor: pointer;
opacity: 1;
color: #999;
&:hover {
opacity: 1;
color: var(--active--color, #000);
}
}
span.expression-delete-button {
padding-right: 1.5px;
padding-left: 5px;
&::before {
content: var(--column-close--content, "close");
}
}
span.expression-edit-button {
padding-left: 1.5px;
padding-right: 3px;
&::before {
content: var(--column-menu--content, "menu");
}
}
.column_selector_draggable {
display: flex;
align-items: start;
cursor: move;
border-style: solid;
border-width: 1px;
border-color: var(--inactive--color, #c5c9d0);
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
font-size: 12px;
flex-grow: 1;
color: inherit;
box-sizing: border-box;
flex-direction: column;
justify-content: space-evenly;
position: relative;
min-height: 20px;
// Height needs to be a multiple of non-`.show-aggregate` height
// so adding/removing does not drift the column position
// y-offset.
&.show-aggregate {
min-height: 40px;
}
.column_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
flex: 1 1 250px;
&:only-child {
padding-right: 6px;
}
}
.column_name:before {
font-family: var(
--interface-monospace--font-family,
monospace
);
width: var(--column_type--width, auto);
min-width: 18px;
font-size: 12px;
font-weight: 200;
padding: 0 5px 0 0;
}
.integer:before,
.float:before {
content: var(
--float--column-type--content,
var(--column-type--content, "123")
);
color: var(
--float--column-type--color,
var(--column-type--color, #016bc6)
);
}
.string:before {
content: var(
--string--column-type--content,
var(--column-type--content, "abc")
);
color: var(
--string--column-type--color,
var(--column-type--color, #fe9292)
);
}
.boolean:before {
content: var(
--boolean--column-type--content,
var(--column-type--content, "t/f")
);
color: var(
--boolean--column-type--color,
var(--column-type--color, #999999)
);
}
.date:before,
.datetime:before {
content: var(
--date--column-type--content,
var(--column-type--content, "mdy")
);
color: var(
--date--column-type--color,
var(--column-type--color, #999999)
);
}
}
}
.is_column_active {
font-family: var(
--column-selector--font-family,
var(--button--font-family, inherit)
) ;
font-display: block;
width: var(--column-selector--width, 24px);
min-width: var(--column-selector--width, 24px);
height: var(--is_visible--height, auto);
cursor: pointer;
font-size: var(--column-selector--font-size, 14px);
}
#active-columns.collapse {
.column-selector-column:nth-last-child(3) {
.column_selector_draggable {
border-color: transparent;
}
}
}
#active-columns:not(.collapse).dragdrop-highlight {
.column-selector-column:not(:last-child):not(:nth-last-child(2))
.column_selector_draggable {
border-bottom-color: var(--active--color) ;
}
}
#active-columns,
#sub-columns {
flex: 0 1 auto;
overflow-x: hidden ;
overflow-y: scroll;
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
&::-webkit-scrollbar,
&::-webkit-scrollbar-corner {
background-color: transparent;
width: 6px;
}
}
#active-columns.collapse {
max-height: min(calc(100% - 95px), 60%);
}
#sub-columns {
flex: 0 10000000 auto;
}
#active-columns {
display: flex;
.is_column_active {
color: var(--active--color, #999);
&:before {
content: var(--active-column-selector--content, "\2611");
}
&.required {
color: var(--inactive--color, #ccc);
cursor: initial;
}
&.inactive:before {
content: "";
}
}
.column-selector-column {
position: relative;
.column_selector_draggable {
width: calc(100% - 24px);
}
&:before {
font-size: 10px;
margin-left: 22px;
left: 1px;
padding: var(--column_type--padding, 0px 0px 0px 0px);
color: var(--inactive--color, #666);
position: absolute;
margin-top: -15px;
content: attr(data-label);
}
&[data-label] {
margin-top: 22px;
}
}
}
// "Empty" slotted columns in the active column list.
.dragover,
.empty-named {
pointer-events: none;
& > * {
opacity: 0;
}
}
.empty-named {
border: 1px dashed var(--inactive--color, #ddd) ;
}
.dragover {
border: 1px dashed var(--active--color, #666) ;
}
.dragover {
border-style: solid ;
}
.dragover {
box-shadow: inset 0 0 15px rgb(0 0 0 / 5%);
}
.dragdrop-highlight .empty-named {
border-color: var(--active--color) ;
border-bottom-color: var(--active--color) ;
}
// Inactive Columns are the columns in the column selector not currently
// selected for the `columns` field of the `ViewConfig`.
#inactive-columns,
#expression-columns {
& > div:not(:empty) {
margin-bottom: 6px;
}
&:empty {
display: none;
margin: 0px;
}
.is_column_active {
color: var(--inactive--color, #999);
&:before {
content: var(--inactive-column-selector--content, "\2610");
}
}
.column-selector-column {
opacity: 0.3;
transition: opacity 0.3s;
&:hover {
opacity: 1;
transition: none;
}
.column_selector_draggable {
border-bottom-color: transparent;
align-items: center;
width: calc(100% - 24px);
}
}
}
}
}