mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-14 10:36:19 +02:00
theming & ainmation.
This commit is contained in:
Kushagra Gour
@ -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 @@
|
||||
<div id="js-html-code" data-type="html" class="code-wrap">
|
||||
<div class="code-wrap__header">
|
||||
<div class="btn-group" dropdown title="Click to change">
|
||||
<span id="js-html-mode-label">HTML</span><span class="caret"></span>
|
||||
<span id="js-html-mode-label" class="code-wrap__header-label">HTML</span><span class="caret"></span>
|
||||
<ul class="js-modes-menu dropdown__menu">
|
||||
<li><a data-type="html" data-mode="html">HTML</a></li>
|
||||
<li><a data-type="html" data-mode="markdown">Markdown</a></li>
|
||||
@ -592,7 +648,7 @@
|
||||
<div id="js-css-code" data-type="css" class="code-wrap">
|
||||
<div class="code-wrap__header">
|
||||
<div class="btn-group" dropdown title="Click to change">
|
||||
<span id="js-css-mode-label">CSS</span><span class="caret"></span>
|
||||
<span id="js-css-mode-label" class="code-wrap__header-label">CSS</span><span class="caret"></span>
|
||||
<ul class="js-modes-menu dropdown__menu">
|
||||
<li><a data-type="css" data-mode="css">CSS</a></li>
|
||||
<li><a data-type="css" data-mode="scss">SCSS</a></li>
|
||||
@ -608,7 +664,7 @@
|
||||
<div id="js-js-code" data-type="js" class="code-wrap">
|
||||
<div class="code-wrap__header">
|
||||
<div class="btn-group" dropdown title="Click to change">
|
||||
<span id="js-js-mode-label">JS</span><span class="caret"></span>
|
||||
<span id="js-js-mode-label" class="code-wrap__header-label">JS</span><span class="caret"></span>
|
||||
<ul class="js-modes-menu dropdown__menu">
|
||||
<li><a data-type="js" data-mode="js">JS</a></li>
|
||||
<li><a data-type="js" data-mode="coffee">CoffeeScript</a></li>
|
||||
|
||||
@ -235,14 +235,16 @@
|
||||
});
|
||||
items.forEach(function (item) {
|
||||
html += '<div class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">'
|
||||
+ '<a class="js-saved-item-tile__close-btn saved-item-tile__close-btn">X</a>'
|
||||
+ '<h3>' + item.title + '</h3><span>Last updated: ' + utils.getHumanDate(item.updatedOn) + '</span></div>';
|
||||
+ '<a class="js-saved-item-tile__close-btn saved-item-tile__close-btn hint--left" aria-label="Remove">X</a>'
|
||||
+ '<h3 class="saved-item-tile__title">' + item.title + '</h3><span class="saved-item-tile__meta">Last updated: ' + utils.getHumanDate(item.updatedOn) + '</span></div>';
|
||||
});
|
||||
} 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')) {
|
||||
setTimeout(function () {
|
||||
openItem(e.target.dataset.itemId);
|
||||
}, 300);
|
||||
toggleSavedItemsPane();
|
||||
}
|
||||
if (e.target.classList.contains('js-saved-item-tile__close-btn')) {
|
||||
|
||||
Reference in New Issue
Block a user