From 8d858b1a82f1060b91fe36b815ef5e339bbac052 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Fri, 12 Jul 2024 13:49:59 +0100 Subject: [PATCH] Chore: Migrate more SCSS (#90224) * tidy up alerts scss * clean up alerting page rules * remove mixins --- .betterer.results | 4 +- .../src/components/Alert/Toast.story.tsx | 8 +- .../DataSourceHttpSettings.tsx | 5 +- .../src/themes/GlobalStyles/GlobalStyles.tsx | 2 + .../src/themes/GlobalStyles/alerting.ts | 27 ++ .../dashboard/containers/SoloPanelPage.tsx | 3 +- .../PanelHeader/PanelHeaderTitleItems.tsx | 11 +- public/sass/_angular.scss | 115 +++++- public/sass/_grafana.scss | 3 - public/sass/base/_forms.scss | 10 +- public/sass/base/_grid.scss | 12 +- public/sass/base/_type.scss | 10 +- public/sass/components/_alerts.scss | 88 ----- public/sass/components/_buttons.scss | 18 +- public/sass/components/_gf-form.scss | 2 +- public/sass/components/_modals.scss | 13 +- public/sass/mixins/_mixins.scss | 372 ------------------ public/sass/pages/_alerting.scss | 163 -------- public/sass/utils/_utils.scss | 11 +- 19 files changed, 219 insertions(+), 658 deletions(-) create mode 100644 packages/grafana-ui/src/themes/GlobalStyles/alerting.ts delete mode 100644 public/sass/components/_alerts.scss delete mode 100644 public/sass/mixins/_mixins.scss delete mode 100644 public/sass/pages/_alerting.scss diff --git a/.betterer.results b/.betterer.results index 36a0895fa24..f009e948ed7 100644 --- a/.betterer.results +++ b/.betterer.results @@ -3403,9 +3403,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] ], "public/app/features/dashboard/containers/SoloPanelPage.tsx:5381": [ - [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 ", "0"] ], "public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] diff --git a/packages/grafana-ui/src/components/Alert/Toast.story.tsx b/packages/grafana-ui/src/components/Alert/Toast.story.tsx index 79e4118beda..789d3757d2b 100644 --- a/packages/grafana-ui/src/components/Alert/Toast.story.tsx +++ b/packages/grafana-ui/src/components/Alert/Toast.story.tsx @@ -30,11 +30,9 @@ const meta: Meta = { export const Basic: StoryFn = (args) => { return ( -
- - Child content that includes some alert details, like maybe what actually happened. - -
+ + Child content that includes some alert details, like maybe what actually happened. + ); }; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index 6f1dc9e7d58..9d092fd0abd 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -14,6 +14,7 @@ import { Icon } from '../Icon/Icon'; import { Select } from '../Select/Select'; import { InlineSwitch } from '../Switch/Switch'; import { TagsInput } from '../TagsInput/TagsInput'; +import { Text } from '../Text/Text'; import { BasicAuthSettings } from './BasicAuthSettings'; import { CustomHeadersSettings } from './CustomHeadersSettings'; @@ -48,13 +49,13 @@ const HttpAccessHelp = () => { {' '} should be the preferred way if nothing else is stated.

-
Server access mode (Default):
+ 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:
+ 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 diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index 1b8d77910dd..05a8154b701 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx @@ -3,6 +3,7 @@ import { Global } from '@emotion/react'; import { useTheme2 } from '../ThemeContext'; import { getAccessibilityStyles } from './accessibility'; +import { getAlertingStyles } from './alerting'; import { getAgularPanelStyles } from './angularPanelStyles'; import { getCardStyles } from './card'; import { getCodeStyles } from './code'; @@ -30,6 +31,7 @@ export function GlobalStyles() { styles={[ getAccessibilityStyles(theme), getAgularPanelStyles(theme), + getAlertingStyles(theme), getCodeStyles(theme), getElementStyles(theme), getExtraStyles(theme), diff --git a/packages/grafana-ui/src/themes/GlobalStyles/alerting.ts b/packages/grafana-ui/src/themes/GlobalStyles/alerting.ts new file mode 100644 index 00000000000..b9a9743dd72 --- /dev/null +++ b/packages/grafana-ui/src/themes/GlobalStyles/alerting.ts @@ -0,0 +1,27 @@ +import { css } from '@emotion/react'; + +import { GrafanaTheme2 } from '@grafana/data'; + +export function getAlertingStyles(theme: GrafanaTheme2) { + return css({ + '.alert-state-paused, .alert-state-pending': { + color: theme.colors.text.secondary, + fontWeight: theme.typography.fontWeightMedium, + }, + + '.alert-state-ok': { + color: theme.colors.success.text, + fontWeight: theme.typography.fontWeightMedium, + }, + + '.alert-state-warning': { + color: theme.colors.warning.text, + fontWeight: theme.typography.fontWeightMedium, + }, + + '.alert-state-critical': { + color: theme.colors.error.text, + fontWeight: theme.typography.fontWeightMedium, + }, + }); +} diff --git a/public/app/features/dashboard/containers/SoloPanelPage.tsx b/public/app/features/dashboard/containers/SoloPanelPage.tsx index 0295dc62d8b..4238b4f073a 100644 --- a/public/app/features/dashboard/containers/SoloPanelPage.tsx +++ b/public/app/features/dashboard/containers/SoloPanelPage.tsx @@ -2,6 +2,7 @@ import { Component } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import AutoSizer from 'react-virtualized-auto-sizer'; +import { Alert } from '@grafana/ui'; import { GrafanaContext, GrafanaContextType } from 'app/core/context/GrafanaContext'; import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; @@ -106,7 +107,7 @@ export interface SoloPanelProps extends State { export const SoloPanel = ({ dashboard, notFound, panel, panelId, timezone }: SoloPanelProps) => { if (notFound) { - return

Panel with id {panelId} not found
; + return ; } if (!panel || !dashboard) { diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx index 304f5178ff0..2399730beca 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx @@ -36,7 +36,7 @@ export function PanelHeaderTitleItems(props: Props) { [styles.alerting]: alertState === AlertState.Alerting, })} > - + ); @@ -90,12 +90,21 @@ const getStyles = (theme: GrafanaTheme2) => { return { ok: css({ color: theme.colors.success.text, + '&:hover': { + color: theme.colors.emphasize(theme.colors.success.text, 0.03), + }, }), pending: css({ color: theme.colors.warning.text, + '&:hover': { + color: theme.colors.emphasize(theme.colors.warning.text, 0.03), + }, }), alerting: css({ color: theme.colors.error.text, + '&:hover': { + color: theme.colors.emphasize(theme.colors.error.text, 0.03), + }, }), timeshift: css({ color: theme.colors.text.link, diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss index 080cacd5866..fa02774fd45 100644 --- a/public/sass/_angular.scss +++ b/public/sass/_angular.scss @@ -4,6 +4,17 @@ @use 'sass:map'; @use 'sass:color'; +// Gradients +@mixin gradient-vertical($startColor: #555, $endColor: #333) { + background-color: color.mix($startColor, $endColor, 60%); + background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10 + background-repeat: repeat-x; +} + +@mixin font-family-monospace() { + font-family: $font-family-monospace; +} + .edit-tab-content { flex-grow: 1; min-width: 0; @@ -75,7 +86,7 @@ input.invalid { font-size: $font-size-md; min-height: 50px; // Include space for horizontal scrollbar - @include border-radius($input-border-radius); + border-radius: $input-border-radius; border: $border-width solid $input-border-color; } @@ -2029,3 +2040,105 @@ $easing: cubic-bezier(0, 0, 0.265, 1); position: relative; top: -9px; } + +// +// Alerts +// -------------------------------------------------- + +// Base styles +// ------------------------- + +.alert { + padding: 15px 20px; + margin-bottom: $space-xs; + border-left: 3px solid $alert-error-bg; + background: $layer2; + position: relative; + border-radius: $border-radius; + display: flex; + flex-direction: row; + align-items: center; +} + +// Alternate styles +// ------------------------- + +.alert-success { + border-color: $alert-success-bg; +} + +.alert-danger, +.alert-error { + border-color: $alert-error-bg; +} + +.alert-info { + border-color: $alert-info-bg; +} + +.alert-warning { + border-color: $alert-warning-bg; +} + +.alert-title { + font-weight: $font-weight-semi-bold; +} + +.alert-icon { + padding: 0 $space-md 0 0; + display: flex; + align-items: center; + justify-content: center; + width: 35px; + + .fa { + font-size: 21px; + } +} + +.alert-body { + overflow-wrap: break-word; + word-break: break-word; + flex-grow: 1; +} + +// Alert List +.alert-rule-item__body { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + overflow: hidden; +} + +.alert-rule-item__header { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.alert-rule-item__name { + font-size: $font-size-base; + margin: 0; + font-weight: $font-weight-semi-bold; +} + +.alert-rule-item__text { + font-weight: bold; + font-size: $font-size-sm; + margin: 0; +} + +.alert-rule-item__time { + color: $text-color-weak; + font-weight: normal; + white-space: nowrap; +} + +.alert-rule-item__info { + //color: $text-color; + font-weight: normal; + flex-grow: 2; + display: flex; + align-items: flex-end; +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index ffff5a0b999..e23fb4c7a3a 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -1,5 +1,4 @@ // MIXINS -@import 'mixins/mixins'; @import 'mixins/breakpoints'; // BASE @@ -15,7 +14,6 @@ // COMPONENTS @import 'components/buttons'; -@import 'components/alerts'; @import 'components/gf-form'; @import 'components/modals'; @import 'components/dropdown'; @@ -24,7 +22,6 @@ // PAGES @import 'pages/dashboard'; -@import 'pages/alerting'; @import 'pages/history'; // ANGULAR diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index 0c5446a1e57..c231563e6e0 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -67,7 +67,11 @@ select:focus, input[type='file']:focus, input[type='radio']:focus, input[type='checkbox']:focus { - @include tab-focus(); + // Default + outline: thin dotted; + // WebKit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; } // not a big fan of number fields @@ -85,7 +89,9 @@ input[type='number'] { // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector input, textarea { - @include placeholder(); + &::placeholder { + color: $input-color-placeholder; + } } // INPUT SIZES diff --git a/public/sass/base/_grid.scss b/public/sass/base/_grid.scss index 6bb8732b4b5..481d04f799a 100644 --- a/public/sass/base/_grid.scss +++ b/public/sass/base/_grid.scss @@ -10,7 +10,11 @@ padding-left: calc($gutter / 2); padding-right: calc($gutter / 2); @if not $enable-flex { - @include clearfix(); + &::after { + content: ''; + display: table; + clear: both; + } } } @@ -28,7 +32,11 @@ display: flex; flex-wrap: wrap; } @else { - @include clearfix(); + &::after { + content: ''; + display: table; + clear: both; + } } margin-left: calc($gutter / -2); margin-right: calc($gutter / -2); diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 6de92879bc3..00bfc8d0ce4 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -94,13 +94,19 @@ dd { } // Horizontal layout (like forms) .dl-horizontal { - @include clearfix(); + &::after { + content: ''; + display: table; + clear: both; + } dt { float: left; width: $horizontalComponentOffset - 20; clear: left; text-align: right; - @include text-overflow(); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } dd { margin-left: $horizontalComponentOffset; diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss deleted file mode 100644 index 47d9894d079..00000000000 --- a/public/sass/components/_alerts.scss +++ /dev/null @@ -1,88 +0,0 @@ -// -// Alerts -// -------------------------------------------------- - -// Base styles -// ------------------------- - -.alert { - padding: 15px 20px; - margin-bottom: $space-xs; - border-left: 3px solid $alert-error-bg; - background: $layer2; - position: relative; - border-radius: $border-radius; - display: flex; - flex-direction: row; - align-items: center; -} - -// Alternate styles -// ------------------------- - -.alert-success { - border-color: $alert-success-bg; -} - -.alert-danger, -.alert-error { - border-color: $alert-error-bg; -} - -.alert-info { - border-color: $alert-info-bg; -} - -.alert-warning { - border-color: $alert-warning-bg; -} - -.alert-close { - padding: 0 0 0 $space-md; - border: none; - background: none; - display: flex; - align-items: center; - - .fa { - align-self: flex-end; - font-size: 21px; - color: rgba(255, 255, 255, 0.75); - } -} - -.alert-title { - font-weight: $font-weight-semi-bold; -} - -.alert-icon { - padding: 0 $space-md 0 0; - display: flex; - align-items: center; - justify-content: center; - width: 35px; - - .fa { - font-size: 21px; - } -} - -.alert-body { - overflow-wrap: break-word; - word-break: break-word; - flex-grow: 1; -} - -.alert-icon-on-top { - align-items: flex-start; -} - -@include media-breakpoint-down(sm) { - .page-alert-list { - min-width: 0; - top: 30px; - width: calc(100% - 20px); - max-height: calc(100% - 60px); - overflow-y: auto; - } -} diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index fddbf0aae2c..b045154def5 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -1,6 +1,16 @@ @use 'sass:color'; @use 'sass:map'; +// Gradient Bar Colors for buttons and alerts +@mixin gradientBar($primaryColor, $secondaryColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0, 0, 0, 0.25)) { + background-color: color.mix($primaryColor, $secondaryColor, 60%); + background-image: linear-gradient(to bottom, $primaryColor, $secondaryColor); // Standard, IE10 + background-repeat: repeat-x; + color: $text-color; + text-shadow: $textShadow; + border-color: $primaryColor; +} + @mixin hover { @if $enable-hover-media-query { // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover @@ -58,7 +68,7 @@ font-size: $font-size; //box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15); - @include border-radius($border-radius); + border-radius: $border-radius; } @mixin button-outline-variant($color) { @@ -133,7 +143,7 @@ &.active { &:focus, &.focus { - @include no-focus(); + outline: none; } } @@ -155,7 +165,7 @@ &:disabled { cursor: $cursor-disabled; opacity: 0.65; - @include box-shadow(none); + box-shadow: none; pointer-events: none; } @@ -249,7 +259,7 @@ .btn-outline-disabled { @include button-outline-variant($gray-1); - @include box-shadow(none); + box-shadow: none; cursor: default; &:hover, diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 8027d4080f1..04376ed5c8d 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -191,7 +191,7 @@ $input-border: 1px solid $input-border-color; margin-right: $space-xs; border: $border-width solid transparent; border-left: none; - @include border-radius($input-border-radius); + border-radius: $input-border-radius; } .gf-form-textarea { diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 0f03cdc9909..2c45bab98e1 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -15,7 +15,7 @@ .modal-backdrop, .modal-backdrop.fade.in { - @include opacity(70); + opacity: 0.7; } // Base modal @@ -24,8 +24,8 @@ z-index: $zindex-modal; width: 100%; background: $page-bg; - @include box-shadow(0 3px 7px rgba(0, 0, 0, 0.3)); - @include background-clip(padding-box); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + background-clip: padding-box; outline: none; max-width: 750px; @@ -82,7 +82,12 @@ border-top: 1px solid $panel-bg; background-color: $panel-bg; text-align: right; // right align buttons - @include clearfix(); // clear it in case folks use .pull-* classes on buttons + // clear it in case folks use .pull-* classes on buttons + &::after { + content: ''; + display: table; + clear: both; + } } .modal--narrow { diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss deleted file mode 100644 index 1db0f2f8e00..00000000000 --- a/public/sass/mixins/_mixins.scss +++ /dev/null @@ -1,372 +0,0 @@ -@use 'sass:color'; - -@mixin clearfix() { - &::after { - content: ''; - display: table; - clear: both; - } -} - -// Box sizing -@mixin box-sizing($boxmodel) { - box-sizing: $boxmodel; -} - -@mixin tab-focus() { - // Default - outline: thin dotted; - // WebKit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -@mixin no-focus() { - outline: none; -} - -// Center-align a block level element -// ---------------------------------- -@mixin center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -// ------------------------- -@mixin size($height, $width) { - width: $width; - height: $height; -} - -@mixin square($size) { - @include size($size, $size); -} - -// Placeholder text -// ------------------------- -@mixin placeholder($color: $input-color-placeholder) { - &::placeholder { - color: $color; - } -} - -// Text overflow -// ------------------------- -// Requires inline-block or block for proper styling -@mixin text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// CSS image replacement -// ------------------------- -// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - -// FONTS -// -------------------------------------------------- - -@mixin font-family-sans-serif() { - font-family: $font-family-sans-serif; -} - -@mixin font-family-monospace() { - font-family: $font-family-monospace; -} - -@mixin font-shorthand($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) { - font-size: $size; - font-weight: $weight; - line-height: $lineHeight; -} - -@mixin font-sans-serif($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) { - @include font-family-sans-serif(); - @include font-shorthand($size, $weight, $lineHeight); -} - -@mixin monospace($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) { - @include font-family-monospace; - @include font-shorthand($size, $weight, $lineHeight); -} - -// FORMS -// -------------------------------------------------- - -// Block level inputs -.input-block-level { - display: block; - width: 100%; - min-height: $input-line-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border) - @include box-sizing(border-box); // Makes inputs behave like true block-level elements -} - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Border Radius -@mixin border-radius($radius) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - border-radius: $radius; -} - -// Single Corner Border Radius -@mixin border-top-left-radius($radius) { - -webkit-border-top-left-radius: $radius; - -moz-border-radius-topleft: $radius; - border-top-left-radius: $radius; -} -@mixin border-top-right-radius($radius) { - -webkit-border-top-right-radius: $radius; - -moz-border-radius-topright: $radius; - border-top-right-radius: $radius; -} -@mixin border-bottom-right-radius($radius) { - -webkit-border-bottom-right-radius: $radius; - -moz-border-radius-bottomright: $radius; - border-bottom-right-radius: $radius; -} -@mixin border-bottom-left-radius($radius) { - -webkit-border-bottom-left-radius: $radius; - -moz-border-radius-bottomleft: $radius; - border-bottom-left-radius: $radius; -} - -// Single Side Border Radius -@mixin border-top-radius($radius) { - @include border-top-right-radius($radius); - @include border-top-left-radius($radius); -} -@mixin border-right-radius($radius) { - @include border-top-right-radius($radius); - @include border-bottom-right-radius($radius); -} -@mixin border-bottom-radius($radius) { - @include border-bottom-right-radius($radius); - @include border-bottom-left-radius($radius); -} -@mixin border-left-radius($radius) { - @include border-top-left-radius($radius); - @include border-bottom-left-radius($radius); -} - -// Drop shadows -@mixin box-shadow($shadow) { - box-shadow: $shadow; -} - -// Transitions -@mixin transition($transition) { - transition: $transition; -} - -@mixin transition-delay($transition-delay) { - transition-delay: $transition-delay; -} - -@mixin transition-duration($transition-duration) { - transition-duration: $transition-duration; -} - -// Transformations -@mixin rotate($degrees) { - transform: rotate($degrees); -} - -@mixin scale($ratio) { - transform: scale($ratio); -} - -@mixin translate($x, $y) { - transform: translate($x, $y); -} - -@mixin skew($x, $y) { - transform: skew($x, $y); - -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319 -} - -@mixin translate3d($x, $y, $z) { - transform: translate3d($x, $y, $z); -} - -@mixin backface-visibility($visibility) { - backface-visibility: $visibility; -} -// Heads up: FF 3.6 and under need "padding" instead of "padding-box" -@mixin background-clip($clip) { - background-clip: $clip; -} - -// Background sizing -@mixin background-size($size) { - background-size: $size; -} - -// User select -// For selecting text on the page -@mixin user-select($select) { - user-select: $select; -} - -// Resize anything -@mixin resizable($direction) { - resize: $direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// CSS3 Content Columns -@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) { - -webkit-column-count: $columnCount; - -moz-column-count: $columnCount; - column-count: $columnCount; - -webkit-column-gap: $columnGap; - -moz-column-gap: $columnGap; - column-gap: $columnGap; -} - -// Optional hyphenation -@mixin hyphens($mode: auto) { - word-wrap: break-word; - -webkit-hyphens: $mode; - -moz-hyphens: $mode; - -ms-hyphens: $mode; - -o-hyphens: $mode; - hyphens: $mode; -} - -// Opacity -@mixin opacity($opacity) { - opacity: calc($opacity / 100); -} - -// BACKGROUNDS -// -------------------------------------------------- - -// Add an alphatransparency value to any background or border color (via Elyse Holladay) -#translucent { - @mixin background($color: $white, $alpha: 1) { - background-color: hsla(color.hue($color), color.saturation($color), color.lightness($color), $alpha); - } - @mixin border($color: $white, $alpha: 1) { - border-color: hsla(color.hue($color), color.saturation($color), color.lightness($color), $alpha); - @include background-clip(padding-box); - } -} - -// Gradient Bar Colors for buttons and alerts -@mixin gradientBar($primaryColor, $secondaryColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0, 0, 0, 0.25)) { - color: $text-color; - text-shadow: $textShadow; - @include gradient-vertical($primaryColor, $secondaryColor); - border-color: $primaryColor; -} - -// Gradients -@mixin gradient-horizontal($startColor: #555, $endColor: #333) { - background-color: $endColor; - background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10 - background-repeat: repeat-x; -} - -@mixin gradient-vertical($startColor: #555, $endColor: #333) { - background-color: color.mix($startColor, $endColor, 60%); - background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10 - background-repeat: repeat-x; -} - -@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) { - background-color: $endColor; - background-repeat: repeat-x; - background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10 -} - -@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { - background-color: color.mix($midColor, $endColor, 80%); - background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor); - background-repeat: no-repeat; -} - -@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { - background-color: color.mix($midColor, $endColor, 80%); - background-image: linear-gradient($startColor, $midColor $colorStop, $endColor); - background-repeat: no-repeat; -} - -@mixin gradient-radial($innerColor: #555, $outerColor: #333) { - background-color: $outerColor; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor)); - background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor); - background-image: -moz-radial-gradient(circle, $innerColor, $outerColor); - background-image: -o-radial-gradient(circle, $innerColor, $outerColor); - background-repeat: no-repeat; -} - -@mixin striped($color: #555, $angle: 45deg) { - background-color: $color; - background-image: linear-gradient( - $angle, - rgba(255, 255, 255, 0.15) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, 0.15) 50%, - rgba(255, 255, 255, 0.15) 75%, - transparent 75%, - transparent - ); -} - -@mixin left-brand-border($color: transparent) { - border-left: 2px solid $color; -} - -@mixin left-brand-border-gradient() { - border-image: $brand-gradient-vertical; - border-image-slice: 1; - border-style: solid; - border-top: 0; - border-right: 0; - border-bottom: 0; - border-left-width: 2px; -} - -@mixin brand-bottom-border() { - border-image: $brand-gradient-horizontal; - border-image-slice: 1; - border-style: solid; - border-top: 0; - border-right: 0; - border-left: 0; - border-bottom-width: 1px; -} - -@mixin list-item() { - display: block; - margin: 3px; - padding: 7px; - background: $list-item-bg; - box-shadow: $list-item-shadow; - border-radius: $border-radius; - - &:hover { - background: $list-item-hover-bg; - } -} - -@function lightOrDark($lightColor, $darkColor) { - @if (lightness($text-color) < 50) { - @return $lightColor; - } @else { - @return $darkColor; - } -} diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss deleted file mode 100644 index d32cbae251e..00000000000 --- a/public/sass/pages/_alerting.scss +++ /dev/null @@ -1,163 +0,0 @@ -.alert-state-paused, -.alert-state-pending { - color: $text-muted; - font-weight: $font-weight-semi-bold; -} - -.alert-state-ok { - color: $online; - font-weight: $font-weight-semi-bold; -} - -.alert-state-warning { - color: $warn; - font-weight: $font-weight-semi-bold; -} - -.alert-state-critical { - color: $critical; - font-weight: $font-weight-semi-bold; -} - -.alert-notify-emails { - width: 400px; - border-right: 1px solid $black; -} - -.alert-notify-emails .bootstrap-tagsinput { - width: 394px; // offset for 8px left padding and border width -} - -.alert-notify-emails .bootstrap-tagsinput input { - border: 0; -} - -.panel-alert-icon { - display: none; -} - -.panel-has-alert { - .panel-alert-icon { - display: inline-block; - } -} - -.panel-alert-state { - &--alerting { - svg.panel-alert-icon { - color: $critical; - animation: alerting-panel 1s cubic-bezier(1, 0.1, 0.73, 1) 0s infinite alternate; - } - } - &--ok { - svg.panel-alert-icon { - color: $online; - } - } - - &--pending { - svg.panel-alert-icon { - color: $warn; - } - } -} - -@keyframes alerting-panel { - 100% { - transform: scale(1.2); - } -} - -// Alert List -// Alert List - -.alert-rule-list { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - list-style-type: none; -} - -.alert-rule-item { - display: flex; - align-items: center; - width: 100%; - height: 100%; - background: $card-background; - box-shadow: $card-shadow; - padding: 4px 8px; - border-radius: 4px; - margin-bottom: 4px; -} - -.alert-rule-item__body { - display: flex; - flex-direction: column; - flex-grow: 1; - justify-content: center; - overflow: hidden; -} - -.alert-rule-item__icon { - display: flex; - justify-content: center; - align-items: center; - width: 40px; - //margin-right: 8px; - padding: 0 4px 0 2px; - .icon-gf, - .fa { - font-size: 200%; - position: relative; - top: 2px; - } -} - -.alert-rule-item__header { - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.alert-rule-item__name { - font-size: $font-size-base; - margin: 0; - font-weight: $font-weight-semi-bold; -} - -.alert-list__btn { - margin: 0 2px; - display: flex; - align-items: center; - justify-content: center; -} - -.alert-rule-item__text { - font-weight: bold; - font-size: $font-size-sm; - margin: 0; -} - -.alert-rule-item__time { - color: $text-color-weak; - font-weight: normal; - white-space: nowrap; -} - -.alert-rule-item__info { - //color: $text-color; - font-weight: normal; - flex-grow: 2; - display: flex; - align-items: flex-end; -} - -.alert-rule-item__actions { - display: flex; - align-items: center; -} - -.alert-tesint { - display: flex; -} diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss index 8a38841c047..586cce5dc0b 100644 --- a/public/sass/utils/_utils.scss +++ b/public/sass/utils/_utils.scss @@ -1,5 +1,9 @@ .clearfix { - @include clearfix(); + &::after { + content: ''; + display: table; + clear: both; + } } .highlight-word { @@ -14,8 +18,7 @@ // Close icons // -------------------------------------------------- .close { - @include opacity(20); - + opacity: 0.2; float: right; font-size: 20px; font-weight: bold; @@ -28,7 +31,7 @@ color: $black; text-decoration: none; cursor: pointer; - @include opacity(40); + opacity: 0.4; } }