From d9deee78e700740ac98622a4301f635c19c1a159 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 6 Apr 2021 16:55:17 +0200
Subject: [PATCH] replace global.scss by _variables.scss & remove hard comments

---
 app/src/scss/_variables.scss | 72 +++++++++++++++++++-----------------
 app/src/scss/globals.scss    | 25 -------------
 app/vue.config.js            |  2 +-
 3 files changed, 39 insertions(+), 60 deletions(-)
 delete mode 100644 app/src/scss/globals.scss

diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index e1b64fb3..09ef312e 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -1,16 +1,27 @@
-/*
 
-  ╭─────────────────────────────╮
-  │ ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮ │
-  │ │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯ │
-  │ └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵   │
-  ╰─────────────────────────────╯
+//   ╭─────────────────────────────────────────────────────────────────╮
+//   │                                                                 │
+//   │   /!\ DO NOT IMPORT OR DEFINE ACTUAL RULES INTO THIS FILE /!\   │
+//   │                                                                 │
+//   │  Only things that disappear after scss compilation is allowed.  │
+//   │                                                                 │
+//   ╰─────────────────────────────────────────────────────────────────╯
+//
+//   This file is magically imported into every components so that scss variables,
+//   functions and mixins can be accessed.
+//   But if some rules are defined here, they will be copied into the final build as many
+//   times as there are components…
 
-  Bootstrap and BootstrapVue overrides.
-  Bootstrap default: `app/node_modules/bootstrap/scss/_variables.scss`
-  BootstrapVue default: `app/node_modules/bootstrap-vue/src/_variables.scss`
 
-*/
+//  ╭─────────────────────────────╮
+//  │ ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮ │
+//  │ │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯ │
+//  │ └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵   │
+//  ╰─────────────────────────────╯
+//
+//  Bootstrap and BootstrapVue overrides.
+//  Bootstrap default: `app/node_modules/bootstrap/scss/_variables.scss`
+//  BootstrapVue default: `app/node_modules/bootstrap-vue/src/_variables.scss`
 
 // TODO: add a feature so the user can set some css variables to change the global aspects ?
 // For exemple, turning rounding of elements off, the bases colors, etc.
@@ -49,44 +60,37 @@ $alert-padding-x: 1rem;
 $card-spacer-y: .6rem;
 $card-spacer-x: 1rem;
 
+
+// Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/functions.scss';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins.scss';
+@import '~bootstrap-vue/src/variables';
 
-// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
-@each $color, $value in $theme-colors {
-  @include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6));
-}
 
-// Add breakpoints for w-*
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @each $size, $length in $sizes {
-    @include media-breakpoint-up($breakpoint) {
-      .w-#{$breakpoint}-#{$size} {
-        width: $length !important;
-      }
-    }
-  }
-}
 
-/*
 
-  ╭──────────────────────────────────────╮
-  │ ┌─╴╭─╮┌─╮╷ ╭   ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
-  │ ├─╴│ │├┬╯├┴╮╶─╴├─┤│││├─╴╰─╮│ ││││├─╴ │
-  │ ╵  ╰─╯╵ ╰╵ ╵   ╵ ╵╰╯╯╰─╴╶─╯╰─╯╵╵╵╰─╴ │
-  ╰──────────────────────────────────────╯
 
-  Fork-awesome variable overrides.
-  default: `app/node_modules/fork-awesome/scss/_variables.scss`
-
-*/
+//  ╭──────────────────────────────────────╮
+//  │ ┌─╴╭─╮┌─╮╷ ╭   ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
+//  │ ├─╴│ │├┬╯├┴╮╶─╴├─┤│││├─╴╰─╮│ ││││├─╴ │
+//  │ ╵  ╰─╯╵ ╰╵ ╵   ╵ ╵╰╯╯╰─╴╶─╯╰─╯╵╵╵╰─╴ │
+//  ╰──────────────────────────────────────╯
+//
+//  Fork-awesome variable overrides.
+//  default: `app/node_modules/fork-awesome/scss/_variables.scss`
 
 $fa-font-path: '~fork-awesome/fonts';
 $fa-font-size-base: 1rem;
 
+@import '~fork-awesome/scss/variables';
 
 
 $thin-border: 1px solid #eee;
+//  ╭────────────────────╮
+//  │ ╭─╴╷ ╷╭─╴╶┬╴╭─╮╭╮╮ │
+//  │ │  │ │╰─╮ │ │ ││││ │
+//  │ ╰─╴╰─╯╶─╯ ╵ ╰─╯╵╵╵ │
+//  ╰────────────────────╯
 
 $skeleton-color: #eaeaea;
diff --git a/app/src/scss/globals.scss b/app/src/scss/globals.scss
deleted file mode 100644
index 358e04d6..00000000
--- a/app/src/scss/globals.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
-  ╭─────────────────────────────────────────────────────────────────╮
-  │                                                                 │
-  │   /!\ DO NOT IMPORT OR DEFINE ACTUAL RULES INTO THIS FILE /!\   │
-  │                                                                 │
-  │  Only things that disappear after scss compilation is allowed.  │
-  │                                                                 │
-  ╰─────────────────────────────────────────────────────────────────╯
-
-  This file is magically imported into every components so that scss variables and
-  mixins can be accessed.
-  But if some rules are defined here, they will be copied into the final build as many
-  times as there are components…
-
-*/
-
-@import 'variables';
-
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
-
-@import '~bootstrap-vue/src/variables';
-
-@import '~fork-awesome/scss/variables';
diff --git a/app/vue.config.js b/app/vue.config.js
index e1b3aa4f..30657c7a 100644
--- a/app/vue.config.js
+++ b/app/vue.config.js
@@ -48,7 +48,7 @@ module.exports = {
   css: {
     loaderOptions: {
       sass: {
-        prependData: '@import "@/scss/globals.scss";'
+        prependData: '@import "@/scss/_variables.scss";'
       }
     }
   },