@charset "UTF-8";
/* jspanel.sass: 2017-06-17 11:56 */
@font-face {
font-family: "jsglyph";
src: url("../fonts/jsglyph.eot");
src: url("../fonts/jsglyph.eot?#iefix") format("embedded-opentype"),
/* url("../fonts/jsglyph.ttf") format("truetype"),
url("../fonts/jsglyph.woff") format("woff"), */
url("../fonts/jsglyph.svg#jsglyph") format("svg"); }
.jsglyph {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "jsglyph" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.jsglyph-chevron-down::before {
content: "?"; }
.jsglyph-chevron-up::before {
content: "?"; }
.jsglyph-close::before {
content: "?"; }
.jsglyph-maximize::before {
content: "?"; }
.jsglyph-minimize::before {
content: "?"; }
.jsglyph-normalize::before {
content: "?"; }
.jsPanel {
border: 0;
box-sizing: border-box;
vertical-align: baseline;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
opacity: 0;
overflow: visible;
position: absolute;
border-radius: 3px;
z-index: 100; }
.jsPanel .jsPanel-hdr {
border: 0;
box-sizing: border-box;
vertical-align: baseline;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-size: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden; }
.jsPanel .jsPanel-content {
border: 0;
box-sizing: border-box;
vertical-align: baseline;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
background: #ffffff;
color: #000000;
font-size: 12px;
position: relative;
overflow: hidden;
padding: 5px;
}
.jsPanel .jsPanel-content pre {
color: inherit; }
.jsPanel .jsPanel-ftr {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top: 1px solid #e0e0e0;
cursor: move;
display: none;
box-sizing: border-box;
font-size: 12px;
height: auto;
background: #f5f5f5;
font-weight: normal;
color: black;
overflow: hidden; }
.jsPanel .jsPanel-ftr.active {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.jsPanel .jsPanel-ftr.active > * {
margin: 8px; }
.jsPanel .jsPanel-ftr.panel-footer {
padding: 0; }
.jsPanel-headerbar, .jsPanel-hdr-toolbar {
font-size: 18px; }
.jsPanel-headerbar {
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
min-height: 38px; }
.jsPanel-headerbar img {
vertical-align: middle;
max-height: 38px; }
.jsPanel-titlebar {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
cursor: move;
min-height: 32px;
overflow: hidden; }
.jsPanel-titlebar h3 {
color: #000000;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
font-variant: small-caps;
font-weight: normal;
margin: 10px 5px 10px 8px; }
.jsPanel-titlebar h3 small {
font-size: 75%;
color: inherit; }
.jsPanel-titlebar.jsPanel-rtl h3 {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto; }
.jsPanel-controlbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center; }
.jsPanel-controlbar div span:hover {
opacity: 0.6; }
.jsPanel-controlbar .jsPanel-btn {
padding: 0 3px;
cursor: pointer; }
.jsPanel-controlbar .jsPanel-btn span {
vertical-align: middle; }
.jsPanel-controlbar .jsPanel-btn-normalize {
display: none; }
.jsPanel-controlbar .jsPanel-btn-smallifyrev {
display: none; }
.jsPanel-hdr-toolbar {
display: none;
width: auto;
height: auto;
font-size: 16px; }
.jsPanel-hdr-toolbar.active {
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center; }
.jsPanel-hdr-toolbar.active > * {
margin: 6px 8px; }
/* styles for panels using option.rtl */
.jsPanel-headerbar.jsPanel-rtl, .jsPanel-controlbar.jsPanel-rtl, .jsPanel-hdr-toolbar.jsPanel-rtl {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.jsPanel-hdr-toolbar.active.jsPanel-rtl {
padding: 7px 0 10px 0; }
.jsPanel-ftr.jsPanel-rtl {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
/* css for tooltip connectors */
.jsPanel-connector {
pointer-events: none; }
/* naming of connectors reflects position of tooltip and not pos of connector */
.jsPanel-connector-top {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-top-width: 10px;
left: calc(50% - 12px);
bottom: -22px; }
.jsPanel-connector-topleft {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-top-width: 10px;
left: 2px;
bottom: -22px; }
.jsPanel-connector-topright {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-top-width: 10px;
left: calc(100% - 26px);
bottom: -22px; }
.jsPanel-connector-right {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-right-width: 10px;
left: -22px;
top: calc(50% - 12px); }
.jsPanel-connector-righttop {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-right-width: 10px;
left: -22px;
top: 2px; }
.jsPanel-connector-rightbottom {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-right-width: 10px;
left: -22px;
top: calc(100% - 26px); }
.jsPanel-connector-bottom {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-bottom-width: 10px;
left: calc(50% - 12px);
top: -22px; }
.jsPanel-connector-bottomleft {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-bottom-width: 10px;
left: 2px;
top: -22px; }
.jsPanel-connector-bottomright {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-bottom-width: 10px;
left: calc(100% - 26px);
top: -22px; }
.jsPanel-connector-left {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-left-width: 10px;
left: 100%;
top: calc(50% - 12px); }
.jsPanel-connector-lefttop {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-left-width: 10px;
left: 100%;
top: 2px; }
.jsPanel-connector-leftbottom {
width: 0;
height: 0;
border: 12px solid transparent;
position: absolute;
border-left-width: 10px;
left: 100%;
top: calc(100% - 26px); }
/* naming of connectors reflects position of tooltip and not pos of connector */
.jsPanel-connector-lefttopcorner {
position: absolute;
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
left: calc(100% - 6px);
top: calc(100% - 6px); }
.jsPanel-connector-righttopcorner {
position: absolute;
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
left: -6px;
top: calc(100% - 6px); }
.jsPanel-connector-rightbottomcorner {
position: absolute;
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
left: -6px;
top: -6px; }
.jsPanel-connector-leftbottomcorner {
position: absolute;
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
left: calc(100% - 6px);
top: -6px; }
/* container that takes the minified jsPanels */
#jsPanel-replacement-container, .jsPanel-minimized-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap-reverse;
flex-flow: row wrap-reverse;
background: transparent none repeat scroll 0 0;
bottom: 0;
height: auto;
left: 0;
position: fixed;
width: auto;
z-index: 9998; }
#jsPanel-replacement-container .jsPanel-replacement, .jsPanel-minimized-box .jsPanel-replacement {
width: 200px;
height: 40px;
margin: 1px 1px 0 0;
z-index: 9999; }
#jsPanel-replacement-container .jsPanel-replacement .jsPanel-hdr, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-hdr {
padding: 0; }
#jsPanel-replacement-container .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo {
max-width: 50%;
overflow: hidden; }
#jsPanel-replacement-container .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img {
max-width: 100px;
max-height: 38px; }
#jsPanel-replacement-container .jsPanel-replacement .jsPanel-titlebar, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-titlebar {
-webkit-box-flex: 1;
-ms-flex: 1 1 60%;
flex: 1 1 0;
cursor: default; }
#jsPanel-replacement-container .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize {
display: block; }
.jsPanel-minimized-box {
position: absolute;
width: auto; }
/* css for the modal backdrop ------------------------------- */
.jsPanel-modal .jsPanel-hdr, .jsPanel-modal .jsPanel-ftr {
cursor: default; }
/* css for the hints --------------------------------------- */
.jsPanel-hint .jsPanel-hdr, .jsPanel-hint .jsPanel-ftr {
cursor: default; }
/* css for the tooltips --------------------------------------- */
.jsPanel-tooltip {
overflow: visible; }
.jsPanel-tooltip .jsPanel-hdr, .jsPanel-tooltip .jsPanel-ftr {
cursor: default; }
/* helper classes to make .jsPanel-content a flex box */
.flexOne {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap; }
/* css for resizeit handles ------------------------- */
.jsPanel-resizeit-handle {
display: block;
font-size: 0.1px;
position: absolute; }
.jsPanel-resizeit-handle.jsPanel-resizeit-n {
cursor: n-resize;
height: 10px;
left: 0;
top: -5px;
width: 100%; }
.jsPanel-resizeit-handle.jsPanel-resizeit-e {
cursor: e-resize;
height: 100%;
right: -5px;
top: 0;
width: 10px; }
.jsPanel-resizeit-handle.jsPanel-resizeit-s {
bottom: -5px;
cursor: s-resize;
height: 10px;
left: 0;
width: 100%; }
.jsPanel-resizeit-handle.jsPanel-resizeit-w {
cursor: w-resize;
height: 100%;
left: -5px;
top: 0;
width: 10px; }
.jsPanel-resizeit-handle.jsPanel-resizeit-ne {
cursor: ne-resize;
height: 12px;
right: -6px;
top: -6px;
width: 12px; }
.jsPanel-resizeit-handle.jsPanel-resizeit-se {
bottom: 1px;
cursor: se-resize;
height: 12px;
right: 1px;
width: 12px; }
.jsPanel-resizeit-handle.jsPanel-resizeit-sw {
bottom: -6px;
cursor: sw-resize;
height: 12px;
left: -6px;
width: 12px; }
.jsPanel-resizeit-handle.jsPanel-resizeit-nw {
cursor: nw-resize;
height: 12px;
left: -6px;
top: -6px;
width: 12px; }
/* bootstrap adjustments */
.jsPanel.panel-default, .jsPanel.panel-primary, .jsPanel.panel-info, .jsPanel.panel-success, .jsPanel.panel-warning, .jsPanel.panel-danger, .jsPanel.card.card-inverse {
box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4); }
.jsPanel.panel {
margin: 0; }
.jsPanel-hdr.panel-heading {
border-bottom: none;
padding: 0; }
.jsPanel-title.panel-title .small, .jsPanel-title.panel-title small {
font-size: 75%; }
/* bootstrap 4 adjustments */
.jsPanel.card.card-inverse {
box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4); }
.card-default {
background: #f5f5f5; }
.card-primary > .jsPanel-content.jsPanel-content-filled,
.card-success > .jsPanel-content.jsPanel-content-filled,
.card-info > .jsPanel-content.jsPanel-content-filled,
.card-warning > .jsPanel-content.jsPanel-content-filled,
.card-danger > .jsPanel-content.jsPanel-content-filled {
background: transparent;
color: #f5f5f5; }
.card-default > .jsPanel-content.jsPanel-content-filled {
background: transparent;
color: #000000; }
/* css3 animations */
@keyframes jsPanelFadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
.jsPanelFadeIn {
opacity: 0;
animation: jsPanelFadeIn ease-in 1;
animation-fill-mode: forwards;
animation-duration: 600ms; }
@keyframes modalBackdropFadeIn {
from {
opacity: 0; }
to {
opacity: 0.65; } }
.jsPanel-modal-backdrop {
animation: modalBackdropFadeIn ease-in 1;
animation-fill-mode: forwards;
animation-duration: 750ms;
background: black;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; }
@keyframes modalBackdropFadeOut {
from {
opacity: 0.65; }
to {
opacity: 0; } }
.jsPanel-modal-backdrop-out {
animation: modalBackdropFadeOut ease-in 1;
animation-fill-mode: forwards;
animation-duration: 400ms; }
.jsPanel-modal-backdrop-multi {
background: rgba(0, 0, 0, 0.15); }
/* _themes_mdl.sass: 2017-02-14 08:56 */
/* default ---------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-default {
background-color: #f5f5f5;
border-color: #f5f5f5; }
.jsPanel-theme-default > .jsPanel-hdr * {
color: #000000; }
.jsPanel-theme-default > .jsPanel-hdr .jsPanel-hdr-toolbar {
border-top: 1px solid #e0e0e0; }
.jsPanel-theme-default > .jsPanel-content {
border-top: 1px solid #e0e0e0; }
.jsPanel-theme-default > .jsPanel-content.jsPanel-content-filled {
background-color: #f5f5f5;
border-top: 1px solid #e0e0e0; }
.jsPanel-theme-default > .jsPanel-content.jsPanel-content-filledlight {
background-color: #fafafa; }
/* primary ---------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-primary {
background-color: #3f51b5;
border-color: #3f51b5; }
.jsPanel-theme-primary > .jsPanel-hdr * {
color: #ffffff; }
.jsPanel-theme-primary > .jsPanel-hdr .jsPanel-hdr-toolbar {
border-top: 1px solid #5c6bc0; }
.jsPanel-theme-primary > .jsPanel-content {
border-top: 1px solid #5c6bc0; }
.jsPanel-theme-primary > .jsPanel-content.jsPanel-content-filled {
background-color: #3f51b5;
border-top: 1px solid #5c6bc0;
color: #ffffff; }
.jsPanel-theme-primary > .jsPanel-content.jsPanel-content-filledlight {
background-color: #c5cae9;
color: #000000; }
/* info ------------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-info {
background-color: #03a9f4;
border-color: #03a9f4; }
.jsPanel-theme-info > .jsPanel-hdr * {
color: #ffffff; }
.jsPanel-theme-info > .jsPanel-hdr .jsPanel-hdr-toolbar {
border-top: 1px solid #29b6f6; }
.jsPanel-theme-info > .jsPanel-content {
border-top: 1px solid #29b6f6; }
.jsPanel-theme-info > .jsPanel-content.jsPanel-content-filled {
background-color: #03a9f4;
border-top: 1px solid #29b6f6;
color: #ffffff; }
.jsPanel-theme-info > .jsPanel-content.jsPanel-content-filledlight {
background-color: #b3e5fc;
color: #000000; }
/* success ---------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-success {
background-color: #43a047;
border-color: #43a047; }
.jsPanel-theme-success > .jsPanel-hdr * {
color: #ffffff; }
.jsPanel-theme-success > .jsPanel-hdr .jsPanel-hdr-toolbar {
border-top: 1px solid #66bb6a; }
.jsPanel-theme-success > .jsPanel-content.jsPanel-content-filled {
background-color: #43a047;
border-top: 1px solid #66bb6a;
color: #ffffff; }
.jsPanel-theme-success > .jsPanel-content.jsPanel-content-filledlight {
background-color: #c8e6c9;
color: #000000; }
/* warning ---------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-warning {
background-color: #fb8c00;
border-color: #fb8c00; }
.jsPanel-theme-warning > .jsPanel-hdr * {
color: #000000; }
.jsPanel-theme-warning > .jsPanel-hdr .jsPanel-hdr-toolbar {
border-top: 1px solid #ffb74d; }
.jsPanel-theme-warning > .jsPanel-content.jsPanel-content-filled {
background-color: #fb8c00;
border-top: 1px solid #ffb74d;
color: #000000; }
.jsPanel-theme-warning > .jsPanel-content.jsPanel-content-filledlight {
background-color: #ffe0b2;
color: #000000; }
/* danger ----------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-danger {
background-color: #f4511e;
border-color: #f4511e; }
.jsPanel-theme-danger > .jsPanel-hdr * {
color: #ffffff; }
.jsPanel-theme-danger > .jsPanel-hdr .jsPanel-hdr-toolbar {
border-top: 1px solid #ff7043; }
.jsPanel-theme-danger > .jsPanel-content.jsPanel-content-filled {
background-color: #f4511e;
border-top: 1px solid #ff7043;
color: #ffffff; }
.jsPanel-theme-danger > .jsPanel-content.jsPanel-content-filledlight {
background-color: #ffccbc;
color: #000000; }
/* custom theme example myblue -------------------------------------------------------------------------------------- */
.jsPanel-theme-myblue {
background-color: #1565c0;
border-color: #1565c0; }
.jsPanel-theme-myblue > .jsPanel-hdr * {
color: #ffff00; }
.jsPanel-theme-myblue > .jsPanel-hdr .jsPanel-hdr-toolbar {
border-top: 1px solid #ffff00; }
.jsPanel-theme-myblue > .jsPanel-content {
background-color: #eceff1;
border-top: 1px solid #ffff00;
color: #000000; }
.jsPanel-theme-myblue > .jsPanel-content.jsPanel-content-filled {
background-color: #42a5f5;
border-top: 1px solid #ffff00;
color: #ffff00; }
.jsPanel-theme-myblue > .jsPanel-content.jsPanel-content-filledlight {
background-color: #bbdefb;
border-top: 1px solid #ffff00;
color: #e65100; }
.jsPanel-content.jsPanel-content-noheader {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: none !important; }
.jsPanel-content.jsPanel-content-nofooter {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; }
|
Download
