/******************************************************************************
*
* 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 "fonts.less";
// Register theme for auto-detection
perspective-viewer,
perspective-viewer[theme="Pro Light"] {
--theme-name: "Pro Light";
}
perspective-viewer[theme="Pro Light"] perspective-viewer-datagrid {
--inactive--color: #8b868045;
}
perspective-viewer[theme="Pro Light"] {
@include perspective-viewer-pro;
}
perspective-copy-menu[theme="Pro Light"],
perspective-export-menu[theme="Pro Light"],
perspective-dropdown[theme="Pro Light"],
perspective-date-column-style[theme="Pro Light"],
perspective-datetime-column-style[theme="Pro Light"],
perspective-number-column-style[theme="Pro Light"],
perspective-string-column-style[theme="Pro Light"],
perspective-expression-editor[theme="Pro Light"] {
@include perspective-modal-pro;
}
perspective-viewer,
perspective-copy-menu,
perspective-export-menu,
perspective-dropdown,
perspective-date-column-style,
perspective-datetime-column-style,
perspective-number-column-style,
perspective-string-column-style,
perspective-expression-editor {
@include perspective-viewer-pro--icons;
}
@mixin perspective-viewer-pro {
@include perspective-viewer-pro--dimensions;
@include perspective-viewer-pro--colors;
@include perspective-viewer-pro--fonts;
@include perspective-viewer-pro--intl;
@include perspective-viewer-pro--d3fc;
@include perspective-viewer-pro--datagrid;
@include perspective-viewer-pro--openlayers;
}
@mixin perspective-modal-pro {
font-family: "Roboto Mono";
background-color: white;
border: 1px solid var(--inactive--color);
border-radius: 2px;
--column-style-pos-color--content: "+";
--column-style-neg-color--content: "-";
--save-button-icon--content: "save";
--reset-button-icon--content: "refresh";
@include perspective-viewer-pro--fonts;
@include perspective-viewer-pro--colors;
}
@mixin perspective-viewer-pro--dimensions {
--button--font-size: 16px;
--config-button--padding: 15px 8px 6px 8px;
--column-drop-label--font-size: 8px;
--column-drop-container--padding: 0px;
--column-drop-label--display: inline-block;
--column-selector--width: 20px;
--column-selector--font-size: 16px;
// 3 char width in 'Roboto Mono'
--column_type--width: 25px;
--select--padding: 0px;
--side-panel--padding: 0px 0px 6px 4px;
--top-panel--padding: 0px 0px 12px 0px;
--top-panel-row--display: inline-flex;
--button--min-width: 110px;
}
@mixin perspective-viewer-pro--colors {
color: #161616;
background-color: white;
--icon--color: #161616;
--inactive--color: #ABABAB;
--root--background: #ffffff;
--active--color: #2670a9;
--error--color: #ff471e;
--plugin--background: #ffffff;
--overflow-hint-icon--color: rgba(0, 0, 0, 0.2);
--select--background-color: none;
--column-drop-container--background: none;
--warning--background: #042121;
--warning--color: #FDFFFD;
// TODO deprecate me
--overflow-hint-icon--color: #FDFFFD;
}
@mixin perspective-viewer-pro--fonts {
font-family: "Roboto Mono";
--preload-fonts: "Roboto Mono:400";
--interface-monospace--font-family: "Roboto Mono";
}
@mixin perspective-viewer-pro--icons {
--column-type-integer--mask-image: url("../svg/number-type.svg");
--column-type-float--mask-image: var(--column-type-integer--mask-image);
--column-type-string--mask-image: url("../svg/string-type.svg");
--column-type-date--mask-image: url("../svg/date-type.svg");
--column-type-boolean--mask-image: url("../svg/boolean-type.svg");
--column-type-datetime--mask-image: var(--column-type-date--mask-image);
--column-drag-handle--mask-image: url("../svg/drag-handle.svg");
--column-radio-on--mask-image: url("../svg/radio-on.svg");
--column-radio-hover--mask-image: url("../svg/radio-hover.svg");
--column-radio-off--mask-image: url("../svg/radio-off.svg");
--column-checkbox-on--mask-image: url("../svg/checkbox-on.svg");
--column-checkbox-hover--mask-image: url("../svg/checkbox-hover.svg");
--column-checkbox-off--mask-image: url("../svg/checkbox-off.svg");
--column-settings-icon--mask-image: url("../svg/column-settings-icon.svg");
--sort-asc-icon--mask-image: url("../svg/sort-asc-icon.svg");
--sort-desc-icon--mask-image: url("../svg/sort-desc-icon.svg");
--sort-col-asc-icon--mask-image: url("../svg/sort-col-asc-icon.svg");
--sort-col-desc-icon--mask-image: url("../svg/sort-col-desc-icon.svg");
--sort-abs-asc-icon--mask-image: url("../svg/sort-abs-asc-icon.svg");
--sort-abs-desc-icon--mask-image: url("../svg/sort-abs-desc-icon.svg");
--sort-abs-col-asc-icon--mask-image: url("../svg/sort-abs-col-asc-icon.svg");
--sort-abs-col-desc-icon--mask-image: url("../svg/sort-abs-col-desc-icon.svg");
--sort-none-icon--mask-image: url("../svg/sort-none-icon.svg");
--add-expression-icon--mask-image: url("../svg/expression.svg");
}
@mixin perspective-viewer-pro--intl {
// Query overlay labels
--group_by--content: "Group By";
--split_by--content: "Split By";
// Icons
--inactive-column-selector--content: "\E835";
--active-column-selector--content: "\E834";
--overflow-hint-icon--content: "!";
--reset-button-icon--content: "refresh";
--save-button-icon--content: "save";
--transpose-button--content: "Swap";
--config-button-icon--content: "configure";
// "New Column" icon
--column-add--content: "add";
--column-menu--content: "menu";
// close "New Column" icon
--column-close--content: "close";
}
@mixin perspective-viewer-pro--d3fc {
--d3fc-y1-label--content: "arrow_upward";
--d3fc-y2-label--content: "arrow_downward";
--d3fc-treedata-axis--lines: none;
--d3fc-tooltip--background--color: rgba(155, 155, 155, 0.8);
--d3fc-tooltip--color: #161616;
--d3fc-tooltip--border-color: #fff;
--d3fc-tooltip--box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
--d3fc-gridline--color: #eaedef;
--d3fc-axis-ticks--color: #161616;
--d3fc-axis--lines: #c5c9d0;
--d3fc-legend--background: rgba(255, 255, 255, 0.8);
--d3fc-series: rgba(31, 119, 180, 0.8);
--d3fc-series-1: #0366d6;
--d3fc-series-2: #ff7f0e;
--d3fc-series-3: #2ca02c;
--d3fc-series-4: #d62728;
--d3fc-series-5: #9467bd;
--d3fc-series-6: #8c564b;
--d3fc-series-7: #e377c2;
--d3fc-series-8: #7f7f7f;
--d3fc-series-9: #bcbd22;
--d3fc-series-10: #17becf;
--d3fc-full--gradient: linear-gradient(#4d342f 0%,
#e4521b 22.5%,
#feeb65 42.5%,
#f0f0f0 50%,
#dcedc8 57.5%,
#42b3d5 67.5%,
#1a237e 100%);
--d3fc-positive--gradient: linear-gradient(#f0f0f0 0%,
#dcedc8 10%,
#42b3d5 50%,
#1a237e 100%);
--d3fc-negative--gradient: linear-gradient(#4d342f 0%,
#e4521b 50%,
#feeb65 90%,
#f0f0f0 100%);
}
@mixin perspective-viewer-pro--openlayers {
--map-tile-url: "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
--map-element-background: #fff;
--map-category-1: #0366d6;
--map-category-2: #ff7f0e;
--map-category-3: #2ca02c;
--map-category-4: #d62728;
--map-category-5: #9467bd;
--map-category-6: #8c564b;
--map-category-7: #e377c2;
--map-category-8: #7f7f7f;
--map-category-9: #bcbd22;
--map-category-10: #17becf;
--map-gradient: linear-gradient(#4d342f 0%,
#e4521b 22.5%,
#feeb65 42.5%,
#f0f0f0 50%,
#dcedc8 57.5%,
#42b3d5 67.5%,
#1a237e 100%);
}
@mixin perspective-viewer-pro--datagrid {
--rt-pos-cell--color: #338dcd;
--rt-neg-cell--color: #ff471e;
// `regular-table` icons
--column-style-open-button--content: "style";
--column-style-close-button--content: ">\00a0 style";
--tree-label-collapse--content: "-";
--tree-label-expand--content: "+";
--toolbar-scroll-lock--content: url("../svg/free-scroll-icon.svg");
--toolbar-scroll-lock-active--content: url("../svg/align-scroll-icon.svg");
--toolbar-edit-mode--content: url("../svg/read-only-icon.svg");
--toolbar-edit-mode-active--content: url("../svg/editable-icon.svg");
}