Created
July 6, 2012 19:03
-
-
Save todc/3062133 to your computer and use it in GitHub Desktop.
Google-esque styling for jquery.tokeninput.js plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ul.token-input-list-facebook { | |
overflow: hidden; | |
height: auto !important; | |
height: 30px; | |
max-width: 400px; | |
border: 1px solid #8496ba; | |
cursor: text; | |
font-size: 12px; | |
font-family: Verdana; | |
min-height: 1px; | |
z-index: 999; | |
margin: 0; | |
padding: 0; | |
background-color: #fff; | |
list-style-type: none; | |
clear: left; | |
border: 1px solid #d9d9d9; | |
border-top: 1px solid #c0c0c0; | |
.box-shadow(none); | |
.box-sizing(border-box); | |
.border-radius(1px); | |
} | |
ul.token-input-list-facebook:hover { | |
border: 1px solid #b9b9b9; | |
} | |
ul.token-input-input-token-facebook li input, | |
ul.token-input-list-facebook li input { | |
width: 100px; | |
padding: 3px 8px; | |
background-color: transparent; | |
margin: 0; | |
font-family: Verdana, Arial, sans-serif; | |
font-size: 12px; | |
height: auto; | |
-webkit-appearance: caret; | |
border-color: transparent; | |
} | |
ul.token-input-list-facebook li input:hover { | |
border-color: transparent; | |
.box-shadow(none); | |
} | |
ul.token-input-list-facebook li input:focus, | |
ul.token-input-list-facebook li input:active { | |
border-color: transparent; | |
.box-shadow(none); | |
} | |
li.token-input-token-facebook { | |
overflow: hidden; | |
height: auto !important; | |
line-height: 23px; | |
padding: 0 0 0 5px; | |
margin: 1px; | |
background-color: #DAE4F6; | |
color: #222; | |
cursor: default; | |
border: 1px solid #DAE4F6; | |
font-size: 12px; | |
font-family: Arial, sans-serif; | |
.border-radius(2px); | |
float: left; | |
white-space: nowrap; | |
vertical-align: top; | |
-webkit-user-select: none; | |
} | |
li.token-input-token-facebook p { | |
display: inline; | |
padding: 0; | |
margin: 0; | |
} | |
li.token-input-token-facebook span { | |
color: #444; | |
font-size: 17px; | |
font-family: Arial, sans-serif; | |
margin: 0; | |
padding: 1px 4px; | |
font-weight: bold; | |
line-height: 23px; | |
vertical-align: top; | |
cursor: pointer; | |
} | |
li.token-input-selected-token-facebook { | |
background-color: #A6D7F5; | |
border: 1px solid #A6D7F5; | |
color: #222; | |
} | |
li.token-input-input-token-facebook { | |
float: left; | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
div.token-input-dropdown-facebook { | |
position: absolute; | |
top: 100%; | |
left: 0; | |
float: left; | |
width: 100%; | |
max-width: 386px; | |
background-color: #fff; | |
overflow: hidden; | |
cursor: default; | |
font-size: 13px; | |
font-family: Arial, sans-serif; | |
line-height: 16px; | |
z-index: 10000; | |
padding: 1px; | |
margin-top: 1px; | |
border: 1px solid rgba(0, 0, 0, 0.2); | |
.box-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); | |
} | |
div.token-input-dropdown-facebook p { | |
margin: 0; | |
padding: 5px; | |
font-weight: bold; | |
color: #222; | |
} | |
div.token-input-dropdown-facebook ul { | |
margin: 0; | |
padding: 0; | |
} | |
div.token-input-dropdown-facebook ul li { | |
background-color: #fff; | |
padding: 6px 10px; | |
margin: 0; | |
list-style-type: none; | |
} | |
div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook { | |
background-color: #fff; | |
} | |
div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook { | |
background-color: #fff; | |
} | |
div.token-input-dropdown-facebook ul li em { | |
font-weight: bold; | |
font-style: normal; | |
} | |
div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { | |
background-color: #eee; | |
color: #222; | |
} | |
ul.token-input-list-facebook.token-input-focus { | |
border: 1px solid #4d90fe; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment