wip table

src/page-circle-edit.pug

@@ -30,12 +30,13 @@
   
   h3 List of members
 
+  div.table
+    div.cell.un Name
+    div.cell.deux Status
+    
   sib-display(
     bind-resources
-
     fields='team'
-
     multiple-team=''
-
     widget-team='circle-team-template'
   )

src/styles/abstracts/_variables.scss

@@ -10,6 +10,7 @@ $color-210-25-95: hsl(210, 25%, 95%);
 $color-222-57-95: hsl(222, 57%, 95%);
 $color-213-20-91: hsl(213, 20%, 91%);
 $color-221-51-90: hsl(221, 51%, 90%);
+$color-228-25-79: hsl(228, 25%, 79%);
 $color-0-0-85: hsl(0, 0%, 85%);
 $color-229-25-79: hsl(229, 25%, 79%);
 $color-215-9-73: hsl(215, 9%, 73%);

src/styles/layout/circle-profile/_index.scss

@@ -1 +1,2 @@
 @import 'circle-profile';
+@import 'circle-edit';

src/styles/layout/circle-profile/circle-edit.scss

@@ -0,0 +1,79 @@
+/*.table {
+  display: table;
+  width: 100%;
+  
+  .row.header {
+    display: table-row;
+    
+    .cell {
+      display: table-cell;
+
+      &.un {
+        background: pink;
+      }
+
+      &.deux {
+        background: paleturquoise;
+      }
+    }
+  }
+}
+
+[widget='circle-team-template'] {
+
+  >div {
+    display: table;
+    width: 100%;
+
+    >circle-team-template {
+      display: table-row;
+
+      >* {
+        border-bottom: 1px solid $color-228-25-79;
+        border-left: 1px solid $color-228-25-79;
+      }
+
+      >sib-display {
+        display: table-cell;
+
+        div {
+          display: flex;
+          background: bisque;
+        }
+      }
+
+      sib-delete {
+        border-right: 1px solid $color-228-25-79;
+        display: table-cell;
+      }
+    }
+  }
+}*/
+
+.table {
+  display: flex;
+  justify-content: space-around;
+  background: pink;
+
+  >*{
+    flex: 1;
+    width: 50%;
+    padding: 1rem;
+    border-right: 1px solid $color-228-25-79;
+    border-bottom: 1px solid $color-228-25-79;
+  }
+}
+
+circle-team-template {
+  display: flex;
+  justify-content: space-between;
+  background: paleturquoise;
+
+  >* {
+    flex: 1;
+    width: 50%;
+    padding: 1rem;
+    border-right: 1px solid $color-228-25-79;
+    border-bottom: 1px solid $color-228-25-79;
+  }
+}