← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/better-basic-reconciler-status

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/less/modules/search.less

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • mto: (132.2.1 reconciler) (145.1.1 trunk)
  • mto: This revision was merged to the branch mainline in revision 156.
  • Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler

Show diffs side-by-side

added added

removed removed

Lines of Context:
reconciler/ui/static/semantic/less/modules/search.less
 
1
/*
 
2
 * # Semantic - Search
 
3
 * http://github.com/jlukic/semantic-ui/
 
4
 *
 
5
 *
 
6
 * Copyright 2014 Contributors
 
7
 * Released under the MIT license
 
8
 * http://opensource.org/licenses/MIT
 
9
 *
 
10
 */
 
11
 
 
12
/*******************************
 
13
             Search
 
14
*******************************/
 
15
 
 
16
.ui.search {
 
17
  position: relative;
 
18
 
 
19
  text-shadow: none;
 
20
  font-style: normal;
 
21
  font-weight: normal;
 
22
}
 
23
 
 
24
.ui.search input {
 
25
  border-radius: 500rem;
 
26
}
 
27
 
 
28
/*--------------
 
29
     Button
 
30
---------------*/
 
31
 
 
32
.ui.search > .button {
 
33
  position: relative;
 
34
  z-index: 2;
 
35
  float: right;
 
36
  margin: 0px 0px 0px -15px;
 
37
  padding: 6px 15px 7px;
 
38
  border-radius: 0px 15px 15px 0px;
 
39
  -webkit-box-shadow: none;
 
40
  box-shadow: none;
 
41
}
 
42
 
 
43
/*--------------
 
44
    Results
 
45
---------------*/
 
46
 
 
47
.ui.search .results {
 
48
  display: none;
 
49
 
 
50
  position: absolute;
 
51
  z-index: 999;
 
52
  top: 100%;
 
53
  left: 0px;
 
54
 
 
55
  overflow: hidden;
 
56
  background-color: #FFFFFF;
 
57
 
 
58
  margin-top: 0.5em;
 
59
  width: 380px;
 
60
  font-size: 0.875em;
 
61
  line-height: 1.2;
 
62
  color: #555555;
 
63
  border-radius: 3px;
 
64
 
 
65
  -webkit-box-shadow:
 
66
    0px 0px 1px 1px rgba(0, 0, 0, 0.1),
 
67
    0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
 
68
  ;
 
69
  box-shadow:
 
70
    0px 0px 1px 1px rgba(0, 0, 0, 0.1),
 
71
    0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
 
72
  ;
 
73
}
 
74
.ui.search .result {
 
75
  cursor: pointer;
 
76
  overflow: hidden;
 
77
  padding: 0.5em 1em;
 
78
}
 
79
.ui.search .result:first-child {
 
80
  border-top: none;
 
81
}
 
82
.ui.search .result .image {
 
83
  background: #F0F0F0;
 
84
  margin-right: 10px;
 
85
  float: left;
 
86
  overflow: hidden;
 
87
  border-radius: 3px;
 
88
  width: 38px;
 
89
  height: 38px;
 
90
}
 
91
.ui.search .result .image img {
 
92
  display: block;
 
93
  width: 38px;
 
94
  height: 38px;
 
95
}
 
96
.ui.search .result .image ~ .info {
 
97
  float: none;
 
98
  margin-left: 50px;
 
99
}
 
100
 
 
101
.ui.search .result .info {
 
102
  float: left;
 
103
}
 
104
.ui.search .result .title {
 
105
  font-weight: bold;
 
106
  color: rgba(0, 0, 0, 0.8);
 
107
}
 
108
.ui.search .result .description {
 
109
  color: rgba(0, 0, 0, 0.6);
 
110
}
 
111
.ui.search .result .price {
 
112
  float: right;
 
113
  color: #5BBD72;
 
114
  font-weight: bold;
 
115
}
 
116
 
 
117
/*--------------
 
118
    Message
 
119
---------------*/
 
120
 
 
121
.ui.search .message {
 
122
  padding: 1em;
 
123
}
 
