chore: use more css vars instead of hardcoded values

netwerk-digitaal-erfgoed · Aug 12, 2024 · d737ead · d737ead
1 parent b590c7e
commit d737ead
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 25 deletions.
diff --git a/nuxt/assets/scss/defaults.scss b/nuxt/assets/scss/defaults.scss
@@ -38,4 +38,11 @@
     $value: $i * $increment;
     --space-#{$i}: #{$value};
   }
+
+  // Transitions
+  --transition-page-vertical: top 1s;
+  --transition-page-horizontal: left 1s;
+  --transition-slider: 0.15s ease-in-out;
+  --transition-accordeon: 0.4s ease-in-out;
+  --transition-state: all 0.3s ease;
 }
diff --git a/nuxt/assets/scss/transitions.scss b/nuxt/assets/scss/transitions.scss
@@ -1,10 +1,10 @@
 /**
  * Transition to and from the art pages
  */
- .up {
+.up {
   &.slide-leave-active,
   &.slide-enter-active {
-    transition: top 1s;
+    transition: var(--transition-page-vertical);
   }
 
   &.slide-enter-from {
@@ -17,14 +17,14 @@
 
 .down {
   &.slide-leave-active {
-    transition: top 1s;
+    transition: var(--transition-page-vertical);
   }
 
   &.slide-leave-from {
     top: 0;
   }
   &.slide-leave-to {
-    top: 100%
+    top: 100%;
   }
 }
 
@@ -34,14 +34,14 @@
 .left {
   &.slide-leave-active,
   &.slide-enter-active {
-    transition: left 1s;
+    transition: var(--transition-page-horizontal);
   }
 
   &.slide-enter-from {
     left: 100%;
   }
   &.slide-enter-to {
-    left: 0
+    left: 0;
   }
   &.slide-leave-to {
     left: -100%;
@@ -54,15 +54,15 @@
 .right {
   &.slide-leave-active,
   &.slide-enter-active {
-    transition: left 1s;
+    transition: var(--transition-page-horizontal);
   }
 
   &.slide-enter-from {
     left: -100%;
   }
 
   &.slide-enter-to {
-    left: 0%
+    left: 0%;
   }
   &.slide-leave-to {
     left: 100%;

diff --git a/nuxt/components/Atoms/Accordeon.vue b/nuxt/components/Atoms/Accordeon.vue
@@ -55,7 +55,7 @@ const toggle = () => {
     cursor: pointer;
 
     .icon {
-      transition: transform 0.3s ease;
+      transition: transform var(--transition-accordeon);
 
       &.open {
         transform: rotate(90deg) translate(0, 6px);
@@ -65,9 +65,7 @@ const toggle = () => {
 
   &-body {
     overflow: hidden;
-    transition-property: max-height, opacity;
-    transition-duration: 0.4s;
-    transition-timing-function: ease-in-out;
+    transition: max-height var(--transition-accordeon), opacity var(--transition-accordeon);
 
     &.open {
       max-height: 100vh;

diff --git a/nuxt/components/Atoms/ArtworkTeaser.vue b/nuxt/components/Atoms/ArtworkTeaser.vue
@@ -69,7 +69,7 @@ defineProps<{
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transition: 0.15s ease-in-out;
+      transition: var(--transition-slider);
     }
   }
 

diff --git a/nuxt/components/Atoms/CategoryTeaser.vue b/nuxt/components/Atoms/CategoryTeaser.vue
@@ -86,7 +86,7 @@ const to = computed(() => {
       width: var(--max-width-slide);
       height: 100%;
       object-fit: cover;
-      transition: 0.15s ease-in-out;
+      transition: var(--transition-slider);
       filter: blur(0.625rem);
       position: absolute;
       left: 50%;

diff --git a/nuxt/components/Molecules/Form/Upload.vue b/nuxt/components/Molecules/Form/Upload.vue
@@ -190,7 +190,7 @@ const clearInput = () => {
         padding: var(--space-6);
         border-radius: 50%;
         background: var(--blues-blue);
-        color: white;
+        color: var(--primary-color);
       }
     }
   }

diff --git a/nuxt/components/organisms/CategorySlider.vue b/nuxt/components/organisms/CategorySlider.vue
@@ -42,7 +42,7 @@ const slideStyles = computed(() => {
   background-color: var(--primary-color);
 
   .category-slide {
-    transition: 0.15s ease-in-out;
+    transition: var(--transition-slider);
 
     &:hover {
       width: var(--max-width-slide) !important;

diff --git a/nuxt/components/organisms/Create/Editor.vue b/nuxt/components/organisms/Create/Editor.vue
@@ -93,20 +93,20 @@ onBeforeMount(async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--space-4);
   margin: 0 var(--space-20);
 
   .actions {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: var(--space-4);
   }
 }
 
 .preview {
   display: flex;
   overflow-x: scroll;
-  min-height: calc(100vh - 96px); // full height minus banner
+  min-height: calc(100vh - var(--space-24)); // full height minus banner
 
   &-laptop {
     max-height: 1080px;

diff --git a/nuxt/components/organisms/Create/PreviewSidebar.vue b/nuxt/components/organisms/Create/PreviewSidebar.vue
@@ -270,7 +270,7 @@ onUnmounted(() => {
 
   .divider {
     background-color: #8c8c8c;
-    height: 1px;
+    height: var(--space-0);
     width: 100%;
     margin: var(--space-2) 0 var(--space-2);
   }
@@ -308,13 +308,13 @@ onUnmounted(() => {
 }
 
 .responsive-view-button {
-  width: 88px;
-  height: 65px;
+  width: var(--space-22);
+  height: var(--space-16);
   border: 2px solid gray;
-  transition: all 0.2s ease;
+  transition: var(--transition-state);
 
   svg {
-    transition: color 0.2s ease;
+    transition: var(--transition-state);
   }
 
   &:hover,

diff --git a/nuxt/pages/index.vue b/nuxt/pages/index.vue
@@ -52,7 +52,7 @@ a {
   text-decoration: none;
   color: white;
   padding: var(--space-2);
-  transition: color 0.3s ease;
+  transition: var(--transition-state);
 
   &:hover {
     color: blue;