Create _selection.scss

src/scss/mixins/mouse/_selection.scss

@@ -0,0 +1,345 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Mouse Selection Mixin Module
+/// ===========================================================================
+///
+/// ...
+/// 
+/// 
+/// @group Mouse
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../variables" as *;
+@use "../../maps" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+
+@mixin selection {
+    ::selection { @content; }    /*** Works on common browsers ***/
+    ::-moz-selection { @content; }   /*** Works on common browsers ***/
+    ::-o-selection { @content; }   /***For Other Browsers ***/
+    ::-webkit-selection { @content; }   /*** For Webkit ***/
+    ::-ms-selection { @content; }
+}
+
+@include selection {
+    background-color: $color_04;
+    color: $color_02;
+}
+
+
+::-moz-selection
+{
+    color: var(--ptf-color-white);
+    background-color: var(--ptf-accent-1);
+}
+
+::selection
+{
+    color: var(--ptf-color-white);
+    background-color: var(--ptf-accent-1);
+}
+
+::-moz-selection { background: #272727; color: #fff; }
+	 ::selection { background: #272727; color: #fff; }
+
+
+
+
+
+
+
+// SCSS Mixin for Custom Text Selection
+// ----------------------------------------------------------------------------
+// conditionalThis mixin allows you to define custom colors for text selection,
+// including the background color of the selection and the color of the text
+// within the selection.
+
+@mixin custom-selection($bg-color: #b3d4fc, $text-color: #fff) {
+    &::selection {
+        background-color: $bg-color; // Color of the background
+        color: $text-color; // Color of the text
+    }
+
+    // For compatibility with Mozilla Firefox
+    &::-moz-selection {
+        background-color: $bg-color; // Color of the background
+        color: $text-color; // Color of the text
+    }
+}
+
+// Usage Example
+// You can use this mixin to apply custom selection styles globally or to specific elements.
+
+// Global Custom Selection
+// ----------------------------------------------------------------------------
+// To apply a custom selection style globally, you can include the mixin
+// within the html or body selector.
+
+
+body {
+    @include custom-selection(#009688, #ffffff); // Teal background with white text
+}
+// Element-Specific Custom Selection
+// To apply custom selection styles to specific elements, include the mixin within the specific element's selector.
+
+
+p.custom-text-selection {
+    @include custom-selection(#ffeb3b, #000); // Yellow background with black text for paragraphs with the .custom-text-selection class
+}
+// Applying to Multiple Elements
+// You can also apply the mixin to multiple elements by grouping selectors.
+
+
+h1, h2, .highlight-text {
+  @include custom-selection(#673ab7, #fff); // Deep purple background with white text for all h1, h2, and .highlight-text class elements
+}
+
+
+// Conditional Text Selection Based on Parent or State
+// You can conditionally apply text selection styles based on a parent element or a specific state, such as a class being applied to a parent element. This is useful for applying different selection styles in different sections of a page or in different components.
+
+
+// Mixin for custom selection
+// ----------------------------------------------------------------------------
+@mixin custom-selection($bg-color, $text-color) {
+    &::selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+    &::-moz-selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+}
+
+// Applying conditional selection styles
+.dark-mode {
+    .text {
+        @include custom-selection(#666, #eee); // Dark mode selection
+
+        &:hover {
+            @include custom-selection(#555, #fff); // Darker selection on hover
+        }
+    }
+}
+
+.light-mode {
+    .text {
+            @include custom-selection(#ddd, #333); // Light mode selection
+
+        &:hover {
+            @include custom-selection(#ccc, #222); // Lighter selection on hover
+        }
+    }
+}
+
+
+// Theming Support with SCSS Maps
+// ----------------------------------------------------------------------------
+// Leverage SCSS maps and loops to apply selection styles based on a theme
+// system. This allows for easy theming and customization across your
+// application.
+
+$themes: (
+    "light": (
+        "selection-bg": #e0f7fa,
+        "selection-text": #00796b
+    ),
+    "dark": (
+        "selection-bg": #004d40,
+        "selection-text": #b2dfdb
+    )
+);
+
+@each $theme-name, $theme-properties in $themes {
+    .#{$theme-name}-theme {
+        @include custom-selection(map-get($theme-properties, "selection-bg"), map-get($theme-properties, "selection-text"));
+    }
+}
+
+
+// Dynamic Color Adjustments
+// ----------------------------------------------------------------------------
+// Utilize SCSS color functions to dynamically adjust selection colors based
+// on a base color. This can be useful for creating selection styles that
+// are always readable and maintain good contrast with the text.
+
+@mixin dynamic-selection($base-color) {
+    $adjusted-bg-color: lighten($base-color, 20%);
+    $adjusted-text-color: darken($base-color, 50%);
+
+    &::selection {
+        background-color: $adjusted-bg-color;
+        color: $adjusted-text-color;
+    }
+    &::-moz-selection {
+        background-color: $adjusted-bg-color;
+        color: $adjusted-text-color;
+    }
+}
+
+.element {
+    @include dynamic-selection(#007bff); // Adjusts selection colors based on the provided base color
+}
+
+
+// Applying to Specific Elements with a Mixin
+// ----------------------------------------------------------------------------
+// Create a mixin that accepts both colors and a list of elements to apply
+// the selection styles to. This approach reduces repetition and increases
+// maintainability.
+
+@mixin apply-selection-to-elements($elements, $bg-color, $text-color) {
+    @each $element in $elements {
+        #{$element}::selection {
+            background-color: $bg-color;
+            color: $text-color;
+        }
+        #{$element}::-moz-selection {
+            background-color: $bg-color;
+            color: $text-color;
+        }
+    }
+}
+
+@include apply-selection-to-elements(('p', 'h1', '.custom-class'), #ffcc80, #f44336);
+
+
+
+// Animated Text Selection Background
+// ----------------------------------------------------------------------------
+// You can create a subtle animation effect for the text selection background using keyframes. This can add a dynamic visual cue when text is selected.
+
+@mixin animated-selection($start-color, $end-color) {
+    @keyframes selectionBackground {
+        0% { background-color: $start-color; }
+        100% { background-color: $end-color; }
+    }
+
+    &::selection {
+        animation: selectionBackground 1s infinite alternate;
+        color: contrast($end-color);
+    }
+    &::-moz-selection {
+        animation: selectionBackground 1s infinite alternate;
+        color: contrast($end-color);
+    }
+}
+
+body {
+    @include animated-selection(lighten($primary-color, 40%), lighten($primary-color, 20%));
+}
+
+
+// Gradient Text Selection
+// ----------------------------------------------------------------------------
+// Applying a gradient to the text selection background can align with modern
+// design trends. Note that this effect might not be consistent across all
+// browsers due to rendering limitations.
+
+@mixin gradient-selection($color1, $color2) {
+    &::selection {
+        background: linear-gradient(45deg, $color1, $color2);
+        color: mix($color1, $color2, 50%);
+    }
+    &::-moz-selection {
+        background: linear-gradient(45deg, $color1, $color2);
+        color: mix($color1, $color2, 50%);
+    }
+}
+
+.element {
+  @include gradient-selection(#FFD54F, #D500F9);
+}
+
+
+// Using Global Variables for Theme Consistency
+// Defining global variables for your theme colors allows for consistent and maintainable style application across your project, including text selection.
+
+
+// Define global theme colors
+$theme-colors: (
+  primary: #6200ea,
+  secondary: #03dac6,
+  selection-bg: #B388FF,
+  selection-text: #6200ea,
+);
+
+@mixin theme-selection {
+    &::selection {
+        background-color: map-get($theme-colors, selection-bg);
+        color: map-get($theme-colors, selection-text);
+    }
+    &::-moz-selection {
+        background-color: map-get($theme-colors, selection-bg);
+        color: map-get($theme-colors, selection-text);
+    }
+}
+
+// Apply globally or to specific elements
+body, .custom-text {
+    @include theme-selection;
+}
+
+
+// Pseudo-Element Selection Styles
+// While the ::selection pseudo-element is primarily used for text, you
+// can get creative by applying similar styles to other pseudo-elements
+// for a cohesive look.
+.element {
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        background: $primary-color;
+        bottom: -5px;
+        left: 0;
+    }
+
+    &:hover::after {
+        @include gradient-selection(#FFD54F, #D500F9); // Apply gradient to the pseudo-element on hover
+    }
+}
+
+// Scoped Selection Styles with Mixins
+// Creating a mixin to apply scoped selection styles can help manage different
+// selection themes within various parts of your application.
+
+
+@mixin scoped-selection($scope, $bg-color, $text-color) {
+    #{$scope}::selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+    #{$scope}::-moz-selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+}
+
+@include scoped-selection('.light-theme-text', #e0e0e0, #000);
+@include scoped-selection('.dark-theme-text', #333, #fff);