|
|
/* * # Semantic - Progress Bar * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * *//******************************* Theme*******************************//*
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝
*//******************************* Folders*******************************//* Path to theme packages *//* Path to site override folder *//******************************* Themes*******************************//* To override a theme for an individual element specify theme name below
Be sure to update the user folder name (see README)*//* Global *//* Elements *//* Collections *//* Modules *//* Views *//******************************* Import Directives*******************************//*------------------ Load Defaults-------------------*//******************************* Site Settings*******************************//*------------------- Paths--------------------*//*------------------- Fonts--------------------*//*------------------- Site Colors--------------------*//*--- Colors ---*//*--- Light Colors ---*//*------------------- Page--------------------*//*------------------- Background Colors--------------------*//* Used for differentiating neutrals *//* Used for differentiating layers *//*------------------- Grid--------------------*//*------------------- Breakpoints--------------------*//******************************* Power-User*******************************//*------------------- Icons--------------------*//* Max Width of Icon *//*------------------- Easing--------------------*//*--- Neutrals ---*//*--- Colored Backgrounds ---*//*--- Colored Text ---*//*--- Colored Headers ---*//*------------------- Emotive Colors--------------------*//* Mood *//* Status *//*------------------- Neutral Text--------------------*//*------------------- Brand Colors--------------------*//*------------------- Borders--------------------*//*------------------- Sizes--------------------*//*------------------- Transitions--------------------*//*------------------- Derived Values--------------------*//* Makes sure padded grid can fit at 320px *//* Used to match floats with text *//* Positive / Negative Dupes *//* Header Colors *//* Responsive *//* Columns *//******************************* States*******************************//*------------------- Disabled--------------------*//*------------------- Hover--------------------*//*--- Colors ---*//*--- Emotive ---*//*--- Neutrals ---*//*------------------- Down (:active)--------------------*//*--- Colors ---*//*--- Emotive ---*//*--- Neutrals ---*//*------------------- Active--------------------*//*--- Standard ---*//*--- Emotive ---*//*--- Neutrals ---*//******************************* Progress*******************************//*------------------- Element--------------------*//* Bar *//* Progress Bar Label *//* Label *//*------------------- States--------------------*//* Active *//*------------------- Types--------------------*//* Attached *//* Inverted *//*------------------ Load Theme-------------------*//******************************* Site Settings*******************************//*------------------- Paths--------------------*//*------------------- Fonts--------------------*//*------------------- Site Colors--------------------*//*--- Colors ---*//*--- Light Colors ---*//*------------------- Page--------------------*//*------------------- Background Colors--------------------*//* Used for differentiating neutrals *//* Used for differentiating layers *//*------------------- Grid--------------------*//*------------------- Breakpoints--------------------*//******************************* Power-User*******************************//*------------------- Icons--------------------*//* Max Width of Icon *//*------------------- Easing--------------------*//*--- Neutrals ---*//*--- Colored Backgrounds ---*//*--- Colored Text ---*//*--- Colored Headers ---*//*------------------- Emotive Colors--------------------*//* Mood *//* Status *//*------------------- Neutral Text--------------------*//*------------------- Brand Colors--------------------*//*------------------- Borders--------------------*//*------------------- Sizes--------------------*//*------------------- Transitions--------------------*//*------------------- Derived Values--------------------*//* Makes sure padded grid can fit at 320px *//* Used to match floats with text *//* Positive / Negative Dupes *//* Header Colors *//* Responsive *//* Columns *//******************************* States*******************************//*------------------- Disabled--------------------*//*------------------- Hover--------------------*//*--- Colors ---*//*--- Emotive ---*//*--- Neutrals ---*//*------------------- Down (:active)--------------------*//*--- Colors ---*//*--- Emotive ---*//*--- Neutrals ---*//*------------------- Active--------------------*//*--- Standard ---*//*--- Emotive ---*//*--- Neutrals ---*//******************************* Progress*******************************//*------------------- Element--------------------*//* Bar *//* Progress Bar Label *//* Label *//*------------------- States--------------------*//* Active *//*------------------- Types--------------------*//* Attached *//* Inverted *//*------------------ Load Site-------------------*//******************************* User Global Variables*******************************//******************************* User Variable Overrides*******************************//*------------------ Override Loader-------------------*/.ui.progress { position: relative; display: block; max-width: 100%; border: 1px solid rgba(0, 0, 0, 0.05); margin: 1em 0em 2.5em; box-shadow: none; background: rgba(0, 0, 0, 0.03); padding: 0.325em; border-radius: 0.325em;}.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: 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;}/* Single Digits Last */.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%"],.ui.indicating.progress .bar[style^="width: 1"],.ui.indicating.progress .bar[style^="width: 2"] { background-color: #D95C5C;}/******************************* Content*******************************//* Activity Bar */.ui.progress .bar { display: block; line-height: 1; position: relative; width: 0%; min-width: 0.25em; height: 1.75em; background: #888888; border-radius: 0.325em; -webkit-transition: width 0.5s ease, background-color 1s ease; transition: width 0.5s ease, background-color 1s 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 1s ease; transition: color 1s 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: #336534;}/*-------------- 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: #785f33;}/*-------------- 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: #973d3b;}/*-------------- Active---------------*/.ui.active.progress .bar { position: relative;}.ui.active.progress .bar::after { content: ''; opacity: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #ffffff; border-radius: 0.325em; -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---------------*//* bottom attached */.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: none transparent; position: relative; border: none; margin: 0em;}.ui.progress.attached,.ui.progress.attached .bar { display: block; height: 0.25em; padding: 0px; overflow: hidden; border-radius: 0em 0em 0.325em 0.325em;}.ui.progress.attached .bar { border-radius: 0em;}/* top attached */.ui.progress.top.attached,.ui.progress.top.attached .bar { top: 0px; border-radius: 0.325em 0.325em 0em 0em;}.ui.progress.top.attached .bar { border-radius: 0em;}/*-------------- 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.small.progress .bar { height: 14px;}
|
