vue-ts-responsive-grid-layout/dist/vue-ts-responsive-grid-layout.css

Vue 3 Responsive & Dynamic Grid / Dashboard layout with drag, drop and resizable actions.

.vue-grid-item .resizing[data-v-2f7fcf17]{opacity:.9}.vue-grid-item[data-v-2f7fcf17]{box-sizing:border-box;color:#fff;cursor:default;font-size:1rem;touch-action:none;transition:all .2s ease;transition-property:left,top,right}.vue-grid-item[data-v-2f7fcf17]:hover{border:solid 1px #000}.vue-grid-item.vue-static[data-v-2f7fcf17]{background-color:#393d42}.vue-grid-item.no-touch[data-v-2f7fcf17]{touch-action:none}.vue-grid-item.vue-use-radius[data-v-2f7fcf17]{border-radius:12px}.vue-grid-item.cssTransforms[data-v-2f7fcf17]{left:auto;right:auto;transition-duration:.4s;transition-property:transform}.vue-grid-item.resizing[data-v-2f7fcf17]{opacity:.6;z-index:3}.vue-grid-item.vue-grid-placeholder[data-v-2f7fcf17]{background:#8f3c3c;opacity:.5;transition-duration:.1s;-webkit-user-select:none;user-select:none;z-index:2}.vue-grid-item.disable-user-select[data-v-2f7fcf17]{-webkit-user-select:none;user-select:none}.vue-grid-item>.vue-resizable-handle[data-v-2f7fcf17]{background-origin:content-box;background-position:bottom right;background-repeat:no-repeat;bottom:-3px;box-sizing:border-box;cursor:se-resize;height:15px;padding:0 3px 3px 0;position:absolute;right:-3px;width:15px;z-index:20}.vue-grid-item>.vue-resizable-handle>.icon[data-v-2f7fcf17]{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.vue-grid-item>.vue-resizable-handle>.icon[data-v-2f7fcf17]:before,.vue-grid-item>.vue-resizable-handle>.icon[data-v-2f7fcf17]:after{content:"";display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.vue-grid-item>.vue-resizable-handle>.icon.icon-resize-se[data-v-2f7fcf17]:before{border-bottom:0;border-right:0;height:.65em;transform:translate(-75%,-50%) rotate(180deg);width:.65em}.vue-grid-item>.vue-rtl-resizable-handle[data-v-2f7fcf17]{background-origin:content-box;background-position:bottom right;background-repeat:no-repeat;bottom:5px;box-sizing:border-box;cursor:sw-resize;height:20px;left:0;margin:0 3px 2px 5px;position:absolute;right:auto;width:20px;z-index:20}.vue-grid-item>.vue-rtl-resizable-handle>.icon[data-v-2f7fcf17],.vue-grid-item>.vue-rtl-resizable-handle .icon-resize-se[data-v-2f7fcf17]{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.vue-grid-item>.vue-rtl-resizable-handle>.icon[data-v-2f7fcf17]:before,.vue-grid-item>.vue-rtl-resizable-handle>.icon[data-v-2f7fcf17]:after,.vue-grid-item>.vue-rtl-resizable-handle .icon-resize-se[data-v-2f7fcf17]:before,.vue-grid-item>.vue-rtl-resizable-handle .icon-resize-se[data-v-2f7fcf17]:after{content:"";display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.vue-grid-item>.vue-rtl-resizable-handle>.icon.icon-resize-se[data-v-2f7fcf17]:before,.vue-grid-item>.vue-rtl-resizable-handle .icon-resize-se.icon-resize-se[data-v-2f7fcf17]:before{border-bottom:0;border-right:0;height:.65em;transform:translate(-75%,-50%) rotate(270deg);width:.65em}.vue-grid-item.render-rtl>.btn-close[data-v-2f7fcf17]{align-items:center;background:red;border:0;border-radius:50%;cursor:pointer;display:flex;flex-flow:column nowrap;height:24px;justify-content:center;left:4px!important;margin:0;padding:0;position:absolute;right:auto!important;top:4px;transition:all .15s;width:24px;z-index:20}.vue-grid-item.render-rtl>.btn-close>.icon-cross[data-v-2f7fcf17]{background:none;border:0;height:16px;margin:0;padding:0;position:relative;width:16px}.vue-grid-item.render-rtl>.btn-close>.icon-cross[data-v-2f7fcf17]:after,.vue-grid-item.render-rtl>.btn-close>.icon-cross[data-v-2f7fcf17]:before{background:#fff;border-radius:4px;content:"";height:4px;left:0;position:absolute;right:0;top:6px}.vue-grid-item.render-rtl>.btn-close>.icon-cross[data-v-2f7fcf17]:before{transform:rotate(45deg)}.vue-grid-item.render-rtl>.btn-close>.icon-cross[data-v-2f7fcf17]:after{transform:rotate(-45deg)}.vue-grid-item.render-rtl>.btn-close>.icon-cross span[data-v-2f7fcf17]{display:block}.vue-grid-item.render-rtl>.btn-close[data-v-2f7fcf17]:hover,.vue-grid-item.render-rtl>.btn-close[data-v-2f7fcf17]:focus{background:#1481b4;transform:rotate(90deg)}.vue-grid-item>.btn-close[data-v-2f7fcf17]{align-items:center;background:red;border:0;border-radius:50%;cursor:pointer;display:flex;flex-flow:column nowrap;height:24px;justify-content:center;left:auto;margin:0;padding:0;position:absolute;right:4px;top:4px;transition:all .15s;width:24px;z-index:20}.vue-grid-item>.btn-close>.icon-cross[data-v-2f7fcf17]{background:none;border:0;height:16px;margin:0;padding:0;position:relative;width:16px}.vue-grid-item>.btn-close>.icon-cross[data-v-2f7fcf17]:after,.vue-grid-item>.btn-close>.icon-cross[data-v-2f7fcf17]:before{background:#fff;border-radius:4px;content:"";height:4px;left:0;position:absolute;right:0;top:6px}.vue-grid-item>.btn-close>.icon-cross[data-v-2f7fcf17]:before{transform:rotate(45deg)}.vue-grid-item>.btn-close>.icon-cross[data-v-2f7fcf17]:after{transform:rotate(-45deg)}.vue-grid-item>.btn-close>.icon-cross span[data-v-2f7fcf17]{display:block}.vue-grid-item>.btn-close[data-v-2f7fcf17]:hover,.vue-grid-item>.btn-close[data-v-2f7fcf17]:focus{background:#1481b4;transform:rotate(90deg)}.vue-grid-layout[data-v-6b0cc76a]{position:relative;transition:height .2s ease}.grid[data-v-6b0cc76a]:before{content:"";background-size:calc((100% - 10px) / 6) 70px;background-image:linear-gradient(to right,#000 1px,transparent 1px),linear-gradient(to bottom,#000 1px,transparent 1px);height:calc(100% - 5px);width:calc(100% - 5px);position:absolute;background-repeat:repeat;margin:5px}.btn-close[data-v-69af39e3]{align-items:center;background:#464548;border:0;border-radius:50%;cursor:pointer!important;display:flex;flex-flow:column nowrap;height:40px;justify-content:center;margin:0;padding:0;transition:all .15s;width:40px}.btn-close .icon-cross[data-v-69af39e3]{background:none;border:0;height:20px;margin:0;padding:0;position:relative;width:20px}.btn-close .icon-cross[data-v-69af39e3]:before,.btn-close .icon-cross[data-v-69af39e3]:after{background:#fff;border-radius:6px;content:"";height:6px;left:0;position:absolute;right:0;top:7px}.btn-close .icon-cross[data-v-69af39e3]:before{transform:rotate(45deg)}.btn-close .icon-cross[data-v-69af39e3]:after{transform:rotate(-45deg)}.btn-close .icon-cross span[data-v-69af39e3]{display:block}.btn-close[data-v-69af39e3]:hover,.btn-close[data-v-69af39e3]:focus{transform:rotate(90deg)}.vue-draggable-handle[data-v-f557b34e]{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat bottom right;background-origin:content-box;box-sizing:border-box;cursor:pointer;height:20px;left:0;padding:0 8px 8px 0;position:absolute;top:0;width:20px}