@archbase/layout 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Binary file
package/dist/index.css ADDED
@@ -0,0 +1 @@
1
+ div.archbase-window-container{position:absolute;border:solid 1px black;--tilebar-height: 32px;overflow:hidden;display:flex;flex-direction:column}div.archbase-window-container>div.title-bar{background-color:gray;height:var(--tilebar-height);display:flex;flex-direction:row;cursor:default;position:static}div.archbase-window-container>div.title-bar>span.icon{line-height:var(--tilebar-height);height:var(--tilebar-height);width:var(--tilebar-height);font-size:calc(var(--tilebar-height) - 8px)}div.archbase-window-container>div.title-bar>span.windowTitle{flex-grow:1;overflow:hidden;text-align:center;background-color:gray;color:#fff;font-size:calc(var(--tilebar-height) - 16px);line-height:var(--tilebar-height);font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;font-weight:700}div.archbase-window-container>div.title-bar>span.windowTitle:active{opacity:.5}div.archbase-window-container>div.title-bar>span.buttonContainer{display:flex;flex-direction:row}div.archbase-window-container>div.title-bar>span.buttonContainer>span.windowButton{height:var(--tilebar-height);width:var(--tilebar-height);font-size:calc(var(--tilebar-height) - 8px);cursor:default;color:#000;transition:.2s ease-in-out}div.archbase-window-container>div.title-bar>span.buttonContainer>span.windowButton:hover{color:#fff}div.archbase-window-container>div.content{all:initial;background-color:#fff;overflow:scroll}.archbase_tabs{box-sizing:border-box;position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:12px;height:46px;padding:8px 3px 4px;background:#dee1e6;border-radius:5px 5px 0 0;overflow:hidden}.archbase_tabs *{box-sizing:inherit;font:inherit}.archbase_tabs .archbase_tabs_content{position:relative;width:100%;height:100%}*{cursor:default}.archbase_tabs .archbase_tab{position:absolute;left:0;height:36px;width:240px;border:0;margin:0;z-index:1;pointer-events:none}.archbase_tabs .archbase_tab,.archbase_tabs .archbase_tab *{user-select:none;cursor:default}.archbase_tabs .archbase_tab .archbase_tab-dividers{position:absolute;inset:7px 9px}.archbase_tabs .archbase_tab .archbase_tab-dividers,.archbase_tabs .archbase_tab .archbase_tab-dividers:before,.archbase_tabs .archbase_tab .archbase_tab-dividers:after{pointer-events:none}.archbase_tabs .archbase_tab .archbase_tab-dividers:before,.archbase_tabs .archbase_tab .archbase_tab-dividers:after{content:"";display:block;position:absolute;top:0;bottom:0;width:1px;background:#a9adb0;opacity:1}.archbase_tabs .archbase_tab .archbase_tab-dividers:before{left:0}.archbase_tabs .archbase_tab .archbase_tab-dividers:after{right:0}.archbase_tabs .archbase_tab:first-child .archbase_tab-dividers:before{opacity:0}.archbase_tabs .archbase_tab .archbase_tab-background{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.archbase_tabs .archbase_tab .archbase_tab-background>svg{width:100%;height:100%}.archbase_tabs .archbase_tab .archbase_tab-background>svg .archbase_tab-geometry{fill:#f4f5f6}.archbase_tabs .archbase_tab[tab-active]{z-index:0}.archbase_tabs .archbase_tab[tab-active] .archbase_tab-background>svg .archbase_tab-geometry{fill:#fff}.archbase_tabs .archbase_tab:not([tab-active]) .archbase_tab-background{opacity:0}@media (hover: hover){.archbase_tabs .archbase_tab:not([tab-active]):hover{z-index:2}.archbase_tabs .archbase_tab:not([tab-active]):hover .archbase_tab-background{opacity:1}}.archbase_tabs .archbase_tab.archbase_tab-was-just-added{top:10px}.archbase_tabs .archbase_tab .archbase_tab-content{position:absolute;display:flex;inset:0 9px;padding:9px 8px;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;pointer-events:all}.archbase_tabs .archbase_tab[is-mini] .archbase_tab-content{padding-left:2px;padding-right:2px}.archbase_tabs .archbase_tab .archbase_tab-favicon{position:relative;flex-shrink:0;flex-grow:0;height:16px;width:16px;background-size:16px;margin-left:4px}.archbase_tabs .archbase_tab[is-small] .archbase_tab-favicon{margin-left:0}.archbase_tabs .archbase_tab[is-mini]:not([tab-active]) .archbase_tab-favicon{margin-left:auto;margin-right:auto}.archbase_tabs .archbase_tab[is-mini][tab-active] .archbase_tab-favicon{display:none}.archbase_tabs .archbase_tab .archbase_tab-title{flex:1;vertical-align:top;overflow:hidden;white-space:nowrap;margin-left:4px;color:#5f6368;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 24px),transparent)}.archbase_tabs .archbase_tab[is-small] .archbase_tab-title{margin-left:0}.archbase_tabs .archbase_tab .archbase_tab-favicon+.archbase_tab-title,.archbase_tabs .archbase_tab[is-small] .archbase_tab-favicon+.archbase_tab-title{margin-left:8px}.archbase_tabs .archbase_tab[is-smaller] .archbase_tab-favicon+.archbase_tab-title,.archbase_tabs .archbase_tab[is-mini] .archbase_tab-title{display:none}.archbase_tabs .archbase_tab[tab-active] .archbase_tab-title{color:#45474a}.archbase_tabs .archbase_tab .archbase_tab-drag-handle{position:absolute;inset:0;border-top-left-radius:8px;border-top-right-radius:8px}.archbase_tabs .archbase_tab .archbase_tab-close{flex-grow:0;flex-shrink:0;position:relative;width:16px;height:16px;border-radius:50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path stroke='rgba(0, 0, 0, .65)' stroke-linecap='square' stroke-width='1.5' d='M0 0 L8 8 M8 0 L0 8'></path></svg>");background-position:center center;background-repeat:no-repeat;background-size:8px 8px}.archbase_tabs .archbase_tab .archbase_tab-dropdown{flex-grow:0;flex-shrink:0;position:relative;width:16px;height:16px;border-radius:50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(0, 0, 0, .65)'><path d='M4 6 L8 10 L12 6 Z'/></svg>");background-position:center center;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;margin-right:4px}@media (hover: hover){.archbase_tabs .archbase_tab .archbase_tab-close:hover{background-color:#e8eaed}.archbase_tabs .archbase_tab .archbase_tab-close:hover:tab-active{background-color:#dadce0}.archbase_tabs .archbase_tab .archbase_tab-dropdown:hover{background-color:#e8eaed}.archbase_tabs .archbase_tab .archbase_tab-dropdown:hover:tab-active{background-color:#dadce0}}@media not all and (hover: hover){.archbase_tabs .archbase_tab .archbase_tab-close:tab-active{background-color:#dadce0}.archbase_tabs .archbase-tab .archbase_tab-dropdown:tab-active{background-color:#dadce0}}@media (hover: hover){.archbase_tabs .archbase_tab:not([tab-active]) .archbase_tab-close:not(:hover):not(:tab-active){opacity:.8}.archbase_tabs .archbase_tab:not([tab-active]) .archbase_tab-dropdown:not(:hover):not(:tab-active){opacity:.8}}.archbase_tabs .archbase_tab[is-smaller] .archbase_tab-close{margin-left:auto}.archbase_tabs .archbase_tab[is-mini]:not([tab-active]) .archbase_tab-close{display:none}.archbase_tabs .archbase_tab[is-mini][tab-active] .archbase_tab-close{margin-left:auto;margin-right:auto}.archbase_tabs .archbase_tabs-bottom-bar{position:absolute;bottom:0;height:4px;left:0;width:100%;background:#fff;z-index:0}.archbase_tabs-optional-shadow-below-bottom-bar{position:relative;height:1px;width:100%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1'><rect x='0' y='0' width='1' height='1' fill='rgba(0, 0, 0, .17)'></rect></svg>");background-size:1px 1px;background-repeat:repeat-x;background-position:0% 0%}@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi),only screen and (min-resolution: 2dppx){.archbase_tabs-optional-shadow-below-bottom-bar{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'><rect x='0' y='0' width='2' height='1' fill='rgba(0, 0, 0, .27)'></rect></svg>")}}.archbase_tabs.archbase_tabs-dark-theme{background:#202124}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-dividers:before,.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-dividers:after{background:#4a4d51}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-background>svg .archbase_tab-geometry{fill:#292b2e}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab[tab-active] .archbase_tab-background>svg .archbase_tab-geometry{fill:#323639}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-title{color:#9ca1a7}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab[tab-active] .archbase_tab-title{color:#f1f3f4}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-close{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path stroke='rgba(154, 160, 166, .8)' stroke-linecap='square' stroke-width='1.5' d='M0 0 L8 8 M8 0 L0 8'></path></svg>")}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-dropdown{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(154, 160, 166, .8)'><path d='M4 6 L8 10 L12 6 Z'/></svg>")}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-close:hover{background-color:#5f6368;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path stroke='rgba(255, 255, 255, .7)' stroke-linecap='square' stroke-width='1.5' d='M0 0 L8 8 M8 0 L0 8'></path></svg>")}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-dropdown:hover{background-color:#5f6368;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(255, 255, 255, .7)'><path d='M4 6 L8 10 L12 6 Z'/></svg>")}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-close:hover:tab-active{background-color:#80868b;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path stroke='rgba(255, 255, 255, .9)' stroke-linecap='square' stroke-width='1.5' d='M0 0 L8 8 M8 0 L0 8'></path></svg>")}.archbase_tabs.archbase_tabs-dark-theme .archbase_tab .archbase_tab-dropdown:hover:tab-active{background-color:#80868b;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(255, 255, 255, .9)'><path d='M4 6 L8 10 L12 6 Z'/></svg>")}.archbase_tabs.archbase_tabs-dark-theme .archbase_tabs-bottom-bar{background:#323639}@-moz-keyframes archbase_tab-was-just-added{to{top:0}}@-webkit-keyframes archbase_tab-was-just-added{to{top:0}}@-o-keyframes archbase_tab-was-just-added{to{top:0}}@keyframes archbase_tab-was-just-added{to{top:0}}.spaces-centered-vertically{position:relative;top:50%;transform:translateY(-50%)}.spaces-centered{position:relative;top:50%;transform:translateY(-50%);text-align:center}.spaces-clearfix:after{content:"";display:table;clear:both}.spaces-resize-handle{position:absolute;z-index:9999;background:transparent}.spaces-resize-handle:before{content:"";position:absolute;inset:0;z-index:2}.spaces-resize-handle:after{content:"";position:absolute;z-index:1}.spaces-touch-handle{position:absolute;z-index:9998;pointer-events:all;background:transparent}.spaces-resize-handle.resize-left:before{cursor:w-resize}.spaces-resize-handle.resize-top-left:before{cursor:nw-resize}.spaces-resize-handle.resize-right:before{cursor:e-resize}.spaces-resize-handle.resize-top-right:before{cursor:ne-resize}.spaces-resize-handle.resize-top:before{cursor:n-resize}.spaces-resize-handle.resize-bottom:before{cursor:s-resize}.spaces-resize-handle.resize-bottom-left:before{cursor:sw-resize}.spaces-resize-handle.resize-bottom-right:before{cursor:se-resize}.spaces-space{overflow:hidden;touch-action:none;box-sizing:border-box}.spaces-resizing .spaces-space{transition:none!important}.spaces-space .spaces-space-inner{position:absolute;inset:0;box-sizing:border-box}.spaces-space.scrollable .spaces-space-inner{overflow:auto;touch-action:auto}.type-examples{list-style:none;padding:0}.type-examples p{width:70%;font-size:80%;margin:0 auto}.type-examples strong{font-size:120%;padding-bottom:15px}.type-examples .half{text-align:center;width:auto}.type-examples .full p{width:80%;margin-top:15px;text-align:center}.type-examples .layer-outer{width:400px;height:300px;margin:15px auto 60px;position:relative;padding:30px}.type-examples .layer-outer .layer{position:absolute;top:30px;left:0}.type-examples .layer-outer .layer.layer-1{left:-37px;top:-22.5px}.type-examples .layer-outer .layer.layer-2{left:-7.5px;top:-49.5px;opacity:.5}.type-examples .box-outer{text-align:center;padding:30px;position:relative}.type-examples .box{text-align:left;outline:1px solid #bbb;width:400px;height:300px;margin:0 auto;position:relative;font-size:16px}.type-examples .box .shaded{background-color:#eee}.type-examples .box .space,.type-examples .box body .banner,body .type-examples .box .banner,.type-examples .box body .header,body .type-examples .box .header{outline:1px solid #bbb}.type-examples .box .left{position:absolute;left:0;top:25%;bottom:25%;width:35%}.type-examples .box .left.full{top:0;bottom:0}.type-examples .box .top{position:absolute;top:0;left:0;right:0;height:25%}.type-examples .box .top.full{left:0;right:0}.type-examples .box .bottom{position:absolute;bottom:0;left:0;right:0;height:25%}.type-examples .box .bottom.full{left:0;right:0}.type-examples .box .right{position:absolute;top:25%;right:0;bottom:25%;width:35%}.type-examples .box .right.full{top:0;bottom:0}.type-examples .box .fill{position:absolute;inset:25% 35%}.type-examples .box .fill.full-vert{top:0;bottom:0}.type-examples .box .fill.full-horiz{left:0;right:0}.space-row{display:flex!important;justify-content:center!important}