You are here

Home » API reference » DXPR GridStack 1.0.x

gridstack.css in DXPR GridStack 1.0.x

Same filename and directory in other branches
  1. 8 vendor/gridstack/gridstack.css
:root .grid-stack-item > .ui-resizable-handle {
  filter: none;
}

.grid-stack {
  position: relative;
}

.grid-stack.grid-stack-rtl {
  direction: ltr;
}

.grid-stack.grid-stack-rtl > .grid-stack-item {
  direction: rtl;
}

.grid-stack .grid-stack-placeholder > .placeholder-content {
  border: 1px dashed lightgray;
  margin: 0;
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  bottom: 0;
  width: auto;
  z-index: 0 !important;
  text-align: center;
}

.grid-stack > .grid-stack-item {
  min-width: 8.3333333333%;
  position: absolute;
  padding: 0;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
  margin: 0;
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  bottom: 0;
  width: auto;
  z-index: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}

.grid-stack > .grid-stack-item > .ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -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: 0.8;
}

.grid-stack > .grid-stack-item > .ui-resizable-se,
.grid-stack > .grid-stack-item > .ui-resizable-sw {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.grid-stack > .grid-stack-item > .ui-resizable-se {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.grid-stack > .grid-stack-item > .ui-resizable-nw {
  cursor: nw-resize;
  width: 20px;
  height: 20px;
  left: 10px;
  top: 0;
}

.grid-stack > .grid-stack-item > .ui-resizable-n {
  cursor: n-resize;
  height: 10px;
  top: 0;
  left: 25px;
  right: 25px;
}

.grid-stack > .grid-stack-item > .ui-resizable-ne {
  cursor: ne-resize;
  width: 20px;
  height: 20px;
  right: 10px;
  top: 0;
}

.grid-stack > .grid-stack-item > .ui-resizable-e {
  cursor: e-resize;
  width: 10px;
  right: 10px;
  top: 15px;
  bottom: 15px;
}

.grid-stack > .grid-stack-item > .ui-resizable-se {
  cursor: se-resize;
  width: 20px;
  height: 20px;
  right: 10px;
  bottom: 0;
}

.grid-stack > .grid-stack-item > .ui-resizable-s {
  cursor: s-resize;
  height: 10px;
  left: 25px;
  bottom: 0;
  right: 25px;
}

.grid-stack > .grid-stack-item > .ui-resizable-sw {
  cursor: sw-resize;
  width: 20px;
  height: 20px;
  left: 10px;
  bottom: 0;
}

.grid-stack > .grid-stack-item > .ui-resizable-w {
  cursor: w-resize;
  width: 10px;
  left: 10px;
  top: 15px;
  bottom: 15px;
}

.grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
  display: none !important;
}

.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-animate,
.grid-stack.grid-stack-animate .grid-stack-item {
  -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  -moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  -ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  -o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  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 {
  -webkit-transition: left 0s, top 0s, height 0s, width 0s;
  -moz-transition: left 0s, top 0s, height 0s, width 0s;
  -ms-transition: left 0s, top 0s, height 0s, width 0s;
  -o-transition: left 0s, top 0s, height 0s, width 0s;
  transition: left 0s, top 0s, height 0s, width 0s;
}

.grid-stack.grid-stack-one-column-mode {
  height: auto !important;
}

.grid-stack.grid-stack-one-column-mode > .grid-stack-item {
  position: relative !important;
  width: auto !important;
  left: 0 !important;
  top: auto !important;
  margin-bottom: 20px;
  max-width: none !important;
}

.grid-stack.grid-stack-one-column-mode > .grid-stack-item > .ui-resizable-handle {
  display: none;
}

File

vendor/gridstack/gridstack.css
View source 
  1. :root .grid-stack-item > .ui-resizable-handle {

  2.   filter: none;

  3. }

  4. 

  5. .grid-stack {

  6.   position: relative;

  7. }

  8. 

  9. .grid-stack.grid-stack-rtl {

  10.   direction: ltr;

  11. }

  12. 

  13. .grid-stack.grid-stack-rtl > .grid-stack-item {

  14.   direction: rtl;

  15. }

  16. 

  17. .grid-stack .grid-stack-placeholder > .placeholder-content {

  18.   border: 1px dashed lightgray;

  19.   margin: 0;

  20.   position: absolute;

  21.   top: 0;

  22.   left: 10px;

  23.   right: 10px;

  24.   bottom: 0;

  25.   width: auto;

  26.   z-index: 0 !important;

  27.   text-align: center;

  28. }

  29. 

  30. .grid-stack > .grid-stack-item {

  31.   min-width: 8.3333333333%;

  32.   position: absolute;

  33.   padding: 0;

  34. }

  35. 

  36. .grid-stack > .grid-stack-item > .grid-stack-item-content {

  37.   margin: 0;

  38.   position: absolute;

  39.   top: 0;

  40.   left: 10px;

  41.   right: 10px;

  42.   bottom: 0;

  43.   width: auto;

  44.   z-index: 0 !important;

  45.   overflow-x: hidden;

  46.   overflow-y: auto;

  47. }

  48. 

  49. .grid-stack > .grid-stack-item > .ui-resizable-handle {

  50.   position: absolute;

  51.   font-size: 0.1px;

  52.   display: block;

  53.   -ms-touch-action: none;

  54.   touch-action: none;

  55. }

  56. 

  57. .grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,

  58. .grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {

  59.   display: none;

  60. }

  61. 

  62. .grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {

  63.   z-index: 100;

  64. }

  65. 

  66. .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,

  67. .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,

  68. .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {

  69.   box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);

  70.   opacity: 0.8;

  71. }

  72. 

  73. .grid-stack > .grid-stack-item > .ui-resizable-se,

  74. .grid-stack > .grid-stack-item > .ui-resizable-sw {

  75.   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);

  76.   background-repeat: no-repeat;

  77.   background-position: center;

  78.   -webkit-transform: rotate(45deg);

  79.   -moz-transform: rotate(45deg);

  80.   -ms-transform: rotate(45deg);

  81.   -o-transform: rotate(45deg);

  82.   transform: rotate(45deg);

  83. }

  84. 

  85. .grid-stack > .grid-stack-item > .ui-resizable-se {

  86.   -webkit-transform: rotate(-45deg);

  87.   -moz-transform: rotate(-45deg);

  88.   -ms-transform: rotate(-45deg);

  89.   -o-transform: rotate(-45deg);

  90.   transform: rotate(-45deg);

  91. }

  92. 

  93. .grid-stack > .grid-stack-item > .ui-resizable-nw {

  94.   cursor: nw-resize;

  95.   width: 20px;

  96.   height: 20px;

  97.   left: 10px;

  98.   top: 0;

  99. }

  100. 

  101. .grid-stack > .grid-stack-item > .ui-resizable-n {

  102.   cursor: n-resize;

  103.   height: 10px;

  104.   top: 0;

  105.   left: 25px;

  106.   right: 25px;

  107. }

  108. 

  109. .grid-stack > .grid-stack-item > .ui-resizable-ne {

  110.   cursor: ne-resize;

  111.   width: 20px;

  112.   height: 20px;

  113.   right: 10px;

  114.   top: 0;

  115. }

  116. 

  117. .grid-stack > .grid-stack-item > .ui-resizable-e {

  118.   cursor: e-resize;

  119.   width: 10px;

  120.   right: 10px;

  121.   top: 15px;

  122.   bottom: 15px;

  123. }

  124. 

  125. .grid-stack > .grid-stack-item > .ui-resizable-se {

  126.   cursor: se-resize;

  127.   width: 20px;

  128.   height: 20px;

  129.   right: 10px;

  130.   bottom: 0;

  131. }

  132. 

  133. .grid-stack > .grid-stack-item > .ui-resizable-s {

  134.   cursor: s-resize;

  135.   height: 10px;

  136.   left: 25px;

  137.   bottom: 0;

  138.   right: 25px;

  139. }

  140. 

  141. .grid-stack > .grid-stack-item > .ui-resizable-sw {

  142.   cursor: sw-resize;

  143.   width: 20px;

  144.   height: 20px;

  145.   left: 10px;

  146.   bottom: 0;

  147. }

  148. 

  149. .grid-stack > .grid-stack-item > .ui-resizable-w {

  150.   cursor: w-resize;

  151.   width: 10px;

  152.   left: 10px;

  153.   top: 15px;

  154.   bottom: 15px;

  155. }

  156. 

  157. .grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {

  158.   display: none !important;

  159. }

  160. 

  161. .grid-stack > .grid-stack-item[data-gs-width='1'] {

  162.   width: 8.3333333333%;

  163. }

  164. 

  165. .grid-stack > .grid-stack-item[data-gs-x='1'] {

  166.   left: 8.3333333333%;

  167. }

  168. 

  169. .grid-stack > .grid-stack-item[data-gs-min-width='1'] {

  170.   min-width: 8.3333333333%;

  171. }

  172. 

  173. .grid-stack > .grid-stack-item[data-gs-max-width='1'] {

  174.   max-width: 8.3333333333%;

  175. }

  176. 

  177. .grid-stack > .grid-stack-item[data-gs-width='2'] {

  178.   width: 16.6666666667%;

  179. }

  180. 

  181. .grid-stack > .grid-stack-item[data-gs-x='2'] {

  182.   left: 16.6666666667%;

  183. }

  184. 

  185. .grid-stack > .grid-stack-item[data-gs-min-width='2'] {

  186.   min-width: 16.6666666667%;

  187. }

  188. 

  189. .grid-stack > .grid-stack-item[data-gs-max-width='2'] {

  190.   max-width: 16.6666666667%;

  191. }

  192. 

  193. .grid-stack > .grid-stack-item[data-gs-width='3'] {

  194.   width: 25%;

  195. }

  196. 

  197. .grid-stack > .grid-stack-item[data-gs-x='3'] {

  198.   left: 25%;

  199. }

  200. 

  201. .grid-stack > .grid-stack-item[data-gs-min-width='3'] {

  202.   min-width: 25%;

  203. }

  204. 

  205. .grid-stack > .grid-stack-item[data-gs-max-width='3'] {

  206.   max-width: 25%;

  207. }

  208. 

  209. .grid-stack > .grid-stack-item[data-gs-width='4'] {

  210.   width: 33.3333333333%;

  211. }

  212. 

  213. .grid-stack > .grid-stack-item[data-gs-x='4'] {

  214.   left: 33.3333333333%;

  215. }

  216. 

  217. .grid-stack > .grid-stack-item[data-gs-min-width='4'] {

  218.   min-width: 33.3333333333%;

  219. }

  220. 

  221. .grid-stack > .grid-stack-item[data-gs-max-width='4'] {

  222.   max-width: 33.3333333333%;

  223. }

  224. 

  225. .grid-stack > .grid-stack-item[data-gs-width='5'] {

  226.   width: 41.6666666667%;

  227. }

  228. 

  229. .grid-stack > .grid-stack-item[data-gs-x='5'] {

  230.   left: 41.6666666667%;

  231. }

  232. 

  233. .grid-stack > .grid-stack-item[data-gs-min-width='5'] {

  234.   min-width: 41.6666666667%;

  235. }

  236. 

  237. .grid-stack > .grid-stack-item[data-gs-max-width='5'] {

  238.   max-width: 41.6666666667%;

  239. }

  240. 

  241. .grid-stack > .grid-stack-item[data-gs-width='6'] {

  242.   width: 50%;

  243. }

  244. 

  245. .grid-stack > .grid-stack-item[data-gs-x='6'] {

  246.   left: 50%;

  247. }

  248. 

  249. .grid-stack > .grid-stack-item[data-gs-min-width='6'] {

  250.   min-width: 50%;

  251. }

  252. 

  253. .grid-stack > .grid-stack-item[data-gs-max-width='6'] {

  254.   max-width: 50%;

  255. }

  256. 

  257. .grid-stack > .grid-stack-item[data-gs-width='7'] {

  258.   width: 58.3333333333%;

  259. }

  260. 

  261. .grid-stack > .grid-stack-item[data-gs-x='7'] {

  262.   left: 58.3333333333%;

  263. }

  264. 

  265. .grid-stack > .grid-stack-item[data-gs-min-width='7'] {

  266.   min-width: 58.3333333333%;

  267. }

  268. 

  269. .grid-stack > .grid-stack-item[data-gs-max-width='7'] {

  270.   max-width: 58.3333333333%;

  271. }

  272. 

  273. .grid-stack > .grid-stack-item[data-gs-width='8'] {

  274.   width: 66.6666666667%;

  275. }

  276. 

  277. .grid-stack > .grid-stack-item[data-gs-x='8'] {

  278.   left: 66.6666666667%;

  279. }

  280. 

  281. .grid-stack > .grid-stack-item[data-gs-min-width='8'] {

  282.   min-width: 66.6666666667%;

  283. }

  284. 

  285. .grid-stack > .grid-stack-item[data-gs-max-width='8'] {

  286.   max-width: 66.6666666667%;

  287. }

  288. 

  289. .grid-stack > .grid-stack-item[data-gs-width='9'] {

  290.   width: 75%;

  291. }

  292. 

  293. .grid-stack > .grid-stack-item[data-gs-x='9'] {

  294.   left: 75%;

  295. }

  296. 

  297. .grid-stack > .grid-stack-item[data-gs-min-width='9'] {

  298.   min-width: 75%;

  299. }

  300. 

  301. .grid-stack > .grid-stack-item[data-gs-max-width='9'] {

  302.   max-width: 75%;

  303. }

  304. 

  305. .grid-stack > .grid-stack-item[data-gs-width='10'] {

  306.   width: 83.3333333333%;

  307. }

  308. 

  309. .grid-stack > .grid-stack-item[data-gs-x='10'] {

  310.   left: 83.3333333333%;

  311. }

  312. 

  313. .grid-stack > .grid-stack-item[data-gs-min-width='10'] {

  314.   min-width: 83.3333333333%;

  315. }

  316. 

  317. .grid-stack > .grid-stack-item[data-gs-max-width='10'] {

  318.   max-width: 83.3333333333%;

  319. }

  320. 

  321. .grid-stack > .grid-stack-item[data-gs-width='11'] {

  322.   width: 91.6666666667%;

  323. }

  324. 

  325. .grid-stack > .grid-stack-item[data-gs-x='11'] {

  326.   left: 91.6666666667%;

  327. }

  328. 

  329. .grid-stack > .grid-stack-item[data-gs-min-width='11'] {

  330.   min-width: 91.6666666667%;

  331. }

  332. 

  333. .grid-stack > .grid-stack-item[data-gs-max-width='11'] {

  334.   max-width: 91.6666666667%;

  335. }

  336. 

  337. .grid-stack > .grid-stack-item[data-gs-width='12'] {

  338.   width: 100%;

  339. }

  340. 

  341. .grid-stack > .grid-stack-item[data-gs-x='12'] {

  342.   left: 100%;

  343. }

  344. 

  345. .grid-stack > .grid-stack-item[data-gs-min-width='12'] {

  346.   min-width: 100%;

  347. }

  348. 

  349. .grid-stack > .grid-stack-item[data-gs-max-width='12'] {

  350.   max-width: 100%;

  351. }

  352. 

  353. .grid-stack.grid-stack-animate,

  354. .grid-stack.grid-stack-animate .grid-stack-item {

  355.   -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;

  356.   -moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;

  357.   -ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;

  358.   -o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;

  359.   transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;

  360. }

  361. 

  362. .grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,

  363. .grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,

  364. .grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder {

  365.   -webkit-transition: left 0s, top 0s, height 0s, width 0s;

  366.   -moz-transition: left 0s, top 0s, height 0s, width 0s;

  367.   -ms-transition: left 0s, top 0s, height 0s, width 0s;

  368.   -o-transition: left 0s, top 0s, height 0s, width 0s;

  369.   transition: left 0s, top 0s, height 0s, width 0s;

  370. }

  371. 

  372. .grid-stack.grid-stack-one-column-mode {

  373.   height: auto !important;

  374. }

  375. 

  376. .grid-stack.grid-stack-one-column-mode > .grid-stack-item {

  377.   position: relative !important;

  378.   width: auto !important;

  379.   left: 0 !important;

  380.   top: auto !important;

  381.   margin-bottom: 20px;

  382.   max-width: none !important;

  383. }

  384. 

  385. .grid-stack.grid-stack-one-column-mode > .grid-stack-item > .ui-resizable-handle {

  386.   display: none;

  387. }