|
|
/*! * # Semantic UI 2.0.0 - Progress Bar * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributorss * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Progress*******************************/
.ui.progress { position: relative; display: block; max-width: 100%; border: 1px solid rgba(34, 36, 38, 0.15); margin: 1em 0em 2.5em; box-shadow: none; background: rgba(0, 0, 0, 0.03); padding: 0.2857em; border-radius: 0.2857rem;}.ui.progress:first-child { margin: 0em 0em 2.5em;}.ui.progress:last-child { margin: 0em 0em 1.5em;}
/* Indicating */.ui.indicating.progress .bar[style*="width: 1"],.ui.indicating.progress .bar[style*="width: 2"] { background-color: #d95c5c;}.ui.indicating.progress .bar[style*="width: 3"] { background-color: #d9a65c;}.ui.indicating.progress .bar[style*="width: 4"],.ui.indicating.progress .bar[style*="width: 5"] { background-color: #e6bb48;}.ui.indicating.progress .bar[style*="width: 6"] { background-color: #ddc928;}.ui.indicating.progress .bar[style*="width: 7"],.ui.indicating.progress .bar[style*="width: 8"] { background-color: #b4d95c;}.ui.indicating.progress .bar[style*="width: 9"],.ui.indicating.progress .bar[style*="width: 100"] { background-color: #66da81;}
/* Indicating Label */.ui.indicating.progress[data-percent^="1"] .label,.ui.indicating.progress[data-percent^="2"] .label { color: #d95c5c;}.ui.indicating.progress[data-percent^="3"] .label { color: #d9a65c;}.ui.indicating.progress[data-percent^="4"] .label,.ui.indicating.progress[data-percent^="5"] .label { color: #e6bb48;}.ui.indicating.progress[data-percent^="6"] .label { color: #ddc928;}.ui.indicating.progress[data-percent^="7"] .label,.ui.indicating.progress[data-percent^="8"] .label { color: #b4d95c;}.ui.indicating.progress[data-percent^="9"] .label,.ui.indicating.progress[data-percent^="100"] .label { color: #66da81;}
/* Single Digits */.ui.indicating.progress .bar[style^="width: 1%"],.ui.indicating.progress .bar[style^="width: 2%"],.ui.indicating.progress .bar[style^="width: 3%"],.ui.indicating.progress .bar[style^="width: 4%"],.ui.indicating.progress .bar[style^="width: 5%"],.ui.indicating.progress .bar[style^="width: 6%"],.ui.indicating.progress .bar[style^="width: 7%"],.ui.indicating.progress .bar[style^="width: 8%"],.ui.indicating.progress .bar[style^="width: 9%"] { background-color: #d95c5c;}.ui.indicating.progress[data-percent="1"] .label,.ui.indicating.progress[data-percent="2"] .label,.ui.indicating.progress[data-percent="3"] .label,.ui.indicating.progress[data-percent="4"] .label,.ui.indicating.progress[data-percent="5"] .label,.ui.indicating.progress[data-percent="6"] .label,.ui.indicating.progress[data-percent="7"] .label,.ui.indicating.progress[data-percent="8"] .label,.ui.indicating.progress[data-percent="9"] .label { color: #d95c5c;}
/* Indicating Success */.ui.indicating.progress.success .label { color: #356e36;}
/******************************* Content*******************************/
/* Activity Bar */.ui.progress .bar { display: block; line-height: 1; position: relative; width: 0%; min-width: 2em; background: #888888; border-radius: 0.2857rem; -webkit-transition: width 0.3s ease, background-color 0.3s ease; transition: width 0.3s ease, background-color 0.3s ease;}
/* Percent Complete */.ui.progress .bar > .progress { white-space: nowrap; position: absolute; width: auto; font-size: 0.9em; top: 50%; right: 0.5em; left: auto; bottom: auto; color: rgba(255, 255, 255, 0.8); text-shadow: none; margin-top: -0.5em; font-weight: bold; text-align: left;}
/* Label */.ui.progress > .label { position: absolute; width: 100%; font-size: 1em; top: 100%; right: auto; left: 0%; bottom: auto; color: rgba(0, 0, 0, 0.8); font-weight: bold; text-shadow: none; margin-top: 0.2em; text-align: center; -webkit-transition: color 0.4s ease; transition: color 0.4s ease;}
/******************************* States*******************************/
/*-------------- Success---------------*/
.ui.progress.success .bar { background-color: #5bbd72 !important;}.ui.progress.success .bar,.ui.progress.success .bar::after { -webkit-animation: none !important; animation: none !important;}.ui.progress.success > .label { color: #356e36;}
/*-------------- Warning---------------*/
.ui.progress.warning .bar { background-color: #f2c037 !important;}.ui.progress.warning .bar,.ui.progress.warning .bar::after { -webkit-animation: none !important; animation: none !important;}.ui.progress.warning > .label { color: #825c01;}
/*-------------- Error---------------*/
.ui.progress.error .bar { background-color: #d95c5c !important;}.ui.progress.error .bar,.ui.progress.error .bar::after { -webkit-animation: none !important; animation: none !important;}.ui.progress.error > .label { color: #912d2b;}
/*-------------- Active---------------*/
.ui.active.progress .bar { position: relative; min-width: 2em;}.ui.active.progress .bar::after { content: ''; opacity: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #ffffff; border-radius: 0.2857rem; -webkit-animation: progress-active 2s ease infinite; animation: progress-active 2s ease infinite;}@-webkit-keyframes progress-active { 0% { opacity: 0.3; width: 0; } 100% { opacity: 0; width: 100%; }}@keyframes progress-active { 0% { opacity: 0.3; width: 0; } 100% { opacity: 0; width: 100%; }}
/*-------------- Disabled---------------*/
.ui.disabled.progress { opacity: 0.35;}.ui.disabled.progress .bar,.ui.disabled.progress .bar::after { -webkit-animation: none !important; animation: none !important;}
/******************************* Variations*******************************/
/*-------------- Inverted---------------*/
.ui.inverted.progress { background: rgba(255, 255, 255, 0.05); border: none;}.ui.inverted.progress .bar { background: #888888;}.ui.inverted.progress .bar > .progress { color: #fafafa;}.ui.inverted.progress > .label { color: #ffffff;}.ui.inverted.progress.success > .label { color: #5bbd72;}.ui.inverted.progress.warning > .label { color: #f2c037;}.ui.inverted.progress.error > .label { color: #d95c5c;}
/*-------------- Attached---------------*/
/* bottom attached */.ui.progress.attached { background: transparent; position: relative; border: none; margin: 0em;}.ui.progress.attached,.ui.progress.attached .bar { display: block; height: 0.2rem; padding: 0px; overflow: hidden; border-radius: 0em 0em 0.2857rem 0.2857rem;}.ui.progress.attached .bar { border-radius: 0em;}
/* top attached */.ui.progress.top.attached,.ui.progress.top.attached .bar { top: 0px; border-radius: 0.2857rem 0.2857rem 0em 0em;}.ui.progress.top.attached .bar { border-radius: 0em;}
/* Coupling */.ui.segment > .ui.attached.progress,.ui.card > .ui.attached.progress { position: absolute; top: auto; left: 0; bottom: 100%; width: 100%;}.ui.segment > .ui.bottom.attached.progress,.ui.card > .ui.bottom.attached.progress { top: 100%; bottom: auto;}
/*-------------- Colors---------------*/
.ui.black.progress .bar { background-color: #1b1c1d;}.ui.blue.progress .bar { background-color: #3b83c0;}.ui.green.progress .bar { background-color: #5bbd72;}.ui.orange.progress .bar { background-color: #e07b53;}.ui.pink.progress .bar { background-color: #d9499a;}.ui.purple.progress .bar { background-color: #564f8a;}.ui.red.progress .bar { background-color: #d95c5c;}.ui.teal.progress .bar { background-color: #00b5ad;}.ui.yellow.progress .bar { background-color: #f2c61f;}.ui.black.inverted.progress .bar { background-color: #333333;}.ui.blue.inverted.progress .bar { background-color: #54c8ff;}.ui.green.inverted.progress .bar { background-color: #2ecc40;}.ui.orange.inverted.progress .bar { background-color: #ff851b;}.ui.pink.inverted.progress .bar { background-color: #ff8edf;}.ui.purple.inverted.progress .bar { background-color: #cdc6ff;}.ui.red.inverted.progress .bar { background-color: #ff695e;}.ui.teal.inverted.progress .bar { background-color: #6dffff;}.ui.yellow.inverted.progress .bar { background-color: #ffe21f;}
/*-------------- Sizes---------------*/
.ui.tiny.progress { font-size: 0.85714286rem;}.ui.tiny.progress .bar { height: 0.5em;}.ui.small.progress { font-size: 0.92857143rem;}.ui.small.progress .bar { height: 1em;}.ui.progress { font-size: 1rem;}.ui.progress .bar { height: 1.75em;}.ui.large.progress { font-size: 1.14285714rem;}.ui.large.progress .bar { height: 2.5em;}.ui.big.progress { font-size: 1.28571429rem;}.ui.big.progress .bar { height: 3.5em;}
/******************************* Progress*******************************/
/******************************* Site Overrides*******************************/
|
