ca-components 1.3.37 → 1.3.39

package/assets/scss/mixins.scss

@@ -0,0 +1,18 @@
+@mixin text-selection($color, $opacity: 0.2) {
+    &::-moz-selection {
+        background-color: rgb($color, $opacity) !important;
+        color: $color !important;
+    }
+
+    &::selection {
+        background-color: rgb($color, $opacity) !important;
+        color: $color !important;
+    }
+}
+
+@mixin prevent-text-selection() {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -moz-user-select: none;
+}

package/assets/scss/text-selection.scss

@@ -1,295 +1,133 @@
 @import 'theme/variables.scss';
+@import './mixins.scss';
 
 .text {
     &-color {
         &-black {
             color: $ta-black !important;
-
-            &::-moz-selection {
-                background: rgb(66, 66, 66, 0.2) !important;
-                color: $ta-black !important;
-            }
-
-            &::selection {
-                background: rgb(66, 66, 66, 0.2) !important;
-                color: $ta-black !important;
-            }
+            @include text-selection($ta-black);
         }
 
         &-black-2 {
             color: $ta-black-2 !important;
-
-            &::-moz-selection {
-                background: rgb(47, 47, 47, 0.2) !important;
-                color: $ta-black-2 !important;
-            }
-
-            &::selection {
-                background: rgb(47, 47, 47, 0.2) !important;
-                color: $ta-black-2 !important;
-            }
+            @include text-selection($ta-black-2);
         }
 
         &-muted {
             color: $muted !important;
-
-            &::-moz-selection {
-                background: rgb(145, 145, 145, 0.2) !important;
-                color: $muted !important;
-            }
-
-            &::selection {
-                background: rgb(145, 145, 145, 0.2) !important;
-                color: $muted !important;
-            }
+            @include text-selection($muted);
         }
 
         &-green {
             color: $ta-green !important;
+            @include text-selection($ta-green);
+        }
 
-            &::-moz-selection {
-                background: rgb(86, 180, 172, 0.2) !important;
-                color: $ta-green !important;
-            }
-
-            &::selection {
-                background: rgb(86, 180, 172, 0.2) !important;
-                color: $ta-green !important;
-            }
+        &-green-2 {
+            color: $ta-green-2 !important;
+            @include text-selection($ta-green-2);
         }
 
         &-green-4 {
             color: $ta-green-4 !important;
-
-            &::-moz-selection {
-                background: rgb(134, 201, 195, 0.2) !important;
-                color: $ta-green-4 !important;
-            }
-
-            &::selection {
-                background: rgb(134, 201, 195, 0.2) !important;
-                color: $ta-green-4 !important;
-            }
+            @include text-selection($ta-green-4);
         }
 
         &-blue-13 {
             color: $ta-blue-13 !important;
-
-            &::-moz-selection {
-                background: rgb(102, 146, 24, 0.2) !important;
-                color: $ta-blue-13 !important;
-            }
-
-            &::selection {
-                background: rgb(102, 146, 24, 0.2) !important;
-                color: $ta-blue-13 !important;
-            }
+            @include text-selection($ta-blue-13);
         }
 
         
         &-blue-16 {
             color: $ta-blue-16 !important;
-
-            &::-moz-selection {
-                background: rgb(102, 146, 24, 0.2) !important;
-                color: $ta-blue-16 !important;
-            }
-
-            &::selection {
-                background: rgb(102, 146, 24, 0.2) !important;
-                color: $ta-blue-16 !important;
-            }
+            @include text-selection($ta-blue-16);
         }
 
         &-blue-18 {
             color: $ta-blue-18 !important;
-
-            &::-moz-selection {
-                background: rgb(59, 115, 237, 0.2) !important;
-                color: $ta-blue-18 !important;
-            }
-
-            &::selection {
-                background: rgb(59, 115, 237, 0.2) !important;
-                color: $ta-blue-18 !important;
-            }
+            @include text-selection($ta-blue-18);
         }
 
         &-blue-19 {
             color: $ta-blue-19 !important;
-
-            &::-moz-selection {
-                background: rgb(146, 177, 245, 0.2) !important;
-                color: $ta-blue-19 !important;
-            }
-
-            &::selection {
-                background: rgb(146, 177, 245, 0.2) !important;
-                color: $ta-blue-19 !important;
-            }
+            @include text-selection($ta-blue-19);
         }
 
         &-red-10 {
             color: $ta-red-10 !important;
+            @include text-selection($ta-red-10);
+        }
 
-            &::-moz-selection {
-                background: rgb(230, 103, 103, 0.2) !important;
-                color: $ta-red-10 !important;
-            }
-
-            &::selection {
-                background: rgb(230, 103, 103, 0.2) !important;
-                color: $ta-red-10 !important;
-            }
+        &-red-11 {
+            color: $ta-red-11 !important;
+            @include text-selection($ta-red-11);
         }
 
         &-red-13 {
             color: $ta-red-13 !important;
+            @include text-selection($ta-red-13);
+        }
 
-            &::-moz-selection {
-                background: rgb(237, 146, 146, 0.2) !important;
-                color: $ta-red-13 !important;
-            }
+        &-yellow {
+            color: $ta-yellow-1 !important;
+            @include text-selection($ta-yellow-1);
+        }
 
-            &::selection {
-                background: rgb(237, 146, 146, 0.2) !important;
-                color: $ta-red-13 !important;
-            }
+        &-purple{
+            color: $ta-purple-1 !important;
+            @include text-selection($ta-purple-1);
         }
 
         &-light-grey {
             color: $ta-light-grey !important;
-
-            &::-moz-selection {
-                background: rgb(229, 229, 229, 0.2) !important;
-                color: $ta-light-grey !important;
-            }
-
-            &::selection {
-                background: rgb(229, 229, 229, 0.2) !important;
-                color: $ta-light-grey !important;
-            }
+            @include text-selection($ta-light-grey);
         }
 
         &-light-grey-2 {
             color: $ta-light-grey-2 !important;
-
-            &::-moz-selection {
-                background: rgb(170, 170, 170, 0.2) !important;
-                color: $ta-light-grey-2 !important;
-            }
-
-            &::selection {
-                background: rgb(170, 170, 170, 0.2) !important;
-                color: $ta-light-grey-2 !important;
-            }
+            @include text-selection($ta-light-grey-2);
         }
 
         &-light-grey-6 {
             color: $ta-light-grey-6 !important;
-
-            &::-moz-selection {
-                color: $ta-light-grey-6 !important;
-                background: rgb(170, 170, 170, 0.2) !important;
-            }
-
-            &::selection {
-                color: $ta-light-grey-6 !important;
-                background: rgb(170, 170, 170, 0.2) !important;
-            }
+            @include text-selection($ta-light-grey-6);
         }
 
         &-white {
             color: $white !important;
-
-            &::-moz-selection {
-                color: $white !important;
-                background: rgb(255, 255, 255, 0.2) !important;
-            }
-
-            &::selection {
-                color: $white !important;
-                background: rgb(255, 255, 255, 0.2) !important;
-            }
+            @include text-selection($white);
         }
 
         &-white-2 {
             color: $white-2 !important;
-
-            &::-moz-selection {
-                color: $white !important;
-                background: rgb(255, 255, 255, 0.2) !important;
-            }
-
-            &::selection {
-                color: $white !important;
-                background: rgb(255, 255, 255, 0.2) !important;
-            }
+            @include text-selection($white);
         }
 
         &-white-4 {
             color: $white-4 !important;
-
-            &::-moz-selection {
-                color: $white-4 !important;
-                background: rgb(255, 255, 255, 0.2) !important;
-            }
-
-            &::selection {
-                color: $white-4 !important;
-                background: rgb(255, 255, 255, 0.2) !important;
-            }
+            @include text-selection($white-4);
         }
 
         &-bw6-2 {
             color: $bw6-2 !important;
-
-            &::-moz-selection {
-                color: $bw6-2 !important;
-                background: rgba(108, 108, 108, 0.2) !important;
-            }
-            &::selection {
-                color: $bw6-2 !important;
-                background: rgba(108, 108, 108, 0.2) !important;
-            }
+            @include text-selection($bw6-2);
         }
 
         &-bw-9 {
             color: $bw-9 !important;
-
-            &::-moz-selection {
-                color: $bw6-2 !important;
-                background: rgba(108, 108, 108, 0.2) !important;
-            }
-            &::selection {
-                color: $bw6-2 !important;
-                background: rgba(108, 108, 108, 0.2) !important;
-            }
+            @include text-selection($bw-9);
         }
 
         &-grey {
             color: $bw5 !important;
-
-            &::-moz-selection {
-                color: $bw5 !important;
-                background: rgba(145, 145, 145, 0.2) !important;
-            }
-            &::selection {
-                color: $bw5 !important;
-                background: rgba(145, 145, 145, 0.2) !important;
-            }
+            @include text-selection($bw5);
 
             .address-text,
             .marker-bold-text {
-                &::-moz-selection {
-                    color: $bw5 !important;
-                    background: rgba(145, 145, 145, 0.2) !important;
-                }
-                &::selection {
-                    color: $bw5 !important;
-                    background: rgba(145, 145, 145, 0.2) !important;
-                }
+                @include text-selection($bw5);
             }
         }
+
     }
 }