spree_admin 5.0.0.rc1

data/app/assets/stylesheets/spree/admin/plugins/_dropdown.scss

@@ -0,0 +1,102 @@
+
+
+.#{$select-ns}-dropdown {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	z-index: 10;
+
+	border: $select-dropdown-border;
+	background: $select-color-dropdown;
+	margin: 0.25rem 0 0 0;
+	border-top: 0 none;
+	box-sizing: border-box;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+	border-radius: 0 0 $select-border-radius $select-border-radius;
+
+
+	[data-selectable] {
+		cursor: pointer;
+		overflow: hidden;
+		.highlight {
+			background: $select-color-highlight;
+			border-radius: 1px;
+		}
+	}
+
+	.option,
+	.optgroup-header,
+	.no-results,
+	.create {
+		padding: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
+	}
+
+	.option, [data-disabled], [data-disabled] [data-selectable].option {
+		cursor: inherit;
+		opacity: 0.5;
+	}
+
+	[data-selectable].option {
+		opacity: 1;
+		cursor: pointer;
+	}
+
+	.optgroup:first-child .optgroup-header {
+		border-top: 0 none;
+	}
+
+	.optgroup-header {
+		color: $select-color-optgroup-text;
+		background: $select-color-optgroup;
+		cursor: default;
+	}
+
+	.active {
+		background-color: $select-color-dropdown-item-active;
+		color: $select-color-dropdown-item-active-text;
+		&.create {
+			color: $select-color-dropdown-item-create-active-text;
+		}
+	}
+
+	.create {
+		color: $select-color-dropdown-item-create-text;
+	}
+
+	.spinner{
+		display: inline-block;
+		width: $select-spinner-size;
+		height: $select-spinner-size;
+		margin: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
+
+
+		&:after {
+			content: " ";
+			display: block;
+			width: $select-spinner-size * .8;
+			height: $select-spinner-size * .8;
+			margin: $select-spinner-size * .1;
+			border-radius: 50%;
+			border: $select-spinner-border-size solid $select-spinner-border-color;
+			border-color: $select-spinner-border-color transparent $select-spinner-border-color transparent;
+			animation: lds-dual-ring 1.2s linear infinite;
+		}
+		@keyframes lds-dual-ring {
+			0% {
+				transform: rotate(0deg);
+			}
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+	}
+}
+
+.#{$select-ns}-dropdown-content {
+	overflow-y: auto;
+	overflow-x: hidden;
+	max-height: $select-max-height-dropdown;
+	overflow-scrolling: touch;
+	scroll-behavior: smooth;
+}

data/app/assets/stylesheets/spree/admin/plugins/_items.scss

@@ -0,0 +1,115 @@
+
+
+.#{$select-ns}-control {
+
+	border: $select-border;
+	padding: $select-padding-y $select-padding-x;
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+	box-sizing: border-box;
+	box-shadow: $select-shadow-input;
+	border-radius: $select-border-radius;
+	display: flex;
+	flex-wrap: wrap;
+
+	.#{$select-ns}-wrapper.multi.has-items & {
+		$padding-x: $select-padding-x;
+		$padding-top: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-width-item-border});
+		$padding-bottom: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-margin-item-y} - #{$select-width-item-border});
+		padding: $padding-top $padding-x $padding-bottom;
+	}
+
+	.full & {
+		background-color: $select-color-input-full;
+	}
+
+	.disabled &,
+	.disabled & * {
+		cursor: default !important;
+	}
+
+	.focus & {
+		box-shadow: $select-shadow-input-focus;
+	}
+
+	> * {
+		vertical-align: baseline;
+		display: inline-block;
+	}
+
+	.#{$select-ns}-wrapper.multi & > div {
+		cursor: pointer;
+		margin: 0 $select-margin-item-x $select-margin-item-y 0;
+		padding: $select-padding-item-y $select-padding-item-x;
+		background: $select-color-item;
+		color: $select-color-item-text;
+		border: $select-width-item-border solid $select-color-item-border;
+
+		&.active {
+			background: $select-color-item-active;
+			color: $select-color-item-active-text;
+			border: $select-width-item-border solid $select-color-item-active-border;
+		}
+	}
+
+	.#{$select-ns}-wrapper.multi.disabled & > div {
+		&, &.active {
+			color: lighten(desaturate($select-color-item-text, 100%), $select-lighten-disabled-item-text);
+			background: lighten(desaturate($select-color-item, 100%), $select-lighten-disabled-item);
+			border: $select-width-item-border solid lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
+		}
+	}
+
+	> input {
+		&::-ms-clear {
+			display: none;
+		}
+
+		flex: 1 1 auto;
+		min-width: 7rem;
+		display: inline-block !important;
+		padding: 0 !important;
+		min-height: 0 !important;
+		max-height: none !important;
+		max-width: 100% !important;
+		margin: 0 !important;
+		text-indent: 0 !important;
+		border: 0 none !important;
+		background: none !important;
+		line-height: inherit !important;
+		user-select: auto !important;
+		box-shadow: none !important;
+		&:focus { outline: none !important; }
+	}
+
+	.has-items & > input{
+		margin: $select-caret-margin !important;
+	}
+
+	&.rtl {
+		text-align: right;
+		&.single .#{$select-ns}-control:after {
+			left: $select-arrow-offset;
+			right: auto;
+		}
+		.#{$select-ns}-control > input {
+			margin: $select-caret-margin-rtl !important;
+		}
+	}
+
+	.disabled & {
+		opacity: $select-opacity-disabled;
+		background-color: $select-color-disabled;
+	}
+
+	// hide input, while retaining its focus, and maintain layout so users can still click on the space to bring the display back
+	// visibility:hidden can prevent the input from receiving focus
+	.input-hidden & > input{
+		opacity: 0;
+		position: absolute;
+		left: -10000px;
+	}
+
+}

