From 2d26370bb910c99b1e4f579603c1564085ec559a Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 3 Nov 2016 12:57:49 +0100 Subject: [PATCH] Unify multiple select with the rest of the inputs, and cleanup --- src/styles/plugins/js_select2.sass | 209 ++++++----------------------- 1 file changed, 38 insertions(+), 171 deletions(-) diff --git a/src/styles/plugins/js_select2.sass b/src/styles/plugins/js_select2.sass index 8174e97..12b8f93 100644 --- a/src/styles/plugins/js_select2.sass +++ b/src/styles/plugins/js_select2.sass @@ -47,9 +47,8 @@ -webkit-appearance: none .select2-dropdown - background-color: white - border: 1px solid $color-text-dark-hint - border-radius: 3px + 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 @@ -57,6 +56,8 @@ 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 @@ -164,13 +167,12 @@ border-color: transparent transparent #888 transparent border-width: 0 4px 5px 4px .select2-selection--multiple - background-color: white - border: 1px solid $color-background-dark - border-radius: 4px + border-bottom: 1px solid $color-background-dark cursor: text - + transition: all 150ms ease-in-out &:hover - border-color: $color-text-dark-hint + border-color: $color-text-dark-secondary + .select2-selection__rendered box-sizing: border-box list-style: none @@ -188,17 +190,17 @@ margin-top: 5px margin-right: 10px - /* Selections in the list */ + /* Selected names in the select */ .select2-selection__choice - background-color: $color-background - border: 1px solid $color-background-dark + 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 + color: $color-text-dark-primary .select2-selection__choice__remove color: $color-text-dark-hint cursor: pointer @@ -208,8 +210,10 @@ &:hover color: $color-danger &.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 + &.select2-container--disabled .select2-selection--multiple background-color: #eee @@ -226,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 @@ -234,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] + background-color: $color-background color: $color-text-dark-hint &[aria-selected=true] - background-color: $color-background + background-color: $color-background-light + color: $color-text-dark-primary .select2-results__option padding-left: 1em .select2-results__group @@ -262,160 +272,17 @@ .select2-results__option margin-left: -5em 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 - .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 + /* 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