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 _widths SCSS to global emotion styles (#92863)

Browse Source 
* migrate widths to global styles

* only calculate width once per loop
This commit is contained in:
Ashley Harrison 2024-09-03 14:04:21 +01:00 committed by GitHub
parent 9d974f7560
commit f34f5b80b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 27 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import { CSSInterpolation } from '@emotion/css';
import { css } from '@emotion/react';
import { GrafanaTheme2 } from '@grafana/data';
@ -33,6 +34,27 @@ function buttonSizeMixin(paddingY: string, paddingX: string, fontSize: string, b
};
}
function widthMixin(theme: GrafanaTheme2, max: number) {
let result: CSSInterpolation = {};
for (let i = 1; i <= max; i++) {
const width = `${theme.spacing(2 * i)} !important`;
result[`.width-${i}`] = {
width,
};
result[`.max-width-${i}`] = {
maxWidth: width,
flexGrow: 1,
};
result[`.min-width-${i}`] = {
minWidth: width,
};
result[`.offset-width-${i}`] = {
marginLeft: width,
};
}
return result;
}
export function getUtilityClassStyles(theme: GrafanaTheme2) {
return css({
'.highlight-word': {
@ -140,5 +162,6 @@ export function getUtilityClassStyles(theme: GrafanaTheme2) {
'.typeahead': {
zIndex: theme.zIndex.typeahead,
},
...widthMixin(theme, 30),
});
}

4
public/sass/_angular.scss
View File

@ -2602,3 +2602,7 @@ label.cr1 {
input[type='checkbox'].cr1:checked + label {
background: url($checkboxImageUrl) 0px -18px no-repeat;
}
.max-width {
width: 100%;
}

3
public/sass/_grafana.scss
View File

@ -3,8 +3,5 @@
@import 'base/grid';
@import 'base/font_awesome';
// UTILS
@import 'utils/widths';
// ANGULAR
@import 'angular';

32
public/sass/utils/_widths.scss
View File

@ -1,32 +0,0 @@
.max-width {
width: 100%;
}
.width-auto {
width: auto;
}
// widths
@for $i from 1 through 30 {
.width-#{$i} {
width: ($spacer * $i) !important;
}
}
@for $i from 1 through 30 {
.max-width-#{$i} {
max-width: ($spacer * $i) !important;
flex-grow: 1;
}
}
@for $i from 1 through 30 {
.min-width-#{$i} {
min-width: ($spacer * $i) !important;
}
}
@for $i from 1 through 30 {
.offset-width-#{$i} {
margin-left: ($spacer * $i) !important;
}
}