refactor(scss): change scss folder structure

themes/boodark/scss/_common.scss → themes/boodark/scss/base/_common.scss

@@ -3,7 +3,7 @@
 // Common
 
 #page_content {
-  margin: 0 .5em;
+  margin: 0 .75em;
 }
 
 #navbarDropdown > img {

themes/boodark/scss/core/_colors.scss

@@ -0,0 +1,64 @@
+// stylelint-disable scss/dollar-variable-colon-space-after
+// Colors
+// =============================================================================
+
+// PMA color system
+// -----------------------------------------------------------------------------
+$white:             #fff;
+$black:             #000;
+$pma-gray-100:      #f8f9fa;
+$pma-gray-200:      #e9ecef;
+$pma-gray-300:      #dee2e6;
+$pma-gray-400:      #ced4da;
+$pma-gray-500:      #adb5bd;
+$pma-gray-600:      #6c757d;
+$pma-gray-700:      #495057;
+$pma-gray-800:      #343a40;
+$pma-gray-900:      #212529;
+$pma-gray-100-rgb:  248, 249, 250;
+$pma-gray-200-rgb:  233, 236, 239;
+$pma-gray-300-rgb:  222, 226, 230;
+$pma-gray-400-rgb:  206, 212, 218;
+$pma-gray-500-rgb:  173, 181, 189;
+$pma-gray-600-rgb:  108, 117, 125;
+$pma-gray-700-rgb:  73, 80, 87;
+$pma-gray-800-rgb:  52, 58, 64;
+$pma-gray-900-rgb:  33, 37, 41;
+$pma-blue:          #0d6efd;
+$pma-indigo:        #6610f2;
+$pma-purple:        #6f42c1;
+$pma-pink:          #d63384;
+$pma-red:           #dc3545;
+$pma-orange:        #fd7e14;
+$pma-yellow:        #ffc107;
+$pma-green:         #198754;
+$pma-teal:          #20c997;
+$pma-cyan:          #0dcaf0;
+$pma-nord:          #88c0d0;
+
+// Theme Colors
+// -----------------------------------------------------------------------------
+$pma-theme-colors: (
+  "white":    $white,
+  "black":    $black,
+  "gray-100": $pma-gray-100,
+  "gray-200": $pma-gray-200,
+  "gray-300": $pma-gray-300,
+  "gray-400": $pma-gray-400,
+  "gray-500": $pma-gray-500,
+  "gray-600": $pma-gray-600,
+  "gray-700": $pma-gray-700,
+  "gray-800": $pma-gray-800,
+  "gray-900": $pma-gray-900,
+  "blue":     $pma-blue,
+  "indigo":   $pma-indigo,
+  "purple":   $pma-purple,
+  "pink":     $pma-pink,
+  "red":      $pma-red,
+  "orange":   $pma-orange,
+  "yellow":   $pma-yellow,
+  "green":    $pma-green,
+  "teal":     $pma-teal,
+  "cyan":     $pma-cyan,
+  "nord":     $pma-nord
+);

themes/boodark/scss/_variables.scss → themes/boodark/scss/core/_variables.scss

@@ -3,69 +3,11 @@
 // =============================================================================
 
 // Theme version
-$pma-theme-version: "1.1.1";
-
-// PMA color system
 // -----------------------------------------------------------------------------
