rearranged styles and outsourced tooltip styles

src/styles.scss

@@ -4,12 +4,15 @@
 // @import url("./button-styles.scss");
 // @import url("./colors.scss");
 
-@import "helpers";
-@import "button-styles";
-@import "colors";
 @import "responsive";
 @import "fonts";
-@import "info-row";
+
+@import "./styles/material";
+@import "./styles/helpers";
+@import "./styles/button-styles";
+@import "./styles/colors";
+@import "./styles/info-row";
+@import "./styles/tooltips";
 
 // #region new styles
 
@@ -285,36 +288,6 @@ input[type="checkbox"]:checked::after {
   border: var(--gold-1) !important;
 }
 
-// Tooltip
-
-.my-custom-class .tooltip-inner {
-  background-color: rgb(42, 42, 42);
-  border: var(--gold-dark-3);
-}
-.my-custom-class.bs-tooltip-end .tooltip-arrow::before {
-  border-right-color: var(--gold-dark);
-}
-.my-custom-class.bs-tooltip-start .tooltip-arrow::before {
-  border-left-color: var(--gold-dark);
-}
-.my-custom-class.bs-tooltip-top .tooltip-arrow::before {
-  border-top-color: var(--gold-dark);
-}
-.my-custom-class.bs-tooltip-bottom .tooltip-arrow::before {
-  border-bottom-color: var(--gold-dark);
-}
-
-.tooltip-content {
-  padding: 0.5rem;
-  p {
-    margin-bottom: 0;
-  }
-}
-
-.tooltip.show {
-  opacity: 1;
-}
-
 // Used to remove the empty space under form fields
 .mat-mdc-form-field-subscript-wrapper {
   display: none;
@@ -329,79 +302,79 @@ body {
 
 // Overriding the default styles of angular material
 
-.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
-  .mdc-list-item__primary-text {
-  color: var(--primary) !important;
-}
-
-.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
-.mat-primary
-  .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
-  color: var(--primary) !important;
-}
-
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-notched-outline__leading,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-notched-outline__notch,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-notched-outline__trailing {
-  border-color: var(--primary) !important;
-}
-
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
-  .mdc-notched-outline__leading,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
-  .mdc-notched-outline__notch,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
-  .mdc-notched-outline__trailing {
-  border-color: var(--primary) !important;
-}
-
-.mdc-text-field--outlined:not(.mdc-text-field--disabled)
-  .mdc-text-field__input {
-  caret-color: var(--primary) !important;
-}
-
-.mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
-  color: var(--primary) !important;
-}
-
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-floating-label,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-floating-label--float-above {
-  color: var(--primary) !important;
-}
-
-.mat-mdc-radio-button
-  .mdc-radio
-  .mdc-radio__native-control:enabled:checked
-  + .mdc-radio__background
-  .mdc-radio__outer-circle {
-  border-color: var(--primary) !important;
-}
-
-.mat-mdc-radio-button
-  .mdc-radio
-  .mdc-radio__native-control:enabled
-  + .mdc-radio__background
-  .mdc-radio__inner-circle {
-  border-color: var(--primary) !important;
-}
-
-.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element {
-  background-color: var(--primary) !important;
-}
-
-.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after,
-.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
-  background-color: var(--gold) !important;
-}
-
-.mdc-switch:enabled .mdc-switch__track::before {
-  background-color: var(--grey-light) !important;
-}
-.mdc-switch:enabled .mdc-switch__track::after {
-  background-color: var(--grey) !important;
-}
+// .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
+//   .mdc-list-item__primary-text {
+//   color: var(--primary) !important;
+// }
+
+// .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
+// .mat-primary
+//   .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
+//   color: var(--primary) !important;
+// }
+
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-notched-outline__leading,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-notched-outline__notch,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-notched-outline__trailing {
+//   border-color: var(--primary) !important;
+// }
+
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+//   .mdc-notched-outline__leading,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+//   .mdc-notched-outline__notch,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+//   .mdc-notched-outline__trailing {
+//   border-color: var(--primary) !important;
+// }
+
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled)
+//   .mdc-text-field__input {
+//   caret-color: var(--primary) !important;
+// }
+
+// .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
+//   color: var(--primary) !important;
+// }
+
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-floating-label,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-floating-label--float-above {
+//   color: var(--primary) !important;
+// }
+
+// .mat-mdc-radio-button
+//   .mdc-radio
+//   .mdc-radio__native-control:enabled:checked
+//   + .mdc-radio__background
+//   .mdc-radio__outer-circle {
+//   border-color: var(--primary) !important;
+// }
+
+// .mat-mdc-radio-button
+//   .mdc-radio
+//   .mdc-radio__native-control:enabled
+//   + .mdc-radio__background
+//   .mdc-radio__inner-circle {
+//   border-color: var(--primary) !important;
+// }
+
+// .mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element {
+//   background-color: var(--primary) !important;
+// }
+
+// .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after,
+// .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
+//   background-color: var(--gold) !important;
+// }
+
+// .mdc-switch:enabled .mdc-switch__track::before {
+//   background-color: var(--grey-light) !important;
+// }
+// .mdc-switch:enabled .mdc-switch__track::after {
+//   background-color: var(--grey) !important;
+// }

src/styles/material.scss

@@ -0,0 +1,76 @@
+.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
+  .mdc-list-item__primary-text {
+  color: var(--primary) !important;
+}
+
+.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
+.mat-primary
+  .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
+  color: var(--primary) !important;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-notched-outline__trailing {
+  border-color: var(--primary) !important;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+  .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+  .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+  .mdc-notched-outline__trailing {
+  border-color: var(--primary) !important;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled)
+  .mdc-text-field__input {
+  caret-color: var(--primary) !important;
+}
+
+.mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
+  color: var(--primary) !important;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-floating-label,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-floating-label--float-above {
+  color: var(--primary) !important;
+}
+
+.mat-mdc-radio-button
+  .mdc-radio
+  .mdc-radio__native-control:enabled:checked
+  + .mdc-radio__background
+  .mdc-radio__outer-circle {
+  border-color: var(--primary) !important;
+}
+
+.mat-mdc-radio-button
+  .mdc-radio
+  .mdc-radio__native-control:enabled
+  + .mdc-radio__background
+  .mdc-radio__inner-circle {
+  border-color: var(--primary) !important;
+}
+
+.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element {
+  background-color: var(--primary) !important;
+}
+
+.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after,
+.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
+  background-color: var(--gold) !important;
+}
+
+.mdc-switch:enabled .mdc-switch__track::before {
+  background-color: var(--grey-light) !important;
+}
+.mdc-switch:enabled .mdc-switch__track::after {
+  background-color: var(--grey) !important;
+}

src/styles/tooltips.scss

@@ -0,0 +1,27 @@
+.tooltip-styles .tooltip-inner {
+  background-color: rgb(42, 42, 42);
+  border: var(--gold-dark-3);
+}
+.tooltip-styles.bs-tooltip-end .tooltip-arrow::before {
+  border-right-color: var(--gold-dark);
+}
+.tooltip-styles.bs-tooltip-start .tooltip-arrow::before {
+  border-left-color: var(--gold-dark);
+}
+.tooltip-styles.bs-tooltip-top .tooltip-arrow::before {
+  border-top-color: var(--gold-dark);
+}
+.tooltip-styles.bs-tooltip-bottom .tooltip-arrow::before {
+  border-bottom-color: var(--gold-dark);
+}
+
+.tooltip-content {
+  padding: 0.5rem;
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.tooltip.show {
+  opacity: 1;
+}