mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: migrate _grid SCSS styles to emotion globals (#92986)
migrate _grid styles to emotion globals
This commit is contained in:
Ashley Harrison
GitHub
parent
4a4e3a4063
commit
6b6355e418
@ -163,5 +163,29 @@ export function getUtilityClassStyles(theme: GrafanaTheme2) {
|
|||||||
zIndex: theme.zIndex.typeahead,
|
zIndex: theme.zIndex.typeahead,
|
||||||
},
|
},
|
||||||
...widthMixin(theme, 30),
|
...widthMixin(theme, 30),
|
||||||
|
'.row': {
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
marginLeft: `calc(${theme.spacing(4)} / -2)`,
|
||||||
|
marginRight: `calc(${theme.spacing(4)} / -2)`,
|
||||||
|
},
|
||||||
|
'.container': {
|
||||||
|
marginLeft: 'auto',
|
||||||
|
marginRight: 'auto',
|
||||||
|
paddingLeft: `calc(${theme.spacing(4)} / 2)`,
|
||||||
|
paddingRight: `calc(${theme.spacing(4)} / 2)`,
|
||||||
|
[theme.breakpoints.up('sm')]: {
|
||||||
|
maxWidth: theme.breakpoints.values.sm,
|
||||||
|
},
|
||||||
|
[theme.breakpoints.up('md')]: {
|
||||||
|
maxWidth: theme.breakpoints.values.md,
|
||||||
|
},
|
||||||
|
[theme.breakpoints.up('lg')]: {
|
||||||
|
maxWidth: theme.breakpoints.values.lg,
|
||||||
|
},
|
||||||
|
[theme.breakpoints.up('xl')]: {
|
||||||
|
maxWidth: theme.breakpoints.values.xl,
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
@use 'sass:map';
|
@use 'sass:map';
|
||||||
@use 'sass:color';
|
@use 'sass:color';
|
||||||
@use 'sass:list';
|
@use 'sass:list';
|
||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||||
// Makes the @content apply to the given breakpoint and wider.
|
// Makes the @content apply to the given breakpoint and wider.
|
||||||
@ -29,6 +30,24 @@
|
|||||||
font-family: $font-family-monospace;
|
font-family: $font-family-monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.edit-tab-content {
|
.edit-tab-content {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@ -2606,3 +2625,13 @@ input[type='checkbox'].cr1:checked + label {
|
|||||||
.max-width {
|
.max-width {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
||||||
|
@for $i from 1 through $grid-columns {
|
||||||
|
.col-#{$breakpoint}-#{$i} {
|
||||||
|
@include make-col($i, $grid-columns);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -18,7 +18,6 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// BASE
|
// BASE
|
||||||
@import 'base/grid';
|
|
||||||
@import 'base/font_awesome';
|
@import 'base/font_awesome';
|
||||||
|
|
||||||
// ANGULAR
|
// ANGULAR
|
||||||
|
|||||||
@ -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
Block a user