From b2adbead59fc1cde6dffdf0896538cc5842815e6 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 21 Sep 2020 13:32:46 +0200
Subject: [PATCH] DEV: Apply `unselectable` style consistently

---
 app/assets/stylesheets/common/admin/settings.scss             | 2 +-
 app/assets/stylesheets/common/base/magnific-popup.scss        | 4 +---
 app/assets/stylesheets/common/base/topic-post.scss            | 2 +-
 app/assets/stylesheets/common/foundation/mixins.scss          | 1 +
 app/assets/stylesheets/common/select-kit/select-kit.scss      | 2 +-
 .../common/select-kit/topic-notifications-button.scss         | 2 +-
 6 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/settings.scss b/app/assets/stylesheets/common/admin/settings.scss
index 87dffbe0726..92c1b2eda5d 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 1200c09b7cc..0c2a9d5036e 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 9785f741fa0..173f307dc32 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 d5ff60a178b..6de8e91060d 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 4132072d2f5..a4ffccfc3a7 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 7563c8bb977..8a0710f901d 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;