arrows

2 files changed, 64 insertions, 10 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 34f03b2..974d51e 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -13,6 +13,13 @@ $(function() {
 $('.top').flickity({
   cellAlign: 'left',
   contain: true,
-  pageDots: false
+  pageDots: false,
+  wrapAround: true,
+  arrowShape: { 
+  x0: 10,
+  x1: 35, y1: 25,
+  x2: 40, y2: 25,
+  x3: 15
+}
 
 });
\ No newline at end of file
diff --git a/public/assets/ok.css b/public/assets/ok.css
index dd3397e..ce46ed2 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -8,8 +8,9 @@
         box-sizing: inherit;
         padding: 0;
         margin: 0;
-        outline:0;
-        border:0;
+        outline: 0;
+        border: 0;
+        -webkit-appearance: none;
     }
     
     a,
@@ -20,7 +21,7 @@
     body {
         font-family: 'Roboto', sans-serif;
         font-size: 11px;
-        background:#fff;
+        background: #fff;
     }
     
     div,
@@ -36,7 +37,6 @@
         -webkit-flex-flow: column wrap;
         flex-flow: column wrap;
     }
-
     
     .top {
         background: yellow;
@@ -44,7 +44,6 @@
         /*height: 80vh;*/
         flex: 1 auto;
     }
-
     /*! Flickity */
     
     .flickity-enabled {
@@ -58,25 +57,73 @@
     .flickity-viewport {
         overflow: hidden;
         position: relative;
-        width:100%;
+        width: 100%;
     }
-
+    
     .flickity-slider {
         position: absolute;
         width: 100%;
     }
     
+    button {
+        height: 70vh;
+        /*THIS SHOULD BE DYNAMIC*/
+        width: 10vw;
+        position: absolute;
+        top: 0;
+        background: transparent;
+        cursor: pointer;
+    }
+    
+    button svg {
+        opacity: 0;
+        transition: 150ms all;
+        transition-timing-function: cubic-bezier(0, 0, 1, 1);
+        transform: scale(0.3);
+    }
+    
+    button.next {
+        right: 0;
+    }
+    
+    button.previous {
+        left: 0;
+    }
+    
+    button.previous:hover svg,
+    button.next:hover svg {
+        opacity: 1;
+        transform: scale(0.2);
+    }
+    
+    button.next:active svg,
+    button.previous:active svg {
+        transform: scale(0.1);
+    }
+    /*
+    button.next:hover {
+        background: rgba(255, 255, 255, 0.5);
+    }
+    
+    button.previous:hover {
+        background: rgba(255, 255, 255, 0.5);
+    }
+    */
+    
     .cell {
         width: 100vw;
-        height: 70vh; /*THIS SHOULD BE DYNAMIC*/
+        height: 70vh;
+        /*THIS SHOULD BE DYNAMIC*/
         background-position: center;
         background-size: cover;
         background-repeat: no-repeat;
     }
+    
     .cell.contain {
-        background-size: 20% ;
+        background-size: 20%;
         background-color: #eee;
     }
+    
     .bottom {
         /*height: 20vh;*/
         flex: 0 auto;