UNPKG

@bokeh/bokehjs

Version:

Interactive, novel data visualization

11 lines (10 loc) 2.31 kB
export const above = "bk-above" export const below = "bk-below" export const left = "bk-left" export const right = "bk-right" export const header = "bk-header" export const tab = "bk-tab" export const active = "bk-active" export const close = "bk-close" export const disabled = "bk-disabled" export default `:host{display:grid;}:host(.bk-above){grid-template:"header" max-content "stack" 1fr / 1fr;}:host(.bk-below){grid-template:"stack" 1fr "header" max-content / 1fr;}:host(.bk-left){grid-template:"header stack" 1fr / max-content 1fr;}:host(.bk-right){grid-template:"stack header" 1fr / 1fr max-content;}.bk-header{grid-area:"header";display:flex;flex-wrap:nowrap;align-items:stretch;user-select:none;-webkit-user-select:none;}:host(.bk-above) .bk-header,:host(.bk-below) .bk-header{flex-direction:row;}:host(.bk-left) .bk-header,:host(.bk-right) .bk-header{flex-direction:column;}:host(.bk-above) .bk-header{border-bottom:1px solid #e6e6e6;}:host(.bk-right) .bk-header{border-left:1px solid #e6e6e6;}:host(.bk-below) .bk-header{border-top:1px solid #e6e6e6;}:host(.bk-left) .bk-header{border-right:1px solid #e6e6e6;}.bk-tab{padding:4px 8px;border:solid transparent;outline:0;outline-offset:-5px;white-space:nowrap;cursor:pointer;text-align:center;}.bk-tab:hover{background-color:#f2f2f2;}.bk-tab:focus,.bk-tab:active{outline:1px dotted #ccc;}.bk-tab.bk-active{color:#4d4d4d;background-color:white;border-color:#e6e6e6;}.bk-tab .bk-close{margin-left:10px;}.bk-tab.bk-disabled{cursor:not-allowed;pointer-events:none;opacity:0.65;}:host(.bk-above) .bk-tab{border-width:3px 1px 0px 1px;border-radius:var(--border-radius) var(--border-radius) 0 0;}:host(.bk-right) .bk-tab{border-width:1px 3px 1px 0px;border-radius:0 var(--border-radius) var(--border-radius) 0;}:host(.bk-below) .bk-tab{border-width:0px 1px 3px 1px;border-radius:0 0 var(--border-radius) var(--border-radius);}:host(.bk-left) .bk-tab{border-width:1px 0px 1px 3px;border-radius:var(--border-radius) 0 0 var(--border-radius);}.bk-close{display:inline-block;vertical-align:middle;width:14px;height:14px;cursor:pointer;background-color:gray;mask-image:var(--bokeh-icon-x);mask-size:contain;mask-repeat:no-repeat;-webkit-mask-image:var(--bokeh-icon-x);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;}.bk-close:hover{background-color:red;}`