mirror of
https://github.com/grafana/grafana.git
synced 2025-01-02 12:17:01 -06:00
Chore: Move SCSS mixins to be where they're used (#89907)
move mixins to be where they're used
This commit is contained in:
Ashley Harrison
GitHub
parent
4306d52353
commit
ba64ee44cb
@ -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';
|
||||
|
||||
@ -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
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user