You are here

gridstack.css in Sooperthemes GridStack 8

: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. .grid-stack {
  5. position: relative;
  6. }
  7. .grid-stack.grid-stack-rtl {
  8. direction: ltr;
  9. }
  10. .grid-stack.grid-stack-rtl > .grid-stack-item {
  11. direction: rtl;
  12. }
  13. .grid-stack .grid-stack-placeholder > .placeholder-content {
  14. border: 1px dashed lightgray;
  15. margin: 0;
  16. position: absolute;
  17. top: 0;
  18. left: 10px;
  19. right: 10px;
  20. bottom: 0;
  21. width: auto;
  22. z-index: 0 !important;
  23. text-align: center;
  24. }
  25. .grid-stack > .grid-stack-item {
  26. min-width: 8.3333333333%;
  27. position: absolute;
  28. padding: 0;
  29. }
  30. .grid-stack > .grid-stack-item > .grid-stack-item-content {
  31. margin: 0;
  32. position: absolute;
  33. top: 0;
  34. left: 10px;
  35. right: 10px;
  36. bottom: 0;
  37. width: auto;
  38. z-index: 0 !important;
  39. overflow-x: hidden;
  40. overflow-y: auto;
  41. }
  42. .grid-stack > .grid-stack-item > .ui-resizable-handle {
  43. position: absolute;
  44. font-size: 0.1px;
  45. display: block;
  46. -ms-touch-action: none;
  47. touch-action: none;
  48. }
  49. .grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
  50. .grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
  51. display: none;
  52. }
  53. .grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
  54. z-index: 100;
  55. }
  56. .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
  57. .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
  58. .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
  59. box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
  60. opacity: 0.8;
  61. }
  62. .grid-stack > .grid-stack-item > .ui-resizable-se,
  63. .grid-stack > .grid-stack-item > .ui-resizable-sw {
  64. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
  65. background-repeat: no-repeat;
  66. background-position: center;
  67. -webkit-transform: rotate(45deg);
  68. -moz-transform: rotate(45deg);
  69. -ms-transform: rotate(45deg);
  70. -o-transform: rotate(45deg);
  71. transform: rotate(45deg);
  72. }
  73. .grid-stack > .grid-stack-item > .ui-resizable-se {
  74. -webkit-transform: rotate(-45deg);
  75. -moz-transform: rotate(-45deg);
  76. -ms-transform: rotate(-45deg);
  77. -o-transform: rotate(-45deg);
  78. transform: rotate(-45deg);
  79. }
  80. .grid-stack > .grid-stack-item > .ui-resizable-nw {
  81. cursor: nw-resize;
  82. width: 20px;
  83. height: 20px;
  84. left: 10px;
  85. top: 0;
  86. }
  87. .grid-stack > .grid-stack-item > .ui-resizable-n {
  88. cursor: n-resize;
  89. height: 10px;
  90. top: 0;
  91. left: 25px;
  92. right: 25px;
  93. }
  94. .grid-stack > .grid-stack-item > .ui-resizable-ne {
  95. cursor: ne-resize;
  96. width: 20px;
  97. height: 20px;
  98. right: 10px;
  99. top: 0;
  100. }
  101. .grid-stack > .grid-stack-item > .ui-resizable-e {
  102. cursor: e-resize;
  103. width: 10px;
  104. right: 10px;
  105. top: 15px;
  106. bottom: 15px;
  107. }
  108. .grid-stack > .grid-stack-item > .ui-resizable-se {
  109. cursor: se-resize;
  110. width: 20px;
  111. height: 20px;
  112. right: 10px;
  113. bottom: 0;
  114. }
  115. .grid-stack > .grid-stack-item > .ui-resizable-s {
  116. cursor: s-resize;
  117. height: 10px;
  118. left: 25px;
  119. bottom: 0;
  120. right: 25px;
  121. }
  122. .grid-stack > .grid-stack-item > .ui-resizable-sw {
  123. cursor: sw-resize;
  124. width: 20px;
  125. height: 20px;
  126. left: 10px;
  127. bottom: 0;
  128. }
  129. .grid-stack > .grid-stack-item > .ui-resizable-w {
  130. cursor: w-resize;
  131. width: 10px;
  132. left: 10px;
  133. top: 15px;
  134. bottom: 15px;
  135. }
  136. .grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
  137. display: none !important;
  138. }
  139. .grid-stack > .grid-stack-item[data-gs-width='1'] {
  140. width: 8.3333333333%;
  141. }
  142. .grid-stack > .grid-stack-item[data-gs-x='1'] {
  143. left: 8.3333333333%;
  144. }
  145. .grid-stack > .grid-stack-item[data-gs-min-width='1'] {
  146. min-width: 8.3333333333%;
  147. }
  148. .grid-stack > .grid-stack-item[data-gs-max-width='1'] {
  149. max-width: 8.3333333333%;
  150. }
  151. .grid-stack > .grid-stack-item[data-gs-width='2'] {
  152. width: 16.6666666667%;
  153. }
  154. .grid-stack > .grid-stack-item[data-gs-x='2'] {
  155. left: 16.6666666667%;
  156. }
  157. .grid-stack > .grid-stack-item[data-gs-min-width='2'] {
  158. min-width: 16.6666666667%;
  159. }
  160. .grid-stack > .grid-stack-item[data-gs-max-width='2'] {
  161. max-width: 16.6666666667%;
  162. }
  163. .grid-stack > .grid-stack-item[data-gs-width='3'] {
  164. width: 25%;
  165. }
  166. .grid-stack > .grid-stack-item[data-gs-x='3'] {
  167. left: 25%;
  168. }
  169. .grid-stack > .grid-stack-item[data-gs-min-width='3'] {
  170. min-width: 25%;
  171. }
  172. .grid-stack > .grid-stack-item[data-gs-max-width='3'] {
  173. max-width: 25%;
  174. }
  175. .grid-stack > .grid-stack-item[data-gs-width='4'] {
  176. width: 33.3333333333%;
  177. }
  178. .grid-stack > .grid-stack-item[data-gs-x='4'] {
  179. left: 33.3333333333%;
  180. }
  181. .grid-stack > .grid-stack-item[data-gs-min-width='4'] {
  182. min-width: 33.3333333333%;
  183. }
  184. .grid-stack > .grid-stack-item[data-gs-max-width='4'] {
  185. max-width: 33.3333333333%;
  186. }
  187. .grid-stack > .grid-stack-item[data-gs-width='5'] {
  188. width: 41.6666666667%;
  189. }
  190. .grid-stack > .grid-stack-item[data-gs-x='5'] {
  191. left: 41.6666666667%;
  192. }
  193. .grid-stack > .grid-stack-item[data-gs-min-width='5'] {
  194. min-width: 41.6666666667%;
  195. }
  196. .grid-stack > .grid-stack-item[data-gs-max-width='5'] {
  197. max-width: 41.6666666667%;
  198. }
  199. .grid-stack > .grid-stack-item[data-gs-width='6'] {
  200. width: 50%;
  201. }
  202. .grid-stack > .grid-stack-item[data-gs-x='6'] {
  203. left: 50%;
  204. }
  205. .grid-stack > .grid-stack-item[data-gs-min-width='6'] {
  206. min-width: 50%;
  207. }
  208. .grid-stack > .grid-stack-item[data-gs-max-width='6'] {
  209. max-width: 50%;
  210. }
  211. .grid-stack > .grid-stack-item[data-gs-width='7'] {
  212. width: 58.3333333333%;
  213. }
  214. .grid-stack > .grid-stack-item[data-gs-x='7'] {
  215. left: 58.3333333333%;
  216. }
  217. .grid-stack > .grid-stack-item[data-gs-min-width='7'] {
  218. min-width: 58.3333333333%;
  219. }
  220. .grid-stack > .grid-stack-item[data-gs-max-width='7'] {
  221. max-width: 58.3333333333%;
  222. }
  223. .grid-stack > .grid-stack-item[data-gs-width='8'] {
  224. width: 66.6666666667%;
  225. }
  226. .grid-stack > .grid-stack-item[data-gs-x='8'] {
  227. left: 66.6666666667%;
  228. }
  229. .grid-stack > .grid-stack-item[data-gs-min-width='8'] {
  230. min-width: 66.6666666667%;
  231. }
  232. .grid-stack > .grid-stack-item[data-gs-max-width='8'] {
  233. max-width: 66.6666666667%;
  234. }
  235. .grid-stack > .grid-stack-item[data-gs-width='9'] {
  236. width: 75%;
  237. }
  238. .grid-stack > .grid-stack-item[data-gs-x='9'] {
  239. left: 75%;
  240. }
  241. .grid-stack > .grid-stack-item[data-gs-min-width='9'] {
  242. min-width: 75%;
  243. }
  244. .grid-stack > .grid-stack-item[data-gs-max-width='9'] {
  245. max-width: 75%;
  246. }
  247. .grid-stack > .grid-stack-item[data-gs-width='10'] {
  248. width: 83.3333333333%;
  249. }
  250. .grid-stack > .grid-stack-item[data-gs-x='10'] {
  251. left: 83.3333333333%;
  252. }
  253. .grid-stack > .grid-stack-item[data-gs-min-width='10'] {
  254. min-width: 83.3333333333%;
  255. }
  256. .grid-stack > .grid-stack-item[data-gs-max-width='10'] {
  257. max-width: 83.3333333333%;
  258. }
  259. .grid-stack > .grid-stack-item[data-gs-width='11'] {
  260. width: 91.6666666667%;
  261. }
  262. .grid-stack > .grid-stack-item[data-gs-x='11'] {
  263. left: 91.6666666667%;
  264. }
  265. .grid-stack > .grid-stack-item[data-gs-min-width='11'] {
  266. min-width: 91.6666666667%;
  267. }
  268. .grid-stack > .grid-stack-item[data-gs-max-width='11'] {
  269. max-width: 91.6666666667%;
  270. }
  271. .grid-stack > .grid-stack-item[data-gs-width='12'] {
  272. width: 100%;
  273. }
  274. .grid-stack > .grid-stack-item[data-gs-x='12'] {
  275. left: 100%;
  276. }
  277. .grid-stack > .grid-stack-item[data-gs-min-width='12'] {
  278. min-width: 100%;
  279. }
  280. .grid-stack > .grid-stack-item[data-gs-max-width='12'] {
  281. max-width: 100%;
  282. }
  283. .grid-stack.grid-stack-animate,
  284. .grid-stack.grid-stack-animate .grid-stack-item {
  285. -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  286. -moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  287. -ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  288. -o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  289. transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  290. }
  291. .grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
  292. .grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
  293. .grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
  294. -webkit-transition: left 0s, top 0s, height 0s, width 0s;
  295. -moz-transition: left 0s, top 0s, height 0s, width 0s;
  296. -ms-transition: left 0s, top 0s, height 0s, width 0s;
  297. -o-transition: left 0s, top 0s, height 0s, width 0s;
  298. transition: left 0s, top 0s, height 0s, width 0s;
  299. }
  300. .grid-stack.grid-stack-one-column-mode {
  301. height: auto !important;
  302. }
  303. .grid-stack.grid-stack-one-column-mode > .grid-stack-item {
  304. position: relative !important;
  305. width: auto !important;
  306. left: 0 !important;
  307. top: auto !important;
  308. margin-bottom: 20px;
  309. max-width: none !important;
  310. }
  311. .grid-stack.grid-stack-one-column-mode > .grid-stack-item > .ui-resizable-handle {
  312. display: none;
  313. }