From eaa2fc3148a691ecee509fc363f614c09a2abe2d Mon Sep 17 00:00:00 2001 From: Sahat Yalkabov Date: Wed, 4 Dec 2013 06:14:42 -0500 Subject: [PATCH] Nice checkbox and radio button styles --- public/css/ios7.less | 74 ++++++++++++++++++++++++++++++++++++ public/img/checkmark.png | Bin 0 -> 14665 bytes public/img/checkmark@2x.png | Bin 0 -> 14664 bytes 3 files changed, 74 insertions(+) create mode 100644 public/img/checkmark.png create mode 100644 public/img/checkmark@2x.png diff --git a/public/css/ios7.less b/public/css/ios7.less index ea369b6768..0487f1d8a8 100644 --- a/public/css/ios7.less +++ b/public/css/ios7.less @@ -155,6 +155,79 @@ label { .form-control-validation(#d9534f; #d9534f; #d9534f); } +.radio, +.checkbox { + margin: 0 0 10px; +} + +.radio-inline, +.checkbox-inline { + padding-top: 9px; + margin-right: 20px; +} + +.radio-inline + .radio-inline, +.radio-inline + .checkbox-inline, +.checkbox-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-left: 0; +} + +input[type="checkbox"], +input[type="radio"] { + display: none; +} + +input[type="checkbox"] + span:before, +input[type="radio"] + span:before { + content: ""; + width: 18px; + height: 18px; + display: inline-block; + vertical-align: middle; + margin-right: 10px; + margin-left: -20px; + background: white; + border-radius: 3px; + border: 1px solid #c8c8c8; +} + +input[type="checkbox"]:checked + span:before { + background: #007aff url("../img/checkmark.png") no-repeat center center; + border-color: #007aff; +} + +@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { + input[type="checkbox"]:checked + span:before { + background-image: url("../img/checkmark@2x.png"); + background-size: 14px 14px; + } +} + +input[type="radio"] { + display: none; +} + +input[type="radio"] + span { + position: relative; +} + +input[type="radio"] + span:before { + border-radius: 50%; +} + +input[type="radio"]:checked + span:after { + content: ""; + width: 8px; + height: 8px; + position: absolute; + top: 6px; + left: -15px; + background-color: #007aff; + border-radius: 50%; + display: block; +} + // Misc =================================================================== .login-container { background-color: rgba(255, 255, 255, 0.95); @@ -197,6 +270,7 @@ label { .checkbox { display: inline-block; + margin: 0 0 10px; } } diff --git a/public/img/checkmark.png b/public/img/checkmark.png new file mode 100644 index 0000000000000000000000000000000000000000..665db2f2de56fe85da2441e178677e267928f4d5 GIT binary patch literal 14665 zcmeI3U5pb|6vqcOM3!LKK;*;39cRU8VtZ$%ExVnxCChf98|k_(1s08AXQ#KjBkjyM zGo{^45Czf5gAx-HB1Tcv5D6MT9yDT%2|kEXzy}lXBWhw$Ui87l$P39(icmMezG z+oYYd_x{iS-1*&)otJrLbY$a_uGL)}$1NGoq{qnh7VmrWLh{>_37sRCMOJ3J!*Pq3 zdEW)xi!ZI@xc-%TZrmNuZc;R}6jt-*Bo0?g7EyCtVqMizwVl}IC-IbSB!xdd{#4-g zd{WpJ%ZgcR5KrrwSsQPj9m#34JGFRTSeNQbR25=S!mi3!OGU#`s!753RY>eLBZ2oN z?#`qz;1%S@v!nc=X=6SXj)gQ)it>H&uoRP`{nEX>EJ_h1MvxQOC zLb9)h$uqNjNz))km2+OCUZV% z>}a-bxw>iap07G-mffTvc!lbp+I^L*dLhH9u_F{wRke^57E!yTyjIV#%68EoT3$oA zh)dXT9g-)t&9kOW*L0@M4khc|9Sf5=$!6=d+m5$XYFpZIhjtMJHKc7bo!pFt(HM5j zvaR8vUF24J+ugmZ7aEh(AkAM2!3-tHy()t?R$bH1nPxE+tg_KL zg#6$je|J{Zbi+e>PXe{-8$mS|%$uT(~N$jY1n zE0(NV{}kJdA8l@(>nQ5}X=JIkgT1|$6y`Qt{rIY%PF{|`XBAcR&asr{Z3Uc9pr+Qw zuU=*PX;ES7zJpDdCOlDywqD(r4e-G22{ z*xj1i$lPM+Zc46IYiR~q-f0^g2%E`+0Zy%r#Uil;YHe=K7}cw|IG)zY&UL)?C`D^I ztsQL>w|7be9ks+@s=&W+eIYL5&$MDk3OgxF8K`%y3Z=K>@=BX;5Q^i;4&e7%oVI8Z%r}L{PwRK^oMU;i4jf z0)`9HpvDXr6%iCLT#yDeX1J(`pn&0mG^jDdMMVS!3>Tz9jTtT~A}C8Ps4>GuMFa&57or!}{3m2zi$S5|NO>eurVQ{NU=;pm_H z_Fn#N_W1F`raZmZk!wYsFedy&khF&>z z=VJ%I|6n~TJ$P5ohrc{2U0(Fp{;#j-r(fSc^g#909Zy`?awd~~_M^jF|3328nJ?Zw y_2wfdqwgJf;mh9FR&`(8_}#%zc5mCWklXWveZF+*zSU&d-0;vy`t9`-d;bN(O6&Fj literal 0 HcmV?d00001 diff --git a/public/img/checkmark@2x.png b/public/img/checkmark@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..8ad2d0baaea06aafa709f593289d13d03ce1980e GIT binary patch literal 14664 zcmeI3U5Fc16vuBtx9&28Ke$~M`$D^6Xvsm+4b&d%KIj!kB! zGqX*0p|I9g=vxuNvi8BMw9p4jMMNlNi%_Ih1Ye5yV*LQI2!bC)L9BN&+2kaf^jhiT z4J32+-v9rcJHPv}^D;-rcRaOb;K2ce(3-K)`~Hkza4kH*b(jzdJhVBXsZD z@Vg2vo>+&_&^oJ742s$_is4k^y6H^ec&*|RHA3pvnyVZ8aKKIBY0J*=znov`=lqU>F~849oBY=7fLc>Xf(j0Fu2w1AzEaEZ^}Gs+!)Af!>XKkz zh93?Kaz$;N%Q+tAQt?#G5TztHn2t*+DLEu<<`SYL3!*GYa!g7nVp@?>T;s!M2S}uP zW=WaIZ*P<%e`WZYAaE5ys8*}-svLK`X+cV-(}I`~5{Vd5#QZrs&}%W<-w-8P&XdQ! z;aP5AIW`yO)u)`EL(XnNdPuUsFRX$ZKC zE7%Tv;*+}i+!-fu{28Z5$!2%Y!emY~ty#P4cq^5zrTt*!071||+STb7=3FdHVBeYb z3_Nmx+{%V-cOO`#*5tHh3VV8v9oMWLwy-C%)t5pvLn^sfCFfy1aJ+)!l(W$)8(&7q z<#OC6O*bq%MEZm(bn07^-AaY?dVsUxVvI>*OiUCKvLcfpsfZ%T5Xm|cXpU)>=Gqes z7Nn#irVf{BvOq1!V;V}y@hWH;6?=|~>sjQC)5|~;j{bH_bV;+K)Trf?l{p7i zELpepQ*0;R-`=|1QMT%*k*j+?4)j3(}y*3>Os<6fj(n1~q25sED9| z;es@%F~dbg1O*Hiq(O}tE-E4@V7MR+YRqs^5kUdN1!+)YhKq^_3K%X(gBmkjR76m~ za6uZ>nBk%#f&zvM(xAo+7Zni{FkFxZHDIYL5&$MDk3Og zxF8K`%y3Z=K>@=BX;5Q^i;4&e7%oVI8Z%r}L{PwRK^oNfmbeC5ulr$}yyI6TFZ2Ci zuHH{x1muj-2@Rq7jR-BgiqKy-$@M3MW<`Xq??p&Cj?e?n>n~l}PPAvn^23GN*FRtV zvVVcQzwes7cxv(VL!Vx?PTc7K=fy+ssOQx`EezW{;o;qXUsy`M_S?ZHS3SM%&Em;{&+a~RZv8c3bKiX%#r_w*c*Qrboj7#l z;)pbyxN+Cxm-3Ho{_vCHp3jdLa{Vde+}Y&e#dBv5ZaR7Sc