data/app/assets/stylesheets/spree/admin/plugins/_tinymce_custom.scss

@@ -0,0 +1,74 @@
+// Removes Tiny MCE branding
+.tox-statusbar__branding {
+  display: none;
+}
+
+.tox.tox-tinymce {
+  border-radius: $input-border-radius !important;
+  border: 0 none !important;
+}
+.tox-edit-area__iframe {
+  background-color: $input-bg !important;
+}
+
+.tox-tinymce--disabled .tox-edit-area__iframe {
+  background-color: $gray-50 !important;
+}
+
+.tox .tox-edit-area::before {
+  border-color: $primary !important;
+}
+
+// Grey out the readonly textarea
+.rich-text-area-container:has(textarea.spree-rte[contenteditable='false']) {
+  textarea.spree-rte + .tox-tinymce {
+    .tox-edit-area__iframe {
+      background-color: $gray-50 !important;
+    }
+  }
+}
+
+.tox {
+  .tox-tbtn {
+    @extend .btn;
+    border-radius: $border-radius !important;
+    color: rgba(0, 0, 0, 0.6) !important;
+
+    svg {
+      // same color as trix
+      fill: rgba(0, 0, 0, 0.6) !important;
+    }
+  }
+
+  .tox-editor-header {
+    padding: 0 !important;
+  }
+
+  .tox-edit-focus {
+    display: none !important;
+  }
+}
+.tox-statusbar {
+  display: none !important;
+}
+
+/* Override TinyMCE UI font size */
+.tox-toolbar__group {
+  font-size: $font-size-base !important; /* Change this value to your desired font size */
+}
+.tox-mbtn__select-label {
+  font-size: $font-size-base !important; /* Change this value to your desired font size */
+}
+/* Override TinyMCE Content font size */
+.tox-tinymce {
+  font-size: $font-size-base !important; /* Change this value to your desired font size */
+}
+.tox .tox-collection__item-label, .tox-tbtn__select-label {
+  font-size: $font-size-base !important; /* Change this value to your desired font size */
+  font-family: $font-family-sans-serif;
+}
+
+.tox.tox-tinymce-aux .tox-toolbar__overflow, .tox .tox-menu {
+  border-radius: $border-radius !important;
+}
+

data/app/assets/stylesheets/spree/admin/plugins/_trix_custom.scss

