1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
// Form - autocompleter
//
// Located in `wyrm_core/_autocompleter.sass`. Autocompleters traditionally have three states, empty,
// single item and multi-item addition. Examples for all three are shown below.
//
// Markup:
// <div class="wy-control-group">
// <label for="right-label" >Empty state</label>
// <div class="wy-control">
// <div class="wy-tag-input-group">
// <div class="wy-autocomplete-group">
// <label class="fa fa-search" for="search-example-1"></label> <input type="text" id="search-example-1" placeholder="Search users">
// </div>
// </div>
// <span class="wy-form-message">Example help text</span>
// </div>
// </div>
// <div class="wy-control-group">
// <label for="right-label" >One item allowed</label>
// <div class="wy-control">
// <div class="wy-tag-input-group">
// <span class="wy-tag">Network<a href="" class="wy-tag-remove"></a></span>
// </div>
// <span class="wy-form-message">User needs to close the above item before choosing a replacement.</span>
// </div>
// </div>
// <div class="wy-control-group">
// <label for="right-label" >Multiple items allowed</label>
// <div class="wy-control">
// <div class="wy-tag-input-group">
// <span class="wy-tag">Network<a href="" class="wy-tag-remove"></a></span>
// <span class="wy-tag">Rollerball<a href="" class="wy-tag-remove"></a></span>
// <span class="wy-tag on">Being There<a href="" class="wy-tag-remove"></a></span>
// <div class="wy-autocomplete-group">
// <label class="fa fa-search" for="search-example-2"></label> <input type="text" id="search-example-2" placeholder="Search users">
// <div class="wy-autocomplete-dropdown">
// <ul>
// <li class="on">
// Network
// </li>
// <li>
// Rollerball
// </li>
// <li>
// Being There
// </li>
// <li class="add">
// <span class="fa fa-plus-circle"></span> Add new entry
// </li>
// </ul>
// </div>
// </div>
// </div>
// <span class="wy-form-message">Infinite autocomplete.</span>
// </div>
// </div>
//
// Styleguide 9
.wy-autocomplete-group
display: inline-block
position: relative
background: $input-background-color
.wy-autocomplete-dropdown
position: absolute
top: 100%
left: 0
float: left
min-width: 100%
background: $dropdown-color
z-index: $z-index-dropdown
border: solid 1px $dropdown-border-color
box-shadow: 0 5px 5px 0 rgba(0,0,0,.1)
ul
list-style: none !important
margin: 0 !important
li
line-height: 1.5
padding: $base-font-size / 2
cursor: pointer
list-style: none !important
margin: 0 !important
border-bottom: solid 1px $table-border-color
&:last-child
border-bottom: none
&.on, &:hover
background: $link-color
border-color: transparent
color: $white
&.add
background: lighten($green, 50%)
&:hover.add, &.add.on
background: $green
img
width: 16px
height: 16px
margin-right: $base-font-size / 2
.wy-tag-input-group
.wy-autocomplete-dropdown
margin-top: -4px
// Form - Autocompleter, many items.
//
// For when there are lots of items in a tag group.
//
// Markup:
// <div class="wy-control-group wy-control-group-relation">
// <label>Lots of items</label>
// <div class="wy-control">
// <div class="wy-tag-input-group wy-tag-input-group-many">
// <ol>
// <li><span class="fa fa-ellipsis-v">Network <a class="fa fa-times-circle"></a></span></li>
// <li><span class="fa fa-ellipsis-v">Rollerball <a class="fa fa-times-circle"></a></span></li>
// <li><span class="fa fa-ellipsis-v">The Godfather <a class="fa fa-times-circle"></a></span></li>
// <li><span class="fa fa-ellipsis-v">The Godfather Part II<a class="fa fa-times-circle"></a></span></li>
// <li><span class="fa fa-ellipsis-v">The Big Lebowski <a class="fa fa-times-circle"></a></span></li>
// <li><span class="fa fa-ellipsis-v">Fargo <a class="fa fa-times-circle"></a></span></li>
// <li><span class="fa fa-ellipsis-v">Bad Santa <a class="fa fa-times-circle"></a></span></li>
// </ol>
// <div class="wy-autocomplete-group">
// <label class="fa fa-search"></label>
// <input placeholder="Add item" type="text">
// </div>
// </div>
// </div>
//
// Styleguide 9.2
.wy-tag-input-group.wy-tag-input-group-many
border: none
box-shadow: none
padding: 0
display: block
background: transparent
.wy-autocomplete-group
display: inline-block
border: solid 1px $table-border-color
width: 50%
margin-bottom: $base-line-height / 4
padding: 0 $base-line-height / 4
label
margin-left: 0
input
margin-bottom: 0
.wy-spinner
float: right
margin-top: $base-line-height / 4
margin-bottom: $base-line-height / 4
.wy-tag-input-group.wy-tag-input-group-many ol
margin-bottom: 0
.wy-tag-input-group.wy-tag-input-group-many ol li
cursor: move
margin-left: 0
span
padding: $base-line-height / 4 $base-line-height / 2
margin-bottom: $base-line-height / 4
background: rgba(0,0,0,.1)
position: relative
+truncate(50%)
+transition(background .5s ease-in-out)
&.active span
background: rgba(0,0,0,.2)
span:hover
.#{$icon-prefix}-#{$icon-remove}
opacity: 1
span:before
color: $gray-light
margin-right: $base-line-height / 4
.#{$icon-prefix}-#{$icon-remove}
position: absolute
right: $base-line-height / 4
top: $base-line-height / 4
color: $red
opacity: 0
.wy-tag-input-group.wy-tag-input-group-many li
cursor: auto
+media($mobile)
.wy-tag-input-group.wy-tag-input-group-many ol li span
width: 100%
|
