MNT Fix lint warnings

silverstripe · Jun 5, 2024 · 495002c · 495002c
1 parent 5b97f79
commit 495002c
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 111 deletions.
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/GalleryItem/GalleryItem.scss b/client/src/components/GalleryItem/GalleryItem.scss
@@ -1,5 +1,8 @@
 $gallery-item-label-height: 40px;
 
+/* stylelint-disable no-descending-specificity */
+// The linting rule for no-descending-specificity cannot easily be accomodated here
+
 .gallery-item {
   opacity: 1;
   position: relative;
@@ -99,18 +102,20 @@ $gallery-item-label-height: 40px;
 }
 
 .gallery-item__thumbnail--loading {
-  background: white url("../../images/spinner.gif") center center no-repeat;
+  background: #fff url("../../images/spinner.gif") center center no-repeat;
 }
 
+/* stylelint-disable media-feature-name-no-unknown */
 @media
   only screen and (min-device-pixel-ratio: 2),
   only screen and (resolution >= 192dpi),
   only screen and (resolution >= 2dppx) {
     .gallery-item__thumbnail--loading {
-      background: white url("../../images/[email protected]") center center no-repeat;
+      background: #fff url("../../images/[email protected]") center center no-repeat;
       background-size: 43px 43px;
     }
   }
+  /* stylelint-enable media-feature-name-no-unknown */
 
 .gallery-item__thumbnail--small {
   background-size: auto;
@@ -488,3 +493,5 @@ $gallery-item-label-height: 40px;
     z-index: 102;
   }
 }
+
+/* stylelint-enable no-descending-specificity */
diff --git a/client/src/components/InsertEmbedModal/InsertEmbedModal.scss b/client/src/components/InsertEmbedModal/InsertEmbedModal.scss
@@ -77,6 +77,8 @@
     margin-bottom: 0;
     padding-left: 0;
 