@@ -0,0 +1,110 @@
+.trix-container {
+  @extend .rich-text-area-container
+}
+
+trix-toolbar {
+  @extend .p-1;
+  @extend .border-bottom;
+  background-color: $gray-25 !important;
+  width: 100%;
+
+  .trix-button.trix-active {
+    background-color: $gray-100!important;
+  }
+
+  .trix-button-group {
+    @extend .gap-1;
+    margin-left: 0 !important;
+  }
+
+  .trix-button {
+    @extend .rounded-sm;
+
+    width: 36px !important;
+    height: 30px !important;
+    padding: 6px !important;
+  }
+
+  .trix-dialogs > .trix-dialog > .trix-dialog__link-fields > .trix-button-group > .trix-button--dialog {
+    width: 100% !important;
+    height: 100% !important;
+    padding: 0.5rem 0.75rem !important;
+  }
+
+  .trix-dialog--x-video-embed {
+    max-width: 600px;
+  }
+}
+
+trix-editor {
+  @extend .m-2;
+  border-radius: $input-border-radius;
+  border: 0 none !important;
+}
+
+.trix-container, trix-editor {
+  background-color: $input-bg;
+}
+
+.trix-container:has(trix-editor[contenteditable='false']) {
+  background-color: $gray-50;
+
+  &:active {
+    background-color: $gray-50 !important;
+  }
+
+  trix-editor {
+    background-color: $gray-50;
+  }
+}
+
+trix-toolbar .trix-button--icon::before {
+  margin: 4px;
+}
+
+trix-toolbar .trix-button, trix-toolbar .trix-button-group {
+  border: 0 none !important;
+  margin-bottom: 0 !important;
+}
+
+trix-toolbar .trix-button:hover {
+  background-color: $border-color !important;
+  color: theme-color('black') !important;
+}
+
+trix-toolbar .trix-button-row {
+  flex-wrap: wrap !important;
+  display: flex;
+  width: 100%;
+}
+
+trix-toolbar .trix-dialog {
+  background-color: $white !important;
+  border-top: 0 none !important;
+  border-radius: $border-radius !important;
+  top: 4px !important;
+}
+
+trix-toolbar .trix-dialog .trix-input {
+  @extend .form-control;
+}
+
+trix-toolbar .trix-dialog .trix-button {
+  @extend .btn;
+  @extend .btn-light;
+  @extend .px-4;
+  @extend .py-2;
+  @extend .my-0;
+  @extend .mr-1;
+  border: 1px solid $gray-200 !important;
+}
+
+trix-toolbar .trix-dialog__link-fields {
+  align-items: center;
+}
+
+// icons
+.trix-button--icon-embed::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16"><path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/></svg>');
+  top: 8% !important;
+}

data/app/assets/stylesheets/spree/admin/plugins/flatfile.scss

@@ -0,0 +1,4 @@
+/* A div around the iframe that contains Flatfile */
+.flatfile_iframe-wrapper {
+  z-index: 1100 !important;
+}

data/app/assets/stylesheets/spree/admin/plugins/plugins/checkbox_options.scss

@@ -0,0 +1,5 @@
+.plugin-checkbox_options {
+	.option input{
+		margin-right: 0.5rem;
+	}
+}

data/app/assets/stylesheets/spree/admin/plugins/plugins/clear_button.scss

@@ -0,0 +1,30 @@
+
+.plugin-clear_button{
+
+	.#{$select-ns}-control{
+		padding-right: calc( 1em + (3 * #{$select-padding-item-x}) ) !important;
+	}
+
+	.clear-button{
+		opacity:		0;
+		position:		absolute;
+		top:			$select-padding-y;
+		right:			calc(#{$select-padding-x} - #{$select-padding-item-x});
+		margin-right:	0 !important;
+		background:		transparent !important;
+		transition:		opacity 0.5s;
+		cursor:			pointer;
+	}
+
+	&.single .clear-button{
+		right:			calc(#{$select-padding-x} - #{$select-padding-item-x} +  2rem);
+	}
+
+	&.focus.has-items .clear-button,
+	&:not(.disabled):hover.has-items .clear-button{
+		opacity:		1;
+	}
+
+
+
+}

data/app/assets/stylesheets/spree/admin/plugins/plugins/drag_drop.scss

@@ -0,0 +1,16 @@
+.#{$select-ns}-wrapper.plugin-drag_drop {
+	&.multi > .#{$select-ns}-control > div.ui-sortable-placeholder {
+		visibility: visible !important;
+		background: #f2f2f2 !important;
+		background: rgba(0,0,0,0.06) !important;
+		border: 0 none !important;
+		box-shadow: inset 0 0 12px 4px #fff;
+	}
+	.ui-sortable-placeholder::after {
+		content: '!';
+		visibility: hidden;
+	}
+	.ui-sortable-helper {
+		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+	}
+}

data/app/assets/stylesheets/spree/admin/plugins/plugins/dropdown_header.scss

@@ -0,0 +1,23 @@
+
+.#{$select-ns}-wrapper{
+	.dropdown-header {
+		position: relative;
+		padding: ($select-padding-dropdown-item-y * 2) $select-padding-dropdown-item-x;
+		border-bottom: 1px solid $select-color-border;
+		background: mix($select-color-dropdown, $select-color-border, 85%);
+		border-radius: $select-border-radius $select-border-radius 0 0;
+	}
+	.dropdown-header-close {
+		position: absolute;
+		right: $select-padding-dropdown-item-x;
+		top: 50%;
+		color: $select-color-text;
+		opacity: 0.4;
+		margin-top: -12px;
+		line-height: 20px;
+		font-size: 20px !important;
+	}
+	.dropdown-header-close:hover {
+		color: darken($select-color-text, 25%);
+	}
+}

