Webapp Widgets

by 1UnitedPower

HTML

<div data-widget="layout-vertical">
    <menu type="toolbar" data-widget="bar">
        <li data-widget="expand-menu">
            <input type="button" value="File" />
            <menu type="toolbar">
               <li><button>Entry 1</button></li>
               <li><button>Entry 2</button></li>
            </menu>                     
        </li>
        <li><button>Edit</button></li>        
    </menu>
    <div data-widget="layout-horizontal">
        <div data-widget="layout-vertical">
            <div data-widget="pane">
                <details data-widget="treeview" open="true">
                    <summary>Root</summary>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>
                            <details>
                                <summary>Group1</summary>
                                <ul>
                                    <li>Item 3</li>
                                    <li>Item 4</li>
                                </ul>
                            </details>                        
                        </li>
                    </ul>
                </details>
            </div>
            <div data-widget="pane">
                Pane 2
            </div>
        </div>
        <div data-widget="pane">
            Pane 3
        </div>
    </div>
    <div data-widget="bar">
       Statusbar    
    </div>
</div>

CSS

html, body {
   height: 100%;
   width: 100%;
   display: -webkit-box;       
}

[data-widget="layout-horizontal"],
[data-widget="layout-vertical"] {
    display: -webkit-box;
    -webkit-box-flex: 1;
}

[data-widget="layout-horizontal"]{
    -webkit-box-orient: horzizontal;
}
[data-widget="layout-vertical"]{
    -webkit-box-orient: vertical;
}

[data-widget="layout-horizontal"] > *,
[data-widget="layout-vertical"] > *{
   -webkit-box-flex: 1;
}
[data-widget="treeview"] ul {
   padding-left: 1em;   
}
[data-widget="bar"] {
   -webkit-box-flex: 0;
   height: 1.5em;            
}
[data-widget="expand-menu"] > *:nth-child(2) {
    position: absolute;
    display: none;
}
[data-widget="expand-menu"] > *:nth-child(1):active~* {
    display: block;
}

menu[type="toolbar"]{
   margin: 0px;
   padding: 0px;
   list-style: none;        
}

menu[type="toolbar"] li {
   float: left;
}

/* Optical Sugar*/

[data-widget="pane"]{
   background-color: #FFFFFF;
   color: #1D1D1D;
   outline: 1px solid black;
   outline-offset: 0px;
}

[data-widget="bar"]{
   background-image: -webkit-linear-gradient(bottom, rgb(43,44,46) 37%, rgb(95,116,173) 100%);
   color: #FFFFFF;
}
[data-widget="bar"] li{
   display: block;
   height: 100%;
   padding: 0px;
   maring: 0px;
}

button, details[data-widget="expand-menu"]{
   background-image: -webkit-linear-gradient(bottom, rgb(134,154,204) 37%, rgb(239,240,242) 100%);
   color: #000000;
   font-weight: bold;
   text-align: left;
   border-width: 1px;
   display: block;
   height: 100%;
   margin: 0px;
   min-width: 5em;
}
button:active{
   background-color: #99B433;  
}