@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/{less/column-selector.less → css/column-selector.css}

@@ -1,30 +1,19 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@import "dom/scrollbar.less";
-
-// TODO this could be a class
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     #add-expression-button:before {
-        content: var(--add-expression-button--content, "New Column");
+        content: var(--psp-label--add-expression-button--content, "New Column");
         text-transform: uppercase;
         font-size: 0.8333333em;
     }
@@ -41,7 +30,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         flex: 0 1 auto;
-        padding-left: 23px;
+        padding-left: 6px;
         display: inline-block;
         align-items: center;
         line-height: normal;
@@ -59,8 +48,8 @@
         flex: 0 100000000 67px;
     }
 
-    // Inactive columns need to account for expression buttons, which won't be
-    // the last child if it has a button
+    /* Inactive columns need to account for expression buttons, which won't be */
+    /* the last child if it has a button */
     #sub-columns .column-selector--spacer:last-child {
         width: 93px;
         flex: 0 100000000 93px;
@@ -86,7 +75,7 @@
         border: var(--column-add--border, 1px solid transparent);
         min-height: 24px;
         flex-direction: row;
-        background-color: #8b868045;
+        background-color: var(--psp-placeholder--background);
         border-radius: 2px;
         display: flex;
         align-items: center;
@@ -94,17 +83,24 @@
         cursor: pointer;
         margin-bottom: 4px;
 
