AutorÃa | Ultima modificación | Ver Log |
// Disable animation if transitions are disabled
@if $enable-transitions {
@keyframes progress-bar-stripes {
from {
background-position: $progress-height 0;
}
to {
background-position: 0 0;
}
}
}
.progress,
.rui-progress {
display: flex;
height: $progress-height;
overflow: hidden; // force rounded corners by cropping it
line-height: 0;
@include font-size($progress-font-size);
background-color: $progress-bg;
@include border-radius($progress-border-radius);
//@include box-shadow($progress-box-shadow);
.rui-course-card-progress-bar &,
.rui-course-card & {
height: 4px;
border-radius: 4px;
}
.theme-dark & {
background-color: $dm-progress-bg;
}
}
.rui-course-card {
.rui-course-card-progress-bar {
padding: 0 20px;
align-self: flex-end;
}
}
.rui-progress-bar,
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: $progress-bar-color;
text-align: center;
white-space: nowrap;
background: $primary-color-600;
background: linear-gradient(90deg, rgba($primary-color-600, 1) 0%, rgba($primary-color-400, 1) 100%);
.rui-progress-100 & {
background: $green-600;
background: linear-gradient(90deg, rgba($green-600, 1) 0%, rgba($green-400, 1) 100%);
}
@include transition($progress-bar-transition);
border-radius: 10px;
}
.progress-bar .sr-only {
display: block !important;
width: max-content;
overflow: initial;
margin: 0;
font-size: 11px;
font-weight: $font-weight-medium;
clip: auto;
padding: 6px;
.format-remuiformat & {
display: none!important;
}
}
.rui-progress-bar-striped {
@include gradient-striped();
background-size: $progress-height $progress-height;
}
@if $enable-transitions {
.rui-progress-bar-animated {
animation: $progress-bar-animation-timing progress-bar-stripes;
@if $enable-prefers-reduced-motion-media-query {
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
}
}
.rui-progress--value--100 {
left: auto !important;
right: 5px;
}
.rui-course-progressbar {
.drawer & {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba($container-bg, .8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
.theme-dark & {
background-color: $dm-body-bg;
}
}
&:hover {
text-decoration: none;
}
}
.rui-progress-count {
margin: 0 0 0 10px;
display: inline-flex;
align-items: center;
font-size: $font-size-xs;
font-weight: $font-weight-bold;
.rui-progress-count-total {
margin-left: .25rem;
opacity: .6;
}
}
.rui-progress-count--text {
font-size: $font-size-sm;
color: $body-color-light;
.theme-dark & {
color: $dm-body-color-light;
}
}