Chore: Migrate more SCSS (#90224)

* tidy up alerts scss

* clean up alerting page rules

* remove mixins

.betterer.results

@@ -3403,9 +3403,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/dashboard/containers/SoloPanelPage.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [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"]
     ],
     "public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]

packages/grafana-ui/src/components/Alert/Toast.story.tsx

@@ -30,11 +30,9 @@ const meta: Meta<typeof Alert> = {
 
 export const Basic: StoryFn<typeof Alert> = (args) => {
   return (
-    <div className="page-alert-list">
+    <Alert {...args} elevated>
-      <Alert {...args} elevated>
+      Child content that includes some alert details, like maybe what actually happened.
-        Child content that includes some alert details, like maybe what actually happened.
+    </Alert>
-      </Alert>
-    </div>
   );
 };
 

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 = () => {
         </strong>{' '}
         should be the preferred way if nothing else is stated.
       </p>
-      <div className="alert-title">Server access mode (Default):</div>
+      <Text weight="medium">Server access mode (Default):</Text>
       <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>
+      <Text weight="medium">Browser access mode:</Text>
       <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

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),

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,
+    },
+  });
+}

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 <div className="alert alert-error">Panel with id {panelId} not found</div>;
+    return <Alert severity="error" title={`Panel with id ${panelId} not found`} />;
   }
 
   if (!panel || !dashboard) {

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx

@@ -36,7 +36,7 @@ export function PanelHeaderTitleItems(props: Props) {
           [styles.alerting]: alertState === AlertState.Alerting,
         })}
       >
-        <Icon name={alertState === 'alerting' ? 'heart-break' : 'heart'} className="panel-alert-icon" size="md" />
+        <Icon name={alertState === 'alerting' ? 'heart-break' : 'heart'} size="md" />
       </PanelChrome.TitleItem>
     </Tooltip>
   );
@@ -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,

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;
+}

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

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

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

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;

public/sass/components/_alerts.scss

@@ -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;
-  }
-}

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,

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 {

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));
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  @include background-clip(padding-box);
+  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 {

public/sass/mixins/_mixins.scss

@@ -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;
-  }
-}

public/sass/pages/_alerting.scss

@@ -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;
-}

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;
   }
 }