@charset "UTF-8"; :root .grid-stack-item > .ui-resizable-handle { -webkit-filter: none; filter: none; } .grid-stack { position: relative; } .grid-stack .grid-stack-placeholder > .placeholder-content { position: absolute; top: 0; right: 10px; bottom: 0; left: 10px; z-index: 0 !important; width: auto; margin: 0; border: 1px dashed lightgray; } .grid-stack > .grid-stack-item { position: absolute; min-width: 8.3333333333%; padding: 0; } .grid-stack > .grid-stack-item[data-gs-width='1'] { width: 8.3333333333%; } .grid-stack > .grid-stack-item[data-gs-x='1'] { left: 8.3333333333%; } .grid-stack > .grid-stack-item[data-gs-min-width='1'] { min-width: 8.3333333333%; } .grid-stack > .grid-stack-item[data-gs-max-width='1'] { max-width: 8.3333333333%; } .grid-stack > .grid-stack-item[data-gs-width='2'] { width: 16.6666666667%; } .grid-stack > .grid-stack-item[data-gs-x='2'] { left: 16.6666666667%; } .grid-stack > .grid-stack-item[data-gs-min-width='2'] { min-width: 16.6666666667%; } .grid-stack > .grid-stack-item[data-gs-max-width='2'] { max-width: 16.6666666667%; } .grid-stack > .grid-stack-item[data-gs-width='3'] { width: 25%; } .grid-stack > .grid-stack-item[data-gs-x='3'] { left: 25%; } .grid-stack > .grid-stack-item[data-gs-min-width='3'] { min-width: 25%; } .grid-stack > .grid-stack-item[data-gs-max-width='3'] { max-width: 25%; } .grid-stack > .grid-stack-item[data-gs-width='4'] { width: 33.3333333333%; } .grid-stack > .grid-stack-item[data-gs-x='4'] { left: 33.3333333333%; } .grid-stack > .grid-stack-item[data-gs-min-width='4'] { min-width: 33.3333333333%; } .grid-stack > .grid-stack-item[data-gs-max-width='4'] { max-width: 33.3333333333%; } .grid-stack > .grid-stack-item[data-gs-width='5'] { width: 41.6666666667%; } .grid-stack > .grid-stack-item[data-gs-x='5'] { left: 41.6666666667%; } .grid-stack > .grid-stack-item[data-gs-min-width='5'] { min-width: 41.6666666667%; } .grid-stack > .grid-stack-item[data-gs-max-width='5'] { max-width: 41.6666666667%; } .grid-stack > .grid-stack-item[data-gs-width='6'] { width: 50%; } .grid-stack > .grid-stack-item[data-gs-x='6'] { left: 50%; } .grid-stack > .grid-stack-item[data-gs-min-width='6'] { min-width: 50%; } .grid-stack > .grid-stack-item[data-gs-max-width='6'] { max-width: 50%; } .grid-stack > .grid-stack-item[data-gs-width='7'] { width: 58.3333333333%; } .grid-stack > .grid-stack-item[data-gs-x='7'] { left: 58.3333333333%; } .grid-stack > .grid-stack-item[data-gs-min-width='7'] { min-width: 58.3333333333%; } .grid-stack > .grid-stack-item[data-gs-max-width='7'] { max-width: 58.3333333333%; } .grid-stack > .grid-stack-item[data-gs-width='8'] { width: 66.6666666667%; } .grid-stack > .grid-stack-item[data-gs-x='8'] { left: 66.6666666667%; } .grid-stack > .grid-stack-item[data-gs-min-width='8'] { min-width: 66.6666666667%; } .grid-stack > .grid-stack-item[data-gs-max-width='8'] { max-width: 66.6666666667%; } .grid-stack > .grid-stack-item[data-gs-width='9'] { width: 75%; } .grid-stack > .grid-stack-item[data-gs-x='9'] { left: 75%; } .grid-stack > .grid-stack-item[data-gs-min-width='9'] { min-width: 75%; } .grid-stack > .grid-stack-item[data-gs-max-width='9'] { max-width: 75%; } .grid-stack > .grid-stack-item[data-gs-width='10'] { width: 83.3333333333%; } .grid-stack > .grid-stack-item[data-gs-x='10'] { left: 83.3333333333%; } .grid-stack > .grid-stack-item[data-gs-min-width='10'] { min-width: 83.3333333333%; } .grid-stack > .grid-stack-item[data-gs-max-width='10'] { max-width: 83.3333333333%; } .grid-stack > .grid-stack-item[data-gs-width='11'] { width: 91.6666666667%; } .grid-stack > .grid-stack-item[data-gs-x='11'] { left: 91.6666666667%; } .grid-stack > .grid-stack-item[data-gs-min-width='11'] { min-width: 91.6666666667%; } .grid-stack > .grid-stack-item[data-gs-max-width='11'] { max-width: 91.6666666667%; } .grid-stack > .grid-stack-item[data-gs-width='12'] { width: 100%; } .grid-stack > .grid-stack-item[data-gs-x='12'] { left: 100%; } .grid-stack > .grid-stack-item[data-gs-min-width='12'] { min-width: 100%; } .grid-stack > .grid-stack-item[data-gs-max-width='12'] { max-width: 100%; } .grid-stack > .grid-stack-item > .grid-stack-item-content { position: absolute; top: 0; right: 10px; bottom: 0; left: 10px; z-index: 0 !important; width: auto; margin: 0; overflow-x: hidden; overflow-y: auto; } .grid-stack > .grid-stack-item > .ui-resizable-handle { position: absolute; display: block; font-size: .1px; -ms-touch-action: none; touch-action: none; } .grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle { display: none; } .grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing { z-index: 100; } .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content { box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2); opacity: .8; } .grid-stack > .grid-stack-item > .ui-resizable-se, .grid-stack > .grid-stack-item > .ui-resizable-sw { padding: 2px 3px 0 0; margin: 0; font: normal normal normal 10px/1 "Web Icons"; font-size: inherit; color: gray; text-align: right; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .grid-stack > .grid-stack-item > .ui-resizable-se::before, .grid-stack > .grid-stack-item > .ui-resizable-sw::before { content: ""; } .grid-stack > .grid-stack-item > .ui-resizable-sw { -webkit-transform: rotate(90deg); transform: rotate(90deg); display: inline-block; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .grid-stack > .grid-stack-item > .ui-resizable-nw { top: 0; left: 10px; width: 20px; height: 20px; cursor: nw-resize; } .grid-stack > .grid-stack-item > .ui-resizable-n { top: 0; right: 25px; left: 25px; height: 10px; cursor: n-resize; } .grid-stack > .grid-stack-item > .ui-resizable-ne { top: 0; right: 10px; width: 20px; height: 20px; cursor: ne-resize; } .grid-stack > .grid-stack-item > .ui-resizable-e { top: 15px; right: 10px; bottom: 15px; width: 10px; cursor: e-resize; } .grid-stack > .grid-stack-item > .ui-resizable-se { right: 10px; bottom: 0; width: 20px; height: 20px; cursor: se-resize; } .grid-stack > .grid-stack-item > .ui-resizable-s { right: 25px; bottom: 0; left: 25px; height: 10px; cursor: s-resize; } .grid-stack > .grid-stack-item > .ui-resizable-sw { bottom: 0; left: 10px; width: 20px; height: 20px; cursor: sw-resize; } .grid-stack > .grid-stack-item > .ui-resizable-w { top: 15px; bottom: 15px; left: 10px; width: 10px; cursor: w-resize; } .grid-stack.grid-stack-animate, .grid-stack.grid-stack-animate .grid-stack-item { transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s; } .grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging, .grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing, .grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder { transition: left 0s, top 0s, height 0s, width 0s; } /** Uncomment this to show bottom-left resize handle **/ /* .grid-stack > .grid-stack-item > .ui-resizable-sw { display: inline-block; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); @include vendor(transform, rotate(180deg)); } */ @media (max-width: 767.98px) { .grid-stack-item { position: relative !important; top: auto !important; left: 0 !important; width: auto !important; margin-bottom: 20px; } .grid-stack-item .ui-resizable-handle { display: none; } .grid-stack { height: auto !important; } }