1 | import { createGlobalStyle } from 'styled-components';
|
2 |
|
3 | const ReactGridLayoutStyle = '';
|
4 | const ReactDragableStyle = '';
|
5 |
|
6 | export const ExampleStyle = createGlobalStyle`
|
7 | body {
|
8 | padding: 20px;
|
9 | }
|
10 | #content {
|
11 | width: 100%;
|
12 | }
|
13 | .react-grid-layout {
|
14 | background: #eee;
|
15 | }
|
16 | .layoutJSON {
|
17 | background: #ddd;
|
18 | border: 1px solid black;
|
19 | margin-top: 10px;
|
20 | padding: 10px;
|
21 | }
|
22 | .columns {
|
23 | -moz-columns: 120px;
|
24 | -webkit-columns: 120px;
|
25 | columns: 120px;
|
26 | }
|
27 | .react-grid-item {
|
28 | box-sizing: border-box;
|
29 | }
|
30 | .react-grid-item:not(.react-grid-placeholder) {
|
31 | background: #ccc;
|
32 | border: 1px solid black;
|
33 | }
|
34 | .react-grid-item.resizing {
|
35 | opacity: 0.9;
|
36 | }
|
37 | .react-grid-item.static {
|
38 | background: #cce;
|
39 | }
|
40 | .react-grid-item .text {
|
41 | font-size: 24px;
|
42 | text-align: center;
|
43 | position: absolute;
|
44 | top: 0;
|
45 | bottom: 0;
|
46 | left: 0;
|
47 | right: 0;
|
48 | margin: auto;
|
49 | height: 24px;
|
50 | }
|
51 | .react-grid-item .minMax {
|
52 | font-size: 12px;
|
53 | }
|
54 | .react-grid-item .add {
|
55 | cursor: pointer;
|
56 | }
|
57 | .react-grid-dragHandleExample {
|
58 | cursor: move; /* fallback if grab cursor is unsupported */
|
59 | cursor: grab;
|
60 | cursor: -moz-grab;
|
61 | cursor: -webkit-grab;
|
62 | }
|
63 |
|
64 | .toolbox {
|
65 | background-color: #dfd;
|
66 | width: 100%;
|
67 | height: 120px;
|
68 | overflow: scroll;
|
69 | }
|
70 |
|
71 | .hide-button {
|
72 | cursor: pointer;
|
73 | position: absolute;
|
74 | font-size: 20px;
|
75 | top: 0px;
|
76 | right: 5px;
|
77 | }
|
78 |
|
79 | .toolbox__title {
|
80 | font-size: 24px;
|
81 | margin-bottom: 5px;
|
82 | }
|
83 | .toolbox__items {
|
84 | display: block;
|
85 | }
|
86 | .toolbox__items__item {
|
87 | display: inline-block;
|
88 | text-align: center;
|
89 | line-height: 40px;
|
90 | cursor: pointer;
|
91 | width: 40px;
|
92 | height: 40px;
|
93 | padding: 10px;
|
94 | margin: 5px;
|
95 | border: 1px solid black;
|
96 | background-color: #ddd;
|
97 | }
|
98 | .droppable-element {
|
99 | width: 150px;
|
100 | text-align: center;
|
101 | background: #fdd;
|
102 | border: 1px solid black;
|
103 | margin: 10px 0;
|
104 | padding: 10px;
|
105 | }
|
106 |
|
107 | .react-grid-layout {
|
108 | position: relative;
|
109 | transition: height 200ms ease;
|
110 | }
|
111 | .react-grid-item {
|
112 | transition: all 200ms ease;
|
113 | transition-property: left, top;
|
114 | }
|
115 | .react-grid-item.cssTransforms {
|
116 | transition-property: transform;
|
117 | }
|
118 | .react-grid-item.resizing {
|
119 | z-index: 1;
|
120 | will-change: width, height;
|
121 | }
|
122 |
|
123 | .react-grid-item.react-draggable-dragging {
|
124 | transition: none;
|
125 | z-index: 3;
|
126 | will-change: transform;
|
127 | }
|
128 |
|
129 | .react-grid-item.react-grid-placeholder {
|
130 | background: red;
|
131 | opacity: 0.2;
|
132 | transition-duration: 100ms;
|
133 | z-index: 2;
|
134 | -webkit-user-select: none;
|
135 | -moz-user-select: none;
|
136 | -ms-user-select: none;
|
137 | -o-user-select: none;
|
138 | user-select: none;
|
139 | }
|
140 |
|
141 | .react-grid-item > .react-resizable-handle {
|
142 | position: absolute;
|
143 | width: 20px;
|
144 | height: 20px;
|
145 | bottom: 0;
|
146 | right: 0;
|
147 | background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=");
|
148 | background-position: bottom right;
|
149 | padding: 0 3px 3px 0;
|
150 | background-repeat: no-repeat;
|
151 | background-origin: content-box;
|
152 | box-sizing: border-box;
|
153 | cursor: se-resize;
|
154 | }
|
155 |
|
156 | `;
|