♿ [#1604] Fix Label syntax and styles

maykinmedia · Jul 10, 2023 · 7d54509 · 7d54509
1 parent 3e26022
commit 7d54509
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html
@@ -6,11 +6,11 @@
             <span class="input-file">
             {{ field|addclass:"inputfile" }}
 
-            <label class="label__label" for="{{ field.auto_id }}">
-            {% icon icon="cloud_upload" icon_position="before" outlined=True %}
-                {{ text }}
+                <span class="label__label" for="{{ field.auto_id }}">
+                {% icon icon="cloud_upload" icon_position="before" outlined=True %}
+                    {{ text }}
 
-            </label>{% if field.field.required %}<span class="label__label--required"> * </span>{% endif %}
+                </span>{% if field.field.required %}<span class="label__label--required"> * </span>{% endif %}
             </span>
 
             {% if field.errors %}

diff --git a/src/open_inwoner/scss/components/Form/DocumentUpload.scss b/src/open_inwoner/scss/components/Form/DocumentUpload.scss
@@ -1,5 +1,6 @@
 #document-upload {
   gap: var(--spacing-tiny);
+  max-width: var(--mobile-xs-width);
 
   .button[type='submit']:disabled {
     background-color: var(--color-gray) !important;
@@ -17,10 +18,6 @@
     }
   }
 
-  input[type='text'] {
-    max-width: var(--mobile-xs-width);
-  }
-
   .inputfile-group {
     display: block;
 
@@ -130,7 +127,8 @@ input[type='file']::file-selector-button {
       z-index: 200;
     }
 
-    .inputfile + label {
+    .inputfile + .label,
+    .inputfile + .label__label {
       display: inline-block;
       position: absolute;
       top: 5px;
@@ -146,28 +144,36 @@ input[type='file']::file-selector-button {
       z-index: -1;
     }
 
-    .inputfile:focus + label,
-    .inputfile.has-focus + label,
-    .inputfile:hover + label,
-    .inputfile + label:hover {
+    .inputfile:focus + .label__label,
+    .inputfile.has-focus + .label__label,
+    .inputfile:hover + .label__label,
+    .inputfile + .label__label:hover,
+    .inputfile:focus + .label,
+    .inputfile.has-focus + .label,
+    .inputfile:hover + .label,
+    .inputfile + .label:hover {
       background-color: var(--color-primary-darker);
       top: 4px;
       transition: all 0.3s, background-color 0.3s;
     }
 
-    .inputfile + label *[class*='icons'] {
+    .inputfile + .label__label *[class*='icons'],
+    .inputfile + .label *[class*='icons'] {
       width: 1.3em;
       vertical-align: middle;
       color: white;
       margin-left: var(--spacing-medium);
     }
 
-    .inputfile + label {
+    .inputfile + .label__label {
       cursor: pointer; /* "hand" cursor */
     }
 
-    .inputfile:focus + label {
-      outline: 2px solid orange;
+    .inputfile:focus + .label,
+    .inputfile:focus-visible + .label,
+    .inputfile:focus + .label__label,
+    .inputfile:focus-visible + .label__label {
+      outline: var(--border-width) solid var(--color-secondary);
       outline: -webkit-focus-ring-color auto 5px;
     }
   }
@@ -199,7 +205,6 @@ input[type='file']::file-selector-button {
     justify-content: space-around;
     border: 1px solid lightgray;
     border-radius: 4px;
-    max-width: var(--mobile-xs-width);
     height: 80px;
     padding-top: var(--spacing-large);
     margin-bottom: 20px;