feat: refine search styles

This commit is contained in:
Justineo 2021-07-19 17:29:41 +08:00
parent fe6f5376a9
commit 9593a8c559
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
5 changed files with 17 additions and 75 deletions

View File

@ -1,16 +1,20 @@
$primary = #0052cc
// only enable on Retina displays // only enable on Retina displays
@media screen and (min-resolution 2dppx) @media screen and (min-resolution 2dppx)
html html
-webkit-font-smoothing antialiased -webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale -moz-osx-font-smoothing grayscale
* *
*::before *::before
*::after *::after
box-sizing border-box box-sizing border-box
:root
--docsearch-primary-color $primary !important
--docsearch-searchbox-shadow inset 0 0 0 2px $primary !important
html html
font-weight 400 font-weight 400
color #333 color #333
@ -35,69 +39,3 @@ a:focus
main main
line-height 1.5 line-height 1.5
menu
margin 0
padding 0
.menu-item
list-style none
line-height 1
.menu-link
display block
position relative
text-decoration none
cursor default
a&
cursor pointer
&::after
content ""
position absolute
bottom 2px
left 50%
width 0
height 2px
transition width 0.2s, left 0.2s
a&:focus::after
a&:hover::after
width 100%
left 0
.algolia-autocomplete
.algolia-docsearch-suggestion--title:last-child
margin-bottom 0
.ds-dropdown-menu
&
& [class^=ds-dataset-]
border-radius 3px
&::before
width 10px
height 10px
top -4px
.ds-suggestion.ds-cursor .algolia-docsearch-suggestion
&.suggestion-layout-simple
&:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content
background-color #f8f8f8
.algolia-docsearch-suggestion--category-header
font-size 14px
.algolia-docsearch-suggestion--subcategory-column
font-size 12px
overflow hidden
white-space nowrap
text-overflow ellipsis
.algolia-docsearch-suggestion--highlight
color #fff
background-color #111
.algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight
box-shadow inset 0 -2px 0 0 #111

View File

@ -132,14 +132,14 @@ margin-y($top, $bottom = $top)
a:visited a:visited
&:not([class^="veui-"]) &:not([class^="veui-"])
text-decoration none text-decoration none
color #3998fc color #0052cc
transition color 0.2s transition color 0.2s
&:hover &:hover
color #3389e3 color #06f
&:active &:active
color #2e7aca color #0046ad
code code
padding 2px 4px padding 2px 4px
@ -227,6 +227,7 @@ margin-y($top, $bottom = $top)
pre pre
border 1px solid #eee border 1px solid #eee
border-radius 4px
padding 30px padding 30px
background-color #f9f9f9 background-color #f9f9f9
white-space pre white-space pre

View File

@ -132,6 +132,11 @@ export default {
.veui-menu-tree .veui-menu-tree
overflow auto overflow auto
::v-deep .DocSearch
margin 0
border-radius 6px
font inherit
h2 h2
display flex display flex
align-items center align-items center

View File

@ -39,7 +39,7 @@ module.exports = {
css: false css: false
}, },
css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl'], css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl', '@/assets/styles/post.styl'],
plugins: [ plugins: [
{ src: '~plugins/i18n.js' }, { src: '~plugins/i18n.js' },

View File

@ -25,6 +25,4 @@ export default {<!-- if: ${layout} -->
<!-- /if --> <!-- /if -->
mixins: [htmlAttrs] mixins: [htmlAttrs]
} }
</script><!-- /else --><!-- if: ${style} --> </script><!-- /else -->
<style lang="stylus" src="@/assets/styles/post.styl" scoped></style><!-- /if -->