Home
Diffusion Pillar (wip-redesign) Browse

pillar/src/styles/plugins/_js_select2.sass
06dd24bcf9fdwip-redesign

Last Change
Raw File

_js_select2.sass
View Options

@import ../config
.select2-container
width: 100% !important
box-sizing: border-box
display: inline-block
margin: 0
position: relative
vertical-align: middle
.select2-selection--single
box-sizing: border-box
cursor: pointer
display: block
height: 28px
user-select: none
-webkit-user-select: none
.select2-selection__rendered
display: block
padding-left: 8px
padding-right: 20px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.select2-selection__clear
position: relative
.select2-selection--multiple
box-sizing: border-box
cursor: pointer
display: block
min-height: 40px
user-select: none
-webkit-user-select: none
.select2-selection__rendered
display: inline-block
overflow: hidden
padding-left: 8px
text-overflow: ellipsis
white-space: nowrap
.select2-search--inline
float: left
.select2-search__field
box-sizing: border-box
border: none
font-size: 100%
margin-top: 5px
padding: 0
&::-webkit-search-cancel-button
-webkit-appearance: none
.select2-dropdown
background-color: $color-background-light
border: 1px solid $color-background-dark
box-shadow: 0 3px 15px rgba(black, .2)
box-sizing: border-box
display: block
position: absolute
left: -100000px
width: 100%
z-index: 1051
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
.select2-results
display: block
.select2-results__options
list-style: none
margin: 0
padding: 0
.select2-results__option
padding: 8px 10px
user-select: none
-webkit-user-select: none
&[aria-selected]
cursor: pointer
.select2-container--open
.select2-dropdown
left: 0
.select2-dropdown--above
border-bottom: none
border-bottom-left-radius: 0
border-bottom-right-radius: 0
.select2-dropdown--below
border-top: none
border-top-left-radius: 0
border-top-right-radius: 0
.select2-search--dropdown
display: block
padding: 4px
.select2-search__field
padding: 4px
width: 100%
box-sizing: border-box
&::-webkit-search-cancel-button
-webkit-appearance: none
&.select2-search--hide
display: none
.select2-close-mask
border: 0
margin: 0
padding: 0
display: block
position: fixed
left: 0
top: 0
min-height: 100%
min-width: 100%
height: auto
width: auto
opacity: 0
z-index: 99
background-color: #fff
filter: alpha(opacity = 0)
.select2-hidden-accessible
border: 0 !important
clip: rect(0 0 0 0) !important
height: 1px !important
margin: -1px !important
overflow: hidden !important
padding: 0 !important
position: absolute !important
width: 1px !important
.select2-container--default
.select2-selection--single
border-bottom: 1px solid $color-background-dark
cursor: text
transition: all 150ms ease-in-out
&:hover
border-color: $color-text-dark-secondary
.select2-selection__rendered
color: #444
line-height: 28px
.select2-selection__clear
cursor: pointer
float: right
font-weight: bold
.select2-selection__placeholder
color: #999
.select2-selection__arrow
height: 26px
position: absolute
top: 1px
right: 1px
width: 20px
b
border-color: #888 transparent transparent transparent
border-style: solid
border-width: 5px 4px 0 4px
height: 0
left: 50%
margin-left: -4px
margin-top: -2px
position: absolute
top: 50%
width: 0
&.select2-container--disabled .select2-selection--single
background-color: #eee
cursor: default
.select2-selection__clear
display: none
&.select2-container--open .select2-selection--single .select2-selection__arrow b
border-color: transparent transparent #888 transparent
border-width: 0 4px 5px 4px
.select2-selection--multiple
border-bottom: 1px solid $color-background-dark
cursor: text
transition: all 150ms ease-in-out
&:hover
border-color: $color-text-dark-secondary
.select2-selection__rendered
box-sizing: border-box
list-style: none
margin: 0
padding: 0 5px
width: 100%
.select2-selection__placeholder
color: #999
margin-top: 5px
float: left
.select2-selection__clear
cursor: pointer
float: right
font-weight: bold
margin-top: 5px
margin-right: 10px
/* Selected names in the select */
.select2-selection__choice
background-color: $color-background-light
border: thin solid $color-background
border-radius: 3px
cursor: default
float: left
margin-right: 5px
margin-top: 5px
padding: 3px 10px
color: $color-text-dark-primary
.select2-selection__choice__remove
color: $color-text-dark-hint
cursor: pointer
display: inline-block
font-weight: bold
margin-right: 8px
&:hover
color: $color-danger
&.select2-container--focus .select2-selection--multiple
border-bottom: 1px solid $color-primary
box-shadow: 0 1px 0 0 $color-primary
outline: 0
&.select2-container--disabled
.select2-selection--multiple
background-color: #eee
cursor: default
.select2-selection__choice__remove
display: none
&.select2-container--open
&.select2-container--above
.select2-selection--single, .select2-selection--multiple
border-top-left-radius: 0
border-top-right-radius: 0
&.select2-container--below
.select2-selection--single, .select2-selection--multiple
border-bottom-left-radius: 0
border-bottom-right-radius: 0
.select2-search--dropdown .select2-search__field
border: 1px solid $color-background-dark
.select2-search--inline .select2-search__field
background: transparent
border: none
outline: 0
box-shadow: none
-webkit-appearance: textfield
.select2-results > .select2-results__options
max-height: 250px
overflow-y: auto
.select2-results__option
&:last-child
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
&[role=group]
padding: 0
&[aria-disabled=true]
background-color: $color-background
color: $color-text-dark-hint
&[aria-selected=true]
background-color: $color-background-light
color: $color-text-dark-primary
.select2-results__option
padding-left: 1em
.select2-results__group
padding-left: 0
.select2-results__option
margin-left: -1em
padding-left: 2em
.select2-results__option
margin-left: -2em
padding-left: 3em
.select2-results__option
margin-left: -3em
padding-left: 4em
.select2-results__option
margin-left: -4em
padding-left: 5em
.select2-results__option
margin-left: -5em
padding-left: 6em
/* Hovered item from the dropdown */
.select2-results__option--highlighted[aria-selected]
background-color: white
color: $color-primary
&:last-child
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
.select2-results__group
cursor: default
display: block
padding: 6px