← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/reconciler-ui

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/less/elements/progress.less

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • 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/elements/progress.less
 
1
/*
 
2
 * # Semantic - Progress Bar
 
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
/*******************************
 
14
         Progress Bar
 
15
*******************************/
 
16
 
 
17
.ui.progress {
 
18
  border: 1px solid rgba(0, 0, 0, 0.1);
 
19
 
 
20
  width: 100%;
 
21
  height: 35px;
 
22
 
 
23
  background-color: #FAFAFA;
 
24
  padding: 5px;
 
25
  border-radius: 0.3125em;
 
26
 
 
27
  -webkit-box-sizing: border-box;
 
28
  -moz-box-sizing: border-box;
 
29
  -ms-box-sizing: border-box;
 
30
  box-sizing: border-box;
 
31
}
 
32
 
 
33
.ui.progress .bar {
 
34
  display: inline-block;
 
35
  height: 100%;
 
36
 
 
37
  background-color: #CCCCCC;
 
38
  border-radius: 3px;
 
39
 
 
40
  -webkit-transition:
 
41
    width 1s ease-in-out,
 
42
    background-color 1s ease-out
 
43
  ;
 
44
  -moz-transition:
 
45
    width 1s ease-in-out,
 
46
    background-color 1s ease-out
 
47
  ;
 
48
  transition:
 
49
    width 1s ease-in-out,
 
50
    background-color 1s ease-out
 
51
  ;
 
52
}
 
53
 
 
54
 
 
55
/*******************************
 
56
            States
 
57
*******************************/
 
58
 
 
59
 
 
60
/*--------------
 
61
  Successful
 
62
---------------*/
 
63
 
 
64
.ui.successful.progress .bar {
 
65
  background-color: #73E064 !important;
 
66
}
 
67
.ui.successful.progress .bar,
 
68
.ui.successful.progress .bar::after {
 
69
  -webkit-animation: none !important;
 
70
  -moz-animation: none !important;
 
71
  animation: none !important;
 
72
}
 
73
 
 
74
.ui.warning.progress .bar {
 
75
  background-color: #E96633 !important;
 
76
}
 
77
.ui.warning.progress .bar,
 
78
.ui.warning.progress .bar::after {
 
79
  -webkit-animation: none !important;
 
80
  -moz-animation: none !important;
 
81
  animation: none !important;
 
82
}
 
83
 
 
84
/*--------------
 
85
     Failed
 
86
---------------*/
 
87
 
 
88
.ui.failed.progress .bar {
 
89
  background-color: #DF9BA4 !important;
 
90
}
 
91
.ui.failed.progress .bar,
 
92
.ui.failed.progress .bar::after {
 
93
  -webkit-animation: none !important;
 
94
  -moz-animation: none !important;
 
95
  animation: none !important;
 
96
}
 
97
 
 
98
/*--------------
 
99
     Active
 
100
---------------*/
 
101
 
 
102
.ui.active.progress .bar {
 
103
  position: relative;
 
104
}
 
105
.ui.active.progress .bar::after {
 
106
  content: '';
 
107
  opacity: 0;
 
108
 
 
109
  position: absolute;
 
110
  top: 0px;
 
111
  left: 0px;
 
112
  right: 0px;
 
113
  bottom: 0px;
 
114
  background: #FFFFFF;
 
115
  border-radius: 3px;
 
116
 
 
117
  -webkit-animation: progress-active 2s ease-out infinite;
 
118
  -moz-animation: progress-active 2s ease-out infinite;
 
119
  animation: progress-active 2s ease-out infinite;
 
120
}
 
121
 
 
122
@-webkit-keyframes progress-active {
 
123
  0% {
 
124
    opacity: 0;
 
125
    width: 0;
 
126
  }
 
127
  50% {
 
128
    opacity: 0.3;
 
129
  }
 
130
  100% {
 
131
    opacity: 0;
 
132
    width: 95%;
 
133
  }
 
134
}
 
135
@-moz-keyframes progress-active {
 
136
  0% {
 
137
    opacity: 0;
 
138
    width: 0;
 
139
  }
 
140
  50% {
 
141
    opacity: 0.3;
 
142
  }
 
143
  100% {
 
144
    opacity: 0;
 
145
    width: 100%;
 
146
  }
 
147
}
 
148
@keyframes progress-active {
 
149
  0% {
 
150
    opacity: 0;
 
151
    width: 0;
 
152
  }
 
153
  50% {
 
154
    opacity: 0.3;
 
155
  }
 
156
  100% {
 
157
    opacity: 0;
 
158
    width: 100%;
 
159
  }
 
160
}
 
161
 
 
162
/*--------------
 
163
    Disabled
 
164
---------------*/
 
