Keyword tag list with search form

The horizontal keyword list with the searching form input.

Thumbnail

Pug
Scss

.uk-container(class="[email protected]")
  .uk-flex-middle(uk-grid)
    .uk-width-3-4.uk-flex(style='overflow:scroll')
      each i in header
        each j in i.keyword
          .uk-background-contain.uk-display-block(data-src=j.src uk-img style="width:78px;height:20px;")
            span.uk-text-bold.text-xsmall.text-white.uk-position-relative.uk-display-block(style="width:75px;top: 4px;left:6px;line-height:.7rem;")=j.title
          ul.uk-flex
            each k in j.list
              li
                a.text-small.uk-margin-small-left.link-primary.uk-text-nowrap(href=k.href)=k.text
    .uk-width-1-4
      form.uk-position-relative(method='get' action="" style='height: 42px;')
        input.uk-input.text-small.input-keyword(type='text' max='100' name='s' placeholder='輸入關鍵字...' style='padding:0 0 0 15px')
        span.uk-position-center-left
        button.uk-position-center-right(type='submit')
          img(src='img/icon-search_orange.svg' uk-svg)
          img(src='img/icon-search_orange.svg')

.input-keyword {
  & + span {
    width: 1px;
    height: 20px;
    display: block;
    background-color: #efefef;
  }
  & + span + button img:first-child + svg {
      display: block;
    }
  & + span + button img:last-child {
    display: none;
  }
  &:focus {
    background-color: #efefef;
    & + span {
      background-color: #707070;
    }
    & + span + button img:first-child + svg {
      display: none;
    }
    & + span + button img:last-child {
      display: block;
    }
  }
}

Tags: