@holoviz/panel 0.14.4 → 1.0.0-a.2

package/dist/bundled/goldentemplate/golden.css

@@ -35,18 +35,10 @@ body, .main-area, .main-content, .lm_goldenlayout {
 }
 
 #sidebar {
-  background-color:rgb(34, 34, 34);
+  background-color: rgb(34, 34, 34);
   color: white;
 }
 
-#header .bk.bk-btn-default {
-  color: black;
-}
-
-#header .bk.bk-menu {
-  color: black;
-}
-
 .sidebar-contents {
   padding-left: 10px;
   padding-right: 10px;
@@ -97,19 +89,6 @@ p.bk.golden-card-button {
   display: none;
 }
 
-.bk.card {
-  background-color: white;
-}
-
-.bk.card-title {
-  font-size: 1.5em;
-  font-weight: bold;
-}
-
-.bk.card-button {
-  display: none;
-}
-
 .bk-canvas {
   padding-right: 2px !important;
 }
@@ -133,6 +112,7 @@ p.bk.golden-card-button {
   display: none;
   top: 0;
   left: 0;
+  z-index: 1;
 }
 
 .pn-modal-content {

package/dist/bundled/material/css/material.css

@@ -0,0 +1,443 @@
+/* Variables */
+:host {
+    --handle-width: 20px;
+    --handle-height: 20px;
+    --switch-size: 20px;
+    --slider-size: 4px;
+    --padding-vertical: 10px;
+    --mdc-on-surface: inherit;
+}
+
+:host-context(.mdc-top-app-bar) .bk-menu {
+    color: black;
+}
+
+/* Card layout */
+
+:host(.mdc-card), :host(.accordion) {
+    color: var(--mdc-theme-on-surface);
+    background-color: var(--mdc-theme-background);
+    box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
+}
+
+:host(.accordion) button, :host(.mdc-card) button {
+    color: var(--mdc-theme-on-background);
+}
+
+.card-header, .accordion-header {
+    background-color: var(--mdc-theme-surface);
+    border: unset;
+    border-radius: 0;
+    border-bottom: 0.2px solid var(--mdc-theme-surface);
+    padding: 0px 6px;
+}
+
+.card-header > .card-header-row {
+    margin-left: 15px;
+}
+
+button.mdc-button.mdc-card-button {
+    color: transparent;
+    height: 50px;
+}
+
+:host(.mdc-card) .card-header {
+    display: flex;
+}
+
+:host(.card-title) h1, :host(.card-title) h2, :host(.card-title) h3,
+:host(.card-title) h4, :host(.card-title) h5, :host(.card-title) h6 {
+    margin-block-end: 0.2em;
+    margin-block-start: 0.2em;
+}
+
+/* Tabs styling */
+
+.bk-header {
+  --pn-tab-padding-x: 1rem;
+  --pn-tab-padding-y: 0.5rem;
+  --pn-tabs-border-width: 1px;
+  --pn-tabs-border-width: 1px;
+  --pn-tab-color: var(--mdc-theme-secondary);
+  --pn-tabs-border-radius: var(--border-radius);
+  --pn-tab-active-color: var(--mdc-theme-primary);
+}
+
+:host(.bk-above) .bk-header {
+    border-bottom: var(--pn-tabs-border-width) solid var(--pn-tab-color);
+}
+
+:host(.bk-left) .bk-header {
+    border-right: var(--pn-tabs-border-width) solid var(--pn-tab-color);
+}
+
+:host(.bk-right) .bk-header {
+    border-left: var(--pn-tabs-border-width) solid var(--pn-tab-color);
+}
+
+:host(.bk-below) .bk-header {
+    border-top: var(--pn-tabs-border-width) solid var(--pn-tab-color);
+}
+
+:host(.bk-above) .bk-header .bk-tab,
+:host(.bk-left) .bk-header .bk-tab,
+:host(.bk-right) .bk-header .bk-tab,
+:host(.bk-below) .bk-header .bk-tab {
+    background: transparent;
+    border: none;
+    padding: var(--pn-tab-padding-y) var(--pn-tab-padding-x);
+    border-style: solid;
+    border-width: 0;
+}
+
+:host(.bk-above) .bk-header .bk-tab {
+    margin-bottom: calc(-1 * var(--pn-tabs-border-width));
+    border-bottom-width: 2px;
+}
+
+:host(.bk-left) .bk-header .bk-tab {
+    margin-right: calc(-1 * var(--pn-tabs-border-width));
+    border-right-width: 2px;
+}
+
+:host(.bk-right) .bk-header .bk-tab {
+    margin-left: calc(-1 * var(--pn-tabs-border-width));
+    border-left-width: 2px;
+}
+
+:host(.bk-below) .bk-header .bk-tab {
+    margin-top: calc(-1 * var(--pn-tabs-border-width));
+    border-top-width: 2px;
+}
+
+:host(.bk-above) .bk-header .bk-tab:hover, .bk-header .bk-tab:focus,
+:host(.bk-left) .bk-header .bk-tab:hover, .bk-header .bk-tab:focus,
+:host(.bk-right) .bk-header .bk-tab:hover, .bk-header .bk-tab:focus,
+:host(.bk-below) .bk-header .bk-tab:hover, .bk-header .bk-tab:focus {
+    isolation: isolate;
+    border-color: var(--pn-tab-hover-border-color);
+}
+
+:host(.bk-above) .bk-header .bk-tab.bk-active,
+:host(.bk-left) .bk-header .bk-tab.bk-active,
+:host(.bk-right) .bk-header .bk-tab.bk-active,
+:host(.bk-below) .bk-header .bk-tab.bk-active {
+    color: var(--pn-tab-active-color);
+    border-color: var(--pn-tab-active-color);
+}
+
+/* Slider styling */
+
+.noUi-target {
+    background-color: var(--mdc-theme-secondary);
+    border: unset;
+    box-shadow: unset;
+}
+
+.noUi-connects {
+    background-color: var(--mdc-theme-secondary);
+    border: unset;
+    border-radius: 10px;
+    box-shadow: unset;
+}
+
+.noUi-connect {
+    background-color: var(--mdc-theme-primary) !important;
+    border: unset;
+    box-shadow: unset;
+}
+
+.noUi-handle {
+    background-color: var(--mdc-theme-primary);
+    border: 0px;
+    border-radius: 50%;
+    box-shadow: rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px;
+    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.noUi-handle:hover, .noUi-handle:focus {
+    box-shadow: var(--mdc-theme-primary-lightened) 0px 0px 0px 8px;
+}
+
+[disabled].noUi-target {
+    background-color: var(--mdc-theme-on-surface);
+    box-shadow: unset;
+    opacity: 0.38;
+}
+
+[disabled].noUi-handle, [disabled] .noUi-handle {
+    background-color: var(--mdc-theme-secondary);
+    box-shadow: unset;
+}
+
+[disabled].noUi-target .noUi-connect {
+    opacity: 0.12;
+}
+
+/* Input/TextArea widgets */
+
+.bk-input {
+    background-color: unset;
+    border: 1px solid var(--panel-secondary-color);
+    color: var(--mdc-theme-on-surface);
+}
+
+.bk-input:not([type="file"]) {
+    border-radius: 4px;
+    height: 1.4375em;
+    line-height: 1.4375em;
+    padding: 4px 10px;
+}
+
+textarea.bk-input {
+    padding: 12px 10px;
+}
+
+.bk-input[disabled] {
+    background-color: unset;
+    border: unset;
+    border: 1px dotted var(--panel-secondary-color);
+    color: var(--panel-secondary-color);
+}
+
+.bk-input:not([disabled]):hover {
+    border: 1px solid var(--mdc-theme-on-background);
+}
+
+.bk-input:focus {
+    border: 1px solid var(--mdc-theme-primary);
+    box-shadow: unset;
+}
+
+.bk-input-group > label:has(+ select),
+.bk-input-group > label:has(+ .bk-input-container),
+.bk-input-group > label:has(+ .bk-spin-wrapper),
+.bk-input-group > label:has(+ textarea) {
+    background-color: var(--mdc-theme-background);
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform: translate(10px, -5px) scale(0.75);
+    line-height: 1.4375em;
+    font-size: 1rem;
+    transform-origin: top left;
+    z-index: 1;
+    padding: 0 10px;
+    margin: -2px 0;
+}
+
+/* Number input */
+
+.bk-input-group > .bk-spin-wrapper > .bk-spin-btn {
+    color: var(--mdc-theme-on-background);
+}
+
+/* Select widgets */
+
+select:not([multiple]).bk-input, select:not([size]).bk-input {
+    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" viewBox="0 0 25 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 25,0 12.5,20 Z" fill="black" /></svg>');
+    min-height: 1.4375em;
+    padding: 12px 10px;
+}
+
+select[multiple].bk-input {
+    padding: 10px 10px;
+}
+
+select.bk-input:focus {
+    box-shadow: unset;
+}
+
+/* MultiChoice */
+
+.choices__inner {
+    border: 1px solid var(--mdc-theme-secondary);
+    padding-top: 20px;
+}
+
+.choices.is-disabled .choices__inner {
+    color: var(--mdc-theme-secondary);
+    background-color: unset;
+    border: unset;
+    border: 1px dotted var(--mdc-theme-secondary-lightened);
+}
+
+.choices.is-disabled .choices__input {
+    background-color: unset;
+}
+
+.bk-input-group > label:has(+ div.choices) {
+    background-color: var(--mdc-theme-background);
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform: translate(10px, -12px) scale(0.75);
+    line-height: 1.4375em;
+    font-size: 1rem;
+    transform-origin: top left;
+    z-index: 1;
+    padding: 0 10px;
+    margin: 5px 0;
+}
+
+.choices.is-disabled .choices__list--multiple .choices__item {
+    opacity: 0.7;
+}
+
+.choices__inner:hover {
+    border: 1px solid var(--mdc-theme-on-background);
+    transform: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.choices__inner:focus {
+    border: 1px solid var(--mdc-theme-primary);
+    box-shadow: unset;
+}
+
+/* Button widgets */
+
+.bk-btn-group > button {
+    background-position: center;
+    font-weight: 500;
+    font-size: medium;
+    line-height: 1.5;
+    padding: 5px 15px;
+    transition: background 0.8s;
+}
+
+.bk-btn-group > button.bk-btn-default {
+    background-color: var(--mdc-theme-surface);
+    color: var(--mdc-theme-on-surface);
+    border: unset;
+}
+
+.bk-btn-group > button.bk-btn-default:hover {
+    background: var(--mdc-theme-primary) radial-gradient(circle, transparent 1%, var(--mdc-theme-primary) 1%) center/15000%;
+}
+
+.bk-btn-group > button.bk-btn-default:active {
+  background-color: white;
+  background-size: 100%;
+  transition: background 0s;
+}
+
+.bk-menu {
+    color: var(--mdc-theme-primary);
+    border: 1px solid var(--mdc-theme-primary);
+}
+
+.bk-active.bk-btn-default {
+    background-color: var(--mdc-theme-primary);
+    border: 1px solid var(--mdc-theme-primary);
+    color: var(--mdc-theme-on-primary);
+}
+
+/* Checkbox */
+
+input[type="checkbox"] {
+    width: 1.25em;
+    height: 1.25em;
+}
+
+input[type="checkbox"] + span {
+    line-height: 1.5;
+    font-weight: 400;
+    top: -3px;
+}
+
+/* Switch */
+
+.body > .knob {
+    background-color: var(--mdc-theme-primary);
+    border-radius: 50%;
+    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+:host(.active) .bar {
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+}
+
+:host(.active) .knob {
+    background-color: var(--mdc-theme-primary);
+    left: calc(100% - var(--switch-size)/2);
+}
+
+/* TextEditor */
+
+.ql-container.ql-snow {
+  border: 1px solid #ccc;
+}
+
+/* Radio */
+
+input[type="radio"] {
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 50%;
+}
+
+input[type="radio"] + span {
+    top: -0.4em;
+}
+
+.bk-input-group > label {
+    padding: -2px 0;
+}
+
+
+/* Progress Indicator */
+
+progress {
+    border-radius: unset;
+    box-shadow: unset;
+    height: 5px;
+    margin: 0 0 0.5em;
+}
+
+progress[value]::-moz-progress-bar {
+    border-radius: unset;
+    box-shadow: unset;
+}
+
+progress:not([value])::-moz-progress-bar {
+    border-radius: unset;
+    box-shadow: unset;
+}
+
+progress[value]::-webkit-progress-value {
+    border-radius: unset;
+    box-shadow: unset;
+}
+
+progress[value]::-webkit-progress-bar {
+    border-radius: unset;
+    box-shadow: unset;
+}
+
+progress:not([value])::-webkit-progress-bar {
+    border-radius: unset;
+    box-shadow: unset;
+}
+
+progress:not([value])::before {
+    border-radius: unset;
+    box-shadow: unset;
+    height: 5px;
+}
+
+/* Tabulator */
+
+.pnx-tabulator.tabulator {
+    background-color: var(--mdc-theme-surface);
+}
+
+.pnx-tabulator.tabulator .tabulator-headers, .pnx-tabulator.tabulator .tabulator-header .tabulator-col {
+    background-color: var(--mdc-theme-surface);
+}
+
+/* Quill editor */
+
+.ql-editor, .ql-editor.ql-blank::before {
+    color: var(--mdc-theme-on-background);
+}

package/dist/bundled/materialtemplate/dark.css

@@ -1,22 +1,4 @@
-button.bk.mdc-card__primary-action {
-  color: white;
-  background-color: #292929 !important;
-}
-
 :root {
-  --mdc-theme-primary: #2f2f2f !important;
-  --mdc-theme-on-primary: #ffffff !important;
-  --mdc-theme-secondary: #6f6f6f !important;
-  --mdc-theme-on-secondary:  #ffffff !important;
-  --mdc-theme-error: #b00020 !important;
-  --mdc-theme-on-error: #ffffff !important;
-  --mdc-theme-surface: #2f2f2f !important;
-  --mdc-theme-on-surface: #ffffff !important;
-  --mdc-theme-background: #121212 !important;
-  --mdc-theme-on-background: #fffff !important;
-  --mdc-shape-small:  4px;
-  --mdc-shape-medium:  4px;
-  --mdc-shape-large:  0px;
-  --mdc-typography--font-family:  "Roboto";
-  --mdc-theme-text-primary-on-background: #ffffff !important;
+  --mdc-theme-error: #b00020;
+  --mdc-theme-on-error: #ffffff;
 }

package/dist/bundled/materialtemplate/default.css

@@ -1,19 +1,4 @@
-#header {
-  box-shadow: 5px 5px 20px silver;
-}
-
 :root {
-  --mdc-theme-primary: #00aa41 !important;
-  --mdc-theme-on-primary:  #ffffff !important;
-  --mdc-theme-secondary: #424342 !important;
-  --mdc-theme-on-secondary:  #ffffff !important;
-  --mdc-theme-error:  #b00020 !important;
-  --mdc-theme-on-error:  #ffffff !important;
-  --mdc-theme-surface:  #ffffff !important;
-  --mdc-theme-on-surface:  #000000 !important;
-  --mdc-theme-background:  #ffffff !important;
-  --mdc-shape-small:  4px;
-  --mdc-shape-medium:  4px;
-  --mdc-shape-large:  0px;
-  --mdc-typography--font-family:  "Roboto";
+    --mdc-theme-error: #b00020;
+    --mdc-theme-on-error: #ffffff;
 }