display delete buttons for fields (not functional yet)
[confetti] / cards / cards.css
1 /*
2 # Copyright 2014 - 2017 Paul Hänsch
3 #
4 # This file is part of Confetti.
5
6 # Confetti is free software: you can redistribute it and/or modify
7 # it under the terms of the GNU Affero General Public License as published by
8 # the Free Software Foundation, either version 3 of the License, or
9 # (at your option) any later version.
10
11 # Confetti is distributed in the hope that it will be useful,
12 # but WITHOUT ANY WARRANTY; without even the implied warranty of
13 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14 # GNU Affero General Public License for more details.
15
16 # You should have received a copy of the GNU Affero General Public License
17 # along with Confetti.  If not, see <http://www.gnu.org/licenses/>. 
18 */
19
20 .filter, .newcard, .card { box-shadow: 0 0 1ex; }
21
22 .filter {
23   display: block;
24   border: solid 1px;
25   border-radius: 4px 4px 0 0;
26   margin: .5em 2em .25em 2em;
27   padding: 0 2ex .5em 2ex;
28   background: #EFF;
29 }
30
31 .filter h1 {
32   display: block;
33   font-weight: bold;
34   font-size: 1.25em;
35   border-style: none none solid none;
36   border-radius: 4px 4px 0 0;
37   border-width: 1px;
38   margin: 0 -1.625ex .5em -1.625ex;
39   padding: .125em 1ex;
40   background: #EEF;
41 }
42 .filter input[type="text"] {
43   width: 100%;
44   height: 2em;
45   margin-bottom: 1em;
46 }
47 .filter fieldset {
48   position: relative;
49   display: block;
50   border: none;
51   padding: 0 0 0 12ex;
52   margin: 0 0 .5em 0;
53 }
54 .filter fieldset legend {
55   position: absolute;
56   font-size: 1em;
57   font-weight: bold;
58   margin-left: -12ex;
59 }
60 .filter label {
61   display: inline-block;
62   vertical-align: top;
63   margin: .125em 2ex 0 0;
64   white-space: nowrap;
65 }
66 .filter button {
67   margin-top: .5em;
68 }
69
70 .filter fieldset.item { padding-left: 0; }
71 .filter fieldset.item legend { display: none; }
72 .filter fieldset.item input[type=text],
73 .filter fieldset.item fieldset.categories {
74   background-color: #FFF;
75   border: 1px solid #000;
76   margin-top: -1px;
77   padding: .25em .5em;
78 }
79 .filter fieldset.item input[type=radio] { display: none; }
80 .filter fieldset.item input[type=radio] + label {
81   position: relative; z-index: 1;
82   margin: 0; padding: .25em 1em;
83   
84 }
85 .filter fieldset.item input[type=radio]:checked + label {
86   background-color: #FFF;
87   border: 1px solid #000;
88   border-bottom-color: #FFF;
89 }
90 .filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text],
91 .filter fieldset.item input[type=radio][value="CATEGORIES"] + label + input[type=text] + fieldset.categories {
92   display: none;
93 }
94 .filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text] + fieldset.categories {
95   display: block;
96 }
97 .filter fieldset.item fieldset.categories a {
98   font-size: .875em;
99   line-height: 1.625em;
100   color: #44C;
101 }
102
103 .newcard {
104   display: block;
105   border: solid 1px;
106   border-radius: 0 0 4px 4px;
107   margin: .25em 2em 1em 2em;
108   padding: .25em 2ex .25em 2ex;
109   background: #EFF;
110 }
111
112 .card {
113   display: block;
114   position: relative;
115   border: solid 1px;
116   margin: .25em 2em;
117   padding: 0 20ex 0 0;
118   overflow: auto;
119   background: #FFF;
120   min-height: 8em;
121 }
122 .card .control {
123   display: inline-block;
124   position: absolute;
125   top: 0; right: 0;
126   text-align: right;
127   background: #EEF;
128   margin: 0;
129   height: 100%;
130   width: 20ex;
131   max-width: 33%;
132   padding: .25em 1ex;
133 }
134 .card .control .item {
135   display: inline-block;
136   width: 100%;
137   height: 2.5em;
138   line-height: 2.5em;
139   margin: .25em 0;
140   padding: 0 .5em;
141   font-size: .75em;
142   color: #008;
143   background: #FFF;
144   text-decoration: none;
145   border: 1px solid #888;
146   box-shadow: 0 0 .5ex #888;
147 }
148 .card .control button.item { text-align: right;}
149 .card .control .item:hover{ border-color: #008; box-shadow: 0 0 .5ex #008; }
150
151 .card .control .item[name=newfield] {
152   width: calc(100% - 2.5em);
153 }
154 .card .control .item[value=addfield] {
155   width: 2.5em;
156   border-style: solid solid solid none;
157   text-align: center;
158 }
159
160 .card .control #delete + label + button,
161 .card .control #delete { display: none; }
162 .card .control #delete + label { background-color: #FEE; }
163 .card .control #delete:checked + label + button {
164   position: fixed; display: block;
165   left: 40%; top: 30%; width: 20%;
166   font-size: 1.5em;
167   text-align: center;
168   background-color: #FAA;
169   color: #333;
170   border-radius: .25em 0 0 .25em;
171 }
172 .card .control #delete:checked + label:after {
173   position: fixed; display: block;
174   left: 60%; top: 30%; width: 5%;
175   margin: .25em 0; padding: .5em .75ex 0 .75ex;
176   height: 1.5em;
177   font-size: 2em;
178   content: 'X';
179   text-align: center;
180   color: #AAA; background-color: #000;
181   border-radius: 0 .25em .25em 0;
182 }
183
184 .card .section {
185   display: inline-block;
186   vertical-align: top;
187   float: left;
188   width: 20ex;
189   min-width: 16.5%;
190   min-height: 6em;
191   margin: .125em 0 .5ex 0;
192   padding: 0 1ex .25em 1ex;
193 }
194 .card .section:nth-of-type(2n){ background: #EEE;}
195
196 .card .section h2, .card .section h3 {
197   font-size: 1em;
198   display: block;
199   font-weight: bold;
200   margin: .25em -.5ex .25em -.5ex;
201   border-style: none none solid none;
202   border-width: 1px;
203 }
204 .card .section .FN {  /* will override h2 */
205   font-size: 1.2em;
206   margin-top: 0;
207 }
208
209 .card .section .item {
210   display: block;
211   max-width: 100%;
212   word-wrap: break-word;
213   white-space: pre-line;
214 }
215 .card .section .item label {
216   font-weight: bold;
217 }
218
219 .card .section textarea.NOTE {
220   min-height: 6em;
221 }
222 .card .section textarea.ADR {
223   min-height: 4em;
224 }
225
226 .card .section .PHOTO {
227   width: 100%;
228   max-height: 10em;
229 }
230 .card .section .GENDER { display: inline-block; padding-right: .5ex; }
231 .card .section .BDAY { display: inline-block;}
232 .card .section .TEL .type { color: #444; }
233
234 .card .section select {
235   display: block;
236   background-color: #FFF;
237   border: 1px solid black;
238 }
239
240 .card .section.attendance ul { margin: 0; padding: 0; }
241 .card .section.attendance ul li {
242   display: block;
243   word-wrap: break-word;
244 }
245
246 .card .section.prescriptions ul { margin: 0; padding: 0; }
247 .card .section.prescriptions ul li {
248   display: block;
249   word-wrap: break-word;
250   margin: 0 .25ex;
251 }
252
253 .card .section.prescriptions { width: 40ex;}
254
255 form.card input.delete { display: none; }
256 form.card input.delete + label {
257   display: inline-block;
258   position: relative;
259   font-size: .875em;
260   left: calc(100% - 1.5em);
261   width: 1.5em;
262   margin-bottom: -1.5em;
263   overflow: hidden;
264   white-space: nowrap;
265   vertical-align: bottom;
266 }
267 form.card input.delete + label:before {
268   display: inline-block;
269   content: 'x';
270   width: calc(1.5em - 2px); height: calc(1.5em - 2px);
271   vertical-align: bottom;
272   text-align: center;
273   color: #444;
274   background-color: #FBB;
275   border: 1px solid #BBB;
276 }
277 form.card input.delete + label + input[type=text],
278 form.card input.delete + label + input:not([type]),
279 form.card input.delete + label + select + input.TEL {
280   width: calc(100% - 1.5em);
281 }
282 form.card input.delete[name^=TEL_] + label { top: 1.5em; }
283 form.card input.delete[name^=TEL_] + label:before { border-top: none; }
284 form.card input.delete[name^=NOTE_] + label,
285 form.card input.delete[name^=ADR_] + label { margin-bottom: 0; }
286 form.card input.delete[name^=NOTE_] + label:before,
287 form.card input.delete[name^=ADR_] + label:before { border-bottom: none; }
288
289 form.card input.delete:checked + label,
290 form.card input.delete:checked + label + input,
291 form.card input.delete:checked + label + select,
292 form.card input.delete:checked + label + select + input,
293 form.card input.delete:checked + label + textarea {
294   display: none
295 }
296
297 form.card .section input[type=text],
298 form.card .section input:not([type]),
299 form.card .section textarea,
300 form.card .section select {
301   width: 100%;
302   margin-bottom: .25em;
303 }
304
305 form.card .section select.teltype { margin-bottom: 0; }
306 form.card .section input.TEL { margin-bottom: .5em; }
307
308 form.card .attendance {
309   min-width: 66%;
310 }
311 form.card .attendance label {
312   position: relative;
313   display: inline-block;
314   width: 25ex;
315   padding-left: 3ex;
316 }
317 form.card .attendance label input[type=checkbox] {
318   position: absolute;
319   margin-left: -3ex;
320 }
321
322 form.card .insurance input[type=radio] {display: none;}
323 form.card .insurance input[type=radio] + label {
324   display: inline-block;
325   width: 50%;
326   padding: .25ex 0;
327   text-align: center;
328   border: 1px solid black;
329   
330 }
331 form.card .insurance input[type=radio]:checked + label {
332   font-weight: bold;
333   background-color: #FFF;
334   border-width: 1px 1px 0 1px;
335 }
336 form.card .insurance input[type=radio] + label + input + label + select,
337 form.card .insurance input[type=radio] + label + select + input {display: none;}
338 form.card .insurance input[type=radio]:checked + label + input + label + select,
339 form.card .insurance input[type=radio]:checked + label + select + input {
340   display: block;
341   border: 1px solid black;
342   background-color: #FFF;
343   border-width: 0 1px 1px 1px;
344   padding: .25ex 0;
345   margin-top: -1px;
346 }