@finos/perspective-viewer
Version:
The `<perspective-viewer>` Custom Element, frontend for Perspective.js
1 lines • 20.7 kB
CSS
:host input[type=checkbox]{appearance:none;height:20px;margin:0;cursor:pointer;outline:none}:host input[type=checkbox]:before{font-family:Material Icons;color:var(--inactive--color,#ccc);content:var(--inactive-column-selector--content,none);font-size:var(--column_selector--font-size,14px)}:host input[type=checkbox]:checked:before{color:var(--active--color,#00f);content:var(--active-column-selector--content,none)}:host .dropdown-width-container{position:relative;flex:1 1 auto}:host .dropdown-width-container:after{content:attr(data-value) " ";visibility:hidden;white-space:nowrap;padding-right:17px}:host .dropdown-width-container select{position:absolute;width:100%;cursor:pointer}:host .split-panel{display:flex}:host .split-panel>*{flex:1 1 auto}:host .split-panel>:first-child{flex:0 0 auto}:host .split-panel .split-panel-divider{flex:0 0 6px;transition:background-color .2s ease-out;z-index:1}:host .split-panel .split-panel-divider:hover{background-color:rgba(0,0,0,.05);cursor:col-resize}:host .split-panel .split-panel-child{display:flex}:host .split-panel .split-panel-child>*{flex:1 1 auto}:host #status_bar{overflow:hidden;display:flex;align-items:center}:host #status_bar .section{box-shadow:8px 0 0 -7px var(--pv-divider--color,#ccc);display:flex;align-items:center}:host #status_bar .section:nth-child(2){flex:1}:host #status_bar .section:nth-child(3) span:first-child:not(:last-child){margin-right:5px}:host #status_bar .section:nth-child(3) span:last-child:not(:first-child){margin-left:5px}:host #status_bar span{font-family:Open Sans;font-size:12px;margin:0 10px;user-select:none;height:100%;line-height:36px}:host #status_bar span:before{text-transform:none;margin-right:4px;font-family:Material Icons;vertical-align:bottom}:host #status_bar span:hover{color:inherit}:host #status_bar span.icon{font-family:Material Icons;height:100%;line-height:36px;margin:0}:host #status_bar span#status{opacity:.5;animation:twinkle .5s 1}:host #status_bar span#status:before{color:#ccc;content:"circle"}:host #status_bar span#status.connected,:host #status_bar span#status.error,:host #status_bar span#status.initializing{opacity:1}:host #status_bar span#status.connected:before{color:#339f4d}:host #status_bar span#status.initializing:before{color:#dfc639}:host #status_bar span#status.error:before{color:#fc4034}:host #status_bar span#export:before{content:"download"}:host #status_bar span#lock:before{content:"lock_open"}:host #status_bar span#reset:before{content:"refresh"}:host #status_bar span#copy:before{content:"content_copy"}:host #status_bar span.button{margin:0;padding:0 5px 0 10px;transition:background-color .2s}:host #status_bar span.button span{pointer-events:none;overflow:hidden;display:none;font-weight:300}:host #status_bar span.button:before{font-size:14px}:host #status_bar span.button:hover{min-width:75px;cursor:pointer;background-color:rgba(0,0,0,.05);transition:none}:host #status_bar span.button:hover span{display:contents}#status_bar.updating span#status{animation:pulse 2s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes twinkle{0%{filter:saturate(4)}to{filter:saturate(1)}}:host .plugin_information{color:var(--warning--color,inherit);box-sizing:border-box;display:flex;position:absolute;flex-direction:row;justify-content:flex-start;padding:.5rem;width:100%;z-index:10000}:host .plugin_information.plugin_information--warning{background:#ffca28}:host .plugin_information .plugin_information__text{font-size:12px;margin-right:.25rem;display:flex;flex-wrap:wrap;align-items:center}:host .plugin_information .plugin_information__text:before{content:var(--overflow_hint--before);font-family:var(--overflow_hint--font-family);color:var(--overflow_hint--color);padding:var(--overflow_hint--padding);font-size:16px}:host .plugin_information .plugin_information__action{font-size:12px;text-decoration:underline;cursor:pointer;margin-right:.25rem}:host .plugin_information .plugin_information__actions{margin-left:auto;display:flex;align-items:center;flex-direction:row;justify-content:flex-start}:host .plugin_information .plugin_information--overflow-hint-percent{font-weight:700}:host .plugin_information .plugin_information--overflow-hint{white-space:nowrap}:host .aggregate-selector-wrapper{height:19px;display:flex;padding-left:28px;width:100%}:host .aggregate-selector-wrapper label{font-size:10px;white-space:nowrap;height:21px;display:flex;align-items:center;margin-right:3px}:host .aggregate-selector-wrapper .aggregate-selector{font-size:10px;border-bottom-width:0;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}:host .aggregate-selector-wrapper .dropdown-width-container:after{content:none}:host .column-selector-column-title{display:flex;width:100%;flex-direction:row}:host #expression-columns .column-selector-column-title{width:calc(100% - 24px)}:host #side_panel>:not(:last-child){margin-bottom:6px}:host #side_panel .psp-icon:hover{cursor:pointer}:host #side_panel .psp-icon__add{display:flex;width:20px;min-width:20px;margin-top:-2px;height:0;font-family:var(--column-add--font-family,inherit)}:host #side_panel .psp-icon__add:before{font-feature-settings:"liga";content:var(--column-add--before,"+")}:host #side_panel .psp-title__columnName{display:flex;margin-left:24px;margin-top:3px;font-size:12px;font-weight:300;white-space:nowrap}:host #side_panel #add-expression{padding:6px 0;margin:-6px 0 0}:host #side_panel #add-expression.expr_editor_open{background:rgba(0,0,0,.05)}:host #side_panel .side_panel-action:hover{cursor:pointer}:host #side_panel .column-selector-column{display:flex;flex-direction:row;align-items:stretch;font-size:12px}:host #side_panel .column-selector-column:last-child .column_selector_draggable{border-color:transparent}:host #side_panel .column-selector-column span.expression-delete-button,:host #side_panel .column-selector-column span.expression-edit-button{padding-top:1px;font-family:Material Icons;cursor:pointer;opacity:1;color:#999}:host #side_panel .column-selector-column span.expression-delete-button:hover,:host #side_panel .column-selector-column span.expression-edit-button:hover{opacity:1;color:var(--active--color,#000)}:host #side_panel .column-selector-column span.expression-delete-button{padding-right:1.5px;padding-left:5px}:host #side_panel .column-selector-column span.expression-edit-button{padding-left:1.5px;padding-right:3px}:host #side_panel .column-selector-column .column_selector_draggable{display:flex;align-items:start;cursor:move;border:1px solid transparent;border-bottom:1px solid var(--inactive--color,#c5c9d0);font-size:12px;flex-grow:1;color:inherit;transition:height .2s;box-sizing:border-box;flex-direction:column;justify-content:space-evenly;position:relative;min-height:20px}:host #side_panel .column-selector-column .column_selector_draggable.show-aggregate{min-height:40px}:host #side_panel .column-selector-column .column_selector_draggable .column_name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;flex:1 1 250px}:host #side_panel .column-selector-column .column_selector_draggable .column_name:only-child{padding-right:6px}:host #side_panel .column-selector-column .column_selector_draggable .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}:host #side_panel .column-selector-column .column_selector_draggable .float:before,:host #side_panel .column-selector-column .column_selector_draggable .integer:before{content:var(--float--column-type--content,var(--column-type--content,"123"));color:var(--float--column-type--color,var(--column-type--color,#016bc6))}:host #side_panel .column-selector-column .column_selector_draggable .string:before{content:var(--string--column-type--content,var(--column-type--content,"abc"));color:var(--string--column-type--color,var(--column-type--color,#fe9292))}:host #side_panel .column-selector-column .column_selector_draggable .boolean:before{content:var(--boolean--column-type--content,var(--column-type--content,"t/f"));color:var(--boolean--column-type--color,var(--column-type--color,#999))}:host #side_panel .column-selector-column .column_selector_draggable .date:before,:host #side_panel .column-selector-column .column_selector_draggable .datetime:before{content:var(--date--column-type--content,var(--column-type--content,"mdy"));color:var(--date--column-type--color,var(--column-type--color,#999))}:host #side_panel .is_column_active{font-family:var(--column-selector--font-family,Arial);width:var(--column_selector--width,20px);min-width:var(--column_selector--width,20px);height:var(--is_visible--height,auto);cursor:pointer;font-size:var(--column_selector--font-size,14px)}:host #side_panel #active-columns,:host #side_panel #sub-columns{flex:0 1 auto;overflow-x:hidden;overflow-y:scroll}:host #side_panel #active-columns::-webkit-scrollbar-thumb,:host #side_panel #sub-columns::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1);border-radius:4px}:host #side_panel #active-columns::-webkit-scrollbar,:host #side_panel #active-columns::-webkit-scrollbar-corner,:host #side_panel #sub-columns::-webkit-scrollbar,:host #side_panel #sub-columns::-webkit-scrollbar-corner{background-color:transparent;width:6px}:host #side_panel #active-columns.collapse{max-height:60%}:host #side_panel #sub-columns{flex:0 10000000 auto}:host #side_panel #active-columns .is_column_active{color:var(--active--color,#999)}:host #side_panel #active-columns .is_column_active:before{content:var(--active-column-selector--content,none)}:host #side_panel #active-columns .is_column_active.required{color:var(--inactive--color,#ccc);cursor:auto}:host #side_panel #active-columns .is_column_active.inactive:before{content:""}:host #side_panel #active-columns .column-selector-column{position:relative}:host #side_panel #active-columns .column-selector-column .column_selector_draggable{width:calc(100% - 24px)}:host #side_panel #active-columns .column-selector-column:before{font-size:10px;margin-left:22px;left:1px;padding:var(--column_type--padding,0 0 0 5px);color:var(--inactive--color,#666);position:absolute;margin-top:-15px;content:attr(data-label)}:host #side_panel #active-columns .column-selector-column[data-label]{margin-top:22px}:host #side_panel .dragover,:host #side_panel .empty-named{pointer-events:none;border:1px dashed var(--inactive--color,#ddd)}:host #side_panel .dragover>*,:host #side_panel .empty-named>*{opacity:0}:host #side_panel .dragover{border-style:solid;box-shadow:inset 0 0 15px rgba(0,0,0,.05)}:host #side_panel #expression-columns,:host #side_panel #inactive-columns{margin-bottom:6px}:host #side_panel #expression-columns:empty,:host #side_panel #inactive-columns:empty{display:none;margin:0}:host #side_panel #expression-columns .is_column_active,:host #side_panel #inactive-columns .is_column_active{color:var(--inactive--color,#999)}:host #side_panel #expression-columns .is_column_active:before,:host #side_panel #inactive-columns .is_column_active:before{content:var(--inactive-column-selector--content,none)}:host #side_panel #expression-columns .column-selector-column,:host #side_panel #inactive-columns .column-selector-column{opacity:.3;transition:opacity .3s}:host #side_panel #expression-columns .column-selector-column:hover,:host #side_panel #inactive-columns .column-selector-column:hover{opacity:1;transition:none}:host #side_panel #expression-columns .column-selector-column .column_selector_draggable,:host #side_panel #inactive-columns .column-selector-column .column_selector_draggable{border-bottom-color:transparent;align-items:center;width:calc(100% - 24px)}:host #top_panel{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:var(--top_panel--padding,5px 0 10px 0);max-width:1000px;z-index:1}:host #top_panel .row_close{display:inline;font-family:Material Icons;cursor:pointer;min-width:12px;flex-grow:0;font-size:12px;margin-top:2px;margin-left:3px;margin-right:0}:host #top_panel .row_close:before{content:"close"}:host #top_panel .pivot-column{display:inline-flex;align-items:center;min-height:24px}:host #top_panel .pivot-column:not(.config-drop){padding:0 9px 0 0}:host #top_panel .pivot-column span{white-space:nowrap}:host #top_panel .pivot-column span:first-child{text-overflow:ellipsis;max-width:250px;overflow:hidden}:host #top_panel .pivot-column.config-drop{display:inline;width:0;height:14px;min-height:14px;margin-top:5px;overflow:visible;border-left:2px solid var(--inactive--color,rgba(0,0,0,.5));margin-right:2px;margin-left:-4px}:host #top_panel .pivot-column.config-drop:first-child{margin-right:-2px;margin-left:0}:host #top_panel .pivot-column.config-drop>*{color:transparent}:host #top_panel label.pivot-selector-label{pointer-events:none}:host #top_panel #row_pivots label.pivot-selector-label:before{content:var(--row_pivots--before,"Row Pivots")}:host #top_panel #column_pivots label.pivot-selector-label:before{content:var(--column_pivots--before,"Column Pivots")}:host #top_panel #sort label.pivot-selector-label:before{content:"Order By"}:host #top_panel #filter label.pivot-selector-label:before{content:"Where"}:host #top_panel .highlight-drop{background-color:rgba(0,0,0,.5)}:host #top_panel .rrow{display:flex;min-height:24px;align-items:center;max-width:400px;list-style:none;min-width:140px;padding:12px 12px 12px 0}:host #top_panel .rrow span[draggable]{cursor:move}:host #top_panel .rrow>div{display:flex;min-height:24px;flex-direction:column;justify-content:flex-end}:host #top_panel .rrow>*{width:100%;padding:12px 0 0;margin:-12px 0}:host #top_panel .psp-text-field ul{min-height:20px}:host #top_panel .psp-text-field{position:relative;background-color:var(--column-drop-container--background,#fff);border:solid var(--inactive--color,#ccc);border-width:0 0 1px;display:flex;flex-direction:column;justify-content:flex-end;min-height:24px;transition:border-color .3s ease-out,background-size .3s ease-out;background-size:100% 200%}:host #top_panel .psp-text-field>.psp-text-field__input{flex-wrap:wrap;border:0;line-height:20px;vertical-align:bottom;display:none;padding:0 48px 0 0;font-size:12px;min-height:24px;margin:0 0 -1px}:host #top_panel .psp-text-field>.psp-text-field__input>:not(.config-drop):after{width:0;content:","}:host #top_panel .psp-text-field>.psp-text-field__input>:last-child:after{display:none;content:""}:host #top_panel .psp-text-field__input+label{width:0;height:20px;line-height:17px;box-sizing:border-box;font-weight:300;color:var(--inactive--color,#b4b7be);white-space:nowrap;padding:var(--column-drop-container--padding,0 0 2px 10px);font-size:12px;display:inline-block}:host #top_panel .psp-text-field__input:not(:empty){display:flex}:host #top_panel .psp-text-field__input:not(:empty)+label{position:absolute;top:0;margin:var(--column-drop-label--margin,0);font-size:var(--column-drop-label--font-size,12px);display:var(--column-drop-label--display,none)}:host #top_panel #transpose_button{cursor:pointer;min-width:5px;max-width:5px;flex-grow:0;color:var(--inactive--color,inherit);font-family:Arial;font-size:12px;user-select:none;padding:12px 24px 0 0}:host #top_panel #transpose_button:hover{color:var(--active--color,inherit)}:host .sort-icon{margin-left:4px;cursor:pointer;font-family:Material Icons}:host .sort-icon.desc:before{content:var(--sort-order-desc--before,"\2193")}:host .sort-icon.asc:before{content:var(--sort-order-asc--before,"\2191")}:host .sort-icon.none:before{content:var(--sort-order-none--before,"-")}:host .sort-icon.asc.abs:before{content:var(--sort-order-asc-abs--before,"\21E7")}:host .sort-icon.desc.abs:before{content:var(--sort-order-desc-abs--before,"\21E9")}:host .sort-icon.col.asc:before{content:var(--sort-order-col-asc--before,"\2192")}:host .sort-icon.col.desc:before{content:var(--sort-order-col-desc--before,"\2190")}:host .sort-icon.col.asc.abs:before{content:var(--sort-order-col-asc-abs--before,"\21E8")}:host .sort-icon.col.desc.abs:before{content:var(--sort-order-col-desc-abs--before,"\21E6")}:host ::-webkit-calendar-picker-indicator{filter:var(--calendar--filter,none)}:host #top_panel .rrow .input-sizer{display:inline-grid;align-items:center;position:relative;margin-top:1px;font-family:Open Sans;font-size:12px;min-width:45px}:host #top_panel .rrow .input-sizer:after,:host #top_panel .rrow .input-sizer input,:host #top_panel .rrow .input-sizer textarea{width:auto;grid-area:1/1}:host #top_panel .rrow .input-sizer input,:host #top_panel .rrow .input-sizer textarea{grid-area:1/1;padding:0;border:none;border-bottom:1px solid var(--inactive--color,#ccc);background:transparent;font-family:Open Sans;font-size:12px;color:inherit}:host #top_panel .rrow .input-sizer:after{content:attr(data-value) " ";color:var(--inactive--color,inherit);visibility:hidden;white-space:nowrap;padding-right:12px;font-family:Open Sans}:host #top_panel .rrow .input-sizer.num-filter input,:host #top_panel .rrow .input-sizer.num-filter textarea{width:100%;position:absolute}:host #top_panel .rrow .input-sizer.num-filter:after{padding-right:25px}:host #top_panel .rrow .input-sizer input.date-filter{width:120px}:host #top_panel .rrow .input-sizer input.datetime-filter{width:230px}:host #top_panel .rrow .input-sizer input.time-filter{grid-area:1/2}:host #top_panel .rrow .input-sizer:focus-within input:focus,:host #top_panel .rrow .input-sizer:focus-within textarea:focus{outline:none}:host #top_panel #filter{min-width:300px}:host #top_panel #filter .pivot-column .dropdown-width-container{height:100%}:host #top_panel #filter .pivot-column .dropdown-width-container select{padding-right:12px;padding-left:4px;max-width:100%;position:absolute;height:100%}:host{position:relative;display:flex;flex-direction:column;align-items:stretch}:host *{box-sizing:border-box;line-height:1.25}:host #app_panel{position:absolute;bottom:36px;left:0;right:0;top:0}:host #status_bar{position:absolute;bottom:0;left:0;right:0;height:36px}:host #main_column{display:flex;flex-direction:column}:host #main_panel_container{flex:1 1 auto;position:relative;box-shadow:var(--plugin--box-shadow,none);background:var(--plugin--background,none);overflow:hidden;border:var(--plugin--border,none)}:host #main_panel_container.settings-closed{position:absolute;top:0;bottom:0;left:0;right:0}:host #side_panel{position:relative;flex:0 0 auto;padding:var(--side_panel--padding,10px 2px 0 11px);box-sizing:border-box;width:100%}:host #side_panel .modal-target{border:1px dashed var(--inactive--color,#ccc);background-color:var(--modal-target--background,hsla(0,0%,100%,.5))}:host #side_panel #add-expression.modal-target{margin:-7px 0 0 -1px}:host #side_panel #plugin_selector_container{margin-right:6px;min-height:29px;margin-left:var(--column_selector--width,20px);overflow:hidden;display:flex}:host #side_panel #plugin_selector{flex-grow:1}:host .noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .column{display:flex;list-style:none;flex-direction:column;flex:1}:host select{border-radius:0;border-width:0;outline:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;color:inherit;height:21px;padding:0 12px 0 0;font-size:12px;font-weight:300;font-family:inherit;background-color:var(--select--background-color,#fff);background:var(--select--background,url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCA0LjkgMTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZT4uc3Qwe2ZpbGw6I2FhYX08L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xLjQgNC43bDEuMS0xLjUgMSAxLjV6TTMuNSA1LjNsLTEgMS41LTEuMS0xLjV6Ii8+PC9zdmc+) no-repeat right 2px center)}:host select option{background:var(--select--background-color,#fff)}:host #plugin_selector{margin-top:3px;border:solid var(--inactive--color,#c5c9d0);border-width:0 0 1px}:host #settings_button{position:absolute;top:0;left:0;padding:var(--settings-button--padding,15px 8px);overflow:hidden;display:flex;align-items:center;justify-content:center;z-index:10000;background:none;color:var(--inactive--color,#999);font-family:var(--button--font-family,Arial);font-size:var(--button--font-size,16px);font-weight:400;transition:opacity .3s}:host #settings_button:hover{color:var(--active--color,inherit);cursor:pointer}:host #settings_button:before{font-feature-settings:"liga";content:var(--settings-button--content,"\1f527")}:host .split-panel .split-panel-child:first-child:not(.is-width-override){max-width:250px}