scratch – Blame information for rev 134

Subversion Repositories:
Rev:
Rev Author Line No. Line
134 office 1 /*!
2 * bootstrap-tokenfield
3 * https://github.com/sliptree/bootstrap-tokenfield
4 * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
5 */
6  
7 @import "../bower_components/bootstrap/less/mixins.less";
8 @import "../bower_components/bootstrap/less/variables.less";
9  
10 // Variables
11  
12 @token-background: #ededed;
13 @token-border: #d9d9d9;
14 @token-hover-border: #b9b9b9;
15 @token-active-border: rgba(82, 168, 236, 0.8);
16 @token-active-border-fallback: rgb(82, 168, 236); // IE8
17 @token-active-invalid-border: @token-background;
18  
19  
20 // Mixins
21  
22 .tokenfield-focus(@color: @input-border-focus) {
23 @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
24 border-color: @color;
25 outline: 0;
26 .box-shadow(~"inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px @{color-rgba}");
27 }
28  
29 .tokenfield-validation(@border-color) {
30 border-color: darken(@border-color, 10%);
31 @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@border-color, 20%);
32 .box-shadow(@shadow);
33 }
34  
35 .border-radius(@border-radius) {
36 -webkit-border-radius: @border-radius;
37 -moz-border-radius: @border-radius;
38 border-radius: @border-radius;
39 }
40  
41 // Blink animation for duplicate tokens
42  
43 @-webkit-keyframes blink {
44 0% {
45 border-color: #ededed;
46 }
47 100% {
48 border-color: #b94a48;
49 }
50 }
51 @-moz-keyframes blink {
52 0% {
53 border-color: #ededed;
54 }
55 100% {
56 border-color: #b94a48;
57 }
58 }
59 @keyframes blink {
60 0% {
61 border-color: #ededed;
62 }
63 100% {
64 border-color: #b94a48;
65 }
66 }
67  
68 // Tokenfield
69  
70 .tokenfield {
71 height: auto;
72 min-height: @input-height-base;
73 padding-bottom: 0px;
74 &.focus {
75 .tokenfield-focus();
76 }
77  
78 // Tokens
79 .token {
80 .box-sizing(border-box);
81 .border-radius(3px);
82 display: inline-block;
83 border: 1px solid @token-border;
84 background-color: @token-background;
85 white-space: nowrap;
86 margin: -1px 5px 5px 0;
87 height: 22px;
88 vertical-align: top;
89 cursor: default;
90 &:hover {
91 border-color: @token-hover-border;
92 }
93 &.active {
94 border-color: rgb(82, 168, 236);
95 border-color: rgba(82, 168, 236, 0.8);
96 }
97 &.duplicate {
98 border-color: @state-danger-border;
99 .animation-name(blink);
100 .animation-duration(0.1s);
101 .animation-direction(normal);
102 .animation-timing-function(ease);
103 .animation-iteration-count(infinite);
104 }
105 &.invalid {
106 background: none;
107 border: 1px solid transparent;
108 .border-radius(0);
109 border-bottom: 1px dotted @brand-danger;
110 &.active {
111 background: @token-background;
112 border: 1px solid @token-active-invalid-border;
113 .border-radius(3px);
114 }
115 }
116 .token-label {
117 display: inline-block;
118 overflow: hidden;
119 text-overflow: ellipsis;
120 padding-left: 4px;
121 vertical-align: top;
122 }
123 .close {
124 font-family: Arial;
125 display: inline-block;
126 line-height: 100%;
127 font-size: 1.1em;
128 line-height: 1.49em;
129 margin-left: 5px;
130 float: none;
131 height: 100%;
132 vertical-align: top;
133 padding-right: 4px;
134 }
135 }
136  
137 // Inputs
138 .token-input {
139 background: none;
140 width: 60px;
141 min-width: 60px;
142 border: 0;
143 height: 20px;
144 padding: 0;
145 margin-bottom: 6px;
146 .box-shadow(none);
147 }
148 .token-input:focus {
149 border-color: transparent;
150 outline: 0;
151 /* IE6-9 */
152 .box-shadow(none);
153 }
154  
155 // Disabled state
156 &.disabled {
157 cursor: not-allowed;
158 background-color: @gray-lighter;
159 .token-input {
160 cursor: not-allowed;
161 }
162 .token:hover {
163 cursor: not-allowed;
164 border-color: @token-border;
165 .close {
166 cursor: not-allowed;
167 .opacity(0.2);
168 }
169 }
170 }
171 }
172  
173 // Validation states
174  
175 .has-warning .tokenfield.focus {
176 .tokenfield-validation(@state-warning-text);
177 }
178 .has-error .tokenfield.focus {
179 .tokenfield-validation(@state-danger-text);
180 }
181 .has-success .tokenfield.focus {
182 .tokenfield-validation(@state-success-text);
183 }
184  
185 // Various sizes
186  
187 .tokenfield.input-sm,
188 .input-group-sm .tokenfield {
189 min-height: 30px;
190 padding-bottom: 0px;
191 }
192 .input-group-sm .token,
193 .tokenfield.input-sm .token {
194 height: 20px;
195 margin-bottom: 4px;
196 }
197 .input-group-sm .token-input,
198 .tokenfield.input-sm .token-input {
199 height: 18px;
200 margin-bottom: 5px;
201 }
202  
203 .tokenfield.input-lg,
204 .input-group-lg .tokenfield {
205 min-height: 45px;
206 padding-bottom: 4px;
207 }
208 .input-group-lg .token,
209 .tokenfield.input-lg .token {
210 height: 25px;
211 }
212 .input-group-lg .token-label,
213 .tokenfield.input-lg .token-label {
214 line-height: 23px;
215 }
216 .input-group-lg .token .close,
217 .tokenfield.input-lg .token .close {
218 line-height: 1.3em;
219 }
220 .input-group-lg .token-input,
221 .tokenfield.input-lg .token-input {
222 height: 23px;
223 line-height: 23px;
224 margin-bottom: 6px;
225 vertical-align: top;
226 }
227  
228 // RTL
229  
230 .tokenfield.rtl {
231 direction: rtl;
232 text-align: right;
233 }
234 .tokenfield.rtl .token {
235 margin: -1px 0 5px 5px;
236 }
237 .tokenfield.rtl .token .token-label {
238 padding-left: 0px;
239 padding-right: 4px;
240 }