+    /* stylelint-disable no-descending-specificity */
+    // The linting rule for no-descending-specificity cannot easily be accomodated here
     &:first-of-type .form-check-label span:before {
       border-top-left-radius: $border-radius;
       border-bottom-left-radius: $border-radius;
@@ -90,7 +92,7 @@
     $placement-image-width: 40px;
     $placement-image-height: 36px;
 
-    &-label {
+    .form-check-label {
       display: block;
       cursor: pointer;
 
@@ -122,7 +124,7 @@
       }
     }
 
-    &-input {
+    .form-check-input {
       position: absolute;
       left: -9999px;
 
@@ -137,56 +139,55 @@
       }
     }
 
-    .option-val {
-      &--leftAlone { // sass-lint:disable-line class-name-format
-        + span:before {
-          background-position-y: -$placement-image-height;
-        }
+    .option-val--leftAlone {
+      + span:before {
+        background-position-y: -$placement-image-height;
+      }
 
-        &.checked + span:before {
-          background-position-y: 0;
-        }
+      &.checked + span:before {
+        background-position-y: 0;
       }
+    }
 
-      &--center {
-        + span:before {
-          background-position-y: 3 * -$placement-image-height;
-        }
+    .option-val--center {
+      + span:before {
+        background-position-y: 3 * -$placement-image-height;
+      }
 
-        &.checked + span:before {
-          background-position-y: 2 * -$placement-image-height;
-        }
+      &.checked + span:before {
+        background-position-y: 2 * -$placement-image-height;
       }
+    }
 
-      &--rightAlone { // sass-lint:disable-line class-name-format
-        + span:before {
-          background-position-y: 5 * -$placement-image-height;
-        }
+    .option-val--rightAlone {
+      + span:before {
+        background-position-y: 5 * -$placement-image-height;
+      }
 
-        &.checked + span:before {
-          background-position-y: 4 * -$placement-image-height;
-        }
+      &.checked + span:before {
+        background-position-y: 4 * -$placement-image-height;
       }
+    }
 
-      &--left {
-        + span:before {
-          background-position-y: 7 * -$placement-image-height;
-        }
+    .option-val--left {
+      + span:before {
+        background-position-y: 7 * -$placement-image-height;
+      }
 
-        &.checked + span:before {
-          background-position-y: 6 * -$placement-image-height;
-        }
+      &.checked + span:before {
+        background-position-y: 6 * -$placement-image-height;
       }
+    }
 
-      &--right {
-        + span:before {
-          background-position-y: 9 * -$placement-image-height;
-        }
+    .option-val--right {
+      + span:before {
+        background-position-y: 9 * -$placement-image-height;
+      }
 
-        &.checked + span:before {
-          background-position-y: 8 * -$placement-image-height;
-        }
+      &.checked + span:before {
+        background-position-y: 8 * -$placement-image-height;
       }
     }
   }
+  /* stylelint-enable no-descending-specificity */
 }
diff --git a/client/src/components/UploadField/UploadField.scss b/client/src/components/UploadField/UploadField.scss
@@ -14,7 +14,6 @@
   &:after {
     inset: 0;
     box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .2);
-    background-image: none;
     background: rgba(0, 0, 0, .03);
   }
 }

diff --git a/client/src/components/UploadField/UploadFieldItem.scss b/client/src/components/UploadField/UploadFieldItem.scss
@@ -43,13 +43,6 @@ $uploadfield-item-label-height: 40px;
   border-top-right-radius: $border-radius-sm;
 }
 
-.uploadfield-item--folder {
-  .uploadfield-item__thumbnail {
-    background: url("../../images/folder.png") 12px 14px no-repeat;
-    background-size: 27px 24px;
-  }
-}
-
 .uploadfield-item__thumbnail {
   height: $file-item-thumb-height;
   width: $file-item-thumb-width;
@@ -60,6 +53,13 @@ $uploadfield-item-label-height: 40px;
   border-radius: $border-radius-sm $border-radius-sm 0 0;
 }
 
+.uploadfield-item--folder {
+  .uploadfield-item__thumbnail {
+    background: url("../../images/folder.png") 12px 14px no-repeat;
+    background-size: 27px 24px;
+  }
+}
+
 .uploadfield-item__thumbnail--small {
   background-size: auto;
   background-color: #fff;
@@ -147,7 +147,7 @@ $uploadfield-item-label-height: 40px;
   height: 28px;
   margin: 16px 5px;
   padding: 0 10px;
-  color: white;
+  color: #fff;
   background: $brand-danger;
   border-radius: 14px;
   max-width: 50%;

diff --git a/client/src/containers/Editor/Editor.scss b/client/src/containers/Editor/Editor.scss
@@ -54,8 +54,19 @@
   margin-bottom: 2px;
 }
 
-.editor-header__field {
+.editor__status-flag {
+  color: #f46b00;
+  background-color: #fff7f2;
+  border-color: #f46b00;
+  clear: both;
+  text-transform: uppercase;
+  display: inline-block;
+  position: relative;
+  line-height: 1rem;
+  margin-left: 3px;
+}
 
+.editor-header__field {
   .file-status-icon {
     margin-left: 6px;
 
@@ -83,18 +94,6 @@
   }
 }
 
-.editor__status-flag {
-  color: #f46b00;
-  background-color: #fff7f2;
-  border-color: #f46b00;
-  clear: both;
-  text-transform: uppercase;
-  display: inline-block;
-  position: relative;
-  line-height: 1rem;
-  margin-left: 3px;
-}
-
 .editor__specs {
   color: $text-muted;
   font-size: $font-size-xxs;
@@ -106,6 +105,16 @@
     margin: #{-(calc($panel-padding-x / 2))} #{-$panel-padding-x} $spacer;
 }
 
+.editor__thumbnail {
+  display: block;
+  max-width: 100%;
+  max-height: $cms-panel-md * .75;
+  min-height: 80px;
+  margin: auto;
+  transform: scale(1);
+  transition: all .5s;
+}
+
 .editor__file-preview {
   text-align: center;
   margin: 0 #{-$panel-padding-x} $spacer-xs;
@@ -159,16 +168,6 @@
   }
 }
 
-.editor__thumbnail {
-  display: block;
-  max-width: 100%;
-  max-height: $cms-panel-md * .75;
-  min-height: 80px;
-  margin: auto;
-  transform: scale(1);
-  transition: all .5s;
-}
-
 .editor__file-preview-message--file-missing {
   margin: #{$spacer * 2} 0 $spacer ;
   font-size: $font-size-lg;
@@ -191,7 +190,7 @@
   flex-wrap: wrap;
   margin-top: -10px;
 
-  & > div {
+  > div {
     width: 100%;
   }
 

diff --git a/client/src/containers/Gallery/Gallery.scss b/client/src/containers/Gallery/Gallery.scss
@@ -61,7 +61,6 @@
 
 .gallery__back--droppable-hover {
   background-color: $btn-secondary-bg;
-  border-color: transparent;
   transform: scale(1.3);
   border: 1px solid $brand-primary;
 }
@@ -122,25 +121,10 @@
   // Override chosen inline width to fit to icon
   .chosen-container {
     @include media-breakpoint-down(sm) {
-      width: auto !important; // sass-lint:disable-line no-important
+      width: auto !important;
     }
   }
 
-  .chosen-container-active {
-    .chosen-single {
-      outline: 5px auto -webkit-focus-ring-color;
-    }
-  }
-
-  .gallery & .chosen-single {
-    border: 0;
-    filter: none; //IE9
-    background: none;
-    box-shadow: none;
-    color: inherit;
-    margin-top: -1px;
-  }
-
   .chosen-single {
     display: flex;
     align-items: center;
@@ -174,6 +158,21 @@
     }
   }
 
+  .chosen-container-active {
+    .chosen-single {
+      outline: 5px auto -webkit-focus-ring-color;
+    }
+  }
+
+  .gallery & .chosen-single {
+    border: 0;
+    filter: none; //IE9
+    background: none;
+    box-shadow: none;
+    color: inherit;
+    margin-top: -1px;
+  }
+
   .chosen-drop {
     min-width: 160px;
     right: 0;
@@ -256,6 +255,14 @@
 $griddle-button-width: 36px;
 $griddle-button-height: 30px;
 
+.griddle-previous button:before {
+  content: "'";
+}
+
+.griddle-next button:before {
+  content: "&";
+}
+
 .griddle-previous,
 .griddle-next {
   width: $griddle-button-width; // hold space so pagination doesn't move around
@@ -270,15 +277,6 @@ $griddle-button-height: 30px;
     border-radius: $btn-border-radius;
     overflow: hidden;
 
-    &:hover {
-      background-color: $gray-200;
-      border-color: transparent;
-
-      &:before {
-        background-color: $gray-200;
-      }
-    }
-
     &:before {
       font-family: "silverstripe";
       color: $text-muted;
@@ -294,15 +292,16 @@ $griddle-button-height: 30px;
       -webkit-font-smoothing: antialiased;
       line-height: $line-height-base;
     }
-  }
-}
 
-.griddle-previous button:before {
-  content: "'";
-}
+    &:hover {
+      background-color: $gray-200;
+      border-color: transparent;
 
-.griddle-next button:before {
-  content: "&";
+      &:before {
+        background-color: $gray-200;
+      }
+    }
+  }
 }
 // Pagination end