diff --git a/.betterer.results b/.betterer.results index f1637bf05fe..c5e1da0bb83 100644 --- a/.betterer.results +++ b/.betterer.results @@ -3630,13 +3630,11 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "0"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "5"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "6"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "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 ", "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 ", "0"] ], diff --git a/packages/grafana-sql/src/components/ConfirmModal.tsx b/packages/grafana-sql/src/components/ConfirmModal.tsx index 6ee12a6ce7f..0bf1e1b67d5 100644 --- a/packages/grafana-sql/src/components/ConfirmModal.tsx +++ b/packages/grafana-sql/src/components/ConfirmModal.tsx @@ -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(null); + const styles = useStyles2(getStyles); // Moved from grafana/ui useEffect(() => { @@ -24,7 +27,7 @@ export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmMod title={
- Warning + Warning
} onDismiss={onCancel} @@ -49,3 +52,9 @@ export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmMod ); } + +const getStyles = (theme: GrafanaTheme2) => ({ + titleText: css({ + paddingLeft: theme.spacing(2), + }), +}); diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index 998c614738e..d9d9d8df1fb 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -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 = () => ( -
-

- Access mode controls how requests to the data source will be handled. - -  Server - {' '} - should be the preferred way if nothing else is stated. -

-
Server access mode (Default):
-

- 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. -

-
Browser access mode:
-

- 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. -

-
-); +const HttpAccessHelp = () => { + const styles = useStyles2(getAccessStyles); + return ( +
+

+ Access mode controls how requests to the data source will be handled. + +  Server + {' '} + should be the preferred way if nothing else is stated. +

+
Server access mode (Default):
+

+ 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. +

+
Browser access mode:
+

+ 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. +

+
+ ); +}; + +const getAccessStyles = (theme: GrafanaTheme2) => ({ + infoBox: css({ + marginTop: theme.spacing(3), + }), +}); const LABEL_WIDTH = 26; diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index 791adfa5391..377318481c3 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx @@ -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 ( { 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 ( -
+
{testingStatus?.details && ( <> @@ -123,3 +124,9 @@ export function DataSourceTestingStatus({ testingStatus, exploreUrl, dataSource return null; } + +const getTestingStatusStyles = (theme: GrafanaTheme2) => ({ + container: css({ + paddingTop: theme.spacing(3), + }), +}); diff --git a/public/app/features/inspector/InspectStatsTable.tsx b/public/app/features/inspector/InspectStatsTable.tsx index 51ff54afb15..a014e31e588 100644 --- a/public/app/features/inspector/InspectStatsTable.tsx +++ b/public/app/features/inspector/InspectStatsTable.tsx @@ -27,7 +27,7 @@ export const InspectStatsTable = ({ timeZone, name, stats }: InspectStatsTablePr return (
-
{name}
+
{name}
{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', + }), }); diff --git a/public/app/features/inspector/InspectStatsTraceIdsTable.tsx b/public/app/features/inspector/InspectStatsTraceIdsTable.tsx index 6c0855deb86..b94491db68e 100644 --- a/public/app/features/inspector/InspectStatsTraceIdsTable.tsx +++ b/public/app/features/inspector/InspectStatsTraceIdsTable.tsx @@ -18,7 +18,7 @@ export const InspectStatsTraceIdsTable = ({ name, traceIds }: Props) => { return (
-
{name}
+
{name}
{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', + }), }); diff --git a/public/app/features/inspector/QueryInspector.tsx b/public/app/features/inspector/QueryInspector.tsx index fb1e0cd8238..3650114ea7e 100644 --- a/public/app/features/inspector/QueryInspector.tsx +++ b/public/app/features/inspector/QueryInspector.tsx @@ -228,7 +228,7 @@ export class QueryInspector extends PureComponent { return (
-

Query inspector

+

Query inspector

Query inspector allows you to view raw request and response. To collect this data Grafana needs to issue a diff --git a/public/app/features/inspector/styles.ts b/public/app/features/inspector/styles.ts index 888793288ba..86646950382 100644 --- a/public/app/features/inspector/styles.ts +++ b/public/app/features/inspector/styles.ts @@ -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, + }, + }), }; }; diff --git a/public/app/features/invites/SignupInvited.tsx b/public/app/features/invites/SignupInvited.tsx index bea01970007..96c7cddeafb 100644 --- a/public/app/features/invites/SignupInvited.tsx +++ b/public/app/features/invites/SignupInvited.tsx @@ -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(); const [greeting, setGreeting] = useState(); const [invitedBy, setInvitedBy] = useState(); + const styles = useStyles2(getStyles); useAsync(async () => { const invite = await getBackendSrv().get(`/api/user/invite/${code}`); @@ -65,7 +68,7 @@ export const SignupInvitedPage = ({ match }: Props) => {

Hello {greeting || 'there'}.

-
+
{invitedBy || 'Someone'} has invited you to join Grafana and the organization{' '} {contextSrv.user.orgName}
@@ -109,4 +112,10 @@ export const SignupInvitedPage = ({ match }: Props) => { ); }; +const getStyles = (theme: GrafanaTheme2) => ({ + tagline: css({ + paddingBottom: theme.spacing(3), + }), +}); + export default SignupInvitedPage; diff --git a/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx b/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx index 0eddf2e3e8e..e27c5afce7a 100644 --- a/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx +++ b/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx @@ -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 @@ -44,7 +46,7 @@ export const AnnotationEditor = (props: QueryEditorProps -
Or
+
Or
@@ -52,3 +54,10 @@ export const AnnotationEditor = (props: QueryEditorProps ); }; + +const getStyles = (theme: GrafanaTheme2) => ({ + heading: css({ + fontSize: theme.typography.body.fontSize, + marginBottom: theme.spacing(1), + }), +}); diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss index c63debe1113..d5b8abf0bcd 100644 --- a/public/sass/_angular.scss +++ b/public/sass/_angular.scss @@ -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; + } + } +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index b59b8903c9a..f19901dc014 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -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'; diff --git a/public/sass/base/_code.scss b/public/sass/base/_code.scss deleted file mode 100644 index 92a34ebbede..00000000000 --- a/public/sass/base/_code.scss +++ /dev/null @@ -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; - } -} diff --git a/public/sass/base/_fonts.scss b/public/sass/base/_fonts.scss deleted file mode 100644 index f38a1bdd829..00000000000 --- a/public/sass/base/_fonts.scss +++ /dev/null @@ -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'); -} diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss deleted file mode 100644 index 48b90642ed7..00000000000 --- a/public/sass/components/_tabbed_view.scss +++ /dev/null @@ -1,4 +0,0 @@ -.section-heading { - font-size: $font-size-md; - margin-bottom: $space-sm; -} diff --git a/public/sass/utils/_spacings.scss b/public/sass/utils/_spacings.scss deleted file mode 100644 index 5648e379077..00000000000 --- a/public/sass/utils/_spacings.scss +++ /dev/null @@ -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; -}