setup bootstrap file structure to allow overrides

src/assets/scss/_bootstrap.scss

@@ -0,0 +1,60 @@
+/*!
+ * Import of all needed bootstrap files except variables, functions and mixins
+ */
+
+
+// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮
+// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯
+// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵
+
+// TODO OPTI: import only used
+
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
+
+
+// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮   ╷ ╷╷ ╷┌─╴
+// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯╶─╴│╭╯│ │├─╴
+// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵     ╰╯ ╰─╯╰─╴
+
+// TODO OPTI: import only used
+
+@import "~bootstrap-vue/src/utilities";
+
+// General styling needed for special form controls
+@import "~bootstrap-vue/src/custom-controls";
+
+// Include custom SCSS for components
+@import "~bootstrap-vue/src/components/index";

src/assets/scss/base/_colors.scss

@@ -1,7 +0,0 @@
-$bleuroi: rgb(61,82,102);
-$bleuroilight: lighten(rgb(61,82,102), 30%);
-$gris: rgb(200,204,204);
-$grisclair: rgb(230,234,234);
-$grisfonce: rgb(57,57,64);
-$or: rgb(179,161,125);
-$rouge: rgb(204,61,82);

src/assets/scss/base/_fonts.scss

@@ -1,93 +0,0 @@
-@import '../fonts/libertinus/libertinus.css';
-@import '../fonts/notosans/notosans.css';
-// @import '../fonts/notosans/notosans-semicondensed.css';
-// @import '../fonts/notosans/notosans-condensed.css';
-// @import '../fonts/notosans/notosans-extracondensed.css';
-
-@mixin fontsans {
-  font-family: "noto_sans";
-}
-@mixin fontserif {
-  font-family: 'libertinus_serif';
-}
-
-body{
-  @include fontserif;
-  font-weight: 400;
-
-  // font-family: 'noto_sans';
-  // font-weight: 900;
-  // font-style: italic;
-}
-
-#header-menu,
-#footer-tabs,
-#search,
-footer[role="tools"] .row>header,
-footer[role="tools"] .row>nav{
-  @include fontsans;
-}
-@mixin title1blue {
-  @include fontserif;
-  font-size: 2.268em;
-  color: $bleuroi;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin title1black {
-  @include fontserif;
-  font-size: 1.512em;
-  color: $grisfonce;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin title2black {
-  @include fontserif;
-  font-size: 1.134em;
-  color: $grisfonce;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin title3black {
-  @include fontserif;
-  font-size: 1em;
-  color: $grisfonce;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin title4black {
-  @include fontserif;
-  font-size: 0.882em;;
-  color: $gris;
-  font-weight: 400;
-  margin:0;
-}
-
-// TEI
-
-@mixin teititlefrontblue {
-  @include fontserif;
-  font-size: 2.6em;
-  color: $bleuroi;
-  font-weight: 400;
-  margin:0;
-  text-align: center;
-}
-
-@mixin teititle1blue {
-  @include fontserif;
-  font-size: 1.8em;
-  color: $bleuroi;
-  font-weight: 400;
-  margin:0;
-}
-
-@mixin fontcaption {
-  @include fontsans;
-  font-size: 0.643em;
-  line-height: 1.1em;
-}

src/assets/scss/base/_grid-flex.scss

@@ -1,105 +0,0 @@
-// http://www.thesassway.com/intermediate/simple-grid-mixins
-
-
-@mixin row() {
-  display:flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  @media only screen and (max-width: $small-bp) {
-    flex-wrap:wrap;
-  }
-}
-
-.row{
-  @include row;
-}
-.row-rl{
-  @include row;
-}
-
-// small
-.small-row {
-  @media only screen and (max-width: $small-bp) {
-    @include row;
-  }
-}
-
-// medium
-.med-row {
-  @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
-    @include row;
-  }
-}
-
-// large
-.large-row {
-  @media only screen and (min-width: $med-bp+1) {
-    @include row;
-  }
-}
-
-%col-reset {
-    box-sizing: border-box;
-}
-
-@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
-  @extend %col-reset;
-  padding-left: $gap*$offset;
-  @if $col == $default_sum {
-    // if last col, then no gap
-    padding-right: 0;
-  }@else{
-    padding-right: $gap;
-  }
-  &:last-child{padding-right: 0;}
-
-  // no offset with flex ??
-  // margin-left: percentage(($col/$sum)*$offset);
-
-  // col width
-  flex-basis: percentage($col/$sum);
-}
-
-@for $c from 1 through $default_sum {
-  .col-#{$c} {
-      @include col($c);
-  }
-
-  // small
-  .small-col-#{$c} {
-    @media only screen and (max-width: $small-bp) {
-      @include col($c);
-    }
-  }
-
-  // medium
-  .med-col-#{$c} {
-    @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
-      @include col($c);
-    }
-  }
-
-  // large
-  .large-col-#{$c} {
-    @media only screen and (min-width: $med-bp+1) {
-      @include col($c);
-    }
-  }
-
-}
-
-@for $c from 1 through $default_sum - 1 {
-  @for $o from 1 through $default_sum - $c {
-    .col-#{$c}-offset-#{$o} {
-      @include col($c, $o);
-    }
-  }
-}
-
-// TODO: replace with align-self:flex-start or flex-end
-// .col.float-right{
-//   float: right;
-//   padding-right: 0;
-//   padding-left: $default_gap;
-// }

