dolibarr 19.0.3
progress.inc.php
1<?php
2if (!defined('ISLOADEDBYSTEELSHEET')) {
3 die('Must be call by steelsheet');
4} ?>
5/* <style type="text/css" > */
6/*
7 progress style is based on boostrap and admin lte framework
8 */
9
10
11/*
12 * Component: Progress Bar
13 * -----------------------
14 */
15
16.progress * {
17 -webkit-box-sizing: border-box;
18 -moz-box-sizing: border-box;
19 box-sizing: border-box;
20}
21
22.progress {
23 height: 20px;
24 overflow: hidden;
25 background-color: #f5f5f5;
26 background-color: rgba(128, 128, 128, 0.1);
27 border-radius: 4px;
28 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
29 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
30}
31
32.progress.spaced {
33 margin-bottom: 20px;
34}
35
36.progress-bar {
37 float: left;
38 width: 0;
39 height: 100%;
40 font-size: 12px;
41 line-height: 20px;
42 color: #fff;
43 text-align: center;
44 background-color: #337ab7;
45 -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
46 box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
47 -webkit-transition: width .6s ease;
48 -o-transition: width .6s ease;
49 transition: width .6s ease;
50}
51
52
53
54.progress-group > .progress{
55 clear: both;
56}
57
58.progress,
59.progress > .progress-bar {
60 -webkit-box-shadow: none;
61 box-shadow: none;
62}
63.progress,
64.progress > .progress-bar,
65.progress .progress-bar,
66.progress > .progress-bar .progress-bar {
67 border-radius: 1px;
68}
69/* size variation */
70.progress.sm,
71.progress-sm {
72 height: 10px;
73}
74.progress.sm,
75.progress-sm,
76.progress.sm .progress-bar,
77.progress-sm .progress-bar {
78 border-radius: 1px;
79}
80.progress.xs,
81.progress-xs {
82 height: 7px;
83}
84.progress.xs,
85.progress-xs,
86.progress.xs .progress-bar,
87.progress-xs .progress-bar {
88 border-radius: 1px;
89}
90.progress.xxs,
91.progress-xxs {
92 height: 3px;
93}
94.progress.xxs,
95.progress-xxs,
96.progress.xxs .progress-bar,
97.progress-xxs .progress-bar {
98 border-radius: 1px;
99}
100
101
102/* Vertical bars */
103.progress.vertical {
104 position: relative;
105 width: 30px;
106 height: 200px;
107 display: inline-block;
108 margin-right: 10px;
109}
110.progress.vertical > .progress-bar {
111 width: 100%;
112 position: absolute;
113 bottom: 0;
114}
115.progress.vertical.sm,
116.progress.vertical.progress-sm {
117 width: 20px;
118}
119.progress.vertical.xs,
120.progress.vertical.progress-xs {
121 width: 10px;
122}
123.progress.vertical.xxs,
124.progress.vertical.progress-xxs {
125 width: 3px;
126}
127.progress-group .progress-text {
128 /* font-weight: 600; */
129}
130.progress-group .progress-number {
131 float: right;
132}
133
134
135
136/* Remove margins from progress bars when put in a table */
137.table tr > td .progress {
138 margin: 0;
139}
140.progress-bar-light-blue,
141.progress-bar-primary {
142 background-color: #3c8dbc;
143}
144.progress-striped .progress-bar-light-blue,
145.progress-striped .progress-bar-primary {
146 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);
147 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);
148 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);
149}
150.progress-bar-green, .progress-bar-success {
151 background-color: <?php echo $badgeSuccess ?>;
152}
153.progress-striped .progress-bar-green, .progress-striped .progress-bar-success {
154 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);
155 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);
156 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);
157}
158body[class*="colorblind-"] .progress-bar-green, body[class*="colorblind-"] .progress-bar-success {
159 background-color: <?php echo $colorblind_deuteranopes_badgeSuccess ?>;
160}
161body[class*="colorblind-"] .progress-bar-red, body[class*="colorblind-"] .progress-bar-danger {
162 background-color: <?php echo $colorblind_deuteranopes_badgeDanger ?>;
163}
164
165.progress-bar-aqua,
166.progress-bar-info {
167 background-color: #00c0ef;
168}
169.progress-striped .progress-bar-aqua,
170.progress-striped .progress-bar-info {
171 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);
172 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);
173 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);
174}
175.progress-bar-yellow,
176.progress-bar-warning {
177 background-color: <?php echo $badgeWarning ?>;
178}
179.progress-striped .progress-bar-yellow,
180.progress-striped .progress-bar-warning {
181 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);
182 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);
183 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);
184}
185.progress-bar-red,
186.progress-bar-danger {
187 background-color: <?php echo $badgeDanger ?>;
188}
189.progress-striped .progress-bar-red,
190.progress-striped .progress-bar-danger {
191 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);
192 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);
193 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);
194}
195.progress-bar-consumed {
196 background-color: rgb(0, 0, 0, 0.15);
197}
198.progress-bar-consumed-late {
199 background-color: <?php echo colorAgressiveness($badgeDanger, -95, +70) ?>;
200}
201
colorAgressiveness($hex, $ratio=-50, $brightness=0)
Change color to make it less aggressive (ratio is negative) or more aggressive (ratio is positive)
rtl background position