From 7ecc3118933b907b566c1ceff7118fed3554bd59 Mon Sep 17 00:00:00 2001
From: Benoit Alessandroni <benoit@happy-dev.fr>
Date: Mon, 12 Oct 2020 19:38:01 +0200
Subject: [PATCH] fix previous

---
 src/styles/base/main.scss | 318 +++++++++++++++++++-------------------
 1 file changed, 155 insertions(+), 163 deletions(-)

diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 07b0ab8..8daeb97 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -3,18 +3,18 @@
 }
 
 :root {
-  font-size                : 10px;
-  font-family              : Open Sans, sans-serif;
+  font-size: 10px;
+  font-family: Open Sans, sans-serif;
   --sib-notifications-theme: var(--color-primary);
 
   body {
     background-color: var(--color-main-background);
-    box-sizing      : border-box;
-    color           : var(--color-main-text);
-    font-size       : 1.6rem;
+    box-sizing: border-box;
+    color: var(--color-main-text);
+    font-size: 1.6rem;
     /* Fix for viewport height bug in webkit for mobile */
-    height          : -webkit-fill-available;
-    min-height      : -webkit-fill-available;
+    height: -webkit-fill-available;
+    min-height: -webkit-fill-available;
   }
 
   .notLoggedIn {
@@ -22,9 +22,7 @@
   }
 }
 
-
 /* Fix for solid-dashboard fixture */
