IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: migrate _grid SCSS styles to emotion globals (#92986)

Browse Source 
migrate _grid styles to emotion globals
This commit is contained in:
Ashley Harrison 2024-09-05 16:39:12 +01:00 committed by GitHub
parent 4a4e3a4063
commit 6b6355e418
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 53 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafana-ui/src/themes/GlobalStyles/utilityClasses.ts
View File

@ -163,5 +163,29 @@ export function getUtilityClassStyles(theme: GrafanaTheme2) {
zIndex: theme.zIndex.typeahead,
},
...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,
},
},
});
}

29
public/sass/_angular.scss
View File

@ -4,6 +4,7 @@
@use 'sass:map';
@use 'sass:color';
@use 'sass:list';
@use 'sass:math';
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@ -29,6 +30,24 @@
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 {
flex-grow: 1;
min-width: 0;
@ -2606,3 +2625,13 @@ input[type='checkbox'].cr1:checked + label {
.max-width {
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);
}
}
}
}

1
public/sass/_grafana.scss
View File

@ -18,7 +18,6 @@ body {
}
// BASE
@import 'base/grid';
@import 'base/font_awesome';
// ANGULAR

174
public/sass/base/_grid.scss
View File

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