>>> BEGIN rc0.x

src/Gargantext/Components/Nodes/Annuaire/User/Contact.purs

@@ -137,7 +137,7 @@ contactFormCpt = here.component "form" cpt where
                 }
               ]
             ]
-          , 
+          ,
             H.div
             { className: "form-group" }
             [
@@ -177,7 +177,7 @@ contactFormCpt = here.component "form" cpt where
                 }
               ]
             ]
-          , 
+          ,
             H.div
             { className: "form-group" }
             [
@@ -321,7 +321,7 @@ contactFormCpt = here.component "form" cpt where
         ]
       ,
         B.wad
-        [ "align-self-start", "ml-3" ]
+        [ "align-self-flex-start", "ml-3" ]
         [
           B.caveat
           {}

src/Gargantext/Components/Renameable.purs

@@ -170,8 +170,8 @@ editingCpt = here.component "editing" cpt where
         T.write_ false isEditing
         onRename text
 
-      onReset _ = do
-        T.write_ false isEditing
+      -- onReset _ = do
+      --   T.write_ false isEditing
 
     -- | Render
     -- |

src/sass/_legacy/_list.sass

@@ -160,18 +160,18 @@
     margin-left: 13px
 
 ////////////////////////////////////////////////////////
-$renameable-icon-margin: space-x(0.5)
-$renameable-button-margin: space-x(2)
-// @XXX Glyphicon icons lack of homogeneous width
-$renameable-icon-width: 16px
 
 .table-header-rename
   margin-bottom: space-x(1)
 
-  &__header
+  &__title
     display: flex
     align-items: center
 
+    &__text
+      font-size: $h3-font-size
+      font-family: $headings-font-family
+
     &__line
       // (?) This is a peculiar line directly coming from the legacy style
       //     It originaly was a solid 2px black one, that added to much
@@ -188,33 +188,31 @@ $renameable-icon-width: 16px
       height: 0
       flex-grow: 1
       margin-left: space-x(4)
+      margin-right: space-x(4)
 
   &__cache-toolbar
     width: $topbar-fixed-button-width
     margin-left: $topbar-item-margin
     margin-right: $topbar-item-margin
 
-  &__calendar
 
-    &__icon
-      margin-right: $renameable-icon-margin
-      width: $renameable-icon-width
+.table-header-rename-edition
+  margin-top: space-x(1)
+  padding: $card-spacer-y $card-spacer-y
 
-  .renameable-wrapper--emphase
-    .renameable-container__text
-      font-size: $h3-font-size
-      font-family: $headings-font-family
+  .form-group
+    display: flex
+    align-items: baseline
+    margin-bottom: space-x(0.75)
 
-.renameable-container
-  display: flex
-  align-items: baseline
-  margin-bottom: space-x(0.75)
+    // remove "bootstrap" not-needed-here rule
+    flex-wrap: initial
 
-  &__icon
-    margin-right: $renameable-icon-margin
+  .form-group__label .b-icon
+    // @XXX Glyphicon icons lack of homogeneous width
+    $icon-width: 16px
+
+    margin-right: space-x(1)
+    width: $icon-width
     font-size: 14px
-    width: $renameable-icon-width
     text-align: center
-
-  &__button
-    margin-left: $renameable-button-margin

src/sass/base/_bootstrap.scss

@@ -4,3 +4,8 @@
 .table {
   border-collapse: collapse;
 }
+
+// remove side-effect's z-index
+.input-group-prepend .btn, .input-group-append .btn {
+  z-index: initial;
+}

src/sass/base/_utilities.scss

@@ -31,7 +31,8 @@
   }
 
   .w-0        { width: 0;           }
-  .w-fluid    { width: 100%;        }
+  .w-fluid,
+  .w-100      { width: 100%;        }
 
   .w-1\/2	    { width: 50%;         }
   .w-1\/3	    { width: 33.333333%;  }
@@ -137,8 +138,19 @@
     .position-#{$value} { position: $value; }
   }
 
-  /// Overflow
-  $overflows: auto, hidden !default;
+  /// Placement
+  $placements:
+    top,
+    right,
+    bottom,
+    left;
+
+  @each $value in $placements {
+    .#{$value}-0 { #{$value}: 0; }
+  }
+
+  // Overflow
+  $overflows: auto, hidden;
 
   @each $value in $overflows {
     .overflow-#{$value} { overflow: $value; }
@@ -181,31 +193,33 @@
     .line-height-#{$unit + 0} { line-height: #{$unit * + 0}; }
   }
 
-  /// Align
-  .align-baseline    { vertical-align: baseline;    }
-  .align-top         { vertical-align: top;         }
-  .align-middle      { vertical-align: middle;      }
-  .align-bottom      { vertical-align: bottom;      }
-  .align-text-bottom { vertical-align: text-bottom; }
-  .align-text-top    { vertical-align: text-top;    }
+  /// Vertical Alignment
+  $vertical-aligns:
+    baseline,
+    top,
+    middle,
+    bottom,
+    text-bottom,
+    text-top;
+
+  @each $value in $vertical-aligns {
+    .vertical-align-#{$value} { vertical-align: $value; }
+  }
 
   /// Color (keep ".text" classes for Bootstrap legacy)
