Merge pull request #34 from os2ulf/feature/OS2UOL-115

OS2UOL-115: Spacer and divider

assets/css/variables/_theme-colors.css

@@ -98,7 +98,7 @@
   --color-white: #fff;
   --color-text: #383838;
   --color-disabled: var(--color-gray-6);
-  --color-base-divider: #979797;
+  --color-base-divider: #D1CFCD;
 
   /* Layout colors */
   --site-background-color: var(--color-white);

components/blocks/DividerBlock.vue

@@ -1,17 +1,22 @@
-<template>
-  <div class="divider"></div>
-</template>
-
 <script setup>
 const props = defineProps({
   blockData: Object,
 });
 </script>
 
+<template>
+  <div class="divider"></div>
+</template>
+
 <style lang="postcss" scoped>
 .divider {
   margin: 28px 0;
-  border-top: 1px solid var(--color-base-divider);
-  opacity: 0.3;
+  border-top: 1px solid var(--color-primary);
+
+  /* There are 2 dividers in the design but in the AC its not mentioned which should be used
+  var for grey one - --color-base-divider
+  when/if grey is used add this opacity too: opacity: 0.4;
+  var for primary one - --color-primary
+   */
 }
 </style>

components/blocks/SpacerBlock.vue

@@ -21,15 +21,15 @@ const props = defineProps({
   padding: 0;
 
   &--small {
-    height: 1.875rem;
+    height: 15px @(--sm) 30px;
   }
 
   &--medium {
-    height: 3.125rem;
+    height: 25px @(--sm) 50px;
   }
 
   &--large {
-    height: 4.375rem;
+    height: 48px @(--sm) 96px;
   }
 }
 </style>