[CSS] Unify CSS files to a single format

src/sass/_abstract.sass

-@import './abstract/_variables'
-@import './abstract/_members'

src/sass/_abstract.scss

+@import './abstract/_variables';
+@import './abstract/_members';

src/sass/_base.sass

-@import "./base/_reset.scss"
-@import "./base/_general.scss"
-@import "./base/_form.scss"
-@import "./base/_layout.scss"
-@import "./base/_nav.scss"
-@import "./base/_typography.scss"
-@import "./base/_animations.scss"
-@import "./base/_bootstrap.scss"
-@import "./base/_placeholder.scss"
-@import "./base/_utilities.scss"
-@import "./base/_range_slider.sass"

src/sass/_base.scss

+@import "./base/_reset.scss";
+@import "./base/_general.scss";
+@import "./base/_form.scss";
+@import "./base/_layout.scss";
+@import "./base/_nav.scss";
+@import "./base/_typography.scss";
+@import "./base/_animations.scss";
+@import "./base/_bootstrap.scss";
+@import "./base/_placeholder.scss";
+@import "./base/_utilities.scss";
+@import "./base/_range_slider.scss";

src/sass/_components.sass

-@import "./components/_grouped.scss"
-@import "./components/_loading_spinner.scss"

src/sass/_components.scss

+@import "./components/_grouped.scss";
+@import "./components/_loading_spinner.scss";

src/sass/_legacy.sass

-@import "./_legacy/_menu"
-@import "./_legacy/_graph"
-@import "./_legacy/_login"
-@import "./_legacy/_tree"
-@import "./_legacy/_code_editor"
-@import "./_legacy/_styles"
-@import "./_legacy/_list"
-@import "./_legacy/_annotation"
-@import "./_legacy/_phylo"
-@import "./_legacy/_frame"
-@import "./_legacy/_document"
-@import "./_legacy/_folder"
-@import "./_legacy/_corpus"
-@import "./_legacy/_annuaire"
-@import "./_legacy/_search"
-@import "./_legacy/_breadcrumb"
\ No newline at end of file

src/sass/_legacy.scss

+@import "./_legacy/_menu";
+@import "./_legacy/_graph";
+@import "./_legacy/_login";
+@import "./_legacy/_tree";
+@import "./_legacy/_code_editor";
+@import "./_legacy/_styles";
+@import "./_legacy/_list";
+@import "./_legacy/_annotation";
+@import "./_legacy/_phylo";
+@import "./_legacy/_frame";
+@import "./_legacy/_document";
+@import "./_legacy/_folder";
+@import "./_legacy/_corpus";
+@import "./_legacy/_annuaire";
+@import "./_legacy/_search";
+@import "./_legacy/_breadcrumb";
\ No newline at end of file

src/sass/_legacy/_annuaire.sass

-.page-annuaire
-
-  &__nooverflow
-    max-width: 300px
-    height : 24px
-    overflow: hidden
-    text-overflow: ellipsis
-
-    &:hover
-      overflow: visible
-      height: auto

src/sass/_legacy/_annuaire.scss

+.page-annuaire {
+  &__nooverflow {
+    max-width: 300px;
+    height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      overflow: visible;
+      height: auto;
+    }
+  }
+}

src/sass/_legacy/_breadcrumb.sass

-.breadcrumb-wrapper
-    border-bottom: 1px solid $border-color
-    .breadcrumb
-        background-color: transparent
-        padding: space-x(0.5) space-x(0.5) !important
-        margin: 0 !important
-        &-item
-            color: $gray-700
-            & .active-page
-                font-weight: bold
-                color: $primary
-            .b-icon
-                margin: 0 space-x(0.5)
-    .fa-spinner
-        font-size: 100%
-        margin: auto 10px
\ No newline at end of file

src/sass/_legacy/_breadcrumb.scss

+.breadcrumb-wrapper {
+  border-bottom: 1px solid $border-color;
+  .breadcrumb {
+    background-color: transparent;
+    padding: space-x(0.5) space-x(0.5) !important;
+    margin: 0 !important;
+    &-item {
+      color: $gray-700;
+      & .active-page {
+        font-weight: bold;
+        color: $primary;
+      }
+        .b-icon {
+          margin: 0 space-x(0.5);
+        }
+    }
+  }
+  .fa-spinner {
+    font-size: 100%;
+    margin: auto 10px;
+  }
+}

src/sass/_legacy/_code_editor.sass

-@mixin font-inherit()
-  font-family: inherit
-  font-size: inherit
-  font-style: inherit
-  font-variant-ligatures: inherit
-  font-weight: inherit
-  letter-spacing: inherit
-  line-height: inherit
-  text-indent: inherit
-  text-rendering: inherit
-  text-transform: inherit
-
-@mixin common-overlay-props()
-  box-sizing: inherit
-  display: inherit
-  margin: 0px
-  padding: 10px
-  overflow-wrap: break-word
-  white-space: pre-wrap
-  word-break: keep-all
-
-.code-editor
-  .editor
-    .code-area
-      flex-grow: 1
-      max-height: 200px
-      min-width: 25%
-      overflow: auto
-      .code-container
-        background-color: #fafafa
-        box-sizing: border-box
-        position: relative
-        font-family: Fira code,Fira Mono,Consolas,Menlo,Courier,monospace
-        font-size: 12px
-        font-variant-ligatures: common-ligatures
-        line-height: 1.5
-        overflow: hidden
-        padding: 0px
-        text-align: left
-        textarea
-          border: 0px
-          color: inherit
-          position: absolute
-          left: 0px
-          top: 0px
-          resize: none
-          height: 100%
-          overflow: hidden
-          width: 100%
-          -webkit-text-fill-color: transparent
-          @include common-overlay-props()
-          @include font-inherit()
-        pre
-          background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%
-          border: 0px none
-          color: #000
-          pointer-events: none
-          position: relative
-          @include common-overlay-props()
-          @include font-inherit()
-    .v-divider
-      border-left: 1px solid gray
-      cursor: sw-resize
-      height: 100%
-      margin-left: 5px
-      margin-right: 5px
-      width: 1px
-    .html
-      flex-grow: 2
-      margin-left: 8px
-      margin-right: 8px
-      padding-left: 8px
-      padding-right: 8px
-      &.language-haskell
-        font-family: Fira code,Fira Mono,Consolas,Menlo,Courier,monospace
-        white-space: pre
-      &.language-python
-        font-family: Fira code,Fira Mono,Consolas,Menlo,Courier,monospace
-        white-space: pre
-      &.language-json
-        font-family: Fira code,Fira Mono,Consolas,Menlo,Courier,monospace
-        white-space: pre
-      &.language-md
-        ul
-          li
-            list-style: disc !important
-        ol
-          li
-            list-style: decimal !important
-
-  &__toolbar
-    margin-bottom: space-x(2.5)
-
-    &__type
-      width: 200px
-      margin-right: space-x(2)

src/sass/_legacy/_code_editor.scss

+@mixin font-inherit() {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-indent: inherit;
+  text-rendering: inherit;
+  text-transform: inherit;
+}
+@mixin common-overlay-props() {
+  box-sizing: inherit;
+  display: inherit;
+  margin: 0px;
+  padding: 10px;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: keep-all;
+}
+.code-editor {
+  .editor {
+    .code-area {
+      flex-grow: 1;
+      max-height: 200px;
+      min-width: 25%;
+      overflow: auto;
+      .code-container {
+        background-color: #fafafa;
+        box-sizing: border-box;
+        position: relative;
+        font-family: Fira code,Fira Mono,Consolas,Menlo,Courier,monospace;
+        font-size: 12px;
+        font-variant-ligatures: common-ligatures;
+        line-height: 1.5;
+        overflow: hidden;
+        padding: 0px;
+        text-align: left;
+        textarea {
+          border: 0px;
+          color: inherit;
+          position: absolute;
+          left: 0px;
+          top: 0px;
+          resize: none;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+          -webkit-text-fill-color: transparent;
+          @include common-overlay-props();
+          @include font-inherit();
+        }
+        pre {
+          background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
+          border: 0px none;
+          color: #000;
+          pointer-events: none;
+          position: relative;
+          @include common-overlay-props();
+          @include font-inherit();
+        }
+      }
+    }
+    .v-divider {
+      border-left: 1px solid gray;
+      cursor: sw-resize;
+      height: 100%;
+      margin-left: 5px;
+      margin-right: 5px;
+      width: 1px;
+    }
+    .html {
+      flex-grow: 2;
+      margin-left: 8px;
+      margin-right: 8px;
+      padding-left: 8px;
+      padding-right: 8px;
+      &.language-haskell {
+        font-family: Fira code,Fira Mono,Consolas,Menlo,Courier,monospace;
+        white-space: pre;
+      }
+      &.language-python {
+        font-family: Fira code,Fira Mono,Consolas,Menlo,Courier,monospace;
+        white-space: pre;
+      }
+      &.language-json {
+        font-family: Fira code,Fira Mono,Consolas,Menlo,Courier,monospace;
+        white-space: pre;
+      }
+      &.language-md {
+        ul {
+          li {
+            list-style: disc !important;
+          }
+        }
+        ol {
+          li {
+            list-style: decimal !important;
+          }
+        }
+      }
+    }
+  }
+  &__toolbar {
+    margin-bottom: space-x(2.5);
+
+    &__type {
+      width: 200px;
+      margin-right: space-x(2);
+    }
+  }
+}
\ No newline at end of file

src/sass/_legacy/_corpus.sass → src/sass/_legacy/_corpus.scss

-.corpus-layout
-  margin-bottom: space-x(1)
+.corpus-layout {
+  margin-bottom: space-x(1);
 
-  &__title
-    display: flex
-    align-items: center
+  &__title {
+    display: flex;
+    align-items: center;
 
-    &__text
-      font-size: $h3-font-size
-      font-family: $headings-font-family
+    &__text {
+      font-size: $h3-font-size;
+      font-family: $headings-font-family;
+    }
 
-    &__line
+    &__line {
       // (?) see "_list.sass" > ".table-header-rename__line" for more infos
-      border-bottom: 1px solid $gray-200
-      border-top: none
+      border-bottom: 1px solid $gray-200;
+      border-top: none;
+
       // (?) strange behavior where browser engine add it by itself
-      height: 0
-      flex-grow: 1
-      margin-left: space-x(4)
-      margin-right: space-x(4)
+      height: 0;
+      flex-grow: 1;
+      margin-left: space-x(4);
+      margin-right: space-x(4);
+    }
 
-    &__expand
-      margin-left: space-x(4)
+    &__expand {
+      margin-left: space-x(4);
+    }
+  }
 
+  &__edition-block {
+    border-bottom: 1px solid $gray-200;
 
-  &__edition-block
-    border-bottom: 1px solid $gray-200
     // using <table-header-rename-edition> padding to prettify the overall UI
     // (+ <form-group> padding)
-    margin-bottom: calc( #{$card-spacer-y} + #{ space-x(0.75) } )
+    margin-bottom: calc( #{$card-spacer-y} + #{space-x(0.75)} );
+  }
 
-  &__code-section
-    margin-top: space-x(1)
+  &__code-section {
+    margin-top: space-x(1);
+  }
 
-  &__folders
-    margin-top: space-x(6)
+  &__folders {
+    margin-top: space-x(6);
+  }
 
   // @TODO: switch <tile-menu> component using a <popover> for a reworked
   //        <context-menu> (easier to use). <popover> has far too many issues,
   //        such as the below micro-managing
-  .tile-menu__popover
-    position: relative
-    width: 200px
+  .tile-menu__popover {
+    position: relative;
+    width: 200px;
+  }
+}
 
 //////////////////////////////////////////////////////
 
-.corpus-code-layout
-  position: relative
+.corpus-code-layout {
+  position: relative;
 
-  &__toolbar
-    display: flex
-    align-items: center
-    justify-content: space-between
-    border-bottom: 1px solid $border-color
-    padding: $card-spacer-y $card-spacer-x
-    background-color: $body-bg
-    position: sticky
-    top: $topbar-height
-    z-index: z-index('corpus-code', 'toolbar')
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid $border-color;
+    padding: $card-spacer-y $card-spacer-x;
+    background-color: $body-bg;
+    position: sticky;
+    top: $topbar-height;
+    z-index: z-index("corpus-code", "toolbar");
 
     // @XXX: reset "main-page__main-route" wrapper margin
-    margin-left: space-x(-4)
-    margin-right: space-x(-4)
-    margin-top: space-x(-3)
-
-  &__fields
-    margin-top: space-x(3)
-    z-index: z-index('corpus-code', 'content')
-
-.code-section-item
-
+    margin-left: space-x(-4);
+    margin-right: space-x(-4);
+    margin-top: space-x(-3);
+  }
+
+  &__fields {
+    margin-top: space-x(3);
+    z-index: z-index("corpus-code", "content");
+  }
+}
+
+.code-section-item {
   // accentuate disabled icon effect
-  .card-header .b-icon-button--disabled
-    opacity: 0.2
+  .card-header .b-icon-button--disabled {
+    opacity: 0.2;
+  }
 
   // using "bootstrap" Element change to alter the caret icon
-  [aria-expanded="true"]
-    transform: rotate(180deg)
+  [aria-expanded="true"] {
+    transform: rotate(180deg);
+  }
+}

src/sass/_legacy/_document.sass

-// Every website specialised in scientific articles deals with a column
-// container between 760px and 800px
-$document-container-width: 780px
-
-///////////////////////////////////////////////////////////
-
-.document-layout
-  $label-column-size: 96px
-
-  position: relative
-  width: 100%
-
-  &__header
-    display: flex
-    justify-content: space-between
-    padding: $card-spacer-y $card-spacer-x
-    border-bottom: 1px solid $border-color
-    // margin-bottom: $card-spacer-y
-
-  &__main-controls
-    display: flex
-    align-items: center
-
-  &__side-controls
-    display: flex
-    align-items: center
-
-  &__saving
-    color: $primary
-    display: flex
-
-    &__spinner
-      width: 16px
-      height: 16px
-
-    &__icon
-      font-size: 20px
-      // fading icon apparition with a little pulse
-      // wait a little, then fading icon on hiding
-      animation: fade-in 200ms ease-in-out, fade-out 100ms ease-in-out 2000ms 1 normal forwards, pulse 200ms ease-in-out 0ms 1
-
-  &__body
-    // max-width: $document-container-width
-    padding: $card-spacer-x
-    margin: 0
-    max-height: 70vh
-    overflow-y: auto
-
-  &__separator-label
-    font-weight: bold
-    border-bottom: 1px solid $gray-200
-    padding-bottom: space-x(0.5)
-    margin-bottom: space-x(1.5)
-
-  &__title
-    font-size: 26px
-    font-weight: bold
-    line-height: 1.4
-    word-wrap: break-word
-    // margin-bottom: space-x(3)
-    font-family: $headings-font-family
-
-  &__hdata
-    display: flex
-    margin-bottom: space-x(0.5)
-    line-height: 1.3em
-    font-size: 15px
-
-    &__label
-      font-weight: bold
-      flex-basis: $label-column-size
-      flex-shrink: 0
-
-    &__content
-      color: $gray-600
-
-  &__abstract
-    margin-top: space-x(3)
-    margin-bottom: space-x(3)
-
-    &__content
-      color: $gray-800
-      font-size: 18px
-      line-height: 1.4

src/sass/_legacy/_document.scss

+// Every website specialised in scientific articles deals with a column
+// container between 760px and 800px
+$document-container-width: 780px;
+
+///////////////////////////////////////////////////////////
+
+.document-layout {
+  $label-column-size: 96px;
+
+  position: relative;
+  width: 100%;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    padding: $card-spacer-y $card-spacer-x;
+    border-bottom: 1px solid $border-color;
+  }
+  &__main-controls {
+    display: flex;
+    align-items: center;
+  }
+  &__side-controls {
+    display: flex;
+    align-items: center;
+  }
+  &__saving {
+    color: $primary;
+    display: flex;
+
+    &__spinner {
+      width: 16px;
+      height: 16px;
+    }
+    &__icon {
+      font-size: 20px;
+      // fading icon apparition with a little pulse
+      // wait a little, then fading icon on hiding
+      animation: fade-in 200ms ease-in-out, fade-out 100ms ease-in-out 2000ms 1 normal forwards, pulse 200ms ease-in-out 0ms 1;
+    }
+  }
+  &__body {    
+    // max-width: $document-container-width
+    padding: $card-spacer-x;
+    margin: 0;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+  &__separator-label {
+    font-weight: bold;
+    border-bottom: 1px solid $gray-200;
+    padding-bottom: space-x(0.5);
+    margin-bottom: space-x(1.5);
+  }
+  &__title {
+    font-size: 26px;
+    font-weight: bold;
+    line-height: 1.4;
+    word-wrap: break-word;
+    // margin-bottom: space-x(3)
+    font-family: $headings-font-family;
+  }
+  &__hdata {
+    display: flex;
+    margin-bottom: space-x(0.5);
+    line-height: 1.3em;
+    font-size: 15px;
+
+    &__label {
+      font-weight: bold;
+      flex-basis: $label-column-size;
+      flex-shrink: 0;
+    }
+    &__content {
+      color: $gray-600;
+    }
+  }
+  &__abstract {
+    margin-top: space-x(3);
+    margin-bottom: space-x(3);
+
+    &__content {
+      color: $gray-800;
+      font-size: 18px;
+      line-height: 1.4;
+    }
+  }
+}
\ No newline at end of file

src/sass/_legacy/_folder.sass

-.folder-view
-  display: flex
-  gap: space-x(4.5)
-  flex-wrap: wrap
-
-
-/////////////////////////////
-
-.folder-view-item
-  $body-size: 200px
-  $icon-size: 30px
-  $text-size: 17px
-
-  transition: $transition-base
-  display: flex
-  align-items: stretch
-  width: $body-size
-  flex-grow: 0
-  flex-shrink: 0
-  position: relative
-
-  &:hover,
-  &:active,
-  &:focus
-    .folder-view-item__settings
-      display: block
-
-  &__body
-    @include clickable
-    flex-grow: 1
-    display: flex
-    flex-direction: column
-    align-items: center
-    position: relative
-    padding: #{ $card-spacer-y * 2 } $card-spacer-x
-    border-radius: $border-radius
-    transition: $transition-base
-    background-color: $gray-100
-    border: 1px solid $gray-100
-
-    &:hover,
-    &:active,
-    &:focus
-      background-color: $gray-200
-      text-decoration: none
-
-  &__icon
-    font-size: $icon-size
-    margin-bottom: #{ $card-spacer-y * 2 }
-
-  &__text
-    line-height: 1.2
-    text-align: center
-    font-size: $text-size
-
-  &__settings
-    transition: $transition-base
-    display: none
-
-    // best alignment to fit <icon-button> hovering block
-    $offset-y: 6px
-    $offset-x: 11px
-
-    position: absolute
-    top: $offset-y
-    right: $offset-x
-
-    // enhenced hover contrast
-    .b-icon-button:hover::before
-      background-color: $gray-200
-
-    // fitting radius with its parent container
-    .b-icon-button::before
-      border-radius: $border-radius

src/sass/_legacy/_folder.scss

+.folder-view {
+  display: flex;
+  gap: space-x(4.5);
+  flex-wrap: wrap;
+}
+
+/////////////////////////////
+
+.folder-view-item {
+  $body-size: 200px;
+  $icon-size: 30px;
+  $text-size: 17px;
+
+  transition: $transition-base;
+  display: flex;
+  align-items: stretch;
+  width: $body-size;
+  flex-grow: 0;
+  flex-shrink: 0;
+  position: relative;
+
+  &:hover,
+  &:active,
+  &:focus {
+    .folder-view-item__settings {
+      display: block;
+    }
+  }
+  &__body {
+    @include clickable;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    padding: #{ $card-spacer-y * 2 } $card-spacer-x;
+    border-radius: $border-radius;
+    transition: $transition-base;
+    background-color: $gray-100;
+    border: 1px solid $gray-100;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $gray-200;
+      text-decoration: none;
+    }
+  }
+  &__icon {
+    font-size: $icon-size;
+    margin-bottom: #{ $card-spacer-y * 2 };
+  }
+  &__text {
+    line-height: 1.2;
+    text-align: center;
+    font-size: $text-size;
+  }
+  &__settings {
+    transition: $transition-base;
+    display: none;
+
+    // best alignment to fit <icon-button> hovering block
+    $offset-y: 6px;
+    $offset-x: 11px;
+
+    position: absolute;
+    top: $offset-y;
+    right: $offset-x;
+
+    // enhenced hover contrast
+    .b-icon-button:hover::before {
+      background-color: $gray-200;
+    }
+    // fitting radius with its parent container
+    .b-icon-button::before {
+      border-radius: $border-radius;
+    }
+  }
+}
\ No newline at end of file

