github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/progress.css (about) 1 /*! 2 * # Semantic UI x.x - Progress Bar 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributorss 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Progress 15 *******************************/ 16 17 .ui.progress { 18 position: relative; 19 display: block; 20 max-width: 100%; 21 border: 1px solid rgba(39, 41, 43, 0.15); 22 margin: 1em 0em 2.5em; 23 box-shadow: none; 24 background: rgba(0, 0, 0, 0.03); 25 padding: 0.2857em; 26 border-radius: 0.2857rem; 27 } 28 .ui.progress:first-child { 29 margin: 0em 0em 2.5em; 30 } 31 .ui.progress:last-child { 32 margin: 0em 0em 1.5em; 33 } 34 35 /* Indicating */ 36 .ui.indicating.progress .bar[style*="width: 1"], 37 .ui.indicating.progress .bar[style*="width: 2"] { 38 background-color: #d95c5c; 39 } 40 .ui.indicating.progress .bar[style*="width: 3"] { 41 background-color: #d9a65c; 42 } 43 .ui.indicating.progress .bar[style*="width: 4"], 44 .ui.indicating.progress .bar[style*="width: 5"] { 45 background-color: #e6bb48; 46 } 47 .ui.indicating.progress .bar[style*="width: 6"] { 48 background-color: #ddc928; 49 } 50 .ui.indicating.progress .bar[style*="width: 7"], 51 .ui.indicating.progress .bar[style*="width: 8"] { 52 background-color: #b4d95c; 53 } 54 .ui.indicating.progress .bar[style*="width: 9"], 55 .ui.indicating.progress .bar[style*="width: 100"] { 56 background-color: #66da81; 57 } 58 59 /* Indicating Label */ 60 .ui.indicating.progress[data-percent^="1"] .label, 61 .ui.indicating.progress[data-percent^="2"] .label { 62 color: #d95c5c; 63 } 64 .ui.indicating.progress[data-percent^="3"] .label { 65 color: #d9a65c; 66 } 67 .ui.indicating.progress[data-percent^="4"] .label, 68 .ui.indicating.progress[data-percent^="5"] .label { 69 color: #e6bb48; 70 } 71 .ui.indicating.progress[data-percent^="6"] .label { 72 color: #ddc928; 73 } 74 .ui.indicating.progress[data-percent^="7"] .label, 75 .ui.indicating.progress[data-percent^="8"] .label { 76 color: #b4d95c; 77 } 78 .ui.indicating.progress[data-percent^="9"] .label, 79 .ui.indicating.progress[data-percent^="100"] .label { 80 color: #66da81; 81 } 82 83 /* Single Digits */ 84 .ui.indicating.progress .bar[style^="width: 1%"], 85 .ui.indicating.progress .bar[style^="width: 2%"], 86 .ui.indicating.progress .bar[style^="width: 3%"], 87 .ui.indicating.progress .bar[style^="width: 4%"], 88 .ui.indicating.progress .bar[style^="width: 5%"], 89 .ui.indicating.progress .bar[style^="width: 6%"], 90 .ui.indicating.progress .bar[style^="width: 7%"], 91 .ui.indicating.progress .bar[style^="width: 8%"], 92 .ui.indicating.progress .bar[style^="width: 9%"] { 93 background-color: #d95c5c; 94 } 95 .ui.indicating.progress[data-percent="1"] .label, 96 .ui.indicating.progress[data-percent="2"] .label, 97 .ui.indicating.progress[data-percent="3"] .label, 98 .ui.indicating.progress[data-percent="4"] .label, 99 .ui.indicating.progress[data-percent="5"] .label, 100 .ui.indicating.progress[data-percent="6"] .label, 101 .ui.indicating.progress[data-percent="7"] .label, 102 .ui.indicating.progress[data-percent="8"] .label, 103 .ui.indicating.progress[data-percent="9"] .label { 104 color: #d95c5c; 105 } 106 107 /* Indicating Success */ 108 .ui.indicating.progress.success .label { 109 color: #356e36; 110 } 111 112 113 /******************************* 114 Content 115 *******************************/ 116 117 118 /* Activity Bar */ 119 .ui.progress .bar { 120 display: block; 121 line-height: 1; 122 position: relative; 123 width: 0%; 124 min-width: 2em; 125 background: #888888; 126 border-radius: 0.2857rem; 127 -webkit-transition: width 0.3s ease, background-color 0.3s ease; 128 transition: width 0.3s ease, background-color 0.3s ease; 129 } 130 131 /* Percent Complete */ 132 .ui.progress .bar > .progress { 133 white-space: nowrap; 134 position: absolute; 135 width: auto; 136 font-size: 0.9em; 137 top: 50%; 138 right: 0.5em; 139 left: auto; 140 bottom: auto; 141 color: rgba(255, 255, 255, 0.8); 142 text-shadow: none; 143 margin-top: -0.5em; 144 font-weight: bold; 145 text-align: left; 146 } 147 148 /* Label */ 149 .ui.progress > .label { 150 position: absolute; 151 width: 100%; 152 font-size: 1em; 153 top: 100%; 154 right: auto; 155 left: 0%; 156 bottom: auto; 157 color: rgba(0, 0, 0, 0.8); 158 font-weight: bold; 159 text-shadow: none; 160 margin-top: 0.2em; 161 text-align: center; 162 -webkit-transition: color 0.4s ease; 163 transition: color 0.4s ease; 164 } 165 166 167 /******************************* 168 States 169 *******************************/ 170 171 172 /*-------------- 173 Success 174 ---------------*/ 175 176 .ui.progress.success .bar { 177 background-color: #5bbd72 !important; 178 } 179 .ui.progress.success .bar, 180 .ui.progress.success .bar::after { 181 -webkit-animation: none !important; 182 animation: none !important; 183 } 184 .ui.progress.success > .label { 185 color: #356e36; 186 } 187 188 /*-------------- 189 Warning 190 ---------------*/ 191 192 .ui.progress.warning .bar { 193 background-color: #f2c037 !important; 194 } 195 .ui.progress.warning .bar, 196 .ui.progress.warning .bar::after { 197 -webkit-animation: none !important; 198 animation: none !important; 199 } 200 .ui.progress.warning > .label { 201 color: #825c01; 202 } 203 204 /*-------------- 205 Error 206 ---------------*/ 207 208 .ui.progress.error .bar { 209 background-color: #d95c5c !important; 210 } 211 .ui.progress.error .bar, 212 .ui.progress.error .bar::after { 213 -webkit-animation: none !important; 214 animation: none !important; 215 } 216 .ui.progress.error > .label { 217 color: #912d2b; 218 } 219 220 /*-------------- 221 Active 222 ---------------*/ 223 224 .ui.active.progress .bar { 225 position: relative; 226 min-width: 2em; 227 } 228 .ui.active.progress .bar::after { 229 content: ''; 230 opacity: 0; 231 position: absolute; 232 top: 0px; 233 left: 0px; 234 right: 0px; 235 bottom: 0px; 236 background: #ffffff; 237 border-radius: 0.2857rem; 238 -webkit-animation: progress-active 2s ease infinite; 239 animation: progress-active 2s ease infinite; 240 } 241 @-webkit-keyframes progress-active { 242 0% { 243 opacity: 0.3; 244 width: 0; 245 } 246 100% { 247 opacity: 0; 248 width: 100%; 249 } 250 } 251 @keyframes progress-active { 252 0% { 253 opacity: 0.3; 254 width: 0; 255 } 256 100% { 257 opacity: 0; 258 width: 100%; 259 } 260 } 261 262 /*-------------- 263 Disabled 264 ---------------*/ 265 266 .ui.disabled.progress { 267 opacity: 0.35; 268 } 269 .ui.disabled.progress .bar, 270 .ui.disabled.progress .bar::after { 271 -webkit-animation: none !important; 272 animation: none !important; 273 } 274 275 276 /******************************* 277 Variations 278 *******************************/ 279 280 281 /*-------------- 282 Inverted 283 ---------------*/ 284 285 .ui.inverted.progress { 286 background: rgba(255, 255, 255, 0.05); 287 border: none; 288 } 289 .ui.inverted.progress .bar { 290 background: #888888; 291 } 292 .ui.inverted.progress .bar > .progress { 293 color: #fafafa; 294 } 295 .ui.inverted.progress > .label { 296 color: #ffffff; 297 } 298 .ui.inverted.progress.success > .label { 299 color: #5bbd72; 300 } 301 .ui.inverted.progress.warning > .label { 302 color: #f2c037; 303 } 304 .ui.inverted.progress.error > .label { 305 color: #d95c5c; 306 } 307 308 /*-------------- 309 Attached 310 ---------------*/ 311 312 313 /* bottom attached */ 314 .ui.progress.attached { 315 background: transparent; 316 position: relative; 317 border: none; 318 margin: 0em; 319 } 320 .ui.progress.attached, 321 .ui.progress.attached .bar { 322 display: block; 323 height: 0.2rem; 324 padding: 0px; 325 overflow: hidden; 326 border-radius: 0em 0em 0.2857rem 0.2857rem; 327 } 328 .ui.progress.attached .bar { 329 border-radius: 0em; 330 } 331 332 /* top attached */ 333 .ui.progress.top.attached, 334 .ui.progress.top.attached .bar { 335 top: 0px; 336 border-radius: 0.2857rem 0.2857rem 0em 0em; 337 } 338 .ui.progress.top.attached .bar { 339 border-radius: 0em; 340 } 341 342 /* Coupling */ 343 .ui.segment > .ui.attached.progress, 344 .ui.card > .ui.attached.progress { 345 position: absolute; 346 top: auto; 347 left: 0; 348 bottom: 100%; 349 width: 100%; 350 } 351 .ui.segment > .ui.bottom.attached.progress, 352 .ui.card > .ui.bottom.attached.progress { 353 top: 100%; 354 bottom: auto; 355 } 356 357 /*-------------- 358 Colors 359 ---------------*/ 360 361 .ui.black.progress .bar { 362 background-color: #1b1c1d; 363 } 364 .ui.blue.progress .bar { 365 background-color: #006e93; 366 } 367 .ui.green.progress .bar { 368 background-color: #5bbd72; 369 } 370 .ui.orange.progress .bar { 371 background-color: #e07b53; 372 } 373 .ui.pink.progress .bar { 374 background-color: #d9499a; 375 } 376 .ui.purple.progress .bar { 377 background-color: #564f8a; 378 } 379 .ui.red.progress .bar { 380 background-color: #d95c5c; 381 } 382 .ui.teal.progress .bar { 383 background-color: #00b5ad; 384 } 385 .ui.yellow.progress .bar { 386 background-color: #f2c61f; 387 } 388 .ui.black.inverted.progress .bar { 389 background-color: #333333; 390 } 391 .ui.blue.inverted.progress .bar { 392 background-color: #0097c9; 393 } 394 .ui.green.inverted.progress .bar { 395 background-color: #2ecc40; 396 } 397 .ui.orange.inverted.progress .bar { 398 background-color: #ff851b; 399 } 400 .ui.pink.inverted.progress .bar { 401 background-color: #ff8edf; 402 } 403 .ui.purple.inverted.progress .bar { 404 background-color: #cdc6ff; 405 } 406 .ui.red.inverted.progress .bar { 407 background-color: #ff695e; 408 } 409 .ui.teal.inverted.progress .bar { 410 background-color: #6dffff; 411 } 412 .ui.yellow.inverted.progress .bar { 413 background-color: #ffe21f; 414 } 415 416 /*-------------- 417 Sizes 418 ---------------*/ 419 420 .ui.tiny.progress { 421 font-size: 0.85714286rem; 422 } 423 .ui.tiny.progress .bar { 424 height: 0.5em; 425 } 426 .ui.small.progress { 427 font-size: 0.92857143rem; 428 } 429 .ui.small.progress .bar { 430 height: 1em; 431 } 432 .ui.progress { 433 font-size: 1rem; 434 } 435 .ui.progress .bar { 436 height: 1.75em; 437 } 438 .ui.large.progress { 439 font-size: 1.14285714rem; 440 } 441 .ui.large.progress .bar { 442 height: 2.5em; 443 } 444 .ui.big.progress { 445 font-size: 1.28571429rem; 446 } 447 .ui.big.progress .bar { 448 height: 3.5em; 449 } 450 451 452 /******************************* 453 Progress 454 *******************************/ 455 456 457 458 /******************************* 459 Site Overrides 460 *******************************/ 461