🐛 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 <[email protected]> Co-authored-by: langehm <[email protected]>
it-at-m · Nov 6, 2024 · faf6252 · faf6252
1 parent 8a31d5b
commit faf6252
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 14 deletions.
diff --git a/public/assets/temporary/custom-style.css b/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;
-}
diff --git a/src/components/Card/MucCard.vue b/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

diff --git a/src/components/Divider/MucDivider.vue b/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>
diff --git a/src/components/Intro/MucIntro.vue b/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">