f868c37 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

managed to add a search button without screwing up my initial code a lot

f868c37friederjanmoerman7 years ago

sass/_main.scss+53−2

compare with master

unifiedsplit

@@ -49,7 +49,7 @@ iframe {

49.content-nav {

50 width: 20%;

51 min-width: 200px;

52− padding-right: 1rem;

52+ //padding-right: 1rem;

53 margin-top: 24rem;

54 &__item {

55 line-height: 8rem;

@@ -82,7 +82,18 @@ iframe {

82 height: 100%;

83 z-index: 0;

84 .content-nav {

85+ &__search-btn {

86+ width: 100%;

87+ }

88+ &__index {

89+ height: calc(100% - 48px);

85− overflow-y: scroll;

90+ overflow-y: scroll;

91+ &__item {

92+ &:last-child{

93+ padding-bottom: 8rem;

94+ }

95+ }

96+ }

86 .list:first-child {

97 .list:first-child {

87 padding-bottom: 14rem;

98 padding-bottom: 14rem;

88 }

99 }

@@ -422,6 +433,7 @@ textarea, input[type="text"], input[type="email"], input[type="number"] {

422 transition: all 0.1s linear;

433 transition: all 0.1s linear;

423 padding-right: 40px;

434 padding-right: 40px;

424 position: relative;

435 position: relative;

436+ border-radius: 0 !important;

425 &:active, &:focus {

437 &:active, &:focus {

426 border: 1px solid #000000;

438 border: 1px solid #000000;

427 }

439 }

@@ -432,6 +444,45 @@ textarea, input[type="text"], input[type="email"], input[type="number"] {

432 }

444 }

433}

445}

434

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+

435.has-valid-input {

486.has-valid-input {

436 position: relative;

487 position: relative;

437 &:after {

488 &:after {

templates/partials/navigation-docs.html+3−2

@@ -1,12 +1,13 @@

1{% block content %}

2<div id="js-content-nav-toggle" class="content-nav-icon"></div>

3<nav class="content-nav">

4+ <button type="button" class="search-btn content-nav__search-btn mb2">Search</button>

4− <ul class="list">

5+ <ul class="list content-nav__index">

5 {% block menu %}

6 {% block menu %}

6 {% set index = get_section(path="docs/_index.md") %}

7 {% set index = get_section(path="docs/_index.md") %}

7 {% for s in index.subsections %}

8 {% for s in index.subsections %}

8 {% set subsection = get_section(path=s) %}

9 {% set subsection = get_section(path=s) %}

9− <li class="list__item">

10+ <li class="list__item content-nav__index__item">

10 <a class="text-600" href="{{ subsection.permalink }}">

11 <a class="text-600" href="{{ subsection.permalink }}">

11 {{ subsection.title }}

12 {{ subsection.title }}

12 </a>

13 </a>