mirror of
https://github.com/zhigang1992/bootstrap-tokenfield.git
synced 2026-01-12 17:12:44 +08:00
Update & improve styles. Mainy - better use of LESS.
This commit is contained in:
Illimar Tambek
167
dist/css/bootstrap-tokenfield.css
vendored
167
dist/css/bootstrap-tokenfield.css
vendored
@@ -1,59 +1,3 @@
|
||||
.tokenfield {
|
||||
height: auto;
|
||||
min-height: 34px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.tokenfield.focus {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
.has-warning .tokenfield.focus {
|
||||
border-color: #66512c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||
}
|
||||
.has-error .tokenfield.focus {
|
||||
border-color: #843534;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
}
|
||||
.has-success .tokenfield.focus {
|
||||
border-color: #2b542c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||
}
|
||||
.tokenfield .token {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
display: inline-block;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #ededed;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
margin: -1px 5px 5px 0;
|
||||
height: 22px;
|
||||
vertical-align: top;
|
||||
cursor: default;
|
||||
}
|
||||
.tokenfield .token:hover {
|
||||
border-color: #b9b9b9;
|
||||
}
|
||||
.tokenfield .token.active {
|
||||
border-color: #52a8ec;
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
}
|
||||
.tokenfield .token.duplicate {
|
||||
border-color: #b94a48;
|
||||
-webkit-animation-direction: normal;
|
||||
-webkit-animation-duration: 0.1s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-name: blink;
|
||||
-webkit-animation-timing-function: ease;
|
||||
}
|
||||
@-webkit-keyframes 'blink' {
|
||||
0% {
|
||||
border-color: #ededed;
|
||||
@@ -78,6 +22,68 @@
|
||||
border-color: #b94a48;
|
||||
}
|
||||
}
|
||||
.tokenfield {
|
||||
height: auto;
|
||||
min-height: 34px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.tokenfield.focus {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
.tokenfield .token {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #ededed;
|
||||
white-space: nowrap;
|
||||
margin: -1px 5px 5px 0;
|
||||
height: 22px;
|
||||
vertical-align: top;
|
||||
cursor: default;
|
||||
}
|
||||
.tokenfield .token:hover {
|
||||
border-color: #b9b9b9;
|
||||
}
|
||||
.tokenfield .token.active {
|
||||
border-color: #52a8ec;
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
}
|
||||
.tokenfield .token.duplicate {
|
||||
border-color: #ebccd1;
|
||||
-webkit-animation-name: blink;
|
||||
animation-name: blink;
|
||||
-webkit-animation-duration: 0.1s;
|
||||
animation-duration: 0.1s;
|
||||
-webkit-animation-direction: normal;
|
||||
animation-direction: normal;
|
||||
-webkit-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.tokenfield .token.invalid {
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px dotted #ebccd1;
|
||||
}
|
||||
.tokenfield .token.invalid.active {
|
||||
background: #ededed;
|
||||
border: 1px solid #ededed;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.tokenfield .token .token-label {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
@@ -102,50 +108,50 @@
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
margin-bottom: 6px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.tokenfield .token-input:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
/* IE6-9 */
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* Invalid token */
|
||||
.tokenfield .token.invalid {
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px dotted #b94a48;
|
||||
}
|
||||
.tokenfield .token.invalid.active {
|
||||
background: #ededed;
|
||||
border: 1px solid #ededed;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
/* Disabled tokenfield */
|
||||
.tokenfield.disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #eee;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.tokenfield.disabled .token-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.tokenfield.disabled .close:hover {
|
||||
.tokenfield.disabled .token:hover {
|
||||
cursor: not-allowed;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
.tokenfield.disabled .token:hover .close {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.2;
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
.has-warning .tokenfield.focus {
|
||||
border-color: #66512c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||
}
|
||||
.has-error .tokenfield.focus {
|
||||
border-color: #843534;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
}
|
||||
.has-success .tokenfield.focus {
|
||||
border-color: #2b542c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||
}
|
||||
/* Different sizes */
|
||||
.tokenfield.input-sm,
|
||||
.input-group-sm .tokenfield {
|
||||
min-height: 30px;
|
||||
@@ -185,7 +191,6 @@
|
||||
margin-bottom: 6px;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* RTL */
|
||||
.tokenfield.rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
|
||||
2
dist/css/bootstrap-tokenfield.min.css
vendored
2
dist/css/bootstrap-tokenfield.min.css
vendored
@@ -1 +1 @@
|
||||
.tokenfield{height:auto;min-height:34px;padding-bottom:0}.tokenfield.focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.has-warning .tokenfield.focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-error .tokenfield.focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-success .tokenfield.focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.tokenfield .token{box-sizing:border-box;-moz-box-sizing:border-box;display:inline-block;border:1px solid #d9d9d9;background-color:#ededed;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:nowrap;margin:-1px 5px 5px 0;height:22px;vertical-align:top;cursor:default}.tokenfield .token:hover{border-color:#b9b9b9}.tokenfield .token.active{border-color:#52a8ec;border-color:rgba(82,168,236,.8)}.tokenfield .token.duplicate{border-color:#b94a48;-webkit-animation-direction:normal;-webkit-animation-duration:.1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:blink;-webkit-animation-timing-function:ease}@-webkit-keyframes 'blink'{0%{border-color:#ededed}100%{border-color:#b94a48}}@-moz-keyframes 'blink'{0%{border-color:#ededed}100%{border-color:#b94a48}}@keyframes 'blink'{0%{border-color:#ededed}100%{border-color:#b94a48}}.tokenfield .token .token-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;padding-left:4px;vertical-align:top}.tokenfield .token .close{font-family:Arial;display:inline-block;line-height:100%;font-size:1.1em;line-height:1.49em;margin-left:5px;float:none;height:100%;vertical-align:top;padding-right:4px}.tokenfield .token-input{background:0 0;width:60px;min-width:60px;border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;height:20px;padding:0;margin-bottom:6px}.tokenfield .token-input:focus{border-color:transparent;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.tokenfield .token.invalid{background:0 0;border:1px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-bottom:1px dotted #b94a48}.tokenfield .token.invalid.active{background:#ededed;border:1px solid #ededed;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.tokenfield.disabled{cursor:not-allowed;background-color:#eee}.tokenfield.disabled .token-input{cursor:not-allowed}.tokenfield.disabled .close:hover{cursor:not-allowed;opacity:.2}.tokenfield.input-sm,.input-group-sm .tokenfield{min-height:30px;padding-bottom:0}.input-group-sm .token,.tokenfield.input-sm .token{height:20px;margin-bottom:4px}.input-group-sm .token-input,.tokenfield.input-sm .token-input{height:18px;margin-bottom:5px}.tokenfield.input-lg,.input-group-lg .tokenfield{min-height:45px;padding-bottom:4px}.input-group-lg .token,.tokenfield.input-lg .token{height:25px}.input-group-lg .token-label,.tokenfield.input-lg .token-label{line-height:23px}.input-group-lg .token .close,.tokenfield.input-lg .token .close{line-height:1.3em}.input-group-lg .token-input,.tokenfield.input-lg .token-input{height:23px;line-height:23px;margin-bottom:6px;vertical-align:top}.tokenfield.rtl{direction:rtl;text-align:right}.tokenfield.rtl .token{margin:-1px 0 5px 5px}.tokenfield.rtl .token .token-label{padding-left:0;padding-right:4px}
|
||||
@-webkit-keyframes 'blink'{0%{border-color:#ededed}100%{border-color:#b94a48}}@-moz-keyframes 'blink'{0%{border-color:#ededed}100%{border-color:#b94a48}}@keyframes 'blink'{0%{border-color:#ededed}100%{border-color:#b94a48}}.tokenfield{height:auto;min-height:34px;padding-bottom:0}.tokenfield.focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.tokenfield .token{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;border:1px solid #d9d9d9;background-color:#ededed;white-space:nowrap;margin:-1px 5px 5px 0;height:22px;vertical-align:top;cursor:default}.tokenfield .token:hover{border-color:#b9b9b9}.tokenfield .token.active{border-color:#52a8ec;border-color:rgba(82,168,236,.8)}.tokenfield .token.duplicate{border-color:#ebccd1;-webkit-animation-name:blink;animation-name:blink;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.tokenfield .token.invalid{background:0 0;border:1px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-bottom:1px dotted #ebccd1}.tokenfield .token.invalid.active{background:#ededed;border:1px solid #ededed;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.tokenfield .token .token-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;padding-left:4px;vertical-align:top}.tokenfield .token .close{font-family:Arial;display:inline-block;line-height:100%;font-size:1.1em;line-height:1.49em;margin-left:5px;float:none;height:100%;vertical-align:top;padding-right:4px}.tokenfield .token-input{background:0 0;width:60px;min-width:60px;border:0;height:20px;padding:0;margin-bottom:6px;-webkit-box-shadow:none;box-shadow:none}.tokenfield .token-input:focus{border-color:transparent;outline:0;-webkit-box-shadow:none;box-shadow:none}.tokenfield.disabled{cursor:not-allowed;background-color:#eee}.tokenfield.disabled .token-input{cursor:not-allowed}.tokenfield.disabled .token:hover{cursor:not-allowed;border-color:#d9d9d9}.tokenfield.disabled .token:hover .close{cursor:not-allowed;opacity:.2;filter:alpha(opacity=20)}.has-warning .tokenfield.focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-error .tokenfield.focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-success .tokenfield.focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.tokenfield.input-sm,.input-group-sm .tokenfield{min-height:30px;padding-bottom:0}.input-group-sm .token,.tokenfield.input-sm .token{height:20px;margin-bottom:4px}.input-group-sm .token-input,.tokenfield.input-sm .token-input{height:18px;margin-bottom:5px}.tokenfield.input-lg,.input-group-lg .tokenfield{min-height:45px;padding-bottom:4px}.input-group-lg .token,.tokenfield.input-lg .token{height:25px}.input-group-lg .token-label,.tokenfield.input-lg .token-label{line-height:23px}.input-group-lg .token .close,.tokenfield.input-lg .token .close{line-height:1.3em}.input-group-lg .token-input,.tokenfield.input-lg .token-input{height:23px;line-height:23px;margin-bottom:6px;vertical-align:top}.tokenfield.rtl{direction:rtl;text-align:right}.tokenfield.rtl .token{margin:-1px 0 5px 5px}.tokenfield.rtl .token .token-label{padding-left:0;padding-right:4px}
|
||||
200
less/bootstrap-tokenfield.css
vendored
200
less/bootstrap-tokenfield.css
vendored
@@ -1,200 +0,0 @@
|
||||
.tokenfield {
|
||||
height: auto;
|
||||
min-height: 34px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.tokenfield.focus {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
.has-warning .tokenfield.focus {
|
||||
border-color: #66512c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||
}
|
||||
.has-error .tokenfield.focus {
|
||||
border-color: #843534;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
}
|
||||
.has-success .tokenfield.focus {
|
||||
border-color: #2b542c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||
}
|
||||
.tokenfield .token {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
display: inline-block;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #ededed;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
margin: -1px 5px 5px 0;
|
||||
height: 22px;
|
||||
vertical-align: top;
|
||||
cursor: default;
|
||||
}
|
||||
.tokenfield .token:hover {
|
||||
border-color: #b9b9b9;
|
||||
}
|
||||
.tokenfield .token.active {
|
||||
border-color: #52a8ec;
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
}
|
||||
.tokenfield .token.duplicate {
|
||||
border-color: #b94a48;
|
||||
-webkit-animation-direction: normal;
|
||||
-webkit-animation-duration: 0.1s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-name: blink;
|
||||
-webkit-animation-timing-function: ease;
|
||||
}
|
||||
@-webkit-keyframes 'blink' {
|
||||
0% {
|
||||
border-color: #ededed;
|
||||
}
|
||||
100% {
|
||||
border-color: #b94a48;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes 'blink' {
|
||||
0% {
|
||||
border-color: #ededed;
|
||||
}
|
||||
100% {
|
||||
border-color: #b94a48;
|
||||
}
|
||||
}
|
||||
@keyframes 'blink' {
|
||||
0% {
|
||||
border-color: #ededed;
|
||||
}
|
||||
100% {
|
||||
border-color: #b94a48;
|
||||
}
|
||||
}
|
||||
.tokenfield .token .token-label {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.tokenfield .token .close {
|
||||
font-family: Arial;
|
||||
display: inline-block;
|
||||
line-height: 100%;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.49em;
|
||||
margin-left: 5px;
|
||||
float: none;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.tokenfield .token-input {
|
||||
background: none;
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.tokenfield .token-input:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
/* IE6-9 */
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* Invalid token */
|
||||
.tokenfield .token.invalid {
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px dotted #b94a48;
|
||||
}
|
||||
.tokenfield .token.invalid.active {
|
||||
background: #ededed;
|
||||
border: 1px solid #ededed;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
/* Disabled tokenfield */
|
||||
.tokenfield.disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #eee;
|
||||
}
|
||||
.tokenfield.disabled .token-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.tokenfield.disabled .close:hover {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.2;
|
||||
}
|
||||
/* Different sizes */
|
||||
.tokenfield.input-sm,
|
||||
.input-group-sm .tokenfield {
|
||||
min-height: 30px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.input-group-sm .token,
|
||||
.tokenfield.input-sm .token {
|
||||
height: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.input-group-sm .token-input,
|
||||
.tokenfield.input-sm .token-input {
|
||||
height: 18px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.tokenfield.input-lg,
|
||||
.input-group-lg .tokenfield {
|
||||
min-height: 45px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.input-group-lg .token,
|
||||
.tokenfield.input-lg .token {
|
||||
height: 25px;
|
||||
}
|
||||
.input-group-lg .token-label,
|
||||
.tokenfield.input-lg .token-label {
|
||||
line-height: 23px;
|
||||
}
|
||||
.input-group-lg .token .close,
|
||||
.tokenfield.input-lg .token .close {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
.input-group-lg .token-input,
|
||||
.tokenfield.input-lg .token-input {
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
margin-bottom: 6px;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* RTL */
|
||||
.tokenfield.rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
.tokenfield.rtl .token {
|
||||
margin: -1px 0 5px 5px;
|
||||
}
|
||||
.tokenfield.rtl .token .token-label {
|
||||
padding-left: 0px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
250
less/bootstrap-tokenfield.less
vendored
250
less/bootstrap-tokenfield.less
vendored
@@ -1,6 +1,18 @@
|
||||
@import "../bower_components/bootstrap/less/mixins.less";
|
||||
@import "../bower_components/bootstrap/less/variables.less";
|
||||
|
||||
// Variables
|
||||
|
||||
@token-background: #ededed;
|
||||
@token-border: #d9d9d9;
|
||||
@token-hover-border: #b9b9b9;
|
||||
@token-active-border: rgba(82, 168, 236, 0.8);
|
||||
@token-active-border-fallback: rgb(82, 168, 236); // IE8
|
||||
@token-active-invalid-border: @token-background;
|
||||
|
||||
|
||||
// Mixins
|
||||
|
||||
.tokenfield-focus(@color: @input-border-focus) {
|
||||
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
|
||||
border-color: @color;
|
||||
@@ -14,56 +26,13 @@
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
.tokenfield {
|
||||
height: auto;
|
||||
min-height: @input-height-base;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.tokenfield.focus {
|
||||
.tokenfield-focus();
|
||||
}
|
||||
.has-warning .tokenfield.focus {
|
||||
.tokenfield-validation(@state-warning-text);
|
||||
}
|
||||
.has-error .tokenfield.focus {
|
||||
.tokenfield-validation(@state-danger-text);
|
||||
}
|
||||
.has-success .tokenfield.focus {
|
||||
.tokenfield-validation(@state-success-text);
|
||||
.border-radius(@border-radius) {
|
||||
-webkit-border-radius: @border-radius;
|
||||
-moz-border-radius: @border-radius;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
.tokenfield .token {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
display: inline-block;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #ededed;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
margin: -1px 5px 5px 0;
|
||||
height: 22px;
|
||||
vertical-align: top;
|
||||
cursor: default;
|
||||
}
|
||||
.tokenfield .token:hover {
|
||||
border-color: #b9b9b9;
|
||||
}
|
||||
|
||||
.tokenfield .token.active {
|
||||
border-color: rgb(82, 168, 236);
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
}
|
||||
|
||||
.tokenfield .token.duplicate {
|
||||
border-color: #b94a48;
|
||||
-webkit-animation-direction: normal;
|
||||
-webkit-animation-duration: 0.1s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-name: blink;
|
||||
-webkit-animation-timing-function: ease;
|
||||
}
|
||||
// Blink animation for duplicate tokens
|
||||
|
||||
@-webkit-keyframes 'blink' {
|
||||
0% {
|
||||
@@ -90,79 +59,125 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tokenfield .token .token-label {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 4px;
|
||||
vertical-align: top;
|
||||
// Tokenfield
|
||||
|
||||
.tokenfield {
|
||||
height: auto;
|
||||
min-height: @input-height-base;
|
||||
padding-bottom: 0px;
|
||||
&.focus {
|
||||
.tokenfield-focus();
|
||||
}
|
||||
|
||||
// Tokens
|
||||
.token {
|
||||
.box-sizing(border-box);
|
||||
.border-radius(3px);
|
||||
display: inline-block;
|
||||
border: 1px solid @token-border;
|
||||
background-color: @token-background;
|
||||
white-space: nowrap;
|
||||
margin: -1px 5px 5px 0;
|
||||
height: 22px;
|
||||
vertical-align: top;
|
||||
cursor: default;
|
||||
&:hover {
|
||||
border-color: @token-hover-border;
|
||||
}
|
||||
&.active {
|
||||
border-color: rgb(82, 168, 236);
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
}
|
||||
&.duplicate {
|
||||
border-color: @state-danger-border;
|
||||
.animation-name(blink);
|
||||
.animation-duration(0.1s);
|
||||
.animation-direction(normal);
|
||||
.animation-timing-function(ease);
|
||||
.animation-iteration-count(infinite);
|
||||
}
|
||||
&.invalid {
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
.border-radius(0);
|
||||
border-bottom: 1px dotted @state-danger-border;
|
||||
&.active {
|
||||
background: @token-background;
|
||||
border: 1px solid @token-active-invalid-border;
|
||||
.border-radius(3px);
|
||||
}
|
||||
}
|
||||
.token-label {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.close {
|
||||
font-family: Arial;
|
||||
display: inline-block;
|
||||
line-height: 100%;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.49em;
|
||||
margin-left: 5px;
|
||||
float: none;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Inputs
|
||||
.token-input {
|
||||
background: none;
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
border: 0;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
margin-bottom: 6px;
|
||||
.box-shadow(none);
|
||||
}
|
||||
.token-input:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
/* IE6-9 */
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: @gray-lighter;
|
||||
.token-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.token:hover {
|
||||
cursor: not-allowed;
|
||||
border-color: @token-border;
|
||||
.close {
|
||||
cursor: not-allowed;
|
||||
.opacity(0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tokenfield .token .close {
|
||||
font-family: Arial;
|
||||
display: inline-block;
|
||||
line-height: 100%;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.49em;
|
||||
margin-left: 5px;
|
||||
float: none;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
padding-right: 4px;
|
||||
// Validation states
|
||||
|
||||
.has-warning .tokenfield.focus {
|
||||
.tokenfield-validation(@state-warning-text);
|
||||
}
|
||||
.has-error .tokenfield.focus {
|
||||
.tokenfield-validation(@state-danger-text);
|
||||
}
|
||||
.has-success .tokenfield.focus {
|
||||
.tokenfield-validation(@state-success-text);
|
||||
}
|
||||
|
||||
.tokenfield .token-input {
|
||||
background: none;
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.tokenfield .token-input:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
/* IE6-9 */
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
// Various sizes
|
||||
|
||||
/* Invalid token */
|
||||
.tokenfield .token.invalid {
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px dotted #b94a48;
|
||||
}
|
||||
.tokenfield .token.invalid.active {
|
||||
background: #ededed;
|
||||
border: 1px solid #ededed;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Disabled tokenfield */
|
||||
.tokenfield.disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #eee;
|
||||
}
|
||||
.tokenfield.disabled .token-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.tokenfield.disabled .close:hover {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
/* Different sizes */
|
||||
.tokenfield.input-sm,
|
||||
.input-group-sm .tokenfield {
|
||||
min-height: 30px;
|
||||
@@ -204,7 +219,8 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* RTL */
|
||||
// RTL
|
||||
|
||||
.tokenfield.rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
|
||||
@@ -1,137 +0,0 @@
|
||||
/* General Typeahead styling, from http://jsfiddle.net/ragulka/Dy9au/1/ */
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
.twitter-typeahead .tt-query,
|
||||
.twitter-typeahead .tt-hint {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.twitter-typeahead .tt-hint {
|
||||
color: #999999;
|
||||
z-index: 1;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.twitter-typeahead .tt-query {
|
||||
color: #555555;
|
||||
z-index: 2;
|
||||
}
|
||||
.twitter-typeahead .tt-query,
|
||||
.twitter-typeahead .tt-hint {
|
||||
height: 34px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
.twitter-typeahead .input-sm.tt-query,
|
||||
.twitter-typeahead .hint-sm.tt-hint {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.twitter-typeahead .input-lg.tt-query,
|
||||
.twitter-typeahead .hint-lg.tt-hint {
|
||||
border-radius: 6px;
|
||||
}
|
||||
.input-group .twitter-typeahead:first-child .tt-query,
|
||||
.input-group .twitter-typeahead:first-child .tt-hint {
|
||||
border-radius: 4px 0 0 4px !important;
|
||||
}
|
||||
.input-group .twitter-typeahead:last-child .tt-query,
|
||||
.input-group .twitter-typeahead:last-child .tt-hint {
|
||||
border-radius: 0 4px 4px 0 !important;
|
||||
}
|
||||
.input-group.input-group-sm .twitter-typeahead:first-child .tt-query,
|
||||
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
|
||||
border-radius: 3px 0 0 3px !important;
|
||||
}
|
||||
.input-group.input-group-sm .twitter-typeahead:last-child .tt-query,
|
||||
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
|
||||
border-radius: 0 3px 3px 0 !important;
|
||||
}
|
||||
.input-sm.tt-query,
|
||||
.hint-sm.tt-hint,
|
||||
.input-group.input-group-sm .tt-query,
|
||||
.input-group.input-group-sm .tt-hint {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.input-group.input-group-lg .twitter-typeahead:first-child .tt-query,
|
||||
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
|
||||
border-radius: 6px 0 0 6px !important;
|
||||
}
|
||||
.input-group.input-group-lg .twitter-typeahead:last-child .tt-query,
|
||||
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
|
||||
border-radius: 0 6px 6px 0 !important;
|
||||
}
|
||||
.input-lg.tt-query,
|
||||
.hint-lg.tt-hint,
|
||||
.input-group.input-group-lg .tt-query,
|
||||
.input-group.input-group-lg .tt-hint {
|
||||
height: 45px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
}
|
||||
.tt-dropdown-menu {
|
||||
width: 100%;
|
||||
min-width: 160px;
|
||||
margin-top: 2px;
|
||||
padding: 5px 0;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
*border-right-width: 2px;
|
||||
*border-bottom-width: 2px;
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.tt-suggestion {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
}
|
||||
.tt-suggestion.tt-is-under-cursor {
|
||||
color: #262626;
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
|
||||
}
|
||||
.tt-suggestion.tt-is-under-cursor a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.tt-suggestion p {
|
||||
margin: 0;
|
||||
}
|
||||
/* Tokenfield-specific Typeahead styling */
|
||||
.tokenfield .twitter-typeahead {
|
||||
width: auto;
|
||||
}
|
||||
.tokenfield .twitter-typeahead .tt-hint {
|
||||
padding: 0;
|
||||
margin-left: -1px;
|
||||
height: 20px;
|
||||
}
|
||||
.tokenfield.input-sm .twitter-typeahead .tt-query,
|
||||
.tokenfield.input-sm .twitter-typeahead .tt-hint {
|
||||
height: 18px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.tokenfield.input-lg .twitter-typeahead .tt-query,
|
||||
.tokenfield.input-lg .twitter-typeahead .tt-hint {
|
||||
height: 23px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
}
|
||||
.tokenfield .twitter-typeahead .tt-suggestions {
|
||||
font-size: 14px;
|
||||
}
|
||||
Reference in New Issue
Block a user