[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/_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/_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/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) );
   }
 }