-$white:             #fff;
-$black:             #000;
-$pma-gray-100:      #f8f9fa;
-$pma-gray-200:      #e9ecef;
-$pma-gray-300:      #dee2e6;
-$pma-gray-400:      #ced4da;
-$pma-gray-500:      #adb5bd;
-$pma-gray-600:      #6c757d;
-$pma-gray-700:      #495057;
-$pma-gray-800:      #343a40;
-$pma-gray-900:      #212529;
-$pma-gray-100-rgb:  248, 249, 250;
-$pma-gray-200-rgb:  233, 236, 239;
-$pma-gray-300-rgb:  222, 226, 230;
-$pma-gray-400-rgb:  206, 212, 218;
-$pma-gray-500-rgb:  173, 181, 189;
-$pma-gray-600-rgb:  108, 117, 125;
-$pma-gray-700-rgb:  73, 80, 87;
-$pma-gray-800-rgb:  52, 58, 64;
-$pma-gray-900-rgb:  33, 37, 41;
-$pma-blue:          #0d6efd;
-$pma-indigo:        #6610f2;
-$pma-purple:        #6f42c1;
-$pma-pink:          #d63384;
-$pma-red:           #dc3545;
-$pma-orange:        #fd7e14;
-$pma-yellow:        #ffc107;
-$pma-green:         #198754;
-$pma-teal:          #20c997;
-$pma-cyan:          #0dcaf0;
-$pma-nord:          #88c0d0;
-
-// Theme Colors
-$pma-theme-colors: (
-  "white":    $white,
-  "black":    $black,
-  "gray-100": $pma-gray-100,
-  "gray-200": $pma-gray-200,
-  "gray-300": $pma-gray-300,
-  "gray-400": $pma-gray-400,
-  "gray-500": $pma-gray-500,
-  "gray-600": $pma-gray-600,
-  "gray-700": $pma-gray-700,
-  "gray-800": $pma-gray-800,
-  "gray-900": $pma-gray-900,
-  "blue":     $pma-blue,
-  "indigo":   $pma-indigo,
-  "purple":   $pma-purple,
-  "pink":     $pma-pink,
-  "red":      $pma-red,
-  "orange":   $pma-orange,
-  "yellow":   $pma-yellow,
-  "green":    $pma-green,
-  "teal":     $pma-teal,
-  "cyan":     $pma-cyan,
-  "nord":     $pma-nord
-);
+$pma-theme-version: "1.1.1";
 
 // Theme color scheme
+// -----------------------------------------------------------------------------
 // Values: "cyan", "teal", "nord", "orange"
 // Default: "cyan"
 // Set this value for the desired color scheme

themes/boodark/scss/theme.scss

@@ -1,38 +1,44 @@
 // Theme: boodark
 
 // 1. Include any default variable overrides here
-@import "variables";
+@import "core/colors";
+@import "core/variables";
 
 // 2. Include Bootstrap
-@import "bootstrap";
-
-// 3. Include "phpMyAdmin" custom code
-@import "root";
-@import "tables";
-@import "forms";
-@import "common";
-@import "ui-custom";
-@import "enum-editor";
-@import "gis";
-@import "navigation";
-@import "designer";
-@import "codemirror";
-@import "jqplot";
-@import "icons";
-@import "reboot";
-@import "buttons";
-@import "nav";
-@import "navbar";
-// @import "card";
-@import "breadcrumb";
-// @import "pagination";
-// @import "alert";
-@import "list-group";
-@import "modal";
-@import "console";
-@import "settings";
-@import "helpers";
-@import "print";
+@import "vendors/bootstrap";
+
+// 3. Include "phpMyAdmin" base code
+@import "base/root";
+@import "base/reboot";
+@import "base/common";
+
+// 4. Include "phpMyAdmin" layout code
+@import "layout/navigation";
+@import "layout/forms";
+@import "layout/console";
+
+// 5. Include "phpMyAdmin" components code
+@import "components/tables";
+@import "components/buttons";
+@import "components/icons";
+@import "components/nav";
+@import "components/navbar";
+@import "components/breadcrumb";
+@import "components/list-group";
+@import "components/modal";
+@import "components/text";
+
+// 6. Include "phpMyAdmin" modules code
+@import "modules/ui-custom";
+@import "modules/enum-editor";
+@import "modules/gis";
+@import "modules/designer";
+@import "modules/codemirror";
+@import "modules/jqplot";
+
+// 7. Include "phpMyAdmin" pages/specific code
+@import "pages/settings";
+@import "pages/print";
 
 // DEBUG
 // stylelint-disable-next-line scss/at-import-no-partial-leading-underscore

themes/boodark/scss/vendors/_bootstrap.scss

@@ -0,0 +1,54 @@
+// Bootstrap
+
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+// see `variables.scss` file
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+
+// 4. Remove colors from `$theme-colors`
+// $theme-colors: map-remove($theme-colors, "light", "dark");
+@import "../mixins/alert";
+
+// 5. Include any optional Bootstrap CSS as needed
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+// @import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@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/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+// @import "bootstrap/scss/progress";
+@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/offcanvas";
+// @import "bootstrap/scss/placeholders";
+@import "bootstrap/scss/helpers";
+
+// 6. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "bootstrap/scss/utilities/api";