src/sass/_legacy/_frame.sass

-
-  .frame-layout
-    position: relative
-    width: 100%
-    height: $layout-height

src/sass/_legacy/_frame.scss

+.frame-layout {
+  position: relative;
+  width: 100%;
+  height: $layout-height;
+}
\ No newline at end of file

src/sass/_legacy/_graph.sass

-.graph-layout
-  position: relative
-  z-index: 0 // new stacking context "graph"
-  width: 100%
-  height: $layout-height
-
-  &__frame
-    @include fit-positions
-
-    position: absolute
-    display: flex
-    z-index: z-index('graph', 'frame')
-    width: 100%
-    height: $sidebar-height
-    justify-content: flex-end
-    pointer-events: none
-
-    @include right-handed
-      flex-direction: row
-    @include left-handed
-      flex-direction: row-reverse
-
-  &__sidebar
-    width: $sidebar-width
-    height: inherit
-    flex-grow: 0
-    pointer-events: all
-
-    &__inner
-      position: fixed
-      height: inherit
-      width: inherit
-
-      @include right-handed
-        border-left: 1px solid $border-color
-      @include left-handed
-        border-right: 1px solid $border-color
-
-  &__focus
-    flex-grow: 1
-    pointer-events: all
-    position: relative
-    // (?) last resort solution to have a fixed scrollable child, with
-    //     its dimension relative to its parent
-    //     (flaw: no overflow)
-    // contain: layout
-
-    &__inner
-      @include fit-positions
-
-      position: absolute
-      background-color: $body-bg
-
-  &__toolbar
-    position: absolute
-    z-index: z-index('graph', 'toolbar')
-    background-color: $body-bg
-    // width: 100%
-    border-bottom: 1px solid $border-color
-
-    .b-fieldset
-      background-color: $body-bg
-      // flex-grow: 1
-
-      button
-        .b-icon
-          $button-icon-margin: 0.4em
-
-          @include right-handed
-            margin-right: $button-icon-margin
-          @include left-handed
-            margin-left: $button-icon-margin
-
-
-
-  &__content
-    width: 100%
-    height: 100%
-
-
-/////////////////////////////////////////////
-
-.graph-topbar
-  @include aside-topbar
-
-  display: flex
-  // padding: $grah-topbar-item-margin $topbar-item-margin $grah-topbar-item-margin 0
-
-  &__toolbar,
-  &__sidebar
-    // width: $topbar-fixed-button-width
-    margin-top: $topbar-item-margin
-    margin-bottom: $topbar-item-margin
-    margin-left: $topbar-item-margin
-    margin-right: $topbar-item-margin
-    padding-left: $topbar-item-margin
-    padding-right: $topbar-item-margin
-
-  &__search
-    width: $topbar-input-width
-    margin-top: $topbar-item-margin
-    margin-bottom: $topbar-item-margin
-    margin-left: $topbar-item-margin
-    margin-right: $topbar-item-margin
-
-    [type="submit"]
-      display: none
-    
-    .form-control
-      height: 2rem
-      padding-top: 0
-      padding-bottom: 0
-
-/////////////////////////////////////////////
-
-.graph-doc-focus
-  @include term-window
-
-  &__header
-    // avoid overlap with document side controls
-    @include right-handed
-      margin-left: space-x(4)
-    @include left-handed
-      margin-right: space-x(4)
-
-  // remove document header top spacing due to the already presence of
-  // the inner column top teaser
-  .document-layout__header
-    padding-top: initial
-
-/////////////////////////////////////////////
-
-.graph-sidebar
-  @include term-window
-
-  $margin-x: $sidebar-tab-margin-x
-  $margin-y: space-x(2)
-
-  &__close
-    position: absolute
-    right: 0
-    margin-right: space-x(3)
-
-  &__legend-tab
-    padding: $margin-y $margin-x
-
-  &__data-tab
-    padding: $margin-y $margin-x
-
-  &__community-tab
-    padding: $margin-y $margin-x
-
-  &__separator
-    margin-top: $margin-y
-    margin-bottom: $margin-y
-    color: $gray-500
-    text-align: center
-
-
-.graph-legend
-  $legend-code-width: 24px
-  $legend-code-height: 12px
-
-  &__item
-    display: flex
-    align-items: baseline
-    list-style: none
-    position: relative
-
-    &:not(:first-child)
-      margin-top: space-x(0.25)
-
-  &__title
-    color: $gray-800
-    font-size: 15px
-    font-weight: bold
-    margin-bottom: space-x(0.25)
-
-  &__code
-    min-width: $legend-code-width
-    min-height: $legend-code-height
-    display: inline-block
-    margin-right: space-x(1)
-    border: 1px solid $gray-500
-
-.graph-legend .renameable-container__text
-  margin-right: space-x(1)
-
-.graph-legend-nodes
-
-  &__item
-    display: inline-block
-
-    &:first-child
-      margin-top: space-x(0.25)
-
-    &:not(:last-child)
-      margin-bottom: space-x(0.25)
-      margin-right: space-x(0.25)
-
-    &--count
-      color: $gray-800
-      font-size: 11px
-      font-weight: bold
-
-
-  &__badge
-    font-size: 12px
-    white-space: normal
-    word-break: break-word
-
-    &--selected
-      background-color: darken($light, 10%) // from Bootstrap "_badge.scss"
-
-
-.graph-documentation
-
-  &__text-section
-    margin-bottom: space-x(3)
-    font-size: 15px
-    line-height: 1.5
-
-    p
-      margin-bottom: space-x(1)
-
-    li
-      list-style-type: circle
-      padding-left: space-x(0.5)
-      margin-left: space-x(3)
-      line-height: 1.4
-
-      &:not(:last-child)
-        margin-bottom: space-x(1.5)
-
-
-.graph-selected-nodes
-
-  &__list
-    display: flex
-    gap: space-x(0.5)
-    flex-wrap: wrap
-    padding-right: space-x(4)
-
-  &__badge
-    font-size: $font-size-base
-    white-space: normal
-    word-break: break-word
-
-  &__expand
-    // Following <list-group-item> spacing
-    $position-x: $list-group-item-padding-x
-    // Empirical: fit well with icon overlay
-    $position-y: 0.75rem
-
-    position: absolute
-    right: $position-x
-    top: $position-y
-
-  &__actions
-
-    .b-button-group
-      width: 100%
-    .b-button
-      width: 50%
-
-
-.graph-neighborhood
-
-  &__parent
-    display: flex
-    list-style: none
-    flex-wrap: wrap
-
-  &__counter
-    font-weight: bold
-
-  &__expand
-    // Following <list-group-item> spacing
-    $position-x: $list-group-item-padding-x
-    // Empirical: fit well with icon overlay
-    $position-y: 0.75rem
-
-    position: absolute
-    right: $position-x
-    top: $position-y
-
-  &__badge
-    border: 1px solid
-    border-radius: space-x(0.75)
-
-    white-space: normal
-    word-break: break-word
-
-    // Show on one line
-    margin-right: space-x(0.75)
-    margin-bottom: space-x(0.75)
-
-    &:not(:last-child)
-      //margin-bottom: space-x(0.75)
-
-    .badge
-      // reduce bootstrap padding due to a vertical asymmetry (empirical)
-      $padding-top: 0.15em
-
-      padding-top: $padding-top
-
-      color: inherit
-      background-color: rgba(0, 0, 0, 0)
-
-  &__show-more
-    margin-top: space-x(2)
-
-
-.graph-doc-list
-
-  &__item
-    @include clickable
-
-    display: flex
-    align-items: flex-start
-    transition: $transition-base
-
-    &:hover
-      background-color: $gray-50
-
-    &--selected::before
-      @include fit-positions
-
-      content: ""
-      position: absolute
-      z-index: 1
-      width: 2px
-      background-color: $info
-
-    // (following list group item border radius)
-    &--selected:first-child::before
-      border-top-left-radius: $list-group-border-radius
-    &--selected:last-child::before
-      border-bottom-left-radius: $list-group-border-radius
-
-    &__main
-      flex-grow: 1
-      padding-right: $card-spacer-x
-
-    &__title,
-    &__source,
-    &__date
-      line-height: 1.3
-      margin-bottom: space-x(0.5)
-
-    &__source
-      font-size: 15px
-      color: $gray-700
-
-    &__date
-      font-size: 14px
-      color: $gray-600
-
-
-.graph-contact-list
-
-  &__item
-
-    &__title,
-    &__subtitle
-      line-height: 1.3
-      margin-bottom: space-x(0.25)
-
-    &__subtitle
-      font-size: 15px
-      color: $gray-700
-
-
-/////////////////////////////////////////////
-
-.graph-toolbar
-  $self: &
-  $section-margin: space-x(2)
-  $item-margin: space-x(1)
-
-  display: flex
-  padding: #{ $section-margin / 2 }
-  padding-top: $section-margin
-
-  &__gap
-    width: $item-margin
-    display: inline-block
-
-  &__section
-    margin: #{ $section-margin / 4 }
-
-    // Selection settings
-    &--selection
-
-      .b-fieldset__content
-        display: flex
-
-      #{ $self }__gap
-        width: #{ $item-margin * 2 }
-
-      .range-simple
-        flex-grow: 1
-
-    // Controls
-    &--controls
-
-      .b-fieldset__content
-        position: relative
-
-      #{ $self }__gap
-        width: #{ $item-margin * 2 }
-
-      .range-control,
-      .range-simple
-        // flex-basis: calc(50% - #{ $item-margin * 2 })
-        flex-basis: 100%
-        min-width: 150px
-  
-  &__region_advanced
-    .btn-advanced.collapsed .b-icon
-      transform: rotate(180)
-      
-
-
-
-
-// Atlas button animation
-.on-running-animation .b-icon
-  animation-name: pulse
-  animation-duration: 0.5s
-  animation-timing-function: ease
-  animation-direction: alternate
-  animation-iteration-count: infinite
-  animation-play-state: running

src/sass/_legacy/_graph.scss

