chore(progress): cleanup unused css
This commit is contained in:
parent
aebb047d18
commit
e78ab476fc
@ -33,33 +33,47 @@ defineProps({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.progress-bar {
|
||||
--progress-height: var(--size-normal, #{$size-normal});
|
||||
--progress-height: #{$size-normal};
|
||||
--progress-bar-background-color: var(--border-light, #{$border-light});
|
||||
--progress-value-background-color: var(--grey-500, #{$text});
|
||||
--progress-border-radius: var(--radius-rounded, #{$radius-rounded});
|
||||
--progress-indeterminate-duration: 1.5s;
|
||||
|
||||
--size-small: #{$size-small};
|
||||
--size-medium: #{$size-medium};
|
||||
--size-large: #{$size-large};
|
||||
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-radius: var(--progress-border-radius);
|
||||
height: var(--progress-height);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
min-width: 6vw;
|
||||
|
||||
width: 50px;
|
||||
margin: 0 .5rem 0 0;
|
||||
flex: 3 1 auto;
|
||||
|
||||
&::-moz-progress-bar,
|
||||
&::-webkit-progress-value {
|
||||
background: var(--progress-value-background-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin: 0.5rem 0 0 0;
|
||||
order: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: var(--progress-bar-background-color);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: var(--progress-value-background-color);
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--progress-value-background-color);
|
||||
}
|
||||
|
||||
&::-ms-fill {
|
||||
background-color: var(--progress-value-background-color);
|
||||
border: none;
|
||||
@ -69,23 +83,13 @@ defineProps({
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
&::-webkit-progress-value {
|
||||
--progress-value-background-color: var(--#{$name}, #{$color});
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
--progress-value-background-color: var(--#{$name}, #{$color});
|
||||
}
|
||||
|
||||
&::-ms-fill {
|
||||
--progress-value-background-color: var(--#{$name}, #{$color});
|
||||
}
|
||||
--progress-value-background-color: var(--#{$name}, #{$color});
|
||||
|
||||
&:indeterminate {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--#{$name}, #{$color}) 30%,
|
||||
var(--progress-bar-background-color) 30%
|
||||
to right,
|
||||
var(--#{$name}, #{$color}) 30%,
|
||||
var(--progress-bar-background-color) 30%
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -98,9 +102,9 @@ defineProps({
|
||||
animation-timing-function: linear;
|
||||
background-color: var(--progress-bar-background-color);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--text, #{$text}) 30%,
|
||||
var(--progress-bar-background-color) 30%
|
||||
to right,
|
||||
var(--text, #{$text}) 30%,
|
||||
var(--progress-bar-background-color) 30%
|
||||
);
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
@ -119,15 +123,8 @@ defineProps({
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.is-small {
|
||||
--progress-height: var(--size-small, #{$size-small});
|
||||
}
|
||||
&.is-medium {
|
||||
--progress-height: var(--size-medium, #{$size-medium});
|
||||
}
|
||||
&.is-large {
|
||||
--progress-height: var(--size-large, #{$size-large});
|
||||
--progress-height: #{$size-small};
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,34 +136,4 @@ defineProps({
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
--progress-height: var(--size-normal, 1rem);
|
||||
|
||||
border-radius: $radius-large;
|
||||
min-width: 6vw;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar,
|
||||
&::-webkit-progress-value {
|
||||
background: var(--progress-value-background-color);
|
||||
}
|
||||
|
||||
width: 50px;
|
||||
margin: 0 0.5rem 0 0;
|
||||
flex: 3 1 auto;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin: 0.5rem 0 0 0;
|
||||
order: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar.is-small {
|
||||
--progress-height: var(--size-small, 0.75rem);
|
||||
}
|
||||
</style>
|
||||
|
@ -46,7 +46,6 @@
|
||||
class="task-progress"
|
||||
v-if="task.percentDone > 0"
|
||||
:value="task.percentDone * 100"
|
||||
is-small
|
||||
/>
|
||||
|
||||
<div class="footer">
|
||||
|
Reference in New Issue
Block a user