From 7f2fd5c2bb5b7694a582f8e02820bf640dc50dc5 Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Fri, 10 May 2013 09:17:53 -0400 Subject: [PATCH 01/10] Made whitespace consistent. --- select2-bootstrap.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/select2-bootstrap.css b/select2-bootstrap.css index aa2339f..44e8c4f 100644 --- a/select2-bootstrap.css +++ b/select2-bootstrap.css @@ -18,7 +18,7 @@ background-color: #fff; filter: none; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } @@ -40,11 +40,11 @@ .select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices { - border-color: rgba(82, 168, 236, 0.8); - outline: none; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); + border-color: rgba(82, 168, 236, 0.8); + outline: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } [class^="input-"] .select2-container { @@ -83,7 +83,7 @@ * This stops the quick flash when a native selectbox is shown and * then replaced by a select2 input when javascript kicks in. This can be * removed if javascript is not present - */ + */ select.select2 { height: 28px; visibility: hidden; From 94345e2dc3df4bfd089000a64cb115ba827d4f7d Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Fri, 10 May 2013 09:20:49 -0400 Subject: [PATCH 02/10] Expanded color hex values. --- select2-bootstrap.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/select2-bootstrap.css b/select2-bootstrap.css index 44e8c4f..627a739 100644 --- a/select2-bootstrap.css +++ b/select2-bootstrap.css @@ -12,10 +12,10 @@ .select2-container-multi .select2-choices { height: 28px; line-height: 29px; - border: 1px solid #ccc; + border: 1px solid #cccccc; border-radius: 3px; background: none; - background-color: #fff; + background-color: #ffffff; filter: none; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); From f6afbee558bf59e7023278c2dd2a3e4c918ab666 Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Fri, 10 May 2013 09:34:14 -0400 Subject: [PATCH 03/10] Set border radius to Bootstrap default. --- select2-bootstrap.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/select2-bootstrap.css b/select2-bootstrap.css index 627a739..2b48078 100644 --- a/select2-bootstrap.css +++ b/select2-bootstrap.css @@ -13,7 +13,9 @@ height: 28px; line-height: 29px; border: 1px solid #cccccc; - border-radius: 3px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; background: none; background-color: #ffffff; filter: none; From 30d919864f7fbed1bf73b2a7605c92612cb1552a Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Fri, 10 May 2013 13:01:52 -0400 Subject: [PATCH 04/10] Lowercased hex value. --- select2-bootstrap.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/select2-bootstrap.css b/select2-bootstrap.css index 2b48078..b80d7d2 100644 --- a/select2-bootstrap.css +++ b/select2-bootstrap.css @@ -32,7 +32,7 @@ } .control-group.error [class^="select2-choice"] { - border-color: #B94A48; + border-color: #b94a48; } .select2-container-multi .select2-choices .select2-search-field { From 1ca70ffcdc0f488fe9edad3db4e107f680814c4a Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Fri, 10 May 2013 13:20:11 -0400 Subject: [PATCH 05/10] Added docs folder, a visible copy of the gh-pages branch that we can copy into place for deployment. --- docs/css/select2-spinner.gif | Bin 0 -> 1849 bytes docs/css/select2.css | 615 +++++++++++++++++++++++++++++++++++ docs/css/select2.png | Bin 0 -> 613 bytes docs/css/select2x2.png | Bin 0 -> 845 bytes docs/index.html | 139 ++++++++ docs/select2-bootstrap.css | 105 ++++++ 6 files changed, 859 insertions(+) create mode 100644 docs/css/select2-spinner.gif create mode 100644 docs/css/select2.css create mode 100644 docs/css/select2.png create mode 100644 docs/css/select2x2.png create mode 100644 docs/index.html create mode 100644 docs/select2-bootstrap.css diff --git a/docs/css/select2-spinner.gif b/docs/css/select2-spinner.gif new file mode 100644 index 0000000000000000000000000000000000000000..5b33f7e54f4e55b6b8774d86d96895db9af044b4 GIT binary patch literal 1849 zcma*odr(tX9tZI2z31lM+(&YVk%mZ}5P~KlG2s=WSbGzm0!x7^P##Mnh7t-jP!X0Q zk_SQ}Po-L1tlDK;6l?(>v)e5ZBQx4|Y-Q?nr@Px3?9h(3ZWr3^tj=`TP57gKr87N$ zp2wWee1GRRCwo_xahnw)5cxNPJbCg2L6DV|6`#+yw6v6!mDS$f9-JvFD^n;GQ&UrZ zzh5jCkByB101O60U0q#p_1BM>Cv-vP?&s4@g_((4_1L=L$(a91)0=J91Gas#R{McE znYG^9*0A5YZ>#;~+Wkn(W5B0^yELIYLP!K}mB~<)AM@1&nqekynuaEGqPrzoH|KodRXJy)%+w_fu3nE5>@Bd_b zqC$EQ;{c`T&?EsNO|igL9gC7Ygxv?aQUEXMq?~>wg{EyW;VcJ37CUF#HjrT=KQO_* zS>M9yydXk18D(+QDJ1>r);Lav_uYKp$T?4vr{Q$lTo&pKv^?(>L-)G2*lwH!Ah7k? z7oH<8h-(KTKt5V6$8gF)C7Io&P5=SjTh)=zV=E2EUhQZP##L8S{d%UK>>+y82>+FV+#^BzW7u3F)Bb>=lYQ%%j`F>ASe zo*cw@V#u6T`A2He;70mR(V&iV&-7{qP~=SRf&jm9-T{*ZeZ}$rd0#6c&fLG^xJcf5 z+p<`wJYgW+_s*V{uI$nMB;%8`S_3>PfGOj3Rq}@Cx^+j?rk92fANSFDBYnOqQ>Vdj z)(|$AhP4t&Lb=Gvo2#3Gl%9<=Gv`Mz?Po@P4iLF!x}GUWJICDlFk-hS^Whyh7x~VH z@0vD1>HYD4&e+~yzS*-sFR{9`{QEEZO1zg7>R&7cHts-6j!xHVdA8eI+ZlVzd%`es zJT@$#GX(gvCJ1oJN%yLBK}{V=V;seo;!w|Yte!W1%5qLNFWqvZW>h&IiH+oPT=b@E zPhGzv5=(Un*X>v`><&Z~SLlC&Nz^-G6DuPj|`n3d!%8h_nj^NdYcE6NHS_ifkCV$*D)Tqrbu`s;<=t<4 zAHNqNV?6(g<1PY-w@#I-WYFViz?9TrkMr)u0g`O`u|>T;k|2sV*YF^punvT;$SuTy{j3Gv)yqD!R_CF>yR)MzmmYS5v+~R zXAdD%ng9?df;wd8GxR#%3O+gz};Vo;)sK%Bj-q>Oq%R7JU-KD?vYu>#2UjaDo z&8$>5xW~?KPD_#XFToU1hIb*VOMidUr6iYiO0N|i-7s`T8!cFT`rN!^1Pt78J93i6 z5HI1wIM$94m{3SLDvISDe6$ZG1;eq_D9RTaaC>=cO{@Bs>$IlPCPJJ$h$)-3vzNUQ6OsN#_zWxey!_9%hxwH2_dEJi=yY|1c7nDm2_Lm!Cof8-R_+9UkS zcBE(o47yE)oMR(Q=dp1a2wTX5KvvGyLqlWTa7V&!A*|w|)ax~1_~aJ0=_Lilg*0iQk7#ZD EAHN$8j{pDw literal 0 HcmV?d00001 diff --git a/docs/css/select2.css b/docs/css/select2.css new file mode 100644 index 0000000..36324d6 --- /dev/null +++ b/docs/css/select2.css @@ -0,0 +1,615 @@ +/* +Version: 3.3.2 Timestamp: Mon Mar 25 12:14:18 PDT 2013 +*/ +.select2-container { + position: relative; + display: inline-block; + /* inline-block for ie7 */ + zoom: 1; + *display: inline; + vertical-align: middle; +} + +.select2-container, +.select2-drop, +.select2-search, +.select2-search input{ + /* + Force border-box so that % widths fit the parent + container without overlap because of margin/padding. + + More Info : http://www.quirksmode.org/css/box.html + */ + -webkit-box-sizing: border-box; /* webkit */ + -khtml-box-sizing: border-box; /* konqueror */ + -moz-box-sizing: border-box; /* firefox */ + -ms-box-sizing: border-box; /* ie */ + box-sizing: border-box; /* css3 */ +} + +.select2-container .select2-choice { + display: block; + height: 26px; + padding: 0 0 0 8px; + overflow: hidden; + position: relative; + + border: 1px solid #aaa; + white-space: nowrap; + line-height: 26px; + color: #444; + text-decoration: none; + + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #fff; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%); + background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%); + background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%); + background-image: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); + background-image: linear-gradient(top, #ffffff 0%, #eeeeee 50%); +} + +.select2-container.select2-drop-above .select2-choice { + border-bottom-color: #aaa; + + -webkit-border-radius:0 0 4px 4px; + -moz-border-radius:0 0 4px 4px; + border-radius:0 0 4px 4px; + + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%); + background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%); + background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%); + background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); + background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%); +} + +.select2-container .select2-choice span { + margin-right: 26px; + display: block; + overflow: hidden; + + white-space: nowrap; + + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} + +.select2-container .select2-choice abbr { + display: block; + width: 12px; + height: 12px; + position: absolute; + right: 26px; + top: 8px; + + font-size: 1px; + text-decoration: none; + + border: 0; + background: url('select2.png') right top no-repeat; + cursor: pointer; + outline: 0; +} +.select2-container .select2-choice abbr:hover { + background-position: right -11px; + cursor: pointer; +} + +.select2-drop-mask { + position: absolute; + left: 0; + top: 0; + z-index: 9998; + background-color: #fff; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* works in IE 8 */ + filter: "alpha(opacity=0)"; /* expected to work in IE 8 */ + filter: alpha(opacity=0); /* IE 4-7 */ +} + +.select2-drop { + width: 100%; + margin-top:-1px; + position: absolute; + z-index: 9999; + top: 100%; + + background: #fff; + color: #000; + border: 1px solid #aaa; + border-top: 0; + + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + + -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 4px 5px rgba(0, 0, 0, .15); +} + +.select2-drop.select2-drop-above { + margin-top: 1px; + border-top: 1px solid #aaa; + border-bottom: 0; + + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + + -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); +} + +.select2-container .select2-choice div { + display: block; + width: 18px; + height: 100%; + position: absolute; + right: 0; + top: 0; + + border-left: 1px solid #aaa; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + background: #ccc; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); + background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); + background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); + background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%); + background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); + background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%); +} + +.select2-container .select2-choice div b { + display: block; + width: 100%; + height: 100%; + background: url('select2.png') no-repeat 0 1px; +} + +.select2-search { + display: inline-block; + width: 100%; + min-height: 26px; + margin: 0; + padding-left: 4px; + padding-right: 4px; + + position: relative; + z-index: 10000; + + white-space: nowrap; +} + +.select2-search-hidden { + display: block; + position: absolute; + left: -10000px; +} + +.select2-search input { + width: 100%; + height: auto !important; + min-height: 26px; + padding: 4px 20px 4px 5px; + margin: 0; + + outline: 0; + font-family: sans-serif; + font-size: 1em; + + border: 1px solid #aaa; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + + background: #fff url('select2.png') no-repeat 100% -22px; + background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%); +} + +.select2-drop.select2-drop-above .select2-search input { + margin-top: 4px; +} + +.select2-search input.select2-active { + background: #fff url('select2-spinner.gif') no-repeat 100%; + background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%); +} + +.select2-container-active .select2-choice, +.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); + box-shadow: 0 0 5px rgba(0,0,0,.3); +} + +.select2-dropdown-open .select2-choice { + border-bottom-color: transparent; + -webkit-box-shadow: 0 1px 0 #fff inset; + -moz-box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 #fff inset; + + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + border-bottom-left-radius: 0; + + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + border-bottom-right-radius: 0; + + background-color: #eee; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%); + background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); + background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%); + background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); + background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%); +} + +.select2-dropdown-open .select2-choice div { + background: transparent; + border-left: none; + filter: none; +} +.select2-dropdown-open .select2-choice div b { + background-position: -18px 1px; +} + +/* results */ +.select2-results { + max-height: 200px; + padding: 0 0 0 4px; + margin: 4px 4px 4px 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +.select2-results ul.select2-result-sub { + margin: 0; +} + +.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px } +.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px } + +.select2-results li { + list-style: none; + display: list-item; + background-image: none; +} + +.select2-results li.select2-result-with-children > .select2-result-label { + font-weight: bold; +} + +.select2-results .select2-result-label { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + + min-height: 1em; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.select2-results .select2-highlighted { + background: #3875d7; + color: #fff; +} + +.select2-results li em { + background: #feffde; + font-style: normal; +} + +.select2-results .select2-highlighted em { + background: transparent; +} + +.select2-results .select2-highlighted ul { + background: white; + color: #000; +} + + +.select2-results .select2-no-results, +.select2-results .select2-searching, +.select2-results .select2-selection-limit { + background: #f4f4f4; + display: list-item; +} + +/* +disabled look for disabled choices in the results dropdown +*/ +.select2-results .select2-disabled.select2-highlighted { + color: #666; + background: #f4f4f4; + display: list-item; + cursor: default; +} +.select2-results .select2-disabled { + background: #f4f4f4; + display: list-item; + cursor: default; +} + +.select2-results .select2-selected { + display: none; +} + +.select2-more-results.select2-active { + background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%; +} + +.select2-more-results { + background: #f4f4f4; + display: list-item; +} + +/* disabled styles */ + +.select2-container.select2-container-disabled .select2-choice { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container.select2-container-disabled .select2-choice div { + background-color: #f4f4f4; + background-image: none; + border-left: 0; +} + +.select2-container.select2-container-disabled .select2-choice abbr { + display: none +} + + +/* multiselect */ + +.select2-container-multi .select2-choices { + height: auto !important; + height: 1%; + margin: 0; + padding: 0; + position: relative; + + border: 1px solid #aaa; + cursor: text; + overflow: hidden; + + background-color: #fff; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); + background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%); +} + +.select2-locked { + padding: 3px 5px 3px 5px !important; +} + +.select2-container-multi .select2-choices { + min-height: 26px; +} + +.select2-container-multi.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); + box-shadow: 0 0 5px rgba(0,0,0,.3); +} +.select2-container-multi .select2-choices li { + float: left; + list-style: none; +} +.select2-container-multi .select2-choices .select2-search-field { + margin: 0; + padding: 0; + white-space: nowrap; +} + +.select2-container-multi .select2-choices .select2-search-field input { + padding: 5px; + margin: 1px 0; + + font-family: sans-serif; + font-size: 100%; + color: #666; + outline: 0; + border: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + background: transparent !important; +} + +.select2-container-multi .select2-choices .select2-search-field input.select2-active { + background: #fff url('select2-spinner.gif') no-repeat 100% !important; +} + +.select2-default { + color: #999 !important; +} + +.select2-container-multi .select2-choices .select2-search-choice { + padding: 3px 5px 3px 18px; + margin: 3px 0 3px 5px; + position: relative; + + line-height: 13px; + color: #333; + cursor: default; + border: 1px solid #aaaaaa; + + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + + -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #e4e4e4; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0 ); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); + background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); +} +.select2-container-multi .select2-choices .select2-search-choice span { + cursor: default; +} +.select2-container-multi .select2-choices .select2-search-choice-focus { + background: #d4d4d4; +} + +.select2-search-choice-close { + display: block; + width: 12px; + height: 13px; + position: absolute; + right: 3px; + top: 4px; + + font-size: 1px; + outline: none; + background: url('select2.png') right top no-repeat; +} + +.select2-container-multi .select2-search-choice-close { + left: 3px; +} + +.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { + background-position: right -11px; +} +.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { + background-position: right -11px; +} + +/* disabled styles */ +.select2-container-multi.select2-container-disabled .select2-choices{ + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { + padding: 3px 5px 3px 5px; + border: 1px solid #ddd; + background-image: none; + background-color: #f4f4f4; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { + display: none; +} +/* end multiselect */ + + +.select2-result-selectable .select2-match, +.select2-result-unselectable .select2-match { + text-decoration: underline; +} + +.select2-offscreen { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* Retina-ize icons */ + +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { + .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b { + background-image: url('select2x2.png') !important; + background-repeat: no-repeat !important; + background-size: 60px 40px !important; + } + .select2-search input { + background-position: 100% -21px !important; + } +} diff --git a/docs/css/select2.png b/docs/css/select2.png new file mode 100644 index 0000000000000000000000000000000000000000..1d804ffb99699b9e030f1010314de0970b5a000d GIT binary patch literal 613 zcmV-r0-F7aP)

