From 9f366bb2aa31ef56ec982b9015bbcae6b4eec4f9 Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Wed, 11 Sep 2024 10:02:49 +0200
Subject: [PATCH] [BUGFIX] Add missing disabled state for form-select
Resolves: #104893
Releases: main
Change-Id: I9cbee0ca23f33d58ad99cabf3f7511fc4620b0d0
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/86003
Tested-by: Benjamin Franzke <ben@bnf.dev>
Reviewed-by: Jochen Roth <rothjochen@gmail.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Jochen Roth <rothjochen@gmail.com>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: core-ci <typo3@b13.com>
---
Build/Sources/Sass/component/forms/_form-select.scss | 8 ++++++++
typo3/sysext/backend/Resources/Public/Css/backend.css | 1 +
2 files changed, 9 insertions(+)
diff --git a/Build/Sources/Sass/component/forms/_form-select.scss b/Build/Sources/Sass/component/forms/_form-select.scss
index 22ef2e04c27c..59650017c2c0 100644
--- a/Build/Sources/Sass/component/forms/_form-select.scss
+++ b/Build/Sources/Sass/component/forms/_form-select.scss
@@ -65,6 +65,14 @@
z-index: 3 !important;
}
+ &:disabled {
+ --typo3-form-select-color: color-mix(in srgb, var(--typo3-form-select-disabled-color), transparent calc((1 - var(--typo3-form-select-disabled-opacity)) * 100%));
+ --typo3-form-select-bg: var(--typo3-form-select-disabled-bg);
+ --typo3-form-select-border-color: var(--typo3-form-select-disabled-border-color);
+ pointer-events: none;
+ cursor: not-allowed;
+ }
+
&[multiple],
&[size]:not([size="1"]) {
min-height: 10rem;
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 1aa6f7e3bc1d..8d7db30b7a6e 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -2656,6 +2656,7 @@ typo3-backend-formengine-suggest-result-item .formengine-suggest-result-item-lab
.form-select{--typo3-form-select-border-radius:var(--typo3-input-border-radius);--typo3-form-select-font-size:var(--typo3-input-font-size);--typo3-form-select-line-height:var(--typo3-input-line-height);--typo3-form-select-padding-x:var(--typo3-input-padding-x);--typo3-form-select-padding-y:var(--typo3-input-padding-y);--typo3-form-select-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;--typo3-form-select-color:var(--typo3-input-color);--typo3-form-select-placeholder-color:var(--typo3-input-placeholder-color);--typo3-form-select-bg:var(--typo3-input-bg);--typo3-form-select-icon-size:16px;--typo3-form-select-border-width:var(--typo3-input-border-width);--typo3-form-select-border-color:var(--typo3-input-border-color);--typo3-form-select-hover-color:var(--typo3-input-hover-color);--typo3-form-select-hover-bg:var(--typo3-input-hover-bg);--typo3-form-select-hover-border-color:var(--typo3-input-hover-border-color);--typo3-form-select-focus-color:var(--typo3-input-focus-color);--typo3-form-select-focus-bg:var(--typo3-input-focus-bg);--typo3-form-select-focus-border-color:var(--typo3-input-focus-border-color);--typo3-form-select-disabled-color:var(--typo3-input-disabled-color);--typo3-form-select-disabled-bg:var(--typo3-input-disabled-bg);--typo3-form-select-disabled-border-color:var(--typo3-input-disabled-border-color);--typo3-form-select-disabled-opacity:var(--typo3-input-disabled-opacity);--typo3-form-select-min-height:calc(var(--typo3-form-select-padding-y) * 2 + var(--typo3-form-select-font-size) * var(--typo3-form-select-line-height) + var(--typo3-form-select-border-width) * 2);display:block;width:100%;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--typo3-form-select-padding-y) var(--typo3-form-select-padding-x);padding-inline-end:calc(var(--typo3-form-select-padding-x) * 2 + var(--typo3-form-select-icon-size));font-size:var(--typo3-form-select-font-size);font-weight:400;line-height:var(--typo3-form-select-line-height);color:var(--typo3-form-select-color);background-color:var(--typo3-form-select-bg);background-clip:padding-box;background-size:var(--typo3-form-select-icon-size);background-repeat:no-repeat;background-position:var(--typo3-position-end) var(--typo3-form-select-padding-x) top 50%;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='gray'%3e%3cpath d='m4.464 6.05-.707.707L8 11l4.243-4.243-.707-.707L8 9.586z'/%3e%3c/g%3e%3c/svg%3e");border:var(--typo3-form-select-border-width) solid var(--typo3-form-select-border-color);border-radius:var(--typo3-form-select-border-radius);transition:var(--typo3-form-select-transition);outline-offset:0;min-height:var(--typo3-form-select-min-height);min-width:120px;overflow-x:hidden;text-overflow:ellipsis}
.form-select:hover{--typo3-form-select-color:var(--typo3-form-select-hover-color);--typo3-form-select-bg:var(--typo3-form-select-hover-bg);--typo3-form-select-border-color:var(--typo3-form-select-hover-border-color);z-index:2!important}
.form-select:focus{--typo3-form-select-color:var(--typo3-form-select-focus-color);--typo3-form-select-bg:var(--typo3-form-select-focus-bg);--typo3-form-select-border-color:var(--typo3-form-select-focus-border-color);outline:.25rem solid color-mix(in srgb,var(--typo3-form-select-focus-border-color),transparent 25%);z-index:3!important}
+.form-select:disabled{--typo3-form-select-color:color-mix(in srgb, var(--typo3-form-select-disabled-color), transparent calc((1 - var(--typo3-form-select-disabled-opacity)) * 100%));--typo3-form-select-bg:var(--typo3-form-select-disabled-bg);--typo3-form-select-border-color:var(--typo3-form-select-disabled-border-color);pointer-events:none;cursor:not-allowed}
.form-select[multiple],.form-select[size]:not([size="1"]){min-height:10rem;padding:0;background-image:none;scrollbar-color:var(--typo3-text-color-secondary) transparent}
.form-select optgroup{line-height:1.5;padding-inline-start:var(--typo3-form-select-padding-y);margin-top:var(--typo3-form-select-padding-y)}
.form-select optgroup option:first-child{margin-top:var(--typo3-form-select-padding-y)}
--
GitLab