diff --git a/client/src/components/AssetDropzone/AssetDropzone.scss b/client/src/components/AssetDropzone/AssetDropzone.scss
index 59def84f5..6ae0a3422 100644
--- 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
index cbce13dd2..4890a8835 100644
--- 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
index a2435651d..729868fb1 100644
--- 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/spinner@2x.gif") 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
index 3c4ad02c5..d8296a567 100644
--- 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
index dd0f83347..1e40e5e9d 100644
--- 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
index 8e430edc9..5c870b508 100644
--- 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
index b9e364bf8..dc5e94492 100644
--- 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
index e0fc65610..4718033ae 100644
--- 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
index 4cd826557..e59a495ca 100644
--- 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
index 9477d0824..f4935f8ed 100644
--- 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 {
diff --git a/client/src/containers/Gallery/Gallery.scss b/client/src/containers/Gallery/Gallery.scss
index 925b86378..55c484196 100644
--- a/client/src/containers/Gallery/Gallery.scss
+++ b/client/src/containers/Gallery/Gallery.scss
@@ -9,7 +9,9 @@
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
       box-shadow: $input-box-shadow, $input-focus-box-shadow;
-    } @else {
+    }
+
+ @else {
       box-shadow: $input-focus-box-shadow;
     }
   }
@@ -44,7 +46,7 @@
 .gallery__back {
   position: relative;
 
-  &.ss-ui-button::before {
+  &.ss-ui-button:before {
     font-size: 23px;
   }
 
@@ -126,7 +128,6 @@
 
   .chosen-container-active {
     .chosen-single {
-      outline: 1px dotted $component-active-border-color;
       outline: 5px auto -webkit-focus-ring-color;
     }
   }
@@ -158,9 +159,9 @@
       }
     }
 
-    > span::before {
+    > span:before {
       content: "\e003";
-      font-family: silverstripe;
+      font-family: "silverstripe";
       color: $btn-secondary-color;
       margin-right: 5px;
       position: relative;
@@ -242,6 +243,7 @@
     background-image: none;
     text-align: center;
     display: inline;
+
     @include gridle-select-focus();
   }
 }
@@ -272,13 +274,13 @@ $griddle-button-height: 30px;
       background-color: $gray-200;
       border-color: transparent;
 
-      &::before {
+      &:before {
         background-color: $gray-200;
       }
     }
 
-    &::before {
-      font-family: silverstripe;
+    &:before {
+      font-family: "silverstripe";
       color: $text-muted;
       width: $griddle-button-width;
       height: $griddle-button-height;
@@ -295,11 +297,11 @@ $griddle-button-height: 30px;
   }
 }
 
-.griddle-previous button::before {
+.griddle-previous button:before {
   content: "'";
 }
 
-.griddle-next button::before {
+.griddle-next button:before {
   content: "&";
 }
 // Pagination end
diff --git a/client/src/containers/InsertMediaModal/InsertMediaModal.scss b/client/src/containers/InsertMediaModal/InsertMediaModal.scss
index 4ae2bfd41..a30110d39 100644
--- a/client/src/containers/InsertMediaModal/InsertMediaModal.scss
+++ b/client/src/containers/InsertMediaModal/InsertMediaModal.scss
@@ -77,7 +77,7 @@
   height: 32px;
   margin: 10px -10px 10px 0;
 
-  &::before {
+  &:before {
     top: 0;
   }
 }
diff --git a/client/src/containers/TableView/TableView.scss b/client/src/containers/TableView/TableView.scss
index 8884b5699..9aa20ea57 100644
--- a/client/src/containers/TableView/TableView.scss
+++ b/client/src/containers/TableView/TableView.scss
@@ -23,11 +23,11 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      &::after {
+      &:after {
         color: lighten($text-muted, 20%);
         content: ")";
         display: inline-block;
-        font-family: silverstripe;
+        font-family: "silverstripe";
         margin-left: 4px;
       }
     }
@@ -70,16 +70,16 @@
   .sort-ascending {
     border-bottom: 1px solid $component-active-border-color;
 
-    > span::after {
+    > span:after {
       color: $component-active-border-color;
     }
   }
 
-  .sort-descending > span::after {
+  .sort-descending > span:after {
     content: "*";
   }
 
-  .sort-ascending > span::after {
+  .sort-ascending > span:after {
     content: "(";
   }
 
@@ -114,7 +114,7 @@
   width: 1%;
 
   // Increase size of checkbox slightly
-  input[type=checkbox] {
+  input[type="checkbox"] {
     width: 14px;
     height: 14px;
   }
@@ -182,12 +182,12 @@ $gallery-list-thumb-height: 68px;
   height: $gallery-list-thumb-height;
   width: $gallery-list-thumb-width;
 
-  &::after {
+  &:after {
     content: "<";
     line-height: $gallery-list-thumb-height;
     font-size: 30px;
     display: inline;
-    font-family: silverstripe, sans-serif;
+    font-family: "silverstripe", sans-serif;
     color: $white;
     opacity: .8;
   }
@@ -209,11 +209,11 @@ $gallery-list-thumb-height: 68px;
   overflow: hidden;
 }
 
-.gallery__progress-bar--complete::after {
+.gallery__progress-bar--complete:after {
   color: $brand-success;
   font-size: 20px;
   display: inline;
-  font-family: silverstripe, sans-serif;
+  font-family: "silverstripe", sans-serif;
   content: "I";
 }