Merge pull request #5146 from eileenmcnaughton/CRM-15955
[civicrm-core.git] / css / crm.designer.css
1 .crm-profile-selector-preview-pane {
2 width: 75%;
3 min-width: 500px;
4 height: 20em;
5 border: 1px solid black;
6 padding: 4px;
7 }
8
9 .crm-container .crm-profile-selector-preview .icon {
10 float: none;
11 }
12
13 .crm-designer-toolbar {
14 width: 290px;
15 position: absolute;
16 top: 0;
17 right: 0;
18 }
19
20 .crm-designer-toolbar hr,
21 .crm-designer-palette-search {
22 margin: 0.5em 0;
23 }
24
25 .crm-designer-palette-search input {
26 max-width: 75%;
27 }
28
29 .crm-designer-toolbar .ui-resizable-w {
30 border-left: 4px dotted #BFBFBF;
31 cursor: ew-resize;
32 height: 50px;
33 top: 45%;
34 }
35
36 .crm-designer-toolbar .ui-resizable-w:hover {
37 border-left: 4px dotted #6B6B6B;
38 }
39
40 .crm-designer-palette {
41 height: 20em;
42 }
43
44 .crm-designer-palette-section > a {
45 font-weight: bold;
46 }
47
48 .crm-designer-palette .crm-designer-palette-field,
49 .crm-designer-palette .crm-designer-palette-field.disabled:hover {
50 padding: 1px;
51 border: 1px dashed transparent;
52 background-color: transparent;
53 margin-right: 0.5em;
54 }
55
56 .crm-designer-palette .crm-designer-palette-field a {
57 cursor: move;
58 }
59
60 .crm-designer-palette .crm-designer-palette-field.disabled a {
61 cursor: default;
62 }
63
64 .crm-designer-palette .crm-designer-palette-field:hover,
65 .crm-designer-fields-region .crm-designer-row:hover,
66 .crm-designer-open .crm-designer-row,
67 .crm-designer-row-placeholder {
68 border: 1px dashed gray;
69 cursor: move;
70 background-color: #E9E9F5;
71 }
72
73 .crm-container .crm-designer-palette .crm-designer-palette-tree a {
74 color: #222;
75 font-style: normal;
76 }
77
78 .crm-container .crm-designer-palette .disabled a,
79 .crm-designer-palette .crm-designer-palette-tree .disabled a.jstree-search {
80 color: #999;
81 }
82
83 .crm-designer-palette .jstree-leaf ins {
84 width: 6px;
85 }
86
87 /* Cancel hovering affect from JSTree theme -- we already do this! */
88 .crm-designer-palette .crm-designer-palette-tree .jstree-hovered {
89 background: transparent;
90 border: 1px transparent;
91 padding: 1px 2px 0 2px;
92 }
93
94 .crm-designer-canvas {
95 padding-right: 1em;
96 margin-right: 300px;
97 }
98
99 .crm-designer-buttonset-region {
100 text-align: center;
101 margin: auto;
102 }
103
104 .crm-designer-field-binding {
105 border: 1px inset black;
106 padding: 0.4em;
107 background: #ccc;
108 }
109
110 .crm-designer-fields {
111 min-width:100px;
112 /* to allow dropping in big whitespace, coordinate with min-height of dialog */
113 min-height:500px;
114 }
115
116 .crm-designer-duplicate .crm-designer-row {
117 background: #fbb;
118 }
119
120 .crm-designer-duplicate .field-location_type_id,
121 .crm-designer-duplicate .field-phone_type_id {
122 color: #f00;
123 }
124
125 .crm-designer-row .crm-designer-buttons {
126 right: 5px;
127 top: 5px;
128 position: absolute;
129 height: 20px;
130 }
131
132 .crm-designer-fields-region .crm-designer-buttons {
133 display: none;
134 }
135
136 .crm-designer-fields-region .crm-designer-open .crm-designer-buttons,
137 .crm-designer-row:hover .crm-designer-buttons {
138 display: block;
139 }
140
141 .crm-designer-row .crm-designer-buttons a {
142 cursor: pointer;
143 display: inline-block;
144 border-radius: 4px;
145 border: 1px solid #D7D7D7;
146 }
147
148 .crm-designer-row .crm-designer-buttons a:hover,
149 .crm-designer button:hover {
150 box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
151 }
152
153 .crm-designer .crm-designer-palette-tree button {
154 font-size: .8em;
155 }
156
157 .crm-designer .crm-designer-palette-tree span.ui-button-text {
158 padding: 0.4em;
159 }
160
161 .crm-designer .crm-designer-edit-custom {
162 position: absolute;
163 right: 5px;
164 top: 35px;
165 font-size: .8em;
166 border: 1px solid #CFCEC3;
167 }
168
169 button#crm-designer-add-custom-set {
170 margin-top: 10px;
171 }
172
173 .ui-sortable-helper > .crm-designer-row {
174 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
175 opacity: 0.75;
176 }
177
178 .crm-designer-row .crm-designer-buttons a.crm-designer-action-settings:hover {
179 background-color: #71D46E;
180 }
181
182 .crm-designer-row .crm-designer-buttons a.crm-designer-action-remove:hover {
183 background-color: #F19489;
184 }
185
186 .crm-designer-row,
187 .crm-designer-row-placeholder {
188 border: 1px dashed transparent;
189 padding: 0.3em;
190 margin: auto;
191 position: relative;
192 }
193
194 .crm-designer-row-label {
195 padding: 0.5em 0;
196 }
197
198 .crm-designer-label {
199 font-weight: bold;
200 }
201
202 .crm-designer-row-placeholder {
203 visibility: visible !important;
204 height: 2em;
205 }
206
207 .crm-designer-dialog .description {
208 margin: 0 2em 0 0;
209 }
210
211 .crm-designer-dialog .disabled .description {
212 display: none;
213 }
214
215 .crm-designer-dialog li.crm-designer-row-placeholder,
216 .crm-designer-dialog li.ui-draggable-dragging,
217 .crm-designer-dialog .bbf-form ul {
218 list-style-image: none;
219 list-style: none;
220 }
221
222 .ui-dialog .crm-designer-dialog.ui-dialog-content {
223 overflow: visible;
224 padding-right: .25em;
225 }
226
227 .crm-designer-dialog .full-height {
228 height: 100%;
229 }
230
231 .crm-designer {
232 position: relative;
233 }
234
235 .crm-profile-selector-preview-pane,
236 .crm-designer-dialog .crm-designer .scroll {
237 overflow-x: auto;
238 overflow-y: scroll;
239 }
240
241 .ui-dialog {
242 border: 1px solid #444;
243 box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
244 }
245
246 /* Hide annoying 'preview' message */
247 .crm-profile-selector-preview-pane div.profile-preview-msg {
248 display: none;
249 }