CSS tweaks to js select2 style from Flamenco
This commit is contained in:
parent
293961097f
commit
36a5190349
@ -66,7 +66,6 @@ $splitter-width: 5px
|
||||
width: $splitter-width
|
||||
background-color: $color-background
|
||||
border-left: thin solid $color-background-light
|
||||
border-right: 2px solid $color-background-dark
|
||||
min-height: 200px
|
||||
cursor: col-resize
|
||||
top: 0
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
ul.sharing-users-list
|
||||
list-style: none
|
||||
margin: 0
|
||||
@ -42,9 +40,9 @@ ul.sharing-users-list
|
||||
border: 2px solid $color-info
|
||||
|
||||
.sharing-users-avatar
|
||||
width: 15%
|
||||
max-width: 60px
|
||||
text-align: center
|
||||
margin-right: 10px
|
||||
|
||||
img
|
||||
margin: 0 auto
|
||||
@ -56,7 +54,7 @@ ul.sharing-users-list
|
||||
transition: transform 350ms ease-in-out
|
||||
|
||||
.sharing-users-details
|
||||
width: 85%
|
||||
flex: 1
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
@ -69,6 +67,7 @@ ul.sharing-users-list
|
||||
|
||||
small
|
||||
color: $color-text-dark-hint
|
||||
white-space: nowrap
|
||||
|
||||
.sharing-users-extra
|
||||
font:
|
||||
@ -96,19 +95,12 @@ ul.sharing-users-list
|
||||
.sharing-users-intro,
|
||||
.sharing-users-info
|
||||
h4
|
||||
margin: 0
|
||||
font-family: $font-body
|
||||
|
||||
.sharing-users-info
|
||||
padding-left: 15px
|
||||
border-left: thin solid $color-text-dark-hint
|
||||
|
||||
+media-sm
|
||||
margin-top: 25px
|
||||
|
||||
h4
|
||||
padding-bottom: 10px
|
||||
|
||||
p
|
||||
font:
|
||||
size: 1.1em
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
/* services, about, etc */
|
||||
@import _pages
|
||||
|
||||
|
||||
/* plugins are included here, don't include in base unless needed by other pillar apps */
|
||||
@import plugins/_jstree
|
||||
@import plugins/_js_select2
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
@import ../config
|
||||
.select2-container
|
||||
width: 100% !important
|
||||
box-sizing: border-box
|
||||
display: inline-block
|
||||
margin: 0
|
||||
@ -20,14 +22,11 @@
|
||||
white-space: nowrap
|
||||
.select2-selection__clear
|
||||
position: relative
|
||||
&[dir="rtl"] .select2-selection--single .select2-selection__rendered
|
||||
padding-right: 8px
|
||||
padding-left: 20px
|
||||
.select2-selection--multiple
|
||||
box-sizing: border-box
|
||||
cursor: pointer
|
||||
display: block
|
||||
min-height: 32px
|
||||
min-height: 40px
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
.select2-selection__rendered
|
||||
@ -48,15 +47,17 @@
|
||||
-webkit-appearance: none
|
||||
|
||||
.select2-dropdown
|
||||
background-color: white
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
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
|
||||
@ -67,7 +68,7 @@
|
||||
padding: 0
|
||||
|
||||
.select2-results__option
|
||||
padding: 6px
|
||||
padding: 8px 10px
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
&[aria-selected]
|
||||
@ -126,9 +127,11 @@
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
background-color: #fff
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
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
|
||||
@ -155,12 +158,6 @@
|
||||
position: absolute
|
||||
top: 50%
|
||||
width: 0
|
||||
&[dir="rtl"] .select2-selection--single
|
||||
.select2-selection__clear
|
||||
float: left
|
||||
.select2-selection__arrow
|
||||
left: 1px
|
||||
right: auto
|
||||
&.select2-container--disabled .select2-selection--single
|
||||
background-color: #eee
|
||||
cursor: default
|
||||
@ -170,10 +167,12 @@
|
||||
border-color: transparent transparent #888 transparent
|
||||
border-width: 0 4px 5px 4px
|
||||
.select2-selection--multiple
|
||||
background-color: white
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
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
|
||||
@ -190,35 +189,31 @@
|
||||
font-weight: bold
|
||||
margin-top: 5px
|
||||
margin-right: 10px
|
||||
|
||||
/* Selected names in the select */
|
||||
.select2-selection__choice
|
||||
background-color: #e4e4e4
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
background-color: $color-background-light
|
||||
border: thin solid $color-background
|
||||
border-radius: 3px
|
||||
cursor: default
|
||||
float: left
|
||||
margin-right: 5px
|
||||
margin-top: 5px
|
||||
padding: 0 5px
|
||||
padding: 3px 10px
|
||||
color: $color-text-dark-primary
|
||||
.select2-selection__choice__remove
|
||||
color: #999
|
||||
color: $color-text-dark-hint
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-weight: bold
|
||||
margin-right: 2px
|
||||
margin-right: 8px
|
||||
&:hover
|
||||
color: #333
|
||||
&[dir="rtl"] .select2-selection--multiple
|
||||
.select2-selection__choice, .select2-selection__placeholder, .select2-search--inline
|
||||
float: right
|
||||
.select2-selection__choice
|
||||
margin-left: 5px
|
||||
margin-right: auto
|
||||
.select2-selection__choice__remove
|
||||
margin-left: 2px
|
||||
margin-right: auto
|
||||
color: $color-danger
|
||||
&.select2-container--focus .select2-selection--multiple
|
||||
border: solid $color-text-dark 1px
|
||||
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
|
||||
@ -235,7 +230,7 @@
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
.select2-search--dropdown .select2-search__field
|
||||
border: 1px solid #aaa
|
||||
border: 1px solid $color-background-dark
|
||||
.select2-search--inline .select2-search__field
|
||||
background: transparent
|
||||
border: none
|
||||
@ -243,15 +238,21 @@
|
||||
box-shadow: none
|
||||
-webkit-appearance: textfield
|
||||
.select2-results > .select2-results__options
|
||||
max-height: 200px
|
||||
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]
|
||||
color: #999
|
||||
background-color: $color-background
|
||||
color: $color-text-dark-hint
|
||||
&[aria-selected=true]
|
||||
background-color: #ddd
|
||||
background-color: $color-background-light
|
||||
color: $color-text-dark-primary
|
||||
.select2-results__option
|
||||
padding-left: 1em
|
||||
.select2-results__group
|
||||
@ -271,179 +272,17 @@
|
||||
.select2-results__option
|
||||
margin-left: -5em
|
||||
padding-left: 6em
|
||||
.select2-results__option--highlighted[aria-selected]
|
||||
background-color: #5897fb
|
||||
color: white
|
||||
.select2-results__group
|
||||
cursor: default
|
||||
display: block
|
||||
padding: 6px
|
||||
|
||||
.select2-container--classic
|
||||
.select2-selection--single
|
||||
background-color: #f7f7f7
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
outline: 0
|
||||
background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%)
|
||||
background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%)
|
||||
background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%)
|
||||
background-repeat: repeat-x
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
|
||||
&:focus
|
||||
border: 1px solid #5897fb
|
||||
.select2-selection__rendered
|
||||
color: #444
|
||||
line-height: 28px
|
||||
.select2-selection__clear
|
||||
cursor: pointer
|
||||
float: right
|
||||
font-weight: bold
|
||||
margin-right: 10px
|
||||
.select2-selection__placeholder
|
||||
color: #999
|
||||
.select2-selection__arrow
|
||||
background-color: #ddd
|
||||
border: none
|
||||
border-left: 1px solid #aaa
|
||||
border-top-right-radius: 4px
|
||||
border-bottom-right-radius: 4px
|
||||
height: 26px
|
||||
position: absolute
|
||||
top: 1px
|
||||
right: 1px
|
||||
width: 20px
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%)
|
||||
background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%)
|
||||
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%)
|
||||
background-repeat: repeat-x
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
|
||||
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
|
||||
&[dir="rtl"] .select2-selection--single
|
||||
.select2-selection__clear
|
||||
float: left
|
||||
.select2-selection__arrow
|
||||
border: none
|
||||
border-right: 1px solid #aaa
|
||||
border-radius: 0
|
||||
border-top-left-radius: 4px
|
||||
border-bottom-left-radius: 4px
|
||||
left: 1px
|
||||
right: auto
|
||||
&.select2-container--open
|
||||
.select2-selection--single
|
||||
border: 1px solid #5897fb
|
||||
.select2-selection__arrow
|
||||
background: transparent
|
||||
border: none
|
||||
b
|
||||
border-color: transparent transparent #888 transparent
|
||||
border-width: 0 4px 5px 4px
|
||||
&.select2-container--above .select2-selection--single
|
||||
border-top: none
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%)
|
||||
background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%)
|
||||
background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%)
|
||||
background-repeat: repeat-x
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
|
||||
&.select2-container--below .select2-selection--single
|
||||
border-bottom: none
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%)
|
||||
background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%)
|
||||
background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%)
|
||||
background-repeat: repeat-x
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
|
||||
.select2-selection--multiple
|
||||
background-color: white
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
cursor: text
|
||||
outline: 0
|
||||
&:focus
|
||||
border: 1px solid #5897fb
|
||||
.select2-selection__rendered
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0 5px
|
||||
.select2-selection__clear
|
||||
display: none
|
||||
.select2-selection__choice
|
||||
background-color: #e4e4e4
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
cursor: default
|
||||
float: left
|
||||
margin-right: 5px
|
||||
margin-top: 5px
|
||||
padding: 0 5px
|
||||
.select2-selection__choice__remove
|
||||
color: #888
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-weight: bold
|
||||
margin-right: 2px
|
||||
&:hover
|
||||
color: #555
|
||||
&[dir="rtl"] .select2-selection--multiple
|
||||
.select2-selection__choice
|
||||
float: right
|
||||
margin-left: 5px
|
||||
margin-right: auto
|
||||
.select2-selection__choice__remove
|
||||
margin-left: 2px
|
||||
margin-right: auto
|
||||
&.select2-container--open
|
||||
.select2-selection--multiple
|
||||
border: 1px solid #5897fb
|
||||
&.select2-container--above .select2-selection--multiple
|
||||
border-top: none
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
&.select2-container--below .select2-selection--multiple
|
||||
border-bottom: none
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
.select2-search--dropdown .select2-search__field
|
||||
border: 1px solid #aaa
|
||||
outline: 0
|
||||
.select2-search--inline .select2-search__field
|
||||
outline: 0
|
||||
box-shadow: none
|
||||
.select2-dropdown
|
||||
background-color: white
|
||||
border: 1px solid transparent
|
||||
.select2-dropdown--above
|
||||
border-bottom: none
|
||||
.select2-dropdown--below
|
||||
border-top: none
|
||||
.select2-results > .select2-results__options
|
||||
max-height: 200px
|
||||
overflow-y: auto
|
||||
.select2-results__option
|
||||
&[role=group]
|
||||
padding: 0
|
||||
&[aria-disabled=true]
|
||||
color: grey
|
||||
/* Hovered item from the dropdown */
|
||||
.select2-results__option--highlighted[aria-selected]
|
||||
background-color: #3875d7
|
||||
color: white
|
||||
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
|
||||
&.select2-container--open .select2-dropdown
|
||||
border-color: #5897fb
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user