Fix disabled css selector Closes #1042 (#1076)

* Fix disabled css selector Closes #1042

* Run prettier

assets/styles/components.scss

@@ -778,7 +778,7 @@
   }
 
   &:disabled,
-  &[disabled] {
+  &[disabled='true'] {
     cursor: not-allowed;
     filter: grayscale(50%);
     opacity: 0.5;
@@ -816,7 +816,7 @@ tr.button-transparent {
   }
 
   &:disabled > *,
-  &[disabled] > * {
+  &[disabled='true'] > * {
     cursor: not-allowed;
     filter: grayscale(50%);
     opacity: 0.5;
@@ -849,7 +849,7 @@ tr.button-transparent {
     box-shadow: none;
 
     &disabled,
-    &[disabled] {
+    &[disabled='true'] {
       cursor: not-allowed;
       box-shadow: none;
     }

assets/styles/global.scss

@@ -399,7 +399,7 @@ textarea {
   }
 
   &:disabled,
-  &[disabled] {
+  &[disabled='true'] {
     opacity: 0.6;
     pointer-events: none;
     cursor: not-allowed;

components/ui/FileInput.vue

@@ -1,8 +1,19 @@
 <template>
-  <label :class="{ 'long-style': longStyle }" @drop.prevent="handleDrop" @dragover.prevent>
+  <label
+    :class="{ 'long-style': longStyle }"
+    :disabled="disabled"
+    @drop.prevent="handleDrop"
+    @dragover.prevent
+  >
     <slot />
     {{ prompt }}
-    <input type="file" :multiple="multiple" :accept="accept" @change="handleChange" />
+    <input
+      type="file"
+      :multiple="multiple"
+      :accept="accept"
+      :disabled="disabled"
+      @change="handleChange"
+    />
   </label>
 </template>
 
@@ -43,6 +54,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['change'],
   data() {