From 36a5190349d4ce5df8a045a6a52080fb43e48bbd Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 8 Jun 2017 16:43:42 +0200 Subject: [PATCH] CSS tweaks to js select2 style from Flamenco --- src/styles/_apps_base.sass | 1 - src/styles/_project-sharing.sass | 14 +- src/styles/main.sass | 2 +- src/styles/plugins/_js_select2.sass | 261 ++++++---------------------- 4 files changed, 54 insertions(+), 224 deletions(-) diff --git a/src/styles/_apps_base.sass b/src/styles/_apps_base.sass index 5ead1393..0b613f83 100644 --- a/src/styles/_apps_base.sass +++ b/src/styles/_apps_base.sass @@ -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 diff --git a/src/styles/_project-sharing.sass b/src/styles/_project-sharing.sass index 6c5afa67..8e88ed98 100644 --- a/src/styles/_project-sharing.sass +++ b/src/styles/_project-sharing.sass @@ -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 diff --git a/src/styles/main.sass b/src/styles/main.sass index 12ce2a31..ed287707 100644 --- a/src/styles/main.sass +++ b/src/styles/main.sass @@ -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 diff --git a/src/styles/plugins/_js_select2.sass b/src/styles/plugins/_js_select2.sass index 8522e83f..12b8f93c 100644 --- a/src/styles/plugins/_js_select2.sass +++ b/src/styles/plugins/_js_select2.sass @@ -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