From ba64ee44cb418aa45c1fcafb71db56475ec7d91c Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 2 Jul 2024 11:28:27 +0100 Subject: [PATCH] Chore: Move SCSS mixins to be where they're used (#89907) move mixins to be where they're used --- public/sass/_grafana.scss | 5 - public/sass/base/_forms.scss | 34 +++++++ public/sass/base/_grid.scss | 121 ++++++++++++++++++++++++ public/sass/components/_buttons.scss | 105 ++++++++++++++++++++ public/sass/components/_gf-form.scss | 7 ++ public/sass/mixins/_buttons.scss | 73 -------------- public/sass/mixins/_forms.scss | 66 ------------- public/sass/mixins/_grid-framework.scss | 48 ---------- public/sass/mixins/_grid.scss | 76 --------------- public/sass/mixins/_hover.scss | 67 ------------- 10 files changed, 267 insertions(+), 335 deletions(-) delete mode 100644 public/sass/mixins/_buttons.scss delete mode 100644 public/sass/mixins/_forms.scss delete mode 100644 public/sass/mixins/_grid-framework.scss delete mode 100644 public/sass/mixins/_grid.scss delete mode 100644 public/sass/mixins/_hover.scss diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index b24b2d4648e..e4108aa327f 100644 --- a/public/sass/_grafana.scss +++ b/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'; diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index c653ef89e1e..0c5446a1e57 100644 --- a/public/sass/base/_forms.scss +++ b/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 // -------------------------------------------------- diff --git a/public/sass/base/_grid.scss b/public/sass/base/_grid.scss index bf825a155e9..6bb8732b4b5 100644 --- a/public/sass/base/_grid.scss +++ b/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. diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 16d7b941449..fddbf0aae2c 100644 --- a/public/sass/components/_buttons.scss +++ b/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 // -------------------------------------------------- diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 761d7e070c7..8027d4080f1 100644 --- a/public/sass/components/_gf-form.scss +++ b/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; diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss deleted file mode 100644 index 7fec07c19ed..00000000000 --- a/public/sass/mixins/_buttons.scss +++ /dev/null @@ -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%); - } - } -} diff --git a/public/sass/mixins/_forms.scss b/public/sass/mixins/_forms.scss deleted file mode 100644 index 70b34f75d4f..00000000000 --- a/public/sass/mixins/_forms.scss +++ /dev/null @@ -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. `