refactor(extra-features): Refactor css

Two files: Variables.scss with bootstrap overrides and custom.scss

falcon/_dev/css/theme/_custom.scss

@@ -1,78 +1,8 @@
-// --------- Root variables -----------
+/* ------------------------------------------------------------------------- */
+/* ⚠️ Variables can be found in variables.scss instead of defined in root */
+/* ------------------------------------------------------------------------- */
 
-// Might also be edited under abstracts/variables/bootstrap
-
-:root {
-    // Colors
-    // Generated from the $ variables in abstracts/variables/bootstrap/_colors.scss
-    // so the two can never drift apart.
-    @each $name, $value in (
-        white: $white,
-        gray-100: $gray-100,
-        gray-200: $gray-200,
-        gray-300: $gray-300,
-        gray-400: $gray-400,
-        gray-500: $gray-500,
-        gray-600: $gray-600,
-        gray-700: $gray-700,
-        gray-800: $gray-800,
-        gray-900: $gray-900,
-        black: $black,
-        blue: $blue,
-        indigo: $indigo,
-        purple: $purple,
-        pink: $pink,
-        red: $red,
-        orange: $orange,
-        yellow: $yellow,
-        green: $green,
-        teal: $teal,
-        cyan: $cyan
-    ) {
-        --#{$name}: #{$value};
-    }
-
-    --primary: #2daae1;
-    --secondary: #3b5b74;
-    --tertiary: #f0f5fa;
-    --quaternary: #1a1c2a;
-    --success: var(--green);
-    --info: var(--cyan);
-    --warning: var(--orange);
-    --danger: var(--red);
-    --light: #f0f5fa;
-    --dark: #3b5b74;
-
-    // Typography
-    --font-family-base: "Poppins", sans-serif;
-    --font-size-base: 0.875rem;
-    --text-color: var(--dark);
-
-    // Buttons
-    --btn-font-weight: 500;
-    --btn-border-radius: 99em;
-    --btn-padding-y: 20px;
-    --btn-padding-x: 10px;
-}
-
-$headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
-$text: "#{$headers}, p, span, a, li";
-
-$color-themes: primary, secondary, success, danger, warning, info, light, dark;
-
-$section-spacer: rem-calc(50px);
-$section-spacer-small: rem-calc(25px);
-
-body {
-    font-family: var(--font-family-base);
-    font-size: var(--font-size-base);
-}
-
-#{$text} {
-    color: var(--text-color);
-}
-
-// --------- Breakpoints -----------
+/* --------- Breakpoints bootstrap 5 ----------- */
 
 @mixin bs5-media-breakpoint-up($name) {
     $min: map-get($grid-breakpoints, $name);
@@ -106,9 +36,13 @@ body {
     }
 }
 
-// --------- Utilities -----------
+/* --------- Utilities ----------- */
+
+/* Spacers */
+
+$section-spacer: rem-calc(50px);
+$section-spacer-small: rem-calc(25px);
 
-// Spacers
 .section-spacer-both {
     padding-top: $section-spacer-small;
     padding-bottom: $section-spacer-small;
@@ -140,42 +74,7 @@ body {
     }
 }
 
-// Bootstrap variable bridge for components
-@each $name in $color-themes {
-    .bg-#{$name} {
-        background-color: var(--#{$name}) !important;
-    }
-    .text-#{$name} {
-        color: var(--#{$name}) !important;
-    }
-    .border-#{$name} {
-        border-color: var(--#{$name}) !important;
-    }
-    .badge-#{$name} {
-        background-color: var(--#{$name});
-        color: var(--white);
-    }
-    .alert-#{$name} {
-        border-color: var(--#{$name});
-    }
-}
-
-// Font weight utility classes generator (ex: .fw-100)
-@for $i from 100 through 900 {
-    @if $i % 100 == 0 {
-        .fw-#{$i} {
-            font-weight: #{$i} !important;
-        }
-    }
-}
-
-// gap size utility classes generator (ex: .gap-4)
-@for $i from 1 through 35 {
-    .gap-#{$i} {
-        gap: rem-calc($i * 1px) !important;
-    }
-}
-
+/* Hex to rgba function */
 @function hex-to-rgba($hex, $alpha) {
     $r: red($hex);
     $g: green($hex);
@@ -183,39 +82,7 @@ body {
     @return rgba($r, $g, $b, $alpha);
 }
 
-// Other utilities
-
-// --------- Components: Buttons -----------
-
-@each $name in ($color-themes) {
-    .btn-#{$name} {
-        background-color: var(--#{$name});
-        border-color: var(--#{$name});
-        border-radius: var(--btn-border-radius);
-        font-weight: var(--btn-font-weight);
-        padding: var(--btn-padding-x) var(--btn-padding-y);
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-            background-color: var(--#{$name});
-            border-color: var(--#{$name});
-        }
-    }
-    .btn-outline-#{$name} {
-        color: var(--#{$name});
-        border-color: var(--#{$name});
-        border-radius: var(--btn-border-radius);
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-            background-color: var(--#{$name});
-            border-color: var(--#{$name});
-        }
-    }
-}
+/* --------- Components: Buttons ----------- */
 
 .bootstrap-touchspin {
     flex-wrap: nowrap;
@@ -238,7 +105,8 @@ body {
 .btn:focus {
     box-shadow: none !important;
 }
-// --------- Components: Forms -----------
+
+/* --------- Components: Forms ----------- */
 
 .input-group.js-parent-focus {
     .input-group-append .btn {
@@ -251,12 +119,14 @@ body {
     height: $input-height;
 }
 
-// --------- Components: Swiper -----------
+/* --------- Components: Swiper ----------- */
+
 .swiper-slide {
     height: auto;
 }
 
-// --------- Layout: Header -----------
+/* --------- Layout: Header ----------- */
+
 .header-top__row {
     flex-wrap: wrap;
     .header-top__block--search {
@@ -275,7 +145,7 @@ body {
     }
 }
 
-// --------- Layout: Left column -----------
+/* --------- Layout: Left column ----------- */
 #left-column {
     .list-group-item,
     .list-group-item-action-dropdown-link,