fix(styles): Add default styles for disabled input elements

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud · Feb 21, 2024 · ce9f39e · ce9f39e
1 parent fdf4234
commit ce9f39e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
@@ -26,6 +26,7 @@ input, textarea, select, button, div[contenteditable=true], div[contenteditable=
 }
 
 $default-height: 36px;
+$opacity-disabled: .7;
 
 /* Simple selector to allow easy overriding */
 select,
@@ -49,6 +50,17 @@ div[contenteditable=false] {
  * color-text-maxcontrast	disabled state
  */
 
+button:not(.button-vue),
+input:not([type='range']),
+textarea {
+	&:disabled {
+		cursor: default;
+		color: var(--color-text-maxcontrast);
+		border-color: var(--color-border-dark);
+		opacity: $opacity-disabled;
+	}
+}
+
 input:not([type="range"]) {
 	outline: none;
 }

diff --git a/core/css/variables.scss b/core/css/variables.scss
@@ -115,4 +115,3 @@ $header-menu-profile-item-height: 66px;
 
 // mobile. Keep in sync with core/js/js.js
 $breakpoint-mobile: 1024px;
-