text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[42],{f2ab:function(n,e,t){"use strict";t.r(e),e["default"]='<template>\n  <div class="q-ma-md row justify-evenly" style="max-width: 700px; width: 100%;">\n\n    <div class="q-ma-md row justify-center items-center full-width">\n      <q-toggle v-model="hover" label="Toggle Hover" />\n      <q-toggle v-model="active" label="Toggle Transitions" />\n    </div>\n\n    <div class="description text-center rounded-borders">\n      <q-flashcard :no-hover="hover" :style="style">\n        <q-flashcard-section transition="[\'nudge-out\', \'fade-out\']" :active="active">\n          <img :src="getImage(0)" width=300 height=200>\n        </q-flashcard-section>\n        <q-flashcard-section transition="fade-in" class="fit" style="top:0;background-color: rgba(219,127,8, 0.7);" :active="active"></q-flashcard-section>\n        <q-flashcard-section transition="shake-down" class="fit" :active="active">\n          <div class="text-center my-header">\n            Mashup Demo #2\n          </div>\n        </q-flashcard-section>\n        <q-flashcard-section transition="spin-in" class="fit" :active="active">\n          <div class="my-text">\n            For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.\n          </div>\n        </q-flashcard-section>\n        <q-flashcard-section transition="slide-up-in" class="fit flex justify-center items-end" style="transition: all 1s ease-in-out !important;" :active="active">\n          <a href="#" class="my-button">Learn More</a>\n        </q-flashcard-section>\n      </q-flashcard>\n      <div class="text-h5 q-pt-sm">Mashup Demo #2</div>\n    </div>\n\n  </div>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      hover: false,\n      active: false\n    }\n  },\n\n  computed: {\n    style () {\n      return {\n        width: \'320px\',\n        height: \'220px\',\n        backgroundImage: `url(\'bgimg.jpg\')`, // eslint-disable-line\n        padding: \'10px\',\n        border: \'10px solid #fff\',\n        textAlign: \'center\',\n        boxShadow: \'1px 1px 2px #e6e6e6\'\n      }\n    }\n  },\n\n  methods: {\n    getImage (index) {\n      if (index % 2) {\n        return \'1.jpg\'\n      }\n      return \'2.jpg\'\n    }\n  }\n}\n<\/script>\n\n<style lang="sass" scoped>\n.description\n  padding: 10px\n  background-color: black\n  color: white\n  box-shadow: 1px 1px 2px #e6e6e6\n\n.my-header\n  width: 100%\n  top: 0\n  height: 45px\n  color: white\n  background-color: rgba(0,0,0,0.8)\n  text-transform: uppercase\n  text-align: center\n  font-size: 17px\n  margin: 20px 0 0 0\n  padding: 10px\n\n.my-text\n  width: 100%\n  top: 0\n  height: 80px\n  color: white\n  text-align: center\n  font-size: 12px\n  margin: 60px 0 0 0\n  padding: 20px\n  line-height: normal\n  font-family: Georgia, serif\n  font-style: italic\n\n.my-button-container\n  width: 100%\n\n.my-button\n  text-decoration: none\n  text-transform: uppercase\n  margin: 0 0 20px 0\n  text-align: center\n  padding: 7px 14px\n  background-color: #000\n  color: #fff\n  text-transform: uppercase\n  box-shadow: 0 0 1px #000\n  transition-delay: 0.2s\n\n.my-button:hover\n  box-shadow: 0 0 5px #000\n</style>\n'}}]);