From 270c9d6ddf4c7e1a59e6e955226bfa6bbfe9a781 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 19 Aug 2020 18:12:51 +0200
Subject: vitrine modal

---
 .../frontend/app/views/viewer/modals/modals.css    | 63 ++++++++++++++++++++++
 1 file changed, 63 insertions(+)

(limited to 'animism-align/frontend/app/views/viewer/modals/modals.css')

diff --git a/animism-align/frontend/app/views/viewer/modals/modals.css b/animism-align/frontend/app/views/viewer/modals/modals.css
index 370e588..be32184 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.css
+++ b/animism-align/frontend/app/views/viewer/modals/modals.css
@@ -31,6 +31,7 @@
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
+  background-color: #eee;
 }
 .vitrine-modal .vitrine-text {
   background: white;
@@ -64,3 +65,65 @@
 .vitrine-modal .vitrine-close svg line {
   stroke: #000;
 }
+
+/* vitrine prev/next buttons */
+
+.vitrine-nav {
+  position: absolute;
+  bottom: 0;
+  transition: 0.1s transform;
+  transform: translateZ(0) translateY(9rem);
+  cursor: pointer;
+  color: #000;
+  font-size: 18px;
+}
+.vitrine-nav:hover {
+  transform: translateZ(0) translateY(0);
+}
+.vitrine-nav.prev {
+  left: 0;
+}
+.vitrine-nav.next {
+  right: 0;
+}
+.vitrine-nav .vitrine-nav-content {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+  height: 3rem;
+}
+.vitrine-nav.prev .vitrine-nav-content {
+  align-items: center;
+  justify-content: flex-start;
+}
+.vitrine-nav.next .vitrine-nav-content {
+  align-items: center;
+  justify-content: flex-end;
+}
+.vitrine-nav .vitrine-nav-thumbnail {
+  width: 12rem;
+  height: 8rem;
+  margin: 0.5rem;
+  border-radius: 1rem;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: #eee;
+}
+.vitrine-nav .arrow {
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.vitrine-nav .arrow.left,
+.vitrine-nav .arrow.right {
+  width: 1.25rem;
+}
+.vitrine-nav .arrow svg {
+  width: 100%;
+  height: 100%;
+}
+
-- 
cgit v1.2.3-70-g09d2