build css from scss

This commit is contained in:
Pavel Reznikov 2015-03-05 23:06:20 -08:00
commit 8cb3098d00
3 changed files with 338 additions and 221 deletions

View file

@ -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;
}
}