From 04c0f11331ed91ab83a4bd325c3589534c1f1b72 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Fri, 30 Jul 2021 09:47:18 +0200
Subject: [PATCH] chore: separate mixins from definitions

---
 src/scss/_definitions.scss        | 105 ------------------------------
 src/scss/_mixins.scss             |   7 ++
 src/scss/_palette.scss            |   8 +++
 src/scss/mixins/_borders.scss     |  15 +++++
 src/scss/{ => mixins}/_colors.css |   8 ---
 src/scss/mixins/_responsive.scss  |  59 +++++++++++++++++
 src/scss/mixins/_shape.scss       |  27 ++++++++
 src/scss/style.scss               |   4 +-
 8 files changed, 118 insertions(+), 115 deletions(-)
 create mode 100644 src/scss/_mixins.scss
 create mode 100644 src/scss/mixins/_borders.scss
 rename src/scss/{ => mixins}/_colors.css (90%)
 create mode 100644 src/scss/mixins/_responsive.scss
 create mode 100644 src/scss/mixins/_shape.scss

diff --git a/src/scss/_definitions.scss b/src/scss/_definitions.scss
index c47b291..887695a 100644
--- a/src/scss/_definitions.scss
+++ b/src/scss/_definitions.scss
@@ -36,108 +36,3 @@ $fontweight_hyper: 800;
 
 $basefont: Open Sans, sans-serif;
 $titlefont: Amatic SC, sans-serif;
-
-
-// MIXINS RESPONSIVES
-
-// Small tablets and large smartphones (landscape view)
-$screen-sm-min: 576px;
-
-// Small tablets (portrait view)
-$screen-md-min: 768px;
-
-// Tablets and small desktops
-$screen-lg-min: 992px;
-
-// Large tablets and desktops
-$screen-xl-min: 1200px;
-
-// Very large desktops
-$screen-xxl-min: 1600px;
-
-
-// Small devices
-@mixin sm {
-   @media (min-width: #{$screen-sm-min}) {
-       @content;
-   }
-}
-
-// Medium devices
-@mixin md {
-   @media (min-width: #{$screen-md-min}) {
-       @content;
-   }
-}
-
-// Large devices
-@mixin lg {
-   @media (min-width: #{$screen-lg-min}) {
-       @content;
-   }
-}
-
-// Extra large devices
-@mixin xl {
-   @media (min-width: #{$screen-xl-min}) {
-       @content;
-   }
-}
-
-// Extra large desktops
-@mixin xxl {
-   @media (min-width: #{$screen-xxl-min}) {
-       @content;
-   }
-}
-
-// Custom devices
-@mixin rwd($screen) {
-   @media (min-width: $screen+'px' ) {
-      @content;
-   }
-}
-
-// MIXINS AUTRES
-
-@mixin borders() {
-  border: $border-size solid rgba(0, 0, 0, 0.3)
-}
-
-@mixin prefer-no-borders() {
-  &:not(:hover) {
-    border-color:transparent;
-  }
-}
-
-@mixin border-radius($border-radius) {
-  border-radius: $border-radius $border-radius $border-radius $border-radius;
-}
-
-@mixin shape-style($size) {
-    @include borders();
-    @include border-radius($btn-radius);
-
-    background-color:transparent;
-
-    // Biseau
-    position: relative;
-    z-index:1;
-    overflow: visible;
-    &:before {
-        content: " ";
-        position: absolute;
-        top:0;
-        left:-$size/2;
-        right:-$size/2;
-        bottom:0;
-        z-index:-1;
-        transform: skewX(-15deg);
-    }
-}
-
-@mixin colorize-shape($background-color) {
-    &:before {
-        background-color: $background-color;
-    }
-}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
new file mode 100644
index 0000000..6556338
--- /dev/null
+++ b/src/scss/_mixins.scss
@@ -0,0 +1,7 @@
+// MIXINS
+// Include every mixins files
+
+@import 'mixins/colors';
+@import 'mixins/responsive';
+@import 'mixins/borders';
+@import 'mixins/shape';
diff --git a/src/scss/_palette.scss b/src/scss/_palette.scss
index 2940fab..59e23e8 100644
--- a/src/scss/_palette.scss
+++ b/src/scss/_palette.scss
@@ -46,6 +46,14 @@ $semantics: (
   "success":"green",
   "muted":"grey");
 
