MNT Fix scss linting warnings (#1774)

silverstripe · Jun 11, 2024 · ca48f9a · ca48f9a
1 parent 17a4e1f
commit ca48f9a
Show file tree

Hide file tree

Showing 50 changed files with 824 additions and 614 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1 @@
-client/src/styles/legacy/*
+client/src/tinymce/*
diff --git a/client/dist/styles/GridField_print.css b/client/dist/styles/GridField_print.css
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/Accordion/Accordion.scss b/client/src/components/Accordion/Accordion.scss
@@ -19,7 +19,7 @@
   text-decoration: none;
   border-bottom: 1px solid $border-color;
 
-  &::before {
+  &:before {
     padding: calc($spacer * .75) $panel-padding;
     position: absolute;
     right: 0;
@@ -29,20 +29,20 @@
     color: lighten($body-color, 30);
     text-align: center;
     content: "7";
-    font-family: silverstripe;
+    font-family: "silverstripe";
 	}
 
   &:hover,
   &:active,
   &:focus {
     text-decoration: none;
 
-    &::before {
+    &:before {
       color: $body-color;
     }
   }
 
-  &.collapsed::before {
+  &.collapsed:before {
     content: "6";
     display: block;
   }

diff --git a/client/src/components/ActionMenu/ActionMenu.scss b/client/src/components/ActionMenu/ActionMenu.scss
@@ -15,7 +15,7 @@
     }
   }
 
-  .dropdown-item[class*="font-icon-"]::before {
+  .dropdown-item[class*="font-icon-"]:before {
     position: relative;
     margin-right: $btn-icon-spacing;
     line-height: $line-height-base * $font-size-root;

diff --git a/client/src/components/Breadcrumb/Breadcrumb.scss b/client/src/components/Breadcrumb/Breadcrumb.scss
@@ -54,7 +54,7 @@
   display: block;
   float: none;
 
-  &::after {
+  &:after {
     content: "";
     display: none;
   }
@@ -78,12 +78,14 @@
   font-size: $h3-font-size;
   font-weight: normal;
   line-height: 24px;
+
   @include text-truncate;
+
   display: flex;
   align-items: center;
 }
 
-.breadcrumb__icon::before {
+.breadcrumb__icon:before {
   margin-left: 1rem;
   font-size: 1.5rem;
   cursor: pointer;

diff --git a/client/src/components/FileStatusIcon/FileStatusIcon.scss b/client/src/components/FileStatusIcon/FileStatusIcon.scss
@@ -3,7 +3,7 @@
 
   // uses the pseudo element from 'font-icon' to display different icons
   // e.g. class="icon file-status-icon font-icon-user-lock"
-  &::before {
+  &:before {
     font-size: 1.385rem;
   }
 }
@@ -12,11 +12,11 @@
 .file-status-icon--background .file-status-icon__icon {
   height: 26px;
   width: 26px;
-  background-color: white;
+  background-color: #fff;
   border-radius: 100%;
   text-align: center;
 
-  &::before {
+  &:before {
     line-height: 2rem;
   }
 }
diff --git a/client/src/components/Form/Form.scss b/client/src/components/Form/Form.scss
@@ -38,20 +38,20 @@
 
 
 // Form divider lines
-.form__divider::after,
-.form-group::after {
+.form__divider:after,
+.form-group:after {
   border-bottom: 1px solid $border-color-light;
   visibility: visible;
   width: 100%;
   content: "\0020";
   display: block;
 }
 
-.form__divider::after {
+.form__divider:after {
   margin: $spacer 0;
 }
 
-.form-group::after {
+.form-group:after {
   margin: $spacer 0 #{-$spacer};
 }
 
@@ -62,7 +62,7 @@
 .form-field--no-divider {
   padding-bottom: 0;
 
-  &::after {
+  &:after {
     visibility: hidden;
     content: "";
     display: none;
@@ -75,7 +75,7 @@
   .form-group {
     padding-bottom: 0;
 
-    &::after {
+    &:after {
       border-bottom: 0;
       margin: 0;
       visibility: hidden;
@@ -136,7 +136,7 @@
 }
 
 // Icons used in readonly fields (eg URL field in assetAdmin)
-.form-control-static__icon::before {
+.form-control-static__icon:before {
   color: lighten($text-muted, 20%);
   vertical-align: middle;
   margin-right: 6px;
@@ -148,13 +148,11 @@
 .form__field-holder input.readonly,
 .form__field-holder span.readonly,
 .readonly .form__field-holder > div:not(.form__field-description) {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
-  padding-left: $input-btn-padding-x;
-  padding-right: $input-btn-padding-x;
+  padding: $input-padding-y $input-btn-padding-x $input-padding-y $input-btn-padding-x;
   margin-bottom: 0;
   background-color: $input-disabled-bg;
   border: 1px solid darken($input-disabled-bg, 3%);
+
   @include border-radius($input-border-radius);
 
   &:focus {
@@ -230,11 +228,12 @@ input.radio {
 
         .form__field-extra-label {
           @include make-col(12);
+
           margin-left: 0;
         }
       }
 
-      &::after {
+      &:after {
         margin: $spacer $grid-gutter-width-half #{-$spacer};
         width: calc(100% - #{$grid-gutter-width}); // IE10 fix for avoiding horizontal scrollbars
       }
@@ -275,6 +274,7 @@ input.radio {
     .stacked .form__field-holder {
       @include make-col-ready();
       @include make-col(12);
+
       max-width: 100%;
     }
 
@@ -325,6 +325,7 @@ input.radio {
       // Based off of make-col-offset() mixin but adding the panel padding-x to offset
       // the checkbox width
       $_field-margin-left: percentage(calc(2 / $grid-columns));
+
       margin-left: calc(#{$_field-margin-left} + #{$panel-padding-x});
     }
 
@@ -341,6 +342,7 @@ input.radio {
 
     .form__field-extra-label {
       @include make-col(2);
+
       margin-left: 0;
     }
   }
@@ -355,6 +357,7 @@ input.radio {
     // Max-width to visually match other stacked fields + label
     .form-group.htmleditor.stacked .form__field-holder {
       @include make-col(12);
+
       max-width: calc(#{$input-max-width} + 16.66667%);
 
       // IE 11 renders the field wider than 100% with the above max-width
@@ -368,6 +371,7 @@ input.radio {
 
     .form__field-extra-label {
       @include make-col(3);
+
       margin-left: 0;
 
       // IE10 Possibly scrollbar effects the width to push columns
@@ -379,15 +383,16 @@ input.radio {
 }
 
 // Fix height of date-fields collapsing in IE
-input[type=date],
-input[type=time],
-input[type=datetime-local],
-input[type=month] {
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
   &.form-control {
     min-height: calc(#{$input-padding-y} * 2 + #{$line-height-base} + 2px);
 
     // Reduce huge line-height for BS date-fields
-    @media screen and (-webkit-min-device-pixel-ratio: 0) {
+    /* stylelint-disable-next-line media-feature-name-no-unknown */
+    @media screen and (min-device-pixel-ratio: 0) {
       line-height: $line-height-base;
     }
   }

