spree_admin 5.0.0.rc1

data/app/assets/stylesheets/spree/admin/plugins/tom-select.bootstrap4.scss

@@ -0,0 +1,219 @@
+/**
+ * Tom Select bootstrap 4
+ */
+
+//Import Boostrap 4 functions and variables
+
+$state-valid: map-get($form-validation-states,'valid') !default;
+$state-invalid: map-get($form-validation-states,'invalid') !default;
+
+$enable-shadows: true !default;
+$select-font-family: inherit !default;
+$select-font-size: $input-font-size !default;
+$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
+
+$select-color-text: gray("800") !default; //$gray-800
+$select-color-highlight: rgba(255,237,40,0.4) !default;
+$select-color-input: $input-bg !default;
+$select-color-input-full: $input-bg !default;
+$select-color-input-error: map-get($state-invalid,'color') !default;
+$select-color-input-error-focus: darken($select-color-input-error, 10%) !default;
+$select-color-disabled: $input-disabled-bg !default;
+$select-color-item: #efefef !default;
+$select-color-item-border: $border-color !default;
+$select-color-item-active: $component-active-bg !default;
+$select-color-item-active-text: #fff !default;
+$select-color-item-active-border: rgba(0,0,0,0) !default;
+$select-color-optgroup: $dropdown-bg !default;
+$select-color-optgroup-text: $dropdown-header-color !default;
+$select-color-optgroup-border: $dropdown-divider-bg !default;
+$select-color-dropdown: $dropdown-bg !default;
+$select-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
+$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
+$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
+$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
+$select-opacity-disabled: 0.5 !default;
+
+$select-border: 1px solid $input-border-color !default;
+$select-border-radius: $input-border-radius !default;
+
+$select-width-item-border: 0px !default;
+$select-padding-x: $input-btn-padding-x !default;
+$select-padding-y: $input-btn-padding-y !default;
+$select-padding-dropdown-item-x: $input-btn-padding-x !default;
+$select-padding-dropdown-item-y: 3px !default;
+$select-padding-item-x: 5px !default;
+$select-padding-item-y: 1px !default;
+$select-margin-item-x: 3px !default;
+$select-margin-item-y: 3px !default;
+
+$select-arrow-size: 5px !default;
+$select-arrow-color: $select-color-text !default;
+$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
+
+
+@import "tom-select";
+@include ts-caret();
+
+.#{$select-ns}-wrapper.form-control,
+.#{$select-ns}-wrapper.form-select{
+	padding:0 !important;
+}
+
+.#{$select-ns}-dropdown,
+.#{$select-ns}-dropdown.form-control {
+	height: auto;
+	padding: 0;
+	z-index: $zindex-dropdown;
+	background: $select-color-dropdown;
+	border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
+	border-radius: $border-radius;
+	box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+
+.#{$select-ns}-dropdown {
+	.optgroup-header {
+		font-size: $font-size-sm;
+		line-height: $line-height-base;
+	}
+	.optgroup:first-child:before {
+		display: none;
+	}
+	.optgroup:before {
+		content: ' ';
+		display: block;
+		height: 0;
+		margin: $dropdown-divider-margin-y 0;
+		overflow: hidden;
+		border-top: 1px solid $dropdown-divider-bg;
+		margin-left: $select-padding-dropdown-item-x * -1;
+		margin-right: $select-padding-dropdown-item-x * -1;
+	}
+
+	.create {
+		padding-left: $select-padding-dropdown-item-x;
+	}
+}
+
+.#{$select-ns}-dropdown-content {
+	padding: 5px 0;
+}
+
+.#{$select-ns}-control {
+	min-height: $input-height;
+	@include box-shadow($input-box-shadow);
+	@include transition($input-transition);
+	display:flex;
+	align-items: center;
+
+	.focus & {
+		border-color: $input-focus-border-color;
+		outline: 0;
+		@if $enable-shadows {
+			box-shadow: $input-box-shadow, $input-focus-box-shadow;
+		} @else {
+			box-shadow: $input-focus-box-shadow;
+		}
+	}
+}
+
+.is-invalid .#{$select-ns}-control,
+.was-validated .invalid .#{$select-ns}-control{
+	border-color: $select-color-input-error;
+
+	.focus & {
+		border-color: $select-color-input-error-focus;
+		box-shadow: 0 0 0 $input-focus-width rgba($select-color-input-error, .25);
+	}
+}
+
+.is-valid .#{$select-ns}-control{
+	$_color: map-get($state-valid,'color');
+	//$_icon: map-get($state-valid,'icon');
+
+	border-color: $_color;
+
+	.focus & {
+		border-color: $_color;
+		box-shadow: 0 0 0 $input-focus-width rgba($_color, .25);
+	}
+}
+
+.#{$select-ns}-wrapper {
+
+	.input-group-sm > &,
+	&.form-control-sm{
+
+		.#{$select-ns}-control{
+			min-height: $input-height-sm;
+			padding: 0 .75rem;
+			//padding: $input-padding-y-sm $input-padding-x-sm;
+			@include border-radius($input-border-radius-sm);
+			@include font-size($input-font-size-sm);
+		}
+
+		&.has-items .#{$select-ns}-control{
+			min-height: $input-height-sm !important;
+			font-size: $input-font-size-sm;
+			padding-bottom: 0;
+		}
+	}
+
+
+	.input-group-sm > &.multi.has-items,
+	&.form-control-sm.multi.has-items{
+		.#{$select-ns}-control{
+			// padding-top = ($input-height-sm - border-width - item-height) / 2;
+			// item-height = ($select-line-height * $input-font-size-sm) + ($select-padding-item-y * 2)
+			$border-and-padding: add($input-border-width,$select-padding-item-y) * 2;
+			$ts-select-padding-sm: calc( (#{$input-height-sm} - (#{$select-line-height} * #{$input-font-size-sm}) - #{$border-and-padding})/2);
+			padding-top: $ts-select-padding-sm !important;
+		}
+	}
+
+
+	&.multi {
+		&.has-items .#{$select-ns}-control {
+			padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
+			--ts-pr-min: calc(#{$select-padding-x} - #{$select-padding-item-x});
+		}
+		.#{$select-ns}-control > div {
+			border-radius: calc(#{$select-border-radius} - 1px);
+		}
+	}
+
+	.input-group-lg > & >,
+	&.form-control-lg{
+	.#{$select-ns}-control{
+			min-height: $input-height-lg;
+			@include border-radius($input-border-radius-lg);
+			@include font-size($input-font-size-lg);
+		}
+	}
+}
+
+.form-control.#{$select-ns}-wrapper {
+	padding: 0;
+	height: auto;
+	border: none;
+	background: none;
+	//box-shadow: none;
+	border-radius: 0;
+}
+
+.input-group{
+
+	& > .#{$select-ns}-wrapper{
+		flex-grow: 1;
+	}
+
+	& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control{
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control{
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}

data/app/assets/stylesheets/spree/admin/plugins/tom-select.bootstrap5.scss

@@ -0,0 +1,274 @@
+/**
+ * Tom Select bootstrap 5
+ */
+
+//Import Boostrap 5 functions and variables
+$state-valid: map-get($form-validation-states,'valid') !default;
+$state-invalid: map-get($form-validation-states,'invalid') !default;
+
+
+$enable-shadows: true !default;
+$select-font-family: inherit !default;
+$select-font-size: inherit !default;
+$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
+
+$select-color-text: $gray-800 !default;
+$select-color-highlight: rgba(255,237,40,0.4) !default;
+$select-color-input: $input-bg !default;
+$select-color-input-full: $input-bg !default;
+
+
+$select-color-disabled: $input-disabled-bg !default;
+$select-color-item: #efefef !default;
+$select-color-item-border: $border-color !default;
+$select-color-item-active: $component-active-bg !default;
+$select-color-item-active-text: #fff !default;
+$select-color-item-active-border: rgba(0,0,0,0) !default;
+$select-color-optgroup: $dropdown-bg !default;
+$select-color-optgroup-text: $dropdown-header-color !default;
+$select-color-optgroup-border: $dropdown-divider-bg !default;
+$select-color-dropdown: $dropdown-bg !default;
+$select-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
+$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
+$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
+$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
+$select-opacity-disabled: 0.5 !default;
+
+$select-border: 1px solid $input-border-color !default;
+$select-border-radius: $input-border-radius !default;
+
+$select-width-item-border: 0px !default;
+$select-padding-x: $input-padding-x !default;
+$select-padding-y: $input-padding-y !default;
+$select-padding-dropdown-item-x: $input-btn-padding-x !default;
+$select-padding-dropdown-item-y: 3px !default;
+$select-padding-item-x: 5px !default;
+$select-padding-item-y: 1px !default;
+$select-margin-item-x: 3px !default;
+$select-margin-item-y: 3px !default;
+
+$select-arrow-size: 5px !default;
+$select-arrow-color: $select-color-text !default;
+$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
+
+
+@import "tom-select";
+
+
+@mixin ts-form-validation-state-selector($state) {
+
+	$state-map: map-get($form-validation-states,$state);
+
+	.#{$select-ns}-wrapper.is-#{$state},
+	.was-validated .#{$state},
+	.was-validated :#{$state} + .#{$select-ns}-wrapper{
+
+		$color: map-get($state-map,'color');
+		$icon: map-get($state-map,'icon');
+
+		border-color: $color;
+
+		&:not(.single){
+			background-image: escape-svg($icon);
+			background-position: right $input-height-inner-quarter center;
+			background-size: $input-height-inner-half $input-height-inner-half;
+			background-repeat: no-repeat;
+		}
+
+		&.single{
+			background-image: escape-svg($form-select-indicator), escape-svg($icon);
+			background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+			background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+			background-repeat: no-repeat;
+		}
+
+		&.focus .#{$select-ns}-control{
+			border-color: $color;
+	        box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity);
+		}
+
+	}
+}
+
+
+.#{$select-ns}-wrapper.form-control,
+.#{$select-ns}-wrapper.form-select{
+	padding:0 !important;
+	height: auto;
+	box-shadow: none;
+	display: flex;
+}
+
+.#{$select-ns}-dropdown,
+.#{$select-ns}-dropdown.form-control,
+.#{$select-ns}-dropdown.form-select{
+	height: auto;
+	padding: 0;
+	z-index: $zindex-dropdown;
+	background: $select-color-dropdown;
+	border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
+	border-radius: $border-radius;
+	box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+
+.#{$select-ns}-dropdown {
+	.optgroup-header {
+		font-size: $font-size-sm;
+		line-height: $line-height-base;
+	}
+	.optgroup:first-child:before {
+		display: none;
+	}
+	.optgroup:before {
+		content: ' ';
+		display:	 block;
+		height: 0;
+		margin: $dropdown-divider-margin-y 0;
+		overflow: hidden;
+		border-top: 1px solid $dropdown-divider-bg;
+		margin-left: $select-padding-dropdown-item-x * -1;
+		margin-right: $select-padding-dropdown-item-x * -1;
+	}
+
+	.create {
+		padding-left: $select-padding-dropdown-item-x;
+	}
+}
+
+.#{$select-ns}-dropdown-content {
+	padding: 5px 0;
+}
+
+.#{$select-ns}-control {
+	@include box-shadow($input-box-shadow);
+	@include transition($input-transition);
+	display:flex;
+	align-items: center;
+
+	&.dropdown	-active {
+		border-radius: $select-border-radius;
+	}
+
+	.focus &{
+		border-color: $input-focus-border-color;
+		outline: 0;
+		@if $enable-shadows {
+			box-shadow: $input-box-shadow, $input-focus-box-shadow;
+		} @else {
+			box-shadow: $input-focus-box-shadow;
+		}
+	}
+
+	.item{
+		display:	flex;
+		align-items: center;
+	}
+}
+
+
+@include ts-form-validation-state-selector('invalid');
+@include ts-form-validation-state-selector('valid');
+
+
+.#{$select-ns}-wrapper {
+	min-height: $input-height;
+	display:flex;
+
+	.input-group-sm > &,
+	&.form-select-sm,
+	&.form-control-sm{
+		min-height: $input-height-sm;
+
+		.#{$select-ns}-control{
+			padding: 0 .75rem;
+				//padding: $input-padding-y-sm $input-padding-x-sm;
+			@include border-radius($input-border-radius-sm);
+			@include font-size($input-font-size-sm);
+		}
+
+		&.has-items .#{$select-ns}-control{
+			font-size: $input-font-size-sm;
+			padding-bottom: 0;
+		}
+	}
+
+
+	.input-group-sm > &.multi.has-items,
+	&.form-select-sm.multi.has-items,
+	&.form-control-sm.multi.has-items{
+		.#{$select-ns}-control{
+			// padding-top = ($input-height-sm - border-width - item-height) / 2;
+			// item-height = ($select-line-height * $input-font-size-sm) + ($select-padding-item-y * 2)
+			$border-and-padding: add($input-border-width,$select-padding-item-y) * 2;
+			$ts-select-padding-sm: calc( (#{$input-height-sm} - (#{$select-line-height} * #{$input-font-size-sm}) - #{$border-and-padding})/2);
+			padding-top: $ts-select-padding-sm !important;
+		}
+	}
+
+
+	&.multi {
+		&.has-items .#{$select-ns}-control {
+			padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
+			padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+		}
+		.#{$select-ns}-control > div {
+			border-radius: calc(#{$select-border-radius} - 1px);
+		}
+	}
+
+	.input-group-lg > &,
+	&.form-control-lg,
+	&.form-select-lg{
+		min-height: $input-height-lg;
+		.#{$select-ns}-control{
+			@include border-radius($input-border-radius-lg);
+			@include font-size($input-font-size-lg);
+		}
+	}
+}
+
+
+.#{$select-ns}-wrapper:not(.form-control):not(.form-select){
+	padding: 0;
+		border: none;
+		height: auto;
+		box-shadow: none;
+		background: none;
+
+	&.single .#{$select-ns}-control{
+		background-image: escape-svg($form-select-indicator);
+		background-repeat: no-repeat;
+		background-position: $form-select-bg-position;
+		background-size: $form-select-bg-size;
+		padding-right: 2rem;
+	}
+
+}
+
+.#{$select-ns}-wrapper.form-control,
+.#{$select-ns}-wrapper.form-select{
+
+	.#{$select-ns}-control,
+	&.single.input-active .#{$select-ns}-control{
+		border:		none !important;
+		background: transparent !important; // let the background of .form-select show through
+	}
+
+}
+
+.input-group{
+
+	& > .#{$select-ns}-wrapper{
+		flex-grow: 1;
+	}
+
+	& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control{
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control{
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}

data/app/assets/stylesheets/spree/admin/plugins/tom-select.default.scss

@@ -0,0 +1,87 @@
+
+
+$select-color-item:					#1da7ee;
+$select-color-item-text:				#fff;
+$select-color-item-active-text:		#fff;
+$select-color-item-border:			#0073bb;
+$select-color-item-active:			#92c836;
+$select-color-item-active-border:	#00578d;
+$select-width-item-border:			1px;
+
+$select-shadow-input:				inset 0 1px 1px rgba(0,0,0,0.1) !default;
+$select-shadow-input-focus:			inset 0 1px 2px rgba(0,0,0,0.15) !default;
+
+
+@import "tom-select";
+@include ts-caret();
+
+.#{$select-ns}-wrapper {
+	display:flex;
+	min-height:$select-line-height + ($select-padding-y*2) + ($select-border-width *2);
+
+	&.multi {
+
+		&.has-items .#{$select-ns}-control {
+			$padding-x: $select-padding-x - 3px;
+			padding-left: $padding-x;
+			padding-right: $padding-x;
+		}
+
+		.#{$select-ns}-control {
+			[data-value] {
+				text-shadow: 0 1px 0 rgba(0,51,83,0.3);
+				border-radius: 3px;
+				@include selectize-vertical-gradient(#1da7ee, #178ee9);
+				box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
+				&.active {
+					@include selectize-vertical-gradient(#008fd8, #0075cf);
+				}
+			}
+		}
+
+		&.disabled .#{$select-ns}-control [data-value] {
+			color: #999;
+			text-shadow: none;
+			background: none;
+			box-shadow: none;
+
+			&, .remove {
+				border-color: #e6e6e6;
+			}
+			.remove {
+				background: none;
+			}
+		}
+
+	}
+	&.single {
+		.#{$select-ns}-control {
+			box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
+			@include selectize-vertical-gradient(#fefefe, #f2f2f2);
+		}
+	}
+}
+
+.#{$select-ns}-wrapper.single .#{$select-ns}-control, .#{$select-ns}-dropdown.single {
+	border-color: #b8b8b8;
+}
+
+.#{$select-ns}-control {
+	.dropdown-active & {
+		border-radius: $select-border-radius $select-border-radius 0 0;
+	}
+}
+
+.#{$select-ns}-dropdown {
+	.optgroup-header {
+		padding-top: $select-padding-dropdown-item-y + 2px;
+		font-weight: bold;
+		font-size: 0.85em;
+	}
+	.optgroup {
+		border-top: 1px solid $select-color-dropdown-border-top;
+		&:first-child {
+			border-top: 0 none;
+		}
+	}
+}