From 4432e0563b72db2c78ab427875653e97ebef6fca Mon Sep 17 00:00:00 2001 From: Illimar Tambek Date: Fri, 7 Mar 2014 08:59:50 +0200 Subject: [PATCH] Update & improve styles. Mainy - better use of LESS. --- dist/css/bootstrap-tokenfield.css | 167 ++++++++--------- dist/css/bootstrap-tokenfield.min.css | 2 +- less/bootstrap-tokenfield.css | 200 --------------------- less/bootstrap-tokenfield.less | 250 ++++++++++++++------------ less/tokenfield-typeahead.css | 137 -------------- 5 files changed, 220 insertions(+), 536 deletions(-) delete mode 100644 less/bootstrap-tokenfield.css delete mode 100644 less/tokenfield-typeahead.css diff --git a/dist/css/bootstrap-tokenfield.css b/dist/css/bootstrap-tokenfield.css index 9ac5fa1..7b89223 100644 --- a/dist/css/bootstrap-tokenfield.css +++ b/dist/css/bootstrap-tokenfield.css @@ -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; diff --git a/dist/css/bootstrap-tokenfield.min.css b/dist/css/bootstrap-tokenfield.min.css index b621bf4..2ec2f64 100644 --- a/dist/css/bootstrap-tokenfield.min.css +++ b/dist/css/bootstrap-tokenfield.min.css @@ -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} \ No newline at end of file +@-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} \ No newline at end of file diff --git a/less/bootstrap-tokenfield.css b/less/bootstrap-tokenfield.css deleted file mode 100644 index fd2cc4b..0000000 --- a/less/bootstrap-tokenfield.css +++ /dev/null @@ -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; -} diff --git a/less/bootstrap-tokenfield.less b/less/bootstrap-tokenfield.less index 3f856d8..e791ab3 100644 --- a/less/bootstrap-tokenfield.less +++ b/less/bootstrap-tokenfield.less @@ -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; diff --git a/less/tokenfield-typeahead.css b/less/tokenfield-typeahead.css deleted file mode 100644 index 0c38a4f..0000000 --- a/less/tokenfield-typeahead.css +++ /dev/null @@ -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; -}