DEV: Apply `unselectable` style consistently

DEV: Apply unselectable style consistently

diff --git a/app/assets/stylesheets/common/admin/settings.scss b/app/assets/stylesheets/common/admin/settings.scss
index 87dffbe..92c1b2e 100644
--- a/app/assets/stylesheets/common/admin/settings.scss
+++ b/app/assets/stylesheets/common/admin/settings.scss
@@ -69,6 +69,7 @@
       border-radius: 3px;
       transition: border linear 0.2s, box-shadow linear 0.2s;
       li.sortable-placeholder {
+        @include unselectable;
         padding: 3px 5px 3px 18px;
         margin: 3px 0 3px 5px;
         position: relative;
@@ -77,7 +78,6 @@
         border: 1px dashed var(--primary-low-mid);
         border-radius: 3px;
         background-clip: padding-box;
-        -moz-user-select: none;
         background-color: transparent;
         width: 3em;
         height: 1em;
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index 1200c09..0c2a9d5 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -170,9 +170,7 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it 
 .mfp-arrow,
 .mfp-preloader,
 .mfp-counter {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
+  @include unselectable;
 }
 
 // Hide the image during the loading
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 9785f74..173f307 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -669,6 +669,7 @@ pre {
   overflow: visible;
 
   .copy-cmd {
+    @include unselectable;
     position: absolute;
     top: 0;
     right: 0;
@@ -676,7 +677,6 @@ pre {
     font-size: $font-down-2;
     min-height: 0;
     font-size: $font-down-2;
-    user-select: none;
 
     &.copied {
       .d-icon {
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index d5ff60a..6de8e91 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -81,6 +81,7 @@ $breakpoints: (
   -webkit-user-select: $mode;
   -moz-user-select: $mode;
   -ms-user-select: $mode;
+  user-select: $mode;
 }
 
 @mixin unselectable {
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 4132072..a4ffccf 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -1,11 +1,11 @@
 .select-kit {
+  @include unselectable;
   border: none;
   box-sizing: border-box;
   display: inline-block;
   flex-direction: column;
   position: relative;
   vertical-align: middle;
-  user-select: none;
 
   &.is-disabled {
     pointer-events: none;
diff --git a/app/assets/stylesheets/common/select-kit/topic-notifications-button.scss b/app/assets/stylesheets/common/select-kit/topic-notifications-button.scss
index 7563c8b..8a0710f 100644
--- a/app/assets/stylesheets/common/select-kit/topic-notifications-button.scss
+++ b/app/assets/stylesheets/common/select-kit/topic-notifications-button.scss
@@ -1,7 +1,7 @@
 .topic-notifications-button {
   &.is-loading {
+    @include unselectable;
     pointer-events: none;
-    user-select: none;
 
     .d-icon-spinner {
       margin: 0;

GitHub sha: b2adbead

1 Like