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

move mixins to be where they're used

public/sass/_grafana.scss

@@ -1,11 +1,6 @@
 // MIXINS
 @import 'mixins/mixins';
-@import 'mixins/buttons';
 @import 'mixins/breakpoints';
-@import 'mixins/grid';
-@import 'mixins/grid-framework';
-@import 'mixins/hover';
-@import 'mixins/forms';
 
 // BASE
 @import 'base/reboot';

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.

public/sass/components/_buttons.scss

@@ -1,5 +1,110 @@
 @use 'sass:color';
 @use 'sass:map';
+
+@mixin hover {
+  @if $enable-hover-media-query {
+    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
+    @media (hover: hover) {
+      &:hover {
+        @content;
+      }
+    }
+  } @else {
+    &:hover {
+      @content;
+    }
+  }
+}
+
+@mixin hover-focus {
+  @if $enable-hover-media-query {
+    &:focus {
+      @content;
+    }
+    @include hover {
+      @content;
+    }
+  } @else {
+    &:focus,
+    &:hover {
+      @content;
+    }
+  }
+}
+
+// Button backgrounds
+// ------------------
+@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0px 1px 0 rgba(0, 0, 0, 0.1)) {
+  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+  @include gradientBar($startColor, $endColor, $text-color, $textShadow);
+
+  // in these cases the gradient won't cover the background, so we override
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  &.disabled,
+  &[disabled] {
+    color: $text-color;
+    background-image: none;
+    background-color: $startColor;
+  }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  //box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15);
+
+  @include border-radius($border-radius);
+}
+
+@mixin button-outline-variant($color) {
+  color: $white;
+  background-image: none;
+  background-color: transparent;
+  border: 1px solid $white;
+
+  @include hover {
+    color: $white;
+    background-color: $color;
+  }
+
+  &:focus,
+  &.focus {
+    color: $white;
+    background-color: $color;
+  }
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $white;
+    background-color: $color;
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $white;
+      background-color: color.adjust($color, $lightness: -17%);
+      border-color: color.adjust($color, $lightness: -25%);
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    &:focus,
+    &.focus {
+      border-color: color.adjust($color, $lightness: 20%);
+    }
+    @include hover {
+      border-color: color.adjust($color, $lightness: 20%);
+    }
+  }
+}
+
 //
 // Buttons
 // --------------------------------------------------

public/sass/components/_gf-form.scss

@@ -1,6 +1,13 @@
 @use 'sass:list';
 $input-border: 1px solid $input-border-color;
 
+@mixin form-control-focus() {
+  &:focus {
+    border-color: $input-border-focus;
+    outline: none;
+  }
+}
+
 .gf-form {
   display: flex;
   flex-direction: row;

public/sass/mixins/_buttons.scss

@@ -1,73 +0,0 @@
-@use 'sass:color';
-
-// Button backgrounds
-// ------------------
-@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0px 1px 0 rgba(0, 0, 0, 0.1)) {
-  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
-  @include gradientBar($startColor, $endColor, $text-color, $textShadow);
-
-  // in these cases the gradient won't cover the background, so we override
-  &:hover,
-  &:focus,
-  &:active,
-  &.active,
-  &.disabled,
-  &[disabled] {
-    color: $text-color;
-    background-image: none;
-    background-color: $startColor;
-  }
-}
-
-// Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  padding: $padding-y $padding-x;
-  font-size: $font-size;
-  //box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15);
-
-  @include border-radius($border-radius);
-}
-
-@mixin button-outline-variant($color) {
-  color: $white;
-  background-image: none;
-  background-color: transparent;
-  border: 1px solid $white;
-
-  @include hover {
-    color: $white;
-    background-color: $color;
-  }
-
-  &:focus,
-  &.focus {
-    color: $white;
-    background-color: $color;
-  }
-
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
-    color: $white;
-    background-color: $color;
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $white;
-      background-color: color.adjust($color, $lightness: -17%);
-      border-color: color.adjust($color, $lightness: -25%);
-    }
-  }
-
-  &.disabled,
-  &:disabled {
-    &:focus,
-    &.focus {
-      border-color: color.adjust($color, $lightness: 20%);
-    }
-    @include hover {
-      border-color: color.adjust($color, $lightness: 20%);
-    }
-  }
-}

public/sass/mixins/_forms.scss

@@ -1,66 +0,0 @@
-@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;
-  }
-}
-
-@mixin form-control-focus() {
-  &:focus {
-    border-color: $input-border-focus;
-    outline: none;
-  }
-}
-
-// Form control sizing
-//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
-
-@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  #{$parent} {
-    height: $input-height;
-    padding: $padding-y $padding-x;
-    font-size: $font-size;
-    line-height: $line-height;
-    @include border-radius($border-radius);
-  }
-
-  select#{$parent} {
-    height: $input-height;
-    line-height: $input-height;
-  }
-
-  textarea#{$parent},
-  select[multiple]#{$parent} {
-    height: auto;
-  }
-}

public/sass/mixins/_grid-framework.scss

@@ -1,48 +0,0 @@
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `$grid-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);
-          }
-        }
-      }
-    }
-  }
-}

public/sass/mixins/_grid.scss

@@ -1,76 +0,0 @@
-@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);
-  }
-}

public/sass/mixins/_hover.scss

@@ -1,67 +0,0 @@
-@mixin hover {
-  @if $enable-hover-media-query {
-    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
-    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
-    @media (hover: hover) {
-      &:hover {
-        @content;
-      }
-    }
-  } @else {
-    &:hover {
-      @content;
-    }
-  }
-}
-
-@mixin hover-focus {
-  @if $enable-hover-media-query {
-    &:focus {
-      @content;
-    }
-    @include hover {
-      @content;
-    }
-  } @else {
-    &:focus,
-    &:hover {
-      @content;
-    }
-  }
-}
-
-@mixin plain-hover-focus {
-  @if $enable-hover-media-query {
-    &,
-    &:focus {
-      @content;
-    }
-    @include hover {
-      @content;
-    }
-  } @else {
-    &,
-    &:focus,
-    &:hover {
-      @content;
-    }
-  }
-}
-
-@mixin hover-focus-active {
-  @if $enable-hover-media-query {
-    &:focus,
-    &:active {
-      @content;
-    }
-    @include hover {
-      @content;
-    }
-  } @else {
-    &:focus,
-    &:active,
-    &:hover {
-      @content;
-    }
-  }
-}