diff --git a/client/src/components/FormAction/FormAction.scss b/client/src/components/FormAction/FormAction.scss
@@ -40,48 +40,48 @@
 }
 
 // Button icons
-.btn[class*="font-icon-"]::before,
-.dropdown-item[class*="font-icon-"]::before {
+.btn[class*="font-icon-"]:before,
+.dropdown-item[class*="font-icon-"]:before {
   position: relative;
   margin-right: $btn-icon-spacing;
   line-height: $line-height-base * $font-size-root;
   vertical-align: middle;
   font-size: $font-size-lg;
 }
 
-.btn--icon-danger:hover::before {
+.btn--icon-danger:hover:before {
   color: $brand-danger;
 }
 
 // Gives button a larger icon
-.btn--icon-sm[class*="font-icon-"]::before {
+.btn--icon-sm[class*="font-icon-"]:before {
   font-size: 14px;
 }
 
-.btn--icon-md[class*="font-icon-"]::before {
+.btn--icon-md[class*="font-icon-"]:before {
   font-size: 17px;
 }
 
 // Please use .btn--icon-lg
-.btn--icon-large[class*="font-icon-"]::before,
-.btn--icon-lg[class*="font-icon-"]::before {
+.btn--icon-large[class*="font-icon-"]:before,
+.btn--icon-lg[class*="font-icon-"]:before {
   font-size: 20px;
 }
 
-.btn--icon-xl[class*="font-icon-"]::before {
+.btn--icon-xl[class*="font-icon-"]:before {
   font-size: 22px;
 }
 
 // For buttons with icon and no text, removes space after icon
-.btn--no-text[class*="font-icon-"]::before,
-.no-text[class*="font-icon-"]::before {
+.btn--no-text[class*="font-icon-"]:before,
+.no-text[class*="font-icon-"]:before {
   margin-right: 0;
   text-indent: 0;
 }
 
 // Used buttons with text and icons, but you wan to hide the text only. eg. gridfield pagination
 // Could change to BS .text-hide { @include text-hide(); }, although slightly different
-.btn--hide-text[class*=font-icon-] {
+.btn--hide-text[class*="font-icon-"] {
 
   &:before {
     margin-right: 0;
@@ -124,8 +124,8 @@
 .btn--loading {
   min-width: 70px;
 
-  & > .btn__title,
-  &::before {
+  > .btn__title,
+  &:before {
     visibility: hidden;
   }
 }
@@ -159,7 +159,7 @@
 .btn-outline-primary {
   border-color: lighten($btn-primary-border, 10%);
 
-  &:not(:disabled):not(.disabled) {
+  &:not(:disabled, .disabled) {
     &:hover,
     &:active,
     &:focus {
@@ -197,7 +197,7 @@
     }
   }
 
-  &:not(:disabled):not(.disabled) {
+  &:not(:disabled, .disabled) {
     &:hover,
     &:focus,
     &.focus,
@@ -214,7 +214,7 @@
   color: $btn-secondary-color;
   border-color: $border-color;
 
-  &:not(:disabled):not(.disabled) {
+  &:not(:disabled, .disabled) {
     &:hover,
     &:focus,
     &:active,
@@ -301,14 +301,14 @@ button.close {
   position: static;
 
   // Temp override JQueryUI color
-  &::before {
+  &:before {
     color: $text-muted;
   }
 }
 
 // Main Save & Publish actions for edit page
 .btn-outline-secondary.font-icon-check-mark {
-  color: green;
+  color: #0f0;
 }
 
 .actions-warning {