🚧 Big CSS Cleanup

.qlty/configs/.stylelintrc.yaml

@@ -1,13 +1,13 @@
 extends: stylelint-config-standard-scss
 
 rules:
-  scss/at-extend-no-missing-placeholder: false
-  scss/dollar-variable-pattern: false
-  scss/at-function-pattern: false # TODO: we should standardize function names
+  # scss/at-extend-no-missing-placeholder: false
+  # scss/dollar-variable-pattern: false
+  # scss/at-function-pattern: false # TODO: we should standardize function names
 
   alpha-value-notation: number # TODO: Sass is too old, this should be percentage
 
-  color-function-alias-notation: false # TODO: make it 'without-alpha'
+  # color-function-alias-notation: false # TODO: make it 'without-alpha'
   color-function-notation: legacy # TODO: make it 'modern'
 
   custom-property-pattern:
@@ -25,12 +25,14 @@ rules:
     - always-multi-line
     - except:
       - first-nested
-      - after-first-line-comment
+      - after-single-line-comment
     - ignore:
       - after-comment
 
-  selector-class-pattern: false # TODO: we should standardize class names
+  selector-class-pattern: null # TODO: we should standardize class names
 
-  selector-id-pattern: false # TODO: we should standardize id names
+  # selector-id-pattern: false # TODO: we should standardize id names
 
-  value-keyword-case: lower
+  value-keyword-case:
+    - lower
+    - camelCaseSvgKeywords: true

.qlty/qlty.toml

@@ -100,4 +100,5 @@ package_filters = ["eslint"]
 
 [[plugin]]
 name = "stylelint"
+version = "15.11.0"
 extra_packages = ["stylelint-config-standard-scss@latest"]

.stylelintignore

@@ -0,0 +1 @@
+app/assets/stylesheets/vendor/**/*.scss

app/assets/stylesheets/error.scss

@@ -1,9 +1,8 @@
-@use 'provider/colors' as *;
-@use 'provider/logo';
-@use 'provider/typography' as *;
+@use "provider/typography" as *;
 
 $width: line-height-times(24);
 $wrapper-padding: line-height-times(1);
+$border-color: #d2d2d2;
 
 html {
   @include typography-base;
@@ -51,7 +50,7 @@ body {
   /* stylelint-disable-next-line no-descending-specificity -- FIXME */
   a {
     text-decoration: none;
-    color: $label-color;
+    color: #8A8D90;
   }
 }
 

app/assets/stylesheets/provider/_buttons.scss

@@ -1,120 +1,53 @@
 @use "provider/colors" as *;
 @use "provider/typography" as *;
-@use 'sass:math';
+@use "sass:math";
 
-@mixin internal-potato-button($color, $bgcolor, $border-color) {
-  font-size: $font-size-base;
-  background-color: $bgcolor;
-  border-radius: $border-radius-sm;
-  display: inline-block;
-  vertical-align: top;
-  margin: 0;
-  padding: line-height-times(math.div(1,3)) line-height-times(.5) !important;
-  border: $border-width solid $border-color;
-  color: $color;
-  text-decoration: none;
-  width: auto !important;
-  min-width: line-height-times(3);
-  cursor: pointer;
-  white-space: nowrap;
-  text-align: center !important;
-  height: line-height-times(1.5);
-  line-height: $line-height-sm;
-  appearance: none;
-
-  &.big {
-    font-size: $font-size-lg;
-  }
-
-  &:hover {
-    color: $bgcolor;
-    background-color: transparent;
-  }
-
-}
-
-table [type='submit']:not(.action, .pf-c-button, .pf-c-dropdown__menu-item) {
-  float: right;
-
-  @include internal-potato-button($important-button-color, $important-button-bg-color, $important-button-border-color);
-}
-
-table .disabled-button,
-/* stylelint-disable-next-line no-descending-specificity -- FIXME */
-.disabled-button {
-  @include internal-potato-button($disabled-button-color, $disabled-button-bg-color, $disabled-button-border-color);
-
-  cursor: default;
-}
-
-.button.next,
-a.next {
-  float: right;
-}
-
-.confirm-or-cancel {
-  .button.next,
-  a.next {
-    clear: none;
-  }
-
-  .button.cancel,
-  a.cancel {
-    float: left;
-    margin-top: line-height-times(2);
+.button,
+a {
+  &.next {
+    float: right;
   }
-
-}
-
-form.formtastic .button-bar fieldset {
-  margin: 0;
 }
 
-// Lame but functional, improvements welcomed.
-form.formtastic .button-bar,
-/* stylelint-disable-next-line no-descending-specificity -- FIXME */
+// TODO: remove this class
 .button-bar {
   position: relative;
 
+  fieldset {
+    margin: 0;
+  }
+
   & > fieldset {
-    /* stylelint-disable-next-line no-descending-specificity -- FIXME */
+    & > ol > li {
+      display: inline-block;
+    }
+
     &.actions:first-child {
       float: left;
       margin: line-height-times(.5) 0 0;
       padding: 0;
       text-align: left !important;
 
-      /* stylelint-disable-next-line no-descending-specificity -- FIXME */
       & > ol > li {
         margin-right: var(--pf-global--spacer--sm);
       }
     }
 
-    /* stylelint-disable-next-line no-descending-specificity -- FIXME */
     &.actions:last-child:not(:first-child) {
       float: right;
       margin: line-height-times(.5) 0 0;
       padding: 0;
 
-      /* stylelint-disable-next-line no-descending-specificity -- FIXME */
       & > ol > li {
         margin-left: var(--pf-global--spacer--sm);
       }
-
-    }
-
-    /* stylelint-disable-next-line no-descending-specificity -- FIXME */
-    & > ol > li {
-      display: inline-block;
     }
   }
-}
 
-/* stylelint-disable-next-line no-descending-specificity -- FIXME */
-.formtastic .button-bar {
   display: flow-root;
 }
 
+// TODO: remove outline-button
 @mixin outline-button($color: $font-color, $border-color: $border-color) {
   color: $color;
   display: inline-block;

app/assets/stylesheets/provider/_colorbox.scss

@@ -3,6 +3,7 @@
 @use 'provider/links' as *;
 @use 'sass:math';
 
+/* stylelint-disable selector-id-pattern */
 #colorbox,
 #cboxOverlay,
 #cboxWrapper {
@@ -17,11 +18,16 @@
 
 #cboxWrapper {
   max-width: none;
+
+  h2 {
+    font-weight: $font-weight-bold;
+    font-size: $secondary-title-font-size;
+  }
 }
 
 #colorbox {
-  box-shadow: 0 0 line-height-times(.5) $box-shadow-color;
-  background: rgba($body-background, .99);
+  box-shadow: var(--pf-global--BoxShadow--lg);
+  background: white;
   border: $border-width solid $border-color;
   text-align: left;
   border-radius: $border-radius;
@@ -59,7 +65,7 @@
   position: fixed;
   width: 100%;
   height: 100%;
-  background: rgba($content-background, .8);
+  background: var(--pf-global--BackgroundColor--dark-transparent-100);
 }
 
 #cboxMiddleLeft,
@@ -129,3 +135,4 @@
     }
   }
 }
+/* stylelint-enable selector-id-pattern */