Refactor colors and progress bars
* Buttons and progress bars now make use of more semantic global @brand- colors * Progress bars have been rewritten to reduce the number of possible selectors * Instead of .progress .bar, it's .progress-bar for individual bars of color, ultimately making for less CSS
This commit is contained in:
parent
2553d74b54
commit
d53af49afe
|
@ -4102,7 +4102,7 @@ a.counter:hover {
|
||||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress .bar {
|
.progress-bar {
|
||||||
float: left;
|
float: left;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -4110,9 +4110,7 @@ a.counter:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||||
background-color: #149bdf;
|
background-color: #428bca;
|
||||||
/*#gradient > .vertical(#149bdf, #0480be);*/
|
|
||||||
|
|
||||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
|
@ -4124,8 +4122,8 @@ a.counter:hover {
|
||||||
transition: width 0.6s ease;
|
transition: width 0.6s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-striped .bar {
|
.progress-striped .progress-bar {
|
||||||
background-color: #149bdf;
|
background-color: #428bca;
|
||||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||||
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);
|
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);
|
||||||
background-image: -moz-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);
|
background-image: -moz-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);
|
||||||
|
@ -4137,7 +4135,7 @@ a.counter:hover {
|
||||||
background-size: 40px 40px;
|
background-size: 40px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress.active .bar {
|
.progress.active .progress-bar {
|
||||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||||
-moz-animation: progress-bar-stripes 2s linear infinite;
|
-moz-animation: progress-bar-stripes 2s linear infinite;
|
||||||
-ms-animation: progress-bar-stripes 2s linear infinite;
|
-ms-animation: progress-bar-stripes 2s linear infinite;
|
||||||
|
@ -4145,16 +4143,12 @@ a.counter:hover {
|
||||||
animation: progress-bar-stripes 2s linear infinite;
|
animation: progress-bar-stripes 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-danger .bar,
|
.progress-bar-danger {
|
||||||
.progress .bar-danger {
|
background-color: #d9534f;
|
||||||
background-color: #ee5f5b;
|
|
||||||
/*#gradient > .vertical(#ee5f5b, #c43c35);*/
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-danger.progress-striped .bar,
|
.progress-striped .progress-bar-danger {
|
||||||
.progress-striped .bar-danger {
|
background-color: #d9534f;
|
||||||
background-color: #ee5f5b;
|
|
||||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||||
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);
|
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);
|
||||||
background-image: -moz-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);
|
background-image: -moz-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);
|
||||||
|
@ -4162,16 +4156,12 @@ a.counter:hover {
|
||||||
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);
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-success .bar,
|
.progress-bar-success {
|
||||||
.progress .bar-success {
|
background-color: #5cb85c;
|
||||||
background-color: #62c462;
|
|
||||||
/*#gradient > .vertical(#62c462, #57a957);*/
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-success.progress-striped .bar,
|
.progress-striped .progress-bar-success {
|
||||||
.progress-striped .bar-success {
|
background-color: #5cb85c;
|
||||||
background-color: #62c462;
|
|
||||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||||
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);
|
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);
|
||||||
background-image: -moz-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);
|
background-image: -moz-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);
|
||||||
|
@ -4179,15 +4169,24 @@ a.counter:hover {
|
||||||
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);
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-info .bar,
|
.progress-bar-warning {
|
||||||
.progress .bar-info {
|
background-color: #f0ad4e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-striped .progress-bar-warning {
|
||||||
|
background-color: #f0ad4e;
|
||||||
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||||
|
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);
|
||||||
|
background-image: -moz-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);
|
||||||
|
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);
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-info {
|
||||||
background-color: #5bc0de;
|
background-color: #5bc0de;
|
||||||
/*#gradient > .vertical(#5bc0de, #339bb9);*/
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-info.progress-striped .bar,
|
.progress-striped .progress-bar-info {
|
||||||
.progress-striped .bar-info {
|
|
||||||
background-color: #5bc0de;
|
background-color: #5bc0de;
|
||||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||||
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);
|
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);
|
||||||
|
@ -4196,23 +4195,6 @@ a.counter:hover {
|
||||||
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);
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-warning .bar,
|
|
||||||
.progress .bar-warning {
|
|
||||||
background-color: #fbb450;
|
|
||||||
/*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-warning.progress-striped .bar,
|
|
||||||
.progress-striped .bar-warning {
|
|
||||||
background-color: #fbb450;
|
|
||||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
|
||||||
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);
|
|
||||||
background-image: -moz-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);
|
|
||||||
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);
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.accordion {
|
.accordion {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1614,7 +1614,7 @@
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<section id="progress">
|
<section id="progress">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
|
<h1>Progress bars</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Examples and markup</h2>
|
<h2>Examples and markup</h2>
|
||||||
|
@ -1623,12 +1623,12 @@
|
||||||
<p>Default progress bar with a vertical gradient.</p>
|
<p>Default progress bar with a vertical gradient.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 60%;"></div>
|
<div class="progress-bar" style="width: 60%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 60%;"></div>
|
<div class="progress-bar" style="width: 60%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
@ -1636,12 +1636,12 @@
|
||||||
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
|
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 20%;"></div>
|
<div class="progress-bar" style="width: 20%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 20%;"></div>
|
<div class="progress-bar" style="width: 20%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
@ -1649,12 +1649,12 @@
|
||||||
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
|
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress progress-striped active">
|
<div class="progress progress-striped active">
|
||||||
<div class="bar" style="width: 45%"></div>
|
<div class="progress-bar" style="width: 45%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress progress-striped active">
|
<div class="progress progress-striped active">
|
||||||
<div class="bar" style="width: 40%;"></div>
|
<div class="progress-bar" style="width: 40%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
@ -1662,16 +1662,16 @@
|
||||||
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
|
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="bar bar-success" style="width: 35%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
|
||||||
<div class="bar bar-warning" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
|
||||||
<div class="bar bar-danger" style="width: 10%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="bar bar-success" style="width: 35%;"></div>
|
<div class="progress-bar progress-bar-success" style="width: 35%;"></div>
|
||||||
<div class="bar bar-warning" style="width: 20%;"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
|
||||||
<div class="bar bar-danger" style="width: 10%;"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
@ -1684,62 +1684,62 @@
|
||||||
<h3>Additional colors</h3>
|
<h3>Additional colors</h3>
|
||||||
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress progress-info" style="margin-bottom: 9px;">
|
<div class="progress" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-success" style="margin-bottom: 9px;">
|
<div class="progress" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 40%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-warning" style="margin-bottom: 9px;">
|
<div class="progress" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 60%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-danger">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 80%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress progress-info">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-success">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 40%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-warning">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 60%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-danger">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 80%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3>Striped bars</h3>
|
<h3>Striped bars</h3>
|
||||||
<p>Similar to the solid colors, we have varied striped progress bars.</p>
|
<p>Similar to the solid colors, we have varied striped progress bars.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
|
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
|
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 40%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
|
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 60%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-danger progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 80%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress progress-info progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-success progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 40%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-warning progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 60%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-danger progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 80%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
|
@ -1546,7 +1546,7 @@
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<section id="progress">
|
<section id="progress">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
|
<h1>Progress bars</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Examples and markup</h2>
|
<h2>Examples and markup</h2>
|
||||||
|
@ -1555,12 +1555,12 @@
|
||||||
<p>Default progress bar with a vertical gradient.</p>
|
<p>Default progress bar with a vertical gradient.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 60%;"></div>
|
<div class="progress-bar" style="width: 60%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 60%;"></div>
|
<div class="progress-bar" style="width: 60%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
@ -1568,12 +1568,12 @@
|
||||||
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
|
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 20%;"></div>
|
<div class="progress-bar" style="width: 20%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 20%;"></div>
|
<div class="progress-bar" style="width: 20%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
@ -1581,12 +1581,12 @@
|
||||||
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
|
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress progress-striped active">
|
<div class="progress progress-striped active">
|
||||||
<div class="bar" style="width: 45%"></div>
|
<div class="progress-bar" style="width: 45%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress progress-striped active">
|
<div class="progress progress-striped active">
|
||||||
<div class="bar" style="width: 40%;"></div>
|
<div class="progress-bar" style="width: 40%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
@ -1594,16 +1594,16 @@
|
||||||
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
|
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="bar bar-success" style="width: 35%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
|
||||||
<div class="bar bar-warning" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
|
||||||
<div class="bar bar-danger" style="width: 10%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="bar bar-success" style="width: 35%;"></div>
|
<div class="progress-bar progress-bar-success" style="width: 35%;"></div>
|
||||||
<div class="bar bar-warning" style="width: 20%;"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
|
||||||
<div class="bar bar-danger" style="width: 10%;"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
@ -1616,62 +1616,62 @@
|
||||||
<h3>Additional colors</h3>
|
<h3>Additional colors</h3>
|
||||||
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress progress-info" style="margin-bottom: 9px;">
|
<div class="progress" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-success" style="margin-bottom: 9px;">
|
<div class="progress" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 40%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-warning" style="margin-bottom: 9px;">
|
<div class="progress" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 60%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-danger">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 80%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress progress-info">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-success">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 40%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-warning">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 60%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-danger">
|
<div class="progress">
|
||||||
<div class="bar" style="width: 80%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3>Striped bars</h3>
|
<h3>Striped bars</h3>
|
||||||
<p>Similar to the solid colors, we have varied striped progress bars.</p>
|
<p>Similar to the solid colors, we have varied striped progress bars.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
|
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
|
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 40%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
|
<div class="progress progress-striped" style="margin-bottom: 9px;">
|
||||||
<div class="bar" style="width: 60%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-danger progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 80%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="progress progress-info progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-success progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 40%"></div>
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-warning progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 60%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress progress-danger progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="bar" style="width: 80%"></div>
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
// ANIMATIONS
|
// Bar animations
|
||||||
// ----------
|
// -------------------------
|
||||||
|
|
||||||
// Webkit
|
// Webkit
|
||||||
@-webkit-keyframes progress-bar-stripes {
|
@-webkit-keyframes progress-bar-stripes {
|
||||||
|
@ -38,21 +38,21 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// THE BARS
|
// Bar itself
|
||||||
// --------
|
// -------------------------
|
||||||
|
|
||||||
// Outer container
|
// Outer container
|
||||||
.progress {
|
.progress {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: @line-height-base;
|
height: @line-height-base;
|
||||||
margin-bottom: @line-height-base;
|
margin-bottom: @line-height-base;
|
||||||
background-color: #f5f5f5;
|
background-color: @progress-bg;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
|
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bar of progress
|
// Bar of progress
|
||||||
.progress .bar {
|
.progress-bar {
|
||||||
float: left;
|
float: left;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -60,21 +60,20 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||||
background-color: #149bdf;
|
background-color: @progress-bar-bg;
|
||||||
/*#gradient > .vertical(#149bdf, #0480be);*/
|
|
||||||
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
|
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
|
||||||
.box-sizing(border-box);
|
.box-sizing(border-box);
|
||||||
.transition(width .6s ease);
|
.transition(width .6s ease);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Striped bars
|
// Striped bars
|
||||||
.progress-striped .bar {
|
.progress-striped .progress-bar {
|
||||||
#gradient > .striped(#149bdf);
|
#gradient > .striped(@progress-bar-bg);
|
||||||
.background-size(40px 40px);
|
.background-size(40px 40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Call animation for the active one
|
// Call animation for the active one
|
||||||
.progress.active .bar {
|
.progress.active .progress-bar {
|
||||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||||
-moz-animation: progress-bar-stripes 2s linear infinite;
|
-moz-animation: progress-bar-stripes 2s linear infinite;
|
||||||
-ms-animation: progress-bar-stripes 2s linear infinite;
|
-ms-animation: progress-bar-stripes 2s linear infinite;
|
||||||
|
@ -84,41 +83,37 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// COLORS
|
// Variations
|
||||||
// ------
|
// -------------------------
|
||||||
|
|
||||||
// Danger (red)
|
// Danger (red)
|
||||||
.progress-danger .bar, .progress .bar-danger {
|
.progress-bar-danger {
|
||||||
background-color: #ee5f5b;
|
background-color: @progress-bar-danger-bg;
|
||||||
/*#gradient > .vertical(#ee5f5b, #c43c35);*/
|
.progress-striped & {
|
||||||
}
|
#gradient > .striped(@progress-bar-danger-bg);
|
||||||
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
|
}
|
||||||
#gradient > .striped(#ee5f5b);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Success (green)
|
// Success (green)
|
||||||
.progress-success .bar, .progress .bar-success {
|
.progress-bar-success {
|
||||||
background-color: #62c462;
|
background-color: @progress-bar-success-bg;
|
||||||
/*#gradient > .vertical(#62c462, #57a957);*/
|
.progress-striped & {
|
||||||
}
|
#gradient > .striped(@progress-bar-success-bg);
|
||||||
.progress-success.progress-striped .bar, .progress-striped .bar-success {
|
}
|
||||||
#gradient > .striped(#62c462);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Info (teal)
|
|
||||||
.progress-info .bar, .progress .bar-info {
|
|
||||||
background-color: #5bc0de;
|
|
||||||
/*#gradient > .vertical(#5bc0de, #339bb9);*/
|
|
||||||
}
|
|
||||||
.progress-info.progress-striped .bar, .progress-striped .bar-info {
|
|
||||||
#gradient > .striped(#5bc0de);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Warning (orange)
|
// Warning (orange)
|
||||||
.progress-warning .bar, .progress .bar-warning {
|
.progress-bar-warning {
|
||||||
background-color: lighten(#f89406, 15%);
|
background-color: @progress-bar-warning-bg;
|
||||||
/*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/
|
.progress-striped & {
|
||||||
|
#gradient > .striped(@progress-bar-warning-bg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
|
|
||||||
#gradient > .striped(lighten(#f89406, 15%));
|
// Info (teal)
|
||||||
|
.progress-bar-info {
|
||||||
|
background-color: @progress-bar-info-bg;
|
||||||
|
.progress-striped & {
|
||||||
|
#gradient > .striped(@progress-bar-info-bg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,12 +9,21 @@
|
||||||
|
|
||||||
// Grays
|
// Grays
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
@grayDarker: #222;
|
@grayDarker: #222;
|
||||||
@grayDark: #333;
|
@grayDark: #333;
|
||||||
@gray: #555;
|
@gray: #555;
|
||||||
@grayLight: #999;
|
@grayLight: #999;
|
||||||
@grayLighter: #eee;
|
@grayLighter: #eee;
|
||||||
|
|
||||||
|
// Brand colors
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
@brand-primary: #428bca;
|
||||||
|
@brand-success: #5cb85c;
|
||||||
|
@brand-warning: #f0ad4e;
|
||||||
|
@brand-danger: #d9534f;
|
||||||
|
@brand-info: #5bc0de;
|
||||||
|
|
||||||
// Scaffolding
|
// Scaffolding
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
@ -22,14 +31,12 @@
|
||||||
@body-background: #fff;
|
@body-background: #fff;
|
||||||
@text-color: @grayDark;
|
@text-color: @grayDark;
|
||||||
|
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
@link-color: #428bca;
|
@link-color: #428bca;
|
||||||
@link-color-hover: darken(@link-color, 15%);
|
@link-color-hover: darken(@link-color, 15%);
|
||||||
|
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
|
@ -78,19 +85,19 @@
|
||||||
@btn-background: #a7a9aa;
|
@btn-background: #a7a9aa;
|
||||||
@btn-border: @btn-background;
|
@btn-border: @btn-background;
|
||||||
|
|
||||||
@btn-background-primary: @link-color;
|
@btn-background-primary: @brand-primary;
|
||||||
@btn-border-primary: @btn-background-primary;
|
@btn-border-primary: @btn-background-primary;
|
||||||
|
|
||||||
@btn-background-success: #5cb85c;
|
@btn-background-success: @brand-success;
|
||||||
@btn-border-success: @btn-background-success;
|
@btn-border-success: @btn-background-success;
|
||||||
|
|
||||||
@btn-background-warning: #f0ad4e;
|
@btn-background-warning: @brand-warning;
|
||||||
@btn-border-warning: @btn-background-warning;
|
@btn-border-warning: @btn-background-warning;
|
||||||
|
|
||||||
@btn-background-danger: #d9534f;
|
@btn-background-danger: @brand-danger;
|
||||||
@btn-border-danger: @btn-background-danger;
|
@btn-border-danger: @btn-background-danger;
|
||||||
|
|
||||||
@btn-background-info: #5bc0de;
|
@btn-background-info: @brand-info;
|
||||||
@btn-border-info: @btn-background-info;
|
@btn-border-info: @btn-background-info;
|
||||||
|
|
||||||
|
|
||||||
|
@ -253,6 +260,16 @@
|
||||||
@popover-arrow-outer-color: rgba(0,0,0,.25);
|
@popover-arrow-outer-color: rgba(0,0,0,.25);
|
||||||
|
|
||||||
|
|
||||||
|
// Progress bars
|
||||||
|
// -------------------------
|
||||||
|
@progress-bg: #f5f5f5;
|
||||||
|
@progress-bar-bg: @brand-primary;
|
||||||
|
@progress-bar-success-bg: @brand-success;
|
||||||
|
@progress-bar-warning-bg: @brand-warning;
|
||||||
|
@progress-bar-danger-bg: @brand-danger;
|
||||||
|
@progress-bar-info-bg: @brand-info;
|
||||||
|
|
||||||
|
|
||||||
// Miscellaneous
|
// Miscellaneous
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue