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

Merge pull request #85 from ascendantofrain/patch-2

Browse source 
add SASS file
This commit is contained in:
Pavel Reznikov 2015-03-04 09:02:36 -08:00
commit 5d7609b4d2
1 changed files with 140 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/styles.scss Normal file
View file

@ -0,0 +1,140 @@
/**
* Create vendor-prefixed CSS in one go, e.g.
*
`@include vendor(border-radius, 4px);`
*
*/
@mixin vendor($property, $value...){
-webkit-#{$property}:$value;
-moz-#{$property}:$value;
-ms-#{$property}:$value;
-o-#{$property}:$value;
#{$property}:$value;
}
:root .grid-stack-item > .ui-resizable-handle { filter: none; }
.grid-stack {
position: relative;
.grid-stack-item {
min-width: 8.33333333%;
position: absolute;
padding: 0;
> .grid-stack-item-content,
> .placeholder-content {
margin: 0;
position: absolute;
top: 0;
left: 10px;
right: 10px;
bottom: 0;
width: auto;
z-index: 0 !important;
overflow: auto;
}
> .ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
&.ui-resizable-disabled > .ui-resizable-handle,
&.ui-resizable-autohide > .ui-resizable-handle { display: none; }
&.ui-draggable-dragging,
&.ui-resizable-resizing {
z-index: 100;
> .grid-stack-item-content,
> .grid-stack-item-content {
box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
opacity: 0.8;
}
}
> .ui-resizable-se,
> .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;
&::before { content: "\f065"; }
}
> .ui-resizable-se {
display: inline-block;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
@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-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; }
/**
* 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; }
&[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
&[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
}
}
&.grid-stack-animate,
&.grid-stack-animate .grid-stack-item {
@include vendor(transition, 'left .3s, top .3s, height .3s, width .3s');
}
/*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');
}
}
@media (max-width: 768px) {
.grid-stack-item {
position: relative !important;
width: auto !important;
left: 0 !important;
top: auto !important;
margin-bottom: 20px;
.ui-resizable-handle { display: none; }
}
.grid-stack { height: auto !important; }
}