← Back to branch summary

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

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/uncompressed/elements/progress.css

  • 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/uncompressed/elements/progress.css
 
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
         Progress Bar
 
13
*******************************/
 
14
.ui.progress {
 
15
  border: 1px solid rgba(0, 0, 0, 0.1);
 
16
  width: 100%;
 
17
  height: 35px;
 
18
  background-color: #FAFAFA;
 
19
  padding: 5px;
 
20
  border-radius: 0.3125em;
 
21
  -webkit-box-sizing: border-box;
 
22
  -moz-box-sizing: border-box;
 
23
  -ms-box-sizing: border-box;
 
24
  box-sizing: border-box;
 
25
}
 
26
.ui.progress .bar {
 
27
  display: inline-block;
 
28
  height: 100%;
 
29
  background-color: #CCCCCC;
 
30
  border-radius: 3px;
 
31
  -webkit-transition: width 1s ease-in-out, background-color 1s ease-out;
 
32
  -moz-transition: width 1s ease-in-out, background-color 1s ease-out;
 
33
  transition: width 1s ease-in-out, background-color 1s ease-out;
 
34
}
 
35
/*******************************
 
36
            States
 
37
*******************************/
 
38
/*--------------
 
39
  Successful
 
40
---------------*/
 
41
.ui.successful.progress .bar {
 
42
  background-color: #73E064 !important;
 
43
}
 
44
.ui.successful.progress .bar,
 
45
.ui.successful.progress .bar::after {
 
46
  -webkit-animation: none !important;
 
47
  -moz-animation: none !important;
 
48
  animation: none !important;
 
49
}
 
50
.ui.warning.progress .bar {
 
51
  background-color: #E96633 !important;
 
52
}
 
53
.ui.warning.progress .bar,
 
54
.ui.warning.progress .bar::after {
 
55
  -webkit-animation: none !important;
 
56
  -moz-animation: none !important;
 
57
  animation: none !important;
 
58
}
 
59
/*--------------
 
60
     Failed
 
61
---------------*/
 
62
.ui.failed.progress .bar {
 
63
  background-color: #DF9BA4 !important;
 
64
}
 
65
.ui.failed.progress .bar,
 
66
.ui.failed.progress .bar::after {
 
67
  -webkit-animation: none !important;
 
68
  -moz-animation: none !important;
 
69
  animation: none !important;
 
70
}
 
71
/*--------------
 
72
     Active
 
73
---------------*/
 
74
.ui.active.progress .bar {
 
75
  position: relative;
 
76
}
 
77
.ui.active.progress .bar::after {
 
78
  content: '';
 
79
  opacity: 0;
 
80
  position: absolute;
 
81
  top: 0px;
 
82
  left: 0px;
 
83
  right: 0px;
 
84
  bottom: 0px;
 
85
  background: #FFFFFF;
 
86
  border-radius: 3px;
 
87
  -webkit-animation: progress-active 2s ease-out infinite;
 
88
  -moz-animation: progress-active 2s ease-out infinite;
 
89
  animation: progress-active 2s ease-out infinite;
 
90
}
 
91
@-webkit-keyframes progress-active {
 
92
  0% {
 
93
    opacity: 0;
 
94
    width: 0;
 
95
  }
 
96
  50% {
 
97
    opacity: 0.3;
 
98
  }
 
99
  100% {
 
100
    opacity: 0;
 
101
    width: 95%;
 
102
  }
 
103
}
 
104
@-moz-keyframes progress-active {
 
105
  0% {
 
106
    opacity: 0;
 
107
    width: 0;
 
108
  }
 
109
  50% {
 
110
    opacity: 0.3;
 
111
  }
 
112
  100% {
 
113
    opacity: 0;
 
114
    width: 100%;
 
115
  }
 
116
}
 
