Chore: Move SCSS mixins to be where they're used (#89907)

move mixins to be where they're used

public/sass/base/_forms.scss

@@ -1,3 +1,37 @@
+@use 'sass:color';
+
+@mixin form-control-validation($color) {
+  // Color the label and help text
+  .text-help,
+  .form-control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline,
+  &.radio label,
+  &.checkbox label,
+  &.radio-inline label,
+  &.checkbox-inline label,
+  .custom-control {
+    color: $color;
+  }
+
+  .form-control {
+    border-color: $color;
+  }
+
+  // Set validation states also for addons
+  .input-group-addon {
+    color: $color;
+    border-color: $color;
+    background-color: color.adjust($color, $lightness: 40%);
+  }
+  // Optional feedback icon
+  .form-control-feedback {
+    color: $color;
+  }
+}
+
 //
 // Forms
 // --------------------------------------------------

public/sass/base/_grid.scss

@@ -1,3 +1,124 @@
+@use 'sass:math';
+
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-container($gutter: $grid-gutter-width) {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: calc($gutter / 2);
+  padding-right: calc($gutter / 2);
+  @if not $enable-flex {
+    @include clearfix();
+  }
+}
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
+@mixin make-row($gutter: $grid-gutter-width) {
+  @if $enable-flex {
+    display: flex;
+    flex-wrap: wrap;
+  } @else {
+    @include clearfix();
+  }
+  margin-left: calc($gutter / -2);
+  margin-right: calc($gutter / -2);
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+  position: relative;
+  min-height: 1px;
+  padding-right: calc($grid-gutter-width / 2);
+  padding-left: calc($grid-gutter-width / 2);
+
+  @if $enable-flex {
+    flex: 0 0 math.percentage(calc($size / $columns));
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: math.percentage(calc($size / $columns));
+  } @else {
+    float: left;
+    width: math.percentage(calc($size / $columns));
+  }
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  margin-left: math.percentage(calc($size / $columns));
+}
+
+@mixin make-col-push($size, $columns: $grid-columns) {
+  left: if($size > 0, math.percentage(calc($size / $columns)), auto);
+}
+
+@mixin make-col-pull($size, $columns: $grid-columns) {
+  right: if($size > 0, math.percentage(calc($size / $columns)), auto);
+}
+
+@mixin make-col-modifier($type, $size, $columns) {
+  // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
+  @if $type == push {
+    @include make-col-push($size, $columns);
+  } @else if $type == pull {
+    @include make-col-pull($size, $columns);
+  } @else if $type == offset {
+    @include make-col-offset($size, $columns);
+  }
+}
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+  $breakpoint-counter: 0;
+  @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-counter: ($breakpoint-counter + 1);
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $enable-flex {
+        .col-#{$breakpoint} {
+          position: relative;
+          flex-basis: 0;
+          flex-grow: 1;
+          max-width: 100%;
+          min-height: 1px;
+          padding-right: calc($grid-gutter-width / 2);
+          padding-left: calc($grid-gutter-width / 2);
+        }
+      }
+
+      @for $i from 1 through $columns {
+        .col-#{$breakpoint}-#{$i} {
+          @include make-col($i, $columns);
+        }
+      }
+
+      @each $modifier in (pull, push) {
+        @for $i from 0 through $columns {
+          .#{$modifier}-#{$breakpoint}-#{$i} {
+            @include make-col-modifier($modifier, $i, $columns);
+          }
+        }
+      }
+
+      // `$columns - 1` because offsetting by the width of an entire row isn't possible
+      @for $i from 0 through ($columns - 1) {
+        @if $breakpoint-counter != 1 or $i != 0 {
+          // Avoid emitting useless .col-xs-offset-0
+          .offset-#{$breakpoint}-#{$i} {
+            @include make-col-modifier(offset, $i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
+
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.