Skip to content

Commit bd2588a

Browse files
chinchangchinchang
committed
add inlet + some ui changes.
1 parent ba0f8d0 commit bd2588a

File tree

4 files changed

+223
-17
lines changed

4 files changed

+223
-17
lines changed

‎src/index.html‎

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
66
<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
77
<link rel="stylesheet" href="lib/hint.min.css">
8+
<link rel="stylesheet" href="lib/inlet.css">
89
<style>
910
@font-face {
1011
font-family: 'Inconsolata';
@@ -76,6 +77,12 @@
7677
top: 0; bottom: 0;
7778
display: flex;
7879
flex-direction: column;
80+
will-change: -webkit-filter;
81+
transition: 0.15s ease 0.4s;
82+
}
83+
.overlay-visible .main-container {
84+
transition-duration: 0.3s;
85+
-webkit-filter: blur(3px);
7986
}
8087
.code-side,
8188
.demo-side {
@@ -239,6 +246,7 @@
239246
}
240247
.modal__content {
241248
background: #fdfdfd;
249+
color: #444;
242250
position: relative;
243251
border-radius: 3px;
244252
margin: 0 auto;
@@ -262,51 +270,62 @@
262270
visibility: hidden;
263271
top: 0;
264272
left: 0;
265-
z-index: 1000;
273+
z-index: 5;
266274
opacity: 0;
275+
will-change: opacity;
267276
background: rgba(0,0,0,0.6);
268277
transition: all 0.3s;
269278
}
270-
271-
.is-modal-visible ~ .modal-overlay {
272-
opacity: 1;
273-
visibility: visible;
274-
}
275279
.saved-items-pane {
276280
position: fixed;
277281
right: 0;
278282
top: 0;
279283
bottom: 0;
280284
width: 400px;
281-
padding: 20px;
282-
z-index: 4;
283-
background-color: #111;
285+
padding: 20px 30px;
286+
z-index: 6;
287+
background-color: #272822;
284288
transition: 0.3s ease;
285289
will-change: transform;
286290
transform: translateX(100%);
287291
}
288292
.saved-items-pane.is-open {
289293
transform: translateX(0);
290294
}
295+
.is-modal-visible ~ .modal-overlay,
296+
.saved-items-pane.is-open ~ .modal-overlay {
297+
opacity: 1;
298+
visibility: visible;
299+
}
291300
.saved-items-pane__close-btn {
292301
position: absolute;
293-
left: -32px;
302+
left: -18px;
303+
top: 24px;
294304
opacity: 0;
305+
border-radius: 50%;
306+
padding: 10px 14px;
307+
background: crimson;
295308
transition: 0.25s ease;
296309
}
297310
.saved-items-pane.is-open .saved-items-pane__close-btn {
298311
opacity: 1;
299312
}
300313
.saved-item-tile {
301314
padding: 20px;
302-
border: 1px solid rgba(255,255,255,0.1);
303-
margin: 10px 0;
315+
background-color: #2f302b;
316+
/*border: 1px solid rgba(255,255,255,0.1);*/
317+
margin: 20px 0;
304318
display: block;
305-
border-radius: 2px;
319+
border-radius: 4px;
320+
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
306321
}
307322
.saved-item-tile:hover {
308323
background: rgba(255,255,255,0.1);
309324
}
325+
.saved-items-pane__container {
326+
overflow-y: scroll;
327+
max-height: calc(100vh - 90px);
328+
}
310329
.notifications-btn {
311330
position: relative;
312331
}
@@ -635,8 +654,8 @@ <h1>Whats new?</h1>
635654

636655
<div id="js-saved-items-pane" class="saved-items-pane">
637656
<button class="btn saved-items-pane__close-btn" id="js-saved-items-pane-close-btn">X</button>
638-
<h3>My Items</h3>
639-
<div id="js-saved-items-wrap">
657+
<h3>My Library</h3>
658+
<div id="js-saved-items-wrap" class="saved-items-pane__container">
640659

641660
</div>
642661
</div>
@@ -675,6 +694,7 @@ <h3>My Items</h3>
675694
<script src="lib/emmet.js"></script>
676695

677696
<script src="lib/split.js"></script>
697+
<script src="lib/inlet.min.js"></script>
678698
<script src="lib/esprima.js"></script>
679699
<script src="lib/escodegen.browser.min.js"></script>
680700

