Files
dev.ttsby.com/plugins/rc/1.0.0/css/extra/rc-progress.css
2023-04-17 11:06:08 +09:00

189 lines
4.5 KiB
CSS

@keyframes progress-bar-stripes {
from {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
.progress {
display: block;
width: 100%;
height: 1rem;
margin-bottom: 1rem;
}
.progress[value] {
background-color: #eee;
border: 0;
appearance: none;
border-radius: 0.125rem;
}
.progress[value]::-ms-fill {
background-color: #0074d9;
border: 0;
}
.progress[value]::-moz-progress-bar {
background-color: #0074d9;
border-bottom-left-radius: 0.125rem;
border-top-left-radius: 0.125rem;
}
.progress[value]::-webkit-progress-value {
background-color: #0074d9;
border-bottom-left-radius: 0.125rem;
border-top-left-radius: 0.125rem;
}
.progress[value="100"]::-moz-progress-bar {
border-bottom-right-radius: 0.125rem;
border-top-right-radius: 0.125rem;
}
.progress[value="100"]::-webkit-progress-value {
border-bottom-right-radius: 0.125rem;
border-top-right-radius: 0.125rem;
}
.progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 0.125rem;
}
base::-moz-progress-bar,
.progress[value] {
background-color: #eee;
border-radius: 0.125rem;
}
@media screen and (min-width: 0\0) {
.progress {
background-color: #eee;
border-radius: 0.125rem;
}
.progress-bar {
display: inline-block;
height: 1rem;
text-indent: -999rem;
background-color: #0074d9;
border-bottom-left-radius: 0.125rem;
border-top-left-radius: 0.125rem;
}
.progress[width="100%"] {
border-bottom-right-radius: 0.125rem;
border-top-right-radius: 0.125rem;
}
}
.progress-striped[value]::-webkit-progress-value {
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-size: 1rem 1rem;
}
.progress-striped[value]::-moz-progress-bar {
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-size: 1rem 1rem;
}
.progress-striped[value]::-ms-fill {
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-size: 1rem 1rem;
}
@media screen and (min-width: 0\0) {
.progress-bar-striped {
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-size: 1rem 1rem;
}
}
.progress-animated[value]::-webkit-progress-value {
animation: progress-bar-stripes 2s linear infinite;
}
.progress-animated[value]::-moz-progress-bar {
animation: progress-bar-stripes 2s linear infinite;
}
@media screen and (min-width: 0\0) {
.progress-animated .progress-bar-striped {
animation: progress-bar-stripes 2s linear infinite;
}
}
.progress-success[value]::-webkit-progress-value {
background-color: #5cb85c;
}
.progress-success[value]::-moz-progress-bar {
background-color: #5cb85c;
}
.progress-success[value]::-ms-fill {
background-color: #5cb85c;
}
@media screen and (min-width: 0\0) {
.progress-success .progress-bar {
background-color: #5cb85c;
}
}
.progress-info[value]::-webkit-progress-value {
background-color: #5bc0de;
}
.progress-info[value]::-moz-progress-bar {
background-color: #5bc0de;
}
.progress-info[value]::-ms-fill {
background-color: #5bc0de;
}
@media screen and (min-width: 0\0) {
.progress-info .progress-bar {
background-color: #5bc0de;
}
}
.progress-warning[value]::-webkit-progress-value {
background-color: #f0ad4e;
}
.progress-warning[value]::-moz-progress-bar {
background-color: #f0ad4e;
}
.progress-warning[value]::-ms-fill {
background-color: #f0ad4e;
}
@media screen and (min-width: 0\0) {
.progress-warning .progress-bar {
background-color: #f0ad4e;
}
}
.progress-danger[value]::-webkit-progress-value {
background-color: #d9534f;
}
.progress-danger[value]::-moz-progress-bar {
background-color: #d9534f;
}
.progress-danger[value]::-ms-fill {
background-color: #d9534f;
}
@media screen and (min-width: 0\0) {
.progress-danger .progress-bar {
background-color: #d9534f;
}
}
/*# sourceMappingURL=rc-progress.css.map */