/** * gridster.js - v0.2.1 - 2013-10-28 * http://gridster.net * Copyright (c) 2013 ducksboard; Licensed MIT */ .gridster { position: relative; margin: auto; height: 0; } .gridster > ul { margin: 0; list-style: none; padding: 0; } .gridster-item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style: none; z-index: 2; position: absolute; display: none; } .gridster-loaded { -webkit-transition: height .3s; -moz-transition: height .3s; -o-transition: height .3s; transition: height .3s; } .gridster-loaded .gridster-item { display: block; position: absolute; -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; -webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; -o-transition-delay: 50ms; transition-delay: 50ms; } .gridster-loaded .gridster-preview-holder { display: none; z-index: 1; position: absolute; background-color: #ddd; border-color: #fff; opacity: 0.2; } .gridster-loaded .gridster-item.gridster-item-moving, .gridster-loaded .gridster-preview-holder { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .gridster-mobile { height: auto !important; } .gridster-mobile .gridster-item { height: auto; position: static; float: none; } .gridster-item.ng-leave.ng-leave-active { opacity: 0; } .gridster-item.ng-enter { opacity: 1; } .gridster-item-moving { z-index: 3; } /* RESIZE */ .gridster-item-resizable-handler { position: absolute; font-size: 1px; display: block; z-index: 5; } .handle-se { cursor: se-resize; width: 0; height: 0; right: 1px; bottom: 1px; border-style: solid; border-width: 0 0 12px 12px; border-color: transparent; } .handle-ne { cursor: ne-resize; width: 12px; height: 12px; right: 1px; top: 1px; } .handle-nw { cursor: nw-resize; width: 12px; height: 12px; left: 1px; top: 1px; } .handle-sw { cursor: sw-resize; width: 12px; height: 12px; left: 1px; bottom: 1px; } .handle-e { cursor: e-resize; width: 12px; bottom: 0; right: 1px; top: 0; } .handle-s { cursor: s-resize; height: 12px; right: 0; bottom: 1px; left: 0; } .handle-n { cursor: n-resize; height: 12px; right: 0; top: 1px; left: 0; } .handle-w { cursor: w-resize; width: 12px; left: 1px; top: 0; bottom: 0; } .gridster .gridster-item:hover .gridster-box { border: 1.5px solid #B3B2B3; } .gridster .gridster-item:hover .handle-se { border-color: transparent transparent #ccc; }