src/assets/scss/base/_grid.scss

@@ -1,92 +0,0 @@
-// http://www.thesassway.com/intermediate/simple-grid-mixins
-
-
-@mixin row() {
-  // font-size: 0;
-  // white-space: nowrap;
-  position: relative;
-  // >*{
-  //   font-size: 16px;
-  // }
-  &:after{
-    content:"";
-    clear:both;
-    display: block;
-  }
-}
-
-%col-reset {
-    width: 100%;
-    // display: inline-block;
-    // white-space:normal;
-    // font-size: 16px;
-    float:left;
-    box-sizing: border-box;
-}
-
-@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
-  @extend %col-reset;
-  padding-left: $gap*$offset;
-  @if $col == $default_sum {
-    padding-right: 0;
-  }@else{
-    padding-right: $gap;
-  }
-  &:last-child{padding-right: 0;}
-
-  margin-left: percentage(($col/$sum)*$offset);
-
-  // @media only screen and (min-width: 768px) {
-    width: percentage($col/$sum);
-    // vertical-align: $align;
-  // }
-}
-
-.row{
-  @include row;
-  // html:not(.js) &{
-  //   overflow-y: auto;
-  // }
-}
-
-@for $c from 1 through $default_sum {
-  .col-#{$c} {
-      @include col($c);
-  }
-
-  // small
-  .small-col-#{$c} {
-    @media only screen and (max-width: $small-bp) {
-      @include col($c);
-    }
-  }
-
-  // medium
-  .med-col-#{$c} {
-    @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
-      @include col($c);
-    }
-  }
-
-  // large
-  .large-col-#{$c} {
-    @media only screen and (min-width: $med-bp+1) {
-      @include col($c);
-    }
-  }
-
-}
-
-@for $c from 1 through $default_sum - 1 {
-  @for $o from 1 through $default_sum - $c {
-    .col-#{$c}-offset-#{$o} {
-      @include col($c, $o);
-    }
-  }
-}
-
-.col.float-right{
-  float: right;
-  padding-right: 0;
-  padding-left: $default_gap;
-}

src/assets/scss/base/_layout.scss

@@ -1,94 +0,0 @@
-$side-padding:3em;
-
-body, html{
-  position: relative;
-  width: 100%;
-  height:100%;
-  font-family: sans-serif;
-  font-style: normal;
-  margin:0;
-  padding:0;
-}
-
-body{
-  overflow:hidden;
-}
-
-#root{
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  height:100vh;
-  %layout-element{
-    width:100vw;
-    box-sizing:border-box;
-  }
-  header[role="banner"]{
-    z-index:10;
-    flex: 0 0 auto;
-    @extend %layout-element;
-    padding:1em $side-padding 1em $side-padding;
-    @media only screen and (max-width: $small-bp) {
-      padding:1em $side-padding/2 0 $side-padding/2;
-    }
-  }
-  section[role="main-content"]{
-    display: flex;
-    flex:1 1 auto;
-    @extend %layout-element;
-    overflow: hidden;
-    position: relative;
-    >.wrapper{
-      position: relative;
-      padding:0 $side-padding 0 $side-padding;
-      // height:100%; max-height:100%;
-      display: flex;
-      flex: 1;
-      overflow-y: hidden;
-      overflow-x: hidden;
-      >*{
-        @include fade-transition;
-      }
-      @media only screen and (max-width: $small-bp) {
-        overflow-y: auto;
-        padding:0 $side-padding/2 0 $side-padding/2;
-      }
-    }
-    .main-content-layout{
-      position: relative;
-      // https://stackoverflow.com/a/33644245
-      display: flex;
-      flex: 1;
-      >section{
-        max-height: 100%;
-      }
-      >header,
-      >section>.wrapper,
-      >nav{
-        box-sizing: border-box;
-        max-height: 100%;
-        padding-top:1em;
-      }
-      >section>.wrapper,
-      >nav{
-        overflow-x: hidden;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-    }
-    @media only screen and (max-width: $small-bp) {
-      .main-content-layout{
-        display: flex;
-        flex-direction: column;
-      }
-    }
-  }
-  footer[role="tools"]{
-    flex:0 0 auto;
-    @extend %layout-element;
-    // padding-bottom: 1em;
-    // >*{
-    //   padding:0.5em 1em;
-    // }
-  }
-}