#WY!I$JQV$)A5aAS1BM||2XVJl=+L1^1S1H% zM-&lx?NZpUrHhn>fk<>POqf2sh40}xxGZfc+t+#Eb(q<4^!bTJ!40{Z2#(M~pn1C$$pw}f`kJpeHM`McNHFyg? zK;|>Hy9_3*1(U%t9t)QDnI#YAL(|ACV(>)>6WD-t!8tutHkdb^#3`HzoJG3A2@T`% zA|K@o*b!`R#(7)PWrMFn2))Ca3MR4(zaT`Zr61*kZK5NPnZwQszxh$fyv3?&4c>$q z2m=+yc0dRXRAsPDxF6sD;@rK4JGdR_``1S~o6Xi@2&aR6hcSrEp9HVRzEqVDqBn<1%hR=D4e1f^ra^A|34Cjc=Gny{F(o#MrvPYgZuTJOz(n)-F<| zj()qR;C={)N<0RRvDZ^@6ND+W*}gh-Lip(MDt!(zMSO)!j2j+*hxgzC-e3$@(O2p* zu;+gddm(cZwXTCLx*Ky4THOa*^b^F`woveIeCK^0aR|TJ00000NkvXXu0mjfA#WC6 literal 0 HcmV?d00001 diff --git a/docs/css/select2x2.png b/docs/css/select2x2.png new file mode 100644 index 0000000000000000000000000000000000000000..4bdd5c961d452c49dfa0789c2c7ffb82c238fc24 GIT binary patch literal 845 zcmV-T1G4;yP)

