@holoviz/panel 0.14.4 → 1.0.0-a.2

package/dist/css/card.css

@@ -1,40 +1,56 @@
-.bk.card {
-  border: 1px solid rgba(0,0,0,.125);
-  border-radius: 0.25rem;
-}
-.bk.accordion {
-  border: 1px solid rgba(0,0,0,.125);
-}
-.bk.card-header {
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-radius: 0.25rem;
-  display: inline-flex;
-  justify-content: start;
-  width: 100%;
-}
-.bk.accordion-header {
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-radius: 0;
-  display: flex;
-  justify-content: start;
-  width: 100%;
-}
-.bk.card-button {
-  background-color: transparent;
-  margin-left: 0.5em;
-}
-.bk.card-header-row {
-  position: relative !important;
-}
-.bk.card-title {
-  align-items: center;
-  font-size: 1.4em;
-  font-weight: bold;
-  overflow-wrap: break-word;
-}
-.bk.card-header-row > .bk {
-  overflow-wrap: break-word;
-  text-align: center;
+:host(.card) {
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 0.25rem;
+}
+
+:host(.accordion) {
+    border: 1px solid rgba(0,0,0,.125);
+}
+
+.card-header {
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.03);
+    border: 1px solid;
+    border-radius: 0.25rem;
+    display: inline-flex;
+    justify-content: start;
+    position: sticky;
+    left: 0;
+    width: 100%;
+}
+
+.accordion-header {
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.03);
+    border: 1px solid;
+    border-radius: 0;
+    display: flex;
+    justify-content: start;
+    position: sticky;
+    left: 0;
+    width: 100%;
+}
+
+.card-button {
+    background-color: transparent;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+
+.card-header-row {
+    margin-bottom: auto;
+    margin-top: auto;
+    position: relative !important;
+}
+
+.card-title {
+    align-items: center;
+    font-size: 1.4em;
+    font-weight: bold;
+    overflow-wrap: break-word;
+}
+
+.card-header-row > .bk {
+    overflow-wrap: break-word;
+    text-align: center;
 }

package/dist/css/dataframe.css

@@ -6,7 +6,7 @@ table.panel-df {
     border-spacing: 0;
     color: black;
     font-size: 12px;
-    table-layout: fixed;
+    table-layout: auto;
     width: 100%;
 }
 
@@ -36,6 +36,11 @@ table.panel-df {
 }
 
 .panel-df tr:hover {
-    background: lightblue !important;
+    background: #e1f5fe !important;
     cursor: pointer;
 }
+
+:host {
+    overflow: auto;
+    padding-right: 1px;
+}

package/dist/css/debugger.css

@@ -1,10 +1,11 @@
-.bk.debugger-card {
+.debugger-card {
   border: 1px solid rgba(0,0,0,1);
   color: rgba(255,255,255,1);
   background-color: rgba(0,0,0,1);
   border-radius: 0rem;
 }
-.bk.debugger-card-header {
+
+.debugger-card-header {
   align-items: center;
   text-align: left;
   background-color: rgba(0, 0, 0, 1)!important;
@@ -14,12 +15,14 @@
   justify-content: start;
   width: 100%;
 }
-.bk.debugger-card-button {
+
+.debugger-card-button {
   background-color: transparent;
   color: rgba(255, 255, 255, 1);
   margin-left: 0.5em;
 }
-.bk.debugger-card-title {
+
+.debugger-card-title {
   align-items: center;
   text-align: left;
   color: rgba(255, 255, 255, 1);
@@ -28,7 +31,7 @@
 }
 
 /* Special debugger buttons for clearing and saving */
-.bk button.special_btn {
+button.special_btn {
     width: 25px;
     height: 25px;
     background-color: black;
@@ -37,7 +40,7 @@
 }
 
 
-.bk button.special_btn .tooltiptext {
+button.special_btn .tooltiptext {
   visibility: hidden;
   width: 100px;
   background-color: darkgray;
@@ -55,11 +58,14 @@
   display: block;
 }
 
-.bk button.special_btn:hover .tooltiptext {
+button.special_btn:hover .tooltiptext {
   visibility: visible;
 }
 
+button.clear_btn:hover .shown {
+    display: none;
+}
 
-
-.bk button.clear_btn:hover .shown { display: none;}
-.bk button.clear_btn:hover:before { content: "☑"; }
+button.clear_btn:hover:before {
+    content: "☑";
+}

package/dist/css/divider.css

@@ -0,0 +1,10 @@
+:host{
+    width: 100%;
+}
+div.bk-clearfix{
+    width:100%;
+}
+hr{
+    margin:0px;
+    margin-bottom:3px;
+}

package/dist/css/editable_slider.css

@@ -0,0 +1,22 @@
+/* Slider editor */
+:host(.slider-edit) .bk-input-group .bk-input {
+  border: 0;
+  border-radius: 0;
+  min-height: 0;
+  padding-left: 0;
+  padding-right: 0;
+  font-weight: bold;
+  box-shadow: unset;
+}
+
+:host(.slider-edit) .bk-input-group .bk-spin-wrapper {
+  display: contents;
+}
+
+:host(.slider-edit) .bk-input-group .bk-spin-wrapper .bk-spin-btn-up {
+  top: -6px;
+}
+
+:host(.slider-edit) .bk-input-group .bk-spin-wrapper .bk-spin-btn-down {
+  bottom: 3px;
+}

package/dist/css/katex.css

@@ -0,0 +1,3 @@
+span.katex-html {
+    display: none;
+}

package/dist/css/loading.css

@@ -1,7 +1,8 @@
-.bk.pn-loading {
+:host(.pn-loading) {
   overflow: hidden;
 }
-.bk.pn-loading:before {
+
+:host(.pn-loading):before {
   position: absolute;
   height: 100%;
   width: 100%;
@@ -15,10 +16,8 @@
   border-width: 1px;
   cursor: progress;
 }
-.bk.pn-loading.arcs:hover:before {
-  cursor: progress;
-}
-.bk.pn-loading .pn-loading-msg {
+
+:host(.pn-loading) .pn-loading-msg {
   position: absolute;
   top: 72%;
   font-size: 2em;

package/dist/css/loadingspinner.css

@@ -0,0 +1,119 @@
+:host(.loader) {
+    overflow: hidden;
+    display: flex;
+}
+
+:host(.loader) div::after {
+    content: "";
+    display: block;
+    border-radius: 50%;
+    -webkit-mask-image: radial-gradient(transparent 50%, rgba(0, 0, 0, 1) 54%);
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    animation: spin 2s linear infinite;
+}
+
+:host(.loader.dark) div::after {
+  background: #0f0f0f;
+}
+
+:host(.loader.light) div::after {
+  background: #f0f0f0;
+}
+
+:host(.loader.spin) div::after {
+  animation: spin 2s linear infinite;
+}
+
+:host(.loader.spin.primary-light) div::after {
+  background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%),
+    linear-gradient(45deg, #f0f0f0 50%, var(--primary-bg-color) 50%);
+}
+
+:host(.loader.spin.secondary-light) div::after {
+  background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%),
+    linear-gradient(45deg, #f0f0f0 50%, var(--secondary-bg-color) 50%);
+}
+
+:host(.loader.spin.success-light) div::after {
+  background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%),
+    linear-gradient(45deg, #f0f0f0 50%, var(--success-bg-color) 50%);
+}
+
+:host(.loader.spin.danger-light) div::after {
+  background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%),
+    linear-gradient(45deg, #f0f0f0 50%, var(--danger-bg-color) 50%);
+}
+
+:host(.loader.spin.warning-light) div::after {
+  background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%),
+    linear-gradient(45deg, #f0f0f0 50%, var(--warning-bg-color) 50%);
+}
+
+:host(.loader.spin.info-light) div::after {
+  background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%),
+    linear-gradient(45deg, #f0f0f0 50%, var(--info-bg-color) 50%);
+}
+
+:host(.loader.spin.light-light) div::after {
+  background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%),
+    linear-gradient(45deg, #f0f0f0 50%, var(--light-bg-color) 50%);
+}
+
+:host(.loader.dark-light) div::after {
+  background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%),
+    linear-gradient(45deg, #f0f0f0 50%, #343a40 50%);
+}
+
+:host(.loader.spin.primary-dark)  div::after {
+  background: linear-gradient(135deg, #0f0f0f 50%, transparent 50%),
+    linear-gradient(45deg, #0f0f0f 50%, var(--primary-bg-color) 50%);
+}
+
+:host(.loader.spin.secondary-dark) div::after {
+  background: linear-gradient(135deg, #0f0f0f 50%, transparent 50%),
+    linear-gradient(45deg, #0f0f0f 50%, var(--secondary-bg-color) 50%);
+}
+
+:host(.loader.spin.success-dark) div::after {
+  background: linear-gradient(135deg, #0f0f0f 50%, transparent 50%),
+    linear-gradient(45deg, #0f0f0f 50%, var(--success-bg-color) 50%);
+}
+
+:host(.loader.spin.danger-dark) div::after {
+  background: linear-gradient(135deg, #0f0f0f 50%, transparent 50%),
+    linear-gradient(45deg, #0f0f0f 50%, var(--danger-bg-color) 50%);
+}
+
+:host(.loader.spin.warning-dark) div::after {
+  background: linear-gradient(135deg, #0f0f0f 50%, transparent 50%),
+    linear-gradient(45deg, #0f0f0f 50%, var(--warning-bg-color) 50%);
+}
+
+:host(.loader.spin.info-dark) div::after {
+  background: linear-gradient(135deg, #0f0f0f 50%, transparent 50%),
+    linear-gradient(45deg, #0f0f0f 50%, var(--info-bg-color) 50%);
+}
+
+:host(.loader.spin.light-dark) div::after {
+  background: linear-gradient(135deg, #0f0f0f 50%, transparent 50%),
+    linear-gradient(45deg, #0f0f0f 50%, var(--light-bg-color) 50%);
+}
+
+:host(.loader.spin.dark-dark) div::after {
+  background: linear-gradient(135deg, #0f0f0f 50%, transparent 50%),
+    linear-gradient(45deg, #0f0f0f 50%, var(--dark-bg-color) 50%);
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

package/dist/css/markdown.css

@@ -1,3 +1,4 @@
+
 .codehilite .hll { background-color: #ffffcc }
 .codehilite  { background: #f8f8f8; }
 .codehilite .c { color: #408080; font-style: italic } /* Comment */
@@ -80,7 +81,7 @@
 .markdown a { color: -webkit-link }
 .markdown a { color: -moz-hyperlinkText }
 
-.markdown .codehilite {
+:host(.markdown) .codehilite {
     padding: 1rem 1.25rem;
     margin-top: 1rem;
     margin-bottom: 1rem;