‎src/lib/inlet.css‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
/*
2+
* =========================================================
3+
* =========================================================
4+
* ColorPicker
5+
* =========================================================
6+
* =========================================================
7+
*
8+
*/
9+
.inlet_clicker {
10+
z-index: 10;
11+
}
12+
.inlet_slider {
13+
opacity: 0.85;
14+
z-index: 10;
15+
width: 24%;
16+
display: block;
17+
border-radius: 3px;
18+
height: 14px;
19+
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
20+
box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
21+
background-color: #d6d6d6;
22+
background-image: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#ebebeb));
23+
background-image: -webkit-linear-gradient(top, #d6d6d6, #ebebeb);
24+
background-image: -moz-linear-gradient(top, #d6d6d6, #ebebeb);
25+
background-image: -o-linear-gradient(top, #d6d6d6, #ebebeb);
26+
background-image: -ms-linear-gradient(top, #d6d6d6, #ebebeb);
27+
background-image: linear-gradient(top, #d6d6d6, #ebebeb);
28+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#d6d6d6', EndColorStr='#ebebeb');
29+
}
30+
.inlet_slider:hover {
31+
opacity: 0.98;
32+
}
33+
.inlet_slider .range {
34+
width: 100%;
35+
height: 100%;
36+
outline: none;
37+
margin-top: 0px;
38+
margin-left: 0px;
39+
border-radius: 3px;
40+
}
41+
.inlet_slider input[type="range"] {
42+
-webkit-appearance: none;
43+
-moz-appearance: none;
44+
}
45+
@-moz-document url-prefix() {
46+
.inlet_slider input[type="range"] {
47+
position: absolute;
48+
}
49+
}
50+
.inlet_slider input::-moz-range-track {
51+
background: none;
52+
border: none;
53+
outline: none;
54+
}
55+
.inlet_slider input::-webkit-slider-thumb {
56+
cursor: col-resize;
57+
-webkit-appearance: none;
58+
-moz-apperance: none;
59+
width: 12px;
60+
height: 12px;
61+
border-radius: 6px;
62+
border: 1px solid black;
63+
background-color: red;
64+
-webkit-box-shadow: 0px 0px 3px 0px rgba(4, 4, 4, 0.4);
65+
box-shadow: 0px 0px 3px 0px rgba(4, 4, 4, 0.4);
66+
background-color: #424242;
67+
background-image: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#212121));
68+
background-image: -webkit-linear-gradient(top, #424242, #212121);
69+
background-image: -moz-linear-gradient(top, #424242, #212121);
70+
background-image: -o-linear-gradient(top, #424242, #212121);
71+
background-image: -ms-linear-gradient(top, #424242, #212121);
72+
background-image: linear-gradient(top, #424242, #212121);
73+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#424242', EndColorStr='#212121');
74+
}
75+
/*
76+
* =========================================================
77+
* =========================================================
78+
* ColorPicker
79+
* =========================================================
80+
* =========================================================
81+
*
82+
*/
83+
.ColorPicker {
84+
/*
85+
border: 1px solid rgba(0,0,0,0.5);
86+
border-radius: 6px;
87+
background: #0d0d0d;
88+
background: -webkit-gradient(linear, left top, left bottom, from(#333), color-stop(0.1, #111), to(#000000));
89+
box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.35);
90+
color:#AAA;
91+
*/
92+
text-shadow: 1px 1px 1px #000;
93+
color: #050505;
94+
cursor: default;
95+
display: block;
96+
font-family: 'arial', helvetica, sans-serif;
97+
font-size: 20px;
98+
padding: 7px 8px 20px;
99+
position: absolute;
100+
top: 100px;
101+
left: 700px;
102+
width: 229px;
103+
z-index: 100;
104+
border-radius: 3px;
105+
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
106+
box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
107+
background-color: rgba(214, 214, 215, 0.85);
108+
/*
109+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(214, 214, 214)), to(rgb(235, 235, 235)));
110+
background-image: -webkit-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
111+
background-image: -moz-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
112+
background-image: -o-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
113+
background-image: -ms-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
114+
background-image: linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
115+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d6d6d6', EndColorStr='#ebebeb');
116+
*/
117+
}
118+
.ColorPicker br {
119+
clear: both;
120+
margin: 0;
121+
padding: 0;
122+
}
123+
.ColorPicker input.hexInput:hover,
124+
.ColorPicker input.hexInput:focus {
125+
color: #aa1212;
126+
}
127+
.ColorPicker input.hexInput {
128+
-webkit-transition-property: color;
129+
-webkit-transition-duration: .5s;
130+
background: none;
131+
border: 0;
132+
margin: 0;
133+
font-family: courier,monospace;
134+
font-size: 20px;
135+
position: relative;
136+
top: -2px;
137+
float: left;
138+
color: #050505;
139+
cursor: text;
140+
}
141+
.ColorPicker div.hexBox {
142+
border: 1px solid rgba(255, 255, 255, 0.5);
143+
border-radius: 2px;
144+
background: #FFF;
145+
float: left;
146+
font-size: 1px;
147+
height: 20px;
148+
margin: 0 5px 0 2px;
149+
width: 20px;
150+
cursor: pointer;
151+
}
152+
.ColorPicker div.hexBox div {
153+
width: inherit;
154+
height: inherit;
155+
}
156+
.ColorPicker div.hexClose {
157+
display: none;
158+
/*
159+
-webkit-transition-property: color, text-shadow;
160+
-webkit-transition-duration: .5s;
161+
position: relative;
162+
top: -1px;
163+
left: -1px;
164+
color:#FFF;
165+
cursor:pointer;
166+
float:right;
167+
padding: 0 5px;
168+
margin:0 4px 3px;
169+
user-select:none;
170+
-webkit-user-select: none;
171+
*/
172+
}
173+
.ColorPicker div.hexClose:hover {
174+
text-shadow: 0 0 20px #fff;
175+
color: #FF1100;
176+
}

0 commit comments

Comments
 (0)