mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-15 14:55:20 +02:00
Code Issues Releases Wiki Activity

some more styling.

Browse Source
This commit is contained in:
Kushagra Gour 2016-12-04 03:18:14 +05:30
parent f5fafc9db9
commit eede93ee77
2 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/index.html
View File

@ -232,8 +232,17 @@
border-bottom: 1px solid rgba(255,255,255,0.14);
}
.main-header__btn-wrap > a {
font-size: 0.8em;
color: #9297B3;
border-radius: 3px;
border: 1px solid rgba(146, 151, 179, 0.33);
margin-left: 15px;
padding: 0px 5px;
text-transform: uppercase;
}
.main-header__btn-wrap > a > svg {
fill: #9297B3;
margin-right: 4px;
}
.logo {
display: inline-block;
@ -379,10 +388,15 @@
border-radius: 50%;
padding: 10px 14px;
background: crimson;
transition: 0.25s ease;
transform: scale(0);
will-change: transform, opacity;
transition: 0.3s ease;
transition-delay: 0;
}
.saved-items-pane.is-open .saved-items-pane__close-btn {
opacity: 1;
transition-delay: 0.4s;
transform: scale(1);
visibility: visible;
}
.saved-item-tile {
@ -407,11 +421,12 @@
.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; }
.saved-item-tile:nth-child(8) { animation-delay: 0.8s; }
.saved-item-tile:nth-child(9) { animation-delay: 0.9s; }
.saved-item-tile:nth-child(10) { animation-delay: 1s; }
.saved-item-tile:nth-child(11) { animation-delay: 1.1s; }
.saved-item-tile:nth-child(12) { animation-delay: 1.2s; }
.saved-item-tile:nth-child(n+12) { animation-delay: 1.3s; }
@keyframes slide-left {
from {
opacity: 0;
@ -564,16 +579,16 @@
}
.error-gutter {
width: 16px;
width: 8px;
}
.gutter-error-marker {
width: 10px;
height: 10px;
width: 8px;
height: 20px;
background: red;
border-radius: 50%;
border-radius: 0;
position: relative;
top: 4px;
left: 3px;
top: 0;
left: 1px;
}
.gutter-error-marker:after {
content: attr(data-title);
@ -583,7 +598,7 @@
opacity: 0;
visibility: hidden;
position: absolute;
top: 12px;
top: 14px;
left: 0px;
white-space: nowrap;
transform: translateX(-10px);
@ -596,10 +611,11 @@
transform: translateX(0);
}
.count-label {
color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.13);
color: rgba(0,0,0,0.8);
background: rgba(255,255,255,0.53);
border-radius: 5px;
padding: 1px 6px;
font-weight: bold;
}
</style>
</head>
@ -608,22 +624,22 @@
<div class="main-container">
<div class="main-header">
<div class="main-header__btn-wrap fr flex flex-v-center">
<a id="js-add-library-btn" class="flex flex-v-center">
Add library <span id="js-external-lib-count" style="visibility:hidden;" class="count-label"></span>
<a id="js-add-library-btn" class="fleex-v-center">
Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span>
</a>
<a id="js-new-btn" class="flex flex-v-center">
<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
<path fill="crimson" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>New
</a>
<a id="js-save-btn" class="flex flex-v-center">
<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
<path fill="crimson" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg>Save</a>
<a id="js-open-btn" class="flex flex-v-center">
<svg style="width:14px;height:14px;vertical-align:middle;" viewBox="0 0 24 24">
<path fill="crimson" d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
</svg>Open
</a>
</div>

4
src/script.js
View File

@ -174,9 +174,9 @@
noOfExternalLibs += externalCssTextarea.value.split('\n').filter(lib => !!lib).length;
if (noOfExternalLibs) {
$('#js-external-lib-count').textContent = noOfExternalLibs;
$('#js-external-lib-count').style.visibility = 'visible';
$('#js-external-lib-count').style.display = 'inline';
} else {
$('#js-external-lib-count').style.visibility = 'hidden';
$('#js-external-lib-count').style.display = 'none';
}
}