From f8a2007545c95b71714a54011a36ae7415ed3cdb Mon Sep 17 00:00:00 2001 From: erdgeist Date: Sat, 13 Aug 2016 22:43:39 +0200 Subject: make check boxes nicer --- style.css | 30 ++++++++++++++++++------------ 1 file 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 { } label { - margin-bottom: 0.4em; + margin-bottom: 1em; } input[type=checkbox]:not(old) { @@ -381,31 +381,37 @@ input[type=checkbox]:not(old) { input[type=checkbox]:not(old) + label { display : inline-block; margin-left : 0; - line-height : 1.5em; - text-indent : -2.0625em; /* Make 2nd line of label align, takes border width of tickbox into account */ - padding-left : 2.0625em; + line-height : 1.7em; + text-indent : -46.5px; /* Make 2nd line of label align, takes border width of tickbox into account */ + padding-left : 46.5px; } input[type=checkbox]:not(old) + label > span { display : inline-block; - width : 1em; - height : 1em; - margin : 0.25em 1em 0.25em 0; - border : 0.0625em solid white; + width : 28px; + height : 28px; + margin : 2px 16px 8px 0; + border : 0.5px solid white; border-radius : 25%; vertical-align : top; + transform : rotate(360deg); + transition : transform 0.3s, font-size 0.4s; + font-size : 1pt; +} + +input[type=checkbox]:not(old):checked + label > span { + transform : rotate(0deg); + font-size : 17pt; } input[type=checkbox]:not(old):checked + label > span:before { content : '✓'; display : inline-block; - width : 1em; + width : 28px; color : white; - font-size : 1.4em; - line-height : 1em; text-align : center; font-weight : bold; - margin-left : 2.1em; + margin-left : 71px; } #wrapper.step1 .block-step1 .juice, -- cgit v1.2.3