add new node components

2021-06-10 13:21:26 +02:00
parent 9c67a871e2
commit 659a16c29c
7 changed files with 619 additions and 0 deletions
@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="node-view-body"
+    :class="['node-view-body-' + mode, 'node-view-body-' + type]"
+  >
+    <slot name="default">
+      <div class="node-view-body-wrapper" v-html="content" />
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NodeViewBody',
+
+  props: {
+    content: { type: String, default: null },
+    type: { type: String, required: true },
+    mode: { type: String, required: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.node-view-body {
+  width: 100%;
+
+  font: {
+    family: $font-family-text;
+    line-height: inherit;
+
+  }
+
+  @include media-breakpoint-up(sm) {
+    font-size: 2rem;
+  }
+
+  .node-view-view & {
+    padding: 0 $node-view-spacer-sm-x;
+    font-size: 1.25rem;
+
+    @include media-breakpoint-up(sm) {
+      &-ref {
+        font-size: 2.6rem;
+      }
+
+      &-prod {
+        font-size: 1.5rem !important;
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      padding: 0 $node-view-spacer-x;
+    }
+  }
+
+  .node-view-card & {
+    padding: 0 $node-card-spacer-sm-x;
+    font-size: 1.1rem;
+
+    @include media-breakpoint-up(sm) {
+      font-size: 2rem;
+    }
+
+    @include media-breakpoint-up(md) {
+      padding: 0 $node-card-spacer-x;
+    }
+  }
+
+  &-card &-wrapper {
+    @include line-clamp(3, 1.5em);
+  }
+}
+</style>