fcad-core-dragon 2.1.0 → 2.1.2

package/src/components/AppBaseFlipCard.vue

@@ -1,84 +1,84 @@
-<template>
-  <!--
-     inspire by : https://vuejsexamples.com/generic-flip-card-in-vue-that-allows-completely-arbitrary-content-on-each-side/
-    -->
-  <div class="flip-card" role="button" aria-pressed="false" @click="fnClick">
-    <div class="inside-card" :class="{ flip: isFlipped }">
-      <div class="front-card" name="front-card">
-        <slot name="front-card" />
-      </div>
-      <div class="back-card">
-        <slot name="back-card" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-  data() {
-    return {
-      isFlipped: false
-    }
-  },
-  methods: {
-    /**
-     * @fires click to parent componant or page
-     */
-    fnClick() {
-      this.$emit('click', this.$el)
-      this.isFlipped = !this.isFlipped
-    }
-  }
-}
-</script>
-<style lang="scss">
-.flip-card {
-  height: auto;
-  cursor: pointer;
-
-  /***** Parameretre modifiable *****/
-  perspective: 100%;
-  width: 90%;
-
-  .inside-card {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    /***** Parameretre modifiable *****/
-    transform-style: preserve-3d;
-    transition: transform 0.5s;
-
-    &.flip {
-      /***** Parameretre modifiable *****/
-      transform: rotateY(180deg);
-    }
-
-    .front-card,
-    .back-card {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      -webkit-backface-visibility: hidden;
-      backface-visibility: hidden;
-
-      .img-flip-card {
-        width: 90%;
-        height: auto;
-      }
-    }
-
-    .back-card {
-      /***** Parameretre modifiable *****/
-      transform: rotateY(180deg);
-    }
-  }
-}
-</style>
+<template>
+  <!--
+     inspire by : https://vuejsexamples.com/generic-flip-card-in-vue-that-allows-completely-arbitrary-content-on-each-side/
+    -->
+  <div class="flip-card" role="button" aria-pressed="false" @click="fnClick">
+    <div class="inside-card" :class="{ flip: isFlipped }">
+      <div class="front-card" name="front-card">
+        <slot name="front-card" />
+      </div>
+      <div class="back-card">
+        <slot name="back-card" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+  data() {
+    return {
+      isFlipped: false
+    }
+  },
+  methods: {
+    /**
+     * @fires click to parent componant or page
+     */
+    fnClick() {
+      this.$emit('click', this.$el)
+      this.isFlipped = !this.isFlipped
+    }
+  }
+}
+</script>
+<style lang="scss">
+.flip-card {
+  height: auto;
+  cursor: pointer;
+
+  /***** Parameretre modifiable *****/
+  perspective: 100%;
+  width: 90%;
+
+  .inside-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    /***** Parameretre modifiable *****/
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+
+    &.flip {
+      /***** Parameretre modifiable *****/
+      transform: rotateY(180deg);
+    }
+
+    .front-card,
+    .back-card {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+
+      .img-flip-card {
+        width: 90%;
+        height: auto;
+      }
+    }
+
+    .back-card {
+      /***** Parameretre modifiable *****/
+      transform: rotateY(180deg);
+    }
+  }
+}
+</style>