提交主题

themes/butterfly/source/css/_search/algolia.styl

@@ -0,0 +1,91 @@
+#algolia-search
+  .search-dialog
+    .ais-SearchBox
+      input
+        padding: 5px 14px
+        width: 100%
+        outline: none
+        border: 2px solid $search-color
+        border-radius: 40px
+        background: var(--search-bg)
+        color: var(--search-input-color)
+
+    .ais-Hits-list
+      margin: 0
+      padding: 0
+      @extend .list-beauty
+
+      a
+        color: var(--search-result-title)
+
+        &:hover
+          color: $search-color
+
+      mark
+        background: transparent
+        color: $search-keyword-highlight
+        font-weight: bold
+
+    .algolia-hit-item-content
+      margin: 0 0 8px
+      word-break: break-all
+
+    .ais-Pagination
+      margin: 20px 0 0
+      padding: 0
+      text-align: center
+
+      .ais-Pagination-list
+        margin: 0
+        padding: 0
+        list-style: none
+
+      .ais-Pagination-item
+        display: inline
+        margin: 0 4px
+        padding: 0
+
+        .ais-Pagination-link
+          display: inline-block
+          min-width: 24px
+          height: 24px
+          text-align: center
+          line-height: 24px
+
+      .ais-Pagination-item--selected
+        a
+          background: $theme-paginator-color
+          color: #eee
+          cursor: default
+
+      .ais-Pagination-item--disabled
+        visibility: hidden
+
+    .algolia-logo
+      padding-top: 2px
+      width: 80px
+      height: 30px
+
+    #algolia-hits
+      > div
+        overflow-y: scroll
+
+        +minWidth768()
+          max-height: calc(80vh - 240px)
+
+        +maxWidth768()
+          height: calc(100vh - 260px)
+
+    #algolia-info
+      div
+        display: inline
+
+      .algolia-poweredBy
+        float: right
+
+.apple
+  #algolia-search
+    #algolia-hits
+      > div
+        +maxWidth768()
+          height: calc(90vh - 260px)

themes/butterfly/source/css/_search/index.styl

@@ -0,0 +1,49 @@
+.search-dialog
+  position: fixed
+  top: 10%
+  left: 50%
+  z-index: 1001
+  display: none
+  margin-left: -300px
+  padding: 20px
+  width: 600px
+  border-radius: 8px
+  background: var(--search-bg)
+
+  +maxWidth768()
+    top: 0
+    left: 0
+    margin: 0
+    width: 100%
+    height: 100%
+    border-radius: 0
+
+  hr
+    margin: 20px auto
+
+  .search-nav
+    margin: 0 0 14px
+    color: $search-color
+    font-size: 1.4em
+    line-height: 1
+
+    .search-dialog-title
+      margin-right: 10px
+
+    .search-close-button
+      float: right
+      color: $grey
+      transition: color .2s ease-in-out
+
+      &:hover
+        color: $search-color
+
+#search-mask
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  z-index: 1000
+  display: none
+  background: rgba($dark-black, .6)

themes/butterfly/source/css/_search/local-search.styl

@@ -0,0 +1,67 @@
+#local-search
+  .search-dialog
+    .local-search-box
+      margin: 0 auto
+      max-width: 100%
+      width: 100%
+
+      input
+        padding: 5px 14px
+        width: 100%
+        outline: none
+        border: 2px solid $search-color
+        border-radius: 40px
+        background: var(--search-bg)
+        color: var(--search-input-color)
+        -webkit-appearance: none
+
+    .search-wrap
+      display: none
+
+    .local-search__hit-item
+      position: relative
+      padding-left: 24px
+      line-height: 1.7
+
+      &:hover
+        &:before
+          border-color: var(--pseudo-hover)
+
+      &:before
+        $w = .5em
+        position: absolute
+        top: .45em
+        left: 0
+        width: w = $w
+        height: h = w
+        border: 3px solid $search-color
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
+        transition: all .2s ease-in-out
+
+      a
+        display: block
+        color: var(--search-result-title)
+        font-weight: 600
+        cursor: pointer
+
+        &:hover
+          color: $search-color
+
+      .search-result
+        margin: 0 8px 8px 0
+        word-break: break-all
+
+      .search-keyword
+        color: $search-keyword-highlight
+        font-weight: bold
+
+    .search-result-list
+      overflow-y: auto
+      max-height: calc(80vh - 130px)
+
+      +maxWidth768()
+        padding-bottom: 40px
+        max-height: 75vh !important