-        // Button icon
-        &:before {
-            @include icon;
-            width: 14px;
-            height: 14px;
-            margin-left: 12px;
-            -webkit-mask-image: var(--add-expression-icon--mask-image);
-            mask-image: var(--add-expression-icon--mask-image);
+        /* Button icon */
+        & > .icon {
+            background-repeat: no-repeat;
+            background-color: var(--psp--color);
+            display: inline-flex;
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            margin-left: 9px;
+            -webkit-mask-image: var(--psp-icon--add-expression--mask-image);
+            mask-image: var(--psp-icon--add-expression--mask-image);
+            &:before {
+                line-height: 0;
+                content: var(--psp-icon--add-expression--mask-image);
+                visibility: hidden;
+            }
         }
 
-        // Text label of the button e.g. "New Column"
+        /* Text label of the button e.g. "New Column" */
         & > span {
             align-self: center;
             margin-left: 7.5px;
@@ -115,10 +111,10 @@
 
         &.modal-target,
         &.dragdrop-hover {
-            color: var(--plugin--background);
-            background-color: var(--icon--color);
-            &:before {
-                background-color: var(--plugin--background);
+            color: var(--psp--background-color);
+            background-color: var(--psp--color);
+            & > .icon {
+                background-color: var(--psp--background-color);
             }
         }
     }
@@ -126,15 +122,15 @@
     .dragdrop-highlight {
         .pivot-column-border,
         .column-selector-column-border {
-            border: 1px solid var(--icon--color);
+            border: 1px solid var(--psp--color);
         }
     }
 
     .column-selector-column-border,
     .pivot-column-border {
         &.snap-drag-image {
-            background-color: var(--plugin--background) !important;
-            border: 1px solid var(--icon--color) !important;
+            background-color: var(--psp--background-color) !important;
+            border: 1px solid var(--psp--color) !important;
             position: absolute !important;
             pointer-events: none;
             left: 0;
@@ -170,7 +166,7 @@
         }
 
         .column_name {
-            padding-left: 23px !important;
+            padding-left: 6px !important;
         }
     }
 
@@ -182,7 +178,7 @@
         #top_panel
         .pivot-column.column-empty
         .pivot-column-draggable {
-        border-color: var(--icon--color);
+        border-color: var(--psp--color);
     }
 
     .column-selector-column {
@@ -190,11 +186,11 @@
         flex-direction: row-reverse;
         align-items: center;
 
-        // Expression column toolbar buttons
+        /* Expression column toolbar buttons */
         span.expression-edit-button,
         span.expression-delete-button {
             padding-top: 1px;
-            font-family: var(--button--font-family, inherit);
+            font-family: var(--psp-button--font-family, inherit);
             cursor: pointer;
             padding: 2px 4px 0 4px;
             margin-right: 4px;
@@ -202,16 +198,19 @@
             border-radius: 3px;
             &:hover,
             &.is-editing {
-                background-color: var(--icon--color);
-                &:before {
-                    background-color: var(--plugin--background);
-                    border-radius: 3px;
+                background-color: var(--psp--color);
+                .icon {
+                    background-color: var(--psp--background-color);
                 }
             }
         }
 
+        span.expression-edit-button.disabled {
+            opacity: 0;
+            pointer-events: none;
+        }
+
         span.expression-delete-button {
-            // padding-right: 1.5px;
             padding-left: 5px;
             margin-right: 8px;
             margin-left: auto;
@@ -225,12 +224,19 @@
             margin-left: 0px;
         }
 
-        span.expression-edit-button:before {
-            @include icon;
-            height: 14px;
-            width: 14px;
-            -webkit-mask-image: var(--column-settings-icon--mask-image);
-            mask-image: var(--column-settings-icon--mask-image);
+        span.expression-edit-button .icon {
+            background-repeat: no-repeat;
+            background-color: var(--psp--color);
+            display: inline-block;
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            -webkit-mask-image: var(--psp-icon--column-settings--mask-image);
+            mask-image: var(--psp-icon--column-settings--mask-image);
+
+            &:before {
+                content: var(--psp-icon--column-settings--mask-image);
+                visibility: hidden;
+            }
         }
 
         .column-selector-draggable {
@@ -259,14 +265,27 @@
                 min-height: 24px;
             }
 
-            &:not(.empty-named) .column-selector-column-border:before {
-                margin: 0px 0 0 6px; // TODO
-                flex: 0 0 auto; // TODO
-                @include icon;
-                height: 12px;
-                width: 5px;
-                -webkit-mask-image: var(--column-drag-handle--mask-image);
-                mask-image: var(--column-drag-handle--mask-image);
+            &:not(.empty-named) .column-selector-column-border > .drag-handle {
+                margin: 0px 0 0 6px;
+                flex: 0 0 auto;
+                background-repeat: no-repeat;
+                background-color: var(--psp--color);
+                display: inline-block;
+                -webkit-mask-size: cover;
+                mask-size: cover;
+                -webkit-mask-image: var(
+                    --psp-icon--psp-icon--column-drag-handle--mask-image
+                );
+                mask-image: var(
+                    --psp-icon--psp-icon--column-drag-handle--mask-image
+                );
+
+                &:before {
+                    content: var(
+                        --psp-icon--psp-icon--column-drag-handle--mask-image
+                    );
+                    visibility: hidden;
+                }
             }
         }
     }
@@ -279,25 +298,19 @@
     .is_column_active {
         display: inline-flex;
         overflow: hidden;
-        padding-bottom: 4px;
+        margin-bottom: 4px;
         flex: 0 0 auto;
         cursor: pointer;
-        font-size: var(--column-selector--font-size, 14px);
+        font-size: var(--psp-column-selector--font-size, 14px);
         font-family: var(
             --column-selector--font-family,
-            var(--button--font-family, inherit)
+            var(--psp-button--font-family, inherit)
         ) !important;
 
-        &.select-mode {
-            margin: 0 6.5px;
-            // Width of the icon, which is not always present
-            min-width: 14px;
-        }
-
         &,
+        &.select-mode,
         &.toggle-mode {
-            margin: 0 6.5px;
-            min-width: 14px;
+            margin: 0 6.5px 4px 6.5px;
         }
     }
 
@@ -314,23 +327,29 @@
         overflow-x: hidden !important;
         overflow-y: scroll;
         min-height: 20%;
-        @include scrollbar;
     }
 
-    #sub-columns:before {
+    #sub-columns .scroll-panel-container:before {
         font-size: var(--label--font-size, 0.75em);
         padding: var(--column_type--padding, 0px 0px 0px 0px);
         position: absolute;
-        margin-top: 14px;
-        top: 0;
-        content: var(--all-columns-label--content, "All Columns");
+        height: 28px;
+        top: -28px;
+        display: inline-flex;
+        align-items: flex-end;
+        content: var(--psp-label--all-columns--content, "All Columns");
     }
 
-    #sub-columns .scroll-panel-container:first-child {
+    #sub-columns .scroll-panel-container {
         margin-top: 28px;
         margin-bottom: 4px;
     }
 
+    /* #sub-acolumns .scroll-panel-container #add-expression {
+        padding-top: 28px;
+        margin-top: 0;
+    }   */
+
     #sub-columns .column-selector-column.column-selector-column-hidden {
         overflow: hidden;
         height: 0;
@@ -347,79 +366,64 @@
         padding-bottom: 8px;
     }
 
+    #active-columns,
+    #column_settings_sidebar,
+    #sub-columns {
+        .is_column_active {
+            background-repeat: no-repeat;
+            background-color: var(--psp--color);
+            -webkit-mask-size: cover;
+            mask-size: cover;
+        }
+    }
+
     #active-columns,
     #column_settings_sidebar {
         width: 100%;
-        .is_column_active:before {
-            @include icon;
-        }
 
         .is_column_active.select-mode {
+            -webkit-mask-image: var(--psp-icon--radio-on--mask-image);
+            mask-image: var(--psp-icon--radio-on--mask-image);
+
             &:before {
-                width: 14px;
-                height: 14px;
-                -webkit-mask-image: var(--column-radio-on--mask-image);
-                mask-image: var(--column-radio-on--mask-image);
+                line-height: 0;
+                content: var(--psp-icon--radio-on--mask-image);
+                visibility: hidden;
             }
 
-            &:not(.required):hover:before {
-                -webkit-mask-image: var(--column-radio-hover--mask-image);
-                mask-image: var(--column-radio-hover--mask-image);
+            &:not(.required):hover {
+                -webkit-mask-image: var(--psp-icon--radio-hover--mask-image);
+                mask-image: var(--psp-icon--radio-hover--mask-image);
             }
         }
 
         .is_column_active.toggle-mode {
+            -webkit-mask-image: var(--psp-icon--checkbox-on--mask-image);
+            mask-image: var(--psp-icon--checkbox-on--mask-image);
+
             &:before {
-                width: 14px;
-                height: 14px;
-                -webkit-mask-image: var(--column-checkbox-on--mask-image);
-                mask-image: var(--column-checkbox-on--mask-image);
+                line-height: 0;
+                content: var(--psp-icon--checkbox-on--mask-image);
+                visibility: hidden;
             }
 
-            &:not(.required):hover:before {
-                -webkit-mask-image: var(--column-checkbox-hover--mask-image);
-                mask-image: var(--column-checkbox-hover--mask-image);
+            &:not(.required):hover {
+                -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image);
+                mask-image: var(--psp-icon--checkbox-hover--mask-image);
             }
         }
 
         .is_column_active {
             &.required {
-                // color: var(--inactive--color, #ccc);
                 opacity: 0.3;
-                cursor: not-allowed;
                 cursor: initial;
             }
 
-            &.inactive:before {
-                content: "";
+            &.inactive {
                 background: none;
             }
         }
 
-        // .column-selector-column[data-index="0"]:before {
-        //     content: var(--column-selector-column-0--label, attr(data-label));
-        // }
-
-        // .column-selector-column[data-index="1"]:before {
-        //     content: var(--column-selector-column-1--label, attr(data-label));
-        // }
-
-        // .column-selector-column[data-index="2"]:before {
-        //     content: var(--column-selector-column-2--label, attr(data-label));
-        // }
-
-        // .column-selector-column[data-index="3"]:before {
-        //     content: var(--column-selector-column-3--label, attr(data-label));
-        // }
-
-        // .column-selector-column[data-index="4"]:before {
-        //     content: var(--column-selector-column-4--label, attr(data-label));
-        // }
-
-        // .column-selector-column[data-index="5"]:before {
-        //     content: var(--column-selector-column-5--label, attr(data-label));
-        // }
-
         .column-selector-column {
             position: relative;
 
@@ -428,8 +432,8 @@
             }
 
             .column-selector-column-border {
-                border-color: var(--inactive--color);
-                background-color: var(--plugin--background);
+                border-color: var(--psp-inactive--color);
+                background-color: var(--psp--background-color);
             }
 
             &:before {
@@ -449,7 +453,7 @@
 
     .dragover,
     .column-selector-column .column-selector-draggable.empty-named {
-        background-color: #8b868045;
+        background-color: var(--psp-placeholder--background);
         border-color: transparent;
         border-radius: 2px;
     }
@@ -462,7 +466,7 @@
     }
 
     .column-selector-column .column-selector-draggable.dragover {
-        border: 1px solid var(--icon--color);
+        border: 1px solid var(--psp--color);
         position: relative;
         &:before {
             content: " ";
@@ -473,7 +477,7 @@
             right: 5px;
             bottom: 5px;
             border-radius: 2px;
-            background-color: var(--icon--color);
+            background-color: var(--psp--color);
             opacity: 0.3;
         }
 
@@ -484,7 +488,7 @@
 
     .column-selector-column {
         .column-selector-column-border {
-            background-color: #8b868045;
+            background-color: var(--psp-placeholder--background);
             border: 1px solid transparent;
             align-items: center;
         }
@@ -494,51 +498,49 @@
     #active-columns.dragdrop-highlight .column-selector-column,
     .column-selector-column.dragdrop-hover {
         .column-selector-column-border {
-            border-color: var(--icon--color);
+            border-color: var(--psp--color);
         }
     }
 
-    // Inactive Columns are the columns in the column selector not currently
-    // selected for the `columns` field of the `ViewConfig`.
+    /* Inactive Columns are the columns in the column selector not currently */
+    /* selected for the `columns` field of the `ViewConfig`. */
     #sub-columns {
         padding-bottom: 8px;
-        // & > div:not(:empty) {
-        //     margin-bottom: 6px;
-        // }
 
         &:empty {
             display: none;
             margin: 0px;
         }
 
-        .is_column_active:before {
-            @include icon;
-        }
-
         .is_column_active.select-mode {
+            -webkit-mask-image: var(--psp-icon--radio-off--mask-image);
+            mask-image: var(--psp-icon--radio-off--mask-image);
+
             &:before {
-                width: 14px;
-                height: 14px;
-                -webkit-mask-image: var(--column-radio-off--mask-image);
-                mask-image: var(--column-radio-off--mask-image);
+                line-height: 0;
+                content: var(--psp-icon--radio-off--mask-image);
+                visibility: hidden;
             }
-            &:hover:before {
-                -webkit-mask-image: var(--column-radio-hover--mask-image);
-                mask-image: var(--column-radio-hover--mask-image);
+
+            &:hover {
+                -webkit-mask-image: var(--psp-icon--radio-hover--mask-image);
+                mask-image: var(--psp-icon--radio-hover--mask-image);
             }
         }
 
         .is_column_active.toggle-mode {
+            -webkit-mask-image: var(--psp-icon--checkbox-off--mask-image);
+            mask-image: var(--psp-icon--checkbox-off--mask-image);
+
             &:before {
-                width: 14px;
-                height: 14px;
-                -webkit-mask-image: var(--column-checkbox-off--mask-image);
-                mask-image: var(--column-checkbox-off--mask-image);
+                line-height: 0;
+                content: var(--psp-icon--checkbox-off--mask-image);
+                visibility: hidden;
             }
 
-            &:hover:before {
-                -webkit-mask-image: var(--column-checkbox-hover--mask-image);
-                mask-image: var(--column-checkbox-hover--mask-image);
+            &:hover {
+                -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image);
+                mask-image: var(--psp-icon--checkbox-hover--mask-image);
             }
         }