activated lightbox on cards, started to dev modal-card

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1744,17 +1744,36 @@ article.card {
       width: 100%;
       height: 100%; }
     article.card section.images figure {
+      cursor: pointer;
       margin: 0;
       position: absolute;
       top: 0;
-      left: 0; }
+      left: 0;
+      transition: opacity 0.2s ease-in-out; }
       article.card section.images figure:first-of-type {
         z-index: 5; }
+      article.card section.images figure.show {
+        opacity: 1;
+        z-index: 6; }
+      article.card section.images figure.hide {
+        opacity: 0; }
       article.card section.images figure img.blank {
         position: absolute;
         top: 0;
         left: 0;
         z-index: 20; }
+  article.card.search-card > header {
+    cursor: pointer; }
+  article.card.modal-card {
+    display: flex;
+    flex-flow: row-reverse nowrap;
+    width: 850px;
+    height: 610px; }
+    article.card.modal-card > .col {
+      flex-basis: 50%; }
+    article.card.modal-card section.col-right header {
+      position: relative;
+      bottom: auto; }
 
 #main-content > article.article div.cols {
   display: grid;

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -20,6 +20,9 @@ Vue.use(InfiniteLoading, {
 import CoolLightBox from 'vue-cool-lightbox'
 Vue.use(CoolLightBox)
 
+import VModal from 'vue-js-modal'
+Vue.use(VModal)
+
 import store from 'vuejs/store'
 import router from 'vuejs/route'
 

web/themes/custom/materiotheme/assets/styles/base/_variables.scss

@@ -12,3 +12,6 @@ $card_height: 295px;
 
 $minicard_width: 170px;
 $minicard_height: 100px;
+
+$modalcard_width: 850px;
+$modalcard_height: 610px;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -829,6 +829,7 @@ article.card{
     position: relative;
     &, *{width: 100%; height:100%;}
     figure{
+      cursor: pointer;
       margin:0;
       position: absolute;
       top:0; left:0;
@@ -836,6 +837,10 @@ article.card{
       &:first-of-type{
         z-index:5
       }
+      transition: opacity 0.2s ease-in-out;
+      &.show{opacity: 1; z-index:6;}
+      &.hide{opacity: 0;}
+
       img{
         // width: 100%; height:100%;
         &.blank{
@@ -846,6 +851,28 @@ article.card{
       }
     }
   }
+  // overwritnig card for card-medium (aka search-card)
+  &.search-card{
+    >header{
+      cursor: pointer;
+    }
+  }
+  // overwriting card for modal-card
+  &.modal-card{
+    display: flex;
+    flex-flow: row-reverse nowrap;
+    width: $modalcard_width;
+    height: $modalcard_height;
+    >.col{
+      flex-basis: 50%;
+    }
+    section.col-right{
+      header{
+        position: relative;
+        bottom: auto;
+      }
+    }
+  }
 }