124
.ui.search .message .text .title {
 
125
  margin: 0em 0em 0.5rem;
 
126
 
 
127
  font-size: 1.25rem;
 
128
  font-weight: bold;
 
129
  color: rgba(0, 0, 0, 0.8);
 
130
}
 
131
.ui.search .message .text .description {
 
132
  margin: 0em;
 
133
  font-size: 1rem;
 
134
  color: rgba(0, 0, 0, 0.5);
 
135
}
 
136
 
 
137
 
 
138
/*--------------
 
139
    Categories
 
140
---------------*/
 
141
 
 
142
.ui.search .results .category {
 
143
  background-color: #FAFAFA;
 
144
 
 
145
  border-top: 1px solid rgba(0, 0, 0, 0.1);
 
146
 
 
147
  -webkit-transition: background 0.2s ease-in;
 
148
  -moz-transition: background 0.2s ease-in;
 
149
  transition: background 0.2s ease-in;
 
150
}
 
151
.ui.search .results .category:first-child {
 
152
  border-top: none;
 
153
}
 
154
 
 
155
.ui.search .results .category > .name {
 
156
  float: left;
 
157
  padding: 12px 0px 0px 8px;
 
158
  font-weight: bold;
 
159
  color: #777777;
 
160
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
 
161
}
 
162
.ui.search .results .category .result {
 
163
  background-color: #FFFFFF;
 
164
  margin-left: 80px;
 
165
  border-left: 1px solid rgba(0, 0, 0, 0.1);
 
166
}
 
167
 
 
168
/* View All Results */
 
169
.ui.search .all {
 
170
  display: block;
 
171
 
 
172
  border-top: 1px solid rgba(0, 0, 0, 0.1);
 
173
  background-color: #FAFAFA;
 
174
  height: 2em;
 
175
  line-height: 2em;
 
176
  color: rgba(0, 0, 0, 0.6);
 
177
 
 
178
  font-weight: bold;
 
179
  text-align: center;
 
180
}
 
181
 
 
182
 
 
183
/*******************************
 
184
            States
 
185
*******************************/
 
186
 
 
187
/*--------------
 
188
      Hover
 
189
---------------*/
 
190
 
 
191
.ui.search .result:hover,
 
192
.ui.search .category .result:hover {
 
193
  background-color: #F8F8F8;
 
194
}
 
195
.ui.search .all:hover {
 
196
  background-color: #F0F0F0;
 
197
}
 
198
 
 
199
/*--------------
 
200
     Loading
 
201
---------------*/
 
202
 
 
203
.ui.search.loading .input .icon {
 
204
  background: url(../images/loader-mini.gif) no-repeat 50% 50%;
 
205
}
 
206
.ui.search.loading .input .icon:before,
 
207
.ui.search.loading .input .icon:after {
 
208
  display: none;
 
209
}
 
210
 
 
211
 
 
212
/*--------------
 
213
      Active
 
214
---------------*/
 
215
 
 
216
.ui.search .results .category.active {
 
217
  background-color: #F1F1F1;
 
218
}
 
219
.ui.search .results .category.active > .name {
 
220
  color: #333333;
 
221
}
 
222
 
 
223
.ui.search .result.active,
 
224
.ui.search .category .result.active {
 
225
  background-color: #FBFBFB;
 
226
}
 
227
.ui.search .result.active .title {
 
228
  color: #000000;
 
229
}
 
230
.ui.search .result.active .description {
 
231
  color: #555555;
 
232
}
 
233
 
 
234
 
 
235
 
 
236
/*******************************
 
237
           Variations
 
238
*******************************/
 
239
 
 
240
 
 
241
 
 
242
/* Large */
 
243
.ui.search .large.result .image,
 
244
.ui.search .large.result .image img {
 
245
  width: 50px;
 
246
  height: 50px;
 
247
}
 
248
.ui.search .large.results .indented.info {
 
249
  margin-left: 65px;
 
250
}
 
251
.ui.search .large.results .info .title {
 
252
  font-size: 16px;
 
253
}
 
254
.ui.search .large.results .info .description {
 
255
  font-size: 11px;
 
256
}
 
257