From 0c657f2064fef4eeab0c2dc93fa5103ff1bfe1c8 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 3 Dec 2016 04:25:19 +0530 Subject: [PATCH] theming & ainmation. --- src/index.html | 94 ++++++++++++++++++++++++++++++++++++++++---------- src/script.js | 10 ++++-- 2 files changed, 82 insertions(+), 22 deletions(-) diff --git a/src/index.html b/src/index.html index e7ea8e4..5d6208d 100644 --- a/src/index.html +++ b/src/index.html @@ -14,12 +14,15 @@ src: local('Inconsolata'), url(../Inconsolata-Regular.ttf) format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } - + :root { + --color-bg: #252637; + --color-sidebar: #3A2B63; + } body { margin: 0; padding: 0; background: rgba(0, 0, 0, 0.5); - background: #444; + background: var(--color-bg); color: rgba(255,255,255,0.9); min-height: 100vh; font-family: Helvetica, arial; @@ -53,7 +56,7 @@ border-top-color: currentColor; position: relative; top: 5px; - margin-left: 7px; + margin-left: 8px; } a > svg { fill: rgba(255, 255, 255, 0.2) @@ -121,7 +124,7 @@ height: 33%; overflow: hidden; position: relative; - background: #272822; + background: var(--color-bg); transition: height 0.30s ease, width 0.30s ease; will-change: height; /*animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;*/ @@ -151,11 +154,18 @@ justify-content: space-between; align-items: center; padding: 5px 10px; - background: rgba(0,0,0,0.25); + background: rgba(0,0,0,0.20); color: #888; border-bottom: 1px solid rgba(0,0,0,0.3); font-weight: bold; } + .code-wrap__header-label { + /*transform: translate(0px) scale(1.2);*/ + display: inline-block; + font-size: 1.3em; + opacity: 0.5; + /*transform-origin: left center;*/ + } .layout-2 .is-minimized .code-wrap__header { writing-mode: vertical-lr; padding: 10px 5px; @@ -194,6 +204,10 @@ .cm-s-monokai .CodeMirror-linenumber { color:rgba(255,255,255,0.2); } + .cm-s-monokai.CodeMirror, + .cm-s-monokai .CodeMirror-gutters { + background: var(--color-bg); + } #demo-frame { border: 0; @@ -206,7 +220,7 @@ .main-header, .footer { padding: 5px 10px; - background-color: #111; + background-color: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.45); border-top: 1px solid rgba(255,255,255,0.14); line-height: 20px; @@ -271,7 +285,7 @@ fill: rgba(255, 255, 255, 0.45); } .gutter { - background: rgba(0,0,0,0.2); + background: rgba(255, 255, 255, 0.05); flex-shrink: 0; } .gutter-horizontal { @@ -283,7 +297,7 @@ .item-title-input { background: none; border: 0; - color: rgba(255,255,255,0.8); + color: rgba(255,255,255,0.6); width: calc(100vw - 400px); } .modal { @@ -340,12 +354,13 @@ width: 400px; padding: 20px 30px; z-index: 6; - background-color: #272822; - transition: 0.3s ease; + background-color: var(--color-sidebar); + transition: 0.3s cubic-bezier(1, 0.13, 0.21, 0.87); will-change: transform; transform: translateX(100%); } .saved-items-pane.is-open { + transition-duration: 0.45s; transform: translateX(0); } .is-modal-visible ~ .modal-overlay, @@ -370,23 +385,64 @@ } .saved-item-tile { padding: 20px; - background-color: #2f302b; + background-color: rgba(255, 255, 255, 0.06); position: relative; /*border: 1px solid rgba(255,255,255,0.1);*/ margin: 20px 0; display: block; border-radius: 4px; cursor: pointer; + opacity: 0; + transform: translateX(50px); + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); + animation: slide-left 0.35s ease forwards; + } + .saved-item-tile:nth-child(1) { animation-delay: 0.1s; } + .saved-item-tile:nth-child(2) { animation-delay: 0.2s; } + .saved-item-tile:nth-child(3) { animation-delay: 0.3s; } + .saved-item-tile:nth-child(4) { animation-delay: 0.4s; } + .saved-item-tile:nth-child(5) { animation-delay: 0.5s; } + .saved-item-tile:nth-child(6) { animation-delay: 0.6s; } + .saved-item-tile:nth-child(7) { animation-delay: 0.7s; } + .saved-item-tile:nth-child(9) { animation-delay: 0.8s; } + .saved-item-tile:nth-child(10) { animation-delay: 0.9s; } + .saved-item-tile:nth-child(11) { animation-delay: 1s; } + .saved-item-tile:nth-child(12) { animation-delay: 1.1s; } + .saved-item-tile:nth-child(13) { animation-delay: 1.2s; } + @keyframes slide-left { + from { + opacity: 0; + transform: translateX(50px); + } + to { + opacity: 1; + transform: translateX(0px); + } } .saved-item-tile:hover { background: rgba(255,255,255,0.1); } .saved-item-tile__close-btn { - padding: 20px; + padding: 7px 10px; position: absolute; - right: -5px; - top: -5px; + right: 8px; + top: 6px; + color: rgba(255,255,255,0.3); + border-radius: 50%; + background: rgba(255,255,255,0.05); + } + .saved-item-tile__close-btn:hover { + background: rgba(255,255,255,0.8); + color: #555; + } + .saved-item-tile__title { + font-size: 1.6em; + margin: 0 0 1em 0; + opacity: 0.8; + } + .saved-item-tile__meta { + opacity: 0.3; } .saved-items-pane__container { overflow-y: scroll; @@ -477,7 +533,7 @@ cursor: pointer; } .dropdown__menu > li > a:hover { - background: #ff8c00; + background: var(--color-sidebar); color: white; } .dropdown__menu > li:not(:last-child) { @@ -495,7 +551,7 @@ left: 50%; top: 0; padding: 10px; - background: #9f3b4e; + background: var(--color-sidebar); border-radius: 3px; z-index: 6; transform: translateY(-100%); @@ -576,7 +632,7 @@
- HTML + HTML
  • HTML
  • Markdown
    • @@ -592,7 +648,7 @@
    - CSS + CSS
    • CSS
    • SCSS
      • @@ -608,7 +664,7 @@
      - JS + JS
      • JS
      • CoffeeScript
        • diff --git a/src/script.js b/src/script.js index 5cb93fa..0d59004 100644 --- a/src/script.js +++ b/src/script.js @@ -235,14 +235,16 @@ }); items.forEach(function (item) { html += '
        ' - + 'X' - + '

        ' + item.title + '

        Last updated: ' + utils.getHumanDate(item.updatedOn) + '
        '; + + 'X' + + '

        ' + item.title + '

        Last updated: ' + utils.getHumanDate(item.updatedOn) + '
      '; }); } else { html += 'Nothing saved here.' } savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html; toggleSavedItemsPane(); + // HACK: Set overflow after sometime so that the items can animate without getting cropped. + // setTimeout(() => $('#js-saved-items-wrap').style.overflowY = 'auto', 1000); } function toggleSavedItemsPane(shouldOpen) { @@ -697,7 +699,9 @@ utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane); utils.onButtonClick(savedItemsPane, function (e) { if (e.target.classList.contains('js-saved-item-tile')) { - openItem(e.target.dataset.itemId); + setTimeout(function () { + openItem(e.target.dataset.itemId); + }, 300); toggleSavedItemsPane(); } if (e.target.classList.contains('js-saved-item-tile__close-btn')) {