+@function get-color($name) {
+    @if map-has-key($semantics, $name) {
+        @return map-get($palette, map-get($semantics, $name));
+    } @else {
+        @return map-get($palette, $name);
+    }
+}
+
 // **Couleurs du theme**
 // Ne pas retirer ces couleurs, qui
 // sont essentielle pour que le framework functionne.
diff --git a/src/scss/mixins/_borders.scss b/src/scss/mixins/_borders.scss
new file mode 100644
index 0000000..59a5221
--- /dev/null
+++ b/src/scss/mixins/_borders.scss
@@ -0,0 +1,15 @@
+// BORDERS AND BORDERS RADIUS MIXINS
+
+@mixin borders() {
+  border: $border-size solid rgba(0, 0, 0, 0.3)
+}
+
+@mixin prefer-no-borders() {
+  &:not(:hover) {
+    border-color:transparent;
+  }
+}
+
+@mixin border-radius($border-radius) {
+  border-radius: $border-radius $border-radius $border-radius $border-radius;
+}
diff --git a/src/scss/_colors.css b/src/scss/mixins/_colors.css
similarity index 90%
rename from src/scss/_colors.css
rename to src/scss/mixins/_colors.css
index 0639431..c10229f 100644
--- a/src/scss/_colors.css
+++ b/src/scss/mixins/_colors.css
@@ -6,14 +6,6 @@
  */
 
  // FUNCTIONS TO GET MORE EASILY COLORS
- @function get-color($name) {
-     @if map-has-key($semantics, $name) {
-         @return map-get($palette, map-get($semantics, $name));
-     } @else {
-         @return map-get($palette, $name);
-     }
- }
-
  @function list-colors() {
      $newmap: map-merge($palette, $semantics);
      @return $newmap;
diff --git a/src/scss/mixins/_responsive.scss b/src/scss/mixins/_responsive.scss
new file mode 100644
index 0000000..69cff3e
--- /dev/null
+++ b/src/scss/mixins/_responsive.scss
@@ -0,0 +1,59 @@
+// MIXINS RESPONSIVES
+
+// Small tablets and large smartphones (landscape view)
+$screen-sm-min: 576px;
+
+// Small tablets (portrait view)
+$screen-md-min: 768px;
+
+// Tablets and small desktops
+$screen-lg-min: 992px;
+
+// Large tablets and desktops
+$screen-xl-min: 1200px;
+
+// Very large desktops
+$screen-xxl-min: 1600px;
+
+
+// Small devices
+@mixin sm {
+   @media (min-width: #{$screen-sm-min}) {
+       @content;
+   }
+}
+
+// Medium devices
+@mixin md {
+   @media (min-width: #{$screen-md-min}) {
+       @content;
+   }
+}
+
+// Large devices
+@mixin lg {
+   @media (min-width: #{$screen-lg-min}) {
+       @content;
+   }
+}
+
+// Extra large devices
+@mixin xl {
+   @media (min-width: #{$screen-xl-min}) {
+       @content;
+   }
+}
+
+// Extra large desktops
+@mixin xxl {
+   @media (min-width: #{$screen-xxl-min}) {
+       @content;
+   }
+}
+
+// Custom devices
+@mixin rwd($screen) {
+   @media (min-width: $screen+'px' ) {
+      @content;
+   }
+}
diff --git a/src/scss/mixins/_shape.scss b/src/scss/mixins/_shape.scss
new file mode 100644
index 0000000..9e18acc
--- /dev/null
+++ b/src/scss/mixins/_shape.scss
@@ -0,0 +1,27 @@
+@mixin shape-style($size) {
+    @include borders();
+    @include border-radius($btn-radius);
+
+    background-color:transparent;
+
+    // Biseau
+    position: relative;
+    z-index:1;
+    overflow: visible;
+    &:before {
+        content: " ";
+        position: absolute;
+        top:0;
+        left:-$size/2;
+        right:-$size/2;
+        bottom:0;
+        z-index:-1;
+        transform: skewX(-15deg);
+    }
+}
+
+@mixin colorize-shape($background-color) {
+    &:before {
+        background-color: $background-color;
+    }
+}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 445592b..a8d65f7 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -21,10 +21,10 @@
 
 @import 'palette';
 
-@import 'colors';
-
 @import 'definitions';
 
+@import 'mixins';
+
 @import 'typography';
 
 @import 'global';