Home
Diffusion Pillar (master) Browse

pillar/src/styles/_search.sass
00ba98d2799bmaster

Last Change
Raw File

_search.sass
View Options

$search-hit-width: 160px
$search-hit-width_list: 48px
$search-hit-width_grid: 100px
.search-site-result
width: 100%
&.advanced
width: 350px
z-index: 101
.search-hit
background: white
border-top: thin solid $color-background !important
.search-hit-name
font-weight: 400
padding-top: 8px
color: $color-primary-dark
.search-hit
padding: 0
margin: 0
display: block
color: $color-text
text:
transform: initial
shadow: none
font:
size: .9em
weight: 400
style: initial
width: 100%
+text-overflow-ellipsis
+clearfix
& em
color: $color-primary-dark
font-style: normal
&:hover
padding: 0
margin: 0
background: $color-background
&:first-child
border: none
.search-hit-name
top: 6px
margin: 0
padding-top: 0
.search-hit-meta
padding-top: 8px
margin: 0
.search-hit-thumbnail
border-radius: 0
transition: margin-right 100ms ease-in-out
.twitter-typeahead
.tt-hint
color: $color-text-dark-hint
.tt-menu
top: 47px !important
background-color: white
box-shadow: 1px 1px 0 rgba(black, .05), 0 20px 50px rgba(black, .25)
min-width: 350px
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
border-top: 3px solid lighten($color-primary, 5%)
overflow: hidden
.tt-suggestion
&:hover, &.tt-cursor
.search-hit
text-decoration: none
background-color: lighten($color-background, 3%)
.search-hit-name
color: $color-background-nav
.search-hit-meta
span.project, span.node_type, span.media
color: $color-background-nav
.search-hit-thumbnail
opacity: .9
margin-right: 15px
&.tt-cursor:hover .search-hit
background-color: lighten($color-background, 5%)
#search-container
display: flex
min-height: 600px
background-color: white
+media-lg
padding-left: 0
padding-right: 0
#search-list
width: 40%
height: 100%
padding: 0
position: relative
overflow-x: hidden
overflow-y: auto
#hits
position: relative
width: 100%
#no-hits
padding: 10px 15px
color: $color-text-dark-secondary
.search-hit
#search-loading
visibility: hidden
background-color: transparent
font:
size: 1.5em
weight: 600
position: absolute
top: 0
left: 0
right: 0
bottom: 0
z-index: $z-index-base + 5
opacity: 0
cursor: default
transition: opacity 50ms ease-in-out
&.active
visibility: visible
opacity: 1
.spinner
color: $color-background-nav
background-color: white
padding: 0
width: 20px
height: 20px
border-radius: 50%
position: absolute
top: 7px
right: 10px
span
padding: 5px
+pulse
#search-details
position: relative
width: 40%
border-left: 2px solid darken(white, 3%)
#search-hit-container
position: absolute // for scrollbars
width: 100%
overflow-y: auto
#error_container
position: relative
background: white
padding: 20px
#search-error
display: none
margin: 20px auto
color: $color-danger
text-align: center
#node-container
width: 100%
max-width: 100%
.node-preview
max-height: initial
&.group
background: white
.overlay
display: none
.node-title
font-size: 1.8em
padding-right: 30px
width: 100%
+text-overflow-ellipsis
.backdrop
opacity: .15
.node-preview-thumbnail
max-height: 320px
.node-children
&.group
background-color: white
position: relative
z-index: 1
.list-node-children-item.browse-list
width: 98%
.list-node-children-item-name
+text-overflow-ellipsis
font-size: 1.1em
.list-node-children-item-meta
+text-overflow-ellipsis
padding-right: 20px
span
&.free
font-size: .7em
.node-details-container
&.group
position: initial
.node-details-description
max-width: 100%
p
margin-bottom: 0
padding-bottom: 10px
.node-details-header
clear: both
width: 100%
max-width: 100%
.node-title
font-size: 1.7em
.node-details-meta
&.header
clear: both
width: 100%
max-width: 100%
padding: 10px
.node-details-meta-list
display: inline-block
float: right
font-size: .9em
.node-details-meta-list-item
&.status, &.author
display: none
&.type, &.length
padding-top: 10px
&.access
padding-top: 5px
&.footer
.node-details-meta-list
.node-details-meta-list-item
&.status
display: none
&.preview
bottom: initial
top: 10px
.node-details-meta-list
.node-details-meta-list-item
&.status, &.author, &.date
display: none
&.texture
.texture-title
font-size: 2em
padding: 15px 10px 10px 15px
.node-row
background: white
&.texture-map
width: 100%
section.node-preview.texture
max-height: 180px
max-width: 180px
.node-details-header
padding:
left: 15px
right: 15px
bottom: 0
min-height: initial
.node-title
font-size: 1.5em
.node-details-attributes
font-size: .9em
padding:
left: 15px
right: 15px
bottom: 10px
span.sizes
padding: 0
span.extra
padding: 0
.node-preview.texture
max-width: 128px
img.node-preview-thumbnail
pointer-events: none
.node-details-meta
padding: 15px
.node-details-meta-list
width: 100%
flex-wrap: wrap
margin: 0 auto
.node-details-meta-list-item
text-align: center
margin: 0 auto 0 0
padding: 5px 0
font-size: .9em
&.image.download
width: 100%
padding: 5px 0 0 0
button
width: 100%
#search-sidebar
width: 20%
background-color: $color-background-light
+media-lg
border-top-left-radius: 3px
input.search-field
margin-bottom: 10px
border: none
border-bottom: 2px solid rgba($color-primary, .2)
border-radius: 0
width: 100%
transition: border 100ms ease-in-out
&::placeholder
color: $color-text-dark-secondary
&:placeholder-shown
border-bottom-color: $color-primary
&:focus
outline: none
border: none
border-bottom: 2px solid lighten($color-primary, 5%)
.search-list-filters
padding:
left: 10px
right: 10px
.panel.panel-default
margin-bottom: 10px
border-radius: 3px
border: none
background-color: white
box-shadow: 1px 1px 0 rgba(black, .1)
a
text-decoration: none
.toggleRefine
display: block
padding-left: 7px
color: $color-text-dark
text-transform: capitalize
&:hover
text-decoration: none
color: $color-primary
&.refined
color: $color-primary
&:hover
color: $color-danger
span
&:before
/* x icon */
content: '\e84b'
font-family: 'pillar-font'
span
&:before
/* circle with dot */
content: '\e82f'
font-family: 'pillar-font'
position: relative
left: -7px
font-size: .9em
span
&:before
/* empty circle */
content: '\e82c'
font-family: 'pillar-font'
position: relative
left: -7px
font-size: .9em
.facet_count
color: $color-text-dark-secondary
.panel-title, .panel-heading
color: $color-text-dark-secondary
font:
size: 1em
weight: 500
.panel-body
padding-top: 0
.panel-title
position: relative
&:after
content: '\e83b'
font-family: 'pillar-font'
position: absolute
right: 0
color: $color-text-dark-primary
.collapsed
.panel-title:after
content: '\e838'
.search-list-stats
color: $color-text-dark-hint
padding: 10px 15px 0 15px
text-align: center
font-size: .9em
+clearfix
#pagination
ul.search-pagination
text-align: center
list-style-type: none
margin: 0
padding: 0
width: 100%
display: flex
+clearfix
li
display: inline-block
margin: 5px auto
&:last-child
border-color: transparent
a
font-weight: 500
padding: 5px 4px
color: $color-text-dark-secondary
&:hover
color: $color-text-dark-primary
&.disabled
opacity: .6
&.active a
color: $color-text-dark-primary
font-weight: bold
.search-hit
float: left
box-shadow: none
border: thin solid transparent
border-top-color: darken(white, 8%)
border-left: 3px solid transparent
color: $color-background-nav
width: 100%
position: relative
margin: 0
padding: 7px 10px 7px 10px
+clearfix
&:first-child
border: thin solid transparent
border-left: 3px solid transparent
&:hover
opacity: 1
text-decoration: none
cursor: default
color: darken($color-primary, 20%)
background-color: $color-background-light
& .search-hit-name i
color: darken($color-primary, 20%)
& .search-hit-thumbnail
& .search-hit-thumbnail-icon
transform: translate(-50%, -50%) scale(1.1)
.search-hit-name
text-decoration: none
&:hover
color: darken($color-primary, 10%)
.search-hit-thumbnail
cursor: pointer
.search-hit-thumbnail-icon
transform: translate(-50%, -50%) scale(1)
&:active
background-color: rgba($color-background, .5)
opacity: .8
color: $color-primary
& .search-hit-name i
color: $color-primary
&:focus
border-color: rgba($color-primary, .2)
/* Class that gets added when we click on the item */
&.active
background-color: lighten($color-background, 2%)
border-left: 3px solid $color-primary
.search-hit-name
color: darken($color-primary, 10%)
.search-hit-meta
span.when
display: none
span.context
display: inline-block
.search-hit-thumbnail
position: relative
float: left
min-width: $search-hit-width_list * 1.49
max-width: $search-hit-width_list * 1.49
height: $search-hit-width_list
border-radius: 3px
background: $color-background
margin-right: 12px
text-align: center
overflow: hidden
+media-xs
display: none
+media-sm
min-width: $search-hit-width_list
max-width: $search-hit-width_list
img
height: $search-hit-width_list
width: auto
.pi-video:before, .pi-file:before,
.pi-group:before
font-family: 'pillar-font'
.pi-video:before
content: '\e81d'
.pi-file:before
content: '\e825'
.pi-group:before
content: '\e80d'
.search-hit-thumbnail-icon
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
color: white
font-size: 1.2em
transition: none
color: $color-text-dark-secondary
.dark
text-shadow: none
font-size: 1.3em
.search-hit-name
position: relative
font-size: 1.1em
color: $color-text-dark-primary
background-color: initial
width: initial
max-width: initial
+text-overflow-ellipsis
padding-top: 5px
&:hover
cursor: pointer
text-decoration: underline
em
color: darken($color-primary, 15%)
font-style: normal
.search-hit-ribbon
+ribbon
right: -30px
top: 5px
span
font-size: 60%
margin: 1px 0
padding: 2px 35px
.search-hit-meta
position: relative
font-size: .9em
color: $color-text-dark-secondary
background-color: initial
padding: 3px 0 0 0
text-decoration: none
+text-overflow-ellipsis
span
&.project
color: $color-text-dark-secondary
margin-right: 3px
&.updated
color: $color-text-dark-hint
&.status
font-size: .8em
color: $color-text-dark-secondary
border: thin solid $color-text-dark-hint
padding: 3px 8px
text-transform: uppercase
border-radius: 3px
margin-right: 5px
&.media, &.node_type
color: $color-text-dark-secondary
text-transform: capitalize
margin: 0 3px
&.when
margin: 0 3px
float: right
display: block
+media-lg
display: block
+media-md
display: block
+media-sm
display: none
+media-xs
display: none
&.context
margin: 0
float: right
display: none
&:hover
cursor: pointer
.search-hit-name-user
color: $color-primary
&.users
em
font-style: normal
color: $color-primary
.search-hit-name
font-size: 1.2em
small
margin-left: 5px
color: $color-text-dark-secondary
.search-hit-roles
font-size: .9em
color: $color-text-dark-secondary
margin-left: 15px
.view-grid
display: flex
justify-content: space-between
padding: 10px !important
.search-hit
width: 30%
clear: none
padding: 0
margin: 5px
overflow: hidden
border-radius: 3px
border-left: none
border: 2px solid $color-background
background-color: $color-background
transition: border-color 150ms ease-in-out
&.active
background-color: $color-primary
border-color: $color-primary
.search-hit-name
font-weight: 500
color: white
background-color: $color-primary
.search-hit-name
font-size: .9em
color: $color-text-dark-primary
width: 100%
position: absolute
bottom: 0
padding: 4px 5px
background-color: $color-background
.search-hit-meta
display: none
.search-hit-thumbnail
display: flex
flex-direction: column
background-color: transparent
width: 100%
max-width: 100%
height: auto
min-height: $search-hit-width_grid
overflow: hidden
margin: 0 auto
+media-xs
display: none
+media-sm
img
+position-center-translate
top: 40%
width: auto
height: auto
.search-hit-thumbnail-icon,
.search-hit-thumbnail-icon .dark
top: 40%
.filter-list
width: 100%
padding: 5px 0
margin-bottom: 10px
display: flex
align-items: center
ul
margin: 0 0 0 auto
align-self: flex-end
width: auto
list-style: none
border-radius: 3px
overflow: hidden
padding: 0
li
display: inline-block
padding: 3px 10px
cursor: pointer
background-color: $color-background-dark
border: thin solid $color-text-dark-hint
&.active
color: white
background-color: $color-primary
border-color: transparent