upQ6WKflyv?C|ADVW!U!t`EpA+x zB)5#EjWk-_X77YJZtQo`E0SF)^1bZr%)B7Cd`*OK*r z5WG-7e-R9G9^69ksDt29&oyHqxPSt|-S>xi3%PTd+GjY+BGF|nWC(7D-sd(kxqd9~ zS@2YF5vB+>dP8+$l^{oO3-lEWiGA*QIU)Wds#9M6RZ9N zcQ4y4)xqQOxD=vwu%7cz1nY#$lT&y8HCmkWgpwQP#3dhnYj9|2aS_R}IUF_^6s#$= zTm%~>A#oM?KIg$kh=<`gJkeoHa2LrulVy$Yx+N_0R3$4I!R*0677f(FKqm`2_o4~W z0h}fQZ`lC^1A+m;fM7uI(R1`S0KtG@KrkQ}5DW+&@cTnDVIow56KciMk7a899t0bC zC1KI{TsMe5NAR%GD_5`B-@ad4k~K3SO%H z_M31|`HV?E6)u$E3c&*<*n20+V@mRCop>R5;DWuZCmjSo7p@R&OYl^@G + + + + + + + + + + + +

+ Default textbox +

+ +

+ Select2 single select +

+ +

+ Select2 multi select +

+ +

+ Select2 append +

+ + +

+ +

+ Select2 prepend +

+ + +

+ +

+ Select2 multi append +

+ + +

+ +

+ Select2 multi prepend +

+ + +

+ +

+ Select2 custom data load +

+ + + +

+ + + + \ No newline at end of file diff --git a/docs/select2-bootstrap.css b/docs/select2-bootstrap.css new file mode 100644 index 0000000..863cf3f --- /dev/null +++ b/docs/select2-bootstrap.css @@ -0,0 +1,105 @@ +.clearfix { + *zoom: 1; +} +.clearfix:before, +.clearfix:after { + display: table; + content: ""; + line-height: 0; +} +.clearfix:after { + clear: both; +} +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} +.input-block-level { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +/** + * Select2 Bootstrap CSS 1.0 + * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * MIT License + */ +.select2-container { + vertical-align: middle; +} +.select2-container .select2-choice, +.select2-container-multi .select2-choices { + height: 28px; + line-height: 29px; + border: 1px solid #cccccc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + background: none; + background-color: #ffffff; + filter: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.select2-container .select2-choice div, +.select2-container.select2-container-disabled .select2-choice div { + border-left: none; + background: none; + filter: none; +} +.control-group.error [class^="select2-choice"] { + border-color: #b94a48; +} +.select2-container-multi .select2-choices .select2-search-field { + height: 28px; + line-height: 27px; +} +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + border-color: rgba(82, 168, 236, 0.8); + outline: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} +[class^="input-"] .select2-container { + font-size: 14px; +} +.input-prepend [class^="select2-choice"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.input-append [class^="select2-choice"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.select2-dropdown-open [class^="select2-choice"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +[class^="input-"] [class^="select2-choice"] > div { + display: none; +} +[class^="input-"] .select2-offscreen { + position: absolute; +} +/** + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present + */ +select.select2 { + height: 28px; + visibility: hidden; +} From dce197dd40f187451460ec67b51fa1b1433f0109 Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Fri, 10 May 2013 13:20:45 -0400 Subject: [PATCH 06/10] Added less template, conversion and test coverage. --- .gitignore | 3 + Gruntfile.js | 12 ++++ bower.json | 12 ++++ lib/build.less | 3 + lib/select2-bootstrap.less | 87 ++++++++++++++++++++++++++++ package.json | 28 +++++++++ test/less_test.js | 28 +++++++++ test/support/less.patch | 113 +++++++++++++++++++++++++++++++++++++ 8 files changed, 286 insertions(+) create mode 100644 .gitignore create mode 100644 Gruntfile.js create mode 100644 bower.json create mode 100644 lib/build.less create mode 100644 lib/select2-bootstrap.less create mode 100644 package.json create mode 100644 test/less_test.js create mode 100644 test/support/less.patch diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d3f9182 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +build +components +node_modules \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..3a71bec --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,12 @@ +module.exports = function(grunt) { + + grunt.loadNpmTasks('grunt-contrib-nodeunit'); + + // Project configuration. + grunt.initConfig({ + nodeunit: { + all: ['test/*_test.js'] + } + }); + +}; \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..1afa8d1 --- /dev/null +++ b/bower.json @@ -0,0 +1,12 @@ +{ + "name": "select2-bootstrap-css", + "version": "1.0.1", + "ignore": [ + "**/.*", + "node_modules", + "components" + ], + "devDependencies": { + "bootstrap": "~2.3.1" + } +} \ No newline at end of file diff --git a/lib/build.less b/lib/build.less new file mode 100644 index 0000000..cbb99d3 --- /dev/null +++ b/lib/build.less @@ -0,0 +1,3 @@ +@import "../components/bootstrap/less/variables"; +@import "../components/bootstrap/less/mixins"; +@import "select2-bootstrap.less"; \ No newline at end of file diff --git a/lib/select2-bootstrap.less b/lib/select2-bootstrap.less new file mode 100644 index 0000000..dfc2002 --- /dev/null +++ b/lib/select2-bootstrap.less @@ -0,0 +1,87 @@ +/** + * Select2 Bootstrap CSS 1.0 + * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * MIT License + */ + +.select2-container { + vertical-align: middle; +} + +.select2-container .select2-choice, +.select2-container-multi .select2-choices { + height: @baseLineHeight + 8px; + line-height: @baseLineHeight + 9px; + border: 1px solid @inputBorder; + .border-radius(@inputBorderRadius); + background: none; + background-color: @inputBackground; + filter: none; + .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075)); +} + +.select2-container .select2-choice div, +.select2-container.select2-container-disabled .select2-choice div { + border-left: none; + background: none; + filter: none; +} + +.control-group.error [class^="select2-choice"] { + border-color: @errorText; +} + +.select2-container-multi .select2-choices .select2-search-field { + height: 28px; + line-height: 27px; +} + +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + border-color: rgba(82, 168, 236, 0.8); + outline: none; + .box-shadow(~"inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)"); +} + +[class^="input-"] .select2-container { + font-size: @baseFontSize; +} + +.input-prepend [class^="select2-choice"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-append [class^="select2-choice"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open [class^="select2-choice"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +[class^="input-"] [class^="select2-choice"] > div { + display: none; +} + +[class^="input-"] .select2-offscreen { + position: absolute; +} + +/** + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present + */ + +select.select2 { + height: 28px; + visibility: hidden; +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..9b2ece6 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "select2-bootstrap-css", + "version": "1.0.1", + "description": "simple css to make select2 widgets fit in with bootstrap", + "main": "", + "directories": { + "doc": "docs" + }, + "scripts": { + "test": "grunt nodeunit" + }, + "repository": { + "type": "git", + "url": "git://github.com/t0m/select2-bootstrap-css.git" + }, + "keywords": [ + "bootstrap", + "select2" + ], + "author": "Michael Hellein", + "license": "MIT", + "readmeFilename": "README.md", + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-nodeunit": "~0.1.2", + "diff": "~1.0.4" + } +} diff --git a/test/less_test.js b/test/less_test.js new file mode 100644 index 0000000..92fbb9a --- /dev/null +++ b/test/less_test.js @@ -0,0 +1,28 @@ +exports.compileLess = function(test){ + var grunt = require('grunt'), + fs = require('fs'), + jsdiff = require('diff'), + t = test, + filename = 'select2-bootstrap.css', + patchfile = 'test/support/less.patch', + // This is writing to the actual docs folder, generally a no-no for tests to make changes! + child = grunt.util.spawn({ + cmd: 'lessc', + args: ['--verbose', 'lib/build.less', 'docs/'+filename] + }); + + child.stdout.pipe(process.stdout); + child.stdout.on('data', function(buf) { + var readFile = function(name) { return fs.readFileSync(name, {encoding: 'utf8'}) }, + orig = readFile(filename), + generated = readFile('docs/'+filename), + patch = readFile(patchfile), + diff = jsdiff.createPatch(filename, orig, generated); + + // Save the output for future tests. + // fs.writeFileSync(patchfile, diff); + + t.equal(patch, diff); + t.done(); + }); +}; \ No newline at end of file diff --git a/test/support/less.patch b/test/support/less.patch new file mode 100644 index 0000000..d8918d0 --- /dev/null +++ b/test/support/less.patch @@ -0,0 +1,113 @@ +Index: select2-bootstrap.css +=================================================================== +--- select2-bootstrap.css ++++ select2-bootstrap.css +@@ -1,14 +1,39 @@ ++.clearfix { ++ *zoom: 1; ++} ++.clearfix:before, ++.clearfix:after { ++ display: table; ++ content: ""; ++ line-height: 0; ++} ++.clearfix:after { ++ clear: both; ++} ++.hide-text { ++ font: 0/0 a; ++ color: transparent; ++ text-shadow: none; ++ background-color: transparent; ++ border: 0; ++} ++.input-block-level { ++ display: block; ++ width: 100%; ++ min-height: 30px; ++ -webkit-box-sizing: border-box; ++ -moz-box-sizing: border-box; ++ box-sizing: border-box; ++} + /** + * Select2 Bootstrap CSS 1.0 + * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * MIT License + */ +- + .select2-container { + vertical-align: middle; + } +- + .select2-container .select2-choice, + .select2-container-multi .select2-choices { + height: 28px; + line-height: 29px; +@@ -22,66 +47,54 @@ + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + } +- + .select2-container .select2-choice div, + .select2-container.select2-container-disabled .select2-choice div { + border-left: none; + background: none; + filter: none; + } +- + .control-group.error [class^="select2-choice"] { + border-color: #b94a48; + } +- + .select2-container-multi .select2-choices .select2-search-field { + height: 28px; + line-height: 27px; + } +- + .select2-container-active .select2-choice, + .select2-container-multi.select2-container-active .select2-choices { + border-color: rgba(82, 168, 236, 0.8); + outline: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + } +- + [class^="input-"] .select2-container { + font-size: 14px; + } +- + .input-prepend [class^="select2-choice"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +- + .input-append [class^="select2-choice"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +- + .select2-dropdown-open [class^="select2-choice"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +- + .select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +- + [class^="input-"] [class^="select2-choice"] > div { + display: none; + } +- + [class^="input-"] .select2-offscreen { + position: absolute; + } +- + /** + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present From 2c7f17ed5aafdbb955c41cef45d7a00af229cf14 Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Fri, 10 May 2013 15:19:27 -0400 Subject: [PATCH 07/10] Added SCSS file, test. Refactored less test to fix stdout pipe error. --- .gitignore | 3 +- Gruntfile.js | 12 ++++++ bower.json | 3 +- docs/select2-bootstrap.css | 42 ++++++------------ lib/build.scss | 3 ++ lib/select2-bootstrap.scss | 87 ++++++++++++++++++++++++++++++++++++++ package.json | 3 +- test/less_test.js | 25 +++++------ test/scss_test.js | 25 +++++++++++ test/support/scss.patch | 25 +++++++++++ 10 files changed, 183 insertions(+), 45 deletions(-) create mode 100644 lib/build.scss create mode 100644 lib/select2-bootstrap.scss create mode 100644 test/scss_test.js create mode 100644 test/support/scss.patch diff --git a/.gitignore b/.gitignore index d3f9182..2b77b41 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ build components -node_modules \ No newline at end of file +node_modules +.sass-cache \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 3a71bec..f6f8e04 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,11 +1,23 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-nodeunit'); + grunt.loadNpmTasks('grunt-contrib-sass'); // Project configuration. grunt.initConfig({ nodeunit: { all: ['test/*_test.js'] + }, + + sass: { + options: { + style: 'expanded' + }, + dist: { + files: { + 'docs/select2-bootstrap.css': 'lib/build.scss' + } + } } }); diff --git a/bower.json b/bower.json index 1afa8d1..5bb56db 100644 --- a/bower.json +++ b/bower.json @@ -7,6 +7,7 @@ "components" ], "devDependencies": { - "bootstrap": "~2.3.1" + "bootstrap": "~2.3.1", + "sass-bootstrap": "git://github.com/jlong/sass-twitter-bootstrap.git#~2.3.1" } } \ No newline at end of file diff --git a/docs/select2-bootstrap.css b/docs/select2-bootstrap.css index 863cf3f..7174916 100644 --- a/docs/select2-bootstrap.css +++ b/docs/select2-bootstrap.css @@ -1,30 +1,3 @@ -.clearfix { - *zoom: 1; -} -.clearfix:before, -.clearfix:after { - display: table; - content: ""; - line-height: 0; -} -.clearfix:after { - clear: both; -} -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.input-block-level { - display: block; - width: 100%; - min-height: 30px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} /** * Select2 Bootstrap CSS 1.0 * Compatible with select2 3.3.2 and bootstrap 2.3.1 @@ -33,6 +6,7 @@ .select2-container { vertical-align: middle; } + .select2-container .select2-choice, .select2-container-multi .select2-choices { height: 28px; @@ -42,25 +16,29 @@ -moz-border-radius: 4px; border-radius: 4px; background: none; - background-color: #ffffff; + background-color: white; filter: none; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } + .select2-container .select2-choice div, .select2-container.select2-container-disabled .select2-choice div { border-left: none; background: none; filter: none; } + .control-group.error [class^="select2-choice"] { border-color: #b94a48; } + .select2-container-multi .select2-choices .select2-search-field { height: 28px; line-height: 27px; } + .select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices { border-color: rgba(82, 168, 236, 0.8); @@ -69,31 +47,39 @@ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } + [class^="input-"] .select2-container { font-size: 14px; } + .input-prepend [class^="select2-choice"] { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .input-append [class^="select2-choice"] { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .select2-dropdown-open [class^="select2-choice"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + .select2-dropdown-open.select2-drop-above [class^="select2-choice"] { border-top-left-radius: 0; border-top-right-radius: 0; } + [class^="input-"] [class^="select2-choice"] > div { display: none; } + [class^="input-"] .select2-offscreen { position: absolute; } + /** * This stops the quick flash when a native selectbox is shown and * then replaced by a select2 input when javascript kicks in. This can be diff --git a/lib/build.scss b/lib/build.scss new file mode 100644 index 0000000..2975986 --- /dev/null +++ b/lib/build.scss @@ -0,0 +1,3 @@ +@import "../components/sass-bootstrap/lib/variables"; +@import "../components/sass-bootstrap/lib/mixins"; +@import "select2-bootstrap.scss"; \ No newline at end of file diff --git a/lib/select2-bootstrap.scss b/lib/select2-bootstrap.scss new file mode 100644 index 0000000..6429777 --- /dev/null +++ b/lib/select2-bootstrap.scss @@ -0,0 +1,87 @@ +/** + * Select2 Bootstrap CSS 1.0 + * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * MIT License + */ + +.select2-container { + vertical-align: middle; +} + +.select2-container .select2-choice, +.select2-container-multi .select2-choices { + height: $baseLineHeight + 8px; + line-height: $baseLineHeight + 9px; + border: 1px solid $inputBorder; + @include border-radius($inputBorderRadius); + background: none; + background-color: $inputBackground; + filter: none; + @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075)); +} + +.select2-container .select2-choice div, +.select2-container.select2-container-disabled .select2-choice div { + border-left: none; + background: none; + filter: none; +} + +.control-group.error [class^="select2-choice"] { + border-color: $errorText; +} + +.select2-container-multi .select2-choices .select2-search-field { + height: 28px; + line-height: 27px; +} + +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + border-color: rgba(82, 168, 236, 0.8); + outline: none; + @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)); +} + +[class^="input-"] .select2-container { + font-size: $baseFontSize; +} + +.input-prepend [class^="select2-choice"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-append [class^="select2-choice"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open [class^="select2-choice"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +[class^="input-"] [class^="select2-choice"] > div { + display: none; +} + +[class^="input-"] .select2-offscreen { + position: absolute; +} + +/** + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present + */ + +select.select2 { + height: 28px; + visibility: hidden; +} diff --git a/package.json b/package.json index 9b2ece6..88e1fd3 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-nodeunit": "~0.1.2", - "diff": "~1.0.4" + "diff": "~1.0.4", + "grunt-contrib-sass": "~0.3.0" } } diff --git a/test/less_test.js b/test/less_test.js index 92fbb9a..1d7d75d 100644 --- a/test/less_test.js +++ b/test/less_test.js @@ -9,20 +9,17 @@ exports.compileLess = function(test){ child = grunt.util.spawn({ cmd: 'lessc', args: ['--verbose', 'lib/build.less', 'docs/'+filename] - }); - - child.stdout.pipe(process.stdout); - child.stdout.on('data', function(buf) { - var readFile = function(name) { return fs.readFileSync(name, {encoding: 'utf8'}) }, - orig = readFile(filename), - generated = readFile('docs/'+filename), - patch = readFile(patchfile), - diff = jsdiff.createPatch(filename, orig, generated); + }, function() { + var readFile = function(name) { return fs.readFileSync(name, {encoding: 'utf8'}) }, + orig = readFile(filename), + generated = readFile('docs/'+filename), + patch = readFile(patchfile), + diff = jsdiff.createPatch(filename, orig, generated); - // Save the output for future tests. - // fs.writeFileSync(patchfile, diff); + // Save the output for future tests. + // fs.writeFileSync(patchfile, diff); - t.equal(patch, diff); - t.done(); - }); + t.equal(patch, diff); + t.done(); + }); }; \ No newline at end of file diff --git a/test/scss_test.js b/test/scss_test.js new file mode 100644 index 0000000..b97ecf0 --- /dev/null +++ b/test/scss_test.js @@ -0,0 +1,25 @@ +exports.compileScss = function(test){ + var grunt = require('grunt'), + fs = require('fs'), + jsdiff = require('diff'), + t = test, + filename = 'select2-bootstrap.css', + patchfile = 'test/support/scss.patch', + // This is writing to the actual docs folder, generally a no-no for tests to make changes! + child = grunt.util.spawn({ + cmd: 'grunt', + args: ['sass'] + }, function() { + var readFile = function(name) { return fs.readFileSync(name, {encoding: 'utf8'}) }, + orig = readFile(filename), + generated = readFile('docs/'+filename), + patch = readFile(patchfile), + diff = jsdiff.createPatch(filename, orig, generated); + + // Save the output for future tests. + // fs.writeFileSync(patchfile, diff); + + t.equal(patch, diff); + t.done(); + }); +}; \ No newline at end of file diff --git a/test/support/scss.patch b/test/support/scss.patch new file mode 100644 index 0000000..7abcc51 --- /dev/null +++ b/test/support/scss.patch @@ -0,0 +1,25 @@ +Index: select2-bootstrap.css +=================================================================== +--- select2-bootstrap.css ++++ select2-bootstrap.css +@@ -2,9 +2,8 @@ + * Select2 Bootstrap CSS 1.0 + * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * MIT License + */ +- + .select2-container { + vertical-align: middle; + } + +@@ -16,9 +15,9 @@ + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + background: none; ++ background-color: white; +- background-color: #ffffff; + filter: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); From 5d8311719900f6219fca4fa46e0f02f4bfe458d1 Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Fri, 10 May 2013 15:30:25 -0400 Subject: [PATCH 08/10] Updated readme, and added dev dependency on bower. --- README.md | 13 ++++++++++--- package.json | 3 ++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 12fb329..6883c84 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,13 @@ -This is a bare bones stylesheet for making select2 fit in with bootstrap a bit better. -If I have some down time I'll make this into a less file so any custom settings will -carry over but for now it's targeted at the default bootstrap style. +# Select2 Bootstrap CSS + +This is a bare bones stylesheet for making select2 fit in with bootstrap a bit better. + +The LESS file is located at lib/select2-bootstrap.less, and the SCSS file is located at lib/select2-bootstrap.scss. + +Tests are included to verify that LESS and SCSS compile down to the target CSS. To run the tests, you'll need to install [node.js](http://nodejs.org/), [Less](http://lesscss.org/), and [SASS](http://sass-lang.com/). Then you can run: + + npm install && bower install + npm test ![preview image](http://t0m.github.com/select2-bootstrap-css/select2-preview.png) diff --git a/package.json b/package.json index 88e1fd3..ed68ec4 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "grunt": "~0.4.1", "grunt-contrib-nodeunit": "~0.1.2", "diff": "~1.0.4", - "grunt-contrib-sass": "~0.3.0" + "grunt-contrib-sass": "~0.3.0", + "bower": "~0.9.2" } } From b294a37251e78cbb76440fa3a896c56648259aa4 Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Mon, 13 May 2013 09:24:42 -0400 Subject: [PATCH 09/10] Added make task for copying docs to gh-pages and deploying. --- .gitignore | 3 ++- Makefile | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 Makefile diff --git a/.gitignore b/.gitignore index 2b77b41..ee2f811 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ build components node_modules -.sass-cache \ No newline at end of file +.sass-cache +gh-pages \ No newline at end of file diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..f0880ab --- /dev/null +++ b/Makefile @@ -0,0 +1,15 @@ +pages: + cd gh-pages; git fetch origin + cd gh-pages; git checkout gh-pages + cd gh-pages; git merge origin/gh-pages + rm -rf gh-pages/demo/* + cp -r docs/* gh-pages/demo + cd gh-pages; git add -u . + cd gh-pages; git add . + cd gh-pages; git commit -m "Updated gh-pages." + cd gh-pages; git push origin gh-pages + +pages_setup: + mkdir gh-pages + git init gh-pages + cd gh-pages; git remote add origin git@github.com:t0m/select2-bootstrap-css.git From ac35632aaddfa1e6e3a2401dd84c46a6068e7b16 Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Thu, 30 May 2013 10:18:45 -0400 Subject: [PATCH 10/10] Bumped version to v1.1.0. --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 5bb56db..9e10746 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "select2-bootstrap-css", - "version": "1.0.1", + "version": "1.1.0", "ignore": [ "**/.*", "node_modules", diff --git a/package.json b/package.json index ed68ec4..8cb8615 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "select2-bootstrap-css", - "version": "1.0.1", + "version": "1.1.0", "description": "simple css to make select2 widgets fit in with bootstrap", "main": "", "directories": {