+@use "sass:math";
+
+.graph-layout {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  height: $layout-height;
+
+  &__frame {
+    @include fit-positions;
+
+    position: absolute;
+    display: flex;
+    z-index: z-index("graph", "frame");
+    width: 100%;
+    height: $sidebar-height;
+    justify-content: flex-end;
+    pointer-events: none;
+
+    @include right-handed {
+      flex-direction: row;
+    }
+
+
+    @include left-handed {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__sidebar {
+    width: $sidebar-width;
+    height: inherit;
+    flex-grow: 0;
+    pointer-events: all;
+
+    &__inner {
+      position: fixed;
+      height: inherit;
+      width: inherit;
+
+      @include right-handed {
+        border-left: 1px solid $border-color;
+      }
+
+
+      @include left-handed {
+        border-right: 1px solid $border-color;
+      }
+    }
+  }
+
+  &__focus {
+    flex-grow: 1;
+    pointer-events: all;
+    position: relative;
+
+    // (?) last resort solution to have a fixed scrollable child, with
+    //     its dimension relative to its parent
+    //     (flaw: no overflow)
+    // contain: layout
+
+    &__inner {
+      @include fit-positions;
+
+      position: absolute;
+      background-color: $body-bg;
+    }
+  }
+
+  &__toolbar {
+    position: absolute;
+    z-index: z-index("graph", "toolbar");
+    background-color: $body-bg;
+
+    // width: 100%
+    border-bottom: 1px solid $border-color;
+
+    .b-fieldset {
+      background-color: $body-bg;
+
+      // flex-grow: 1
+
+      button {
+        .b-icon {
+          $button-icon-margin: 0.4em;
+
+          @include right-handed {
+            margin-right: $button-icon-margin;
+          }
+
+
+          @include left-handed {
+            margin-left: $button-icon-margin;
+          }
+        }
+      }
+    }
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/////////////////////////////////////////////
+
+.graph-topbar {
+  @include aside-topbar;
+
+  display: flex;
+
+  // padding: $grah-topbar-item-margin $topbar-item-margin $grah-topbar-item-margin 0
+
+  &__toolbar,
+  &__sidebar {
+    // width: $topbar-fixed-button-width
+    margin-top: $topbar-item-margin;
+    margin-bottom: $topbar-item-margin;
+    margin-left: $topbar-item-margin;
+    margin-right: $topbar-item-margin;
+    padding-left: $topbar-item-margin;
+    padding-right: $topbar-item-margin;
+  }
+
+  &__search {
+    width: $topbar-input-width;
+    margin-top: $topbar-item-margin;
+    margin-bottom: $topbar-item-margin;
+    margin-left: $topbar-item-margin;
+    margin-right: $topbar-item-margin;
+
+    [type="submit"] {
+      display: none;
+    }
+
+    .form-control {
+      height: 2rem;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}
+
+/////////////////////////////////////////////
+
+.graph-doc-focus {
+  @include term-window;
+
+  &__header {
+    // avoid overlap with document side controls
+    @include right-handed {
+      margin-left: space-x(4);
+    }
+
+
+    @include left-handed {
+      margin-right: space-x(4);
+    }
+  }
+
+  // remove document header top spacing due to the already presence of
+  // the inner column top teaser
+  .document-layout__header {
+    padding-top: initial;
+  }
+}
+
+/////////////////////////////////////////////
+
+.graph-sidebar {
+  @include term-window;
+
+  $margin-x: $sidebar-tab-margin-x;
+  $margin-y: space-x(2);
+
+  &__close {
+    position: absolute;
+    right: 0;
+    margin-right: space-x(3);
+  }
+
+  &__legend-tab {
+    padding: $margin-y $margin-x;
+  }
+
+  &__data-tab {
+    padding: $margin-y $margin-x;
+  }
+
+  &__community-tab {
+    padding: $margin-y $margin-x;
+  }
+
+  &__separator {
+    margin-top: $margin-y;
+    margin-bottom: $margin-y;
+    color: $gray-500;
+    text-align: center;
+  }
+}
+
+.graph-legend {
+  $legend-code-width: 24px;
+  $legend-code-height: 12px;
+
+  &__item {
+    display: flex;
+    align-items: baseline;
+    list-style: none;
+    position: relative;
+
+    &:not(:first-child) {
+      margin-top: space-x(0.25);
+    }
+  }
+
+  &__title {
+    color: $gray-800;
+    font-size: 15px;
+    font-weight: bold;
+    margin-bottom: space-x(0.25);
+  }
+
+  &__code {
+    min-width: $legend-code-width;
+    min-height: $legend-code-height;
+    display: inline-block;
+    margin-right: space-x(1);
+    border: 1px solid $gray-500;
+  }
+}
+
+.graph-legend .renameable-container__text {
+  margin-right: space-x(1);
+}
+
+.graph-legend-nodes {
+  &__item {
+    display: inline-block;
+
+    &:first-child {
+      margin-top: space-x(0.25);
+    }
+
+    &:not(:last-child) {
+      margin-bottom: space-x(0.25);
+      margin-right: space-x(0.25);
+    }
+
+    &--count {
+      color: $gray-800;
+      font-size: 11px;
+      font-weight: bold;
+    }
+  }
+
+  &__badge {
+    font-size: 12px;
+    white-space: normal;
+    word-break: break-word;
+
+    &--selected {
+      background-color: darken($light, 10%);
+    }
+  }
+}
+
+.graph-documentation {
+  &__text-section {
+    margin-bottom: space-x(3);
+    font-size: 15px;
+    line-height: 1.5;
+
+    p {
+      margin-bottom: space-x(1);
+    }
+
+    li {
+      list-style-type: circle;
+      padding-left: space-x(0.5);
+      margin-left: space-x(3);
+      line-height: 1.4;
+
+      &:not(:last-child) {
+        margin-bottom: space-x(1.5);
+      }
+    }
+  }
+}
+
+.graph-selected-nodes {
+  &__list {
+    display: flex;
+    gap: space-x(0.5);
+    flex-wrap: wrap;
+    padding-right: space-x(4);
+  }
+
+  &__badge {
+    font-size: $font-size-base;
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  &__expand {
+    // Following <list-group-item> spacing
+    $position-x: $list-group-item-padding-x;
+
+    // Empirical: fit well with icon overlay
+    $position-y: 0.75rem;
+
+    position: absolute;
+    right: $position-x;
+    top: $position-y;
+  }
+
+  &__actions {
+    .b-button-group {
+      width: 100%;
+    }
+
+    .b-button {
+      width: 50%;
+    }
+  }
+}
+
+.graph-neighborhood {
+  &__parent {
+    display: flex;
+    list-style: none;
+    flex-wrap: wrap;
+  }
+
+  &__counter {
+    font-weight: bold;
+  }
+
+  &__expand {
+    // Following <list-group-item> spacing
+    $position-x: $list-group-item-padding-x;
+
+    // Empirical: fit well with icon overlay
+    $position-y: 0.75rem;
+
+    position: absolute;
+    right: $position-x;
+    top: $position-y;
+  }
+
+  &__badge {
+    border: 1px solid;
+    border-radius: space-x(0.75);
+    white-space: normal;
+    word-break: break-word;
+
+    // Show on one line
+    margin-right: space-x(0.75);
+    margin-bottom: space-x(0.75);
+
+    &:not(:last-child) {
+      //margin-bottom: space-x(0.75);
+    }
+
+    .badge {
+      // reduce bootstrap padding due to a vertical asymmetry (empirical)
+      $padding-top: 0.15em;
+
+      padding-top: $padding-top;
+      color: inherit;
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+
+  &__show-more {
+    margin-top: space-x(2);
+  }
+}
+
+.graph-doc-list {
+  &__item {
+    @include clickable;
+
+    display: flex;
+    align-items: flex-start;
+    transition: $transition-base;
+
+    &:hover {
+      background-color: $gray-50;
+    }
+
+    &--selected::before {
+      @include fit-positions;
+
+      content: "";
+      position: absolute;
+      z-index: 1;
+      width: 2px;
+      background-color: $info;
+    }
+
+    // (following list group item border radius)
+    &--selected:first-child::before {
+      border-top-left-radius: $list-group-border-radius;
+    }
+
+    &--selected:last-child::before {
+      border-bottom-left-radius: $list-group-border-radius;
+    }
+
+    &__main {
+      flex-grow: 1;
+      padding-right: $card-spacer-x;
+    }
+
+    &__title,
+    &__source,
+    &__date {
+      line-height: 1.3;
+      margin-bottom: space-x(0.5);
+    }
+
+    &__source {
+      font-size: 15px;
+      color: $gray-700;
+    }
+
+    &__date {
+      font-size: 14px;
+      color: $gray-600;
+    }
+  }
+}
+
+.graph-contact-list {
+  &__item {
+    &__title,
+    &__subtitle {
+      line-height: 1.3;
+      margin-bottom: space-x(0.25);
+    }
+
+    &__subtitle {
+      font-size: 15px;
+      color: $gray-700;
+    }
+  }
+}
+
+/////////////////////////////////////////////
+
+.graph-toolbar {
+  $self: &;
+  $section-margin: space-x(2);
+  $item-margin: space-x(1);
+
+  display: flex;
+  padding: math.div($section-margin, 2);
+  padding-top: $section-margin;
+
+  &__gap {
+    width: $item-margin;
+    display: inline-block;
+  }
+
+  &__section {
+    margin: math.div($section-margin, 4);
+
+    // Selection settings
+    &--selection {
+      .b-fieldset__content {
+        display: flex;
+      }
+
+      #{$self}__gap {
+        width: #{$item-margin * 2};
+      }
+
+      .range-simple {
+        flex-grow: 1;
+      }
+    }
+
+    // Controls
+    &--controls {
+      .b-fieldset__content {
+        position: relative;
+      }
+
+      #{$self}__gap {
+        width: #{$item-margin * 2};
+      }
+
+      .range-control,
+      .range-simple {
+        // flex-basis: calc(50% - #{ $item-margin * 2 })
+        flex-basis: 100%;
+        min-width: 150px;
+      }
+    }
+  }
+
+  &__region_advanced {
+    .btn-advanced.collapsed .b-icon {
+      transform: rotate(180);
+    }
+  }
+}
+
+// Atlas button animation
+.on-running-animation .b-icon {
+  animation-name: pulse;
+  animation-duration: 0.5s;
+  animation-timing-function: ease;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+  animation-play-state: running;
+}

src/sass/_legacy/_list.sass → src/sass/_legacy/_list.scss

-.table
-  $row-min-height: 48px
+.table {
+  $row-min-height: 48px;
 
-  tr td
-    height: $row-min-height
+  tr td {
+    height: $row-min-height;
+  }
 
   ///////////////////////
 
-  .page-paint-raw
+  .page-paint-raw {
+    &--selected {
+      td:first-child {
+        position: relative;
 
-    &--selected
+        &::before {
+          @include fit-positions;
 
-      td:first-child
-        position: relative
-
-        &::before
-          @include fit-positions
-
-          content: ""
-          width: 3px
-          background-color: $info
-          position: absolute
+          content: "";
+          width: 3px;
+          background-color: $info;
+          position: absolute;
+        }
+      }
+    }
+  }
 
   ///////////////////////
 
-  .page-paint-row
-
-    &--active
+  .page-paint-row {
+    &--active {
       // font-weight: bold
+   
+    }
 
-    &--trash
-      text-decoration: line-through
+    &--trash {
+      text-decoration: line-through;
+    }
+  }
 
   ///////////////////////
 
-  .doc-chooser
+  .doc-chooser {
     // $offset-top: 3px // flex alignment won't work, hence empirical value
 
     // padding-top: $offset-top
+ 
+  }
 
   ///////////////////////
-
+}
 
 ///////////////////////////////////////////////////:
 
-.rating-group
+.rating-group {
   // $offset-top: 3px // flex alignment won't work, hence empirical value
 
-  display: flex
+  display: flex;
+
   // padding-top: $offset-top
 
-  &__action
+  &__action {
     // @XXX Glyphicon icons lack of homogeneous width
-    width: 14px
-    margin-right: space-x(1)
+    width: 14px;
+    margin-right: space-x(1);
+  }
+}
 
 ///////////////////////////////////////////////////:
 
-.loaded-ngrams-table-header
-  display: flex
-  margin-top: space-x(4)
+.loaded-ngrams-table-header {
+  display: flex;
+  margin-top: space-x(4);
 
-  &__search
-    flex-basis: 380px
-    flex-grow: 0
-    flex-shrink: 1
+  &__search {
+    flex-basis: 380px;
+    flex-grow: 0;
+    flex-shrink: 1;
+  }
+}
 
 ///////////////////////////////////////////////////:
 
-.ngrams-table-search-button
-
-  .input-group-text
+.ngrams-table-search-button {
+  .input-group-text {
     // @XXX Glyphicon icons lack of homogeneous width
-    width: 41px
+    width: 41px;
 
     // @XXX Bootstrap adding unwanted `z-index` on "_input-group.scss"
-    z-index: initial
+    z-index: initial;
+  }
+}
 
 ///////////////////////////////////////////////////:
 
-.ngrams-table-container
-
-  &__navigation
-    display: flex
-    justify-content: space-between
-    align-items: center
-    margin-top: space-x(2)
-    margin-bottom: space-x(2)
-
-  &__add-term
-    margin-top: space-x(1.5)
-    margin-left: space-x(1.5)
-    display: flex
-    align-items: center
-    gap: space-x(1)
-    font-size: 14px
-
-    &::before
-      $offset-y: 1px
-
-      content: "└"
-      color: $gray-400
-      font-size: 18px
-      line-height: 0
-      position: relative
-      top: $offset-y
-      padding-right: space-x(1)
-
-  &__selection-cta
-    margin-left: space-x(1.5)
-    display: flex
-    align-items: center
-    gap: space-x(1)
-    font-size: 15px
-
-  &__table-wrapper
+.ngrams-table-container {
+  &__navigation {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: space-x(2);
+    margin-bottom: space-x(2);
+  }
+
+  &__add-term {
+    margin-top: space-x(1.5);
+    margin-left: space-x(1.5);
+    display: flex;
+    align-items: center;
+    gap: space-x(1);
+    font-size: 14px;
+
+    &::before {
+      $offset-y: 1px;
+
+      content: "└";
+      color: $gray-400;
+      font-size: 18px;
+      line-height: 0;
+      position: relative;
+      top: $offset-y;
+      padding-right: space-x(1);
+    }
+  }
+
+  &__selection-cta {
+    margin-left: space-x(1.5);
+    display: flex;
+    align-items: center;
+    gap: space-x(1);
+    font-size: 15px;
+  }
+
+  &__table-wrapper {
     // @XXX: reset "main-page__main-route" wrapper margin
     //       see Gargantext.Components.Router)
-    margin-left: - space-x(2)
-    margin-right: - space-x(2)
-    margin-bottom: - space-x(2) // (+ another trimmed gutter)
-
-  &__actions
-    display: flex
-    align-items: center
-    justify-content: space-between
-    background-color: $body-bg
-    position: sticky
-    top: $topbar-height
-    z-index: z-index('main', 'topbar')
-    padding: $card-spacer-y space-x(2)
-    border-bottom: 2px solid $border-color
-
-  &__table
-    display: flex
-    gap: space-x(2)
-
-    .ngrams-tree-edit-real
-      $width: 416px
-      $min-width: 264px
-      $empirical-action-row-height: 64px
-      $offset-y: space-x(2)
-
-      width: $width
-      min-width: $min-width
-      flex-grow: 0
-      flex-shrink: 1
-
-      align-self: flex-start
-      position: sticky
-      margin-top: $offset-y
-      margin-bottom: $offset-y
-      top: calc( #{$topbar-height} + #{$empirical-action-row-height} + #{$offset-y} )
+    margin-left: -(space-x(2));
+    margin-right: -(space-x(2));
+    margin-bottom: -(space-x(2));
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: $body-bg;
+    position: sticky;
+    top: $topbar-height;
+    z-index: z-index("main", "topbar");
+    padding: $card-spacer-y space-x(2);
+    border-bottom: 2px solid $border-color;
+  }
+
+  &__table {
+    display: flex;
+    gap: space-x(2);
+
+    .ngrams-tree-edit-real {
+      $width: 416px;
+      $min-width: 264px;
+      $empirical-action-row-height: 64px;
+      $offset-y: space-x(2);
+
+      width: $width;
+      min-width: $min-width;
+      flex-grow: 0;
+      flex-shrink: 1;
+      align-self: flex-start;
+      position: sticky;
+      margin-top: $offset-y;
+      margin-bottom: $offset-y;
+      top: calc( #{$topbar-height} + #{$empirical-action-row-height} + #{$offset-y} );
+    }
 
     // reduce top border → due to the "__actions" bottom one
-    thead th
-      border-top-width: 0
+    thead th {
+      border-top-width: 0;
+    }
 
-    tbody
-      padding-left: $card-spacer-x
-      padding-right: $card-spacer-x
+    tbody {
+      padding-left: $card-spacer-x;
+      padding-right: $card-spacer-x;
+    }
+  }
 
-
-  &__table
-    $select-column-width: 50px
-    $score-column-width: 25%
-    $score-column-min-width: 280px
+  &__table {
+    $select-column-width: 50px;
+    $score-column-width: 25%;
+    $score-column-min-width: 280px;
 
     /// as of now (one-based index):
     /// nth(1) → "Select"
@@ -173,108 +194,136 @@
 
     // (header)
     th:nth-child(1),
-    th:nth-child(2)
-      width: $select-column-width
+    th:nth-child(2) {
+      width: $select-column-width;
+
       // padding-left: space-x(4)
-      input
-        @include clickable
-    th:nth-child(3)
-      width: $score-column-width
-      min-width: $score-column-min-width
+      input {
+        @include clickable;
+      }
+    }
+
+    th:nth-child(3) {
+      width: $score-column-width;
+      min-width: $score-column-min-width;
+    }
 
     // (rows)
     td:nth-child(1),
-    th:nth-child(2)
+    th:nth-child(2) {
       // padding: initial
 
-      div
-        $offset-y: 14px
+      div {
+        $offset-y: 14px;
 
-        @include clickable
+        @include clickable;
+
+        height: 100%;
 
-        height: 100%
         // padding-left: space-x(4)
         // padding-top: $offset-y
-    td:nth-child(3)
+     
+      }
+    }
+
+    td:nth-child(3) {
       // padding-left: space-x(4)
       // margin-left: space-x(1.5)
-    td:nth-child(4)
-
-      .tree-loaded-plus
-        $offset-y: 1px
-
-        visibility: hidden
-        position: relative
-        top: $offset-y
-        margin-left: space-x(1)
-
-        .fa-plus-minus:before
-          font-size: .85rem
-          line-height: .85rem
-
-    tr:hover
-
-      .tree-loaded-plus
-        visibility: unset
-
+   
+    }
+
+    td:nth-child(4) {
+      .tree-loaded-plus {
+        $offset-y: 1px;
+
+        visibility: hidden;
+        position: relative;
+        top: $offset-y;
+        margin-left: space-x(1);
+
+        .fa-plus-minus:before {
+          font-size: 0.85rem;
+          line-height: 0.85rem;
+        }
+      }
+    }
+
+    tr:hover {
+      .tree-loaded-plus {
+        visibility: unset;
+      }
+    }
+  }
+}
 
 ///////////////////////////////////////////////////:
 
-.ngrams-tree-edit-real
-  border-color: $primary
+.ngrams-tree-edit-real {
+  border-color: $primary;
 
-  &__actions
-    display: flex
-    margin-top: space-x(2)
+  &__actions {
+    display: flex;
+    margin-top: space-x(2);
 
-    .b-button
-      margin-right: space-x(1)
+    .b-button {
+      margin-right: space-x(1);
+    }
+  }
 
-  .ngrams-tree-loaded-node a:hover
-    text-decoration: line-through
+  .ngrams-tree-loaded-node a:hover {
+    text-decoration: line-through;
+  }
+}
 
 //////////////////////////////////////////////////
 
-.ngrams-tree-loaded-node
+.ngrams-tree-loaded-node {
+  &--first-child::before,
+  &--grand-child::before {
+    color: $gray-400;
+    font-size: 11px;
+    margin-right: space-x(0.5);
 
+    @include right-handed {
+      content: "└";
+    }
 
-  &--first-child::before,
-  &--grand-child::before
-    color: $gray-400
-    font-size: 11px
-    margin-right: space-x(0.5)
 
-    @include right-handed
-      content: "└"
-    @include left-handed
-      content: "┘"
+    @include left-handed {
+      content: "┘";
+    }
+  }
 
-  &--first-child
+  &--first-child {
     // empirical value where the child separator aligns with its parent text
-    $child-offset: -2px
+    $child-offset: -2px;
 
-    margin-left: -2px
+    margin-left: -2px;
+  }
 
-  &--grand-child
+  &--grand-child {
     // empirical value where the child separator aligns with its parent text
-    $child-offset: 13px
+    $child-offset: 13px;
 
-    margin-left: 13px
+    margin-left: 13px;
+  }
+}
 
 ////////////////////////////////////////////////////////
 
-.table-header-rename
-  margin-bottom: space-x(1)
+.table-header-rename {
+  margin-bottom: space-x(1);
 
-  &__title
-    display: flex
-    align-items: center
+  &__title {
+    display: flex;
+    align-items: center;
 
-    &__text
-      font-size: $h3-font-size
-      font-family: $headings-font-family
+    &__text {
+      font-size: $h3-font-size;
+      font-family: $headings-font-family;
+    }
 
-    &__line
+    &__line {
       // (?) This is a peculiar line directly coming from the legacy style
       //     It originaly was a solid 2px black one, that added to much
       //     emphasize comparing to the surrounding gray border and lighter
@@ -284,58 +333,76 @@
       //     previous decision on it, we can only make assumption here. Maybe
       //     the line was intended to bring the page title out, as we can see
       //     on the likes on some academing print paper
-      border-bottom: 1px solid $gray-200
-      border-top: none
-      // (?) strange behavior where browser engine add it by itself
-      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
+      border-bottom: 1px solid $gray-200;
+      border-top: none;
 
-
-.table-header-rename-edition
-  margin-top: space-x(1)
-  padding: $card-spacer-y $card-spacer-y
-
-  .form-group
-    display: flex
-    align-items: baseline
-    margin-bottom: space-x(0.75)
+      // (?) strange behavior where browser engine add it by itself
+      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;
+  }
+}
+
+.table-header-rename-edition {
+  margin-top: space-x(1);
+  padding: $card-spacer-y $card-spacer-y;
+
+  .form-group {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: space-x(0.75);
 
     // remove "bootstrap" not-needed-here rule
-    flex-wrap: initial
+    flex-wrap: initial;
+  }
 
-  .form-group__label .b-icon
+  .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
-    text-align: center
-
-.side-panel
-  z-index: 10
-  .ngrams-doc-list
-    .list-group
-      max-height: 40em
-      overflow-y: scroll
-      .context-item-title
-        line-height: 1.3
-        margin-bottom: 4px
-      .context-item-source
-        color: $gray-600
-        font-variant-caps: small-caps
-        font-size: 15px
-      .context-item-date
-        color: $gray-600
-        font-size: .85rem
-
-.tree-expanded
-  padding-top: 12px
-  padding-bottom: 12px
+    $icon-width: 16px;
+
+    margin-right: space-x(1);
+    width: $icon-width;
+    font-size: 14px;
+    text-align: center;
+  }
+}
+
+.side-panel {
+  z-index: 10;
+
+  .ngrams-doc-list {
+    .list-group {
+      max-height: 40em;
+      overflow-y: scroll;
+
+      .context-item-title {
+        line-height: 1.3;
+        margin-bottom: 4px;
+      }
+
+      .context-item-source {
+        color: $gray-600;
+        font-variant-caps: small-caps;
+        font-size: 15px;
+      }
+
+      .context-item-date {
+        color: $gray-600;
+        font-size: 0.85rem;
+      }
+    }
+  }
+}
+
+.tree-expanded {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}

src/sass/_legacy/_login.sass

-.login-modal
-
-  // making ".thead" small, but not its affiliated ".tbody"
-  thead th
-    padding: $table-cell-padding-sm
-
-  &__active-places
-
-    &__actions
-      display: flex
-      gap: space-x(3.5)
-
-//////////////////////////////////:
-
-.login-modal-form
-  $cta-width: 200px
-  $form-width: 520px
-
-  &__title
-    position: relative
-    background-color: $border-color
-    padding: $card-spacer-y $card-spacer-x
-    text-align: center
-    // (?) dirty negative margins to overlap the ".modal-body" paddings
-    margin-top: - $modal-inner-padding
-    margin-left: - $modal-inner-padding
-    margin-right: - $modal-inner-padding
-
-    &__return
-      @include centered
-      position: absolute
-      left: space-x(3.5)
-
-    &__text
-      font-family: $font-family-monospace
-      font-size: 20px
-      font-weight: bold
-
-
-  &__separator
-    padding: $card-spacer-y calc(2* #{ $card-spacer-x })
-    position: relative
-
-    &__text
-      @include centered
-      position: absolute
-      display: inline-block
-      padding-left: space-x(4)
-      padding-right: space-x(4)
-      font-family: $headings-font-family
-      font-size: 24px
-      background-color: $modal-content-bg
-
-  &__request-access
-    margin-top: calc(3 * #{ $card-spacer-y})
-    margin-left: auto
-    margin-right: auto
-    margin-bottom: $card-spacer-y
-    padding: $btn-padding-y-lg $btn-padding-x-lg
-    width: $cta-width
-    display: block
-    font-weight: bold
-
-  &__log-in
-    padding: $btn-padding-y-lg $btn-padding-x-lg
-    width: $cta-width
-    margin-bottom: calc(2 * #{ $card-spacer-y})
-    margin-left: auto
-    margin-right: auto
-    margin-top: $card-spacer-y
-    display: block
-    font-weight: bold
-
-  &__form
-    margin: 0 auto
-    width: $form-width
-
-  &__error
-    margin-bottom: $form-group-margin-bottom
-    color: $danger
-    text-align: center
-
-//////////////////////////////////////////////////////////
-
-.forgot-password-form
-  $cta-width: 200px
-  $form-width: 520px
-
-
-  &__title
-    position: relative
-    background-color: $border-color
-    padding: $card-spacer-y $card-spacer-x
-    text-align: center
-    // (?) dirty negative margins to overlap the ".modal-body" paddings
-    margin-top: - $modal-inner-padding
-    margin-left: - $modal-inner-padding
-    margin-right: - $modal-inner-padding
-
-    &__return
-      @include centered
-      position: absolute
-      left: space-x(3.5)
-
-    &__text
-      font-family: $font-family-monospace
-      font-size: 20px
-      font-weight: bold
-
-  &__subtitle
-    padding-top: calc(2 * #{ $card-spacer-y})
-    padding-left: calc(2* #{ $card-spacer-x })
-    padding-right: calc(2* #{ $card-spacer-x })
-    padding-bottom: $card-spacer-y
-    text-align: center
-    font-family: $headings-font-family
-    font-size: 24px
-
-  &__submit
-    padding: $btn-padding-y-lg $btn-padding-x-lg
-    width: $cta-width
-    margin-bottom: calc(2 * #{ $card-spacer-y})
-    margin-left: auto
-    margin-right: auto
-    margin-top: $card-spacer-y
-    display: block
-    font-weight: bold
-
-  &__form
-    margin: 0 auto
-    width: $form-width
-
-  &__error
-    margin-bottom: $form-group-margin-bottom
-    color: $danger
-    text-align: center
-
-  &__success
-    margin-bottom: $form-group-margin-bottom
-    color: $success
-    text-align: center

src/sass/_legacy/_login.scss

+.login-modal {
+  // making ".thead" small, but not its affiliated ".tbody"
+  thead th {
+    padding: $table-cell-padding-sm;
+  }
+
+  &__active-places {
+    &__actions {
+      display: flex;
+      gap: space-x(3.5);
+    }
+  }
+}
+
+//////////////////////////////////:
+
+.login-modal-form {
+  $cta-width: 200px;
+  $form-width: 520px;
+
+  &__title {
+    position: relative;
+    background-color: $border-color;
+    padding: $card-spacer-y $card-spacer-x;
+    text-align: center;
+
+    // (?) dirty negative margins to overlap the ".modal-body" paddings
+    margin-top: -$modal-inner-padding;
+    margin-left: -$modal-inner-padding;
+    margin-right: -$modal-inner-padding;
+
+    &__return {
+      @include centered;
+
+      position: absolute;
+      left: space-x(3.5);
+    }
+
+    &__text {
+      font-family: $font-family-monospace;
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  &__separator {
+    padding: $card-spacer-y calc(2* #{$card-spacer-x});
+    position: relative;
+
+    &__text {
+      @include centered;
+
+      position: absolute;
+      display: inline-block;
+      padding-left: space-x(4);
+      padding-right: space-x(4);
+      font-family: $headings-font-family;
+      font-size: 24px;
+      background-color: $modal-content-bg;
+    }
+  }
+
+  &__request-access {
+    margin-top: calc(3 * #{$card-spacer-y});
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: $card-spacer-y;
+    padding: $btn-padding-y-lg $btn-padding-x-lg;
+    width: $cta-width;
+    display: block;
+    font-weight: bold;
+  }
+
+  &__log-in {
+    padding: $btn-padding-y-lg $btn-padding-x-lg;
+    width: $cta-width;
+    margin-bottom: calc(2 * #{$card-spacer-y});
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: $card-spacer-y;
+    display: block;
+    font-weight: bold;
+  }
+
+  &__form {
+    margin: 0 auto;
+    width: $form-width;
+  }
+
+  &__error {
+    margin-bottom: $form-group-margin-bottom;
+    color: $danger;
+    text-align: center;
+  }
+}
+
+//////////////////////////////////////////////////////////
+
+.forgot-password-form {
+  $cta-width: 200px;
+  $form-width: 520px;
+
+  &__title {
+    position: relative;
+    background-color: $border-color;
+    padding: $card-spacer-y $card-spacer-x;
+    text-align: center;
+
+    // (?) dirty negative margins to overlap the ".modal-body" paddings
+    margin-top: -$modal-inner-padding;
+    margin-left: -$modal-inner-padding;
+    margin-right: -$modal-inner-padding;
+
+    &__return {
+      @include centered;
+
+      position: absolute;
+      left: space-x(3.5);
+    }
+
+    &__text {
+      font-family: $font-family-monospace;
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  &__subtitle {
+    padding-top: calc(2 * #{$card-spacer-y});
+    padding-left: calc(2* #{$card-spacer-x});
+    padding-right: calc(2* #{$card-spacer-x});
+    padding-bottom: $card-spacer-y;
+    text-align: center;
+    font-family: $headings-font-family;
+    font-size: 24px;
+  }
+
+  &__submit {
+    padding: $btn-padding-y-lg $btn-padding-x-lg;
+    width: $cta-width;
+    margin-bottom: calc(2 * #{$card-spacer-y});
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: $card-spacer-y;
+    display: block;
+    font-weight: bold;
+  }
+
+  &__form {
+    margin: 0 auto;
+    width: $form-width;
+  }
+
+  &__error {
+    margin-bottom: $form-group-margin-bottom;
+    color: $danger;
+    text-align: center;
+  }
+
+  &__success {
+    margin-bottom: $form-group-margin-bottom;
+    color: $success;
+    text-align: center;
+  }
+}

src/sass/_legacy/_menu.sass

-.main-topbar
-  position: sticky
-  top: 0
-  z-index: z-index('main', 'topbar')
-  height: 40px
-
-  .nav-item a:hover
-    text-decoration: none
-
-  select
-    padding-top: 0
-    padding-bottom: 0
-    height: 2rem
-
-  &__theme-switcher,
-  &__lang-switcher,
-  &__tree-switcher
-    margin-right: space-x(1)
-
-  &__tree-switcher
-    padding: 0.15rem 0.5rem
-
-  // add hovering effect
-  &.navbar-dark .navbar-text:hover
-    color: $navbar-dark-hover-color
-
-  // remove Bootstrap native rules
-  &__hand-button .nav-link,
-  &__help-button .nav-link
-    padding-left: initial
-    padding-right: initial
-  &__logo
-    margin-right: initial
-    img
-      max-width: none
-
-  @include right-handed
-    flex-direction: row
-
-    &__logo
-      margin-left: 0
-      margin-right: space-x(2)
-
-    &__hand-button
-      margin-left: space-x(2)
-      margin-right: space-x(1)
-
-    &__help-button
-      margin-left: space-x(1)
-      margin-right: space-x(2)
-
-  @include left-handed
-    flex-direction: row-reverse
-
-    &__logo
-      margin-left: space-x(2)
-      margin-right: 0
-
-    &__hand-button
-      margin-left: space-x(1)
-      margin-right: space-x(2)
-
-    &__help-button
-      margin-left: space-x(2)
-      margin-right: space-x(1)
-
-
-#corporatop.nav-tabs > li
-    padding-left: 1
-    padding-right: 1
-
-#corporatop.nav-tabs > li > a
-    padding-top: 8
-    padding-bottom: 8
-    line-height: .85
-    margin-bottom: -5px
-
-.spacing-class
-  margin-right: 10px
-
-.exportbtn
-    /* border: 1px solid #333 */
-    margin-top:17px /* valigns with bootstrap h2 */
-
-.btn .glyphicon
-    /* glyphicons are always rendered too high within bootstrap buttons */
-    vertical-align: middle
-
-
-/* graph name => editable input => submitName() => minimsg */
-.editable
-    color: grey
-
-#graphname-edit
-    color: white
-    background-color: transparent
-    border: none
-    max-width: 8em
-
-.minimsg
-  font-size: .7em
-  padding: 7p0x 9px
-
-.minimsg *
-  line-height: 100%
-
-.tile-menu
-
-  &__item
-
-    .fa
-      margin-right: space-x(1)
-
-.dropdown
-  .dropdown-item
-    padding: 0.25rem 0
-    a
-      padding: 0 1rem
-      display: block
-      span
-        min-width: 24px
-        text-align: center
-

src/sass/_legacy/_menu.scss

+.main-topbar {
+  position: sticky;
+  top: 0;
+  z-index: z-index("main", "topbar");
+  height: 40px;
+
+  .nav-item a:hover {
+    text-decoration: none;
+  }
+
+  select {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 2rem;
+  }
+
+  &__theme-switcher,
+  &__lang-switcher,
+  &__tree-switcher {
+    margin-right: space-x(1);
+  }
+
+  &__tree-switcher {
+    padding: 0.15rem 0.5rem;
+  }
+
+  // add hovering effect
+  &.navbar-dark .navbar-text:hover {
+    color: $navbar-dark-hover-color;
+  }
+
+  // remove Bootstrap native rules
+  &__hand-button .nav-link,
+  &__help-button .nav-link {
+    padding-left: initial;
+    padding-right: initial;
+  }
+
+  &__logo {
+    margin-right: initial;
+
+    img {
+      max-width: none;
+    }
+  }
+
+  @include right-handed {
+    flex-direction: row;
+
+    &__logo {
+      margin-left: 0;
+      margin-right: space-x(2);
+    }
+
+    &__hand-button {
+      margin-left: space-x(2);
+      margin-right: space-x(1);
+    }
+
+    &__help-button {
+      margin-left: space-x(1);
+      margin-right: space-x(2);
+    }
+  }
+
+
+  @include left-handed {
+    flex-direction: row-reverse;
+
+    &__logo {
+      margin-left: space-x(2);
+      margin-right: 0;
+    }
+
+    &__hand-button {
+      margin-left: space-x(1);
+      margin-right: space-x(2);
+    }
+
+    &__help-button {
+      margin-left: space-x(2);
+      margin-right: space-x(1);
+    }
+  }
+}
+
+#corporatop.nav-tabs > li {
+  padding-left: 1;
+  padding-right: 1;
+}
+
+#corporatop.nav-tabs > li > a {
+  padding-top: 8;
+  padding-bottom: 8;
+  line-height: 0.85;
+  margin-bottom: -5px;
+}
+
+.spacing-class {
+  margin-right: 10px;
+}
+
+.exportbtn {
+  /* border: 1px solid #333 */
+  margin-top:17px /* valigns with bootstrap h2 */ {}
+}
+
+.btn .glyphicon {
+  /* glyphicons are always rendered too high within bootstrap buttons */
+  vertical-align: middle;
+}
+
+/* graph name => editable input => submitName() => minimsg */
+.editable {
+  color: grey;
+}
+
+#graphname-edit {
+  color: white;
+  background-color: transparent;
+  border: none;
+  max-width: 8em;
+}
+
+.minimsg {
+  font-size: 0.7em;
+  padding: 7p0x 9px;
+}
+
+.minimsg * {
+  line-height: 100%;
+}
+
+.tile-menu {
+  &__item {
+    .fa {
+      margin-right: space-x(1);
+    }
+  }
+}
+
+.dropdown {
+  .dropdown-item {
+    padding: 0.25rem 0;
+
+    a {
+      padding: 0 1rem;
+      display: block;
+
+      span {
+        min-width: 24px;
+        text-align: center;
+      }
+    }
+  }
+}

src/sass/_legacy/_phylo.scss

@@ -344,8 +344,8 @@ $decreasing-color: #11638F;
     width: $size;
     // (?) `centered` mixin will not work here, due to Bootstrap process
     //     interfering with the transform rule
-    top: calc( 50% - #{ $size / 2 } );
-    left: calc( 50% - #{ $size / 2 } );
+    top: calc( 50% - ($size / 2 ) );
+    left: calc( 50% - ($size / 2 ) );
   }
 
   &__frame {

src/sass/_legacy/_search.sass

-
-.search-modal
-    &__results
-        height: auto
-        overflow-x: hidden
-
-        .result
-            border-bottom: 1px solid $gray-300
-            position: relative
-
-            .node-path
-                color: $gray-600

src/sass/_legacy/_search.scss

+.search-modal {
+    &__results {
+      height: auto;
+      overflow-x: hidden;
+  
+      .result {
+        border-bottom: 1px solid $gray-300;
+        position: relative;
+  
+        .node-path {
+          color: $gray-600;
+        }
+      }
+    }
+  }
+  
\ No newline at end of file

src/sass/_legacy/_styles.sass

-// cf. "Resize" hook
-.no-user-select
-  user-select: none
-
-.no-pointer-events
-  pointer-events: none
-
-.side-panel
-  background-color: #fff
-  padding: 0.3em
-  width: 50vw
-  top: 3.7em
-  position: fixed
-  z-index: 1
-
-  .list-group
-    .list-group-item-heading
-      display: inline-block
-      width: 60px
-
-  @include right-handed
-    right: space-x(1)
-
-    .header
-      float: right
-
-  @include left-handed
-    left: space-x(1)
-
-    .header
-      float: left
-
-  // @TODO: better side panel management
-  .texts-sidepanel
-
-    &__header
-      padding: $card-spacer-y $card-spacer-x 0
-      font-size: 20px
-      text-align: right
-
-    &__body
-      padding-left: $card-spacer-x
-      padding-right: $card-spacer-x
-
-      .document-layout__title
-        font-size: 21px
-
-      .document-layout__abstract__content
-        // max-height: 200px
-        // overflow-y: scroll
-        font-size: 16px
-
-
-
-/* */
-
-.join-button
-  padding-bottom: 100px
-  padding-top: 100px
-
-// Add pointer to Bootstrap Select
-select.form-control
-  cursor: pointer
-
-
-#app
-  width: 100%
-
-.router
-
-  &__inner
-    display: flex
-    position: relative
-
-    @include left-handed
-      flex-direction: row-reverse
-
-    @include right-handed
-      flex-direction: row
-
-  &__aside
-    // @TODO: topbar width
-    $offset-y: 56px
-    $min-width: 200px
-    $default-width: 280px
-
-    flex-grow: 0
-    flex-shrink: 0
-    width: $default-width
-    min-width: $min-width
-    height: calc(100vh - #{ $offset-y })
-    z-index: z-index('main', 'sidebar')
-
-    &__inner
-      height: inherit
-      width: inherit
-      min-width: inherit
-      position: fixed
-
-    &__handle
-      min-width: inherit
-      width: inherit
-      height: inherit
-      position: fixed
-      z-index: z-index('main', 'handlebar')
-      pointer-events: none
-
-      &__action
-        $handle-width: 8px
-
-        width: $handle-width
-        height: inherit
-        background: transparent
-        cursor: col-resize
-        position: absolute
-        right: - #{ $handle-width / 2 }
-        pointer-events: all
-
-
-  &__body
-    position: relative
-    flex-grow: 1
-    flex-shrink: 1
-
-
-.main-page
-  $self: &
-  $page-padding: space-x(3) space-x(4)
-
-  position: relative
-
-  &__main-row
-    display: flex
-
-    &--with-y-tiles
-
-      #{ $self }__main-route
-        width: 60%
-      #{ $self }__vertical-tiles
-        width: 40%
-
-    &--only-y-tiles
-      // ensure minimum height, so that the border delimiting "main route" and
-      // its "vertical tiles" will not end abruptly
-      min-height: calc( 100vh - #{ $topbar-height })
-
-  // main route ~ main tile
-  &__main-route
-    padding: $page-padding
-    width: 100%
-
-  // optional vertical tiles ~ y axis column
-  &__vertical-tiles
-    display: flex
-    flex-direction: column
-
-  // optional horizontal tiles ~ x axis row
-  &__horizontal-tiles
-    display: flex
-    flex-direction: row
-
-    // dynamic width according to number of tiles
-    @for $i from 1 through 10
-
-      &--#{ $i } .tile-block
-        width: calc( 100% / #{ $i })
-
-.tile-block
-  $tile-padding: space-x(0.5) space-x(2) space-x(1.5)
-
-  &__header
-    display: flex
-
-    @include right-handed
-      justify-content: flex-end
-
-    @include left-handed
-      justify-content: flex-start
-
-  &__body
-    padding: $tile-padding
-
-.action-upload-button
-  $spinner-size: 23px // @TODO use futur bootstrap button deferred status here
-  $spinner-left-offset: -32px
-  $spinner-top-offset: 6px
-
-  position: relative
-
-  &__spinner
-    position: absolute
-    width: $spinner-size
-    height: $spinner-size
-    left: $spinner-left-offset
-    top: $spinner-top-offset
-
-// @TODO expand <tabs> to fit a ".main-page__main-route" with its padding
-//       really KISS solution, better prevent the whole padding set (as the
-//       likes of many pages, such as the Graph Explorer one)
-.nodes-lists-layout-tabs,
-.nodes-texts-layout-tabs,
-.nodes-annuaire-layout-tabs
-
-  .nav.nav-tabs
-    margin-left: -32px
-    margin-right: -32px
-    padding-left: 32px
-    padding-right: 32px
-
-
-.jitsi-iframe
-  height: 70em
-
-
-// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
-.progress-pie
-  background: rgba(51, 122, 183, 0.1)
-  border-radius: 100%
-  height: calc(var(--size, 14) * 1px)
-  overflow: hidden
-  position: relative
-  width: calc(var(--size, 14) * 1px)
-
-  .progress-pie-segment
-    --a: calc(var(--over50, 0) * -100%)
-    --b: calc((1 + var(--over50, 0)) * 100%)
-    --degrees: calc((var(--offset, 0) / 100) * 360)
-    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
-    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
-    height: 100%
-    position: absolute
-    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg))
-    transform-origin: 50% 100%
-    width: 100%
-    z-index: calc(1 + var(--over50))
-
-    &:after,
-    &:before
-      background: var(--bg, rgb(51, 122, 183))
-      content: ''
-      height: 100%
-      position: absolute
-      width: 100%
-
-    &:before
-      --degrees: calc((var(--value, 45) / 100) * 360)
-      transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg))
-      transform-origin: 50% 0%
-
-    &:after
-      opacity: var(--over50, 0)
-
-/////////////////////////////////////////////:
-
-// @TODO better responsive display for tablet screens
-.home-title
-  $raw-logo-width: 334px
-
-  padding: space-x(3)
-  display: flex
-  gap: space-x(3)
-  margin-bottom: space-x(5)
-
-  &__logo
-    flex-basis: $raw-logo-width
-    flex-shrink: 1
-
-  &__jumbo
-    flex-grow: 1
-    position: relative
-
-  &__folders
-
-    &:not(:first-child)
-      margin-top: space-x(3)
-
-
-.home-tutorial
-  // for preload purpose
-  $card-estimated-width: 712px
-  $card-estimated-height: 164px
-
-  text-align: center
-
-  .card
-    min-width: $card-estimated-width
-    display: inline-flex
-
-    &:not(:last-child)
-      margin-bottom: space-x(3)
-
-  .card-body
-    min-height: $card-estimated-height
-
-  .folder-view
-    display: inline-flex
-    flex-wrap: unset
-
-
-.home-license
-  font-size: 15px
-
-  .b-icon
-    font-size: 12px
-
-/////////////////////////////////////////////
-
-.glyphitem
-  top: 0
-  display: inline-block
-  float: right
-  opacity: 0.6
-  padding-right: 5px
-  cursor: pointer
-  transition: transform 0.1s ease-out 0s
-  font-size: 15px
-  text-align: center
-
-  &:hover
-    display: inline-block
-    opacity: 1
-    transform: scale(1.4)
-
-/////////////////////////////////////////
-
-.forest-tree-node-modal
-  // will enlarge popup when inner content is larger (see issue #315),
-  // with a minimal width to avoid row item collapsing (see issue #324)
-  width: fit-content
-  min-width: $node-popup-width
-  max-width: 100vw // override Bootstrap modal rules (via sizing props)
-
-.node-popup-tooltip
-
-  .panel-actions
-    font-size: 90%
-    padding-left: space-x(2.5)
-
-    .b-icon
-      margin-right: space-x(1)
-      font-size: 11px
-
-    &__almost-useable
-      color: $almost-useable
-    &__development-in-progress
-      color: $development-in-progress
-    &__ok-to-use
-      color: $ok-to-use
-      // (?) avoid unnecessary informations
-      display: none
-
-  .popup-container
-    display: flex
-    flex-direction: column
-
-    &__header
-      .b-wad
-        .box-wrapper-action-rename .b-icon-button__inner
-          visibility: hidden
-
-        &:hover
-          .box-wrapper-action-rename .b-icon-button__inner
-            visibility: visible
-
-
-    &__body
-      display: flex
-      justify-content: center
-      background-color: $body-bg
-
-    &__body.toolbox-tabs-labels
-      border-bottom: 1px solid $gray-300
-      padding: space-x(2) space-x(7) 0
-
-    &__cta
-      position: relative
-
-      &__button
-        font-size: 20px
-        padding: 0.7rem 1.5rem 0.6rem
-        display: list-item
-        border: 1px solid transparent
-        border-top-left-radius: 0.25rem
-        border-top-right-radius: 0.25rem
-        margin-bottom: -1px
-
-        &:hover, &--active
-          border: 1px solid $gray-300
-
-
-        &--active, &--active:hover
-          
-          border-bottom-color: #fff
-
-
-      &__icon
-        $offset-y: 8px
-        $offset-x: 10px
-
-        position: absolute
-        top: $offset-y
-        right: $offset-x
-        font-size: 11px
-
-      // @XXX SASS lacking of immediate parent selector
-      &--almost-useable .popup-container__cta__icon
-        color: $almost-useable
-      &--development-in-progress .popup-container__cta__icon
-        color: $development-in-progress
-      &--ok-to-use .popup-container__cta__icon
-        color: $ok-to-use
-        // (?) avoid unnecessary informations
-        display: none
-    
-    .toolbox-tab-content
-      padding: space-x(4)
-
-
-  .text-sup
-    vertical-align: super
-    font-size: x-small
-    margin: .33em

src/sass/_legacy/_styles.scss

+@use "sass:math";
+
+// cf. "Resize" hook
+.no-user-select {
+  user-select: none;
+}
+
+.no-pointer-events {
+  pointer-events: none;
+}
+
+.side-panel {
+  background-color: #fff;
+  padding: 0.3em;
+  width: 50vw;
+  top: 3.7em;
+  position: fixed;
+  z-index: 1;
+
+  .list-group {
+    .list-group-item-heading {
+      display: inline-block;
+      width: 60px;
+    }
+  }
+
+  @include right-handed {
+    right: space-x(1);
+
+    .header {
+      float: right;
+    }
+  }
+
+
+  @include left-handed {
+    left: space-x(1);
+
+    .header {
+      float: left;
+    }
+  }
+
+
+  // @TODO: better side panel management
+  .texts-sidepanel {
+    &__header {
+      padding: $card-spacer-y $card-spacer-x 0;
+      font-size: 20px;
+      text-align: right;
+    }
+
+    &__body {
+      padding-left: $card-spacer-x;
+      padding-right: $card-spacer-x;
+
+      .document-layout__title {
+        font-size: 21px;
+      }
+
+      .document-layout__abstract__content {
+        // max-height: 200px
+        // overflow-y: scroll
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+/* */
+
+.join-button {
+  padding-bottom: 100px;
+  padding-top: 100px;
+}
+
+// Add pointer to Bootstrap Select
+select.form-control {
+  cursor: pointer;
+}
+
+#app {
+  width: 100%;
+}
+
+.router {
+  &__inner {
+    display: flex;
+    position: relative;
+
+    @include left-handed {
+      flex-direction: row-reverse;
+    }
+
+
+    @include right-handed {
+      flex-direction: row;
+    }
+  }
+
+  &__aside {
+    // @TODO: topbar width
+    $offset-y: 56px;
+    $min-width: 200px;
+    $default-width: 280px;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: $default-width;
+    min-width: $min-width;
+    height: calc(100vh - #{$offset-y});
+    z-index: z-index("main", "sidebar");
+
+    &__inner {
+      height: inherit;
+      width: inherit;
+      min-width: inherit;
+      position: fixed;
+    }
+
+    &__handle {
+      min-width: inherit;
+      width: inherit;
+      height: inherit;
+      position: fixed;
+      z-index: z-index("main", "handlebar");
+      pointer-events: none;
+
+      &__action {
+        $handle-width: 8px;
+
+        width: $handle-width;
+        height: inherit;
+        background: transparent;
+        cursor: col-resize;
+        position: absolute;
+        right: - math.div($handle-width, 2);
+        pointer-events: all;
+      }
+    }
+  }
+
+  &__body {
+    position: relative;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}
+
+.main-page {
+  $self: &;
+  $page-padding: space-x(3) space-x(4);
+
+  position: relative;
+
+  &__main-row {
+    display: flex;
+
+    &--with-y-tiles {
+      #{$self}__main-route {
+        width: 60%;
+      }
+
+      #{$self}__vertical-tiles {
+        width: 40%;
+      }
+    }
+
+    &--only-y-tiles {
+      // ensure minimum height, so that the border delimiting "main route" and
+      // its "vertical tiles" will not end abruptly
+      min-height: calc( 100vh - #{$topbar-height});
+    }
+  }
+
+  // main route ~ main tile
+  &__main-route {
+    padding: $page-padding;
+    width: 100%;
+  }
+
+  // optional vertical tiles ~ y axis column
+  &__vertical-tiles {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // optional horizontal tiles ~ x axis row
+  &__horizontal-tiles {
+    display: flex;
+    flex-direction: row;
+
+    // dynamic width according to number of tiles
+    @for $i from 1 through 10 {
+      &--#{$i} .tile-block {
+        width: calc( 100% / #{$i});
+      }
+    }
+  }
+}
+
+.tile-block {
+  $tile-padding: space-x(0.5) space-x(2) space-x(1.5);
+
+  &__header {
+    display: flex;
+
+    @include right-handed {
+      justify-content: flex-end;
+    }
+
+
+    @include left-handed {
+      justify-content: flex-start;
+    }
+  }
+
+  &__body {
+    padding: $tile-padding;
+  }
+}
+
+.action-upload-button {
+  $spinner-size: 23px;
+  $spinner-left-offset: -32px;
+  $spinner-top-offset: 6px;
+
+  position: relative;
+
+  &__spinner {
+    position: absolute;
+    width: $spinner-size;
+    height: $spinner-size;
+    left: $spinner-left-offset;
+    top: $spinner-top-offset;
+  }
+}
+
+// @TODO expand <tabs> to fit a ".main-page__main-route" with its padding
+//       really KISS solution, better prevent the whole padding set (as the
+//       likes of many pages, such as the Graph Explorer one)
+.nodes-lists-layout-tabs,
+.nodes-texts-layout-tabs,
+.nodes-annuaire-layout-tabs {
+  .nav.nav-tabs {
+    margin-left: -32px;
+    margin-right: -32px;
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+
+.jitsi-iframe {
+  height: 70em;
+}
+
+// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
+.progress-pie {
+  background: rgba(51, 122, 183, 0.1);
+  border-radius: 100%;
+  height: calc(var(--size, 14) * 1px);
+  overflow: hidden;
+  position: relative;
+  width: calc(var(--size, 14) * 1px);
+
+  .progress-pie-segment {
+    --a: calc(var(--over50, 0) * -100%);
+    --b: calc((1 + var(--over50, 0)) * 100%);
+    --degrees: calc((var(--offset, 0) / 100) * 360);
+    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+    height: 100%;
+    position: absolute;
+    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
+    transform-origin: 50% 100%;
+    width: 100%;
+    z-index: calc(1 + var(--over50));
+
+    &:after,
+    &:before {
+      background: var(--bg, rgb(51, 122, 183));
+      content: "";
+      height: 100%;
+      position: absolute;
+      width: 100%;
+    }
+
+    &:before {
+      --degrees: calc((var(--value, 45) / 100) * 360);
+      transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
+      transform-origin: 50% 0%;
+    }
+
+    &:after {
+      opacity: var(--over50, 0);
+    }
+  }
+}
+
+/////////////////////////////////////////////:
+
+// @TODO better responsive display for tablet screens
+.home-title {
+  $raw-logo-width: 334px;
+
+  padding: space-x(3);
+  display: flex;
+  gap: space-x(3);
+  margin-bottom: space-x(5);
+
+  &__logo {
+    flex-basis: $raw-logo-width;
+    flex-shrink: 1;
+  }
+
+  &__jumbo {
+    flex-grow: 1;
+    position: relative;
+  }
+
+  &__folders {
+    &:not(:first-child) {
+      margin-top: space-x(3);
+    }
+  }
+}
+
+.home-tutorial {
+  // for preload purpose
+  $card-estimated-width: 712px;
+  $card-estimated-height: 164px;
+
+  text-align: center;
+
+  .card {
+    min-width: $card-estimated-width;
+    display: inline-flex;
+
+    &:not(:last-child) {
+      margin-bottom: space-x(3);
+    }
+  }
+
+  .card-body {
+    min-height: $card-estimated-height;
+  }
+
+  .folder-view {
+    display: inline-flex;
+    flex-wrap: unset;
+  }
+}
+
+.home-license {
+  font-size: 15px;
+
+  .b-icon {
+    font-size: 12px;
+  }
+}
+
+/////////////////////////////////////////////
+
+.glyphitem {
+  top: 0;
+  display: inline-block;
+  float: right;
+  opacity: 0.6;
+  padding-right: 5px;
+  cursor: pointer;
+  transition: transform 0.1s ease-out 0s;
+  font-size: 15px;
+  text-align: center;
+
+  &:hover {
+    display: inline-block;
+    opacity: 1;
+    transform: scale(1.4);
+  }
+}
+
+/////////////////////////////////////////
+
+.forest-tree-node-modal {
+  // will enlarge popup when inner content is larger (see issue #315),
+  // with a minimal width to avoid row item collapsing (see issue #324)
+  width: fit-content;
+  min-width: $node-popup-width;
+  max-width: 100vw;
+}
+
+.node-popup-tooltip {
+  .panel-actions {
+    font-size: 90%;
+    padding-left: space-x(2.5);
+
+    .b-icon {
+      margin-right: space-x(1);
+      font-size: 11px;
+    }
+
+    &__almost-useable {
+      color: $almost-useable;
+    }
+
+    &__development-in-progress {
+      color: $development-in-progress;
+    }
+
+    &__ok-to-use {
+      color: $ok-to-use;
+
+      // (?) avoid unnecessary informations
+      display: none;
+    }
+  }
+
+  .popup-container {
+    display: flex;
+    flex-direction: column;
+
+    &__header {
+      .b-wad {
+        .box-wrapper-action-rename .b-icon-button__inner {
+          visibility: hidden;
+        }
+
+        &:hover {
+          .box-wrapper-action-rename .b-icon-button__inner {
+            visibility: visible;
+          }
+        }
+      }
+    }
+
+    &__body {
+      display: flex;
+      justify-content: center;
+      background-color: $body-bg;
+    }
+
+    &__body.toolbox-tabs-labels {
+      border-bottom: 1px solid $gray-300;
+      padding: space-x(2) space-x(7) 0;
+    }
+
+    &__cta {
+      position: relative;
+
+      &__button {
+        font-size: 20px;
+        padding: 0.7rem 1.5rem 0.6rem;
+        display: list-item;
+        border: 1px solid transparent;
+        border-top-left-radius: 0.25rem;
+        border-top-right-radius: 0.25rem;
+        margin-bottom: -1px;
+
+        &:hover, &--active {
+          border: 1px solid $gray-300;
+        }
+
+        &--active, &--active:hover {
+          border-bottom-color: #fff;
+        }
+      }
+
+      &__icon {
+        $offset-y: 8px;
+        $offset-x: 10px;
+
+        position: absolute;
+        top: $offset-y;
+        right: $offset-x;
+        font-size: 11px;
+      }
+
+      // @XXX SASS lacking of immediate parent selector
+      &--almost-useable .popup-container__cta__icon {
+        color: $almost-useable;
+      }
+
+      &--development-in-progress .popup-container__cta__icon {
+        color: $development-in-progress;
+      }
+
+      &--ok-to-use .popup-container__cta__icon {
+        color: $ok-to-use;
+
+        // (?) avoid unnecessary informations
+        display: none;
+      }
+    }
+
+    .toolbox-tab-content {
+      padding: space-x(4);
+    }
+  }
+
+  .text-sup {
+    vertical-align: super;
+    font-size: x-small;
+    margin: 0.33em;
+  }
+}

src/sass/_legacy/_tree.sass

-$forest-layout-top-teaser-height: 24px
-$forest-layout-bottom-teaser-height: 24px // ~line-height to 1.5 (covering tree)
-$node-popup-width: 544px
-
-/////////////////////////////////////////
-
-.maintree
-  $self: &
-  // empirical vertical alignments for folder carets
-  $caret-y-offset: 2px
-
-  position: relative
-
-  // @NOTE #386: React Awesome Popover not suited for the feature UX
-  //           ↪ for now just avoiding to create a new stacking context
-  //             could be a long term issue
-  // z-index: 0 // new stacking context "tree"
-
-  &__node
-    margin-bottom: space-x(0.25)
-    min-width: 0
-
-    a:hover,
-    a:focus
-      text-decoration: none
-      border-bottom: 1px dashed currentColor
-
-  @include right-handed
-    &__node
-      margin-left: space-x(1.75)
-    & > &__node
-      margin-right: space-x(1.75)
-
-  @include left-handed
-    &__node
-      margin-right: space-x(1.75)
-    & > &__node
-      margin-left: space-x(1.75)
-
-  // &--with-child > &__node > &::before
-  //   color: $gray-400
-  //   position: absolute
-  //   font-size: 11px
-  //   top: $caret-y-offset
-  //   // z-index macro-management due to "node__link::before" overlay
-  //   z-index: z-index("tree", "content")
-
-  //   @include right-handed
-  //     content: "└"
-  //   @include left-handed
-  //     content: "┘"
-
-  // for <Cloak> use cases
-  animation: 15ms fade-in
-
-  &--blank
-    @extend %placeholder
-
-    // adding an phase on top of <Cloak> ones
-    // (aim is to only display the cloack fallback when
-    // 1s has passed, in parallel of maintaining the Element
-    // dimension)
-    animation-name: fade-in
-    animation-delay: 100ms
-    animation-duration: 50ms
-    animation-timing-function: ease-in-out
-    animation-fill-mode: forwards
-    opacity: 0
-
-////////////////////////////////////
-
-.mainleaf
-  $self: &
-
-  display: flex
-  align-items: center
-  padding-top: 2px
-  padding-bottom: 2px
-  // forcing inline width to overflow its container width
-  // this is mainly due to the multi-level of nested folders that keeps
-  // increasing the mainleaf width
-  // (as a "min-width" rule instead of "width" to allow the relative stacking
-  // context used for the selected UI border)
-  min-width: 0
-  position: relative
-
-  &:hover
-    background-color: $gray-300
-
-  @include right-handed
-    flex-direction: row
-    padding-right: space-x(2)
-    padding-left: space-x(.5)
-
-  @include left-handed
-    flex-direction: row-reverse
-    padding-left: space-x(2)
-    padding-right: space-x(.5)
-
-  //----------------------------
-
-  &__folder-icon
-    font-size: 14px
-    // @XXX Glyphicon icons lack of homogeneous width
-    width: 16px
-    // z-index macro-management due to "node__link::before" overlay
-    z-index: z-index("tree", "content")
-
-    &--leaf
-      color: $gray-400
-
-    // padding instead of margin will ensure to add a gap for the icon call
-    // to action area
-    @include right-handed
-      padding-right: space-x(1)
-    @include left-handed
-      padding-left: space-x(1)
-
-  //----------------------------
-
-  &__node-icon
-    position: relative
-    font-size: 14px
-    // @XXX Glyphicon icons lack of homogeneous width
-    //      (this also means that we can not align harmoniously the leaf
-    //      content)
-    width: 14px
-    //      Micromanaging icons width as an attempt of alignment harmony
-    .fa-address-card-o,
-    .fa-newspaper-o
-      font-size: 14px
-    .fa-share-alt,
-    .fa-folder-open-o,
-    .fa-file-code-o,
-    .fa-list,
-    .fa-signal
-      font-size: 15px
-    .fa-user
-      font-size: 17px
-    .fa-lock,
-    .fa-fork
-      font-size: 18px
-    .fa-circle
-      font-size: 20px
-
-    @include right-handed
-      margin-right: space-x(1)
-    @include left-handed
-      margin-left: space-x(1)
-
-  //----------------------------
-
-  &__version-badge
-    // pin the icon on bottom-right of the "&__node-icon"
-    $offset-y: -1px
-    $offset-x: -4px
-
-    position: absolute
-    font-size: 12px
-    background-color: $white
-    border: 1px solid $white
-    border-radius: 50%
-    bottom: $offset-y
-    right: $offset-x
-    z-index: z-index("tree", "badge")
-    height: 14px
-
-    // (?) unknown regresion: empirical offset re-alignement
-    .b-icon-button__inner
-      $offset-y: -3px
-      $offset-x: 1px
-
-      top: $offset-y
-      left: $offset-x
-
-    // (remove hover effect to maintain continuity with folder + node icon
-    // lack of hover effect)
-    &--matched
-      &.b-icon-button,
-      &.b-icon-button:hover
-        color: $success
-    &--mismatched
-      &.b-icon-button,
-      &.b-icon-button:hover
-        color: $warning
-
-  //----------------------------
-
-  &__node-link
-    position: relative
-    font-size: 14px
-    min-width: 0
-
-    @include right-handed
-      margin-right: space-x(1)
-    @include left-handed
-      margin-left: space-x(1)
-
-    // preparing "before" content (see "&--selected", "&--file-dropped")
-    &::before
-      // margin for the before background
-      $overlay-offset: -2px
-      // left extra offset: used to include besides icons, caret, ...
-      $extra-left-overlay-offset: -56px
-      // right extra offset: adding extra margin
-      $extra-right-overlay-offset: - 12px
-
-      position: absolute
-      top: $overlay-offset
-      bottom: $overlay-offset
-      border-radius: $overlay-radius
-
-      @include right-handed
-        left: calc( #{ $overlay-offset } + #{ $extra-left-overlay-offset })
-        right: calc( #{ $overlay-offset } + #{ $extra-right-overlay-offset })
-      @include left-handed
-        right: calc( #{ $overlay-offset } + #{ $extra-left-overlay-offset })
-        left: calc( #{ $overlay-offset } + #{ $extra-right-overlay-offset })
-
-    // creating a new stacking context due to the "::before" overlay
-    & a
-      position: relative
-      span
-        $span-padding: space-x(3)
-        
-        overflow: hidden
-        text-overflow: ellipsis
-        white-space: nowrap
-        display: block
-        
-        @include right-handed
-          padding-right: $span-padding
-
-        @include left-handed
-          padding-left: $span-padding
-
-  //----------------------------
-  $icon-button-margin: space-x(1.75)
-
-  &__settings-icon
-    visibility: hidden
-    position: absolute
-
-  &:hover &__settings-icon
-    visibility: visible
-
-    @include right-handed
-      margin-left: $icon-button-margin
-      right: space-x(2)
-    @include left-handed
-      margin-right: $icon-button-margin
-      left: space-x(2)
-
-  &__pin-icon
-    visibility: hidden
-    position: absolute
-
-  &:hover &__pin-icon
-    visibility: visible
-
-    @include right-handed
-      margin-left: $icon-button-margin
-      right: space-x(8)
-    @include left-handed
-      margin-right: $icon-button-margin
-      left: space-x(8)
-
-  &__update-icon
-    position: absolute
-
-    @include right-handed
-      margin-left: $icon-button-margin
-      right: space-x(5)
-    @include left-handed
-      margin-right: $icon-button-margin
-      left: space-x(5)
-
-  //----------------------------
-
-  // &__update-icon,
-  // &__settings-icon
-    // altering component overlay offset to fit it with the ".mainleaf" overlay
-    // dimension
-    // $aside-icon-offset-y: -5px
-    // $aside-icon-offset-x: -6px
-
-    // &.b-icon-button::before
-    //   top: $aside-icon-offset-y
-    //   bottom: $aside-icon-offset-y
-    //   left: $aside-icon-offset-x
-    //   right: $aside-icon-offset-x
-
-  //----------------------------
-
-  &__progress-bar
-    $progress-bar-width: 64px
-    $progress-bar-height: 8px
-
-    width: $progress-bar-width
-    position: relative
-
-    &::before
-      @include fit-positions(-3px)
-
-      content: ""
-      position: absolute
-      border: 1px solid $info
-      border-radius: $overlay-radius
-
-    .b-progress-bar
-      height: $progress-bar-height
-      background-color: $white
-
-      .progress-text
-        color: $info
-        font-size: 0.55rem
-        line-height: 0.55rem
-        white-space: nowrap
-        overflow: hidden
-
-    @include right-handed
-      margin-left: space-x(2)
-      &:last-child
-        margin-right: space-x(3)
-    @include left-handed
-      margin-right: space-x(2)
-      &:last-child
-        margin-left: space-x(3)
-
-  //----------------------------
-
-  &__version-comparator
-    margin-top: space-x(1)
-
-    li
-      margin-left: space-x(3)
-      list-style-type: disc
-      line-height: 1.4
-
-  //----------------------------
-
-  &--selected
-    background-color: $gray-300
-
-  &--selected &
-
-    // &__node-link::before
-    //   content: ""
-    //   background-color: $gray-100
-
-    &__node-link a
-      color: $primary
-      font-weight: bold
-
-  //----------------------------
-
-  &--file-dropped
-
-    #{ $self }__node-link::before
-      content: ""
-      border: 1px dotted $secondary
-
-  //----------------------------
-
-  &--blank // for <Cloak> use cases
-    $blank-color: $gray-100
-    $blank-link-width: 120px // roughly max size of a truncated node link text
-    $blank-link-height: 12px
-    $blank-link-offset-y: 5px
-
-    color: $blank-color
-
-    #{ $self }__folder-icon
-      visibility: hidden
-
-    // making a text placeholder block
-    #{ $self }__node-link
-
-      &::after
-        content: ""
-        background-color: $blank-color
-        height: $blank-link-height
-        width: $blank-link-width
-        position: absolute
-        top: $blank-link-offset-y
-
-
-.mainleaf-selection-indicator
-  // blank line, but relying on the inserted blank character to set a
-  // line-height → thus, this will define a block with the same height of the
-  // "mainleaf" one
-  @include virtual-space
-  height: fit-content
-
-  top: 0
-  right: 0
-  width: 3px
-  background-color: $primary
-  position: absolute
-
-  // z-index macro-management due to "node__link::before" overlay
-  z-index: z-index("tree", "content")
-
-  @include right-handed
-    right: 0
-    border-top-left-radius: $border-radius
-    border-bottom-left-radius: $border-radius
-
-  @include left-handed
-    left: 0
-    border-top-right-radius: $border-radius
-    border-bottom-right-radius: $border-radius
-
-
-// (?) Chrome engine adds extra height to the overlay embedded settings icon
-//        → set an empirical icon overlay position
-@media screen and (-webkit-min-device-pixel-ratio:0)
-  $icon-overlay-bottom: -5px
-
-  .awesome-popover
-
-    .b-icon-button--overlay::before
-      bottom: $icon-overlay-bottom
-
-// (?) FireFox engine adds extra height to the embedded settings
-//        → set an empirical fixed height on its wrapper to avoid
-//          an height flickering alteration (on mainleaf hover) ;
-//          and modify the icon overlay position
-@-moz-document url-prefix()
-  $simulated-mainleaf-overlay-height: 22.5px
-  $icon-overlay-bottom: -3px
-
-  .awesome-popover
-    max-height: $simulated-mainleaf-overlay-height
-
-    .b-icon-button--overlay::before
-      bottom: $icon-overlay-bottom
-
-////////////////////////////////////////
-
-.subtree
-  $self: &
-
-  &__node
-    margin-top: space-x(0.25)
-
-    &__inner
-      display: flex
-      align-items: center // align icon with text
-      cursor: pointer
-      font-size: 15px
-
-    &__icons
-      display: flex
-
-      .fa
-        margin-left: space-x(0.25)
-        margin-right: space-x(0.25)
-
-    &__text
-      margin-left: space-x(0.5)
-
-    &--can-be-selected
-      text-decoration: underline
-      text-underline-offset: 2px // easing node reading (empirical)
-
-    &--is-selected > &__inner
-      // (only current node, not its children)
-      text-decoration: underline
-      font-weight: bold
-
-    @include right-handed
-
-      &__inner
-        flex-direction: row
-        text-align: left
-
-      &__icons
-        flex-direction: row
-
-      &__children > #{ $self }__node
-        padding-left: space-x(2)
-
-    @include left-handed
-
-      &__inner
-        flex-direction: row-reverse
-        text-align: right
-
-      &__icons
-        flex-direction: row-reverse
-
-      &__children > #{ $self }__node
-        padding-right: space-x(2.5)
-
-
-/////////////////////////////////////////
-
-.frame-search.card
-  // $frame-width: 1000px
-  $frame-height: 600px
-
-  // width: $frame-width
-  height: $frame-height
-
-/////////////////////////////////////////
-
-.forest-layout
-  @include term-window
-
-  overflow-x: clip // due to resizing content
-
-  @include right-handed
-    border-right: 1px solid $border-color
-
-  @include left-handed
-    border-left: 2px solid $border-color
-
-  ///////////////
-
-  @mixin top-teaser()
-    background: linear-gradient(to top, mix-alpha($body-bg, 0%) 0%, mix-alpha($body-bg, 100%) 45%)
-
-  &__actions
-    z-index: 3
-    border-bottom: 1px solid $gray-300
-
-    // $teaser-height: 16px
-
-    // &::after 
-    //   @include top-teaser
-
-    //   content: ""
-    //   z-index: z-index("tile", "top-teaser")
-    //   pointer-events: none
-    //   position: sticky
-    //   top: 0
-    //   height: $teaser-height
-    //   width: 100%
-    //   display: block
-
-
-  &__top_action
-    & > span
-      display: flex
-    button
-      padding-top: 1px !important
-      padding-bottom: 1px !important
-      .b-button__inner
-        display: flex
-        @include right-handed
-          flex-direction: row
-        @include left-handed
-          flex-direction: row-reverse
-
-
-  &__action
-    display: flex
-
-    @include right-handed
-      flex-direction: row
-      padding-left: space-x(2)
-      padding-right: space-x(1)
-
-      &__button
-        margin-right: space-x(2)
-        white-space: nowrap
-
-    @include left-handed
-      flex-direction: row-reverse
-      padding-left: space-x(1)
-      padding-right: space-x(2)
-
-      &__button
-        margin-left: space-x(2)
-
-  ////////////////////////
-
-  &__tree
-    margin-top: space-x(3)
-
-    &:last-child
-      margin-bottom: $forest-layout-bottom-teaser-height
-
-    // remove leaf nested caret for first entry only
-    & > .maintree--with-children > .maintree__node
-
-      &::before,
-      &::after
-        content: none
-
-    // remove horizontal offset for first entry only (see ".maintree")
-    & > .maintree > .maintree__node
-      @include right-handed
-        margin-left: space-x(0.5)
-      @include left-handed
-        margin-right: space-x(0.5)
-
-/////////////////////////////////////////
-
-.ids-selector
-  .tree
-    .children
-      padding-left: 0.5em
-      .leaf
-        input
-          margin: 0.1em
-
-/////////////////////////////////////////
-
-.main-page__horizontal-tiles
-  border-top: 2px solid $border-color
-
-  .tile-block:not(:first-child)
-    border-left: 2px solid $border-color
-
-.main-page__vertical-tiles
-  border-left: 2px solid $border-color
-
-  .tile-block:not(:first-child)
-    border-top: 2px solid $border-color
-
-.tile-menu__popover
-  border-radius: $border-radius
-  background-color: $body-bg
-
-/////////////////////////////////////////
-
-.phylo-config-form
-
-  // @TODO: manage background color for all node Box popup
-  background-color: $card-bg
-
-  // @TODO: manage the blue color set on all node Box popup
-  color: $body-color
-
-  &__group
-    padding-left: $card-spacer-x
-    padding-right: $card-spacer-x
-
-  // Apply Bootstrap "cart-footer" rules (see "_card.scss")
-  &__submit
-
-    padding: $card-spacer-y $card-spacer-x
-    color: $card-cap-color
-    background-color: $card-cap-bg
-    border-top: $card-border-width solid $card-border-color
-
-////////////////////////////////////////
-
-.file-type-tooltip
-  @include centered
-
-  position: absolute
-  background-color: white
-  z-index: z-index('main', 'floaty')

src/sass/_legacy/_tree.scss

+$forest-layout-top-teaser-height: 24px;
+$forest-layout-bottom-teaser-height: 24px;
+$node-popup-width: 544px;
+
+/////////////////////////////////////////
+
+.maintree {
+  $self: &;
+
+  // empirical vertical alignments for folder carets
+  $caret-y-offset: 2px;
+
+  position: relative;
+
+  // @NOTE #386: React Awesome Popover not suited for the feature UX
+  //           ↪ for now just avoiding to create a new stacking context
+  //             could be a long term issue
+  // z-index: 0 // new stacking context "tree"
+
+  &__node {
+    margin-bottom: space-x(0.25);
+    min-width: 0;
+
+    a:hover,
+    a:focus {
+      text-decoration: none;
+      border-bottom: 1px dashed currentColor;
+    }
+  }
+
+  @include right-handed {
+    &__node {
+      margin-left: space-x(1.75);
+    }
+
+    & > &__node {
+      margin-right: space-x(1.75);
+    }
+  }
+
+
+  @include left-handed {
+    &__node {
+      margin-right: space-x(1.75);
+    }
+
+    & > &__node {
+      margin-left: space-x(1.75);
+    }
+  }
+
+
+  // &--with-child > &__node > &::before
+  //   color: $gray-400
+  //   position: absolute
+  //   font-size: 11px
+  //   top: $caret-y-offset
+  //   // z-index macro-management due to "node__link::before" overlay
+  //   z-index: z-index("tree", "content")
+
+  //   @include right-handed
+  //     content: "└"
+  //   @include left-handed
+  //     content: "┘"
+
+  // for <Cloak> use cases
+  animation: 15ms fade-in;
+
+  &--blank {
+    @extend %placeholder;
+
+    // adding an phase on top of <Cloak> ones
+    // (aim is to only display the cloack fallback when
+    // 1s has passed, in parallel of maintaining the Element
+    // dimension)
+    animation-name: fade-in;
+    animation-delay: 100ms;
+    animation-duration: 50ms;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards;
+    opacity: 0;
+  }
+}
+
+////////////////////////////////////
+
+.mainleaf {
+  $self: &;
+
+  display: flex;
+  align-items: center;
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  // forcing inline width to overflow its container width
+  // this is mainly due to the multi-level of nested folders that keeps
+  // increasing the mainleaf width
+  // (as a "min-width" rule instead of "width" to allow the relative stacking
+  // context used for the selected UI border)
+  min-width: 0;
+  position: relative;
+
+  &:hover {
+    background-color: $gray-300;
+  }
+
+  @include right-handed {
+    flex-direction: row;
+    padding-right: space-x(2);
+    padding-left: space-x(0.5);
+  }
+
+
+  @include left-handed {
+    flex-direction: row-reverse;
+    padding-left: space-x(2);
+    padding-right: space-x(0.5);
+  }
+
+
+  //----------------------------
+
+  &__folder-icon {
+    font-size: 14px;
+
+    // @XXX Glyphicon icons lack of homogeneous width
+    width: 16px;
+
+    // z-index macro-management due to "node__link::before" overlay
+    z-index: z-index("tree", "content");
+
+    &--leaf {
+      color: $gray-400;
+    }
+
+    // padding instead of margin will ensure to add a gap for the icon call
+    // to action area
+    @include right-handed {
+      padding-right: space-x(1);
+    }
+
+
+    @include left-handed {
+      padding-left: space-x(1);
+    }
+  }
+
+  //----------------------------
+
+  &__node-icon {
+    position: relative;
+    font-size: 14px;
+
+    // @XXX Glyphicon icons lack of homogeneous width
+    //      (this also means that we can not align harmoniously the leaf
+    //      content)
+    width: 14px;
+
+    //      Micromanaging icons width as an attempt of alignment harmony
+    .fa-address-card-o,
+    .fa-newspaper-o {
+      font-size: 14px;
+    }
+
+    .fa-share-alt,
+    .fa-folder-open-o,
+    .fa-file-code-o,
+    .fa-list,
+    .fa-signal {
+      font-size: 15px;
+    }
+
+    .fa-user {
+      font-size: 17px;
+    }
+
+    .fa-lock,
+    .fa-fork {
+      font-size: 18px;
+    }
+
+    .fa-circle {
+      font-size: 20px;
+    }
+
+    @include right-handed {
+      margin-right: space-x(1);
+    }
+
+
+    @include left-handed {
+      margin-left: space-x(1);
+    }
+  }
+
+  //----------------------------
+
+  &__version-badge {
+    // pin the icon on bottom-right of the "&__node-icon"
+    $offset-y: -1px;
+    $offset-x: -4px;
+
+    position: absolute;
+    font-size: 12px;
+    background-color: $white;
+    border: 1px solid $white;
+    border-radius: 50%;
+    bottom: $offset-y;
+    right: $offset-x;
+    z-index: z-index("tree", "badge");
+    height: 14px;
+
+    // (?) unknown regresion: empirical offset re-alignement
+    .b-icon-button__inner {
+      $offset-y: -3px;
+      $offset-x: 1px;
+
+      top: $offset-y;
+      left: $offset-x;
+    }
+
+    // (remove hover effect to maintain continuity with folder + node icon
+    // lack of hover effect)
+    &--matched {
+      &.b-icon-button,
+      &.b-icon-button:hover {
+        color: $success;
+      }
+    }
+
+    &--mismatched {
+      &.b-icon-button,
+      &.b-icon-button:hover {
+        color: $warning;
+      }
+    }
+  }
+
+  //----------------------------
+
+  &__node-link {
+    position: relative;
+    font-size: 14px;
+    min-width: 0;
+
+    @include right-handed {
+      margin-right: space-x(1);
+    }
+
+
+    @include left-handed {
+      margin-left: space-x(1);
+    }
+
+
+    // preparing "before" content (see "&--selected", "&--file-dropped")
+    &::before {
+      // margin for the before background
+      $overlay-offset: -2px;
+
+      // left extra offset: used to include besides icons, caret, ...
+      $extra-left-overlay-offset: -56px;
+
+      // right extra offset: adding extra margin
+      $extra-right-overlay-offset: -12px;
+
+      position: absolute;
+      top: $overlay-offset;
+      bottom: $overlay-offset;
+      border-radius: $overlay-radius;
+
+      @include right-handed {
+        left: calc( #{$overlay-offset} + #{$extra-left-overlay-offset});
+        right: calc( #{$overlay-offset} + #{$extra-right-overlay-offset});
+      }
+
+
+      @include left-handed {
+        right: calc( #{$overlay-offset} + #{$extra-left-overlay-offset});
+        left: calc( #{$overlay-offset} + #{$extra-right-overlay-offset});
+      }
+    }
+
+    // creating a new stacking context due to the "::before" overlay
+    & a {
+      position: relative;
+
+      span {
+        $span-padding: space-x(3);
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
+
+        @include right-handed {
+          padding-right: $span-padding;
+        }
+
+
+        @include left-handed {
+          padding-left: $span-padding;
+        }
+      }
+    }
+  }
+
+  //----------------------------
+  $icon-button-margin: space-x(1.75);
+
+  &__settings-icon {
+    visibility: hidden;
+    position: absolute;
+  }
+
+  &:hover &__settings-icon {
+    visibility: visible;
+
+    @include right-handed {
+      margin-left: $icon-button-margin;
+      right: space-x(2);
+    }
+
+
+    @include left-handed {
+      margin-right: $icon-button-margin;
+      left: space-x(2);
+    }
+  }
+
+  &__pin-icon {
+    visibility: hidden;
+    position: absolute;
+  }
+
+  &:hover &__pin-icon {
+    visibility: visible;
+
+    @include right-handed {
+      margin-left: $icon-button-margin;
+      right: space-x(8);
+    }
+
+
+    @include left-handed {
+      margin-right: $icon-button-margin;
+      left: space-x(8);
+    }
+  }
+
+  &__update-icon {
+    position: absolute;
+
+    @include right-handed {
+      margin-left: $icon-button-margin;
+      right: space-x(5);
+    }
+
+
+    @include left-handed {
+      margin-right: $icon-button-margin;
+      left: space-x(5);
+    }
+  }
+
+  //----------------------------
+
+  // &__update-icon,
+  // &__settings-icon
+  // // altering component overlay offset to fit it with the ".mainleaf" overlay
+  // // dimension
+  // // $aside-icon-offset-y: -5px
+  // // $aside-icon-offset-x: -6px
+  //
+  // // &.b-icon-button::before
+  // //   top: $aside-icon-offset-y
+  // //   bottom: $aside-icon-offset-y
+  // //   left: $aside-icon-offset-x
+  // //   right: $aside-icon-offset-x
+
+  //----------------------------
+
+  &__progress-bar {
+    $progress-bar-width: 64px;
+    $progress-bar-height: 8px;
+
+    width: $progress-bar-width;
+    position: relative;
+
+    &::before {
+      @include fit-positions(-3px);
+
+      content: "";
+      position: absolute;
+      border: 1px solid $info;
+      border-radius: $overlay-radius;
+    }
+
+    .b-progress-bar {
+      height: $progress-bar-height;
+      background-color: $white;
+
+      .progress-text {
+        color: $info;
+        font-size: 0.55rem;
+        line-height: 0.55rem;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+
+    @include right-handed {
+      margin-left: space-x(2);
+
+      &:last-child {
+        margin-right: space-x(3);
+      }
+    }
+
+
+    @include left-handed {
+      margin-right: space-x(2);
+
+      &:last-child {
+        margin-left: space-x(3);
+      }
+    }
+  }
+
+  //----------------------------
+
+  &__version-comparator {
+    margin-top: space-x(1);
+
+    li {
+      margin-left: space-x(3);
+      list-style-type: disc;
+      line-height: 1.4;
+    }
+  }
+
+  //----------------------------
+
+  &--selected {
+    background-color: $gray-300;
+  }
+
+  &--selected & {
+    // &__node-link::before
+    //   content: ""
+    //   background-color: $gray-100
+
+    &__node-link a {
+      color: $primary;
+      font-weight: bold;
+    }
+  }
+
+  //----------------------------
+
+  &--file-dropped {
+    #{$self}__node-link::before {
+      content: "";
+      border: 1px dotted $secondary;
+    }
+  }
+
+  //----------------------------
+
+  &--blank {
+    $blank-color: $gray-100;
+    $blank-link-width: 120px;
+    $blank-link-height: 12px;
+    $blank-link-offset-y: 5px;
+
+    color: $blank-color;
+
+    #{$self}__folder-icon {
+      visibility: hidden;
+    }
+
+    // making a text placeholder block
+    #{$self}__node-link {
+      &::after {
+        content: "";
+        background-color: $blank-color;
+        height: $blank-link-height;
+        width: $blank-link-width;
+        position: absolute;
+        top: $blank-link-offset-y;
+      }
+    }
+  }
+}
+
+.mainleaf-selection-indicator {
+  // blank line, but relying on the inserted blank character to set a
+  // line-height → thus, this will define a block with the same height of the
+  // "mainleaf" one
+  @include virtual-space;
+
+  height: fit-content;
+  top: 0;
+  right: 0;
+  width: 3px;
+  background-color: $primary;
+  position: absolute;
+
+  // z-index macro-management due to "node__link::before" overlay
+  z-index: z-index("tree", "content");
+
+  @include right-handed {
+    right: 0;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+
+  @include left-handed {
+    left: 0;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+}
+
+// (?) Chrome engine adds extra height to the overlay embedded settings icon
+//        → set an empirical icon overlay position
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  $icon-overlay-bottom: -5px;
+
+  .awesome-popover {
+    .b-icon-button--overlay::before {
+      bottom: $icon-overlay-bottom;
+    }
+  }
+}
+
+// (?) FireFox engine adds extra height to the embedded settings
+//        → set an empirical fixed height on its wrapper to avoid
+//          an height flickering alteration (on mainleaf hover) ;
+//          and modify the icon overlay position
+@-moz-document url-prefix() {
+  $simulated-mainleaf-overlay-height: 22.5px;
+  $icon-overlay-bottom: -3px;
+
+  .awesome-popover {
+    max-height: $simulated-mainleaf-overlay-height;
+
+    .b-icon-button--overlay::before {
+      bottom: $icon-overlay-bottom;
+    }
+  }
+}
+
+////////////////////////////////////////
+
+.subtree {
+  $self: &;
+
+  &__node {
+    margin-top: space-x(0.25);
+
+    &__inner {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      font-size: 15px;
+    }
+
+    &__icons {
+      display: flex;
+
+      .fa {
+        margin-left: space-x(0.25);
+        margin-right: space-x(0.25);
+      }
+    }
+
+    &__text {
+      margin-left: space-x(0.5);
+    }
+
+    &--can-be-selected {
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    &--is-selected > &__inner {
+      // (only current node, not its children)
+      text-decoration: underline;
+      font-weight: bold;
+    }
+
+    @include right-handed {
+      &__inner {
+        flex-direction: row;
+        text-align: left;
+      }
+
+      &__icons {
+        flex-direction: row;
+      }
+
+      &__children > #{$self}__node {
+        padding-left: space-x(2);
+      }
+    }
+
+
+    @include left-handed {
+      &__inner {
+        flex-direction: row-reverse;
+        text-align: right;
+      }
+
+      &__icons {
+        flex-direction: row-reverse;
+      }
+
+      &__children > #{$self}__node {
+        padding-right: space-x(2.5);
+      }
+    }
+  }
+}
+
+/////////////////////////////////////////
+
+.frame-search.card {
+  // $frame-width: 1000px
+  $frame-height: 600px;
+
+  // width: $frame-width
+  height: $frame-height;
+}
+
+/////////////////////////////////////////
+
+.forest-layout {
+  @include term-window;
+
+  overflow-x: clip;
+
+  @include right-handed {
+    border-right: 1px solid $border-color;
+  }
+
+
+  @include left-handed {
+    border-left: 2px solid $border-color;
+  }
+
+
+  ///////////////
+
+  @mixin top-teaser {
+    background: linear-gradient(to top, mix-alpha($body-bg, 0%) 0%, mix-alpha($body-bg, 100%) 45%);
+  }
+
+  &__actions {
+    z-index: 3;
+    border-bottom: 1px solid $gray-300;
+
+    // $teaser-height: 16px
+
+    // &::after
+    //   @include top-teaser
+
+    //   content: ""
+    //   z-index: z-index("tile", "top-teaser")
+    //   pointer-events: none
+    //   position: sticky
+    //   top: 0
+    //   height: $teaser-height
+    //   width: 100%
+    //   display: block
+ 
+  }
+
+  &__top_action {
+    & > span {
+      display: flex;
+    }
+
+    button {
+      padding-top: 1px !important;
+      padding-bottom: 1px !important;
+
+      .b-button__inner {
+        display: flex;
+
+        @include right-handed {
+          flex-direction: row;
+        }
+
+
+        @include left-handed {
+          flex-direction: row-reverse;
+        }
+      }
+    }
+  }
+
+  &__action {
+    display: flex;
+
+    @include right-handed {
+      flex-direction: row;
+      padding-left: space-x(2);
+      padding-right: space-x(1);
+
+      &__button {
+        margin-right: space-x(2);
+        white-space: nowrap;
+      }
+    }
+
+
+    @include left-handed {
+      flex-direction: row-reverse;
+      padding-left: space-x(1);
+      padding-right: space-x(2);
+
+      &__button {
+        margin-left: space-x(2);
+      }
+    }
+  }
+
+  ////////////////////////
+
+  &__tree {
+    margin-top: space-x(3);
+
+    &:last-child {
+      margin-bottom: $forest-layout-bottom-teaser-height;
+    }
+
+    // remove leaf nested caret for first entry only
+    & > .maintree--with-children > .maintree__node {
+      &::before,
+      &::after {
+        content: none;
+      }
+    }
+
+    // remove horizontal offset for first entry only (see ".maintree")
+    & > .maintree > .maintree__node {
+      @include right-handed {
+        margin-left: space-x(0.5);
+      }
+
+
+      @include left-handed {
+        margin-right: space-x(0.5);
+      }
+    }
+  }
+}
+
+/////////////////////////////////////////
+
+.ids-selector {
+  .tree {
+    .children {
+      padding-left: 0.5em;
+
+      .leaf {
+        input {
+          margin: 0.1em;
+        }
+      }
+    }
+  }
+}
+
+/////////////////////////////////////////
+
+.main-page__horizontal-tiles {
+  border-top: 2px solid $border-color;
+
+  .tile-block:not(:first-child) {
+    border-left: 2px solid $border-color;
+  }
+}
+
+.main-page__vertical-tiles {
+  border-left: 2px solid $border-color;
+
+  .tile-block:not(:first-child) {
+    border-top: 2px solid $border-color;
+  }
+}
+
+.tile-menu__popover {
+  border-radius: $border-radius;
+  background-color: $body-bg;
+}
+
+/////////////////////////////////////////
+
+.phylo-config-form {
+  // @TODO: manage background color for all node Box popup
+  background-color: $card-bg;
+
+  // @TODO: manage the blue color set on all node Box popup
+  color: $body-color;
+
+  &__group {
+    padding-left: $card-spacer-x;
+    padding-right: $card-spacer-x;
+  }
+
+  // Apply Bootstrap "cart-footer" rules (see "_card.scss")
+  &__submit {
+    padding: $card-spacer-y $card-spacer-x;
+    color: $card-cap-color;
+    background-color: $card-cap-bg;
+    border-top: $card-border-width solid $card-border-color;
+  }
+}
+
+////////////////////////////////////////
+
+.file-type-tooltip {
+  @include centered;
+
+  position: absolute;
+  background-color: white;
+  z-index: z-index("main", "floaty");
+}

src/sass/_modules.sass

-@import './modules/_form'
-@import './modules/_layout'
-@import './modules/_annotation'
-@import './modules/_tree'

src/sass/_modules.scss

+@import './modules/_form';
+@import './modules/_layout';
+@import './modules/_annotation';
+@import './modules/_tree';

src/sass/base/_placeholder.scss

+@use "sass:math" as math;
+
 %placeholder {
   $width: 800px;
   $bg-color: $white;
@@ -24,10 +26,10 @@
 
   @keyframes __placeholder {
     from {
-      background-position: #{ - $width / 2 } 0;
+      background-position: (- math.div($width, 2)) 0;
     }
     to {
-      background-position: #{ $width / 2 } 0;
+      background-position: math.div($width, 2) 0;
     }
   }
 }

src/sass/base/_range_slider.sass

-// Colors based on Chromium engine
-// (every browser renders its input range on its own, here we are trying
-// to add some consistency)
-$range-bg-color: $gray-175
-$range-border-color: $gray-400
-$range-bg-progress-color: $secondary
-$range-height: 8px
-$range-radius: 3px
-$knob-size: 14px
-
-.range-control
-  display: inline-flex
-  flex-direction: column
-  vertical-align: top
-
-  &__label
-    font-size: 14px
-    color: $gray-700
-    margin-bottom: space-x(0.5)
-
-  // enhance hover area of ".range-slider" placeholder
-  // (cf ".range-slider")
-  &:hover .range-slider .range-slider__placeholder
-    display: block
-
-///////////////////////////////////////////////
-
-.range-slider
-  $self: &
-  $placeholder-offset-y: -32px
-
-  position: relative
-  width: 100%
-  height: $range-height
-
-  &__scale
-    position: absolute
-    width: inherit
-    height: inherit
-    background-color: $range-bg-color
-    border: 1px solid $range-border-color
-    border-radius: $range-radius
-
-  &__scale-sel
-    position: absolute
-    background-color: $range-bg-progress-color
-    width: inherit
-    height: inherit
-    border-radius: $range-radius
-    border: 1px solid $range-border-color
-
-  &__knob
-    @include unselectable
-    @include clickable
-
-    z-index: 1
-    background-color: $range-bg-progress-color
-    width: $knob-size
-    height: $knob-size
-    border-radius: 50%
-    position: absolute
-    box-shadow: 0 0 1px 0 $range-bg-progress-color
-
-    // alignement with the bar
-    transform: translateX(-5px) translateY(-3px)
-
-    &.disabled
-      cursor: not-allowed
-
-    &:hover
-      background-color: darken($range-bg-progress-color, 15%)
-
-
-  &__placeholder
-    display: none
-    background-color: $black
-    color: $white
-    position: absolute
-    padding: space-x(0.5) space-x(1)
-    text-align: center
-    font-size: 14px
-    font-weight: bold
-    border-radius: 5px
-    box-shadow: 0 0 1px 0 $black
-    opacity: 0.8
-    transform: translateX(-25%) translateY($placeholder-offset-y)
-
-  &:hover &
-
-    &__placeholder
-      display: block
-
-////////////////////////////////////////////
-
-.range-simple
-  display: inline-flex
-  flex-direction: column
-  vertical-align: top
-  position: relative
-
-  &__label
-    font-size: 14px
-    color: $gray-700
-
-  &__field
-    position: relative
-
-  & input[disabled]
-    cursor: not-allowed
-
-////////////////////////////////////////////
-
-// Cross browser rules
-//
-// (?) Range consistency issue between browsers UI engine: mostly rely on
-//     Chromium UI and adapt it to other engine
-//
-// Some examples:
-// @link https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
-input[type=range]
-  @include clickable
-
-  width: 100%
-
-// Styling FireFox input range, mimicking Chromium one
-//
-// (?) * unable to differenciate selector betwenn background range and progress
-//       one → set only background range
-//     * unable to position the input ideally → have to rely on
-//       absolute + position
-input[type=range]
-  -webkit-appearance: none
-
-input[type=range]::-webkit-slider-runnable-track
-  $chromium-offset-y: 4px
-
-  height: $range-height
-  border-radius: $range-radius
-  border: 1px solid $range-border-color
-  background: $range-bg-color
-  width: 100%
-  position: absolute
-  top: $chromium-offset-y
-
-input[type=range]::-webkit-slider-thumb
-  $chromium-offset-y: -4px
-
-  -webkit-appearance: none
-  transform: translateY($chromium-offset-y)
-  border: none
-  height: $knob-size
-  width: $knob-size
-  border-radius: 50%
-  background-color: $range-bg-progress-color
-  box-shadow: 0 0 1px 0 $range-bg-progress-color
-
-// Styling FireFox input range, mimicking Chromium one
-//
-// (?) * unable to differenciate selector betwenn background range and progress
-//       one → set only background range
-//     * unable to position the input ideally → have to rely on
-//       translation
-input[type=range]::-moz-range-track
-  $firefox-height: #{ $range-height - 2px }
-  $firefox-offset-y: -2px
-
-  height: $firefox-height
-  border-radius: $range-radius
-  border: 1px solid $range-border-color
-  background: $range-bg-color
-  transform: translateY($firefox-offset-y)
-
-input[type=range]::-moz-range-thumb
-  $firefox-offset-y: -2px
-
-  border: none
-  height: $knob-size
-  width: $knob-size
-  border-radius: 50%
-  background-color: $range-bg-progress-color
-  box-shadow: 0 0 2px 0 $range-bg-progress-color
-  transform: translateY($firefox-offset-y)
-
-// hide the outline behind the border
-input[type=range]:-moz-focusring
-  outline: 1px solid white
-  outline-offset: -1px

src/sass/base/_range_slider.scss

+// Colors based on Chromium engine
+// (every browser renders its input range on its own, here we are trying
+// to add some consistency)
+$range-bg-color: $gray-175;
+$range-border-color: $gray-400;
+$range-bg-progress-color: $secondary;
+$range-height: 8px;
+$range-radius: 3px;
+$knob-size: 14px;
+
+.range-control {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: top;
+
+  &__label {
+    font-size: 14px;
+    color: $gray-700;
+    margin-bottom: space-x(0.5);
+  }
+
+  // enhance hover area of ".range-slider" placeholder
+  // (cf ".range-slider")
+  &:hover .range-slider .range-slider__placeholder {
+    display: block;
+  }
+}
+
+///////////////////////////////////////////////
+
+.range-slider {
+  $self: &;
+  $placeholder-offset-y: -32px;
+
+  position: relative;
+  width: 100%;
+  height: $range-height;
+
+  &__scale {
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    background-color: $range-bg-color;
+    border: 1px solid $range-border-color;
+    border-radius: $range-radius;
+  }
+
+  &__scale-sel {
+    position: absolute;
+    background-color: $range-bg-progress-color;
+    width: inherit;
+    height: inherit;
+    border-radius: $range-radius;
+    border: 1px solid $range-border-color;
+  }
+
+  &__knob {
+    @include unselectable;
+    @include clickable;
+
+    z-index: 1;
+    background-color: $range-bg-progress-color;
+    width: $knob-size;
+    height: $knob-size;
+    border-radius: 50%;
+    position: absolute;
+    box-shadow: 0 0 1px 0 $range-bg-progress-color;
+
+    // alignement with the bar
+    transform: translateX(-5px) translateY(-3px);
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+
+    &:hover {
+      background-color: darken($range-bg-progress-color, 15%);
+    }
+  }
+
+  &__placeholder {
+    display: none;
+    background-color: $black;
+    color: $white;
+    position: absolute;
+    padding: space-x(0.5) space-x(1);
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    box-shadow: 0 0 1px 0 $black;
+    opacity: 0.8;
+    transform: translateX(-25%) translateY($placeholder-offset-y);
+  }
+
+  &:hover & {
+    &__placeholder {
+      display: block;
+    }
+  }
+}
+
+////////////////////////////////////////////
+
+.range-simple {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: top;
+  position: relative;
+
+  &__label {
+    font-size: 14px;
+    color: $gray-700;
+  }
+
+  &__field {
+    position: relative;
+  }
+
+  & input[disabled] {
+    cursor: not-allowed;
+  }
+}
+
+////////////////////////////////////////////
+
+// Cross browser rules
+//
+// (?) Range consistency issue between browsers UI engine: mostly rely on
+//     Chromium UI and adapt it to other engine
+//
+// Some examples:
+// @link https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
+input[type=range] {
+  @include clickable;
+
+  width: 100%;
+}
+
+// Styling FireFox input range, mimicking Chromium one
+//
+// (?) * unable to differenciate selector betwenn background range and progress
+//       one → set only background range
+//     * unable to position the input ideally → have to rely on
+//       absolute + position
+input[type=range] {
+  -webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  $chromium-offset-y: 4px;
+
+  height: $range-height;
+  border-radius: $range-radius;
+  border: 1px solid $range-border-color;
+  background: $range-bg-color;
+  width: 100%;
+  position: absolute;
+  top: $chromium-offset-y;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  $chromium-offset-y: -4px;
+
+  -webkit-appearance: none;
+  transform: translateY($chromium-offset-y);
+  border: none;
+  height: $knob-size;
+  width: $knob-size;
+  border-radius: 50%;
+  background-color: $range-bg-progress-color;
+  box-shadow: 0 0 1px 0 $range-bg-progress-color;
+}
+
+// Styling FireFox input range, mimicking Chromium one
+//
+// (?) * unable to differenciate selector betwenn background range and progress
+//       one → set only background range
+//     * unable to position the input ideally → have to rely on
+//       translation
+input[type=range]::-moz-range-track {
+  $firefox-height: #{$range-height - 2px};
+  $firefox-offset-y: -2px;
+
+  height: $firefox-height;
+  border-radius: $range-radius;
+  border: 1px solid $range-border-color;
+  background: $range-bg-color;
+  transform: translateY($firefox-offset-y);
+}
+
+input[type=range]::-moz-range-thumb {
+  $firefox-offset-y: -2px;
+
+  border: none;
+  height: $knob-size;
+  width: $knob-size;
+  border-radius: 50%;
+  background-color: $range-bg-progress-color;
+  box-shadow: 0 0 2px 0 $range-bg-progress-color;
+  transform: translateY($firefox-offset-y);
+}
+
+// hide the outline behind the border
+input[type=range]:-moz-focusring {
+  outline: 1px solid white;
+  outline-offset: -1px;
+}

src/sass/components/_grouped.scss

@@ -330,8 +330,8 @@
     color: $gray-600;
     line-height: $headings-line-height;
     margin: #{ - $headings-margin-bottom } 0 0;
-    padding-left: $margin / 2;
-    padding-right: $margin / 2;
+    padding-left: math.div($margin, 2);
+    padding-right: math.div($margin, 2);
     background-color: inherit;
   }
 
@@ -468,8 +468,8 @@
     width: $size;
     // (?) `centered` mixin will not work here, due to Bootstrap process
     //     interfering with the transform rule
-    top: calc( 50% - #{ $size / 2 } );
-    left: calc( 50% - #{ $size / 2 } );
+    top: calc( 50% - math.div($size, 2) );
+    left: calc( 50% - math.div($size, 2) );
   }
 }