data/app/assets/stylesheets/spree/admin/plugins/plugins/dropdown_input.scss

@@ -0,0 +1,47 @@
+
+.plugin-dropdown_input{
+
+	&.focus.dropdown-active .#{$select-ns}-control{
+		box-shadow: none;
+		border: $select-border;
+		@if variable-exists(input-box-shadow) {
+			box-shadow: $input-box-shadow;
+		}
+	}
+
+	.dropdown-input {
+		border:			1px solid $select-color-border;
+		border-width:	0 0 1px 0;
+		display:		block;
+		padding:		$select-padding-y $select-padding-x;
+		box-shadow:		$select-shadow-input;
+		width:			100%;
+		background:		transparent;
+	}
+
+	&.focus .#{$select-ns}-dropdown .dropdown-input{
+		@if variable-exists(input-focus-border-color) {
+			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;
+			}
+
+		}
+
+	}
+
+	.items-placeholder{
+		border: 0 none !important;
+		box-shadow: none !important;
+		width: 100%;
+	}
+
+	&.has-items .items-placeholder,
+	&.dropdown-active .items-placeholder{
+		display: none !important;
+	}
+}

data/app/assets/stylesheets/spree/admin/plugins/plugins/input_autogrow.scss

@@ -0,0 +1,18 @@
+
+.#{$select-ns}-wrapper.plugin-input_autogrow{
+
+	&.has-items .#{$select-ns}-control > input {
+		min-width: 0;
+	}
+	
+	&.has-items.focus .#{$select-ns}-control > input {
+		flex: none;
+		min-width: 4px;
+
+		&::placeholder {
+			color:transparent;
+		}
+	}
+
+	
+}

data/app/assets/stylesheets/spree/admin/plugins/plugins/optgroup_columns.scss

@@ -0,0 +1,23 @@
+.#{$select-ns}-dropdown.plugin-optgroup_columns {
+
+	.ts-dropdown-content{
+		display:	flex;
+	}
+
+	.optgroup {
+		border-right: 1px solid #f2f2f2;
+		border-top: 0 none;
+	    flex-grow: 1;
+	    flex-basis: 0;
+		min-width: 0;
+	}
+	.optgroup:last-child {
+		border-right: 0 none;
+	}
+	.optgroup:before {
+		display: none;
+	}
+	.optgroup-header {
+		border-top: 0 none;
+	}
+}

data/app/assets/stylesheets/spree/admin/plugins/plugins/remove_button.scss

@@ -0,0 +1,44 @@
+.#{$select-ns}-wrapper.plugin-remove_button{
+
+	.item{
+		display:		inline-flex;
+		align-items:	center;
+		padding-right:	0 !important;
+	}
+
+	.item .remove {
+		color:				inherit;
+		text-decoration:	none;
+		vertical-align:		middle;
+		display:			inline-block;
+		padding:			0 $select-padding-item-x;
+		border-left:		1px solid $select-color-item-border;
+		border-radius:		0 2px 2px 0;
+		box-sizing:			border-box;
+		margin-left:		$select-padding-item-x;
+	}
+
+	.item .remove:hover {
+		background: rgba(0,0,0,0.05);
+	}
+
+	.item.active .remove {
+		border-left-color: $select-color-item-active-border;
+	}
+
+	&.disabled .item .remove:hover {
+		background: none;
+	}
+
+	&.disabled .item .remove {
+		border-left-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
+	}
+
+	.remove-single {
+		position: absolute;
+		right: 0;
+		top: 0;
+		font-size: 23px;
+	}
+
+}