vue-dock
Version:
Easy to use dockable & resizable panels for Vue. Lightweight, zero dependencies, extensible.
43 lines (36 loc) • 1.02 kB
CSS
.vue-dock-container.vue-dock-horizontal {
display: flex;
justify-content: space-between;
width: 100%;
height: 100%; }
.vue-dock-panel.vue-dock-panel-horizontal {
width: 100%;
border: 1px solid #ccc; }
.vue-dock-panel.vue-dock-panel-horizontal:first-of-type {
border-right: 0; }
.vue-dock-panel-header {
border-bottom: 1px solid #ccc;
padding: 4px;
background-color: #efefef;
display: flex;
align-items: center;
justify-content: space-between; }
.vue-dock-panel-header .vue-dock-panel-header-title {
font-weight: bold;
font-family: monospace;
font-size: .8rem; }
.vue-dock-panel-header .vue-dock-panel-header-close-button {
width: 16px;
height: 16px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border: 0;
outline: 0;
background-color: rgba(0, 0, 0, 0.1);
font-size: .8rem;
font-family: monospace;
cursor: pointer; }
.vue-dock-panel-header .vue-dock-panel-header-close-button:hover {
background-color: rgba(0, 0, 0, 0.2); }