Tables ok

src/page-admin-circles.pug

@@ -59,7 +59,9 @@
           next='admin-circle-create'
         ) Create a new circle
 
-      div.table-header
+      .table
+
+        div.table-header.grey-color
           div Name
           div Admins
           div Join

src/page-circle-edit.pug

@@ -78,7 +78,9 @@ div.content-box__info
     submit-button='Add a member'
   )
 
-  div.table-header
+  .table
+  
+    div.table-header.grey-color
       div Name
       div Access
       

src/styles/layout/circle/circle.scss

@@ -20,12 +20,9 @@
     }
   }
 
-
+  .table {
-
 
     .table-header {
-    background: $color-228-25-79;
-    color: white;
       display: flex;
       flex: 1;
       font-size: 1.6rem;
@@ -33,6 +30,11 @@
       justify-content: space-around;
       text-align: center;
 
+      &.grey-color {
+        background: $color-228-25-79;
+        color: white;
+      }
+
       >* {
         border-right: 1px solid white;
         flex: 1;
@@ -185,154 +187,5 @@
       display: flex;
       justify-content: center;
     }
-
-
-
-
-
-  /* Table grid display */
-  /*.table {
-    display: grid;
-
-    &.cols-2 {
-      grid-template-columns: repeat(2, 50%);
-    }
-
-    &.cols-3 {
-      grid-template-columns: repeat(3, 33.3333%);
-    }
-
-    *:not(.cell):not([name="buttons"]):not([class="table-header"]) { // <- Here, must be inversed
-      display: contents;
-    }
-
-    sib-set-default[name='buttons'],
-    .cell,
-    .table-header {
-      text-align: center;
-      word-wrap: break-word;
-    }
-  }*/
-
-  /* Table borders */
-  /*.table {
-    border-left: 1px solid $color-228-25-79;
-    border-top: 1px solid $color-228-25-79;
-
-    &.table-no-border-bottom .table-header {
-      border-bottom: 0;
-    }
-
-    sib-set-default[name='buttons'],
-    .cell {
-      border-right: 1px solid $color-228-25-79;
-      border-bottom: 1px solid $color-228-25-79;
-    }
-  }*/
-
-  /* Table styles inside */
-
-  /*.table {
-
-    .table-header {
-      background: $color-228-25-79;
-      border-right: 1px solid white;
-      color: white;
-      display: flex;
-      flex: 1;
-      font-size: 1.6rem;
-      font-weight: 600;
-      justify-content: space-around;
-      padding: 1rem;
-      text-align: center;
-
-      &:last-of-type {
-        border-right: 1px solid $color-228-25-79;
   }
 }
-
-    sib-display-value[name='name'] {
-      color: $color-233-18-29;
-      font-weight: 600;
-      padding-top: 2.5rem;
-    }
-
-    [name='members']>sib-display>div, 
-    [name='owner']>sib-display>div {
-      display: grid;
-      grid-column-gap: 1.6rem;
-      grid-template-columns: 7vh auto;
-      grid-template-rows: repeat(2, 5.2vh);
-      padding: 0 2.2rem;
-
-      >[name$='account.picture'] {
-        align-items: center;
-        align-self: center;
-        background-color: $color-213-20-91;
-        border-radius: 50%;
-        display: flex;
-        grid-column: 1 / span 1;
-        grid-row: 1 / span 2;
-        height: 7vh;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        width: 7vh;
-
-        img {
-          background-color: white;
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
-        }
-
-        object {
-          height: 45%;
-          width: 45%;
-        }
-      }
-
-      >[name='sup'] {
-        align-self: end;
-        display: flex;
-        grid-column: 2 / span 1;
-        grid-row: 1 / span 1;
-        margin-bottom: 0.50rem;
-
-        [name$='name'] {
-          color: #7A7F85;
-          font-weight: 600;
-          margin-right: 1rem;
-        }
-
-        sib-multiple>div {
-          display: flex;
-
-          [name='groups'] {
-            @extend %user-role;
-          }
-        }
-      }
-
-      >[name='sub'] {
-        align-self: start;
-        grid-column: 2 / span 1;
-        grid-row: 2 / span 1;
-        margin-top: 0.50rem;
-
-        >[name$='username']:not(:empty) {
-          align-items: center;
-          display: flex;
-
-          &::before {
-            content: '@';
-
-          }
-        }
-      }
-    }
-  }*/
-}