Merge branch '230-gls' of craft-in-america/vue-wp into dev

vue-theme/src/sss/_lightbox.sss

@@ -17,13 +17,10 @@
         position: absolute
         top: 50%
         transform: translate(-50% -50%)
-        /* transition: 0.3s linear */
-        /* will-change: transform opacity */
-    /* background-color: rgba(0, 0, 0, 0.7) */
     box-shadow: 0.5px 0.5px 0.5px 0px rgb(0 0 0 / 30%)
     display: block
     max-height: 80vh
-    max-width: 80vw
+    max-width: 90vw
     position: relative
     transition: transform 0.3s ease-in-out
 
@@ -36,59 +33,34 @@
     right: 0
     top: 0
     z-index: 10003
-    img
+    /* img
         transition: none
         &:hover
-            filter: grayscale(0%) brightness(100%)
+            filter: grayscale(0%) brightness(100%) */
 
 .vel-img, .vel-img-wrapper
     user-select: none
 
 .vel-btns-wrapper
+    display: flex 
+    justify-content: center 
     .btn__close, .btn__next, .btn__prev
         color: $cia_black 
         cursor: pointer
-        font-size: 32px
-        opacity: 0.6
         outline: none
         position: absolute
-        top: 50%
+        top: 3%
         transform: translateY(-50%)
-        transition: 0.15s linear
+        /* transition: 0.15s linear
         user-select: none
         &:hover
             opacity: 1
         &.disable, &.disable:hover
-            cursor: default
-            opacity: 0.2
+            cursor: default */
     .btn__next
-        right: 12px
+        right: $ms-7
     .btn__prev
-        left: 12px
-    .btn__close
-        right: 10px
-        top: 24px
-
-@media (max-width: 750px)
-    .vel-img
-        max-height: 95vh
-        max-width: 85vw
-    .vel-btns-wrapper
-        .btn__next, .btn__prev
-            font-size: 20px
-        .btn__close
-            font-size: 24px
-        .btn__next
-            right: 4px
-        .btn__prev
-            left: 4px
-    .vel-modal.is-rtl .vel-btns-wrapper
-        .btn__next
-            left: 4px
-            right: auto
-        .btn__prev
-            left: auto
-            right: 4px
+        left: $ms-7
 
 .vel-modal.is-rtl
     .vel-btns-wrapper
@@ -109,7 +81,7 @@
     top: 50%
     -webkit-transform: translate(-50%, -50%)
     transform: translate(-50%, -50%)
-    .ring
+    /* .ring
         display: inline-block
         height: 64px
         width: 64px
@@ -123,20 +95,7 @@
             display: block
             height: 46px
             margin: 1px
-            width: 46px
-
-@-webkit-keyframes ring
-    0%
-        transform: rotate(0deg)
-    to
-        transform: rotate(1turn)
-
-@keyframes ring
-    0%
-        transform: rotate(0deg)
-    to
-        transform: rotate(1turn)
-    
+            width: 46px     */
 
 .vel-on-error
     left: 50%
@@ -148,30 +107,17 @@
         font-size: 80px
 
 .vel-img-title
-    bottom: 60px
-    color: #ccc
-    cursor: default
-    font-size: 12px
-    left: 50%
-    line-height: 1
-    max-width: 80%
-    opacity: 0.8
-    overflow: hidden
+    bottom: 3%
+    font-size: $ms-0
+    max-width: 90%
     position: absolute
-    text-align: center
-    text-overflow: ellipsis
-    transform: translate(-50%)
-    transition: opacity 0.15s
-    white-space: nowrap
-    &:hover
-        opacity: 1
 
 .vel-icon
     fill: currentColor
-    height: 1em
+    height: 1.5rem
+    width: 1.5rem
     overflow: hidden
     vertical-align: -0.15em
-    width: 1em
 
 .vel-toolbar
     display: none
@@ -184,22 +130,44 @@
     padding: 0
     position: absolute
     transform: translate(-50%)
+
+    /* figure out way to stop  toolbar form loading */
     .toolbar-btn
         display: none
-        color: #fff
+        /* color: #fff
         cursor: pointer
         flex-shrink: 0
         font-size: 20px
         outline: none
         padding: 6px 10px
         &:active, &:hover
-            background-color: #3d3d3d
+            background-color: #3d3d3d */
 
 .vel-toolbar, .vel-toolbar .toolbar-btn
     background-color: #2d2d2d
     user-select: none
 
-figcaption
-    position: inherit
-    background: none
-    color: $cia_black
+@media (min-width: $medium)
+    .vel-img-title
+        /* bottom: 3% */
+        margin: 0 10vw 
+
+    .vel-icon
+        height: 2rem
+        width: 2rem
+
+    .vel-btns-wrapper
+        .btn__next, .btn__prev
+            top: 50%
+        .btn__next
+            right: $ms--3
+        .btn__prev
+            left: $ms--3
+
+    .vel-modal.is-rtl .vel-btns-wrapper
+        .btn__next
+            left: $ms--3
+            right: auto
+        .btn__prev
+            left: auto
+            right: $ms--3