fix: fine-tune input components disabled styles

City-of-Helsinki · May 21, 2024 · de8d86a · de8d86a
1 parent 62e2bdd
commit de8d86a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/common/components/textEditor/ckeditor.scss b/src/common/components/textEditor/ckeditor.scss
@@ -1,19 +1,28 @@
 .text-editor {
+  .ck-button.ck-disabled {
+    cursor: not-allowed;
+  }
+
   .ck.ck-editor__main > .ck-editor__editable {
     border: var(--text-editor-border-width) solid
       var(--text-editor-border-color);
     padding: 0 var(--spacing-s);
     min-height: var(--text-editor-editor-min-height);
     max-height: var(--text-editor-editor-max-height);
     font-size: var(--fontsize-body-l);
-  
+
     &.ck-focused {
       box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color);
       transform: translateZ(0);
       transition: 85ms ease-out;
       transition-property: box-shadow, transform;
     }
-
+
+    &.ck-read-only {
+      background-color: var(--input-background-disabled);
+      cursor: not-allowed;
+    }
+
     h1,
     h2,
     h3,
@@ -49,7 +58,8 @@
         margin: var(--spacing-3-xs) 0;
       }
     }
-    ol, ul {
+    ol,
+    ul {
       padding: 0 var(--spacing-s);
     }
 
@@ -58,12 +68,10 @@
       padding-left: 5px;
     }
   }
-  
+
   &.invalid {
     .ck.ck-editor__main > .ck-editor__editable {
       border-color: var(--color-error);
     }
   }
 }
-
-
diff --git a/src/common/components/timeInput/customTimeInput.module.scss b/src/common/components/timeInput/customTimeInput.module.scss
@@ -6,9 +6,9 @@
   padding: 0 calc(var(--spacing-s) - 3px);
 
   &.disabled {
-    background-color: var(--input-background-disabled);
-    border-color: var(--input-border-color-disabled);
-    color: var(--input-color-disabled);
+    background-color: var(--input-background-disabled) !important;
+    border-color: var(--input-border-color-disabled) !important;
+    color: var(--input-color-disabled) !important;
     cursor: not-allowed;
 
     &:hover {