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

Chore: Migrate some more SCSS to emotion (#89038)

Browse Source 
* migrate section-heading

* move fonts to global styles

* migrate code styles to emotion globals

* migrate spacings styles and leave some in angular

* padding should be 2 here not 1
This commit is contained in:
Ashley Harrison 2024-06-12 14:46:20 +01:00 committed by GitHub
parent 9877aa7039
commit 13d00e09ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 316 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
.betterer.results
View File

@ -3630,13 +3630,11 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],
"public/app/features/datasources/components/DataSourceTestingStatus.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
],
"public/app/features/datasources/components/DataSourceTypeCard.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
@ -4541,14 +4539,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/inspector/InspectStatsTable.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/inspector/InspectStatsTraceIdsTable.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/inspector/QueryInspector.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
@ -4559,19 +4549,6 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "7"]
],
"public/app/features/inspector/styles.ts:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"]
],
"public/app/features/invites/InviteeRow.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
],

13
packages/grafana-sql/src/components/ConfirmModal.tsx
View File

@ -1,6 +1,8 @@
import { css } from '@emotion/css';
import React, { useRef, useEffect } from 'react';
import { Button, Icon, Modal } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { Button, Icon, Modal, useStyles2 } from '@grafana/ui';
type ConfirmModalProps = {
isOpen: boolean;
@ -10,6 +12,7 @@ type ConfirmModalProps = {
};
export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmModalProps) {
const buttonRef = useRef<HTMLButtonElement>(null);
const styles = useStyles2(getStyles);
// Moved from grafana/ui
useEffect(() => {
@ -24,7 +27,7 @@ export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmMod
title={
<div className="modal-header-title">
<Icon name="exclamation-triangle" size="lg" />
<span className="p-l-1">Warning</span>
<span className={styles.titleText}>Warning</span>
</div>
}
onDismiss={onCancel}
@ -49,3 +52,9 @@ export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmMod
</Modal>
);
}
const getStyles = (theme: GrafanaTheme2) => ({
titleText: css({
paddingLeft: theme.spacing(2),
}),
});

58
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
View File

@ -1,10 +1,10 @@
import { css, cx } from '@emotion/css';
import React, { useState, useCallback, useId } from 'react';
import { SelectableValue } from '@grafana/data';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { useTheme2 } from '../../themes';
import { useStyles2, useTheme2 } from '../../themes';
import { FormField } from '../FormField/FormField';
import { InlineFormLabel } from '../FormLabel/FormLabel';
import { InlineField } from '../Forms/InlineField';
@ -37,28 +37,38 @@ const DEFAULT_ACCESS_OPTION = {
value: 'proxy',
};
const HttpAccessHelp = () => (
<div className="grafana-info-box m-t-2">
<p>
Access mode controls how requests to the data source will be handled.
<strong>
&nbsp;<i>Server</i>
</strong>{' '}
should be the preferred way if nothing else is stated.
</p>
<div className="alert-title">Server access mode (Default):</div>
<p>
All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to
the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements. The URL needs
to be accessible from the grafana backend/server if you select this access mode.
</p>
<div className="alert-title">Browser access mode:</div>
<p>
All requests will be made from the browser directly to the data source and may be subject to Cross-Origin Resource
Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this access mode.
</p>
</div>
);
const HttpAccessHelp = () => {
const styles = useStyles2(getAccessStyles);
return (
<div className={cx('grafana-info-box', styles.infoBox)}>
<p>
Access mode controls how requests to the data source will be handled.
<strong>
&nbsp;<i>Server</i>
</strong>{' '}
should be the preferred way if nothing else is stated.
</p>
<div className="alert-title">Server access mode (Default):</div>
<p>
All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to
the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements. The URL needs
to be accessible from the grafana backend/server if you select this access mode.
</p>
<div className="alert-title">Browser access mode:</div>
<p>
All requests will be made from the browser directly to the data source and may be subject to Cross-Origin
Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this access
mode.
</p>
</div>
);
};
const getAccessStyles = (theme: GrafanaTheme2) => ({
infoBox: css({
marginTop: theme.spacing(3),
}),
});
const LABEL_WIDTH = 26;

4
packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
View File

@ -5,8 +5,10 @@ import { useTheme2 } from '../ThemeContext';
import { getAgularPanelStyles } from './angularPanelStyles';
import { getCardStyles } from './card';
import { getCodeStyles } from './code';
import { getElementStyles } from './elements';
import { getExtraStyles } from './extra';
import { getFontStyles } from './fonts';
import { getFormElementStyles } from './forms';
import { getLegacySelectStyles } from './legacySelect';
import { getMarkdownStyles } from './markdownStyles';
@ -22,8 +24,10 @@ export function GlobalStyles() {
return (
<Global
styles={[
getCodeStyles(theme),
getElementStyles(theme),
getExtraStyles(theme),
getFontStyles(theme),
getFormElementStyles(theme),
getPageStyles(theme),
getCardStyles(theme),

40
packages/grafana-ui/src/themes/GlobalStyles/code.ts Normal file
View File

@ -0,0 +1,40 @@
import { css } from '@emotion/react';
import { GrafanaTheme2 } from '@grafana/data';
export function getCodeStyles(theme: GrafanaTheme2) {
return css({
'code, pre': {
...theme.typography.code,
fontSize: theme.typography.bodySmall.fontSize,
backgroundColor: theme.colors.background.primary,
color: theme.colors.text.primary,
border: `1px solid ${theme.colors.border.medium}`,
borderRadius: '4px',
},
code: {
whiteSpace: 'nowrap',
padding: '2px 5px',
margin: '0 2px',
},
pre: {
display: 'block',
margin: `0 0 ${theme.typography.body.lineHeight}`,
lineHeight: theme.typography.body.lineHeight,
wordBreak: 'break-all',
wordWrap: 'break-word',
whiteSpace: 'pre-wrap',
padding: '10px',
code: {
padding: 0,
color: 'inherit',
whiteSpace: 'pre-wrap',
backgroundColor: 'transparent',
border: 0,
},
},
});
}

58
packages/grafana-ui/src/themes/GlobalStyles/fonts.ts Normal file
View File

@ -0,0 +1,58 @@
import { css } from '@emotion/react';
import { GrafanaTheme2 } from '@grafana/data';
export function getFontStyles(theme: GrafanaTheme2) {
return css([
{
/* latin */
'@font-face': {
fontFamily: 'Roboto Mono',
fontStyle: 'normal',
fontWeight: 400,
fontDisplay: 'swap',
src: "url('./public/fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2') format('woff2')",
unicodeRange:
'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
},
},
{
/* latin */
'@font-face': {
fontFamily: 'Roboto Mono',
fontStyle: 'normal',
fontWeight: 500,
fontDisplay: 'swap',
src: "url('./public/fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2') format('woff2')",
unicodeRange:
'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
},
},
{
/*
To add new variations/version of Inter, download from https://rsms.me/inter/ and add the
web font files to the public/fonts/inter folder. Do not download the fonts from Google Fonts
or somewhere else because they don't support the features we require (like tabular numerals).
If adding additional weights, consider switching to the InterVariable variable font as combined
it may take less space than multiple static weights.
*/
'@font-face': {
fontFamily: 'Inter',
fontStyle: 'normal',
fontWeight: 400,
fontDisplay: 'swap',
src: "url('./public/fonts/inter/Inter-Regular.woff2') format('woff2')",
},
},
{
'@font-face': {
fontFamily: 'Inter',
fontStyle: 'normal',
fontWeight: 500,
fontDisplay: 'swap',
src: "url('./public/fonts/inter/Inter-Medium.woff2') format('woff2')",
},
},
]);
}

31
public/app/features/datasources/components/DataSourceTestingStatus.tsx
View File

@ -4,7 +4,7 @@ import React, { HTMLAttributes } from 'react';
import { DataSourceSettings as DataSourceSettingsType, GrafanaTheme2 } from '@grafana/data';
import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
import { TestingStatus, config } from '@grafana/runtime';
import { AlertVariant, Alert, useTheme2, Link } from '@grafana/ui';
import { AlertVariant, Alert, useTheme2, Link, useStyles2 } from '@grafana/ui';
import { contextSrv } from '../../../core/core';
import { trackCreateDashboardClicked } from '../tracking';
@ -25,16 +25,16 @@ interface AlertMessageProps extends HTMLAttributes<HTMLDivElement> {
const getStyles = (theme: GrafanaTheme2, hasTitle: boolean) => {
return {
content: css`
color: ${theme.colors.text.secondary};
padding-top: ${hasTitle ? theme.spacing(1) : 0};
max-height: 50vh;
overflow-y: auto;
`,
disabled: css`
pointer-events: none;
color: ${theme.colors.text.secondary};
`,
content: css({
color: theme.colors.text.secondary,
paddingTop: hasTitle ? theme.spacing(1) : 0,
maxHeight: '50vh',
overflowY: 'auto',
}),
disabled: css({
pointerEvents: 'none',
color: theme.colors.text.secondary,
}),
};
};
@ -95,10 +95,11 @@ export function DataSourceTestingStatus({ testingStatus, exploreUrl, dataSource
path: location.pathname,
});
};
const styles = useStyles2(getTestingStatusStyles);
if (message) {
return (
<div className="gf-form-group p-t-2">
<div className={cx('gf-form-group', styles.container)}>
<Alert severity={severity} title={message} data-testid={e2eSelectors.pages.DataSource.alert}>
{testingStatus?.details && (
<>
@ -123,3 +124,9 @@ export function DataSourceTestingStatus({ testingStatus, exploreUrl, dataSource
return null;
}
const getTestingStatusStyles = (theme: GrafanaTheme2) => ({
container: css({
paddingTop: theme.spacing(3),
}),
});

18
public/app/features/inspector/InspectStatsTable.tsx
View File

@ -27,7 +27,7 @@ export const InspectStatsTable = ({ timeZone, name, stats }: InspectStatsTablePr
return (
<div className={styles.wrapper}>
<div className="section-heading">{name}</div>
<div className={styles.heading}>{name}</div>
<table className="filter-table width-30">
<tbody>
{stats.map((stat, index) => {
@ -57,10 +57,14 @@ function formatStat(stat: QueryResultMetaStat, timeZone: TimeZone, theme: Grafan
}
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
padding-bottom: ${theme.spacing(2)};
`,
cell: css`
text-align: right;
`,
heading: css({
fontSize: theme.typography.body.fontSize,
marginBottom: theme.spacing(1),
}),
wrapper: css({
paddingBottom: theme.spacing(2),
}),
cell: css({
textAlign: 'right',
}),
});

18
public/app/features/inspector/InspectStatsTraceIdsTable.tsx
View File

@ -18,7 +18,7 @@ export const InspectStatsTraceIdsTable = ({ name, traceIds }: Props) => {
return (
<div className={styles.wrapper}>
<div className="section-heading">{name}</div>
<div className={styles.heading}>{name}</div>
<table className="filter-table width-30">
<tbody>
{traceIds.map((traceId, index) => {
@ -35,10 +35,14 @@ export const InspectStatsTraceIdsTable = ({ name, traceIds }: Props) => {
};
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
padding-bottom: ${theme.spacing(2)};
`,
cell: css`
text-align: right;
`,
heading: css({
fontSize: theme.typography.body.fontSize,
marginBottom: theme.spacing(1),
}),
wrapper: css({
paddingBottom: theme.spacing(2),
}),
cell: css({
textAlign: 'right',
}),
});

2
public/app/features/inspector/QueryInspector.tsx
View File

@ -228,7 +228,7 @@ export class QueryInspector extends PureComponent<Props, State> {
return (
<div className={styles.wrap}>
<div aria-label={selectors.components.PanelInspector.Query.content}>
<h3 className="section-heading">Query inspector</h3>
<h3 className={styles.heading}>Query inspector</h3>
<p className="small muted">
<Trans i18nKey="inspector.query.description">
Query inspector allows you to view raw request and response. To collect this data Grafana needs to issue a

116
public/app/features/inspector/styles.ts
View File

@ -11,62 +11,66 @@ export const getPanelInspectorStyles = stylesFactory(() => {
export const getPanelInspectorStyles2 = (theme: GrafanaTheme2) => {
return {
wrap: css`
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
flex: 1 1 0;
min-height: 0;
`,
toolbar: css`
display: flex;
width: 100%;
flex-grow: 0;
align-items: center;
justify-content: flex-end;
margin-bottom: ${theme.v1.spacing.sm};
`,
toolbarItem: css`
margin-left: ${theme.v1.spacing.md};
`,
content: css`
flex-grow: 1;
height: 100%;
`,
editor: css`
font-family: monospace;
height: 100%;
flex-grow: 1;
`,
viewer: css`
overflow: scroll;
`,
dataFrameSelect: css`
flex-grow: 2;
`,
leftActions: css`
display: flex;
flex-grow: 1;
heading: css({
fontSize: theme.typography.body.fontSize,
marginBottom: theme.spacing(1),
}),
wrap: css({
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '100%',
flex: '1 1 0',
minHeight: 0,
}),
toolbar: css({
display: 'flex',
width: '100%',
flexGrow: 0,
alignItems: 'center',
justifyContent: 'flex-end',
marginBottom: theme.v1.spacing.sm,
}),
toolbarItem: css({
marginLeft: theme.v1.spacing.md,
}),
content: css({
flexGrow: 1,
height: '100%',
}),
editor: css({
fontFamily: 'monospace',
height: '100%',
flexGrow: 1,
}),
viewer: css({
overflow: 'scroll',
}),
dataFrameSelect: css({
flexGrow: 2,
}),
leftActions: css({
display: 'flex',
flexGrow: 1,
max-width: 85%;
@media (max-width: 1345px) {
max-width: 75%;
}
`,
options: css`
padding-top: ${theme.v1.spacing.sm};
`,
dataDisplayOptions: css`
flex-grow: 1;
min-width: 300px;
margin-right: ${theme.v1.spacing.sm};
`,
selects: css`
display: flex;
> * {
margin-right: ${theme.v1.spacing.sm};
}
`,
maxWidth: '85%',
'@media (max-width: 1345px)': {
maxWidth: '75%',
},
}),
options: css({
paddingTop: theme.v1.spacing.sm,
}),
dataDisplayOptions: css({
flexGrow: 1,
minWidth: '300px',
marginRight: theme.v1.spacing.sm,
}),
selects: css({
display: 'flex',
'> *': {
marginRight: theme.v1.spacing.sm,
},
}),
};
};

13
public/app/features/invites/SignupInvited.tsx
View File

@ -1,8 +1,10 @@
import { css, cx } from '@emotion/css';
import React, { useState } from 'react';
import { useAsync } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
import { Button, Field, Input } from '@grafana/ui';
import { Button, Field, Input, useStyles2 } from '@grafana/ui';
import { Form } from 'app/core/components/Form/Form';
import { Page } from 'app/core/components/Page/Page';
import { getConfig } from 'app/core/config';
@ -37,6 +39,7 @@ export const SignupInvitedPage = ({ match }: Props) => {
const [initFormModel, setInitFormModel] = useState<FormModel>();
const [greeting, setGreeting] = useState<string>();
const [invitedBy, setInvitedBy] = useState<string>();
const styles = useStyles2(getStyles);
useAsync(async () => {
const invite = await getBackendSrv().get(`/api/user/invite/${code}`);
@ -65,7 +68,7 @@ export const SignupInvitedPage = ({ match }: Props) => {
<Page.Contents>
<h3 className="page-sub-heading">Hello {greeting || 'there'}.</h3>
<div className="modal-tagline p-b-2">
<div className={cx('modal-tagline', styles.tagline)}>
<em>{invitedBy || 'Someone'}</em> has invited you to join Grafana and the organization{' '}
<span className="highlight-word">{contextSrv.user.orgName}</span>
<br />
@ -109,4 +112,10 @@ export const SignupInvitedPage = ({ match }: Props) => {
);
};
const getStyles = (theme: GrafanaTheme2) => ({
tagline: css({
paddingBottom: theme.spacing(3),
}),
});
export default SignupInvitedPage;

15
public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx
View File

@ -1,7 +1,8 @@
import { css } from '@emotion/css';
import React, { useState } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { Box, InlineField, Input, TagsInput } from '@grafana/ui';
import { GrafanaTheme2, QueryEditorProps } from '@grafana/data';
import { Box, InlineField, Input, TagsInput, useStyles2 } from '@grafana/ui';
import { GraphiteDatasource } from '../datasource';
import { GraphiteQuery, GraphiteOptions } from '../types';
@ -32,6 +33,7 @@ export const AnnotationEditor = (props: QueryEditorProps<GraphiteDatasource, Gra
setTags(tagsInput);
updateValue('tags', tagsInput);
};
const styles = useStyles2(getStyles);
return (
<Box marginBottom={5}>
@ -44,7 +46,7 @@ export const AnnotationEditor = (props: QueryEditorProps<GraphiteDatasource, Gra
/>
</InlineField>
<h5 className="section-heading">Or</h5>
<h5 className={styles.heading}>Or</h5>
<InlineField label="Graphite events tags" labelWidth={24}>
<TagsInput id="tags-input" width={50} tags={tags} onChange={onTagsChange} placeholder="Example: event_tag" />
@ -52,3 +54,10 @@ export const AnnotationEditor = (props: QueryEditorProps<GraphiteDatasource, Gra
</Box>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
heading: css({
fontSize: theme.typography.body.fontSize,
marginBottom: theme.spacing(1),
}),
});

40
public/sass/_angular.scss
View File

@ -1,6 +1,8 @@
// these styles are only used by angular components/pages
// once angular is disabled, this file can be deleted
@use 'sass:map';
.edit-tab-content {
flex-grow: 1;
min-width: 0;
@ -1792,3 +1794,41 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
}
}
}
.section-heading {
font-size: $font-size-md;
margin-bottom: $space-sm;
}
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $lengths in $spacers {
$length-x: map.get($lengths, x);
$length-y: map.get($lengths, y);
.#{$abbrev}-a-#{$size} {
#{$prop}: $length-y $length-x !important;
} // a = All sides
.#{$abbrev}-t-#{$size} {
#{$prop}-top: $length-y !important;
}
.#{$abbrev}-r-#{$size} {
#{$prop}-right: $length-x !important;
}
.#{$abbrev}-b-#{$size} {
#{$prop}-bottom: $length-y !important;
}
.#{$abbrev}-l-#{$size} {
#{$prop}-left: $length-x !important;
}
// Axes
.#{$abbrev}-x-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}-y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}

5
public/sass/_grafana.scss
View File

@ -13,12 +13,10 @@
@import 'base/type';
@import 'base/forms';
@import 'base/grid';
@import 'base/fonts';
@import 'base/code';
@import 'base/font_awesome';
// UTILS
@import 'utils/utils';
@import 'utils/spacings';
@import 'utils/widths';
// COMPONENTS
@ -33,7 +31,6 @@
@import 'components/dropdown';
@import 'components/infobox';
@import 'components/query_editor';
@import 'components/tabbed_view';
@import 'components/query_part';
@import 'components/json_explorer';
@import 'components/dashboard_grid';

62
public/sass/base/_code.scss
View File

@ -1,62 +0,0 @@
//
// Code (inline and blocK)
// --------------------------------------------------
// Inline and block code styles
code,
pre {
@include font-family-monospace();
font-size: $font-size-base - 2;
background-color: $code-tag-bg;
color: $text-color;
border: 1px solid $code-tag-border;
border-radius: 4px;
}
// Inline code
code {
color: $text-color;
white-space: nowrap;
padding: 2px 5px;
margin: 0 2px;
}
code.code--small {
font-size: $font-size-xs;
padding: $space-xxs;
margin: 0 2px;
}
// Blocks of code
pre {
display: block;
margin: 0 0 $line-height-base;
line-height: $line-height-base;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: $code-tag-bg;
padding: 10px;
&.pre--no-style {
background: transparent;
border: none;
padding: 0px;
}
// Make prettyprint styles more spaced out for readability
&.prettyprint {
margin-bottom: $line-height-base;
}
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
}

49
public/sass/base/_fonts.scss
View File

@ -1,49 +0,0 @@
@import 'font_awesome';
/* latin */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(#{$font-file-path}/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(#{$font-file-path}/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
To add new variations/version of Inter, download from https://rsms.me/inter/ and add the
web font files to the public/fonts/inter folder. Do not download the fonts from Google Fonts
or somewhere else because they don't support the features we require (like tabular numerals).
If adding additional weights, consider switching to the InterVariable variable font as combined
it may take less space than multiple static weights.
*/
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('#{$font-file-path}/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('#{$font-file-path}/inter/Inter-Medium.woff2') format('woff2');
}

4
public/sass/components/_tabbed_view.scss
View File

@ -1,4 +0,0 @@
.section-heading {
font-size: $font-size-md;
margin-bottom: $space-sm;
}

50
public/sass/utils/_spacings.scss
View File

@ -1,50 +0,0 @@
@use 'sass:map';
// Margin and Padding
.m-x-auto {
margin-right: auto !important;
margin-left: auto !important;
}
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $lengths in $spacers {
$length-x: map.get($lengths, x);
$length-y: map.get($lengths, y);
.#{$abbrev}-a-#{$size} {
#{$prop}: $length-y $length-x !important;
} // a = All sides
.#{$abbrev}-t-#{$size} {
#{$prop}-top: $length-y !important;
}
.#{$abbrev}-r-#{$size} {
#{$prop}-right: $length-x !important;
}
.#{$abbrev}-b-#{$size} {
#{$prop}-bottom: $length-y !important;
}
.#{$abbrev}-l-#{$size} {
#{$prop}-left: $length-x !important;
}
// Axes
.#{$abbrev}-x-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}-y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}
// Positioning
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
}