From 0b7c631863eef2295b74272973d1d425d2e8f470 Mon Sep 17 00:00:00 2001
From: Andrew Abogado <me@andrewabogado.com>
Date: Wed, 22 Aug 2012 11:27:52 +0800
Subject: [PATCH] Update with Bootstrap's variables and mixins

- Remove the backup README.me~ file
---
 README.md~                  | 14 ----------
 token-input-bootstrappy.css | 51 +++++++++++++++++--------------------
 2 files changed, 23 insertions(+), 42 deletions(-)
 delete mode 100644 README.md~

diff --git a/README.md~ b/README.md~
deleted file mode 100644
index 928814f..0000000
--- a/README.md~
+++ /dev/null
@@ -1,14 +0,0 @@
-#jquery-tokeninput-bootstrap-sass-theme
-
-This is a css bootstrappy theme for jQuery Tokeninput http://loopj.com/jquery-tokeninput. It styles the tokeninput field to blend in with the bootstrap theme.
-
-It requires bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass.
-
-##Use
-
-For use with Rails 3. May work elsewhere, but not tested.
-
-This css file works with the facebook theme option of jQuery Tokeninput, so include 'theme: "facebook"' in the initialization. Then place this css file in one of your assets directories and include it in your application.css file (or elsewhere). 
-
-
-
diff --git a/token-input-bootstrappy.css b/token-input-bootstrappy.css
index e1669d3..e48296c 100644
--- a/token-input-bootstrappy.css
+++ b/token-input-bootstrappy.css
@@ -4,27 +4,24 @@ ul.token-input-list-facebook {
     height: auto !important; 
     height: 1%;
     width: 400px;
-    border: 1px solid #BBB;
+    border: 1px solid $inputBorder;
     cursor: text;
-    font-size: 12px;
-    font-family: Verdana, sans-serif;
+    font-size: $baseFontSize;
+    font-family: $sansFontFamily;
     min-height: 1px;
     z-index: 999;
     margin: 0;
     padding: 0;
-    background-color: #fff;
+    background-color: $sansFontFamily;
     list-style-type: none;
     clear: left;
-    -webkit-border-radius: 3px;
-		-moz-border-radius: 3px;
-		border-radius: 3px;
+    @include border-radius(3px);
 }
 
 ul.token-input-list-facebook.token-input-focused-facebook {
+    border-color: #59abea; // for old browsers
 	border-color: rgba(82, 168, 236, 0.8);
-	-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);
+    @include box-shadow(#{inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)});	
 	outline: 0;
 	outline: thin dotted 9;
 }
@@ -33,7 +30,7 @@ ul.token-input-list-facebook li input {
     border: 0;
     width: 100px;
     padding: 3px 8px;
-    background-color: white;
+    background-color: $white;
     margin: 2px 0;
     -webkit-appearance: caret;
 }
@@ -44,14 +41,12 @@ li.token-input-token-facebook {
     height: 15px;
     margin: 3px;
     padding: 1px 3px;
-    background-color: #F5F5F5;
+    background-color: darken($white, 4%);
     color: #555;
     cursor: default;
-    border: 1px solid #BBB;
+    border: 1px solid $inputBorder;
     font-size: 11px;
-    border-radius: 5px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
+    @include border-radius(5px);
     float: left;
     white-space: nowrap;
 }
@@ -70,9 +65,9 @@ li.token-input-token-facebook span {
 }
 
 li.token-input-selected-token-facebook {
-    background-color: #5670a6;
-    border: 1px solid #3b5998;
-    color: #fff;
+    background-color: $infoText;
+    border: 1px solid darken($infoText, 5%);
+    color: $white;
 }
 
 li.token-input-input-token-facebook {
@@ -85,14 +80,14 @@ li.token-input-input-token-facebook {
 div.token-input-dropdown-facebook {
     position: absolute;
     width: 400px;
-    background-color: #F5F5F5;
+    background-color: darken($white, 4%);
     overflow: hidden;
     border-left: 1px solid #ccc;
     border-right: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     cursor: default;
-    font-size: 12px;
-    font-family: Verdana, sans-serif;
+    font-size: $baseFontSize;;
+    font-family: $sansFontFamily;
     z-index: 1;
 }
 
@@ -100,7 +95,7 @@ div.token-input-dropdown-facebook p {
     margin: 0;
     padding: 5px;
     font-weight: bold;
-    color: #555;
+    color: $gray;
 }
 
 div.token-input-dropdown-facebook ul {
@@ -109,18 +104,18 @@ div.token-input-dropdown-facebook ul {
 }
 
 div.token-input-dropdown-facebook ul li {
-    background-color: #f5f5f5;
+    background-color: darken($white, 4%);
     padding: 3px;
     margin: 0;
     list-style-type: none;
 }
 
 div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
-    background-color: #f5f5f5;
+    background-color: darken($white, 4%);
 }
 
 div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
-    background-color: #f5f5f5;
+    background-color: darken($white, 4%);
 }
 
 div.token-input-dropdown-facebook ul li em {
@@ -129,6 +124,6 @@ div.token-input-dropdown-facebook ul li em {
 }
 
 div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
-    background-color: #08C;
-    color: #f5f5f5;
+    background-color: $linkColor;
+    color: $white;
 }
\ No newline at end of file