|
1 /* |
|
2 * Bootstrap tags input |
|
3 */ |
|
4 |
|
5 .bootstrap-tagsinput { |
|
6 display: block; |
|
7 width: 100%; |
|
8 min-height: 32px; |
|
9 padding: 1px 3px; |
|
10 font-size: 13px; |
|
11 line-height: 1.428571429; |
|
12 color: #555; |
|
13 vertical-align: middle; |
|
14 background-color: #FFF; |
|
15 border: 1px solid #CCC; |
|
16 border-radius: 0; |
|
17 |
|
18 >span { |
|
19 border-radius: 0!important; |
|
20 font-weight: 400; |
|
21 padding: 3px 28px 4px 8px; |
|
22 font-size: 13px; |
|
23 border: 1px solid #285E8E; |
|
24 background: #3276B1; |
|
25 } |
|
26 |
|
27 input { |
|
28 border: 0; |
|
29 -webkit-box-shadow: none; |
|
30 box-shadow: none; |
|
31 outline: 0; |
|
32 background-color: transparent; |
|
33 padding: 0; |
|
34 margin: 0; |
|
35 width: auto!important; |
|
36 max-width: inherit; |
|
37 |
|
38 &:focus { |
|
39 border: 0; |
|
40 -webkit-box-shadow: none; |
|
41 box-shadow: none; |
|
42 } |
|
43 } |
|
44 |
|
45 .tag { |
|
46 color: #FFF; |
|
47 position: relative; |
|
48 margin: 3px 0 3px 2px; |
|
49 display: inline-block; |
|
50 |
|
51 [data-role=remove] { |
|
52 display: block; |
|
53 top: -1px; |
|
54 right: 0; |
|
55 padding: 3px 4px 3px 5px; |
|
56 width: 23px; |
|
57 height: 22px; |
|
58 position: absolute; |
|
59 cursor: pointer; |
|
60 |
|
61 &:after { |
|
62 content: "\f057"; |
|
63 font-family: fontAwesome; |
|
64 padding: 2px 1px; |
|
65 line-height: 17px; |
|
66 font-size: 15px; |
|
67 text-align: center; |
|
68 } |
|
69 |
|
70 &:hover { |
|
71 background: rgba(0, 0, 0, .3); |
|
72 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); |
|
73 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); |
|
74 |
|
75 &:active { |
|
76 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); |
|
77 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); |
|
78 } |
|
79 } |
|
80 } |
|
81 } |
|
82 } |