blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Setup Assistant: Cleanup rename CSS variable

Browse Source 
From --wiz-progress- to --setup-progres-
This commit is contained in:
Pablo Vazquez 2022-07-21 19:48:16 +02:00 committed by Francesco Siddi
parent 2a12e2d693
commit e11c73c798
1 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/app/src/views/FirstTimeWizardView.vue
View File

@ -419,10 +419,11 @@ export default {
</script> </script>
<style> <style>
.progress { .progress {
--wiz-progress-indicator-size: 8px; --setup-progress-indicator-size: 8px;
--wiz-progress-indicator-border-width: 2px; --setup-progress-indicator-border-width: 2px;
--wiz-progress-indicator-color: var(--color-text-hint); --setup-progress-indicator-color: var(--color-text-hint);
--wiz-progress-indicator-color-current: var(--color-accent); --setup-progress-indicator-color-done: var(--color-accent);
--setup-progress-indicator-color-current: var(--color-accent-text);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -434,12 +435,12 @@ export default {
/* Progress indicator line between dots. */ /* Progress indicator line between dots. */
.progress:before { .progress:before {
background-color: var(--wiz-progress-indicator-color); background-color: var(--setup-progress-indicator-color);
content: ''; content: '';
display: block; display: block;
height: var(--wiz-progress-indicator-border-width); height: var(--setup-progress-indicator-border-width);
position: absolute; position: absolute;
top: calc(50% - calc(var(--wiz-progress-indicator-border-width) / 2)); top: calc(50% - calc(var(--setup-progress-indicator-border-width) / 2));
transform: translateY(-50%); transform: translateY(-50%);
width: 100%; width: 100%;
} }
@ -453,10 +454,11 @@ export default {
--progress-bar-width-at-current-step: calc(var(--width-each-segment) * calc(v-bind('currentSetupStep') - 1)); --progress-bar-width-at-current-step: calc(var(--width-each-segment) * calc(v-bind('currentSetupStep') - 1));
position: absolute; position: absolute;
top: calc(50% - calc(var(--wiz-progress-indicator-border-width) / 2)); top: calc(50% - calc(var(--setup-progress-indicator-border-width) / 2));
transform: translateY(-50%); transform: translateY(-50%);
background-color: var(--color-accent); background-color: var(--color-accent);
height: var(--wiz-progress-indicator-border-width); height: var(--wiz-progress-indicator-border-width);
height: var(--setup-progress-indicator-border-width);
position: absolute; position: absolute;
transition: width 500ms ease-out; transition: width 500ms ease-out;
width: var(--progress-bar-width-at-current-step); width: var(--progress-bar-width-at-current-step);
@ -467,14 +469,14 @@ export default {
.progress li span { .progress li span {
background-color: var(--color-background-column); background-color: var(--color-background-column);
border-radius: 50%; border-radius: 50%;
border: var(--wiz-progress-indicator-border-width) solid var(--color-background-column); border: var(--setup-progress-indicator-border-width) solid var(--color-background);
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color); box-shadow: 0 0 0 var(--setup-progress-indicator-border-width) var(--setup-progress-indicator-color);
content: ''; content: '';
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
height: var(--wiz-progress-indicator-size); height: var(--setup-progress-indicator-size);
position: relative; position: relative;
width: var(--wiz-progress-indicator-size); width: var(--setup-progress-indicator-size);
transition-duration: 500ms; transition-duration: 500ms;
transition-property: background-color, border, box-shadow; transition-property: background-color, border, box-shadow;
transition-delay: 250ms; transition-delay: 250ms;
@ -486,17 +488,13 @@ export default {
} }
.progress li.done span { .progress li.done span {
background-color: var(--wiz-progress-indicator-color-current); background-color: var(--setup-progress-indicator-color-done);
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-current); box-shadow: 0 0 0 var(--setup-progress-indicator-border-width) var(--setup-progress-indicator-color-done);
} }
.progress li.current span { .progress li.current span {
background-color: var(--color-background-column); background-color: var(--color-background-column);
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-current); box-shadow: 0 0 0 var(--setup-progress-indicator-border-width) var(--setup-progress-indicator-color-current);
}
.progress li.current span {
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-current);
} }
body.is-setup-assistant #app { body.is-setup-assistant #app {