130 lines
2.7 KiB
Stylus
130 lines
2.7 KiB
Stylus
|
// Insight Search Styles
|
||
|
|
ins-container-width = 540px
|
||
|
|
ins-text-grey = #9a9a9a
|
||
|
|
ins-border-grey = #e2e2e2
|
||
|
|
ins-background-grey = #f7f7f7
|
||
|
|
ins-background-theme = color-theme
|
||
|
|
|
||
|
|
$ins-full-screen
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
margin: 0
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
|
||
|
|
.ins-search
|
||
|
|
display: none
|
||
|
|
&.show
|
||
|
|
display: block
|
||
|
|
|
||
|
|
.ins-selectable
|
||
|
|
cursor: pointer
|
||
|
|
|
||
|
|
.ins-search-mask,
|
||
|
|
.ins-search-container
|
||
|
|
position: fixed
|
||
|
|
|
||
|
|
.ins-search-mask
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
z-index: 100
|
||
|
|
background: rgba(0,0,0,0.5)
|
||
|
|
|
||
|
|
.ins-input-wrapper
|
||
|
|
position: relative
|
||
|
|
|
||
|
|
.ins-search-input
|
||
|
|
width: 100%
|
||
|
|
border: none
|
||
|
|
outline: none
|
||
|
|
font-size: 16px
|
||
|
|
box-shadow: none
|
||
|
|
font-weight: 200
|
||
|
|
border-radius: 0
|
||
|
|
background: white
|
||
|
|
line-height: 20px
|
||
|
|
box-sizing: border-box
|
||
|
|
padding: 12px 28px 12px 20px
|
||
|
|
border-bottom: 1px solid ins-border-grey
|
||
|
|
font-family: "Microsoft Yahei Light", "Microsoft Yahei", Helvetica, Arial, sans-serif
|
||
|
|
|
||
|
|
.ins-close
|
||
|
|
top: 50%
|
||
|
|
right: 6px
|
||
|
|
width: 20px
|
||
|
|
height: 20px
|
||
|
|
font-size: 16px
|
||
|
|
margin-top: -11px
|
||
|
|
position: absolute
|
||
|
|
text-align: center
|
||
|
|
display: inline-block
|
||
|
|
&:hover
|
||
|
|
color: ins-background-theme
|
||
|
|
|
||
|
|
.ins-search-container
|
||
|
|
left: 50%
|
||
|
|
top: 100px
|
||
|
|
z-index: 101
|
||
|
|
bottom: 100px
|
||
|
|
box-sizing: border-box
|
||
|
|
width: ins-container-width
|
||
|
|
margin-left: -(ins-container-width/2)
|
||
|
|
@media screen and (max-width: 559px), screen and (max-height: 479px)
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
margin: 0
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
background: ins-background-grey
|
||
|
|
|
||
|
|
.ins-section-wrapper
|
||
|
|
left: 0
|
||
|
|
right: 0
|
||
|
|
top: 45px
|
||
|
|
bottom: 0
|
||
|
|
overflow-y: auto
|
||
|
|
position: absolute
|
||
|
|
|
||
|
|
.ins-section-container
|
||
|
|
position: relative
|
||
|
|
background: ins-background-grey
|
||
|
|
|
||
|
|
.ins-section
|
||
|
|
font-size: 14px
|
||
|
|
line-height: 16px
|
||
|
|
.ins-section-header,
|
||
|
|
.ins-search-item
|
||
|
|
padding: 8px 15px
|
||
|
|
.ins-section-header
|
||
|
|
color: ins-text-grey
|
||
|
|
border-bottom: 1px solid ins-border-grey
|
||
|
|
.ins-slug
|
||
|
|
margin-left: 5px
|
||
|
|
color: ins-text-grey
|
||
|
|
&:before
|
||
|
|
content: '('
|
||
|
|
&:after
|
||
|
|
content: ')'
|
||
|
|
.ins-search-item
|
||
|
|
header,
|
||
|
|
.ins-search-preview
|
||
|
|
overflow: hidden
|
||
|
|
white-space: nowrap
|
||
|
|
text-overflow: ellipsis
|
||
|
|
header
|
||
|
|
.fa
|
||
|
|
margin-right: 8px
|
||
|
|
.ins-search-preview
|
||
|
|
height: 15px
|
||
|
|
font-size: 12px
|
||
|
|
color: ins-text-grey
|
||
|
|
margin: 5px 0 0 20px
|
||
|
|
&:hover,
|
||
|
|
&.active
|
||
|
|
color: white
|
||
|
|
background: ins-background-theme
|
||
|
|
.ins-slug,
|
||
|
|
.ins-search-preview
|
||
|
|
color: white
|