From c7b062b5dca44fe2a1f1c74c8a24cce7e836962a Mon Sep 17 00:00:00 2001
From: Pavel Reznikov <pashka.reznikov@gmail.com>
Date: Thu, 5 Mar 2015 23:05:52 -0800
Subject: [PATCH] update gridstack.css

---
 gridstack.css | 495 +++++++++++++++++++++++++++++++-------------------
 1 file changed, 304 insertions(+), 191 deletions(-)

diff --git a/gridstack.css b/gridstack.css
index 9cf660e..e0f96d9 100644
--- a/gridstack.css
+++ b/gridstack.css
@@ -1,205 +1,318 @@
-.grid-stack {
-    position: relative;
-}
-
-.grid-stack-item {
-    position: absolute;
-    padding: 0;
-}
-
-.grid-stack-item > .grid-stack-item-content,
-.grid-stack-item > .placeholder-content {
-    margin: 0;
-    position: absolute;
-    top: 0;
-    left: 10px;
-    right: 10px;
-    bottom: 0;
-    width: auto;
-    z-index: 0 !important;
-    overflow: auto;
-}
-
-.grid-stack-placeholder > .placeholder-content {
-    border: 1px dashed lightgray;
-}
-
-.grid-stack-item.ui-draggable-dragging,
-.grid-stack-item.ui-resizable-resizing {
-    z-index: 100;
-}
-
-.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
-.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-item > .ui-resizable-handle {
-}
-
 :root .grid-stack-item > .ui-resizable-handle {
-    filter: none;
+  filter: none;
 }
 
-.grid-stack-item > .ui-resizable-se {
-    text-align: right;
-    color: gray;
-
-    padding: 2px 3px 0 0;
-    margin: 0;
-
-    display: inline-block;
-    font: normal normal normal 10px/1 FontAwesome;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
+.grid-stack {
+  position: relative;
+}
+.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;
+  overflow: auto;
+}
+.grid-stack > .grid-stack-item {
+  min-width: 8.33333333%;
+  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: 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 {
+  text-align: right;
+  color: gray;
+  padding: 2px 3px 0 0;
+  margin: 0;
+  font: normal normal normal 10px/1 FontAwesome;
+  font-size: inherit;
+  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: "\f065";
+}
+.grid-stack > .grid-stack-item > .ui-resizable-se {
+  display: inline-block;
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.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[data-gs-width='1'] {
+  width: 8.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='1'] {
+  left: 8.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='1'] {
+  min-width: 8.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='1'] {
+  max-width: 8.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='2'] {
+  width: 16.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='2'] {
+  left: 16.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='2'] {
+  min-width: 16.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='2'] {
+  max-width: 16.66666667%;
+}
+.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.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='4'] {
+  left: 33.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='4'] {
+  min-width: 33.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='4'] {
+  max-width: 33.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='5'] {
+  width: 41.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='5'] {
+  left: 41.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='5'] {
+  min-width: 41.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='5'] {
+  max-width: 41.66666667%;
+}
+.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.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='7'] {
+  left: 58.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='7'] {
+  min-width: 58.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='7'] {
+  max-width: 58.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='8'] {
+  width: 66.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='8'] {
+  left: 66.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='8'] {
+  min-width: 66.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='8'] {
+  max-width: 66.66666667%;
+}
+.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.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='10'] {
+  left: 83.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='10'] {
+  min-width: 83.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='10'] {
+  max-width: 83.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='11'] {
+  width: 91.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='11'] {
+  left: 91.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='11'] {
+  min-width: 91.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='11'] {
+  max-width: 91.66666667%;
+}
+.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;
 }
 
 /** Uncomment this to show bottom-left resize handle **/
 /*
-.grid-stack-item > .ui-resizable-sw {
-    text-align: right;
-    color: gray;
-
-    padding: 2px 3px 0 0;
-    margin: 0;
-
+.grid-stack > .grid-stack-item > .ui-resizable-sw {
     display: inline-block;
-    font: normal normal normal 10px/1 FontAwesome;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-.grid-stack-item .ui-resizable-sw::before {
-    content: "\f065";
+    @include vendor(transform, rotate(180deg));
 }
 */
