feature: profile edition added

- new page created
- new route added
- some styles are reworked
- new styles added

src/styles/base/form.scss

@@ -1,7 +1,7 @@
 .content-box {
 
   &.with-form {
-    
+
     hd-template-project-title {
       border-bottom: 1px solid $color-221-51-90;
       color: $color-233-18-29;
@@ -11,7 +11,6 @@
     }
 
     sib-form {
-      border-bottom: 1px solid $color-210-17-91;
       padding-bottom: 2.55rem;
     }
 
@@ -66,7 +65,7 @@
       }
     }
 
-    input[type="submit"] {
+    input[type='submit'] {
       background-color: $color-233-18-29;
       border: none;
       border-radius: 100em;
@@ -82,6 +81,7 @@
     /* CLASSES Peut-être à sortir de .content-box */
 
     .form-label {
+      flex: 1 1 auto;
       font-weight: 600;
 
       &.is-dark label {
@@ -133,6 +133,7 @@
     }
 
     sib-multiple-select {
+
       sib-form-auto-completion > label {
         display: flex;
         flex-direction: column;
@@ -199,7 +200,7 @@
       }
     }
 
-    /*
+  /*
     input {
       -webkit-appearance: none;
       align-items: center;
@@ -352,7 +353,7 @@
     }
   */
     /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
-    /*
+  /*
     sib-form-multiple-dropdown {
 
       button {

src/styles/base/header.scss

@@ -106,11 +106,11 @@ details {
 
 details#user-controls {
 
-  // summary:focus {
-  //   background-color: $color-233-18-29;
-  //   color: $color-0-0-100;
-  //   outline: none;
-  // }
+  summary:focus {
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
+    outline: none;
+  }
 
   #user-controls__profile {
     div {
@@ -131,7 +131,7 @@ details#user-controls {
       }
 
       sib-display-value[name='first_name'] {
-        // @include icon('arrow-down');
+        @include icon('arrow-down');
         align-items: center;
         display: flex;
         flex-direction: row-reverse;
@@ -169,9 +169,9 @@ details#user-controls {
           margin-right: 0;
           padding: 1.6rem 1.3rem;
 
-          a {
+          sib-link {
             color: $color-213-4-50;
-            text-decoration: none;
+            display: block;
           }
         }
       }
@@ -185,23 +185,23 @@ details#user-controls {
     }
   }
 
-  // &[open] {
-  //   background-color: $color-233-18-29;
-  //   color: $color-0-0-100;
+  &[open] {
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
 
-  //   #user-controls__profile {
+    #user-controls__profile {
 
-  //     div {
+      div {
 
-  //       sib-display-value[name='first_name'] {
-  //         @include icon('close');
+        sib-display-value[name='first_name'] {
+          @include icon('close');
 
-  //         &::before {
-  //           margin-left: 1.5rem;
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
+          &::before {
+            margin-left: 1.5rem;
+          }
+        }
+      }
+    }
+  }
 }
 

src/styles/base/main.scss

@@ -63,7 +63,7 @@ h6 {
 }
 
 h1 {
-  font-size: 2.1rem;
+  font-size: 2rem;
 }
 
 h2 {
@@ -107,7 +107,6 @@ a {
 
 .content-box {
   @include window-style-modal();
-  @extend %padding-main;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -120,6 +119,10 @@ a {
     margin: 0 auto;
     min-height: calc(100vh - 84px);
   }
+
+  &.with-padding {
+    @extend %padding-main;
+  }
 }
 
 .drive {
@@ -144,6 +147,24 @@ a {
   }
 }
 
+.name {
+  color: $color-216-4-22;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.username {
+
+  &::before {
+    content: '@';
+  }
+}
+
+.section {
+  border-bottom: 1px solid $color-221-51-90;
+  padding: 4.5rem;
+}
+
 // Compatibility layer for non-updated components
 @import 'compat';
 // Other base components