4if (!defined(
'ISLOADEDBYSTEELSHEET')) {
5 die(
'Must be call by steelsheet');
15@phan-var-force string $badgeDanger
16@phan-var-force string $badgeSuccess
17@phan-var-force string $badgeWarning
18@phan-var-force string $colorblind_deuteranopes_badgeDanger
19@phan-var-force string $colorblind_deuteranopes_badgeSuccess
36 -webkit-box-sizing: border-box;
37 -moz-box-sizing: border-box;
38 box-sizing: border-box;
44 background-color: #f5f5f5;
45 background-color: rgba(128, 128, 128, 0.1);
47 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
62 background-color: #337ab7;
63 box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
64 -webkit-transition: width .6s ease;
65 -o-transition: width .6s ease;
66 transition: width .6s ease;
71.progress-group > .progress{
76.progress > .progress-bar {
80.progress > .progress-bar,
81.progress .progress-bar,
82.progress > .progress-bar .progress-bar {
92.progress.sm .progress-bar,
93.progress-sm .progress-bar {
102.progress.xs .progress-bar,
103.progress-xs .progress-bar {
112.progress.xxs .progress-bar,
113.progress-xxs .progress-bar {
123 display:
inline-block;
126.progress.vertical > .progress-bar {
131.progress.vertical.sm,
132.progress.vertical.progress-sm {
135.progress.vertical.xs,
136.progress.vertical.progress-xs {
139.progress.vertical.xxs,
140.progress.vertical.progress-xxs {
143.progress-group .progress-text {
146.progress-group .progress-number {
153.table tr > td .progress {
156.progress-bar-light-blue,
157.progress-bar-primary {
158 background-color: #3c8dbc;
160.progress-striped .progress-bar-light-blue,
161.progress-striped .progress-bar-primary {
162 background-image: -webkit-linear-gradient(45deg, 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);
163 background-image: -o-linear-gradient(45deg, 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);
164 background-image: linear-gradient(45deg, 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);
166.progress-bar-green, .progress-bar-success {
167 background-color: <?php echo $badgeSuccess ?>;
169.progress-striped .progress-bar-green, .progress-striped .progress-bar-success {
170 background-image: -webkit-linear-gradient(45deg, 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);
171 background-image: -o-linear-gradient(45deg, 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);
172 background-image: linear-gradient(45deg, 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);
174body[
class*=
"colorblind-"] .progress-bar-green, body[
class*=
"colorblind-"] .progress-bar-success {
175 background-color: <?php echo $colorblind_deuteranopes_badgeSuccess ?>;
177body[
class*=
"colorblind-"] .progress-bar-red, body[
class*=
"colorblind-"] .progress-bar-danger {
178 background-color: <?php echo $colorblind_deuteranopes_badgeDanger ?>;
183 background-color: #00c0ef;
185.progress-striped .progress-bar-aqua,
186.progress-striped .progress-bar-info {
187 background-image: -webkit-linear-gradient(45deg, 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);
188 background-image: -o-linear-gradient(45deg, 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);
189 background-image: linear-gradient(45deg, 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);
192.progress-bar-warning {
193 background-color: <?php echo $badgeWarning ?>;
195.progress-striped .progress-bar-yellow,
196.progress-striped .progress-bar-warning {
197 background-image: -webkit-linear-gradient(45deg, 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);
198 background-image: -o-linear-gradient(45deg, 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);
199 background-image: linear-gradient(45deg, 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.progress-bar-danger {
203 background-color: <?php echo $badgeDanger ?>;
205.progress-striped .progress-bar-red,
206.progress-striped .progress-bar-danger {
207 background-image: -webkit-linear-gradient(45deg, 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);
208 background-image: -o-linear-gradient(45deg, 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);
209 background-image: linear-gradient(45deg, 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);
211.progress-bar-consumed {
212 background-color: rgb(0, 0, 0, 0.15);
214.progress-bar-consumed-late {
colorAgressiveness($hex, $ratio=-50, $brightness=0)
Change color to make it less aggressive (ratio is negative) or more aggressive (ratio is positive)