@@ -41,6 +41,15 @@ iframe {
4141 display: flex;
4242}
4343
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+
4453.container--fixed {
4554 position: fixed;
4655 margin-top: -24rem;
@@ -82,7 +91,7 @@ iframe {
8291 height: 100%;
8392 z-index: 0;
8493 .content-nav {
85− &__search-btn {
94+ &__search-bar {
8695 width: 100%;
8796 }
8897 &__index {
@@ -279,16 +288,57 @@ iframe {
279288 max-width: 320px;
280289}
281290
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+
282318/*
283319 * styling
284320 */
285321
286−textarea, input[type="text"], input[type="email"], input[type="number"] {
287− border: 2px solid #000;
322+textarea, input[type="text"], input[type="email"], input[type="number"], input[type="search"] {
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;
288330 padding: 12px;
289331 width: 100%;
290332 outline: none;
291333 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+ }
292342}
293343
294344button, .btn {
@@ -303,6 +353,63 @@ button, .btn {
303353 cursor: pointer;
304354}
305355
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+
306413/*
307414 * typography
308415 */
@@ -425,78 +532,3 @@ pre, code {
425532 padding: 1rem;
426533 font-size: 4rem;
427534}
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−}