on master help sign in
managed to add a search button without screwing up my initial code a lot
commitf868c37e652ca46ad3b34488ac1475e7d2afc53e authorfriederjanmoerman <hijbrid@gmail.com> dateMon 27 May 2019, 00:30 (7 years ago) parent3d210eb
2 files changed+56−4
sass/_main.scss+53−2 templates/partials/navigation-docs.html+3−2
sass/_main.scss+53−2
@@ -49,7 +49,7 @@ iframe {
4949.content-nav {
5050 width: 20%;
5151 min-width: 200px;
52− padding-right: 1rem;
52+ //padding-right: 1rem;
5353 margin-top: 24rem;
5454 &__item {
5555 line-height: 8rem;
@@ -82,7 +82,18 @@ iframe {
8282 height: 100%;
8383 z-index: 0;
8484 .content-nav {
85− overflow-y: scroll;
85+ &__search-btn {
86+ width: 100%;
87+ }
88+ &__index {
89+ height: calc(100% - 48px);
90+ overflow-y: scroll;
91+ &__item {
92+ &:last-child{
93+ padding-bottom: 8rem;
94+ }
95+ }
96+ }
8697 .list:first-child {
8798 padding-bottom: 14rem;
8899 }
@@ -422,6 +433,7 @@ textarea, input[type="text"], input[type="email"], input[type="number"] {
422433 transition: all 0.1s linear;
423434 padding-right: 40px;
424435 position: relative;
436+ border-radius: 0 !important;
425437 &:active, &:focus {
426438 border: 1px solid #000000;
427439 }
@@ -432,6 +444,45 @@ textarea, input[type="text"], input[type="email"], input[type="number"] {
432444 }
433445}
434446
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+
435486.has-valid-input {
436487 position: relative;
437488 &:after {
templates/partials/navigation-docs.html+3−2
@@ -1,12 +1,13 @@
11{% block content %}
22<div id="js-content-nav-toggle" class="content-nav-icon"></div>
33<nav class="content-nav">
4− <ul class="list">
4+ <button type="button" class="search-btn content-nav__search-btn mb2">Search</button>
5+ <ul class="list content-nav__index">
56 {% block menu %}
67 {% set index = get_section(path="docs/_index.md") %}
78 {% for s in index.subsections %}
89 {% set subsection = get_section(path=s) %}
9− <li class="list__item">
10+ <li class="list__item content-nav__index__item">
1011 <a class="text-600" href="{{ subsection.permalink }}">
1112 {{ subsection.title }}
1213 </a>