summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorerdgeist <erdgeist@bauklotz.fritz.box>2016-08-13 22:43:39 +0200
committererdgeist <erdgeist@bauklotz.fritz.box>2016-08-13 22:43:39 +0200
commitf8a2007545c95b71714a54011a36ae7415ed3cdb (patch)
tree16c36ba357b47148dd9ab308639ba90fec0b6092
parent3c6ab13794732dad7ac115d3a336023ad541946c (diff)
make check boxes nicer
-rw-r--r--style.css30
1 files changed, 18 insertions, 12 deletions
diff --git a/style.css b/style.css
index 1170a35..569640c 100644
--- a/style.css
+++ b/style.css
@@ -370,7 +370,7 @@ select {
370} 370}
371 371
372label { 372label {
373 margin-bottom: 0.4em; 373 margin-bottom: 1em;
374} 374}
375 375
376input[type=checkbox]:not(old) { 376input[type=checkbox]:not(old) {
@@ -381,31 +381,37 @@ input[type=checkbox]:not(old) {
381input[type=checkbox]:not(old) + label { 381input[type=checkbox]:not(old) + label {
382 display : inline-block; 382 display : inline-block;
383 margin-left : 0; 383 margin-left : 0;
384 line-height : 1.5em; 384 line-height : 1.7em;
385 text-indent : -2.0625em; /* Make 2nd line of label align, takes border width of tickbox into account */ 385 text-indent : -46.5px; /* Make 2nd line of label align, takes border width of tickbox into account */
386 padding-left : 2.0625em; 386 padding-left : 46.5px;
387} 387}
388 388
389input[type=checkbox]:not(old) + label > span { 389input[type=checkbox]:not(old) + label > span {
390 display : inline-block; 390 display : inline-block;
391 width : 1em; 391 width : 28px;
392 height : 1em; 392 height : 28px;
393 margin : 0.25em 1em 0.25em 0; 393 margin : 2px 16px 8px 0;
394 border : 0.0625em solid white; 394 border : 0.5px solid white;
395 border-radius : 25%; 395 border-radius : 25%;
396 vertical-align : top; 396 vertical-align : top;
397 transform : rotate(360deg);
398 transition : transform 0.3s, font-size 0.4s;
399 font-size : 1pt;
400}
401
402input[type=checkbox]:not(old):checked + label > span {
403 transform : rotate(0deg);
404 font-size : 17pt;
397} 405}
398 406
399input[type=checkbox]:not(old):checked + label > span:before { 407input[type=checkbox]:not(old):checked + label > span:before {
400 content : '✓'; 408 content : '✓';
401 display : inline-block; 409 display : inline-block;
402 width : 1em; 410 width : 28px;
403 color : white; 411 color : white;
404 font-size : 1.4em;
405 line-height : 1em;
406 text-align : center; 412 text-align : center;
407 font-weight : bold; 413 font-weight : bold;
408 margin-left : 2.1em; 414 margin-left : 71px;
409} 415}
410 416
411#wrapper.step1 .block-step1 .juice, 417#wrapper.step1 .block-step1 .juice,