mirror of https://github.com/grafana/grafana
Chore: migrate `_grid` SCSS styles to emotion globals (#92986)
migrate _grid styles to emotion globalspull/92997/head
parent
4a4e3a4063
commit
6b6355e418
@ -1,174 +0,0 @@ |
||||
@use 'sass:math'; |
||||
@use 'sass:map'; |
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. |
||||
// Makes the @content apply to the given breakpoint and wider. |
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { |
||||
$min: if(map.get($breakpoints, $name) != 0, map.get($breakpoints, $name), null); |
||||
@if $min { |
||||
@media (min-width: $min) { |
||||
@content; |
||||
} |
||||
} @else { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
/// 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 { |
||||
&::after { |
||||
content: ''; |
||||
display: table; |
||||
clear: both; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 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 { |
||||
&::after { |
||||
content: ''; |
||||
display: table; |
||||
clear: both; |
||||
} |
||||
} |
||||
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. |
||||
|
||||
.container { |
||||
@include make-container(); |
||||
@include make-container-max-widths(); |
||||
} |
||||
|
||||
// Fluid container |
||||
// |
||||
// Utilizes the mixin meant for fixed width containers, but without any defined |
||||
// width for fluid, full width layouts. |
||||
|
||||
.container-fluid { |
||||
@include make-container(); |
||||
} |
||||
|
||||
// Row |
||||
// |
||||
// Rows contain and clear the floats of your columns. |
||||
|
||||
.row { |
||||
@include make-row(); |
||||
} |
||||
|
||||
// Columns |
||||
// |
||||
// Common styles for small and large grid columns |
||||
|
||||
@include make-grid-columns(); |
Loading…
Reference in new issue