🐛 fix MucDivider (#282)

* #183 🐛 fix MucDivider

* ♻️ moved css class into the component #183

* ♻️ refactored compoonents to use the muc-divider #183

---------

Co-authored-by: langehm <38280183+langehm@users.noreply.github.com>
Co-authored-by: langehm <langehm@users.noreply.github.com>

Author: markostreich

public/assets/temporary/custom-style.css

@@ -63,9 +63,3 @@ h5 {
         font-size: 1.25rem;
     }
 }
-
-.muc-divider {
-    align-self: stretch;
-    height: 0;
-    border: 1px var(--color-neutrals-blue) solid;
-}

src/components/Card/MucCard.vue

@@ -19,14 +19,16 @@
         </div>
       </div>
 
-      <div class="muc-divider" />
+      <muc-divider />
 
       <slot name="content" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { MucDivider } from "../Divider";
+
 const emit = defineEmits<{
   /**
    * @param e eventname

src/components/Divider/MucDivider.vue

@@ -1,9 +1,11 @@
 <template>
-  <hr class="divider-border" />
+  <div class="muc-divider" />
 </template>
 
 <style scoped>
-.divider-border {
-  border-bottom: 1px solid var(--color-neutrals-blue);
+.muc-divider {
+  align-self: stretch;
+  height: 0;
+  border-bottom: 1px var(--color-neutrals-blue) solid;
 }
 </style>

src/components/Intro/MucIntro.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { MucDivider } from "../Divider";
+
 defineProps<{
   /**
    * Title of the Intro
@@ -41,10 +43,7 @@ defineSlots<{
           </h1>
         </div>
 
-        <div
-          v-if="divider"
-          class="muc-divider"
-        />
+        <muc-divider v-if="divider" />
 
         <div class="m-intro-vertical__content">
           <p style="padding-bottom: 32px">