aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/components/progress.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/components/progress.scss')
-rw-r--r--src/sass/components/progress.scss130
1 files changed, 65 insertions, 65 deletions
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index f28bec8c..be5bc126 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -6,89 +6,89 @@
$plyr-progress-offset: $plyr-range-thumb-height;
.plyr__progress {
- left: $plyr-progress-offset / 2;
- margin-right: $plyr-progress-offset;
- position: relative;
+ left: calc(#{$plyr-progress-offset} * 0.5);
+ margin-right: $plyr-progress-offset;
+ position: relative;
- input[type='range'],
- &__buffer {
- margin-left: -($plyr-progress-offset / 2);
- margin-right: -($plyr-progress-offset / 2);
- width: calc(100% + #{$plyr-progress-offset});
- }
+ input[type='range'],
+ &__buffer {
+ margin-left: calc(#{$plyr-progress-offset} * -0.5);
+ margin-right: calc(#{$plyr-progress-offset} * -0.5);
+ width: calc(100% + #{$plyr-progress-offset});
+ }
- input[type='range'] {
- position: relative;
- z-index: 2;
- }
+ input[type='range'] {
+ position: relative;
+ z-index: 2;
+ }
- // Seek tooltip to show time
- .plyr__tooltip {
- font-size: $plyr-font-size-time;
- left: 0;
- }
+ // Seek tooltip to show time
+ .plyr__tooltip {
+ font-size: $plyr-font-size-time;
+ left: 0;
+ }
}
.plyr__progress__buffer {
- -webkit-appearance: none; /* stylelint-disable-line */
- background: transparent;
- border: 0;
- border-radius: 100px;
- height: $plyr-range-track-height;
- left: 0;
- margin-top: -($plyr-range-track-height / 2);
- padding: 0;
- position: absolute;
- top: 50%;
+ -webkit-appearance: none; /* stylelint-disable-line */
+ background: transparent;
+ border: 0;
+ border-radius: 100px;
+ height: $plyr-range-track-height;
+ left: 0;
+ margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
+ padding: 0;
+ position: absolute;
+ top: 50%;
- &::-webkit-progress-bar {
- background: transparent;
- }
+ &::-webkit-progress-bar {
+ background: transparent;
+ }
- &::-webkit-progress-value {
- background: currentColor;
- border-radius: 100px;
- min-width: $plyr-range-track-height;
- transition: width 0.2s ease;
- }
+ &::-webkit-progress-value {
+ background: currentColor;
+ border-radius: 100px;
+ min-width: $plyr-range-track-height;
+ transition: width 0.2s ease;
+ }
- // Mozilla
- &::-moz-progress-bar {
- background: currentColor;
- border-radius: 100px;
- min-width: $plyr-range-track-height;
- transition: width 0.2s ease;
- }
+ // Mozilla
+ &::-moz-progress-bar {
+ background: currentColor;
+ border-radius: 100px;
+ min-width: $plyr-range-track-height;
+ transition: width 0.2s ease;
+ }
- // Microsoft
- &::-ms-fill {
- border-radius: 100px;
- transition: width 0.2s ease;
- }
+ // Microsoft
+ &::-ms-fill {
+ border-radius: 100px;
+ transition: width 0.2s ease;
+ }
}
// Loading state
.plyr--loading .plyr__progress__buffer {
- animation: plyr-progress 1s linear infinite;
- background-image: linear-gradient(
- -45deg,
- $plyr-progress-loading-bg 25%,
- transparent 25%,
- transparent 50%,
- $plyr-progress-loading-bg 50%,
- $plyr-progress-loading-bg 75%,
- transparent 75%,
- transparent
- );
- background-repeat: repeat-x;
- background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
- color: transparent;
+ animation: plyr-progress 1s linear infinite;
+ background-image: linear-gradient(
+ -45deg,
+ $plyr-progress-loading-background 25%,
+ transparent 25%,
+ transparent 50%,
+ $plyr-progress-loading-background 50%,
+ $plyr-progress-loading-background 75%,
+ transparent 75%,
+ transparent
+ );
+ background-repeat: repeat-x;
+ background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
+ color: transparent;
}
.plyr--video.plyr--loading .plyr__progress__buffer {
- background-color: $plyr-video-progress-buffered-bg;
+ background-color: $plyr-video-progress-buffered-background;
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
- background-color: $plyr-audio-progress-buffered-bg;
+ background-color: $plyr-audio-progress-buffered-background;
}