diff options
| -rw-r--r-- | public/assets/js/app.js | 9 | ||||
| -rw-r--r-- | public/assets/ok.css | 65 |
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; |