deblan/gridstack.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

build css from scss

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

74
src/gridstack.scss
View file

@ -1,9 +1,8 @@
/**
* Create vendor-prefixed CSS in one go, e.g.
*
`@include vendor(border-radius, 4px);`
*
*/
$gridstack-columns: 12;
$horizontal_padding: 20px;
$vertical_padding: 20px;
$animation_speed: .3s;
@mixin vendor($property, $value...){
-webkit-#{$property}:$value;
-moz-#{$property}:$value;
@ -16,25 +15,37 @@
.grid-stack {
position: relative;
.grid-stack-item {
min-width: 8.33333333%;
.grid-stack-placeholder > .placeholder-content {
border: 1px dashed lightgray;
margin: 0;
position: absolute;
top: 0;
left: $horizontal_padding / 2;
right: $horizontal_padding / 2;
bottom: 0;
width: auto;
z-index: 0 !important;
overflow: auto;
}
> .grid-stack-item {
min-width: 100% / $gridstack-columns;
position: absolute;
padding: 0;
> .grid-stack-item-content,
> .placeholder-content {
> .grid-stack-item-content {
margin: 0;
position: absolute;
top: 0;
left: 10px;
right: 10px;
left: $horizontal_padding / 2;
right: $horizontal_padding / 2;
bottom: 0;
width: auto;
z-index: 0 !important;
overflow: auto;
}
> .ui-resizable-handle {
position: absolute;
font-size: 0.1px;
@ -80,29 +91,15 @@
@include vendor(transform, rotate(90deg));
}
/** Uncomment this to show bottom-left resize handle **/
/*
> .ui-resizable-sw {
display: inline-block;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
@include vendor(transform, rotate(180deg));
}
*/
> .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
> .ui-resizable-n { cursor: n-resize; height: 10px; top: 0; left: 25px; right: 25px; }
> .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
> .ui-resizable-e { cursor: e-resize; width: 10px; right: 10px; top: 15px; bottom: 15px; }
> .ui-resizable-e { cursor: e-resize; width: 10px; right: $horizontal_padding / 2; top: 15px; bottom: 15px; }
> .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; right: 10px; bottom: 0; }
> .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: 0; right: 25px; }
> .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: 10px; bottom: 0; }
> .ui-resizable-w { cursor: w-resize; width: 10px; left: 10px; top: 15px; bottom: 15px; }
> .ui-resizable-w { cursor: w-resize; width: 10px; left: $horizontal_padding / 2; top: 15px; bottom: 15px; }
/**
* Update grid by changing $gridstack-columns only
*/
$gridstack-columns: 12;
@for $i from 1 through $gridstack-columns {
&[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
&[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
@ -113,17 +110,24 @@
&.grid-stack-animate,
&.grid-stack-animate .grid-stack-item {
@include vendor(transition, 'left .3s, top .3s, height .3s, width .3s');
@include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
}
/*Don't animate the placeholder or when dragging/resizing*/
&.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
&.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
&.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
@include vendor(transition, 'left .0s, top .0s, height .0s, width .0s');
@include vendor(transition, left .0s, top .0s, height .0s, width .0s);
}
}
/** Uncomment this to show bottom-left resize handle **/
/*
.grid-stack > .grid-stack-item > .ui-resizable-sw {
display: inline-block;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
@include vendor(transform, rotate(180deg));
}
*/
@media (max-width: 768px) {
.grid-stack-item {
@ -131,7 +135,7 @@
width: auto !important;
left: 0 !important;
top: auto !important;
margin-bottom: 20px;
margin-bottom: $vertical_padding;
.ui-resizable-handle { display: none; }
}