apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
move mixins to be where they're used
pull/89945/head
Ashley Harrison 1 year ago committed by GitHub
parent 4306d52353
commit ba64ee44cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 267 additions and 335 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      public/sass/_grafana.scss
  2. 34
      public/sass/base/_forms.scss
  3. 121
      public/sass/base/_grid.scss
  4. 105
      public/sass/components/_buttons.scss
  5. 7
      public/sass/components/_gf-form.scss
  6. 73
      public/sass/mixins/_buttons.scss
  7. 66
      public/sass/mixins/_forms.scss
  8. 48
      public/sass/mixins/_grid-framework.scss
  9. 76
      public/sass/mixins/_grid.scss
  10. 67
      public/sass/mixins/_hover.scss

5
public/sass/_grafana.scss
Unescape View File

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

34
public/sass/base/_forms.scss
Unescape View File

@ -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 // Forms
// -------------------------------------------------- // --------------------------------------------------

121
public/sass/base/_grid.scss
Unescape View File

@ -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 // Container widths
// //
// Set the container width, and override it for fixed navbars in media queries. // Set the container width, and override it for fixed navbars in media queries.

105
public/sass/components/_buttons.scss
Unescape View File

@ -1,5 +1,110 @@
@use 'sass:color'; @use 'sass:color';
@use 'sass:map'; @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 // Buttons
// -------------------------------------------------- // --------------------------------------------------

7
public/sass/components/_gf-form.scss
Unescape View File

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

73
public/sass/mixins/_buttons.scss
Unescape View File

@ -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%);
}
}
}

66
public/sass/mixins/_forms.scss
Unescape View File

@ -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;
}
}

48
public/sass/mixins/_grid-framework.scss
Unescape View File

@ -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);
}
}
}
}
}
}

76
public/sass/mixins/_grid.scss
Unescape View File

@ -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);
}
}

67
public/sass/mixins/_hover.scss
Unescape View File

@ -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;
}
}
}
Write Preview
Loading…
Cancel
Save