git.iko.soy/urbit.org
on master help sign in
static elements are put into place
d80a301friederjanmoerman
sass/_main.scss+110−78
compare with master
unifiedsplit
@@ -41,6 +41,15 @@ iframe {
41 display: flex;
41 display: flex;
42}
42}
43
43
44+.pop-up {
45+ width: 100%;
46+ max-width: 500px;
47+ margin: 14rem auto;
48+ background: #fff;
49+ padding: 7rem 14rem;
50+ height: 400px; //temporary
51+}
52+
44.container--fixed {
53.container--fixed {
45 position: fixed;
54 position: fixed;
46 margin-top: -24rem;
55 margin-top: -24rem;
@@ -82,7 +91,7 @@ iframe {
82 height: 100%;
91 height: 100%;
83 z-index: 0;
92 z-index: 0;
84 .content-nav {
93 .content-nav {
85− &__search-btn {
94+ &__search-bar {
86 width: 100%;
95 width: 100%;
87 }
96 }
88 &__index {
97 &__index {
@@ -279,16 +288,57 @@ iframe {
279 max-width: 320px;
288 max-width: 320px;
280}
289}
281
290
291+.search-overlay {
292+ position: fixed;
293+ height: 100%;
294+ width: 100%;
295+ background: rgba(0,0,0,0.4);
296+ top: 0;
297+ left: 0;
298+ z-index: 10;
299+ .search-bar {
300+ width: 100%;
301+ padding: 0;
302+ border: none;
303+ &:after {
304+ content: none;
305+ }
306+ &:before {
307+ content: none;
308+ }
309+ &:hover {
310+ border: none;
311+ }
312+ &__input {
313+ line-height: 6rem;
314+ }
315+ }
316+}
317+
282/*
318/*
283 * styling
319 * styling
284 */
320 */
285
321
286−textarea, input[type="text"], input[type="email"], input[type="number"] {
322+textarea, input[type="text"], input[type="email"], input[type="number"], input[type="search"] {
287− border: 2px solid #000;
323+ border: 1px solid #B1B2B3;
324+ font-size: 4rem;
325+ line-height: 6rem;
326+ transition: all 0.1s linear;
327+ padding-right: 40px;
328+ position: relative;
329+ border-radius: 0 !important;
288 padding: 12px;
330 padding: 12px;
289 width: 100%;
331 width: 100%;
290 outline: none;
332 outline: none;
291 box-sizing: border-box;
333 box-sizing: border-box;
334+ &:active, &:focus {
335+ border: 1px solid #000000;
336+ }
337+ &:required, &:invalid {
338+ box-shadow: none !important;
339+ border: 1px solid #EE892B;
340+ color: #EE892B;
341+ }
292}
342}
293
343
294button, .btn {
344button, .btn {
@@ -303,6 +353,63 @@ button, .btn {
303 cursor: pointer;
353 cursor: pointer;
304}
354}
305
355
356+.search-bar {
357+ border: 1px solid #B1B2B3;
358+ background: #fff;
359+ font-size: 4rem;
360+ line-height: 6rem;
361+ transition: all 0.1s linear;
362+ padding: 12px 12px 12px 40px;
363+ position: relative;
364+ font-weight: normal;
365+ text-align: left;
366+ box-shadow: none !important;
367+ color: #B1B2B3;
368+ &:after {
369+ content: '';
370+ position: absolute;
371+ left: 10px;
372+ top: 20px;
373+ width: 10px;
374+ height: 10px;
375+ border-radius: 50%;
376+ border: 2px solid #000;
377+ margin-top: -4px;
378+ }
379+ &:before {
380+ content: '';
381+ position: absolute;
382+ left: 23px;
383+ top: 25px;
384+ transform: rotate(-45deg);
385+ background: #000;
386+ width: 2px;
387+ height: 9px;
388+ }
389+ &:hover {
390+ border: 1px solid #000000;
391+ }
392+}
393+
394+.has-valid-input {
395+ position: relative;
396+ &:after {
397+ content: '✓';
398+ color: #2AA779;
399+ position: absolute;
400+ right: 10px;
401+ top: 50%;
402+ transform: translate(0,-50%);
403+ width: 15px;
404+ height: 24px;
405+ margin-top: -4px;
406+ }
407+ input[type="text"], input[type="email"], input[type="number"] {
408+ border: 1px solid #2AA779;
409+ }
410+}
411+
412+
306/*
413/*
307 * typography
414 * typography
308 */
415 */
@@ -425,78 +532,3 @@ pre, code {
425 padding: 1rem;
532 padding: 1rem;
426 font-size: 4rem;
533 font-size: 4rem;
427}
534}
428−
429−textarea, input[type="text"], input[type="email"], input[type="number"] {
430− border: 1px solid #B1B2B3;
431− font-size: 4rem;
432− line-height: 6rem;
433− transition: all 0.1s linear;
434− padding-right: 40px;
435− position: relative;
436− border-radius: 0 !important;
437− &:active, &:focus {
438− border: 1px solid #000000;
439− }
440− &:required, &:invalid {
441− box-shadow: none !important;
442− border: 1px solid #EE892B;
443− color: #EE892B;
444− }
445−}
446−
447−.search-btn {
448− border: 1px solid #B1B2B3;
449− background: #fff;
450− font-size: 4rem;
451− line-height: 6rem;
452− transition: all 0.1s linear;
453− padding: 12px 12px 12px 40px;
454− position: relative;
455− font-weight: normal;
456− text-align: left;
457− box-shadow: none !important;
458− color: #B1B2B3;
459− &:after {
460− content: '';
461− position: absolute;
462− left: 10px;
463− top: 20px;
464− width: 10px;
465− height: 10px;
466− border-radius: 50%;
467− border: 2px solid #000;
468− margin-top: -4px;
469− }
470− &:before {
471− content: '';
472− position: absolute;
473− left: 23px;
474− top: 25px;
475− transform: rotate(-45deg);
476− background: #000;
477− width: 2px;
478− height: 9px;
479− }
480− &:hover {
481− border: 1px solid #000000;
482− }
483−
484−}
485−
486−.has-valid-input {
487− position: relative;
488− &:after {
489− content: '✓';
490− color: #2AA779;
491− position: absolute;
492− right: 10px;
493− top: 50%;
494− transform: translate(0,-50%);
495− width: 15px;
496− height: 24px;
497− margin-top: -4px;
498− }
499− input[type="text"], input[type="email"], input[type="number"] {
500− border: 1px solid #2AA779;
501− }
502−}
templates/doc.html+2
@@ -3,6 +3,8 @@
3{% block content %}
3{% block content %}
4<!-- header -->
4<!-- header -->
5{% include "partials/navigation.html" %}
5{% include "partials/navigation.html" %}
6+<!-- search overlay (btn to activate located in navigations-docs partial) -->
7+{% include "partials/search-overlay.html" %}
6<!-- content -->
8<!-- content -->
7<div class="main-wrapper">
9<div class="main-wrapper">
8 <div class="wrapper">
10 <div class="wrapper">
templates/partials/navigation-docs.html+1−1
@@ -1,7 +1,7 @@
1{% block content %}
1{% block content %}
2<div id="js-content-nav-toggle" class="content-nav-icon"></div>
2<div id="js-content-nav-toggle" class="content-nav-icon"></div>
3<nav class="content-nav">
3<nav class="content-nav">
4− <button type="button" class="search-btn content-nav__search-btn mb2">Search</button>
4+ <button type="button" class="search-bar content-nav__search-bar mb2">Search</button>
5 <ul class="list content-nav__index">
5 <ul class="list content-nav__index">
6 {% block menu %}
6 {% block menu %}
7 {% set index = get_section(path="docs/_index.md") %}
7 {% set index = get_section(path="docs/_index.md") %}
templates/partials/search-overlay.htmlnew file+18
@@ -0,0 +1,18 @@
1+{% block content %}
2+<div class="search-overlay">
3+ <div class="wrapper">
4+ <div class="pop-up">
5+ <div class="search-bar">
6+ <label for="search-bar__input">
7+ <p class="mb0">Search</p>
8+ </label>
9+ <input id="search" type="search" class="search-bar__input">
10+ </div>
11+ <div class="search-results">
12+ <div class="search-results__header"></div>
13+ <ul class="search-results__items"></ul>
14+ </div>
15+ </div>
16+ </div>
17+</div>
18+{% endblock content %}
templates/sections/docs.html+2
@@ -3,6 +3,8 @@
3{% block content %}
3{% block content %}
4<!-- header -->
4<!-- header -->
5{% include "partials/navigation.html" %}
5{% include "partials/navigation.html" %}
6+<!-- search overlay (btn to activate located in navigations-docs partial) -->
7+{% include "partials/search-overlay.html" %}
6<!-- content -->
8<!-- content -->
7<div class="main-wrapper">
9<div class="main-wrapper">
8 <div class="wrapper">
10 <div class="wrapper">
templates/sections/docs/chapters.html+2
@@ -3,6 +3,8 @@
3{% block content %}
3{% block content %}
4<!-- header -->
4<!-- header -->
5{% include "partials/navigation.html" %}
5{% include "partials/navigation.html" %}
6+<!-- search overlay (btn to activate located in navigations-docs partial) -->
7+{% include "partials/search-overlay.html" %}
6<!-- content -->
8<!-- content -->
7<div class="main-wrapper">
9<div class="main-wrapper">
8 <div class="wrapper">
10 <div class="wrapper">