Mercurial > hg > dml-open-vis
comparison src/DML/MainVisBundle/Resources/assets/bem-blocks/cgpma.less @ 0:493bcb69166c
added public content
author | Daniel Wolff |
---|---|
date | Tue, 09 Feb 2016 20:54:02 +0100 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:493bcb69166c |
---|---|
1 // cgpma stands for config grid panel main area | |
2 | |
3 @import "../config.less"; | |
4 | |
5 .cgpma { | |
6 | |
7 @input-padding_h: @config-grid-panel--input-padding_left; | |
8 @input-padding_v: 3px; | |
9 @input-height: 26px; | |
10 | |
11 .cursor_std(); | |
12 | |
13 .config-grid_type_collection .config-grid-panel_dimension_entity & { | |
14 padding: @config-grid_collection--panel_entity--main-area-margin-top 0 0 @config-grid_collection--panel_entity--main-area-margin-left; | |
15 } | |
16 .config-grid_type_recording .config-grid-panel_dimension_entity & { | |
17 padding: @config-grid_recording--panel_entity--main-area-margin-top 0 0 @config-grid_recording--panel_entity--main-area-margin-left; | |
18 } | |
19 | |
20 .config-grid-panel_dimension_view & { | |
21 padding: 10px @config-grid-panel_view--main-area-margin-right 10px @config-grid-panel_view--main-area-margin-left; | |
22 } | |
23 | |
24 | |
25 // ================================== | |
26 &__explanation { | |
27 padding-left: @config-grid-panel--input-padding_left; | |
28 padding-right: @config-grid-panel--input-padding_left; | |
29 padding-bottom: 8px; | |
30 } | |
31 .config-grid_type_collection &__explanation { | |
32 color: @config-grid_collection--color_panel-label; | |
33 } | |
34 .config-grid_type_recording &__explanation { | |
35 color: @config-grid_recording--color_panel-label; | |
36 } | |
37 .config-grid-panel_dimension_entity &__explanation { | |
38 display: inline-block; | |
39 } | |
40 .config-grid_type_recording .config-grid-panel_dimension_entity &__explanation { | |
41 padding-top: 3px; | |
42 } | |
43 | |
44 // ---------------------------------- | |
45 &__explanation_for-previous-input { | |
46 .font_small(); | |
47 margin-top: -6px; | |
48 } | |
49 &__explanation_for-previous-tickbox { | |
50 .font_small(); | |
51 } | |
52 | |
53 // ---------------------------------- | |
54 &__explanation_sticked-to-left { | |
55 padding-left: 0px; | |
56 } | |
57 | |
58 // ---------------------------------- | |
59 &__explanation_second-row { | |
60 padding-top: 25px; | |
61 } | |
62 | |
63 | |
64 // ================================== | |
65 &__pseudo-link { | |
66 color: @config-grid--color_panel-label; | |
67 .cursor_action; | |
68 border-bottom: 1px dotted; | |
69 display: inline; | |
70 } | |
71 &__pseudo-link:hover { | |
72 color: @config-grid--color_panel-label-hovered; | |
73 } | |
74 | |
75 | |
76 // ================================== | |
77 &__input-block { | |
78 } | |
79 | |
80 .config-grid-panel_dimension_entity &__input-block { | |
81 display: inline-block; | |
82 padding: 0 15px 0 0; | |
83 min-width: 150px; | |
84 vertical-align: top; | |
85 } | |
86 | |
87 .config-grid-panel_dimension_view &__input-block { | |
88 margin-bottom: 10px; | |
89 } | |
90 | |
91 &__input-block_location_first-in-group { | |
92 margin-top: 20px; | |
93 } | |
94 | |
95 | |
96 // ================================== | |
97 &__label { | |
98 padding: 0 @input-padding_h 1px; | |
99 color: @config-grid--color_panel-label; | |
100 } | |
101 .config-grid_type_collection &__label { | |
102 color: @config-grid_collection--color_panel-label; | |
103 } | |
104 .config-grid_type_recording &__label { | |
105 color: @config-grid_recording--color_panel-label; | |
106 } | |
107 &__label a { | |
108 color: @config-grid--color_panel-label; | |
109 text-decoration: none; | |
110 border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
111 } | |
112 | |
113 .config-grid_type_collection &__label a { | |
114 color: @config-grid_collection--color_panel-label; | |
115 } | |
116 .config-grid_type_recording &__label a { | |
117 color: @config-grid_recording--color_panel-label; | |
118 } | |
119 | |
120 | |
121 &__label a:hover { | |
122 color: @config-grid--color_panel-label-hovered !important; | |
123 border-bottom: 1px solid rgba(0, 0, 0, 0.4); | |
124 } | |
125 | |
126 // ---------------------------------- | |
127 &__label_without-left-padding { | |
128 padding-left: 0; | |
129 } | |
130 | |
131 // ================================== | |
132 &__textfield { | |
133 border-radius: 5px; | |
134 height: @input-height - 2 * @input-padding_v; | |
135 position: relative; | |
136 border-top: @input-padding_v solid; | |
137 border-right: @input-padding_h solid; | |
138 border-bottom: @input-padding_v solid; | |
139 border-left: @input-padding_h solid; | |
140 } | |
141 .config-grid-panel_dimension_entity &__textfield { | |
142 width: 150px; | |
143 } | |
144 | |
145 &__textfield-input { | |
146 outline: none !important; | |
147 .font_standard(); | |
148 background: none; | |
149 position: relative; | |
150 width: 100%; | |
151 height: 100%; | |
152 margin: 0; | |
153 border: 0; | |
154 padding: @input-padding_v @input-padding_h; | |
155 top: -@input-padding_v; | |
156 left: -@input-padding_h; | |
157 .border-radius(@--border-radius); | |
158 } | |
159 | |
160 .cgpma__textfield_autocomplete-is-open { | |
161 .border-bottom-left-radius(0px); | |
162 .border-bottom-right-radius(0px); | |
163 } | |
164 | |
165 // ================================== | |
166 &__textfield .ui-autocomplete { | |
167 .font_standard(); | |
168 } | |
169 | |
170 // ================================== | |
171 &__tickbox { | |
172 margin-right: 15px; | |
173 padding-left: 20px; | |
174 display: inline-block; | |
175 min-height: @input-height - 4px; | |
176 padding-top: 3px; | |
177 position: relative; | |
178 } | |
179 &__tickbox_one-per-line { | |
180 display: block; | |
181 } | |
182 &__tickbox_state_enabled { | |
183 .cursor_action(); | |
184 } | |
185 | |
186 .config-grid-panel_dimension_view &__tickbox_location_first-in-group { | |
187 margin-top: 5px; | |
188 } | |
189 | |
190 &__tickbox_location_last-in-group { | |
191 margin-right: 0px; | |
192 } | |
193 | |
194 &__tickbox-tick { | |
195 position: absolute; | |
196 border-radius: 5px; | |
197 height: 15px; | |
198 width: 15px; | |
199 left: 0px; | |
200 top: 5px; | |
201 } | |
202 | |
203 &__tickbox_ticked &__tickbox-tick { | |
204 background-repeat: no-repeat; | |
205 background-position: 2px 4px; | |
206 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGlJREFUeNpi/P//PwMuwMjIKA2k1gHxFwaQQmwYCECK7gExiHMMJDABiJcCMQ+SIjkkRVeBWIIBSeAwSDEWRaIw56kD8XMkxQ+h7PMwRWCFUNUgxU+gCjAUwRVCFatArdoLxELongMIMAANx1tBwGkjIgAAAABJRU5ErkJggg=='); | |
207 } | |
208 &__tickbox_type_radio &__tickbox-tick { | |
209 border-radius: 10px; | |
210 } | |
211 &__tickbox_type_radio&__tickbox_ticked &__tickbox-tick { | |
212 // 2.5 | |
213 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI1IiB3aWR0aD0iNSI+ICA8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuNSIgZmlsbD0iYmxhY2siIC8+PC9zdmc+'); | |
214 // 3.5 | |
215 //background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI3IiB3aWR0aD0iNyI+ICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSIzLjUiIHI9IjMuNSIgZmlsbD0iYmxhY2siIC8+PC9zdmc+'); | |
216 // 3 | |
217 //background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI2IiB3aWR0aD0iNiI+ICA8Y2lyY2xlIGN4PSIzIiBjeT0iMyIgcj0iMyIgZmlsbD0iYmxhY2siIC8+PC9zdmc+'); | |
218 background-position: center center; | |
219 } | |
220 | |
221 // ================================== | |
222 // background colors of all input types | |
223 .config-grid_type_collection &__textfield, | |
224 .config-grid_type_collection &__tickbox-tick { | |
225 background-color: @config-grid_collection--color_panel-input; | |
226 border-color: @config-grid_collection--color_panel-input; | |
227 } | |
228 | |
229 .config-grid_type_recording &__textfield, | |
230 .config-grid_type_recording &__tickbox-tick { | |
231 background-color: @config-grid_recording--color_panel-input; | |
232 border-color: @config-grid_recording--color_panel-input; | |
233 } | |
234 | |
235 .config-grid_type_collection &__textfield_status_modified, | |
236 .config-grid_type_collection &__tickbox_status_modified &__tickbox-tick { | |
237 background-color: @config-grid_collection--color_panel-input_modified; | |
238 border-color: @config-grid_collection--color_panel-input_modified; | |
239 } | |
240 | |
241 .config-grid_type_recording &__textfield_status_modified, | |
242 .config-grid_type_recording &__tickbox_status_modified &__tickbox-tick { | |
243 background-color: @config-grid_recording--color_panel-input_modified; | |
244 border-color: @config-grid_recording--color_panel-input_modified; | |
245 } | |
246 | |
247 .config-grid_type_collection &__textfield_status_error { | |
248 background-color: @config-grid_collection--color_panel-input_error; | |
249 border-color: @config-grid_collection--color_panel-input_error; | |
250 } | |
251 | |
252 .config-grid_type_recording &__textfield_status_error { | |
253 background-color: @config-grid_recording--color_panel-input_error; | |
254 border-color: @config-grid_recording--color_panel-input_error; | |
255 } | |
256 } |