move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/controls/_scrollbar.scss

@@ -0,0 +1,283 @@
+////
+///
+/// Scrollbar Controls Mixin Module
+/// =========================================================================
+///
+/// Provides mixins for customizing scrollbar appearance across browsers.
+/// Includes support for WebKit scrollbars, Firefox scrollbar colors,
+/// and cross-browser scrollbar utilities.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:math";
+@use "sass:color";
+@use "../../variables" as *;
+@use "../../maps" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+
+/*
+::-webkit-scrollbar              {}
+::-webkit-scrollbar-button       {}
+::-webkit-scrollbar-track        {}
+::-webkit-scrollbar-track-piece  {}
+::-webkit-scrollbar-thumb        {}
+::-webkit-scrollbar-corner       {}
+::-webkit-resizer                {}
+https://gist.github.com/JuanMaRuiz/7927982
+
+
+::-webkit-scrollbar               — the entire scrollbar.
+::-webkit-scrollbar-button        — the buttons on the scrollbar (arrows pointing upwards and downwards).
+::-webkit-scrollbar-thumb         — the draggable scrolling handle.
+::-webkit-scrollbar-track         — the track (progress bar) of the scrollbar.
+::-webkit-scrollbar-track-piece   — the part of the track (progress bar) not covered by the handle.
+::-webkit-scrollbar-corner        — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
+::-webkit-resizer                 — the draggable resizing handle that appears at the bottom corner of some elements.
+*/
+
+
+// width
+*::-webkit-scrollbar {
+    // width: $q * 2;
+    // //width: 0px;
+    // background: transparent;
+    // overflow: visible;
+    // background-color: transparent;
+    // display: none;
+    width: 12px;
+
+    // width: 3px !important;
+    background-color: transparent;
+}
+
+// Track
+*::-webkit-scrollbar-track {
+    //background: $color_01;
+    // opacity: 0.0;
+    // // opacity: 1.0;
+    // background-color: transparent;
+    // //width: 0px;
+    // //background: rgba(0, 0, 0, 0.2);
+    // display: none;
+    // -webkit-box-shadow: none;
+
+    // display: none;
+    -webkit-box-shadow: none !important;
+    background-color: transparent;
+}
+
+// Track Piece
+*::-webkit-scrollbar-track-piece{
+    //display: none;
+    // width: 8px;
+    // display: none;
+
+    -webkit-border-radius: 6px;
+}
+
+// Handle
+*::-webkit-scrollbar-thumb {
+    //height:30px;
+    //background-color: rgba(0, 0, 0, 0.2);
+    //border: solid $color_02;
+    // border-radius: $q;
+    // opacity: 0.5;
+    //  display: block;
+    // background-color: transparent;
+
+    // background:$color_02;
+    // -webkit-box-shadow: none;
+}
+
+*::-webkit-scrollbar-thumb:window-inactive {
+    background: none;
+}
+
+// Handle on hover
+*::-webkit-scrollbar-thumb:hover {
+  //background:$color_02;
+  //opacity: 1;
+
+}
+
+
+::-webkit-scrollbar-thumb:vertical {
+    ///height: 50px;
+    //background-color: #333333;
+    //-webkit-border-radius: 8px;
+}
+
+
+
+
+::-webkit-scrollbar-button:start:decrement,
+body::-webkit-scrollbar-button:end:increment {
+    //display: block;
+    //height: 0;
+    //background-color: transparent;
+}
+
+
+
+
+// SCSS Mixin for Custom Scrollbars
+// This mixin allows for customization of the scrollbar's appearance. Note that scrollbar customization is primarily supported in WebKit-based browsers (like Chrome and Safari) and partially in Firefox.
+/// @name custom-scrollbar
+/// Customizes the appearance of scrollbars in WebKit browsers.
+/// @param {Color} $thumb-color - The color of the scrollbar thumb.
+/// @param {Color} $track-color - The color of the scrollbar track.
+/// @param {Number|Unit} $width - The width of the scrollbar (default: 8px).
+/// @example scss - Usage
+///   @include custom-scrollbar(#888, #ccc, 10px);
+@mixin custom-scrollbar($width: 12px, $track-color: #f1f1f1, $thumb-color: #888) {
+    // For WebKit-based browsers
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $width;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $track-color;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $thumb-color;
+        border-radius: math.div($width, 2);
+        border: 2px solid $track-color;
+        &:hover {
+        background: color.adjust($thumb-color, $lightness: -10%);
+        }
+    }
+
+    // For Firefox
+    scrollbar-width: thin;
+    scrollbar-color: $thumb-color $track-color;
+
+    // For other browsers, there's limited support for customization.
+}
+
+
+// Usage Example
+// You can apply this mixin to any element that has overflow content, such as a container with scrollable content.
+
+
+.scrollable-content {
+    @include custom-scrollbar(10px, #e0e0e0, #4A4A4A); // Customize the width, track color, and thumb color
+    max-height: 300px;
+    overflow-y: scroll;
+}
+
+
+
+
+
+// Extended Custom Scrollbar Mixin
+// This extended version includes additional styling options for the scrollbar thumb, including hover and active states, and introduces a more detailed approach to styling the scrollbar track and corner.
+
+
+@mixin extended-custom-scrollbar(
+    $width: 12px,
+    $track-color: #f1f1f1,
+    $thumb-color: #888,
+    $thumb-hover-color: null,
+    $thumb-active-color: null
+) {
+    // Set default values using color.adjust if not provided
+    @if $thumb-hover-color == null {
+        $thumb-hover-color: color.adjust($thumb-color, $lightness: -10%);
+    }
+    @if $thumb-active-color == null {
+        $thumb-active-color: color.adjust($thumb-color, $lightness: -20%);
+    }
+
+    // Scrollbar track
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $width; // For horizontal scrollbars
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $track-color;
+        border-radius: math.div($width, 2);
+        box-shadow: inset 0 0 5px grey;
+    }
+
+    // Scrollbar thumb
+    &::-webkit-scrollbar-thumb {
+        background: $thumb-color;
+        border-radius: math.div($width, 2);
+        border: 3px solid $track-color;
+
+        &:hover {
+        background: $thumb-hover-color;
+        }
+
+        &:active {
+        background: $thumb-active-color;
+        }
+    }
+
+    // Scrollbar corner (where horizontal and vertical scrollbars meet)
+    &::-webkit-scrollbar-corner {
+        background: $track-color;
+    }
+
+    // Firefox
+    scrollbar-width: auto;
+    scrollbar-color: $thumb-color $track-color;
+
+    // More detailed styling for Firefox can be achieved with properties like `scrollbar-width` and `scrollbar-color`
+}
+// Usage Example with Extended Options
+// Apply this mixin to any scrollable element to enhance its appearance with a custom scrollbar that includes interactive states for better user engagement.
+
+
+.detailed-scrollable-content {
+    @include extended-custom-scrollbar(8px, #eaeaea, #bcbcbc, #a8a8a8, #989898);
+    max-height: 400px;
+    overflow-y: auto;
+}
+// Advanced Customization for Specific Elements
+// You can also target specific parts of the scrollbar for even more detailed customization. For instance, you might want to style only the vertical or horizontal scrollbar, or apply unique styles to the scrollbar buttons (arrows), which some browsers display.
+
+
+.unique-vertical-scrollbar {
+    &::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: linear-gradient(180deg, #ff8a00, #e52e71);
+        border-radius: 5px;
+    }
+}
+
+.unique-horizontal-scrollbar {
+    &::-webkit-scrollbar {
+        height: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: linear-gradient(90deg, #ff8a00, #e52e71);
+        border-radius: 5px;
+    }
+}
+
+

package/src/scss/mixins/controls/_selection.scss

@@ -0,0 +1,208 @@
+////
+///
+/// Selection Controls Mixin Module
+/// =========================================================================
+///
+/// Provides mixins for customizing text selection styles including
+/// background colors, text colors, and themed selections. Supports
+/// cross-browser compatibility with vendor prefixes.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:color";
+@use "sass:map";
+@use "../../variables" as *;
+@use "../../maps" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+/// selection
+/// ---------------------------------------------------------------------------
+/// Base mixin for applying styles to text selection across browsers.
+/// Uses @content to allow custom styles to be passed in.
+///
+/// @name selection
+/// @group Controls
+/// @access public
+///
+/// @content Styles to apply to selected text.
+///
+/// @example scss
+///   @include selection {
+///       background-color: #007bff;
+///       color: #fff;
+///   }
+///
+@mixin selection {
+    ::selection { @content; }
+    ::-moz-selection { @content; }
+    ::-webkit-selection { @content; }
+    ::-ms-selection { @content; }
+}
+
+
+/// custom-selection
+/// ---------------------------------------------------------------------------
+/// Mixin for defining custom text selection colors.
+/// Applies background and text color to selected text.
+///
+/// @name custom-selection
+/// @group Controls
+/// @access public
+///
+/// @param {Color} $bg-color [#b3d4fc] - Selection background color.
+/// @param {Color} $text-color [#fff] - Selection text color.
+///
+/// @example scss
+///   .element {
+///       @include custom-selection(#009688, #ffffff);
+///   }
+///
+@mixin custom-selection($bg-color: #b3d4fc, $text-color: #fff) {
+    &::selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+    &::-moz-selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+}
+
+
+/// dynamic-selection
+/// ---------------------------------------------------------------------------
+/// Creates selection styles with dynamically adjusted colors based on a
+/// base color. Lightens background and darkens text for good contrast.
+///
+/// @name dynamic-selection
+/// @group Controls
+/// @access public
+///
+/// @param {Color} $base-color - Base color for dynamic adjustment.
+///
+/// @example scss
+///   .element {
+///       @include dynamic-selection(#007bff);
+///   }
+///
+@mixin dynamic-selection($base-color) {
+    $adjusted-bg-color: color.adjust($base-color, $lightness: 20%);
+    $adjusted-text-color: color.adjust($base-color, $lightness: -50%);
+
+    &::selection {
+        background-color: $adjusted-bg-color;
+        color: $adjusted-text-color;
+    }
+    &::-moz-selection {
+        background-color: $adjusted-bg-color;
+        color: $adjusted-text-color;
+    }
+}
+
+
+/// apply-selection-to-elements
+/// ---------------------------------------------------------------------------
+/// Applies selection styles to a list of elements. Useful for batch
+/// application of consistent selection styles.
+///
+/// @name apply-selection-to-elements
+/// @group Controls
+/// @access public
+///
+/// @param {List} $elements - List of selectors to apply styles to.
+/// @param {Color} $bg-color - Selection background color.
+/// @param {Color} $text-color - Selection text color.
+///
+/// @example scss
+///   @include apply-selection-to-elements(
+///       ('p', 'h1', '.custom'),
+///       #ffcc80,
+///       #333
+///   );
+///
+@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;
+        }
+    }
+}
+
+
+/// gradient-selection
+/// ---------------------------------------------------------------------------
+/// Applies a gradient background to text selection. Note that gradient
+/// support may vary across browsers.
+///
+/// @name gradient-selection
+/// @group Controls
+/// @access public
+///
+/// @param {Color} $color1 - First gradient color.
+/// @param {Color} $color2 - Second gradient color.
+///
+/// @example scss
+///   .element {
+///       @include gradient-selection(#FFD54F, #D500F9);
+///   }
+///
+@mixin gradient-selection($color1, $color2) {
+    &::selection {
+        background: linear-gradient(45deg, $color1, $color2);
+        color: color.mix($color1, $color2, 50%);
+    }
+    &::-moz-selection {
+        background: linear-gradient(45deg, $color1, $color2);
+        color: color.mix($color1, $color2, 50%);
+    }
+}
+
+
+/// scoped-selection
+/// ---------------------------------------------------------------------------
+/// Applies selection styles to a specific scope/selector. Useful for
+/// theming different sections of a page.
+///
+/// @name scoped-selection
+/// @group Controls
+/// @access public
+///
+/// @param {String} $scope - CSS selector for the scope.
+/// @param {Color} $bg-color - Selection background color.
+/// @param {Color} $text-color - Selection text color.
+///
+/// @example scss
+///   @include scoped-selection('.dark-theme', #333, #fff);
+///   @include scoped-selection('.light-theme', #e0e0e0, #000);
+///
+@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;
+    }
+}