165
 
 
166
.ui.disabled.progress {
 
167
  opacity: 0.35;
 
168
}
 
169
.ui.disabled.progress .bar,
 
170
.ui.disabled.progress .bar::after {
 
171
  -webkit-animation: none !important;
 
172
  -moz-animation: none !important;
 
173
  animation: none !important;
 
174
}
 
175
 
 
176
 
 
177
 
 
178
/*******************************
 
179
           Variations
 
180
*******************************/
 
181
 
 
182
 
 
183
/*--------------
 
184
    Attached
 
185
---------------*/
 
186
 
 
187
/* bottom attached */
 
188
.ui.progress.attached {
 
189
  position: relative;
 
190
  border: none;
 
191
}
 
192
.ui.progress.attached,
 
193
.ui.progress.attached .bar {
 
194
  display: block;
 
195
  height: 3px;
 
196
  padding: 0px;
 
197
  overflow: hidden;
 
198
  border-radius: 0em 0em 0.3125em 0.3125em;
 
199
}
 
200
.ui.progress.attached .bar {
 
201
  border-radius: 0em;
 
202
}
 
203
 
 
204
/* top attached */
 
205
.ui.progress.top.attached,
 
206
.ui.progress.top.attached .bar {
 
207
  top: -2px;
 
208
  border-radius: 0.3125em 0.3125em 0em 0em;
 
209
}
 
210
.ui.progress.top.attached .bar {
 
211
  border-radius: 0em;
 
212
}
 
213
 
 
214
 
 
215
/*--------------
 
216
     Colors
 
217
---------------*/
 
218
 
 
219
.ui.blue.progress .bar {
 
220
  background-color: #6ECFF5;
 
221
}
 
222
.ui.black.progress .bar {
 
223
  background-color: #5C6166;
 
224
}
 
225
.ui.green.progress .bar {
 
226
  background-color: #A1CF64;
 
227
}
 
228
.ui.red.progress .bar {
 
229
  background-color: #EF4D6D;
 
230
}
 
231
.ui.purple.progress .bar {
 
232
  background-color: #564F8A;
 
233
}
 
234
.ui.teal.progress .bar {
 
235
  background-color: #00B5AD;
 
236
}
 
237
 
 
238
 
 
239
/*--------------
 
240
    Striped
 
241
---------------*/
 
242
 
 
243
.ui.progress.striped .bar {
 
244
  background-size: 30px 30px;
 
245
  background-image:
 
246
    -webkit-gradient(linear, left top, right bottom,
 
247
      color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
 
248
      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
 
249
      color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
 
250
      to(transparent)
 
251
    )
 
252
  ;
 
253
  background-image:
 
254
    -webkit-linear-gradient(
 
255
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
 
256
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
 
257
      transparent 75%, transparent
 
258
    )
 
259
  ;
 
260
  background-image:
 
261
    -moz-linear-gradient(
 
262
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
 
263
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
 
264
      transparent 75%, transparent
 
265
    )
 
266
  ;
 
267
  background-image:
 
268
    -webkit-linear-gradient(315deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 
269
  background-image:
 
270
    -moz-linear-gradient(315deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
 
271
  background-image:
 
272
    linear-gradient(
 
273
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
 
274
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
 
275
      transparent 75%, transparent
 
276
    )
 
277
  ;
 
278
}
 
279
 
 
280
.ui.progress.active.striped .bar:after {
 
281
  -webkit-animation: none;
 
282
  -moz-animation: none;
 
283
  -ms-animation: none;
 
284
  animation: none;
 
285
}
 
286
.ui.progress.active.striped .bar {
 
287
  -webkit-animation: progress-striped 3s linear infinite;
 
288
  -moz-animation: progress-striped 3s linear infinite;
 
289
  animation: progress-striped 3s linear infinite;
 
290
}
 
291
 
 
292
@-webkit-keyframes progress-striped {
 
293
  0% {
 
294
    background-position: 0px 0;
 
295
  }
 
296
  100% {
 
297
    background-position: 60px 0;
 
298
  }
 
299
}
 
300
@-moz-keyframes progress-striped {
 
301
  0% {
 
302
    background-position: 0px 0;
 
303
  }
 
304
  100% {
 
305
    background-position: 60px 0;
 
306
  }
 
307
}
 
308
@keyframes progress-striped {
 
309
  0% {
 
310
    background-position: 0px 0;
 
311
  }
 
312
  100% {
 
313
    background-position: 60px 0;
 
314
  }
 
315
}
 
316
 
 
317
 
 
318
/*--------------
 
319
     Sizes
 
320
---------------*/
 
321
 
 
322
.ui.small.progress .bar {
 
323
  height: 14px;
 
324
}
 
 
b'\\ No newline at end of file'