-
 solid-dashboard section {
   padding: 1rem !important;
 
@@ -38,12 +36,16 @@ solid-dashboard section {
 }
 
 .wrapper {
-  display            : grid;
-  grid-template-areas: "header""content";
+  display: grid;
+  grid-template-areas: 
+    "header"
+    "content";
 
   @include breakpoint(lg) {
     grid-template-columns: 265px auto;
-    grid-template-areas  : "header header""leftmenu content";
+    grid-template-areas:
+      "header header"
+      "leftmenu content";
   }
 }
 
@@ -55,12 +57,11 @@ solid-dashboard section {
   grid-area: leftmenu;
 
   @include breakpoint(lg) {
-    height    : calc(100vh - 83px);
-    /* 83px = nav height */
-    position  : sticky;
-    top       : 0;
+    height: calc(100vh - 83px); /* 83px = nav height */
+    position: sticky;
+    top: 0;
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: scroll;
   }
 
   &.jsLeftMenu {
@@ -72,14 +73,14 @@ solid-dashboard section {
   }
 
   &.jsLeftMenu[open] {
-    display   : block;
-    bottom    : 0;
+    display: block;
+    bottom: 0;
     box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
-    width     : 80vw;
-    position  : fixed;
-    right     : 0;
-    top       : 0;
-    z-index   : 1000;
+    width: 80vw;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1000;
 
     @include breakpoint(lg) {
       display: none;
@@ -91,29 +92,25 @@ solid-dashboard section {
   grid-area: content;
 
   @include breakpoint(lg) {
-    position  : sticky;
-    top       : 0;
+    position: sticky;
+    top: 0;
     overflow-y: auto;
-    height    : calc(100vh - 83px);
+    height: calc(100vh - 83px);
     overflow-x: hidden;
   }
 }
 
 
-/* Add scrollbar to the left and right menu, and to the content */
 
-nav,
-.views-container,
-.table-wrapper {
-  overflow                  : auto;
-  height                    : auto;
+/* Add scrollbar to the left and right menu, and to the content */
+nav, .views-container, .table-wrapper {
+  overflow: auto;
+  height: auto;
   -webkit-overflow-scrolling: touch;
-  -ms-overflow-style        : none;
+  -ms-overflow-style: none;
 }
 
-
 /* Custom scrollbar of the left-menu */
-
 nav {
   scrollbar-width: thin;
   scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
@@ -124,8 +121,8 @@ nav {
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--color-scrollbar-left-track);
-    border-radius   : 6px;
-    border          : 3px solid var(--color-scrollbar-left-background);
+    border-radius: 6px;
+    border: 3px solid var(--color-scrollbar-left-background);
   }
 
   &::-webkit-scrollbar {
@@ -133,9 +130,7 @@ nav {
   }
 }
 
-
 /* Custom scrollbar of the content */
-
 .views-container {
   scrollbar-width: thin;
   scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
@@ -146,8 +141,8 @@ nav {
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--color-scrollbar-right-track);
-    border-radius   : 6px;
-    border          : 3px solid var(--color-scrollbar-right-background);
+    border-radius: 6px;
+    border: 3px solid var(--color-scrollbar-right-background);
   }
 
   &::-webkit-scrollbar {
@@ -155,16 +150,14 @@ nav {
   }
 }
 
-
 /* Custom scrollbar of the table */
-
 .table-wrapper {
   scrollbar-width: thin;
   scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background);
 
   &::-webkit-scrollbar-track {
     background-color: var(--color-scrollbar-table-background);
-    border-radius   : 10px;
+    border-radius: 10px;
   }
 
   &::-webkit-scrollbar {
@@ -173,13 +166,11 @@ nav {
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--color-scrollbar-table-track);
-    border-radius   : 10px;
+    border-radius: 10px;
   }
 }
 
-
 /* Quick fix. Will be removed later */
-
 #admin-circles,
 #admin-projects,
 #admin-users {
@@ -193,7 +184,7 @@ nav {
 
 img {
   max-height: 100%;
-  max-width : 100%;
+  max-width: 100%;
 }
 
 h1,
@@ -204,21 +195,21 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight   : bold;
+  font-weight: bold;
+
   /*span {
-    font-weight : 400;
+    font-weight: 400;
     padding-left: 0.85rem;
 
-    &           :before {
-      content   : '// ';
+    &:before {
+      content: '// ';
     }
   }*/
 }
 
-h1,
-.h1-like {
-  color         : var(--color-h1);
-  font-size     : 2rem;
+h1, .h1-like {
+  color: var(--color-h1);
+  font-size: 2rem;
   text-transform: uppercase;
 
   &.without-margin {
@@ -226,23 +217,22 @@ h1,
   }
 }
 
-h2,
-.h2-like {
-  color         : var(--color-h2);
-  font-size     : 1.8rem;
+h2, .h2-like {
+  color: var(--color-h2);
+  font-size: 1.8rem;
   text-transform: uppercase;
 }
 
 .h2-like {
   display: block;
-  margin : 14.94px 0;
-  width  : 100%;
+  margin: 14.94px 0;
+  width: 100%;
 }
 
 h3 {
-  color    : var(--color-title);
+  color: var(--color-title);
   font-size: 1.7rem;
-  margin   : 0;
+  margin: 0;
 }
 
 h4 {
@@ -254,45 +244,45 @@ h5 {
 }
 
 .avatar {
-  align-items     : center;
+  align-items: center;
   background-color: var(--color-avatar-background);
-  border-radius   : 50%;
-  display         : flex;
-  justify-content : center;
-  overflow        : hidden;
-  position        : relative;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
 
   img {
     background-color: white;
-    height          : 100%;
-    left            : 0;
-    object-fit      : cover;
-    object-position : center;
-    position        : absolute;
-    top             : 0;
-    width           : 100%;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    object-position: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
   }
 
   object {
     height: 45%;
-    width : 45%;
+    width: 45%;
   }
 }
 
 .customer-logo {
-  box-sizing     : border-box;
-  display        : flex;
-  height         : 8.5vh;
+  box-sizing: border-box;
+  display: flex;
+  height: 8.5vh;
   justify-content: flex-end;
-  margin-top     : 20px;
-  text-align     : end;
-  width          : 15vw;
+  margin-top: 20px;
+  text-align: end;
+  width: 15vw;
 }
 
 .project-edit-logo {
-  display      : flex;
-  height       : 8.5vh;
-  margin-top   : 20px;
+  display: flex;
+  height: 8.5vh;
+  margin-top: 20px;
   margin-bottom: 30px;
 
   form {
@@ -316,31 +306,31 @@ h5 {
 .form-picture {
 
   form {
-    display      : block;
-    text-align   : center;
+    display: block;
+    text-align: center;
     margin-bottom: 2.6rem;
-    padding-top  : 1.8rem;
+    padding-top: 1.8rem;
 
     @include breakpoint(lg) {
       display: flex;
-      width  : 100%;
+      width: 100%;
     }
 
     hubl-user-avatar {
-      display   : inline-block;
-      max-width : 100%;
+      display: inline-block;
+      max-width: 100%;
       max-height: 16.5vh;
 
       @include breakpoint(lg) {
         margin-left: 20px;
-        max-height : 8.5vh;
-        max-width  : none;
-        width      : calc(35vw - 20px);
+        max-height: 8.5vh;
+        max-width: none;
+        width: calc(35vw - 20px);
       }
 
       >object,
       >img {
-        display   : block;
+        display: block;
         max-height: 16.5vh !important;
 
         @include breakpoint(lg) {
@@ -356,11 +346,11 @@ h5 {
       .button-primary,
       .bordered;
       margin: 10px 0;
-      width : 100%;
+      width: 100%;
 
       @include breakpoint(lg) {
         margin: auto 0 auto 2.2rem;
-        width : auto;
+        width: auto;
       }
     }
   }
@@ -397,40 +387,38 @@ h5 {
 .content-box {
   @include window-style-modal();
   flex-direction: column;
-  flex-grow     : 1;
-  margin        : 2rem 1rem 5rem 2rem;
+  flex-grow: 1;
+  margin: 2rem 1rem 5rem 2rem;
 
   &.full-width {
     background: var(--color-white);
-    flex      : 1;
-    font-size : 1.6rem;
-    margin    : 0 auto;
+    flex: 1;
+    font-size: 1.6rem;
+    margin: 0 auto;
     min-height: 100%;
   }
 }
 
-
 /* Header inside circle, project view  */
-
 .content-box__header {
   border-bottom: 1px solid var(--color-content-header);
-  padding      : 1.8rem 0 1.4rem;
-  margin       : 0 1.6rem;
+  padding: 1.8rem 0 1.4rem;
+  margin: 0 1.6rem;
 
   @include breakpoint(lg) {
-    padding: 3rem;
-    margin : 0;
+  padding: 3rem;
+  margin: 0;
   }
 
   .mobile-sidebar-button {
-    float      : right;
-    color      : var(--color-secondary);
-    font-size  : 1.8rem;
-    font-weight: bold !important;
+    float: right;
+    color: var(--color-secondary);
+    font-size: 1.8rem;
+    font-weight: bold!important;
 
     &::before {
-      font-size   : 2.2rem;
-      font-weight : normal;
+      font-size: 2.2rem;
+      font-weight: normal;
       margin-right: 1.2rem;
     }
 
@@ -447,32 +435,32 @@ h5 {
 
   /* For solid-display on project, circle, or private message view */
   solid-display {
-    width: calc(100% - 94px);
+    width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */
 
-    /* 94px = width of .mobile-sidebar-button */
     div {
-      overflow     : hidden;
+      overflow: hidden;
       text-overflow: ellipsis;
-      white-space  : nowrap;
-      width        : calc(100% - 20px);
-
+      white-space: nowrap;
+      width: calc(100% - 20px);
+      
       .h1-aside {
         font-size: 1.8rem;
 
         &:not(:empty)::before {
-          color      : var(--color-grey-4);
-          content    : ' - ';
-          font-size  : 2rem;
+          color: var(--color-grey-4);
+          content: ' - ';
+          font-size: 2rem;
           font-weight: bold;
         }
       }
 
       .description {
         color: var(--color-grey-4);
+
       }
 
       .name {
-        color      : var(--color-grey-4);
+        color: var(--color-grey-4);
         font-weight: normal;
       }
     }
@@ -480,9 +468,8 @@ h5 {
 }
 
 .content-box__height {
-  min-height: calc(100vh - 50px - 56px);
+  min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
 
-  /* Heights of main header and sub-header */
   @include breakpoint(lg) {
     min-height: calc(100vh - 83px - 84px);
   }
@@ -490,7 +477,7 @@ h5 {
 
 .content-box__info {
   flex-direction: column;
-  padding       : 1rem;
+  padding: 1rem;
 
   @include breakpoint(lg) {
     padding: 3.2rem;
@@ -501,7 +488,6 @@ h5 {
   }
 }
 
-
 /*.modal {
   color: var(--color-white);
   margin: 75px;
@@ -528,22 +514,22 @@ h5 {
 .admin-header {
   /* Quick fix for alignment on mobile before admin content rework */
   flex-direction: column;
-  align-items   : flex-start;
-  margin-bottom : 20px;
-
+  align-items: flex-start;
+  margin-bottom: 20px;
   /*end */
+
   @include breakpoint(lg) {
-    flex-direction : row;
-    align-items    : center;
+    flex-direction: row;
+    align-items: center;
     justify-content: space-between;
-    margin-bottom  : 5rem;
+    margin-bottom: 5rem;
   }
 
   h3 {
     /* Quick fix for alignment on mobile before admin content rework */
     margin-bottom: 20px;
-
     /* end */
+
     @include breakpoint(lg) {
       margin-top: 0;
     }
@@ -561,19 +547,19 @@ h5 {
 
 .backlink {
   @include icon('arrow-left-circle');
-  color          : var(--color-backlink);
-  font-size      : 1.5rem;
-  margin         : 2rem 0 0 2rem;
+  color: var(--color-backlink);
+  font-size: 1.5rem;
+  margin: 2rem 0 0 2rem;
   text-decoration: underline;
 
   &::before {
-    font-size      : 2rem;
-    margin-right   : 1rem;
+    font-size: 2rem;
+    margin-right: 1rem;
     text-decoration: none;
   }
 
   &.right {
-    display   : block;
+    display: block;
     text-align: right;
   }
 }
@@ -594,7 +580,7 @@ h5 {
   display: block;
 
   @include breakpoint(lg) {
-    display        : flex;
+    display: flex;
     justify-content: flex-end;
   }
 }
@@ -647,13 +633,13 @@ input[type='submit'],
 a,
 .button {
   background: none;
-  border    : none;
-  cursor    : pointer;
-  display   : inline-block;
-  padding   : 0;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0;
 
   &.button {
-    padding      : 0.55rem 2.5rem;
+    padding: 0.55rem 2.5rem;
     border-radius: 100em;
 
     *,
@@ -663,14 +649,14 @@ a,
 
     &.mobile-full-width {
       margin-bottom: 1rem;
-      padding-left : 5rem;
-      width        : -webkit-fill-available;
-      width        : -moz-available;
+      padding-left: 5rem;
+      width: -webkit-fill-available;
+      width: -moz-available;
 
       @include breakpoint(lg) {
         margin-bottom: 0;
-        padding-left : 2.5rem;
-        width        : auto;
+        padding-left: 2.5rem;
+        width: auto;
       }
 
       &::before {
@@ -716,8 +702,14 @@ a,
 
     &.rounded {
       border-radius: 50%;
-      font-size    : 1.8rem;
-      padding      : 1rem;
+      font-size: 1.8rem;
+      padding: 1rem;
+      height: 42px;
+      width: 42px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto;
     }
 
     &.button-link {
@@ -734,11 +726,11 @@ a,
     }
 
     &.with-icon::before {
-      font-size   : 1.6rem;
+      font-size: 1.6rem;
       margin-right: 1rem;
     }
 
-    &.button-primary {
+    &.button-primary{
       background-color: var(--color-white);
 
       *,
@@ -783,7 +775,7 @@ a,
     }
 
     &.button-complementary {
-      color           : var(--color-complementary);
+      color: var(--color-complementary);
       background-color: var(--color-white);
 
       &.bordered {
@@ -792,7 +784,7 @@ a,
 
       &:hover {
         background-color: var(--color-complementary);
-        color           : var(--color-white);
+        color: var(--color-white);
       }
     }
 
@@ -811,7 +803,7 @@ a,
 
         &:hover {
           background-color: var(--color-white);
-          color           : var(--color-primary);
+          color: var(--color-primary);
 
           *,
           & {
@@ -869,4 +861,4 @@ a,
       }
     }
   }
-}
\ No newline at end of file
+}