Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 14a9dba

Browse files
trooleetroolee
committed
compile source CSS from SCSS
1 parent a780a58 commit 14a9dba

File tree

1 file changed

+318
-0
lines changed

1 file changed

+318
-0
lines changed

‎src/gridstack.css

Lines changed: 318 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,318 @@
1+
:root .grid-stack-item > .ui-resizable-handle {
2+
filter: none;
3+
}
4+
5+
.grid-stack {
6+
position: relative;
7+
}
8+
.grid-stack .grid-stack-placeholder > .placeholder-content {
9+
border: 1px dashed lightgray;
10+
margin: 0;
11+
position: absolute;
12+
top: 0;
13+
left: 10px;
14+
right: 10px;
15+
bottom: 0;
16+
width: auto;
17+
z-index: 0 !important;
18+
}
19+
.grid-stack > .grid-stack-item {
20+
min-width: 8.33333333%;
21+
position: absolute;
22+
padding: 0;
23+
}
24+
.grid-stack > .grid-stack-item > .grid-stack-item-content {
25+
margin: 0;
26+
position: absolute;
27+
top: 0;
28+
left: 10px;
29+
right: 10px;
30+
bottom: 0;
31+
width: auto;
32+
z-index: 0 !important;
33+
overflow-x: hidden;
34+
overflow-y: auto;
35+
}
36+
.grid-stack > .grid-stack-item > .ui-resizable-handle {
37+
position: absolute;
38+
font-size: 0.1px;
39+
display: block;
40+
-ms-touch-action: none;
41+
touch-action: none;
42+
}
43+
.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
44+
display: none;
45+
}
46+
.grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
47+
z-index: 100;
48+
}
49+
.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
50+
.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
51+
.grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
52+
box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
53+
opacity: 0.8;
54+
}
55+
.grid-stack > .grid-stack-item > .ui-resizable-se,
56+
.grid-stack > .grid-stack-item > .ui-resizable-sw {
57+
text-align: right;
58+
color: gray;
59+
padding: 2px 3px 0 0;
60+
margin: 0;
61+
font: normal normal normal 10px/1 FontAwesome;
62+
font-size: inherit;
63+
text-rendering: auto;
64+
-webkit-font-smoothing: antialiased;
65+
-moz-osx-font-smoothing: grayscale;
66+
}
67+
.grid-stack > .grid-stack-item > .ui-resizable-se::before,
68+
.grid-stack > .grid-stack-item > .ui-resizable-sw::before {
69+
content: "\f065";
70+
}
71+
.grid-stack > .grid-stack-item > .ui-resizable-se {
72+
display: inline-block;
73+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
74+
-webkit-transform: rotate(90deg);
75+
-moz-transform: rotate(90deg);
76+
-ms-transform: rotate(90deg);
77+
-o-transform: rotate(90deg);
78+
transform: rotate(90deg);
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[data-gs-width='1'] {
137+
width: 8.33333333%;
138+
}
139+
.grid-stack > .grid-stack-item[data-gs-x='1'] {
140+
left: 8.33333333%;
141+
}
142+
.grid-stack > .grid-stack-item[data-gs-min-width='1'] {
143+
min-width: 8.33333333%;
144+
}
145+
.grid-stack > .grid-stack-item[data-gs-max-width='1'] {
146+
max-width: 8.33333333%;
147+
}
148+
.grid-stack > .grid-stack-item[data-gs-width='2'] {
149+
width: 16.66666667%;
150+
}
151+
.grid-stack > .grid-stack-item[data-gs-x='2'] {
152+
left: 16.66666667%;
153+
}
154+
.grid-stack > .grid-stack-item[data-gs-min-width='2'] {
155+
min-width: 16.66666667%;
156+
}
157+
.grid-stack > .grid-stack-item[data-gs-max-width='2'] {
158+
max-width: 16.66666667%;
159+
}
160+
.grid-stack > .grid-stack-item[data-gs-width='3'] {
161+
width: 25%;
162+
}
163+
.grid-stack > .grid-stack-item[data-gs-x='3'] {
164+
left: 25%;
165+
}
166+
.grid-stack > .grid-stack-item[data-gs-min-width='3'] {
167+
min-width: 25%;
168+
}
169+
.grid-stack > .grid-stack-item[data-gs-max-width='3'] {
170+
max-width: 25%;
171+
}
172+
.grid-stack > .grid-stack-item[data-gs-width='4'] {
173+
width: 33.33333333%;
174+
}
175+
.grid-stack > .grid-stack-item[data-gs-x='4'] {
176+
left: 33.33333333%;
177+
}
178+
.grid-stack > .grid-stack-item[data-gs-min-width='4'] {
179+
min-width: 33.33333333%;
180+
}
181+
.grid-stack > .grid-stack-item[data-gs-max-width='4'] {
182+
max-width: 33.33333333%;
183+
}
184+
.grid-stack > .grid-stack-item[data-gs-width='5'] {
185+
width: 41.66666667%;
186+
}
187+
.grid-stack > .grid-stack-item[data-gs-x='5'] {
188+
left: 41.66666667%;
189+
}
190+
.grid-stack > .grid-stack-item[data-gs-min-width='5'] {
191+
min-width: 41.66666667%;
192+
}
193+
.grid-stack > .grid-stack-item[data-gs-max-width='5'] {
194+
max-width: 41.66666667%;
195+
}
196+
.grid-stack > .grid-stack-item[data-gs-width='6'] {
197+
width: 50%;
198+
}
199+
.grid-stack > .grid-stack-item[data-gs-x='6'] {
200+
left: 50%;
201+
}
202+
.grid-stack > .grid-stack-item[data-gs-min-width='6'] {
203+
min-width: 50%;
204+
}
205+
.grid-stack > .grid-stack-item[data-gs-max-width='6'] {
206+
max-width: 50%;
207+
}
208+
.grid-stack > .grid-stack-item[data-gs-width='7'] {
209+
width: 58.33333333%;
210+
}
211+
.grid-stack > .grid-stack-item[data-gs-x='7'] {
212+
left: 58.33333333%;
213+
}
214+
.grid-stack > .grid-stack-item[data-gs-min-width='7'] {
215+
min-width: 58.33333333%;
216+
}
217+
.grid-stack > .grid-stack-item[data-gs-max-width='7'] {
218+
max-width: 58.33333333%;
219+
}
220+
.grid-stack > .grid-stack-item[data-gs-width='8'] {
221+
width: 66.66666667%;
222+
}
223+
.grid-stack > .grid-stack-item[data-gs-x='8'] {
224+
left: 66.66666667%;
225+
}
226+
.grid-stack > .grid-stack-item[data-gs-min-width='8'] {
227+
min-width: 66.66666667%;
228+
}
229+
.grid-stack > .grid-stack-item[data-gs-max-width='8'] {
230+
max-width: 66.66666667%;
231+
}
232+
.grid-stack > .grid-stack-item[data-gs-width='9'] {
233+
width: 75%;
234+
}
235+
.grid-stack > .grid-stack-item[data-gs-x='9'] {
236+
left: 75%;
237+
}
238+
.grid-stack > .grid-stack-item[data-gs-min-width='9'] {
239+
min-width: 75%;
240+
}
241+
.grid-stack > .grid-stack-item[data-gs-max-width='9'] {
242+
max-width: 75%;
243+
}
244+
.grid-stack > .grid-stack-item[data-gs-width='10'] {
245+
width: 83.33333333%;
246+
}
247+
.grid-stack > .grid-stack-item[data-gs-x='10'] {
248+
left: 83.33333333%;
249+
}
250+
.grid-stack > .grid-stack-item[data-gs-min-width='10'] {
251+
min-width: 83.33333333%;
252+
}
253+
.grid-stack > .grid-stack-item[data-gs-max-width='10'] {
254+
max-width: 83.33333333%;
255+
}
256+
.grid-stack > .grid-stack-item[data-gs-width='11'] {
257+
width: 91.66666667%;
258+
}
259+
.grid-stack > .grid-stack-item[data-gs-x='11'] {
260+
left: 91.66666667%;
261+
}
262+
.grid-stack > .grid-stack-item[data-gs-min-width='11'] {
263+
min-width: 91.66666667%;
264+
}
265+
.grid-stack > .grid-stack-item[data-gs-max-width='11'] {
266+
max-width: 91.66666667%;
267+
}
268+
.grid-stack > .grid-stack-item[data-gs-width='12'] {
269+
width: 100%;
270+
}
271+
.grid-stack > .grid-stack-item[data-gs-x='12'] {
272+
left: 100%;
273+
}
274+
.grid-stack > .grid-stack-item[data-gs-min-width='12'] {
275+
min-width: 100%;
276+
}
277+
.grid-stack > .grid-stack-item[data-gs-max-width='12'] {
278+
max-width: 100%;
279+
}
280+
.grid-stack.grid-stack-animate, .grid-stack.grid-stack-animate .grid-stack-item {
281+
-webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
282+
-moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
283+
-ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
284+
-o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
285+
transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
286+
}
287+
.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 {
288+
-webkit-transition: left 0s, top 0s, height 0s, width 0s;
289+
-moz-transition: left 0s, top 0s, height 0s, width 0s;
290+
-ms-transition: left 0s, top 0s, height 0s, width 0s;
291+
-o-transition: left 0s, top 0s, height 0s, width 0s;
292+
transition: left 0s, top 0s, height 0s, width 0s;
293+
}
294+
295+
/** Uncomment this to show bottom-left resize handle **/
296+
/*
297+
.grid-stack > .grid-stack-item > .ui-resizable-sw {
298+
display: inline-block;
299+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
300+
@include vendor(transform, rotate(180deg));
301+
}
302+
*/
303+
@media (max-width: 768px) {
304+
.grid-stack-item {
305+
position: relative !important;
306+
width: auto !important;
307+
left: 0 !important;
308+
top: auto !important;
309+
margin-bottom: 20px;
310+
}
311+
.grid-stack-item .ui-resizable-handle {
312+
display: none;
313+
}
314+
315+
.grid-stack {
316+
height: auto !important;
317+
}
318+
}

0 commit comments

Comments
 (0)