-
-.grid-stack-item > .ui-resizable-se::before {
-    content: "\f065";
-}
-
-.ui-resizable-handle {
-    position: absolute;
-    font-size: 0.1px;
-    display: block;
-    -ms-touch-action: none;
-    touch-action: none;
-}
-
-.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
-.grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
-    display: none;
-}
-
-.grid-stack-item > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
-.grid-stack-item > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: 0; left: 25px; right: 25px; }
-.grid-stack-item > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
-.grid-stack-item > .ui-resizable-e  { cursor: e-resize;  width: 10px; right: 10px; top: 15px; bottom: 15px; }
-.grid-stack-item > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; right: 10px; bottom: 0; }
-.grid-stack-item > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: 0; right: 25px; }
-.grid-stack-item > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: 10px; bottom: 0; }
-.grid-stack-item > .ui-resizable-w  { cursor: w-resize;  width: 10px; left: 10px; top: 15px; bottom: 15px; }
-
-.grid-stack-item { min-width: 8.33333333% }
-
-.grid-stack-item[data-gs-width="12"] { width: 100% }
-.grid-stack-item[data-gs-width="11"] { width: 91.66666667% }
-.grid-stack-item[data-gs-width="10"] { width: 83.33333333% }
-.grid-stack-item[data-gs-width="9"]  { width: 75% }
-.grid-stack-item[data-gs-width="8"]  { width: 66.66666667% }
-.grid-stack-item[data-gs-width="7"]  { width: 58.33333333% }
-.grid-stack-item[data-gs-width="6"]  { width: 50% }
-.grid-stack-item[data-gs-width="5"]  { width: 41.66666667% }
-.grid-stack-item[data-gs-width="4"]  { width: 33.33333333% }
-.grid-stack-item[data-gs-width="3"]  { width: 25% }
-.grid-stack-item[data-gs-width="2"]  { width: 16.66666667% }
-.grid-stack-item[data-gs-width="1"]  { width: 8.33333333% }
-
-.grid-stack-item[data-gs-min-width="12"] { min-width: 100% }
-.grid-stack-item[data-gs-min-width="11"] { min-width: 91.66666667% }
-.grid-stack-item[data-gs-min-width="10"] { min-width: 83.33333333% }
-.grid-stack-item[data-gs-min-width="9"]  { min-width: 75% }
-.grid-stack-item[data-gs-min-width="8"]  { min-width: 66.66666667% }
-.grid-stack-item[data-gs-min-width="7"]  { min-width: 58.33333333% }
-.grid-stack-item[data-gs-min-width="6"]  { min-width: 50% }
-.grid-stack-item[data-gs-min-width="5"]  { min-width: 41.66666667% }
-.grid-stack-item[data-gs-min-width="4"]  { min-width: 33.33333333% }
-.grid-stack-item[data-gs-min-width="3"]  { min-width: 25% }
-.grid-stack-item[data-gs-min-width="2"]  { min-width: 16.66666667% }
-.grid-stack-item[data-gs-min-width="1"]  { min-width: 8.33333333% }
-
-.grid-stack-item[data-gs-max-width="12"] { max-width: 100% }
-.grid-stack-item[data-gs-max-width="11"] { max-width: 91.66666667% }
-.grid-stack-item[data-gs-max-width="10"] { max-width: 83.33333333% }
-.grid-stack-item[data-gs-max-width="9"]  { max-width: 75% }
-.grid-stack-item[data-gs-max-width="8"]  { max-width: 66.66666667% }
-.grid-stack-item[data-gs-max-width="7"]  { max-width: 58.33333333% }
-.grid-stack-item[data-gs-max-width="6"]  { max-width: 50% }
-.grid-stack-item[data-gs-max-width="5"]  { max-width: 41.66666667% }
-.grid-stack-item[data-gs-max-width="4"]  { max-width: 33.33333333% }
-.grid-stack-item[data-gs-max-width="3"]  { max-width: 25% }
-.grid-stack-item[data-gs-max-width="2"]  { max-width: 16.66666667% }
-.grid-stack-item[data-gs-max-width="1"]  { max-width: 8.33333333% }
-
-.grid-stack-item[data-gs-x="12"] { left: 100% }
-.grid-stack-item[data-gs-x="11"] { left: 91.66666667% }
-.grid-stack-item[data-gs-x="10"] { left: 83.33333333% }
-.grid-stack-item[data-gs-x="9"]  { left: 75% }
-.grid-stack-item[data-gs-x="8"]  { left: 66.66666667% }
-.grid-stack-item[data-gs-x="7"]  { left: 58.33333333% }
-.grid-stack-item[data-gs-x="6"]  { left: 50% }
-.grid-stack-item[data-gs-x="5"]  { left: 41.66666667% }
-.grid-stack-item[data-gs-x="4"]  { left: 33.33333333% }
-.grid-stack-item[data-gs-x="3"]  { left: 25% }
-.grid-stack-item[data-gs-x="2"]  { left: 16.66666667% }
-.grid-stack-item[data-gs-x="1"]  { left: 8.33333333% }
-
 @media (max-width: 768px) {
-    .grid-stack-item {
-        position: relative !important;
-        width: auto !important;
-        left: 0 !important;
-        top: auto !important;
-        margin-bottom: 20px;
-    }
+  .grid-stack-item {
+    position: relative !important;
+    width: auto !important;
+    left: 0 !important;
+    top: auto !important;
+    margin-bottom: 20px;
+  }
+  .grid-stack-item .ui-resizable-handle {
+    display: none;
+  }
 
-    .grid-stack-item .ui-resizable-handle {
-        display: none;
-    }
-
-    .grid-stack {
-        height: auto !important;
-    }
-}
-
-.grid-stack.grid-stack-animate, .grid-stack.grid-stack-animate .grid-stack-item {
-    -webkit-transition: left .3s, top .3s, height .3s, width .3s;
-    -moz-transition: left .3s, top .3s, height .3s, width .3s;
-    -o-transition: left .3s, top .3s, height .3s, width .3s;
-    -ms-transition: left .3s, top .3s, height .3s, width .3s;
-    transition: left .3s, top .3s, height .3s, width .3s;
-}
-/*Don't animate the placeholder or when dragging/resizing*/
-.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;
-    -o-transition: left .0s, top .0s, height .0s, width .0s;
-    transition:  left .0s, top .0s, height .0s, width .0s;
+  .grid-stack {
+    height: auto !important;
+  }
 }