vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

chore(progress): cleanup unused css

This commit is contained in:
kolaente 2024-02-07 11:35:32 +01:00
parent aebb047d18
commit e78ab476fc
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 28 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/misc/ProgressBar.vue
View File

@ -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>

1
src/components/tasks/partials/kanban-card.vue
View File

@ -46,7 +46,6 @@
class="task-progress"
v-if="task.percentDone > 0"
:value="task.percentDone * 100"
is-small
/>
<div class="footer">