117
@keyframes progress-active {
 
118
  0% {
 
119
    opacity: 0;
 
120
    width: 0;
 
121
  }
 
122
  50% {
 
123
    opacity: 0.3;
 
124
  }
 
125
  100% {
 
126
    opacity: 0;
 
127
    width: 100%;
 
128
  }
 
129
}
 
130
/*--------------
 
131
    Disabled
 
132
---------------*/
 
133
.ui.disabled.progress {
 
134
  opacity: 0.35;
 
135
}
 
136
.ui.disabled.progress .bar,
 
137
.ui.disabled.progress .bar::after {
 
138
  -webkit-animation: none !important;
 
139
  -moz-animation: none !important;
 
140
  animation: none !important;
 
141
}
 
142
/*******************************
 
143
           Variations
 
144
*******************************/
 
145
/*--------------
 
146
    Attached
 
147
---------------*/
 
148
/* bottom attached */
 
149
.ui.progress.attached {
 
150
  position: relative;
 
151
  border: none;
 
152
}
 
153
.ui.progress.attached,
 
154
.ui.progress.attached .bar {
 
155
  display: block;
 
156
  height: 3px;
 
157
  padding: 0px;
 
158
  overflow: hidden;
 
159
  border-radius: 0em 0em 0.3125em 0.3125em;
 
160
}
 
161
.ui.progress.attached .bar {
 
162
  border-radius: 0em;
 
163
}
 
164
/* top attached */
 
165
.ui.progress.top.attached,
 
166
.ui.progress.top.attached .bar {
 
167
  top: -2px;
 
168
  border-radius: 0.3125em 0.3125em 0em 0em;
 
169
}
 
170
.ui.progress.top.attached .bar {
 
171
  border-radius: 0em;
 
172
}
 
173
/*--------------
 
174
     Colors
 
175
---------------*/
 
176
.ui.blue.progress .bar {
 
177
  background-color: #6ECFF5;
 
178
}
 
179
.ui.black.progress .bar {
 
180
  background-color: #5C6166;
 
181
}
 
182
.ui.green.progress .bar {
 
183
  background-color: #A1CF64;
 
184
}
 
185
.ui.red.progress .bar {
 
186
  background-color: #EF4D6D;
 
187
}
 
188
.ui.purple.progress .bar {
 
189
  background-color: #564F8A;
 
190
}
 
191
.ui.teal.progress .bar {
 
192
  background-color: #00B5AD;
 
193
}
 
194
/*--------------
 
195
    Striped
 
196
---------------*/
 
197
.ui.progress.striped .bar {
 
198
  background-size: 30px 30px;
 
199
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
 
200
  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
201
  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
202
  background-image: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
203
  background-image: -moz-linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
204
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
205
}
 
206
.ui.progress.active.striped .bar:after {
 
207
  -webkit-animation: none;
 
208
  -moz-animation: none;
 
209
  -ms-animation: none;
 
210
  animation: none;
 
211
}
 
212
.ui.progress.active.striped .bar {
 
213
  -webkit-animation: progress-striped 3s linear infinite;
 
214
  -moz-animation: progress-striped 3s linear infinite;
 
215
  animation: progress-striped 3s linear infinite;
 
216
}
 
217
@-webkit-keyframes progress-striped {
 
218
  0% {
 
219
    background-position: 0px 0;
 
220
  }
 
221
  100% {
 
222
    background-position: 60px 0;
 
223
  }
 
224
}
 
225
@-moz-keyframes progress-striped {
 
226
  0% {
 
227
    background-position: 0px 0;
 
228
  }
 
229
  100% {
 
230
    background-position: 60px 0;
 
231
  }
 
232
}
 
233
@keyframes progress-striped {
 
234
  0% {
 
235
    background-position: 0px 0;
 
236
  }
 
237
  100% {
 
238
    background-position: 60px 0;
 
239
  }
 
240
}
 
241
/*--------------
 
242
     Sizes
 
243
---------------*/
 
244
.ui.small.progress .bar {
 
245
  height: 14px;
 
246
}