CSS tweaks to js select2 style from Flamenco

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

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

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
 

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