src/assets/scss/base/_reset.scss

@@ -1,40 +0,0 @@
-html, body{
-  font-size:16px;
-  line-height: 0.9;
-  margin:0; padding:0;
-  background: white;
-}
-
-a{
-	color: inherit;
-	text-decoration: none;
-}
-a, a:focus, a:active { outline: none; }
-a:focus{ -moz-outline-style: none; }
-
-ul {
-  padding:0;
-  margin:0;
-}
-li{
-  padding:0;
-  margin:0;
-  list-style: none;
-}
-
-.visualy-hidden {
-  position: absolute !important;
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  height: 1px;
-  width: 1px;
-  word-wrap: normal;
-}
-.visualy-hidden:active,
-.visualy-hidden:focus {
-  position: static !important;
-  clip: auto;
-  overflow: visible;
-  height: auto;
-  width: auto;
-}

src/assets/scss/base/_transitions.scss

@@ -1,67 +0,0 @@
-
-//  _                    _ _   _
-// | |_ _ _ __ _ _ _  __(_) |_(_)___ _ _  ___
-// |  _| '_/ _` | ' \(_-< |  _| / _ \ ' \(_-<
-//  \__|_| \__,_|_||_/__/_|\__|_\___/_||_/__/
-@mixin accordeon-transition($h){
-  &.accordeon-enter,
-  &.accordeon-leave-to{
-    // opacity: 0;
-    height:0.01vh;
-    padding-top: 0;
-    padding-bottom: 0;
-    // transform: translateY(100%);
-    // transform: translate3d(0, 100%, 0);
-  }
-  &.accordeon-enter-to,
-  &.accordeon-leave{
-    // opacity:1;
-    height:$h;
-    // transform: translateY(0%);
-    // transform: translate3d(0, 0, 0);
-  }
-  &.accordeon-enter-active{
-    transition: all 300ms ease-in-out;
-  }
-  &.accordeon-leave-active{
-    transition: all 200ms ease-in-out;
-  }
-
-}
-
-@mixin fade-transition() {
-  &.fade-enter,
-  &.fade-leave-to{
-    opacity: 0;
-  }
-  &.fade-enter-to,
-  &.fade-leave{
-    opacity:1;
-  }
-  &.fade-enter-active{
-    transition: all 300ms ease-in-out;
-  }
-  &.fade-leave-active{
-    transition: all 200ms ease-in-out;
-  }
-}
-
-.fade-enter-active{
-  transition: all 300ms ease-in-out;
-}
-.fade-leave-active{
-  transition: all 200ms ease-in-out;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0
-}
-
-// .edition-texts-enter-active, .edition-texts-leave-active {
-//   transition: all 1s;
-// }
-// .edition-texts-enter, .edition-texts-leave-to /* .list-leave-active below version 2.1.8 */ {
-//   max-height: 0;
-//   // transform: translateY(30px);
-// }

src/assets/scss/base/_variables.scss

@@ -1,10 +0,0 @@
-$base_font_size:16px;
-
-// grid
-$default_gap: 1em;
-$default_sum: 12; // total number of columns
-
-$small-bp:768px;
-$med-bp:1080px;
-$ipad-bp: 1536px;
-$large-bp:1900px;

src/assets/scss/globals.scss

@@ -14,10 +14,27 @@
 
 */
 
+
+// Custom variables must be imported first.
+@import 'bootstrap-overrides/variables';
 @import 'variables';
 
+
+// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮
+// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯
+// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵
+
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
 
-@import '~bootstrap-vue/src/variables';
+
+// ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮   ╷ ╷╷ ╷┌─╴
+// │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯╶─╴│╭╯│ │├─╴
+// └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵     ╰╯ ╰─╯╰─╴
+
+@import "~bootstrap-vue/src/variables";
+
+
+// mixins and functions overides must be imported after bootstrap's definitions.
+@import 'bootstrap-overrides/mixins';

src/assets/scss/main.scss

@@ -1,11 +1,8 @@
-@import 'variables';
+@import 'globals';
 
-// Bootstrap (temp ?)
+@import 'bootstrap';
-@import '~bootstrap/scss/bootstrap.scss';
-@import '~bootstrap-vue/src/index.scss';
 
 
-html, body, #app, main {
+html, body, #app {
   height: 100%;
-  margin: 0;
 }