archive/attract
0
0
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

Unify multiple select with the rest of the inputs, and cleanup

Browse Source
This commit is contained in:
Pablo Vazquez
2016-11-03 12:57:49 +01:00
parent c8d5c3863b
commit 2d26370bb9
1 changed files with 38 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/styles/plugins/js_select2.sass
View File

@@ -47,9 +47,8 @@
-webkit-appearance: none -webkit-appearance: none
.select2-dropdown .select2-dropdown
background-color: white background-color: $color-background-light
border: 1px solid $color-text-dark-hint border: 1px solid $color-background-dark
border-radius: 3px
box-shadow: 0 3px 15px rgba(black, .2) box-shadow: 0 3px 15px rgba(black, .2)
box-sizing: border-box box-sizing: border-box
display: block display: block
@@ -57,6 +56,8 @@
left: -100000px left: -100000px
width: 100% width: 100%
z-index: 1051 z-index: 1051
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
.select2-results .select2-results
display: block display: block
@@ -67,7 +68,7 @@
padding: 0 padding: 0
.select2-results__option .select2-results__option
padding: 6px padding: 8px 10px
user-select: none user-select: none
-webkit-user-select: none -webkit-user-select: none
&[aria-selected] &[aria-selected]
@@ -126,9 +127,11 @@
.select2-container--default .select2-container--default
.select2-selection--single .select2-selection--single
background-color: #fff border-bottom: 1px solid $color-background-dark
border: 1px solid #aaa cursor: text
border-radius: 4px transition: all 150ms ease-in-out
&:hover
border-color: $color-text-dark-secondary
.select2-selection__rendered .select2-selection__rendered
color: #444 color: #444
line-height: 28px line-height: 28px
@@ -164,13 +167,12 @@
border-color: transparent transparent #888 transparent border-color: transparent transparent #888 transparent
border-width: 0 4px 5px 4px border-width: 0 4px 5px 4px
.select2-selection--multiple .select2-selection--multiple
background-color: white border-bottom: 1px solid $color-background-dark
border: 1px solid $color-background-dark
border-radius: 4px
cursor: text cursor: text
transition: all 150ms ease-in-out
&:hover &:hover
border-color: $color-text-dark-hint border-color: $color-text-dark-secondary
.select2-selection__rendered .select2-selection__rendered
box-sizing: border-box box-sizing: border-box
list-style: none list-style: none
@@ -188,17 +190,17 @@
margin-top: 5px margin-top: 5px
margin-right: 10px margin-right: 10px
/* Selections in the list */ /* Selected names in the select */
.select2-selection__choice .select2-selection__choice
background-color: $color-background background-color: $color-background-light
border: 1px solid $color-background-dark border: thin solid $color-background
border-radius: 3px border-radius: 3px
cursor: default cursor: default
float: left float: left
margin-right: 5px margin-right: 5px
margin-top: 5px margin-top: 5px
padding: 3px 10px padding: 3px 10px
color: $color-text-dark color: $color-text-dark-primary
.select2-selection__choice__remove .select2-selection__choice__remove
color: $color-text-dark-hint color: $color-text-dark-hint
cursor: pointer cursor: pointer
@@ -208,8 +210,10 @@
&:hover &:hover
color: $color-danger color: $color-danger
&.select2-container--focus .select2-selection--multiple &.select2-container--focus .select2-selection--multiple
border: solid $color-text-dark-hint 1px border-bottom: 1px solid $color-primary
box-shadow: 0 1px 0 0 $color-primary
outline: 0 outline: 0
&.select2-container--disabled &.select2-container--disabled
.select2-selection--multiple .select2-selection--multiple
background-color: #eee background-color: #eee
@@ -226,7 +230,7 @@
border-bottom-left-radius: 0 border-bottom-left-radius: 0
border-bottom-right-radius: 0 border-bottom-right-radius: 0
.select2-search--dropdown .select2-search__field .select2-search--dropdown .select2-search__field
border: 1px solid #aaa border: 1px solid $color-background-dark
.select2-search--inline .select2-search__field .select2-search--inline .select2-search__field
background: transparent background: transparent
border: none border: none
@@ -234,15 +238,21 @@
box-shadow: none box-shadow: none
-webkit-appearance: textfield -webkit-appearance: textfield
.select2-results > .select2-results__options .select2-results > .select2-results__options
max-height: 200px max-height: 250px
overflow-y: auto overflow-y: auto
.select2-results__option .select2-results__option
&:last-child
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
&[role=group] &[role=group]
padding: 0 padding: 0
&[aria-disabled=true] &[aria-disabled=true]
background-color: $color-background
color: $color-text-dark-hint color: $color-text-dark-hint
&[aria-selected=true] &[aria-selected=true]
background-color: $color-background background-color: $color-background-light
color: $color-text-dark-primary
.select2-results__option .select2-results__option
padding-left: 1em padding-left: 1em
.select2-results__group .select2-results__group
@@ -262,160 +272,17 @@
.select2-results__option .select2-results__option
margin-left: -5em margin-left: -5em
padding-left: 6em padding-left: 6em
.select2-results__option--highlighted[aria-selected]
background-color: $color-primary
color: white
.select2-results__group
cursor: default
display: block
padding: 6px
.select2-container--classic /* Hovered item from the dropdown */
.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
&.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
&.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
.select2-results__option--highlighted[aria-selected] .select2-results__option--highlighted[aria-selected]
background-color: #3875d7 background-color: white
color: white color: $color-primary
&:last-child
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
.select2-results__group .select2-results__group
cursor: default cursor: default
display: block display: block
padding: 6px padding: 6px
&.select2-container--open .select2-dropdown
border-color: #5897fb