update: style for sib-form-file added

src/styles/base/form.scss

@@ -224,31 +224,54 @@ sib-form-date {
 }
 
 sib-form-file {
+  margin-top: 1.8rem;
+  
+  div {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: flex-end;
+  
+    input[type='text'] {
+      margin-bottom: 0.8rem;
+    }
 
-  label {
+    input[type='file'] {
+      height: 0.1px;
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      width: 0.1px;
+      z-index: -1;
+    }
+
+    label {
+      @extend .button,
+      .text-bold,
+      .text-uppercase,
+      .button-primary,
+      .bordered;
+      margin: auto 2.2rem;
+    }
+
+    input[type='file']:focus,
+    label:hover ~ input[type='file'] {
+      background-color: var(--color-secondary);
+    }
+
+    label ~ input[type='file']:focus {
+      outline: 1px dotted #000;
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+
+  /*label {
     align-items: baseline;
     clear: both;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     max-width: 100%;
-
+  }*/
-    div {
-      width: 100%;
-    }
-
-    input[type='text'] {
-      box-sizing: border-box;
-      flex: 0 0 50%;
-    }
-
-    input[type='file'] {
-      box-sizing: border-box;
-      flex: 0 0 20%;
-      color: var(--color-input-text);
-      cursor: pointer;
-      padding-left: 3rem;
-    }
   }
 }
 

src/views/admin/page-admin-projects-create.pug

@@ -38,9 +38,10 @@ div.content-box__info.flex
     class-captain='form-label is-light is-half-width'
     widget-captain='sib-form-auto-completion'
 
+    class='input-text-like'
     widget-logo="sib-form-file"
     label-logo="Télécharger un logo"
-    class-logo='form-label is-light select-add'
+    class-logo='select-add'
     upload-url-logo=`${endpoints.uploads || endpoints.post.uploads}`
 
     next='admin-project-list'