-  .text-white,
-  .color-white { color: $white; }
-  .text-black,
-  .color-black { color: $black; }
+  .text-white, .color-white { color: $white; }
+  .text-black, .color-black { color: $black; }
 
   @each $theme, $value in $palette-semantic {
-    .text-#{$theme},
-    .color-#{$theme} { color: $value; }
+    .text-#{$theme}, .color-#{$theme} { color: $value; }
   }
 
   @each $theme, $value in $palette-gray {
-    .color-gray-#{$theme} { color: $value; }
+    .text-gray-#{$theme}, .color-gray-#{$theme} { color: $value; }
   }
 
   @each $theme, $value in $palette-pastel {
-    .color-pastel-#{$theme} { color: $value; }
+    .text-pastel-#{$theme}, .color-pastel-#{$theme} { color: $value; }
   }
 
   /// Background
@@ -214,7 +228,14 @@
   .bg-transparent    { background-color: transparent; }
 
   @each $theme, $value in $palette-semantic {
-    .bg-#{$theme} { background-color: $value;}
+    .bg-#{$theme} { background-color: $value; }
+  }
+
+  @each $theme, $value in $palette-gray {
+    .bg-gray-#{$theme} { background-color: $value; }
+  }
+  @each $theme, $value in $palette-pastel {
+    .bg-pastel-#{$theme} { background-color: $value; }
   }
 
   /// Border
@@ -228,6 +249,13 @@
     .border-#{$theme} { border-color: $value;}
   }
 
+  @each $theme, $value in $palette-gray {
+    .border-gray-#{$theme} { border-color: $value;}
+  }
+  @each $theme, $value in $palette-pastel {
+    .border-pastel-#{$theme} { border-color: $value;}
+  }
+
   /// Border radius
   .rounded-circle   { border-radius: 50%; }
   .rounded-0        { border-radius: 0;   }
@@ -250,31 +278,45 @@
   .flex-shrink-0     { flex-shrink: 0;          }
   .flex-shrink-1     { flex-shrink: 1;          }
 
-  .justify-content-start   { justify-content: flex-start;     }
-  .justify-content-end     { justify-content: flex-end;       }
-  .justify-content-center  { justify-content: center;         }
-  .justify-content-between { justify-content: space-between;  }
-  .justify-content-around  { justify-content: space-around;   }
-
-  .align-items-start    { align-items: flex-start;  }
-  .align-items-end      { align-items: flex-end;    }
-  .align-items-center   { align-items: center;      }
-  .align-items-baseline { align-items: baseline;    }
-  .align-items-stretch  { align-items: stretch;     }
-
-  .align-content-start   { align-content: flex-start;     }
-  .align-content-end     { align-content: flex-end;       }
-  .align-content-center  { align-content: center;         }
-  .align-content-between { align-content: space-between;  }
-  .align-content-around  { align-content: space-around;   }
-  .align-content-stretch { align-content: stretch;        }
-
-  .align-self-auto     { align-self: auto;        }
-  .align-self-start    { align-self: flex-start;  }
-  .align-self-end      { align-self: flex-end;    }
-  .align-self-center   { align-self: center;      }
-  .align-self-baseline { align-self: baseline;    }
-  .align-self-stretch  { align-self: stretch;     }
+  .justify-content-start          { justify-content: start;           }
+  .justify-content-end            { justify-content: end;             }
+  .justify-content-flex-start     { justify-content: flex-start;      }
+  .justify-content-flex-end       { justify-content: flex-end;        }
+  .justify-content-center         { justify-content: center;          }
+  .justify-content-space-between  { justify-content: space-between;   }
+  .justify-content-space-around   { justify-content: space-around;    }
+
+  .align-items-start              { align-items: start;               }
+  .align-items-end                { align-items: end;                 }
+  .align-items-flex-start         { align-items: flex-start;          }
+  .align-items-flex-end           { align-items: flex-end;            }
+  .align-items-center             { align-items: center;              }
+  .align-items-baseline           { align-items: baseline;            }
+  .align-items-stretch            { align-items: stretch;             }
+
+  .align-content-start            { align-content: start;             }
+  .align-content-end              { align-content: end;               }
+  .align-content-flex-start       { align-content: flex-start;        }
+  .align-content-flex-end         { align-content: flex-end;          }
+  .align-content-center           { align-content: center;            }
+  .align-content-stretch          { align-content: stretch;           }
+  .align-content-space-between    { align-content: space-between;     }
+  .align-content-space-around     { align-content: space-around;      }
+
+  .align-self-auto                { align-self: auto;                 }
+  .align-self-start               { align-self: start;                }
+  .align-self-end                 { align-self: end;                  }
+  .align-self-flex-start          { align-self: flex-start;           }
+  .align-self-flex-end            { align-self: flex-end;             }
+  .align-self-center              { align-self: center;               }
+  .align-self-baseline            { align-self: baseline;             }
+  .align-self-stretch             { align-self: stretch;              }
+
+  @for $i from 0 through 10 {
+    .gap-#{$i}          { gap: space-x($i);         }
+    .column-gap-#{$i}   { column-gap: space-x($i);  }
+    .row-gap-#{$i}      { row-gap: space-x($i);     }
+  }
 
   /// Float
   .float-left   { float: left;  }

src/sass/components/_grouped.scss

@@ -13,6 +13,13 @@
     letter-spacing: space-x(1);
     font-weight: 700;
   }
+
+  // remove "bootstrap" focus ring for this state
+  &--idled:active,
+  &--idled:focus {
+    border-color: $input-border-color;
+    box-shadow: unset;
+  }
 }
 
 /// Modal