MNT Automated scss lint fixes

creative-commoners · Jun 5, 2024 · 5b97f79 · 5b97f79
1 parent 97d2389
commit 5b97f79
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 90 deletions.
diff --git a/client/src/components/AssetDropzone/AssetDropzone.scss b/client/src/components/AssetDropzone/AssetDropzone.scss
@@ -1,17 +1,14 @@
 .asset-dropzone {
-  &::after {
+  &:after {
     position: absolute;
-    top: 0;
-    right: #{0 - calc($grid-gutter-width / 2)};
-    bottom: 0;
-    left: #{0 - calc($grid-gutter-width / 2)};
+    inset: 0 #{0 - calc($grid-gutter-width / 2)} 0 #{0 - calc($grid-gutter-width / 2)};
     background: rgba($body-bg, .9) url("../../images/drag_drop_opt.svg") center center no-repeat;
     background-size: 312px 325px;
     z-index: 100;
   }
 
   &.dragging {
-    &::after {
+    &:after {
       content: "";
     }
   }

diff --git a/client/src/components/BulkActions/BulkActions.scss b/client/src/components/BulkActions/BulkActions.scss
@@ -67,7 +67,7 @@ $bulk-actions-width: 300px;
     margin-bottom: 0;
     height: 32px;
 
-    &[class*="font-icon-"]::before {
+    &[class*="font-icon-"]:before {
       font-size: 20px;
       line-height: 18px;
       position: relative;
@@ -114,16 +114,16 @@ $bulk-actions-width: 300px;
     padding-left: 22px;
     position: relative;
 
-    &::before {
+    &:before {
       position: absolute;
-      font-family: silverstripe;
+      font-family: "silverstripe";
       left: 4px;
       font-size: 14px;
       vertical-align: middle;
       margin-right: 4px;
     }
 
-    &:nth-child(1)::before {
+    &:nth-child(1):before {
       content: "g";
     }
   }

diff --git a/client/src/components/GalleryItem/GalleryItem.scss b/client/src/components/GalleryItem/GalleryItem.scss
@@ -8,7 +8,6 @@ $gallery-item-label-height: 40px;
   border-color: $border-color-light $border-color $border-color-dark;
   width: $gallery-item-width;
   border-radius: $border-radius-sm;
-  transition: box-shadow $transition-speed-fast;
   height: $gallery-item-height;
   transition: opacity 250ms linear;
 
@@ -17,7 +16,7 @@ $gallery-item-label-height: 40px;
     cursor: pointer;
   }
 
-  &:not(.gallery-item--error):not(.gallery-item--folder):hover .gallery-item--overlay {
+  &:not(.gallery-item--error, .gallery-item--folder):hover .gallery-item--overlay {
     opacity: 1;
     display: block;
   }
@@ -72,7 +71,7 @@ $gallery-item-label-height: 40px;
     margin: 20px 0 0 17px;
   }
 
-  .file-status-icon__icon::before {
+  .file-status-icon__icon:before {
     color: $blue;
     font-size: 16px;
   }
@@ -105,8 +104,8 @@ $gallery-item-label-height: 40px;
 
 @media
   only screen and (min-device-pixel-ratio: 2),
-  only screen and (min-resolution: 192dpi),
-  only screen and (min-resolution: 2dppx) {
+  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-size: 43px 43px;
@@ -159,7 +158,7 @@ $gallery-item-label-height: 40px;
       display: none;
     }
 
-    &::before {
+    &:before {
       cursor: pointer;
       top: 0;
       bottom: 0;
@@ -179,7 +178,7 @@ $gallery-item-label-height: 40px;
 }
 
 .gallery-item__checkbox-label:not(.gallery-item__checkbox-label--disabled) {
-  .gallery-item--selectable &:hover::before {
+  .gallery-item--selectable &:hover:before {
     border: 1px solid $component-active-border-color;
   }
 }
@@ -188,14 +187,14 @@ $gallery-item-label-height: 40px;
 .gallery-item--error .gallery-item__checkbox-label,
 .gallery-item__upload-progress + .gallery-item__title .gallery-item__checkbox-label {
 
-  &::before {
+  &:before {
     font-size: 19px;
     border: 0;
     border-radius: 0;
     padding: 0;
   }
 
-  &:hover::before {
+  &:hover:before {
     border: 0;
   }
 }
@@ -209,7 +208,7 @@ $gallery-item-label-height: 40px;
     cursor: not-allowed;
   }
 
-  .gallery-item__checkbox-label::before {
+  .gallery-item__checkbox-label:before {
     color: $brand-danger;
   }
 }
@@ -232,19 +231,16 @@ $gallery-item-label-height: 40px;
   .gallery-item__thumbnail {
     position: relative;
 
-    &::after {
+    &:after {
       content: "";
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       background: mix($white, $brand-danger, 20%);
       border-radius: 2px 2px 0 0;
     }
   }
 
-  &:hover .gallery-item__thumbnail::after,
+  &:hover .gallery-item__thumbnail:after,
   &:hover .gallery-item__error-message {
     background: mix($white, $brand-danger, 10%);
   }
@@ -267,7 +263,7 @@ $gallery-item-label-height: 40px;
   padding-top: 56px;
   text-align: center;
 
-  &::before {
+  &:before {
     margin-right: .385rem;
     position: relative;
     top: .2rem;
@@ -277,7 +273,7 @@ $gallery-item-label-height: 40px;
 .gallery-item--selected {
   border-color: $component-active-border-color;
 
-  .gallery-item__checkbox-label::before {
+  .gallery-item__checkbox-label:before {
     border-color: $component-active-border-color;
     background-color: $component-active-border-color;
     color: $white;
@@ -331,7 +327,7 @@ $gallery-item-label-height: 40px;
   overflow: hidden;
   background-color: $gray-300;
 
-  + .gallery-item__title .gallery-item__checkbox-label::before {
+  + .gallery-item__title .gallery-item__checkbox-label:before {
     color: $body-color;
   }
 }
@@ -376,7 +372,7 @@ $gallery-item-label-height: 40px;
   z-index: 1;
   margin: 5px 0 0 5px;
 
-  &:hover::after {
+  &:hover:after {
     font-size: $font-size-xxs;
     font-weight: 200;
     position: absolute;
@@ -391,7 +387,7 @@ $gallery-item-label-height: 40px;
   background-color: $state-draft-bg;
   border: 1px solid $state-draft;
 
-  &:hover::after {
+  &:hover:after {
     content: "DRAFT";
   }
 }
@@ -400,7 +396,7 @@ $gallery-item-label-height: 40px;
   background-color: $state-modified-bg;
   border: 1px solid $state-modified;
 
-  &:hover::after {
+  &:hover:after {
     content: "MODIFIED";
   }
 }
@@ -427,12 +423,10 @@ $gallery-item-label-height: 40px;
     opacity: 1;
   }
 }
+
 .gallery-item__drag-layer {
   position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   pointer-events: none;
   z-index: 100;
 }
@@ -483,10 +477,7 @@ $gallery-item-label-height: 40px;
 .gallery-item__drag-shadow {
   display: inline-block;
   position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   transform: translate(0.75rem, -0.75rem);
   z-index: 103;
   border: 2px solid $component-active-border-color;

diff --git a/client/src/components/InsertEmbedModal/InsertEmbedModal.scss b/client/src/components/InsertEmbedModal/InsertEmbedModal.scss
@@ -96,13 +96,11 @@
 
       span {
         display: block;
-
         color: rgba($body-color, 0);
         font-size: 0.9rem;
         letter-spacing: 1px;
         text-align: center;
         text-transform: uppercase;
-
         transition: color .1s ease-out;
 
         &:before {

diff --git a/client/src/components/PreviewImageField/PreviewImageField.scss b/client/src/components/PreviewImageField/PreviewImageField.scss
@@ -27,7 +27,6 @@
   height: $toolbar-button-height + (2 * $toolbar-button-padding);
   width: $toolbar-button-width + (2 * $toolbar-button-padding);
   overflow: hidden;
-  color: $white;
   background: $black;
   opacity: 0.55;
   color: $white;

diff --git a/client/src/components/UploadField/UploadField.scss b/client/src/components/UploadField/UploadField.scss
@@ -1,11 +1,8 @@
 // Override asset-dropzone styles
 .uploadfield__dropzone {
   position: relative;
-  left: 0;
-  top: 0;
-  right: auto;
-  bottom: auto;
-  margin: 0 0 10px 0;
+  inset: 0 auto auto 0;
+  margin: 0 0 10px;
   border-width: 2px;
   border-style: dashed;
   border-color: $border-color-dark;
@@ -14,11 +11,8 @@
   background: lighten($body-bg, 2%);
   height: 78px;
 
-  &::after {
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
+  &:after {
+    inset: 0;
     box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .2);
     background-image: none;
     background: rgba(0, 0, 0, .03);
@@ -33,10 +27,7 @@
 // Extra clickable area
 .uploadfield__backdrop {
   position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   cursor: pointer;
 }
 
@@ -75,8 +66,8 @@
     cursor: pointer;
   }
 
-  &::before {
-    font-family: silverstripe, sans-serif;
+  &:before {
+    font-family: "silverstripe", sans-serif;
     content: "v";
     font-size: 1.7em;
     padding-right: 20px;

diff --git a/client/src/components/UploadField/UploadFieldItem.scss b/client/src/components/UploadField/UploadFieldItem.scss
@@ -32,7 +32,7 @@ $uploadfield-item-label-height: 40px;
     border-bottom-right-radius: $border-radius-sm;
   }
 
-  &:not(.uploadfield-item--error):not(.uploadfield-item--folder):hover .uploadfield-item--overlay {
+  &:not(.uploadfield-item--error, .uploadfield-item--folder):hover .uploadfield-item--overlay {
     opacity: 1;
     display: block;
   }
@@ -130,7 +130,7 @@ $uploadfield-item-label-height: 40px;
   border-radius: 10px;
   overflow: hidden;
 
-  + .uploadfield-item__title .uploadfield-item__checkbox-label::before {
+  + .uploadfield-item__title .uploadfield-item__checkbox-label:before {
     color: $body-color;
   }
 }
@@ -160,11 +160,11 @@ $uploadfield-item-label-height: 40px;
   line-height: 38px;
   padding: 11px 5px;
 
-  &::after {
+  &:after {
     color: $brand-success;
     font-size: 30px;
     display: inline;
-    font-family: silverstripe, sans-serif;
+    font-family: "silverstripe", sans-serif;
     content: "I";
   }
 }

diff --git a/client/src/containers/Editor/Editor.scss b/client/src/containers/Editor/Editor.scss
@@ -130,7 +130,7 @@
 
 .editor__file-preview-link {
 
-  &::before {
+  &:before {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -145,15 +145,15 @@
     font-size: 22px;
     opacity: 0;
     content: "=";
-    font-family: silverstripe;
+    font-family: "silverstripe";
     line-height: 27px;
     z-index: 1;
     transition: all .5s;
   }
 
   &:hover,
-  &:hover::before,
-  &:active::before {
+  &:hover:before,
+  &:active:before {
     text-decoration: none;
     opacity: 1;
   }

diff --git a/client/src/containers/Editor/EditorHeader.scss b/client/src/containers/Editor/EditorHeader.scss
@@ -1,5 +1,4 @@
 .editor-header {
-
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -13,6 +12,7 @@
 
     &--md-below {
       display: none;
+
       @include media-breakpoint-down(md) {
         display: block;
         margin-left: 0;
@@ -42,6 +42,7 @@
 
     &--lg-above {
       display: none;
+
       @include media-breakpoint-up(lg) {
         display: block;
       }

diff --git a/client/src/containers/Editor/LegacyPopoverField.scss b/client/src/containers/Editor/LegacyPopoverField.scss
@@ -1,5 +1,4 @@
 // Popover: Custom styles built on top of the Bootstrap popover component
-//
 // NOTE: Marked as legacy, this component will be replaced with a dropdown menu
 // in the future
 .asset-admin .popover-field {