From fb4a80cc5356875fa2799a1e01a21547114b07b0 Mon Sep 17 00:00:00 2001 From: Lars van Vianen Date: Sat, 14 Sep 2024 15:03:04 +0200 Subject: [PATCH] dist --- dist/LICENSE | 21 + dist/README.md | 38 ++ dist/css/move.gl.css | 2 + dist/css/move.gl.min.css | 2 + dist/package.json | 55 ++ dist/scss/classes/_animations.scss | 576 ++++++++++++++++++ dist/scss/classes/_index.scss | 0 dist/scss/classes/_transforms.scss | 124 ++++ dist/scss/classes/keyboard.scss | 18 + dist/scss/classes/screensaver.scss | 15 + dist/scss/dev/_banner.scss | 36 ++ dist/scss/dev/_debug.scss | 18 + dist/scss/dev/_deprecation.scss | 10 + dist/scss/dev/_index.scss | 8 + dist/scss/dev/_modules.scss | 24 + dist/scss/effects/_filter.scss | 176 ++++++ dist/scss/effects/_index.scss | 23 + dist/scss/effects/_opacity.scss | 62 ++ dist/scss/effects/_shadow.scss | 175 ++++++ dist/scss/functions/_index.scss | 0 dist/scss/functions/scenes/_bubble.scss | 19 + dist/scss/functions/scenes/_index.scss | 20 + dist/scss/index.scss | 0 dist/scss/keyframes/_beat.scss | 26 + dist/scss/keyframes/_index.scss | 0 dist/scss/maps/_index.scss | 0 dist/scss/maps/_mouse.scss | 96 +++ dist/scss/mixins/_accessibility.scss | 70 +++ dist/scss/mixins/_boot.scss | 51 ++ dist/scss/mixins/_hover.scss | 51 ++ dist/scss/mixins/_index.scss | 0 dist/scss/mixins/_selection.scss | 321 ++++++++++ dist/scss/mixins/_shape.scss | 44 ++ dist/scss/mixins/_touch.scss | 95 +++ dist/scss/mixins/animations/--hover.scss | 107 ++++ dist/scss/mixins/animations/_base.scss | 337 ++++++++++ dist/scss/mixins/animations/_beat.scss | 119 ++++ dist/scss/mixins/animations/_blink.scss | 151 +++++ dist/scss/mixins/animations/_bounce.scss | 192 ++++++ dist/scss/mixins/animations/_elastic.scss | 65 ++ dist/scss/mixins/animations/_fade.scss | 154 +++++ dist/scss/mixins/animations/_flash.scss | 177 ++++++ dist/scss/mixins/animations/_flip.scss | 72 +++ dist/scss/mixins/animations/_float.scss | 126 ++++ dist/scss/mixins/animations/_glow.scss | 179 ++++++ dist/scss/mixins/animations/_heartbeat.scss | 175 ++++++ dist/scss/mixins/animations/_hinge.scss | 119 ++++ dist/scss/mixins/animations/_index.scss | 37 ++ dist/scss/mixins/animations/_jello.scss | 129 ++++ dist/scss/mixins/animations/_jiggle.scss | 163 +++++ dist/scss/mixins/animations/_lightspeed.scss | 130 ++++ dist/scss/mixins/animations/_nod.scss | 161 +++++ dist/scss/mixins/animations/_pop.scss | 150 +++++ dist/scss/mixins/animations/_pulse.scss | 213 +++++++ dist/scss/mixins/animations/_ripple.scss | 169 +++++ dist/scss/mixins/animations/_roll.scss | 261 ++++++++ dist/scss/mixins/animations/_rotate.scss | 428 +++++++++++++ dist/scss/mixins/animations/_rubber.scss | 116 ++++ dist/scss/mixins/animations/_scale.scss | 113 ++++ dist/scss/mixins/animations/_shake.scss | 182 ++++++ dist/scss/mixins/animations/_slide.scss | 294 +++++++++ dist/scss/mixins/animations/_spin.scss | 219 +++++++ dist/scss/mixins/animations/_sway.scss | 167 +++++ dist/scss/mixins/animations/_swing.scss | 247 ++++++++ dist/scss/mixins/animations/_tada.scss | 233 +++++++ dist/scss/mixins/animations/_twist.scss | 177 ++++++ dist/scss/mixins/animations/_wave.scss | 166 +++++ dist/scss/mixins/animations/_wobble.scss | 254 ++++++++ dist/scss/mixins/animations/_zoom.scss | 166 +++++ dist/scss/mixins/effects/_filter.scss | 148 +++++ dist/scss/mixins/effects/_index.scss | 0 dist/scss/mixins/effects/_shadow.scss | 21 + dist/scss/mixins/loaders/_index.scss | 0 dist/scss/mixins/loaders/_progress.scss | 174 ++++++ dist/scss/mixins/loaders/_spinner.scss | 101 +++ dist/scss/mixins/loaders/circle_01.scss | 22 + dist/scss/mixins/loaders/circle_02.scss | 19 + dist/scss/mixins/loaders/circle_03.scss | 29 + dist/scss/mixins/loaders/circle_inner_01.scss | 33 + dist/scss/mixins/loaders/circle_inner_02.scss | 33 + dist/scss/mixins/loaders/circle_inner_03.scss | 34 ++ dist/scss/mixins/mouse/_cursor.scss | 182 ++++++ dist/scss/mixins/mouse/_index.scss | 0 dist/scss/mixins/mouse/_pointer.scss | 258 ++++++++ dist/scss/mixins/scroll/_index.scss | 0 dist/scss/mixins/scroll/_scroll.scss | 104 ++++ dist/scss/mixins/scroll/_scrollbar.scss | 249 ++++++++ dist/scss/mixins/transforms/_flip.scss | 76 +++ dist/scss/mixins/transforms/_index.scss | 23 + dist/scss/mixins/transforms/_matrix.scss | 1 + dist/scss/mixins/transforms/_perspective.scss | 11 + dist/scss/mixins/transforms/_rotate.scss | 101 +++ dist/scss/mixins/transforms/_scale.scss | 11 + dist/scss/mixins/transforms/_skew.scss | 13 + dist/scss/mixins/transforms/_translate.scss | 13 + dist/scss/mixins/transitions/_index.scss | 0 dist/scss/mixins/transitions/_transition.scss | 13 + dist/scss/variables/_animation.scss | 91 +++ dist/scss/variables/_index.scss | 0 dist/ts/ARContent.ts | 27 + dist/ts/ARInteraction.ts | 34 ++ dist/ts/AdaptiveUI.ts | 25 + dist/ts/ContentStreaming.ts | 20 + dist/ts/Draggable.ts | 71 +++ dist/ts/DynamicEnvironment.ts | 60 ++ dist/ts/Gesture.ts | 168 +++++ dist/ts/ImmersiveAudio.ts | 40 ++ dist/ts/InteractiveCanvas.ts | 177 ++++++ dist/ts/InteractiveVideo.ts | 29 + dist/ts/Keyboard.ts | 162 +++++ dist/ts/RealTimeCollaboration.ts | 25 + dist/ts/Screensaver.ts | 140 +++++ dist/ts/SpatialNavigation.ts | 38 ++ dist/ts/UserProfile.ts | 27 + dist/ts/VRExperience.ts | 58 ++ dist/ts/VideoOverlay.ts | 116 ++++ dist/ts/index.ts | 0 117 files changed, 11301 insertions(+) create mode 100644 dist/LICENSE create mode 100644 dist/README.md create mode 100644 dist/css/move.gl.css create mode 100644 dist/css/move.gl.min.css create mode 100644 dist/package.json create mode 100644 dist/scss/classes/_animations.scss create mode 100644 dist/scss/classes/_index.scss create mode 100644 dist/scss/classes/_transforms.scss create mode 100644 dist/scss/classes/keyboard.scss create mode 100644 dist/scss/classes/screensaver.scss create mode 100644 dist/scss/dev/_banner.scss create mode 100644 dist/scss/dev/_debug.scss create mode 100644 dist/scss/dev/_deprecation.scss create mode 100644 dist/scss/dev/_index.scss create mode 100644 dist/scss/dev/_modules.scss create mode 100644 dist/scss/effects/_filter.scss create mode 100644 dist/scss/effects/_index.scss create mode 100644 dist/scss/effects/_opacity.scss create mode 100644 dist/scss/effects/_shadow.scss create mode 100644 dist/scss/functions/_index.scss create mode 100644 dist/scss/functions/scenes/_bubble.scss create mode 100644 dist/scss/functions/scenes/_index.scss create mode 100644 dist/scss/index.scss create mode 100644 dist/scss/keyframes/_beat.scss create mode 100644 dist/scss/keyframes/_index.scss create mode 100644 dist/scss/maps/_index.scss create mode 100644 dist/scss/maps/_mouse.scss create mode 100644 dist/scss/mixins/_accessibility.scss create mode 100644 dist/scss/mixins/_boot.scss create mode 100644 dist/scss/mixins/_hover.scss create mode 100644 dist/scss/mixins/_index.scss create mode 100644 dist/scss/mixins/_selection.scss create mode 100644 dist/scss/mixins/_shape.scss create mode 100644 dist/scss/mixins/_touch.scss create mode 100644 dist/scss/mixins/animations/--hover.scss create mode 100644 dist/scss/mixins/animations/_base.scss create mode 100644 dist/scss/mixins/animations/_beat.scss create mode 100644 dist/scss/mixins/animations/_blink.scss create mode 100644 dist/scss/mixins/animations/_bounce.scss create mode 100644 dist/scss/mixins/animations/_elastic.scss create mode 100644 dist/scss/mixins/animations/_fade.scss create mode 100644 dist/scss/mixins/animations/_flash.scss create mode 100644 dist/scss/mixins/animations/_flip.scss create mode 100644 dist/scss/mixins/animations/_float.scss create mode 100644 dist/scss/mixins/animations/_glow.scss create mode 100644 dist/scss/mixins/animations/_heartbeat.scss create mode 100644 dist/scss/mixins/animations/_hinge.scss create mode 100644 dist/scss/mixins/animations/_index.scss create mode 100644 dist/scss/mixins/animations/_jello.scss create mode 100644 dist/scss/mixins/animations/_jiggle.scss create mode 100644 dist/scss/mixins/animations/_lightspeed.scss create mode 100644 dist/scss/mixins/animations/_nod.scss create mode 100644 dist/scss/mixins/animations/_pop.scss create mode 100644 dist/scss/mixins/animations/_pulse.scss create mode 100644 dist/scss/mixins/animations/_ripple.scss create mode 100644 dist/scss/mixins/animations/_roll.scss create mode 100644 dist/scss/mixins/animations/_rotate.scss create mode 100644 dist/scss/mixins/animations/_rubber.scss create mode 100644 dist/scss/mixins/animations/_scale.scss create mode 100644 dist/scss/mixins/animations/_shake.scss create mode 100644 dist/scss/mixins/animations/_slide.scss create mode 100644 dist/scss/mixins/animations/_spin.scss create mode 100644 dist/scss/mixins/animations/_sway.scss create mode 100644 dist/scss/mixins/animations/_swing.scss create mode 100644 dist/scss/mixins/animations/_tada.scss create mode 100644 dist/scss/mixins/animations/_twist.scss create mode 100644 dist/scss/mixins/animations/_wave.scss create mode 100644 dist/scss/mixins/animations/_wobble.scss create mode 100644 dist/scss/mixins/animations/_zoom.scss create mode 100644 dist/scss/mixins/effects/_filter.scss create mode 100644 dist/scss/mixins/effects/_index.scss create mode 100644 dist/scss/mixins/effects/_shadow.scss create mode 100644 dist/scss/mixins/loaders/_index.scss create mode 100644 dist/scss/mixins/loaders/_progress.scss create mode 100644 dist/scss/mixins/loaders/_spinner.scss create mode 100644 dist/scss/mixins/loaders/circle_01.scss create mode 100644 dist/scss/mixins/loaders/circle_02.scss create mode 100644 dist/scss/mixins/loaders/circle_03.scss create mode 100644 dist/scss/mixins/loaders/circle_inner_01.scss create mode 100644 dist/scss/mixins/loaders/circle_inner_02.scss create mode 100644 dist/scss/mixins/loaders/circle_inner_03.scss create mode 100644 dist/scss/mixins/mouse/_cursor.scss create mode 100644 dist/scss/mixins/mouse/_index.scss create mode 100644 dist/scss/mixins/mouse/_pointer.scss create mode 100644 dist/scss/mixins/scroll/_index.scss create mode 100644 dist/scss/mixins/scroll/_scroll.scss create mode 100644 dist/scss/mixins/scroll/_scrollbar.scss create mode 100644 dist/scss/mixins/transforms/_flip.scss create mode 100644 dist/scss/mixins/transforms/_index.scss create mode 100644 dist/scss/mixins/transforms/_matrix.scss create mode 100644 dist/scss/mixins/transforms/_perspective.scss create mode 100644 dist/scss/mixins/transforms/_rotate.scss create mode 100644 dist/scss/mixins/transforms/_scale.scss create mode 100644 dist/scss/mixins/transforms/_skew.scss create mode 100644 dist/scss/mixins/transforms/_translate.scss create mode 100644 dist/scss/mixins/transitions/_index.scss create mode 100644 dist/scss/mixins/transitions/_transition.scss create mode 100644 dist/scss/variables/_animation.scss create mode 100644 dist/scss/variables/_index.scss create mode 100644 dist/ts/ARContent.ts create mode 100644 dist/ts/ARInteraction.ts create mode 100644 dist/ts/AdaptiveUI.ts create mode 100644 dist/ts/ContentStreaming.ts create mode 100644 dist/ts/Draggable.ts create mode 100644 dist/ts/DynamicEnvironment.ts create mode 100644 dist/ts/Gesture.ts create mode 100644 dist/ts/ImmersiveAudio.ts create mode 100644 dist/ts/InteractiveCanvas.ts create mode 100644 dist/ts/InteractiveVideo.ts create mode 100644 dist/ts/Keyboard.ts create mode 100644 dist/ts/RealTimeCollaboration.ts create mode 100644 dist/ts/Screensaver.ts create mode 100644 dist/ts/SpatialNavigation.ts create mode 100644 dist/ts/UserProfile.ts create mode 100644 dist/ts/VRExperience.ts create mode 100644 dist/ts/VideoOverlay.ts create mode 100644 dist/ts/index.ts diff --git a/dist/LICENSE b/dist/LICENSE new file mode 100644 index 0000000..fbf4262 --- /dev/null +++ b/dist/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Scape Agency + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/dist/README.md b/dist/README.md new file mode 100644 index 0000000..639d6c7 --- /dev/null +++ b/dist/README.md @@ -0,0 +1,38 @@ +

+ Stylescape Logo +

+

move.gl

+

User eXperience Toolkit

+ + +
+ +
+ +[![Website](https://img.shields.io/website?url=https%3A%2F%2Fwww.move.gl&up_message=Up&up_color=354351&down_message=Down&down_color=354351&style=flat-square&logo=Firefox&logoColor=FFFFFF&label=Website&labelColor=354351&color=354351) +](https://www.move.gl) +[![NPM Version](https://img.shields.io/npm/v/move.gl?style=flat-square&logo=npm&logoColor=FFFFFF&label=NPM&labelColor=354351&color=354351&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fmove.gl)](https://www.npmjs.com/package/move.gl) +[![devContainer](https://img.shields.io/badge/devContainer-23354351?style=flat-square&logo=Docker&logoColor=%23FFFFFF&labelColor=%23354351&color=%23354351)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/stylescape/move.gl) +[![StackBlitz](https://img.shields.io/badge/StackBlitz-23354351?style=flat-square&logo=StackBlitz&logoColor=%23FFFFFF&labelColor=%23354351&color=%23354351)](https://stackblitz.com/github/stylescape/move.gl/tree/main?file=src%2Findex.html) +[![GitHub License](https://img.shields.io/github/license/stylescape/move.gl?style=flat-square&logo=readthedocs&logoColor=FFFFFF&label=&labelColor=%23354351&color=%23354351&link=LICENSE)](https://github.com/stylescape/move.gl/blob/main/LICENSE) + +
+ +
+ +[![Report a Bug](https://img.shields.io/badge/Report%20a%20Bug-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/move.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=bug_report.yml) +[![Request a Feature](https://img.shields.io/badge/Request%20a%20Feature-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/move.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=feature_request.yml) +[![Ask a Question](https://img.shields.io/badge/Ask%20a%20Question-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/move.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=question.yml) +[![Make a Suggestion](https://img.shields.io/badge/Make%20a%20Suggestion-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/move.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=suggestion.yml) +[![Start a Discussion](https://img.shields.io/badge/Start%20a%20Discussion-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/move.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=discussion.yml) + +
+ +--- + +
+ + + +- [Foundation | Motion UI](https://github.com/foundation/motion-ui) +- [Glide](https://github.com/nickpettit/glide) \ No newline at end of file diff --git a/dist/css/move.gl.css b/dist/css/move.gl.css new file mode 100644 index 0000000..6fc0d68 --- /dev/null +++ b/dist/css/move.gl.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=to.css.map */ \ No newline at end of file diff --git a/dist/css/move.gl.min.css b/dist/css/move.gl.min.css new file mode 100644 index 0000000..6fc0d68 --- /dev/null +++ b/dist/css/move.gl.min.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=to.css.map */ \ No newline at end of file diff --git a/dist/package.json b/dist/package.json new file mode 100644 index 0000000..f24d58a --- /dev/null +++ b/dist/package.json @@ -0,0 +1,55 @@ +{ + "name": "move.gl", + "version": "0.0.1", + "description": "move.gl is a ...", + "keywords": [ + "move.gl", + "stylescape" + ], + "license": "MIT", + "homepage": "https://www.move.gl/", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/scape-foundation" + } + ], + "main": "js/index.js", + "types": "js/index.d.ts", + "files": [ + "code-snippets/**/*.code-snippets", + "css/**/*.{css,map}", + "font/**/*.{eot,otf,ttf,woff,woff2}", + "inkscape/**/*.inkscape", + "jinja/**/*.jinja", + "js/**/*.d.ts", + "js/**/*.{js,map}", + "less/**/*.less", + "md/**/*.md", + "oco/**/*.oco", + "png/**/*.png", + "py/**/*.py", + "rcpx/**/*.rcpx", + "scss/**/*.scss", + "sketchpalette/**/*.sketchpalette", + "styl/**/*.styl", + "svg/**/*.svg", + "tex/**/*.tex", + "ts/**/*.ts", + "!.DS_Store" + ], + "author": "Lars van Vianen", + "contributors": [ + "Scape Agency" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/stylescape/move.gl.git" + }, + "exports": { + ".": { + "sass": "./scss/index.scss", + "typescript": "./ts/index.scss" + } + } +} \ No newline at end of file diff --git a/dist/scss/classes/_animations.scss b/dist/scss/classes/_animations.scss new file mode 100644 index 0000000..5189752 --- /dev/null +++ b/dist/scss/classes/_animations.scss @@ -0,0 +1,576 @@ +// ============================================================================ +// StyleScape | Animations +// ============================================================================ + +@use "../dev" as *; + + + + +// Beat Animations +// ---------------------------------------------------------------------------- + +.animate_beat { + @include animate_beat(); +} + +.animate_beat_fade { + @include animate_beat_fade(); +} + +.animate_beat_double { + @include animate_beat_double(); +} + + +// Blink Animations +// ---------------------------------------------------------------------------- + +.animate_blink { + @include animate_blink(); +} + +.animate_blink_rapid { + @include animate_blink_rapid(); +} + +.animate_blink_soft { + @include animate_blink_soft(); +} + +.animate_blink_alternate { + @include animate_blink_alternate(); +} + + +// Bounce Animations +// ---------------------------------------------------------------------------- + +.animate_bounce { + @include animate_bounce(); +} + +.animate_bounce_extended { + @include animate_bounce_extended(); +} + +.animate_bounce_rotate { + @include animate_bounce_rotate(); +} + +.animate_bounce_multi { + @include animate_bounce_multi(); +} + + +// Elastic Animations +// ---------------------------------------------------------------------------- + +.animate_elastic { + @include animate_elastic(); +} + + +// Fade Animations +// ---------------------------------------------------------------------------- + +.animate_fade { + @include animate_fade(); +} + +.animate_fade_in { + @include animate_fade_in(); +} + +.animate_fade_out { + @include animate_fade_out(); +} + +.animate_fade_gradual { + @include animate_fade_gradual(); +} + + +// Flash Animations +// ---------------------------------------------------------------------------- + +.animate_flash { + @include animate_flash(); +} + +.animate_flash_fade { + @include animate_flash_fade(); +} + +.animate_flash_strobe { + @include animate_flash_strobe(); +} + +.animate_flash_fade_slow { + @include animate_flash_fade_slow(); +} + + +// Flip Animations +// ---------------------------------------------------------------------------- + +.animate_flip { + @include animate_flip(); +} + +// Flip Horizontal Animation +// ---------------------------------------------------------------------------- + +/// +/// Horizontal Flip Animation +/// Creates a flip animation that rotates the element horizontally. +/// +.animate_flip_horizontal { + @include animate_flip(1s, ease-in-out, infinite, 0, 1, 0, 0, 360deg); +} + + +// Flip Vertical Animation +// ---------------------------------------------------------------------------- + +/// +/// Vertical Flip Animation +/// Creates a flip animation that rotates the element vertically. +/// +.animate_flip_vertical { + @include animate_flip(1s, ease-in-out, infinite, 1, 0, 0, 0, 360deg); +} + + +// Flip Diagonal Animation +// ---------------------------------------------------------------------------- + +/// +/// Diagonal Flip Animation +/// Creates a flip animation that rotates the element diagonally. +/// +.animate_flip_diagonal { + @include animate_flip(1s, ease-in-out, infinite, 1, 1, 0, 0, 360deg); +} + + +// 180-degree Flip Animation Variants +// ---------------------------------------------------------------------------- + +/// +/// 180-Degree Horizontal Flip Animation +/// Creates a flip animation that rotates the element horizontally by 180 degrees. +/// +.animate_flip_180_horizontal { + @include animate_flip(1s, ease-in-out, infinite, 0, 1, 0, 0, -180deg); +} + +/// +/// 180-Degree Vertical Flip Animation +/// Creates a flip animation that rotates the element vertically by 180 degrees. +/// +.animate_flip_180_vertical { + @include animate_flip(1s, ease-in-out, infinite, 1, 0, 0, 0, -180deg); +} + +/// +/// 180-Degree Diagonal Flip Animation +/// Creates a flip animation that rotates the element diagonally by 180 degrees. +/// +.animate_flip_180_diagonal { + @include animate_flip(1s, ease-in-out, infinite, 1, 1, 0, 0, -180deg); +} + + + + +// Float Animations +// ---------------------------------------------------------------------------- + +.animate_float { + @include animate_float(); +} + +.animate_float_horizontal { + @include animate_float_horizontal(); +} + +.animate_float_rotate { + @include animate_float_rotate(); +} + + +// Glow Animations +// ---------------------------------------------------------------------------- + +.animate_glow { + @include animate_glow($animate_base_color_glow_01); +} + +.animate_glow_pulse { + @include animate_glow_pulse($animate_base_color_glow_01); +} + +.animate_glow_multicolor { + @include animate_glow_multicolor(); +} + + + +// Heartbeat Animation +// ---------------------------------------------------------------------------- + +.animate_heartbeat { + @include animate_heartbeat(); +} + +.animate_heartbeat_fast { + @include animate_heartbeat_fast(); +} + +.animate_heartbeat_slow { + @include animate_heartbeat_slow(); +} + +.animate_heartbeat_color { + @include animate_heartbeat_color(); +} + + +// Jiggle Animations +// ---------------------------------------------------------------------------- + + +.animate_jiggle { + @include animate_jiggle(); +} + +.animate_jiggle_vertical { + @include animate_jiggle_vertical(); +} + +.animate_jiggle_multi { + @include animate_jiggle_multi(); +} + +.animate_jiggle_slow { + @include animate_jiggle_slow(); +} + + +// Nod Animations +// ---------------------------------------------------------------------------- + +.animate_nod { + @include animate_nod(); +} +.animate_nod_slow { + @include animate_nod_slow(); +} + +.animate_nod_bounce { + @include animate_nod_bounce(); +} + +.animate_nod_continuous { + @include animate_nod_continuous(); +} + + +// Pop Animations +// ---------------------------------------------------------------------------- + +.animate_pop { + @include animate_pop(1.2); +} + +.animate_pop_fast { + @include animate_pop_fast(1.2); +} + +.animate_pop_slow { + @include animate_pop_slow(1.1); +} + +.animate_pop_rotate { + @include animate_pop_rotate(1.2, 10deg); +} + + + +// Pulse Animations +// ---------------------------------------------------------------------------- + +.animate_pulse { + @include animate_pulse(); +} + +.animate_pulse_slow { + @include animate_pulse_slow(); +} + +.animate_pulse_fast { + @include animate_pulse_fast(); +} + +.animate_pulse_color { + @include animate_pulse_color(); +} + + + +// Ripple Animations +// ---------------------------------------------------------------------------- + +.animate_ripple { + @include animate_ripple(); +} + +.animate_ripple_slow { + @include animate_ripple_slow(); +} + +.animate_ripple_multi { + @include animate_ripple_multi(); +} + +.animate_ripple_color { + @include animate_ripple_color(); +} + + +// Roll Animations +// ---------------------------------------------------------------------------- + +.animate_roll { + @include animate_roll(); +} + +.animate_roll_reverse { + @include animate_roll_reverse(); +} + +.animate_roll_slow { + @include animate_roll_slow(); +} + +.animate_roll_vertical { + @include animate_roll_vertical(); +} + + +// Scale Animations +// ---------------------------------------------------------------------------- + +.animate_scale_expand { + @include animate_scale_expand(); +} + +.animate_scale_shrink { + @include animate_scale_shrink(); +} + + +// Shake Animations +// ---------------------------------------------------------------------------- + +.animate_shake { + @include animate_shake(); +} + +.animate_shake_slow { + @include animate_shake_slow(); +} + +.animate_shake_horizontal { + @include animate_shake_horizontal(); +} + + +// Slide Animations +// ---------------------------------------------------------------------------- + +.animate_slide { + @include animate_slide(left, 100%); +} + +.animate_slide_up { + @include animate_slide_up(); +} + +.animate_slide_down { + @include animate_slide_down(); +} + +.animate_slide_in_left { + @include animate_slide_in_left(); +} + +.animate_slide_in_right { + @include animate_slide_in_right(); +} + +.animate_slide_out_left { + @include animate_slide_out_left(); +} +.animate_slide_out_right { + @include animate_slide_out_right(); +} + +.animate_slide_in_fade { + @include animate_slide_in_fade(left, 100%); +} + + +// Spin Animations +// ---------------------------------------------------------------------------- + +.animate_spin { + @include animate_spin(); +} + +.animate_spin_reverse { + @include animate_spin_reverse(); +} + +.animate_spin_grow { + @include animate_spin_grow(); +} + +.animate_spin_pulse { + @include animate_spin_pulse(); +} + +.animate_spin_flip { + @include animate_spin_flip(); +} + + + +// Sway Animations +// ---------------------------------------------------------------------------- + +.animate_sway { + @include animate_sway(); +} + +.animate_sway_slow { + @include animate_sway_slow(); +} + +.animate_sway_fast { + @include animate_sway_fast(); +} + +.animate_sway_fade { + @include animate_sway_fade(); +} + + + +// Tada Animations +// ---------------------------------------------------------------------------- + +.animate_tada { + @include animate_tada(); +} + +.animate_tada_slow { + @include animate_tada_slow(); +} + +.animate_tada_fast { + @include animate_tada_fast(); +} + +.animate_tada_fade { + @include animate_tada_fade(); +} + + + + + + +// Twist Animations +// ---------------------------------------------------------------------------- + +.animate_twist { + @include animate_twist(); +} + +.animate_twist_slow { + @include animate_twist_slow(); +} + +.animate_twist_fast { + @include animate_twist_fast(); +} + +.animate_twist_color { + @include animate_twist_color(); +} + + + +// Wave Animations +// ---------------------------------------------------------------------------- + + +.animate_wave { + @include animate_wave(); +} + +.animate_wave_slow { + @include animate_wave_slow(); +} +.animate_wave_fast { + @include animate_wave_fast(); +} + +.animate_wave_fade { + @include animate_wave_fade(); +} + + + + +// Wobble Animations +// ---------------------------------------------------------------------------- + +.animate_wobble { + @include animate_wobble(); +} + +.animate_wobble_slow { + @include animate_wobble_slow(); +} + +.animate_wobble_fast { + @include animate_wobble_fast(); +} + +.animate_wobble_scale { + @include animate_wobble_scale(); +} + + + +// Zoom Animations +// ---------------------------------------------------------------------------- + +.animate_zoom { + @include animate_zoom(1.5); +} +.animate_zoom_slow { + @include animate_zoom_slow(); +} + +.animate_zoom_fast { + @include animate_zoom_fast(); +} + +.animate_zoom_fade { + @include animate_zoom_fade(); +} + diff --git a/dist/scss/classes/_index.scss b/dist/scss/classes/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/classes/_transforms.scss b/dist/scss/classes/_transforms.scss new file mode 100644 index 0000000..989ed78 --- /dev/null +++ b/dist/scss/classes/_transforms.scss @@ -0,0 +1,124 @@ + + + + + + + +/// +/// Predefined class for horizontal flip. +/// Applies the horizontal flip mixin. +/// +.transform_flip_horizontal { + @include transform_flip_horizontal; +} + +/// +/// Predefined class for vertical flip. +/// Applies the vertical flip mixin. +/// +.transform_flip_vertical { + @include transform_flip_vertical; +} + +/// +/// Predefined class for both horizontal and vertical flips. +/// Applies the mixin that combines both transformations. +/// +.transform_flip_both { + @include transform_flip_both(); +} + +/// +/// Alternate combination class for both horizontal and vertical flips. +/// Combines the horizontal and vertical flip classes. +/// +.transform_flip_horizontal.transform_flip_vertical { + @include transform_flip_both(); // Ensures both flips are applied +} + + + + +/// +/// Predefined class for rotating elements by 90 degrees. +/// Applies the 90 degrees rotation mixin. +/// +.transform_rotate_90 { + @include transform_rotate(90deg); +} + +/// +/// Predefined class for rotating elements by 180 degrees. +/// Applies the 180 degrees rotation mixin. +/// +.transform_rotate_180 { + @include transform_rotate(180deg); +} + +/// +/// Predefined class for rotating elements by 270 degrees. +/// Applies the 270 degrees rotation mixin. +/// +.transform_rotate_270 { + @include transform_rotate(270deg); +} + +/// +/// Predefined class for dynamic rotation using a CSS variable. +/// Allows rotation to be controlled via the CSS variable `--rotation-angle`. +/// +.transform_rotate_dynamic { + @include transform_rotate_dynamic(); +} + + + + + + + +$default-rotation: 0deg !default; +$rotation-90: 90deg !default; +$rotation-180: 180deg !default; +$rotation-270: 270deg !default; + +$default-scale: 1 !default; +$scale-up: 1.2 !default; +$scale-down: 0.8 !default; + +$default-translate: 0 !default; +$translate-x: 10px !default; +$translate-y: 10px !default; + +$default-skew: 0deg !default; +$skew-x: 10deg !default; +$skew-y: 10deg !default; + +/// +/// Predefined class for scaling elements up. +/// +.scale_up { + @include scale($scale-up); +} + +/// +/// Predefined class for scaling elements down. +/// +.scale_down { + @include scale($scale-down); +} + +/// +/// Predefined class for translating elements by predefined X and Y values. +/// +.translate_xy { + @include translate($translate-x, $translate-y); +} + +/// +/// Predefined class for skewing elements by predefined X and Y angles. +/// +.skew_xy { + @include skew($skew-x, $skew-y); +} \ No newline at end of file diff --git a/dist/scss/classes/keyboard.scss b/dist/scss/classes/keyboard.scss new file mode 100644 index 0000000..dd7001e --- /dev/null +++ b/dist/scss/classes/keyboard.scss @@ -0,0 +1,18 @@ +#keyboard div { + display: inline-block; + margin: 5px; + width: 30px; + height: 30px; + background-color: #ddd; + text-align: center; + line-height: 30px; + user-select: none; + cursor: pointer; +} + +input[type="text"] { + width: 300px; + margin: 10px; + padding: 5px; + font-size: 16px; +} diff --git a/dist/scss/classes/screensaver.scss b/dist/scss/classes/screensaver.scss new file mode 100644 index 0000000..fc64106 --- /dev/null +++ b/dist/scss/classes/screensaver.scss @@ -0,0 +1,15 @@ +#screensaver { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: black; + z-index: 1000; /* Make sure it covers other content */ +} + +#screensaverVideo, #screensaverImage { + width: 100%; + height: 100%; + object-fit: cover; /* Ensure the content covers the full area */ +} diff --git a/dist/scss/dev/_banner.scss b/dist/scss/dev/_banner.scss new file mode 100644 index 0000000..602bbcf --- /dev/null +++ b/dist/scss/dev/_banner.scss @@ -0,0 +1,36 @@ +// ============================================================================ +// StyleScape | Development | Banner +// ============================================================================ + +@mixin banner( + $file, + $version: '1.0.0', + $author: 'Scape Agency', + $website: 'https://www.style.scape/', + $license: 'Apache 2.0 License', + $licenseUrl: 'https://github.com/scape-agency/stylescape/blob/main/LICENSE', + $description: 'Layout Engine', + $repository: 'https://github.com/scape-agency/stylescape/', +) { + @at-root { + /*! + * ============================================================================ + * + * Stylescape #{$file} v#{$version} (#{$website}) + * Copyright (c) 2020-2024 #{$author} (https://www.scape.agency) + * All rights reserved under #{$license} terms. + * + * ============================================================================ + * + * @description #{$description} + * @author #{$author} (https://www.scape.agency) + * @version v#{$version} + * @copyright 2020-2024 #{$author} (https://www.scape.agency) + * @website #{$website} + * @repository #{$repository} + * @license #{$license} (#{$licenseUrl}) + * + * ============================================================================ + */ + } +} \ No newline at end of file diff --git a/dist/scss/dev/_debug.scss b/dist/scss/dev/_debug.scss new file mode 100644 index 0000000..1571c69 --- /dev/null +++ b/dist/scss/dev/_debug.scss @@ -0,0 +1,18 @@ +// ============================================================================ +// StyleScape | Development | Debug +// ============================================================================ + +// Debug Mixin +// A debug mixin to output property values directly into the DOM for quick +// debugging purposes, particularly useful during development. +@mixin debug($property, $value) { + &:after { + content: '#{$property}: #{$value}'; + display: block; + background-color: yellow; + color: black; + font-size: 12px; + padding: 2px; + } +} + \ No newline at end of file diff --git a/dist/scss/dev/_deprecation.scss b/dist/scss/dev/_deprecation.scss new file mode 100644 index 0000000..7a875ae --- /dev/null +++ b/dist/scss/dev/_deprecation.scss @@ -0,0 +1,10 @@ +// ============================================================================ +// StyleScape | Development | Deprecation +// ============================================================================ + +// Deprecation Warning Mixin +// This mixin can be used to mark deprecated mixins or styles, displaying a warning in the console during compilation. +@mixin deprecate($feature, $version, $alternative: null) { + @warn 'Deprecation Warning: #{$feature} will be removed in version #{$version}.' + if($alternative, ' Use #{$alternative} instead.', ''); + } + \ No newline at end of file diff --git a/dist/scss/dev/_index.scss b/dist/scss/dev/_index.scss new file mode 100644 index 0000000..7749715 --- /dev/null +++ b/dist/scss/dev/_index.scss @@ -0,0 +1,8 @@ +// ============================================================================ +// StyleScape | Management +// ============================================================================ + +@forward "banner"; +@forward "modules"; +@forward "debug"; +@forward "deprecation"; diff --git a/dist/scss/dev/_modules.scss b/dist/scss/dev/_modules.scss new file mode 100644 index 0000000..e0ae90f --- /dev/null +++ b/dist/scss/dev/_modules.scss @@ -0,0 +1,24 @@ +// ============================================================================ +// StyleScape | Development | Modules +// ============================================================================ + +@use "../../../../unit.gl/scss/index.scss" as *; +@use "../../../../hue.gl/scss/index.scss" as *; +// @use "../../../../icon.gl/scss/index.scss" as *; + +@forward "../../../../unit.gl/scss/index.scss"; +@forward "../../../../hue.gl/scss/index.scss"; +// @forward "../../../../icon.gl/scss/index.scss"; + + +// @include icon_face( +// "../../../node_modules/icon.gl/font/icongl", +// "icongl", +// "", +// // 600, +// // "normal", +// // "#{$icon_name} SemiBold", +// // "#{$icon_name}-SemiBold", +// "ttf", +// // "otf" +// ); diff --git a/dist/scss/effects/_filter.scss b/dist/scss/effects/_filter.scss new file mode 100644 index 0000000..e72775f --- /dev/null +++ b/dist/scss/effects/_filter.scss @@ -0,0 +1,176 @@ + + +// ============================================================================ +// StyleScape | Effects | Filter +// ============================================================================ + +@use "../variables" as *; +@use "../mixins" as *; + + +$default-blur: 2px; +$hover-blur: 4px; + + +@mixin filter_blur { + backdrop-filter: blur(calc(#{$q} * 4)); + -webkit-backdrop-filter: blur(calc(#{$q} * 4)); +} + + + +// Applying Filter Mixins +// You can apply these mixins to your elements to achieve the desired effects: + + +.image-blur { + @include filter_blur(4px); +} + +.image-grayscale { + @include filter_grayscale(50%); +} + +.image-brightness { + @include filter_brightness(150%); +} + +.image-contrast { + @include filter_contrast(200%); +} + +.image-sepia { + @include filter_sepia(60%); +} + +// Combining multiple filter effects +.filter_combine { + @include combine-filters(brightness(130%), contrast(120%), sepia(30%)); +} +// Advanced Usage with Dynamic Values +// SCSS variables and functions can be used to dynamically adjust filter values, which is particularly useful for themes or interactive elements: + + + +.image-interactive { + @include blur($default-blur); + + &:hover { + @include blur($hover-blur); + } +} + +// Function to calculate contrast based on a light or dark theme +@function theme-contrast($theme) { + @if $theme == 'dark' { + @return 150%; + } @else { + @return 100%; + } +} + +.image-theme { + $current-theme: 'dark'; // Example variable that might be dynamically set + @include contrast(theme-contrast($current-theme)); +} +// Responsive Filters +// You can also use media queries within SCSS to apply different filters based on viewport sizes, enhancing responsive design: + + +.image-responsive { + @include grayscale(100%); + + @media (min-width: 768px) { + @include grayscale(0%); + } +} + + + +// Theming with Filter Effects +// You can define a set of filter effects for different themes (e.g., dark mode, light mode) using SCSS maps and loops. This approach allows you to switch filter effects based on the active theme dynamically. + + +// Define themes with specific filter values +$themes: ( + light: ( + brightness: 100%, + contrast: 90% + ), + dark: ( + brightness: 80%, + contrast: 110% + ) +); + +// Apply theme-based filters using a mixin +@mixin apply-theme($theme-name) { + $theme: map-get($themes, $theme-name); + filter: brightness(map-get($theme, brightness)) contrast(map-get($theme, contrast)); +} + +.element { +// Example usage with a light theme +@include apply-theme(light); + +&:hover { + // Darken on hover for the light theme + @include apply-theme(dark); +} +} +// Animated Filter Transitions +// SCSS can be used to create smooth transitions between filter states, adding a dynamic and interactive feel to your elements. + + +@mixin filter-transition($duration: 0.3s, $easing: ease) { + transition: filter $duration $easing; +} + +.element-with-transition { + @include grayscale(0%); + @include filter-transition(0.5s, ease-in-out); + + &:hover { + @include grayscale(100%); + } +} +// Generating Multiple Filter Classes with Loops +// SCSS loops can be incredibly powerful for generating a series of classes that apply varying levels of a specific filter effect, such as a range of blur or grayscale values. + + +// @for $i from 1 through 10 { +// .blur-#{$i} { +// filter: blur(#{$i}px); +// } + +// .grayscale-#{$i * 10} { +// filter: grayscale(#{$i * 10}%); +// } +// } +// Custom Mixins for Complex Filter Combinations +// For more complex or commonly used combinations of filters, you can create custom mixins. This approach keeps your code DRY and makes complex filter applications more manageable. + + +@mixin artistic-effect($blur-radius, $saturate-level, $sepia-level) { + filter: blur($blur-radius) saturate($saturate-level) sepia($sepia-level); +} + +.element-artistic { + @include artistic-effect(2px, 200%, 50%); +} +// Utilizing Functions for Dynamic Filter Values +// SCSS functions can calculate and return dynamic filter values based on certain conditions or inputs, offering a high degree of flexibility. + + +@function calculate-brightness($light-mode) { + @if $light-mode { + @return 120%; + } @else { + @return 80%; + } +} + +.element-dynamic-brightness { + $is-light-mode: true; // Example condition + filter: brightness(calculate-brightness($is-light-mode)); +} diff --git a/dist/scss/effects/_index.scss b/dist/scss/effects/_index.scss new file mode 100644 index 0000000..b21b341 --- /dev/null +++ b/dist/scss/effects/_index.scss @@ -0,0 +1,23 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// StyleScape | Effects +// ============================================================================ + + +@forward "opacity"; +@forward "filter"; +@forward "shadow"; diff --git a/dist/scss/effects/_opacity.scss b/dist/scss/effects/_opacity.scss new file mode 100644 index 0000000..a8329df --- /dev/null +++ b/dist/scss/effects/_opacity.scss @@ -0,0 +1,62 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// StyleScape | Effects | Opacity +// ============================================================================ + +@use "../variables" as *; +@use "../mixins" as *; +// Base Opacity Mixin +// ---------------------------------------------------------------------------- + +@mixin set_opacity($opacity-level) { + opacity: $opacity-level !important; + visibility: if($opacity-level > 0, visible, hidden); +} + + +// Predefined Opacity Levels +// ---------------------------------------------------------------------------- + +.opacity_00 { @include set_opacity(0.0); } +.opacity_01 { @include set_opacity(0.1); } +.opacity_02 { @include set_opacity(0.2); } +.opacity_03 { @include set_opacity(0.3); } +.opacity_04 { @include set_opacity(0.4); } +.opacity_05 { @include set_opacity(0.5); } +.opacity_06 { @include set_opacity(0.6); } +.opacity_07 { @include set_opacity(0.7); } +.opacity_08 { @include set_opacity(0.8); } +.opacity_09 { @include set_opacity(0.9); } +.opacity_10 { @include set_opacity(1.0); } + + +// ---------------------------------------------------------------------------- + +$hover_opacity: 0.75; + +// Opacity Transition Mixin +@mixin opacity_transition($duration: 0.3s, $hover_opacity: 0.75) { + transition: opacity $duration ease; + &:hover { + opacity: $hover_opacity; + } +} + +// Example Usage of Opacity Transition +.opacity_hover { + @include opacity_transition(0.3s, 0.75); +} diff --git a/dist/scss/effects/_shadow.scss b/dist/scss/effects/_shadow.scss new file mode 100644 index 0000000..f61b6e1 --- /dev/null +++ b/dist/scss/effects/_shadow.scss @@ -0,0 +1,175 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// StyleScape | Effects | Shadow +// ============================================================================ +@use "../variables" as *; +@use "../mixins" as *; + +// Base Shadow Mixin +// ---------------------------------------------------------------------------- + +@mixin box_shadow( + $offset_horizontal: 0, + $offset_vertical: 0, + $blur: 3px, + $spread: 0, + $color: rgba(0,0,0, .2) +) { + box_shadow: $offset_horizontal $offset_vertical $blur $spread $color; +} + + +// Predefined Shadow Styles +// ---------------------------------------------------------------------------- + +.btn_shadow { @include box_shadow(0, 0, 6px, 0, rgba(0,0,0, .3)); } +.box_shadow_light { @include box_shadow(0, 0, 3px, 0, rgba(0,0,0, .1)); } +.box_shadow { @include box_shadow(0, 0, 3px, 0, rgba(0,0,0, .2)); } +.box_shadow_dark { @include box_shadow(0, 0, 4px, 0, rgba(0,0,0, .4)); } +.box_shadow_large { @include box_shadow(0, 0, 12px, 0, rgba(0,0,0, .1)); } + + +// Extended Shadow Styles +// ---------------------------------------------------------------------------- + +.box_shadow_intense { @include box_shadow(0, 2px, 4px, 0, rgba(0,0,0, .5)); } +.box_shadow_soft { @include box_shadow(0, 2px, 10px, 0, rgba(0,0,0, .05)); } +.box_shadow_colored { @include box_shadow(0, 0, 5px, 0, rgba(255,0,0, .2)); } /* Example with color */ +.box_shadow_inset { @include box_shadow(inset 0 0 6px rgba(0,0,0, .3)); } /* Inset shadow */ + + +// Directional Box Shadows +// ---------------------------------------------------------------------------- + +.drop_shadow_top { @include box_shadow(0, -4px, 2px, -2px, rgba(0,0,0,0.4)); } +.drop_shadow_right { @include box_shadow(4px, 0, 2px, -2px, rgba(0,0,0,0.4)); } +.drop_shadow_bottom { @include box_shadow(0, 4px, 2px, -2px, rgba(0,0,0,0.4)); } +.drop_shadow_left { @include box_shadow(-4px, 0, 2px, -2px, rgba(0,0,0,0.4)); } + + +// Emphasized Box Shadows +// ---------------------------------------------------------------------------- + +.emphasize_dark { @include box_shadow(0, 0, 5px, 2px, rgba(0,0,0,.35)); } +.emphasize_light { @include box_shadow(0, 0, 0, 10px, rgba(255,255,255,.25)); } +.emphasize_inset { @include box_shadow(inset 0, 0, 7px, 4px, rgba(255,255,255,.5)); } +.emphasize_border { @include box_shadow(inset 0, 0, 0, 7px, rgba(255,255,255,.5)); } + + +// Embossed Box Shadows +// ---------------------------------------------------------------------------- + +.embossed_light { + border: 1px solid rgba(0,0,0,0.1); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); +} + +.embossed_heavy { + border: 1px solid rgba(0,0,0,0.1); + box-shadow: + inset 0 2px 3px rgba(255,255,255,0.3), + inset 0 -2px 3px rgba(0,0,0,0.3), + 0 1px 1px rgba(255,255,255,0.9); +} + + +// Shadow Border Mixin: +// Add a shadow to mimic a border effect. +@mixin shadow-border($shadow: 0 0 5px rgba(0,0,0,0.3)) { + box-shadow: $shadow; +} + +.border-shadow-effect { + @include shadow-border(); +} + + + +// Hover Shadow Animation: +// Adds a shadow effect on hover to make elements appear elevated. + + +// @mixin hover-shadow-animation($hover-shadow: 0 4px 8px rgba(0,0,0,0.2)) { +// transition: box-shadow 0.3s ease; +// &:hover { +// box-shadow: $hover-shadow; +// } +// } + +// .btn-hover-shadow { +// @include hover-shadow-animation(); +// } +// Shadow Transition Mixin: +// Smoothly transitions shadow effects on hover or focus. + + +// @mixin shadow-transition($default-shadow, $hover-shadow) { +// box-shadow: $default-shadow; +// transition: box-shadow 0.3s ease; +// &:hover, &:focus { +// box-shadow: $hover-shadow; +// } +// } + +// .card-transition { +// @include shadow-transition(0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2)); +// } +// Multi-layered Shadow: +// Creates a more complex shadow by layering multiple shadows. + + +// @mixin multi-layered-shadow($shadows...) { +// box-shadow: $shadows; +// } + +// .multi-shadow { +// @include multi-layered-shadow(0 1px 2px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.2)); +// } +// Inset Shadow: +// Creates an inner shadow for a "cut-in" effect. + + +// @mixin inset-shadow($horizontal: 0, $vertical: 0, $blur: 3px, $spread: 0, $color: rgba(0,0,0,0.5)) { +// box-shadow: inset $horizontal $vertical $blur $spread $color; +// } + +// .inset-shadow-box { +// @include inset-shadow(0, 0, 5px, 0, rgba(0,0,0,0.25)); +// } +// Soft Edge Shadow: +// Generates a soft, diffuse shadow around an element. + + +// @mixin soft-edge-shadow($blur: 10px, $color: rgba(0,0,0,0.2)) { +// box-shadow: 0 0 $blur $color; +// } + +// .soft-edge { +// @include soft-edge-shadow(); +// } + + +// Neomorphic Shadow: +// Creates a shadow effect suitable for Neomorphism design. + +// @mixin neomorphic-shadow($light-color: rgba(255, 255, 255, 0.7), $dark-color: rgba(0, 0, 0, 0.3)) { +// box-shadow: 5px 5px 10px $dark-color, -5px -5px 10px $light-color; +// } + +// .neo-box { +// @include neomorphic-shadow(); +// } \ No newline at end of file diff --git a/dist/scss/functions/_index.scss b/dist/scss/functions/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/functions/scenes/_bubble.scss b/dist/scss/functions/scenes/_bubble.scss new file mode 100644 index 0000000..7f44537 --- /dev/null +++ b/dist/scss/functions/scenes/_bubble.scss @@ -0,0 +1,19 @@ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; + background: linear-gradient(135deg, #ffd2c1, #f9d0d3); +} + +.scene { + position: absolute; + width: 100%; + height: 100vh; +} diff --git a/dist/scss/functions/scenes/_index.scss b/dist/scss/functions/scenes/_index.scss new file mode 100644 index 0000000..b7e851d --- /dev/null +++ b/dist/scss/functions/scenes/_index.scss @@ -0,0 +1,20 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// Scenes +// ============================================================================ + + +// @forward "bubble"; \ No newline at end of file diff --git a/dist/scss/index.scss b/dist/scss/index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/keyframes/_beat.scss b/dist/scss/keyframes/_beat.scss new file mode 100644 index 0000000..776970f --- /dev/null +++ b/dist/scss/keyframes/_beat.scss @@ -0,0 +1,26 @@ +// ============================================================================ +// Beat +// ============================================================================ + +@keyframes animate_beat { + 0%, 90% { transform: scale($animate-scale-base); } + 45% { transform: scale($animate-scale-beat); } +} + +@keyframes animate_beat_fade { + 0%, 100% { + opacity: $animate-opacity-fade; + transform: scale($animate-scale-base); + } + 50% { + opacity: 1; + transform: scale($animate-scale-beat-fade); + } +} + +@keyframes animate_beat_double { + 0%, 100% { transform: scale($animate-scale-base); } + 25% { transform: scale($animate-scale-beat-double-small); } + 50% { transform: scale($animate-scale-beat-double-large); } + 75% { transform: scale($animate-scale-beat-double-small); } +} \ No newline at end of file diff --git a/dist/scss/keyframes/_index.scss b/dist/scss/keyframes/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/maps/_index.scss b/dist/scss/maps/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/maps/_mouse.scss b/dist/scss/maps/_mouse.scss new file mode 100644 index 0000000..8bdc22e --- /dev/null +++ b/dist/scss/maps/_mouse.scss @@ -0,0 +1,96 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Cursors Maps Module +/// =========================================================================== +/// +/// @group Mouse +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + + + +// ============================================================================ +// Maps +// ============================================================================ + +/// +/// Cursor Styles Map +/// --------------------------------------------------------------------------- +/// +/// A map defining standard cursor styles for easy reference and extensibility. +/// Allows for uniform application of cursor styles across elements. +/// +$cursor_styles: ( + + // General + "auto": auto, // Default cursor + "default": default, // The platform-dependent default cursor. Typically an arrow. + "none": none, // No cursor is rendered. + + // Links & Status + "context-menu": context-menu, // Indicates a context menu is available + "help": help, // Can be used for elements that provide additional information + "pointer": pointer, // Indicates a link. Typically an image of a pointing hand. + "progress": progress, // Indicates progress + "wait": wait, // Indicates a waiting state, often used for loading + + // Selection + "cell": cell, // Indicates a cell or selectable item + "crosshair": crosshair, // Useful for precision elements, like in a drawing tool + "text": text, // The text can be selected. Typically the shape of an I-beam. + "vertical-text": vertical-text, // The vertical text can be selected. Typically the shape of a sideways I-beam. + + // Drag & drop + "alias": alias, // Can indicate an alias of/shortcut to something + "copy": copy, // Indicates something can be copied + "move": move, // Something is to be moved. + "no-drop": no-drop, // Indicates that dropping is not allowed + "not-allowed": not-allowed, // Indicates an action is not allowed + "grab": grab, // Something can be grabbed (dragged to be moved). + "grabbing": grabbing, // Something is being grabbed (dragged to be moved). + + // Resizing & Scrolling + "all-scroll": all-scroll, // Indicates scrolling in any direction + "col-resize": col-resize, // Indicates that a column can be resized + "row-resize": row-resize, // Indicates that a row can be resized + "n-resize": n-resize, // thin long arrow pointing towards the top Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. + // In some environments, an equivalent bidirectional resize cursor is shown. For example, n-resize and s-resize are the same as ns-resize. + "e-resize": e-resize, // thin long arrow pointing towards the right + "s-resize": s-resize, // thin long arrow pointing down + "w-resize": w-resize, // thin long arrow pointing towards the left + "ne-resize": ne-resize, // thin long arrow pointing top-right + "nw-resize": nw-resize, // thin long arrow pointing top-left + "se-resize": se-resize, // thin long arrow pointing bottom-right + "sw-resize": sw-resize, + "ew-resize": ew-resize, // thin long arrow pointing left and right Bidirectional resize cursor. + "ns-resize": ns-resize, // thin long arrow pointing up and down + "nesw-resize": nesw-resize, // thin long arrow pointing both to the top-right and bottom-left + "nwse-resize": nwse-resize, + + // Zooming + "zoom-in": zoom-in, // Indicates that something can be zoomed in + "zoom-out": zoom-out, // Indicates that something can be zoomed out + + // Additions start here + "disabled": not-allowed, + "resize-vertical": ns-resize, // For vertical resizing + "resize-horizontal": ew-resize, // For horizontal resizing + "resize-diagonal-1": nwse-resize, // For diagonal resizing (top-left to bottom-right) + "resize-diagonal-2": nesw-resize, // For diagonal resizing (top-right to bottom-left) + +); diff --git a/dist/scss/mixins/_accessibility.scss b/dist/scss/mixins/_accessibility.scss new file mode 100644 index 0000000..a0395b0 --- /dev/null +++ b/dist/scss/mixins/_accessibility.scss @@ -0,0 +1,70 @@ + + + +// ============================================================================ +// Accessibility +// ============================================================================ + +@use "../variables" as *; +@use "../mixins" as *; + +/// Set the progress cursor for elements with `aria-busy="true"`. +[aria-busy='true'] { + cursor: progress; +} + +/// Set the pointer cursor for elements that control other elements, indicated +/// by `aria-controls`. +[aria-controls] { + cursor: pointer; +} + +/// Set the default cursor for disabled or non-interactive elements, indicated +/// by `aria-disabled="true"`. +[aria-disabled='true'] { + cursor: default; +} + + + + + +// Accessibility Enhancements +// Using ARIA attributes to improve cursor semantics for better user experience +// in assistive technologies and for users with disabilities. + +/// Mixin to apply cursor styles based on ARIA attributes. +/// @param {String} $property - The ARIA property (without 'aria-' prefix). +/// @param {String} $value - The value of the ARIA property. +/// @param {String} $cursor - The cursor style to apply. +/// +@mixin cursor_style($property, $value, $cursor) { + [#{'aria-' + $property}='#{ $value }'] { + cursor: $cursor; + } +} + +/// Progress cursor for elements that are updating or being processed. +/// Applied to `aria-busy="true"` elements. +/// @group Accessibility +@include cursor_style('busy', 'true', progress); + +/// Pointer cursor for interactive elements that control other elements. +/// Applied to elements with the `aria-controls` attribute. +/// @group Accessibility +@include cursor_style('controls', '', pointer); + +/// Default cursor for elements that are disabled or non-interactive. +/// Applied to `aria-disabled="true"` elements. +/// @group Accessibility +@include cursor_style('disabled', 'true', default); + +/// Not-allowed cursor for elements in an invalid state. +/// Example use case: form inputs with `aria-invalid="true"`. +/// @group Accessibility +@include cursor_style('invalid', 'true', not-allowed); + +/// Help cursor for elements that provide additional information or guidance. +/// Example use case: elements with `aria-haspopup="true"`. +/// @group Accessibility +@include cursor_style('haspopup', 'true', help); diff --git a/dist/scss/mixins/_boot.scss b/dist/scss/mixins/_boot.scss new file mode 100644 index 0000000..79a9190 --- /dev/null +++ b/dist/scss/mixins/_boot.scss @@ -0,0 +1,51 @@ + + +@use "../variables" as *; +@use "../mixins" as *; + +/// Apply a fade-in animation to the `body` element using the `$boot-fadein-time` variable for the duration. +/// This animation smoothly transitions the opacity of the `body` from `$boot-fadein-opacity-start` to `$boot-fadein-opacity-end`. +/// @group Animation +/// +body { + -webkit-animation: fadein $boot-fadein-time; + -moz-animation: fadein $boot-fadein-time; + -ms-animation: fadein $boot-fadein-time; + -o-animation: fadein $boot-fadein-time; + animation: fadein $boot-fadein-time; +} + +/// Keyframes for the `fadein` animation, transitioning opacity from `$boot-fadein-opacity-start` to `$boot-fadein-opacity-end`. +/// @group Animation +@keyframes fadein { + from { opacity: $boot-fadein-opacity-start; } + to { opacity: $boot-fadein-opacity-end; } +} + +/// Webkit-specific keyframes for the `fadein` animation. +/// @group Animation +@-webkit-keyframes fadein { + from { opacity: $boot-fadein-opacity-start; } + to { opacity: $boot-fadein-opacity-end; } +} + +/// Mozilla-specific keyframes for the `fadein` animation. +/// @group Animation +@-moz-keyframes fadein { + from { opacity: $boot-fadein-opacity-start; } + to { opacity: $boot-fadein-opacity-end; } +} + +/// Microsoft-specific keyframes for the `fadein` animation. +/// @group Animation +@-ms-keyframes fadein { + from { opacity: $boot-fadein-opacity-start; } + to { opacity: $boot-fadein-opacity-end; } +} + +/// Opera-specific keyframes for the `fadein` animation. +/// @group Animation +@-o-keyframes fadein { + from { opacity: $boot-fadein-opacity-start; } + to { opacity: $boot-fadein-opacity-end; } +} \ No newline at end of file diff --git a/dist/scss/mixins/_hover.scss b/dist/scss/mixins/_hover.scss new file mode 100644 index 0000000..658b8cb --- /dev/null +++ b/dist/scss/mixins/_hover.scss @@ -0,0 +1,51 @@ +/// +/// Scales an element when hovered, with a smooth transition. +/// +/// @name hover_scale +/// @param {Number} $scale-factor - The scale factor on hover (default: 1.05). +/// @param {Number|Unit} $duration - The duration of the scale transition (default: 0.3s). +/// @example scss - Usage +/// @include hover_scale(1.1, 0.4s); +/// +@mixin hover_scale($scale-factor: 1.05, $duration: 0.3s) { + transition: transform #{$duration} ease-in-out; + + &:hover { + transform: scale(#{$scale-factor}); + } +} + +/// +/// Applies a scaling effect to an element on hover. +/// +/// @name hover_scale +/// @param {Number} $scale - The scaling factor (default: 1.1). +/// @param {Number|Unit} $duration - The duration of the transition (default: 0.3s). +/// @example scss - Usage +/// @include hover_scale(1.2, 0.5s); +/// +@mixin hover_scale($scale: 1.1, $duration: 0.3s) { + transition: transform $duration ease-in-out; + + &:hover { + transform: scale($scale); + } +} + +/// +/// Applies a smooth transition effect on hover for specified properties. +/// +/// @name hover_transition +/// @param {List} $properties - List of properties to transition (default: all). +/// @param {Number|Unit} $duration - Duration of the transition (default: 0.3s). +/// @param {String} $timing-function - Timing function for the transition (default: ease). +/// @example scss - Usage +/// @include hover_transition(color, background-color, 0.5s, ease-in-out); +/// +@mixin hover_transition($properties: all, $duration: 0.3s, $timing-function: ease) { + transition: #{$properties} #{$duration} #{$timing-function}; + + &:hover { + @content; + } +} \ No newline at end of file diff --git a/dist/scss/mixins/_index.scss b/dist/scss/mixins/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/mixins/_selection.scss b/dist/scss/mixins/_selection.scss new file mode 100644 index 0000000..74d0fba --- /dev/null +++ b/dist/scss/mixins/_selection.scss @@ -0,0 +1,321 @@ + + + +// ============================================================================ +// Selection +// ============================================================================ + + +@use "../variables" as *; +@use "../mixins" as *; + + +@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); \ No newline at end of file diff --git a/dist/scss/mixins/_shape.scss b/dist/scss/mixins/_shape.scss new file mode 100644 index 0000000..52985e3 --- /dev/null +++ b/dist/scss/mixins/_shape.scss @@ -0,0 +1,44 @@ +/// +/// Creates a circular element with a given size. +/// +/// @name circle +/// @param {Number|Unit} $size - The diameter of the circle. +/// @example scss - Usage +/// @include circle(50px); +/// +@mixin circle($size) { + width: $size; + height: $size; + border-radius: 50%; +} + + +/// +/// Creates a triangle using only CSS borders. +/// +/// @name triangle +/// @param {Number|Unit} $size - The size of the triangle. +/// @param {Color} $color - The color of the triangle. +/// @param {String} $direction - The direction the triangle points (default: up). +/// @example scss - Usage +/// @include triangle(10px, #ff5722, down); +/// +@mixin triangle($size, $color, $direction: up) { + width: 0; + height: 0; + border-style: solid; + + @if $direction == up { + border-width: 0 $size $size $size; + border-color: transparent transparent $color transparent; + } @else if $direction == down { + border-width: $size $size 0 $size; + border-color: $color transparent transparent transparent; + } @else if $direction == left { + border-width: $size $size $size 0; + border-color: transparent $color transparent transparent; + } @else if $direction == right { + border-width: $size 0 $size $size; + border-color: transparent transparent transparent $color; + } +} \ No newline at end of file diff --git a/dist/scss/mixins/_touch.scss b/dist/scss/mixins/_touch.scss new file mode 100644 index 0000000..89aa1f8 --- /dev/null +++ b/dist/scss/mixins/_touch.scss @@ -0,0 +1,95 @@ + + +// ============================================================================ +// Touch +// ============================================================================ +@use "../variables" as *; +@use "../mixins" as *; + + +.touch_scroll { + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + + + // Increase Touch Area + // Ensure interactive elements are easy to tap by increasing their size or padding, especially for smaller elements like buttons and links. + + // @mixin touch-target($min-size: 44px) { + // min-width: $min-size; + // min-height: $min-size; + // padding: 10px; + // box-sizing: border-box; // Include padding in the element's size + // } + + // .button, .link { + // @include touch-target; + // // Additional styling for buttons and links + // } + // Visual Feedback for Touch + // Provide visual feedback for touch interactions such as color change, scale, or shadow to indicate an active state. + + + // @mixin touch-feedback { + // transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; + + // &:active { + // background-color: darken($primary-color, 10%); + // transform: scale(0.95); + // box-shadow: 0 5px 15px rgba(0,0,0,0.2); + // } + // } + + // .interactive-element { + // @include touch-feedback; + // // Base styling for the element + // } + // Hover States with Touch Consideration + // Since touch devices generally don't support hover in the traditional sense, ensure that styles relying on hover also have equivalent styles for focus or active states to accommodate touch interactions. + + + // @mixin hover-touch-styles { + // &:hover, &:focus, &:active { + // // Shared styles for hover, focus, and active states + // background-color: lighten($secondary-color, 5%); + // outline: none; // Remove focus outline if not desired + // } + // } + + // .interactive-element { + // @include hover-touch-styles; + // // Base styling + // } + // Disable Zoom on Form Element Focus + // On touch devices, focusing on an input field can cause the viewport to zoom. You can control this behavior with the font-size property, ensuring it's above the threshold that triggers zooming, typically around 16px. + + + // @mixin no-zoom-input { + // font-size: 16px; // Prevent zoom on focus on most mobile browsers + // &:focus { + // outline: none; // Optionally remove the outline + // } + // } + + // input, select, textarea { + // @include no-zoom-input; + // } + // Gestures and Swipes + // For elements that use swipe gestures, ensure that the touch area is large enough and that the visual cues indicate swipeability. + + + // .swipeable-element { + // @include touch-target(60px); // Larger touch target for easier swiping + // // Additional visual cues to indicate swipeability + // } + // Responsive Touch Styles + // Use media queries within your SCSS to apply touch-specific styles only on devices that support touch, keeping desktop styles unaffected. + + + // @media (hover: none) and (pointer: coarse) { + // .button, .link { + // @include touch-target(50px); // Larger touch targets for touch devices + // @include touch-feedback; // Visual feedback on touch + // } + // } \ No newline at end of file diff --git a/dist/scss/mixins/animations/--hover.scss b/dist/scss/mixins/animations/--hover.scss new file mode 100644 index 0000000..5c49969 --- /dev/null +++ b/dist/scss/mixins/animations/--hover.scss @@ -0,0 +1,107 @@ + + +// ============================================================================ +// icon.gl | Animations +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "base" as *; + + +// @mixin hover-animation($transition-duration: 0.3s) { +// transition: all $transition-duration ease; +// &:hover { +// transform: scale(1.1); +// } +// } + +// .hover-grow { +// @include hover-animation(); +// } + +// Hover +// ---------------------------------------------------------------------------- + +@mixin animate_hover($scale: 1.05, $duration: 0.3s, $timing-function: ease-in-out) { + transition: transform $duration $timing-function; + &:hover { + transform: scale($scale); + } +} + +.animate_hover { + @include animate_hover(); +} + + +// Hover Bounce +// ---------------------------------------------------------------------------- + +@mixin animate_hover_bounce($distance: 10px, $duration: 0.3s) { + transition: transform $duration ease-in-out; + &:hover { + animation-name: animate_bounce; + animation-duration: $duration; + animation-fill-mode: forwards; + @keyframes animate_bounce { + 0% { transform: translateY(0); } + 100% { transform: translateY(-$distance); } + } + } +} + +.animate_hover_bounce { + @include animate_hover_bounce(); +} + + + + +// Hover Scale +// ---------------------------------------------------------------------------- + +@mixin animate_hover_scale($scale: 1.1, $duration: 0.3s) { + transition: transform $duration ease-in-out; + &:hover { + transform: scale($scale); + } +} + +.animate_hover_scale { + @include animate_hover_scale(); +} + +// Hover Rotate +// ---------------------------------------------------------------------------- + +@mixin animate_hover_rotate($angle: 15deg, $duration: 0.5s) { + transition: transform $duration ease-in-out; + &:hover { + transform: rotate($angle); + } +} + +.animate_hover_rotate { + @include animate_hover_rotate(); +} + + + + +// Hover Drop Animation: +// ---------------------------------------------------------------------------- + +@mixin animate_hover_drop($distance: 5px, $duration: 0.3s) { + transition: transform $duration ease-in-out; + &:hover { + transform: translateY($distance); + } +} + +.animate_hover_drop { + @include animate_hover_drop(); +} + + + diff --git a/dist/scss/mixins/animations/_base.scss b/dist/scss/mixins/animations/_base.scss new file mode 100644 index 0000000..2a49c75 --- /dev/null +++ b/dist/scss/mixins/animations/_base.scss @@ -0,0 +1,337 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Base Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Base Animation Mixin +/// This mixin provides a base structure for defining animations, allowing +/// customization of the name, duration, timing function, iteration count, +/// delay, and direction. +/// +/// @name animate_base +/// @param {String} $name [none] - The name of the animation. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [$animate_base_timing_function] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// @param {Number|String} $delay [$animate_base_delay] - The delay before the animation starts. +/// @param {String} $direction [$animate_base_direction] - The direction in which the animation is played. +/// +@mixin animate_base( + $name: none, + $duration: $animate_base_duration, + $timing_function: $animate_base_timing_function, + $iteration_count: $animate_base_iteration_count, + $delay: $animate_base_delay, + $direction: $animate_base_direction, +) { + // animation: $name $duration $timing_function $iteration_count $delay $direction; + animation-name: $name; + animation-duration: $duration; + animation-timing-function: $timing_function; + animation-iteration-count: $iteration_count; + animation-delay: $delay; + animation-direction: $direction; +} + +// General Animation Classes +// ---------------------------------------------------------------------------- + +// // Base classes for animations +// [class^="#{$icongl_prefix}animate_"], +// [class*=" #{$icongl_prefix}animate_"] { +// // Base animation properties +// display: inline-block; +// backface-visibility: hidden; +// perspective: 1000px; // Improve 3D animations +// } + +// Reduced Motion Preference +// ---------------------------------------------------------------------------- + +// if agent or operating system prefers reduced motion, disable animations +// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/ +// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion + +/// +/// Reduced Motion +/// This media query applies styles that reduce motion for users who have +/// enabled the "prefers-reduced-motion" setting. Animations and transitions +/// are effectively disabled to improve accessibility. +/// @media (prefers-reduced-motion: reduce) +/// +@media (prefers-reduced-motion: reduce) { + + // Apply to specific animated classes + .animate_beat, + .animate_bounce, + .animate_fade, + .animate_beat_fade, + .animate_flip, + .animate_pulse, + .animate_shake, + .animate_spin, + .animate_spin-pulse { + animation-delay: -1ms; + animation-duration: 1ms; + animation-iteration-count: 1; + transition-delay: 0s; + transition-duration: 0s; + } + + // Global animation disabling + .animation { + animation: none; + transition: none; + } +} + + +@media (prefers-reduced-motion: reduce) { + // Target all elements with a class starting with 'animate_' + [class*="animate_"] { + // Reset basic animation and transition properties + animation: none; + transition: none; + } + + // Alternatively, if animations are tied to a specific attribute + [data-animation] { + // Apply the same reset + animation: none; + transition: none; + } + + // Additional option for targeting any animated element + // This targets any element with animation or transition properties set + /// { + animation: none !important; + transition: none !important; + } +} + + + + + + + +// .animated { +// -webkit-animation-duration: 3s; +// animation-duration: 3s; +// -webkit-animation-fill-mode: both; +// animation-fill-mode: both; +// } + +// .animated-middle { +// -webkit-animation-duration: 1.2s; +// animation-duration: 1.2s; +// -webkit-animation-fill-mode: both; +// animation-fill-mode: both; +// } + +// .animated-quick { +// -webkit-animation-duration: 0.6s; +// animation-duration: 0.6s; +// -webkit-animation-fill-mode: both; +// animation-fill-mode: both; +// } + +// .animated.infinite { +// -webkit-animation-iteration-count: infinite; +// animation-iteration-count: infinite; +// } + + + + +// Animations +// + + + + +/// +/// Hover Opacity Transition Mixin +/// Provides a hover effect that changes the opacity of an element +/// with a transition. +/// @name transition_hover_opacity +/// +@mixin transition_hover_opacity { + @include transition_duration_00; + opacity: 1.00; + :hover { + @include transition_duration_00; + opacity: 0.50; + } +} + +/// +/// Transition Mixin +/// Provides a basic transition effect with a customizable duration. +/// @name transition_duration +/// @param {Number|String} $val - The duration for the transition. +/// +@mixin transition_duration($val) { + transition: all $val ease-in-out; + -moz-transition: all $val ease-in-out; + -ms-transition: all $val ease-in-out; + -o-transition: all $val ease-in-out; + -webkit-transition: all $val ease-in-out; + transition-duration: all $val ease-in-out; + -moz-transition-duration: all $val ease-in-out; + -ms-transition-duration: all $val ease-in-out; + -o-transition-duration: all $val ease-in-out; + -webkit-transition-duration: all $val ease-in-out; +} + + +/// +/// Quick Transition Mixin +/// Provides a quick transition effect with a pre-defined duration. +/// @name transition_duration_00 +/// +@mixin transition_duration_00 { + @include transition_duration($transition_duration_00); + // transition: all $transition_duration_00 ease-in-out; + // -moz-transition: all $transition_duration_00 ease-in-out; + // -ms-transition: all $transition_duration_00 ease-in-out; + // -o-transition: all $transition_duration_00 ease-in-out; + // -webkit-transition: all $transition_duration_00 ease-in-out; + // transition-duration: all $transition_duration_00 ease-in-out; + // -moz-transition-duration: all $transition_duration_00 ease-in-out; + // -ms-transition-duration: all $transition_duration_00 ease-in-out; + // -o-transition-duration: all $transition_duration_00 ease-in-out; + // -webkit-transition-duration: all $transition_duration_00 ease-in-out; +} + +/// +/// Medium Transition Mixin +/// Provides a medium-speed transition effect with a pre-defined duration. +/// @name transition_duration_01 +/// +@mixin transition_duration_01 { + @include transition_duration($transition_duration_01); + // transition: all $transition_duration_01 ease-in-out; + // -moz-transition: all $transition_duration_01 ease-in-out; + // -ms-transition: all $transition_duration_01 ease-in-out; + // -o-transition: all $transition_duration_01 ease-in-out; + // -webkit-transition: all $transition_duration_01 ease-in-out; + // transition-duration: all $transition_duration_01 ease-in-out; + // -moz-transition-duration: all $transition_duration_01 ease-in-out; + // -ms-transition-duration: all $transition_duration_01 ease-in-out; + // -o-transition-duration: all $transition_duration_01 ease-in-out; + // -webkit-transition-duration: all $transition_duration_01 ease-in-out; +} + +/// +/// Long Transition Mixin +/// Provides a longer transition effect with a pre-defined duration. +/// @name transition_duration_02 +/// +@mixin transition_duration_02 { + @include transition_duration($transition_duration_02); + // transition: all $transition_duration_02 ease-in-out; + // -moz-transition: all $transition_duration_02 ease-in-out; + // -ms-transition: all $transition_duration_02 ease-in-out; + // -o-transition: all $transition_duration_02 ease-in-out; + // -webkit-transition: all $transition_duration_02 ease-in-out; + // transition-duration: all $transition_duration_02 ease-in-out; + // -moz-transition-duration: all $transition_duration_02 ease-in-out; + // -ms-transition-duration: all $transition_duration_02 ease-in-out; + // -o-transition-duration: all $transition_duration_02 ease-in-out; + // -webkit-transition-duration: all $transition_duration_02 ease-in-out; +} + +/// +/// Extra Long Transition Mixin +/// Provides an extra-long transition effect with a pre-defined duration. +/// @name transition_duration_03 +/// +@mixin transition_duration_03 { + @include transition_duration($transition_duration_03); + // transition: all $transition_duration_03 ease-in-out; + // -moz-transition: all $transition_duration_03 ease-in-out; + // -ms-transition: all $transition_duration_03 ease-in-out; + // -o-transition: all $transition_duration_03 ease-in-out; + // -webkit-transition: all $transition_duration_03 ease-in-out; + // transition-duration: all $transition_duration_03 ease-in-out; + // -moz-transition-duration: all $transition_duration_03 ease-in-out; + // -ms-transition-duration: all $transition_duration_03 ease-in-out; + // -o-transition-duration: all $transition_duration_03 ease-in-out; + // -webkit-transition-duration: all $transition_duration_03 ease-in-out; +} + +/// +/// Maximum Duration Transition Mixin +/// Provides a maximum duration transition effect with a pre-defined duration. +/// @name transition_duration_04 +/// +@mixin transition_duration_04 { + @include transition_duration($transition_duration_04); + // transition: all $transition_duration_04 ease-in-out; + // -moz-transition: all $transition_duration_04 ease-in-out; + // -ms-transition: all $transition_duration_04 ease-in-out; + // -o-transition: all $transition_duration_04 ease-in-out; + // -webkit-transition: all $transition_duration_04 ease-in-out; + // transition-duration: all $transition_duration_04 ease-in-out; + // -moz-transition-duration: all $transition_duration_04 ease-in-out; + // -ms-transition-duration: all $transition_duration_04 ease-in-out; + // -o-transition-duration: all $transition_duration_04 ease-in-out; + // -webkit-transition-duration: all $transition_duration_04 ease-in-out; +} + + + +/// +/// Generates a keyframe animation for elements. +/// +/// @name keyframe-animation +/// @param {String} $name - The name of the animation. +/// @param {Map} $keyframes - A map of keyframes, where the key is the percentage and the value is the CSS properties. +/// @example scss - Usage +/// @include keyframe-animation('slide-in', (0%: (transform: translateX(-100%)), 100%: (transform: translateX(0)))); +@mixin keyframe_animation( + $name, + $keyframes +) { + @keyframes #{$name} { + @each $percentage, $properties in $keyframes { + #{$percentage} { + @each $property, $value in $properties { + #{$property}: #{$value}; + } + } + } + } +} diff --git a/dist/scss/mixins/animations/_beat.scss b/dist/scss/mixins/animations/_beat.scss new file mode 100644 index 0000000..81c823a --- /dev/null +++ b/dist/scss/mixins/animations/_beat.scss @@ -0,0 +1,119 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Beat Animations Mixin Module +/// =========================================================================== +/// This module provides a set of SCSS mixins for creating various beat +/// animations, including basic beat, beat with fade, and double beat effects. +/// These mixins are designed to scale elements up and down in rhythmic +/// patterns, enhancing the visual dynamics of your designs. +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + + +// ============================================================================ +// Mixins +// ============================================================================ + +/// +/// Beat Animation +/// Creates a beat animation that scales an element up and down rhythmically. +/// +/// @name animate_beat +/// @param {Number} $scale [$animate-scale-beat] - The scale factor for the beat animation. +/// @param {Number|String} $duration [$animate-base-duration] - The duration of the animation. +/// @param {String} $timing_function [$animate-base-timing-function] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate-base-iteration-count] - The number of iterations the animation will run. +/// +@mixin animate_beat( + $scale: $animate-scale-beat, + $duration: $animate-base-duration, + $timing_function: $animate-base-timing-function, + $iteration_count: $animate-base-iteration-count +) { + @include animate_base( + animate_beat, + $duration, + $timing_function, + $iteration_count + ); + @include keyframes_animate_beat($scale); +} + +/// +/// Beat Fade Animation +/// Combines a beat animation with a fade effect, scaling the element while +/// changing its opacity. +/// +/// @name animate_beat_fade +/// @param {Number} $opacity [$animate-opacity-fade] - The opacity level at the start and end of the animation. +/// @param {Number} $scale [$animate-scale-beat-fade] - The scale factor for the beat animation. +/// @param {Number|String} $duration [$animate-base-duration] - The duration of the animation. +/// @param {String} $timing_function [$animate-base-timing-function-fade] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate-base-iteration-count] - The number of iterations the animation will run. +/// +@mixin animate_beat_fade( + $opacity: $animate-opacity-fade, + $scale: $animate-scale-beat-fade, + $duration: $animate-base-duration, + $timing_function: $animate-base-timing-function-fade, + $iteration_count: $animate-base-iteration-count +) { + @include animate_base( + animate_beat_fade, + $duration, + $timing_function, + $iteration_count, + ); + @include keyframes_animate_beat_fade($opacity, $scale); +} + +/// +/// Double Beat Animation +/// Creates a double beat animation where the element scales down, then up, +/// then down again, simulating a heartbeat or pulsating effect. +/// +/// @name animate_beat_double +/// @param {Number} $scale-small [$animate-scale-beat-double-small] - The smaller scale factor for the double beat animation. +/// @param {Number} $scale-large [$animate-scale-beat-double-large] - The larger scale factor for the double beat animation. +/// @param {Number|String} $duration [$animate-base-duration] - The duration of the animation. +/// @param {String} $timing_function [$animate-base-timing-function] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate-base-iteration-count] - The number of iterations the animation will run. +/// +@mixin animate_beat_double( + $scale-small: $animate-scale-beat-double-small, + $scale-large: $animate-scale-beat-double-large, + $duration: $animate-base-duration, + $timing_function: $animate-base-timing-function, + $iteration_count: $animate-base-iteration-count +) { + @include animate_base( + animate_beat_double, + $duration, + $timing_function, + $iteration_count + ); + @include keyframes_animate_beat_double($scale-small, $scale-large); +} diff --git a/dist/scss/mixins/animations/_blink.scss b/dist/scss/mixins/animations/_blink.scss new file mode 100644 index 0000000..8d39120 --- /dev/null +++ b/dist/scss/mixins/animations/_blink.scss @@ -0,0 +1,151 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Blink Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Blink Animation +/// Creates a blink animation where the element alternates between visible and +/// invisible states. +/// +/// @name animate_blink +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the blink animation. +/// @param {String} $timing_function [step-end] - The timing function for the blink animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// @param {Number} $start_opacity [1] - The opacity of the element at the start and end of the animation. +/// @param {Number} $blink_opacity [0] - The opacity of the element during the blink. +/// +@mixin animate_blink( + $duration: $animate_base_duration, + $timing_function: step-end, + $iteration_count: $animate_base_iteration_count, + $start_opacity: 1, + $blink_opacity: 0 +) { + @include animate_base( + animate_blink, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_blink { + 0%, 100% { opacity: $start-opacity; } + 50% { opacity: $blink-opacity; } + } +} + + +/// +/// Rapid Blink Animation +/// Creates a rapid blink animation where the element blinks quickly between +/// visible and invisible states. +/// +/// @name animate_blink_rapid +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the rapid blink animation. +/// @param {String} $timing_function [steps(2, end)] - The timing function for the rapid blink animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_blink_rapid( + $duration: $animate_base_duration_fast, + $timing_function: steps(2, end), + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_blink_rapid, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_blink_rapid { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } + } +} + + +/// +/// Soft Blink Animation +/// Creates a soft blink animation with a smooth transition in and out of +/// visibility. +/// +/// @name animate_blink_soft +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the soft blink animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the soft blink animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_blink_soft( + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_blink_soft, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_blink_soft { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } + } +} + + +/// +/// Alternating Blink Animation +/// Creates an alternating blink animation where the element blinks at regular +/// intervals. +/// +/// @name animate_blink_alternate +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the alternating blink animation. +/// @param {String} $timing_function [linear] - The timing function for the alternating blink animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_blink_alternate( + $duration: $animate_base_duration, + $timing_function: linear, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_blink_alternate, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_blink_alternate { + 0%, 100% { opacity: 1; } + 25%, 75% { opacity: 0; } + } +} diff --git a/dist/scss/mixins/animations/_bounce.scss b/dist/scss/mixins/animations/_bounce.scss new file mode 100644 index 0000000..ac3c0c9 --- /dev/null +++ b/dist/scss/mixins/animations/_bounce.scss @@ -0,0 +1,192 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Bounce Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Bounce Animation +/// Creates a simple bounce animation where the element moves up and down. +/// +/// @name animate_bounce +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation. +/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// @param {Number|String} $bounce_height [-20%] - The height of the bounce. +/// +@mixin animate_bounce( + $duration: $animate_base_duration, + $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1), + $iteration_count: $animate_base_iteration_count, + $bounce_height: -20% +) { + @include animate_base( + animate_bounce, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY($bounce_height); } + } +} + + + +// @keyframes bounce { +// 0%,100% { +// -webkit-transform: translate3d(0,-30px,0); +// transform: translate3d(0,-30px,0); +// } +// 50% { +// -webkit-transform: translate3d(0,-4px,0); +// transform: translate3d(0,-4px,0); +// } +// } + + +/// +/// Extended Bounce Animation +/// Creates an extended bounce animation with multiple stages of scaling +/// and bouncing. +/// +/// @name animate_bounce_extended +/// @param {Number} $start-scale_x [1.1] - Initial scale in the X direction. +/// @param {Number} $start-scale_y [0.9] - Initial scale in the Y direction. +/// @param {Number} $jump_scale_x [0.9] - Scale in the X direction during the jump. +/// @param {Number} $jump_scale_y [1.1] - Scale in the Y direction during the jump. +/// @param {Number|String} $bounce_height [-0.5em] - The height of the bounce. +/// @param {Number} $land_scale_x [1.05] - Scale in the X direction upon landing. +/// @param {Number} $land_scale_y [0.95] - Scale in the Y direction upon landing. +/// @param {Number|String} $rebound_height [-0.125em] - The height of the rebound. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation. +/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_bounce_extended( + $start-scale_x: 1.1, + $start-scale_y: 0.9, + $jump_scale_x: 0.9, + $jump_scale_y: 1.1, + $bounce_height: -0.5em, + $land_scale_x: 1.05, + $land_scale_y: 0.95, + $rebound_height: -0.125em, + $duration: $animate_base_duration, + $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1), + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_bounce, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_bounce { + 0% { transform: scale(1,1) translateY(0); } + 10% { transform: scale($start-scale_x, $start-scale_y) translateY(0); } + 30% { transform: scale($jump_scale_x, $jump_scale_y) translateY($bounce_height); } + 50% { transform: scale($land_scale_x, $land_scale_y) translateY(0); } + 57% { transform: scale(1,1) translateY($rebound_height); } + 64% { transform: scale(1,1) translateY(0); } + 100% { transform: scale(1,1) translateY(0); } + } +} + + + +/// +/// Bounce with Rotation Animation +/// Creates a bounce animation that includes a rotation as the element moves +/// up and down. +/// +/// @name animate_bounce_rotate +/// @param {Number|String} $rotation_angle [360deg] - The angle of rotation during the bounce. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation. +/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_bounce_rotate( + $rotation_angle: 360deg, + $duration: $animate_base_duration, + $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1), + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_bounce_rotate, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_bounce_rotate { + 0%, 100% { transform: translateY(0) rotate(0); } + 50% { transform: translateY(-20%) rotate($rotation_angle); } + } +} + + + +/// +/// Multi-Directional Bounce Animation +/// Creates a bounce animation that moves the element in multiple +/// directions (X and Y). +/// +/// @name animate_bounce_multi +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation. +/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// @param {Number|String} $bounce_x [-10%] - The distance the element moves along the X-axis during the bounce. +/// @param {Number|String} $bounce_y [-20%] - The distance the element moves along the Y-axis during the bounce. +/// +@mixin animate_bounce_multi( + $duration: $animate_base_duration, + $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1), + $iteration_count: $animate_base_iteration_count, + $bounce_x: -10%, + $bounce_y: -20% +) { + @include animate_base( + animate_bounce_multi, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_bounce_multi { + 0%, 100% { transform: translate(0, 0); } + 25% { transform: translate($bounce_x, 0); } + 50% { transform: translate(0, $bounce_y); } + 75% { transform: translate($bounce_x, 0); } + } +} diff --git a/dist/scss/mixins/animations/_elastic.scss b/dist/scss/mixins/animations/_elastic.scss new file mode 100644 index 0000000..484a99d --- /dev/null +++ b/dist/scss/mixins/animations/_elastic.scss @@ -0,0 +1,65 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Elastic Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Elastic Animation +/// Creates an elastic animation where the element scales up and down in a spring-like motion. +/// @name animate_elastic +/// @param {Number} $scale-start [0.5] - The starting scale of the element. +/// @param {Number} $scale-end [1.25] - The scale of the element at the midpoint of the animation. +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the elastic animation. +/// @param {String} $timing_function [cubic-bezier(0.68, -0.55, 0.27, 1.55)] - The timing function for the elastic animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_elastic( + $scale-start: 0.5, + $scale-end: 1.25, + $duration: $animate_base_duration_slow, + $timing_function: cubic-bezier(0.68, -0.55, 0.27, 1.55), + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_elastic, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_elastic { + 0%, 100% { transform: scale($scale-start); } + 50% { transform: scale($scale-end); } + } +} diff --git a/dist/scss/mixins/animations/_fade.scss b/dist/scss/mixins/animations/_fade.scss new file mode 100644 index 0000000..0ccdbb6 --- /dev/null +++ b/dist/scss/mixins/animations/_fade.scss @@ -0,0 +1,154 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Fade Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +@mixin animate_fade( + $start_opacity: 1, + $mid_opacity: 0, + $end_opacity: 1, + $duration: $animate_base_duration, + $timing_function: cubic-bezier(.4, 0, .6, 1), + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_fade, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_fade { + 0%, 100% { opacity: $start-opacity; } + 50% { opacity: $mid-opacity; } + } +} + + +@mixin animate_fade_in( + $start_opacity: 0, + $end_opacity: 1, + $duration: $animate_base_duration, + $timing_function: ease-in +) { + @include animate_base( + animate_fade_in, + $duration, + $timing_function, + 1 + ); + @keyframes animate_fade_in { + from { opacity: $start-opacity; } + to { opacity: $end-opacity; } + } +} + + +// @keyframes fadeIn { +// from { +// opacity: 0; +// transform: translate3d(0, -100%, 0); +// } + +// to { +// opacity: 1; +// transform: none; +// } +// } + +// $boot-fadein-time: 2s; +// $boot-fadein-opacity-start: 0; +// $boot-fadein-opacity-end: 1; + +// .fade { +// @include transition($transition-fade); + +// &:not(.show) { +// opacity: 0; +// } +// } + + +// Fade Out Animation +// ---------------------------------------------------------------------------- + +@mixin animate_fade_out( + $start_opacity: 1, + $end_opacity: 0, + $duration: $animate_base_duration, + $timing_function: ease-out +) { + @include animate_base( + animate_fade_in, + $duration, + $timing_function, + 1 + ); + @keyframes animate_fade_out { + from { opacity: $start-opacity; } + to { opacity: $end-opacity; } + } +} + + +// @keyframes fadeOut { +// from { +// opacity: 1; +// } + +// to { +// transform: translate3d(0, -100%, 0); +// opacity: 0; +// } +// } + + +@mixin animate_fade_gradual( + $start_opacity: 1, + $end_opacity: 0.5, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_fade_gradual, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_fade_gradual { + 0%, 100% { opacity: $start-opacity; } + 50% { opacity: $end-opacity; } + } +} diff --git a/dist/scss/mixins/animations/_flash.scss b/dist/scss/mixins/animations/_flash.scss new file mode 100644 index 0000000..8858ed2 --- /dev/null +++ b/dist/scss/mixins/animations/_flash.scss @@ -0,0 +1,177 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Flash Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Flash Animation +/// Creates a flash animation that transitions between different opacity +/// levels. +/// +/// @name animate_flash +/// @param {Number} $start_opacity [1] - The initial opacity of the element. +/// @param {Number} $mid_opacity [0] - The opacity at the midpoint of the animation. +/// @param {Number} $end_opacity [1] - The final opacity of the element. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run. +/// +@mixin animate_flash( + $start_opacity: 1, + $mid_opacity: 0, + $end_opacity: 1, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_flash, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_flash { + 0%, 100% { opacity: $start-opacity; } + 50% { opacity: $mid-opacity; } + } +} + + +/// +/// Flash Fade In and Out +/// Creates a flash fade effect that smoothly transitions in and out of view. +/// +/// @name animate_flash_fade +/// @param {Number|String} $duration [2s] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation. +/// +@mixin animate_flash_fade( + $duration: 2s, + $timing_function: ease-in-out +) { + @include animate_base( + animate_flash_fade, + $duration, + $timing_function, infinite + ); + @keyframes animate_flash_fade { + 0%, 100% { opacity: 0; } + 50% { opacity: 1; } + } +} + + +/// +/// Strobe Flash Animation +/// Creates a strobe flash effect with a configurable frequency. +/// +/// @name animate_flash_strobe +/// @param {Number|String} $frequency [0.1s] - The frequency of the strobe effect. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [steps(1, end)] - The timing function to use for the animation. +/// +@mixin animate_flash_strobe( + $frequency: 0.1s, + $duration: $animate_base_duration, + $timing_function: steps(1, end) +) { + @include animate_base( + animate_flash_strobe, + $duration, + $timing_function, + infinite + ); + @keyframes animate_flash_strobe { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } + } + animation-duration: $frequency; +} + + +/// +/// Slow Fade Flash +/// --------------------------------------------------------------------------- +/// Creates a slow fading flash effect, fading in and out of view. +/// +/// @name animate_flash_fade_slow +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation. +/// +@mixin animate_flash_fade_slow( + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out +) { + @include animate_base( + animate_flash_fade_slow, + $duration, + $timing_function, + infinite + ); + @keyframes animate_flash_fade_slow { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } + } +} + + + + + +// @-webkit-keyframes flash { +// from, 50%, 100% { +// opacity: 1; +// } + +// 25%, 75% { +// opacity: 0; +// } +// } + +// @keyframes flash { +// from, 50%, 100% { +// opacity: 1; +// } + +// 25%, 75% { +// opacity: 0; +// } +// } + +// .flash { +// -webkit-animation-name: flash; +// animation-name: flash; +// } + \ No newline at end of file diff --git a/dist/scss/mixins/animations/_flip.scss b/dist/scss/mixins/animations/_flip.scss new file mode 100644 index 0000000..0f28029 --- /dev/null +++ b/dist/scss/mixins/animations/_flip.scss @@ -0,0 +1,72 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Flip Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Flip Animation +/// Creates a flip animation that rotates an element around a 3D axis. +/// +/// @name animate_flip +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the flip animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the flip animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// @param {Number} $rotate_x [0] - The X-axis rotation factor. +/// @param {Number} $rotate_y [1] - The Y-axis rotation factor. +/// @param {Number} $rotate_z [0] - The Z-axis rotation factor. +/// @param {Number|String} $rotate_start-angle [0] - The starting angle of rotation. +/// @param {Number|String} $rotate_end-angle [360deg] - The ending angle of rotation. +/// +@mixin animate_flip( + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count, + $rotate_x: 0, + $rotate_y: 1, + $rotate_z: 0, + $rotate_start-angle: 0, + $rotate_end-angle: 360deg +) { + @include animate_base( + animate_flip, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_flip { + 0% { transform: rotate3d($rotate_x, $rotate_y, $rotate_z, $rotate_start-angle); } + 100% { transform: rotate3d($rotate_x, $rotate_y, $rotate_z, $rotate_end-angle); } + } +} diff --git a/dist/scss/mixins/animations/_float.scss b/dist/scss/mixins/animations/_float.scss new file mode 100644 index 0000000..a014ad0 --- /dev/null +++ b/dist/scss/mixins/animations/_float.scss @@ -0,0 +1,126 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Float Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Float Animation +/// Creates a floating animation where the element moves up and down smoothly. +/// +/// @name animate_float +/// @param {Number|String} $start_position [0] - The starting position of the float animation. +/// @param {Number|String} $mid_position [10px] - The mid-position of the float animation. +/// @param {Number|String} $end_position [0] - The ending position of the float animation. +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the float animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the float animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_float( + $start_position: 0, + $mid_position: 10px, + $end_position: 0, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_float, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_float { + 0%, 100% { transform: translateY($start_position); } + 50% { transform: translateY($mid_position); } + } +} + +/// +/// Float with Horizontal Movement +/// Creates a floating animation where the element moves horizontally. +/// +/// @name animate_float_horizontal +/// @param {Number|String} $horizontal-distance [10px] - The distance the element moves horizontally. +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the float animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the float animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_float_horizontal( + $horizontal-distance: 10px, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_float_horizontal, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_float_horizontal { + 0%, 100% { transform: translateX(0); } + 50% { transform: translateX($horizontal-distance); } + } +} + + +/// +/// Float with Rotation +/// Creates a floating animation where the element moves up and down with a +/// rotation. +/// +/// @name animate_float_rotate +/// @param {Number|String} $rotation_angle [15deg] - The angle of rotation during the float animation. +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the float animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the float animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_float_rotate( + $rotation_angle: 15deg, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_float_rotate, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_float_rotate { + 0%, 100% { transform: translateY(0) rotate(0); } + 50% { transform: translateY(-10px) rotate($rotation_angle); } + } +} diff --git a/dist/scss/mixins/animations/_glow.scss b/dist/scss/mixins/animations/_glow.scss new file mode 100644 index 0000000..d6360fa --- /dev/null +++ b/dist/scss/mixins/animations/_glow.scss @@ -0,0 +1,179 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Glow Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "sass:math"; +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + + +/// +/// Glow Animation +/// Creates a glowing effect by animating the box shadow of the element. +/// @name animate_glow +/// @param {Color} $color [$animate_base_color_glow_01] - The color of the glow. +/// @param {Number|String} $start-shadow_size [5px] - The initial size of the shadow. +/// @param {Number|String} $end-shadow_size [15px] - The maximum size of the shadow. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the glow animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the glow animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_glow( + $color: $animate_base_color_glow_01, + $start-shadow_size: 5px, + $end-shadow_size: 15px, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_glow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_glow { + 0%, 100% { box-shadow: 0 0 $start-shadow-size 0 $color; } + 50% { box-shadow: 0 0 $end-shadow-size 5px $color; } + } +} + + +// Pulse Glow Animation +// ---------------------------------------------------------------------------- + +/// +/// Pulse Glow Animation +/// Creates a pulsing glow effect where the glow size changes over time. +/// @name animate_glow_pulse +/// @param {Color} $color [$animate_base_color_glow_01] - The color of the glow. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the glow animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the glow animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_glow_pulse( + $color: $animate_base_color_glow_01, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_glow_pulse, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_glow_pulse { + 0%, 100% { box-shadow: 0 0 10px -5px $color; } + 50% { box-shadow: 0 0 20px 0 $color; } + } +} + + +// Soft Glow Animation +// ---------------------------------------------------------------------------- + +/// +/// Soft Glow Animation +/// Creates a soft glow effect with a slower and subtler animation. +/// @name animate_glow_soft +/// @param {Color} $color [$animate_base_color_glow_01] - The color of the glow. +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the glow animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the glow animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_glow_soft( + $color: $animate_base_color_glow_01, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_glow_soft, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_glow_soft { + 0%, 100% { box-shadow: 0 0 10px 0 rgba($color, 0.5); } + 50% { box-shadow: 0 0 20px 5px rgba($color, 0.8); } + } +} + +.animate_glow_soft { + @include animate_glow_soft($animate_base_color_glow_01); +} + +// Multi-Color Glow Animation +// ---------------------------------------------------------------------------- + + +/// +/// Multi-Color Glow Animation +/// Creates a glow animation that cycles through multiple colors. +/// @name animate_glow_multicolor +/// @param {List} $colors [($animate_base_color_glow_01, $animate_base_color_glow_02, $animate_base_color_glow_03)] - A list of colors for the glow animation. +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the glow animation. +/// @param {String} $timing_function [linear] - The timing function for the glow animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_glow_multicolor( + $colors: ( + $animate_base_color_glow_01, + $animate_base_color_glow_02, + $animate_base_color_glow_03, + ), + $duration: $animate_base_duration_slow, + $timing_function: linear, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_glow_multicolor, + $duration, + $timing_function, + $iteration_count, + ); + $total_colors: length($colors); + @keyframes animate_glow_multicolor { + @for $i from 1 through $total_colors { + // #{percentage(($i - 1) / $total_colors)}, + // #{percentage($i / $total_colors)} { + #{percentage(math.div(($i - 1), $total_colors))}, + #{percentage(math.div($i, $total-colors))} { + box-shadow: 0 0 10px 5px nth($colors, $i); + } + } + } +} diff --git a/dist/scss/mixins/animations/_heartbeat.scss b/dist/scss/mixins/animations/_heartbeat.scss new file mode 100644 index 0000000..c25fcdd --- /dev/null +++ b/dist/scss/mixins/animations/_heartbeat.scss @@ -0,0 +1,175 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Heartbeat Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Heartbeat Animation +/// Creates a heartbeat animation where the element scales up and down. +/// +/// @name animate_heartbeat +/// @param {Number} $scale_min [0.9] - The minimum scale of the heartbeat. +/// @param {Number} $scale_max [1.1] - The maximum scale of the heartbeat. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the heartbeat animation. +/// @param {String} $timing_function [linear] - The timing function for the heartbeat animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_heartbeat( + $scale_min: 0.9, + $scale_max: 1.1, + $duration: $animate_base_duration, + $timing_function: linear, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_heartbeat, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_heartbeat { + 0%, 100% { transform: scale(1); } + 25% { transform: scale($scale_min); } + 50% { transform: scale($scale_max); } + 75% { transform: scale($scale_min); } + } +} + + + +/// +/// Rapid Heartbeat Animation +/// Creates a rapid heartbeat animation with faster scaling transitions. +/// +/// @name animate_heartbeat_fast +/// @param {Number} $scale_min [0.85] - The minimum scale of the heartbeat. +/// @param {Number} $scale_max [1.15] - The maximum scale of the heartbeat. +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the heartbeat animation. +/// @param {String} $timing_function [linear] - The timing function for the heartbeat animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_heartbeat_fast( + $scale_min: 0.85, + $scale_max: 1.15, + $duration: $animate_base_duration_fast, + $timing_function: linear, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_heartbeat_fast, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_heartbeat_fast { + 0%, 100% { transform: scale(1); } + 14%, 86% { transform: scale($scale_min); } + 28%, 72% { transform: scale($scale_max); } + 42%, 58% { transform: scale($scale_min); } + } +} + + +/// +/// Slow Heartbeat Animation +/// Creates a slow heartbeat animation with more gradual scaling transitions. +/// @name animate_heartbeat_slow +/// @param {Number} $scale_min [0.95] - The minimum scale of the heartbeat. +/// @param {Number} $scale_max [1.05] - The maximum scale of the heartbeat. +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the heartbeat animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the heartbeat animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_heartbeat_slow( + $scale_min: 0.95, + $scale_max: 1.05, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_heartbeat_slow, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_heartbeat_slow { + 0%, 100% { transform: scale(1); } + 25% { transform: scale($scale_min); } + 50% { transform: scale($scale_max); } + 75% { transform: scale($scale_min); } + } +} + + + +/// +/// Heartbeat with Color Change +/// Creates a heartbeat animation that includes a color transition. +/// @name animate_heartbeat_color +/// @param {Number} $scale_min [0.9] - The minimum scale of the heartbeat. +/// @param {Number} $scale_max [1.1] - The maximum scale of the heartbeat. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the heartbeat animation. +/// @param {String} $timing_function [linear] - The timing function for the heartbeat animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// @param {Color} $color_start [$animate_base_color_start] - The starting color of the element. +/// @param {Color} $color_end [$animate_base_color_end] - The ending color of the element. +/// +@mixin animate_heartbeat_color( + $scale_min: 0.9, + $scale_max: 1.1, + $duration: $animate_base_duration, + $timing_function: linear, + $iteration_count: $animate_base_iteration_count, + $color_start: $animate_base_color_start, + $color_end: $animate_base_color_end, +) { + @include animate_base( + animate_heartbeat_color, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_heartbeat_color { + 0%, 100% { + transform: scale(1); + color: $color_start; + } + 50% { + transform: scale($scale_max); + color: $color_end; + } + } +} diff --git a/dist/scss/mixins/animations/_hinge.scss b/dist/scss/mixins/animations/_hinge.scss new file mode 100644 index 0000000..9fee033 --- /dev/null +++ b/dist/scss/mixins/animations/_hinge.scss @@ -0,0 +1,119 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Hinge Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + + +// .animated.hinge { +// -webkit-animation-duration: 2s; +// animation-duration: 2s; +// } + + +// @-webkit-keyframes hinge { +// 0% { +// -webkit-transform-origin: top left; +// transform-origin: top left; +// -webkit-animation-timing-function: ease-in-out; +// animation-timing-function: ease-in-out; +// } + +// 20%, 60% { +// -webkit-transform: rotate3d(0, 0, 1, 80deg); +// transform: rotate3d(0, 0, 1, 80deg); +// -webkit-transform-origin: top left; +// transform-origin: top left; +// -webkit-animation-timing-function: ease-in-out; +// animation-timing-function: ease-in-out; +// } + +// 40%, 80% { +// -webkit-transform: rotate3d(0, 0, 1, 60deg); +// transform: rotate3d(0, 0, 1, 60deg); +// -webkit-transform-origin: top left; +// transform-origin: top left; +// -webkit-animation-timing-function: ease-in-out; +// animation-timing-function: ease-in-out; +// opacity: 1; +// } + +// 100% { +// -webkit-transform: translate3d(0, 700px, 0); +// transform: translate3d(0, 700px, 0); +// opacity: 0; +// } +// } + +// @keyframes hinge { +// 0% { +// -webkit-transform-origin: top left; +// transform-origin: top left; +// -webkit-animation-timing-function: ease-in-out; +// animation-timing-function: ease-in-out; +// } + +// 20%, 60% { +// -webkit-transform: rotate3d(0, 0, 1, 80deg); +// transform: rotate3d(0, 0, 1, 80deg); +// -webkit-transform-origin: top left; +// transform-origin: top left; +// -webkit-animation-timing-function: ease-in-out; +// animation-timing-function: ease-in-out; +// } + +// 40%, 80% { +// -webkit-transform: rotate3d(0, 0, 1, 60deg); +// transform: rotate3d(0, 0, 1, 60deg); +// -webkit-transform-origin: top left; +// transform-origin: top left; +// -webkit-animation-timing-function: ease-in-out; +// animation-timing-function: ease-in-out; +// opacity: 1; +// } + +// 100% { +// -webkit-transform: translate3d(0, 700px, 0); +// transform: translate3d(0, 700px, 0); +// opacity: 0; +// } +// } + +// .hinge { +// -webkit-animation-name: hinge; +// animation-name: hinge; +// } + \ No newline at end of file diff --git a/dist/scss/mixins/animations/_index.scss b/dist/scss/mixins/animations/_index.scss new file mode 100644 index 0000000..f910dd5 --- /dev/null +++ b/dist/scss/mixins/animations/_index.scss @@ -0,0 +1,37 @@ +// ============================================================================ +// StyleScape | Animations | Index +// ============================================================================ + +@forward "base"; +@forward "beat"; +@forward "blink"; +@forward "bounce"; +@forward "elastic"; +@forward "fade"; +@forward "flash"; +@forward "flip"; +@forward "float"; +@forward "glow"; +@forward "heartbeat"; +@forward "hinge"; +@forward "jello"; +@forward "jiggle"; +@forward "lightspeed"; +@forward "nod"; +@forward "pop"; +@forward "pulse"; +@forward "ripple"; +@forward "roll"; +@forward "rotate"; +@forward "rubber"; +@forward "scale"; +@forward "shake"; +@forward "slide"; +@forward "spin"; +@forward "sway"; +@forward "swing"; +@forward "tada"; +@forward "twist"; +@forward "wave"; +@forward "wobble"; +@forward "zoom"; diff --git a/dist/scss/mixins/animations/_jello.scss b/dist/scss/mixins/animations/_jello.scss new file mode 100644 index 0000000..cf9eba2 --- /dev/null +++ b/dist/scss/mixins/animations/_jello.scss @@ -0,0 +1,129 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Jello Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + +// @-webkit-keyframes jello { +// from, 11.1%, 100% { +// -webkit-transform: none; +// transform: none; +// } + +// 22.2% { +// -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); +// transform: skewX(-12.5deg) skewY(-12.5deg); +// } + +// 33.3% { +// -webkit-transform: skewX(6.25deg) skewY(6.25deg); +// transform: skewX(6.25deg) skewY(6.25deg); +// } + +// 44.4% { +// -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); +// transform: skewX(-3.125deg) skewY(-3.125deg); +// } + +// 55.5% { +// -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); +// transform: skewX(1.5625deg) skewY(1.5625deg); +// } + +// 66.6% { +// -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); +// transform: skewX(-0.78125deg) skewY(-0.78125deg); +// } + +// 77.7% { +// -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); +// transform: skewX(0.390625deg) skewY(0.390625deg); +// } + +// 88.8% { +// -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); +// transform: skewX(-0.1953125deg) skewY(-0.1953125deg); +// } +// } + +// @keyframes jello { +// from, 11.1%, 100% { +// -webkit-transform: none; +// transform: none; +// } + +// 22.2% { +// -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); +// transform: skewX(-12.5deg) skewY(-12.5deg); +// } + +// 33.3% { +// -webkit-transform: skewX(6.25deg) skewY(6.25deg); +// transform: skewX(6.25deg) skewY(6.25deg); +// } + +// 44.4% { +// -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); +// transform: skewX(-3.125deg) skewY(-3.125deg); +// } + +// 55.5% { +// -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); +// transform: skewX(1.5625deg) skewY(1.5625deg); +// } + +// 66.6% { +// -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); +// transform: skewX(-0.78125deg) skewY(-0.78125deg); +// } + +// 77.7% { +// -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); +// transform: skewX(0.390625deg) skewY(0.390625deg); +// } + +// 88.8% { +// -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); +// transform: skewX(-0.1953125deg) skewY(-0.1953125deg); +// } +// } + +// .jello { +// -webkit-animation-name: jello; +// animation-name: jello; +// -webkit-transform-origin: center; +// transform-origin: center; +// } \ No newline at end of file diff --git a/dist/scss/mixins/animations/_jiggle.scss b/dist/scss/mixins/animations/_jiggle.scss new file mode 100644 index 0000000..7ad51e9 --- /dev/null +++ b/dist/scss/mixins/animations/_jiggle.scss @@ -0,0 +1,163 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Jiggle Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Jiggle Animation +/// Creates a horizontal jiggle animation where the element moves left and +/// right. +/// +/// @name animate_jiggle +/// @param {Number|String} $amplitude [5px] - The distance the element moves during the jiggle. +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the jiggle animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the jiggle animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_jiggle( + $amplitude: 5px, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_jiggle, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_jiggle { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-$amplitude); } + 50% { transform: translateX($amplitude); } + 75% { transform: translateX(-$amplitude); } + } +} + + + +/// +/// Vertical Jiggle Animation +/// Creates a vertical jiggle animation where the element moves up and down. +/// +/// @name animate_jiggle_vertical +/// @param {Number|String} $amplitude [5px] - The distance the element moves during the jiggle. +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the jiggle animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the jiggle animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_jiggle_vertical( + $amplitude: 5px, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_jiggle_vertical, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_jiggle_vertical { + 0%, 100% { transform: translateY(0); } + 25% { transform: translateY(-$amplitude); } + 50% { transform: translateY($amplitude); } + 75% { transform: translateY(-$amplitude); } + } +} + + + +/// +/// Multi-Directional Jiggle Animation +/// Creates a jiggle animation where the element moves in both X and Y +/// directions. +/// +/// @name animate_jiggle_multi +/// @param {Number|String} $amplitude [5px] - The distance the element moves during the jiggle. +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the jiggle animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the jiggle animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_jiggle_multi( + $amplitude: 5px, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_jiggle_multi, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_jiggle_multi { + 0%, 100% { transform: translate(0, 0); } + 25% { transform: translate(-$amplitude, $amplitude); } + 50% { transform: translate($amplitude, -$amplitude); } + 75% { transform: translate(-$amplitude, $amplitude); } + } +} + + +/// +/// Gentle Jiggle Animation +/// Creates a gentler jiggle animation with slower transitions. +/// +/// @name animate_jiggle_slow +/// @param {Number|String} $amplitude [3px] - The distance the element moves during the jiggle. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the jiggle animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the jiggle animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_jiggle_slow( + $amplitude: 3px, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_jiggle_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_jiggle_slow { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-$amplitude); } + 50% { transform: translateX($amplitude); } + 75% { transform: translateX(-$amplitude); } + } +} diff --git a/dist/scss/mixins/animations/_lightspeed.scss b/dist/scss/mixins/animations/_lightspeed.scss new file mode 100644 index 0000000..fa0b933 --- /dev/null +++ b/dist/scss/mixins/animations/_lightspeed.scss @@ -0,0 +1,130 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Lightspeed Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + + +// @-webkit-keyframes lightSpeedIn { +// from { +// -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); +// transform: translate3d(100%, 0, 0) skewX(-30deg); +// opacity: 0; +// } + +// 60% { +// -webkit-transform: skewX(20deg); +// transform: skewX(20deg); +// opacity: 1; +// } + +// 80% { +// -webkit-transform: skewX(-5deg); +// transform: skewX(-5deg); +// opacity: 1; +// } + +// 100% { +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// @keyframes lightSpeedIn { +// from { +// -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); +// transform: translate3d(100%, 0, 0) skewX(-30deg); +// opacity: 0; +// } + +// 60% { +// -webkit-transform: skewX(20deg); +// transform: skewX(20deg); +// opacity: 1; +// } + +// 80% { +// -webkit-transform: skewX(-5deg); +// transform: skewX(-5deg); +// opacity: 1; +// } + +// 100% { +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// .lightSpeedIn { +// -webkit-animation-name: lightSpeedIn; +// animation-name: lightSpeedIn; +// -webkit-animation-timing-function: ease-out; +// animation-timing-function: ease-out; +// } + +// @-webkit-keyframes lightSpeedOut { +// from { +// opacity: 1; +// } + +// 100% { +// -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); +// transform: translate3d(100%, 0, 0) skewX(30deg); +// opacity: 0; +// } +// } + +// @keyframes lightSpeedOut { +// from { +// opacity: 1; +// } + +// 100% { +// -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); +// transform: translate3d(100%, 0, 0) skewX(30deg); +// opacity: 0; +// } +// } + +// .lightSpeedOut { +// -webkit-animation-name: lightSpeedOut; +// animation-name: lightSpeedOut; +// -webkit-animation-timing-function: ease-in; +// animation-timing-function: ease-in; +// } + \ No newline at end of file diff --git a/dist/scss/mixins/animations/_nod.scss b/dist/scss/mixins/animations/_nod.scss new file mode 100644 index 0000000..cac0657 --- /dev/null +++ b/dist/scss/mixins/animations/_nod.scss @@ -0,0 +1,161 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Nod Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Nod Animation +/// Creates a nodding animation where the element rotates back and forth on the X-axis. +/// @name animate_nod +/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the nod animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the nod animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_nod( + $angle: 10deg, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_nod, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_nod { + 0%, 100% { transform: rotateX(0deg); } + 50% { transform: rotateX($angle); } + } +} + + + + +// Slow Nod Animation +// ---------------------------------------------------------------------------- + +/// +/// Slow Nod Animation +/// Creates a slower nodding animation with a more gradual movement on the X-axis. +/// @name animate_nod_slow +/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod. +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the nod animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the nod animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_nod_slow( + $angle: 10deg, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_nod_slow, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_nod_slow { + 0%, 100% { transform: rotateX(0deg); } + 50% { transform: rotateX($angle); } + } +} + + + +// Nod with Bounce +// ---------------------------------------------------------------------------- + +/// +/// Nod with Bounce +/// Creates a nodding animation combined with a bounce effect. +/// @name animate_nod_bounce +/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod. +/// @param {Number|String} $bounce-height [5px] - The height of the bounce during the nod. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the nod animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the nod animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_nod_bounce( + $angle: 10deg, + $bounce-height: 5px, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_nod_bounce, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_nod_bounce { + 0%, 100% { transform: rotateX(0deg) translateY(0); } + 50% { transform: rotateX($angle) translateY(-$bounce-height); } + } +} + + +/// +/// Continuous Nod +/// Creates a continuous nodding animation where the element rotates back and +/// forth without stopping. +/// +/// @name animate_nod_continuous +/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod. +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the nod animation. +/// @param {String} $timing_function [linear] - The timing function for the nod animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_nod_continuous( + $angle: 10deg, + $duration: $animate_base_duration_fast, + $timing_function: linear, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_nod_continuous, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_nod_continuous { + 0% { transform: rotateX(0deg); } + 25%, 75% { transform: rotateX($angle); } + 50%, 100% { transform: rotateX(-$angle); } + } +} diff --git a/dist/scss/mixins/animations/_pop.scss b/dist/scss/mixins/animations/_pop.scss new file mode 100644 index 0000000..3f9c3cc --- /dev/null +++ b/dist/scss/mixins/animations/_pop.scss @@ -0,0 +1,150 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Pop Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Pop Animation +/// Creates a pop animation where the element scales up and then back down. +/// @name animate_pop +/// @param {Number} $scale [1.2] - The scale factor for the pop effect. +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pop animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation. +/// +@mixin animate_pop( + $scale: 1.2, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out +) { + @include animate_base( + animate_pop, + $duration, + $timing_function, + 1, + ); + @keyframes animate_pop { + 0%, 100% { transform: scale(1); } + 50% { transform: scale($scale); } + } +} + + +// Rapid Pop Animation +// ---------------------------------------------------------------------------- + +/// +/// Rapid Pop Animation +/// Creates a rapid pop animation with a quick scaling effect. +/// @name animate_pop_fast +/// @param {Number} $scale [1.2] - The scale factor for the pop effect. +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pop animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation. +/// +@mixin animate_pop_fast( + $scale: 1.2, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out +) { + @include animate_base( + animate_pop_fast, + $duration, + $timing_function, + 1, + ); + @keyframes animate_pop_fast { + 0%, 100% { transform: scale(1); } + 50% { transform: scale($scale); } + } +} + + +// Gentle Pop Animation +// ---------------------------------------------------------------------------- + +/// +/// Gentle Pop Animation +/// Creates a gentler pop animation with a slower scaling effect. +/// @name animate_pop_slow +/// @param {Number} $scale [1.1] - The scale factor for the pop effect. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the pop animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation. +/// +@mixin animate_pop_slow( + $scale: 1.1, + $duration: $animate_base_duration, + $timing_function: ease-in-out +) { + @include animate_base( + animate_pop_slow, + $duration, + $timing_function, + 1, +); + @keyframes animate_pop_slow { + 0%, 100% { transform: scale(1); } + 50% { transform: scale($scale); } + } +} + + +// Pop with Rotation +// ---------------------------------------------------------------------------- + +/// +/// Pop with Rotation +/// Creates a pop animation combined with a rotation effect. +/// @name animate_pop_rotate +/// @param {Number} $scale [1.2] - The scale factor for the pop effect. +/// @param {Number|String} $rotation_angle [10deg] - The rotation angle during the pop effect. +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pop animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation. +/// +@mixin animate_pop_rotate( + $scale: 1.2, + $rotation_angle: 10deg, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out +) { + @include animate_base( + animate_pop_rotate, + $duration, + $timing_function, + 1, + ); + @keyframes animate_pop_rotate { + 0%, 100% { transform: scale(1) rotate(0); } + 50% { transform: scale($scale) rotate($rotation_angle); } + } +} diff --git a/dist/scss/mixins/animations/_pulse.scss b/dist/scss/mixins/animations/_pulse.scss new file mode 100644 index 0000000..6b101bb --- /dev/null +++ b/dist/scss/mixins/animations/_pulse.scss @@ -0,0 +1,213 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Pulse Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Pulse Animation +/// Creates a pulsing animation where the element scales between the minimum +/// and maximum scale values. +/// +/// @name animate_pulse +/// @param {Number} $scale_min [1] - The minimum scale of the pulse. +/// @param {Number} $scale_max [1.1] - The maximum scale of the pulse. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the pulse animation. +/// @param {String} $timing_function [linear] - The timing function for the pulse animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_pulse( + $scale_min: 1, + $scale_max: 1.1, + $duration: $animate_base_duration, + $timing_function: linear, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_pulse, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_pulse { + 0%, 100% { transform: scale($scale_min); } + 50% { transform: scale($scale_max); } + } +} + + + +// Slow Pulse Animation +// ---------------------------------------------------------------------------- + +/// +/// Slow Pulse Animation +/// Creates a slower pulsing animation with more subtle scale changes. +/// @name animate_pulse_slow +/// @param {Number} $scale_min [0.95] - The minimum scale of the pulse. +/// @param {Number} $scale_max [1.05] - The maximum scale of the pulse. +/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the pulse animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the pulse animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_pulse_slow( + $scale_min: 0.95, + $scale_max: 1.05, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_pulse_slow, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_pulse_slow { + 0%, 100% { transform: scale($scale_min); } + 50% { transform: scale($scale_max); } + } +} + + + +// Rapid Pulse Animation +// ---------------------------------------------------------------------------- + +/// +/// Rapid Pulse Animation +/// Creates a rapid pulsing animation with more pronounced scale changes. +/// @name animate_pulse_fast +/// @param {Number} $scale_min [0.9] - The minimum scale of the pulse. +/// @param {Number} $scale_max [1.2] - The maximum scale of the pulse. +/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pulse animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the pulse animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_pulse_fast( + $scale_min: 0.9, + $scale_max: 1.2, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_pulse_fast, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_pulse_fast { + 0%, 100% { transform: scale($scale_min); } + 50% { transform: scale($scale_max); } + } +} + + + +// Color Pulse Animation +// ---------------------------------------------------------------------------- + +/// +/// Color Pulse Animation +/// Creates a pulsing animation where the background color of the element transitions between two colors. +/// @name animate_pulse_color +/// @param {Color} $color_start [$animate_base_color_start] - The starting color of the pulse. +/// @param {Color} $color_end [$animate_base_color_end] - The ending color of the pulse. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the pulse animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the pulse animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_pulse_color( + $color_start: $animate_base_color_start, + $color_end: $animate_base_color_end, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_pulse_color, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_pulse_color { + 0%, 100% { background-color: $color_start; } + 50% { background-color: $color_end; } + } +} + + + +// originally authored by Nick Pettit - https://github.com/nickpettit/glide + +// @-webkit-keyframes pulse { +// from { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } + +// 50% { +// -webkit-transform: scale3d(1.05, 1.05, 1.05); +// transform: scale3d(1.05, 1.05, 1.05); +// } + +// 100% { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } +// } + +// @keyframes pulse { +// from { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } + +// 50% { +// -webkit-transform: scale3d(1.05, 1.05, 1.05); +// transform: scale3d(1.05, 1.05, 1.05); +// } + +// 100% { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } +// } + +// .pulse { +// -webkit-animation-name: pulse; +// animation-name: pulse; +// } + \ No newline at end of file diff --git a/dist/scss/mixins/animations/_ripple.scss b/dist/scss/mixins/animations/_ripple.scss new file mode 100644 index 0000000..c719c23 --- /dev/null +++ b/dist/scss/mixins/animations/_ripple.scss @@ -0,0 +1,169 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Ripple Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Ripple Animation +/// Creates a ripple effect where the element scales up and fades out. +/// @name animate_ripple +/// @param {Number} $scale_start [1] - The initial scale of the ripple. +/// @param {Number} $scale_end [1.5] - The final scale of the ripple. +/// @param {Number} $opacity_start [1] - The initial opacity of the ripple. +/// @param {Number} $opacity_end [0] - The final opacity of the ripple. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the ripple animation. +/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation. +/// +@mixin animate_ripple( + $scale_start: 1, + $scale_end: 1.5, + $opacity_start: 1, + $opacity_end: 0, + $duration: $animate_base_duration, + $timing_function: ease-out +) { + @include animate_base( + animate_ripple, + $duration, + $timing_function, + infinite, + ); + @keyframes animate_ripple { + 0% { transform: scale($scale_start); opacity: $opacity_start; } + 100% { transform: scale($scale_end); opacity: $opacity_end; } + } +} + + + +// Slow Ripple Animation +// ---------------------------------------------------------------------------- + +/// +/// Slow Ripple Animation +/// Creates a slower ripple effect where the element scales up and fades out. +/// +/// @name animate_ripple_slow +/// @param {Number} $scale_end [1.5] - The final scale of the ripple. +/// @param {Number} $opacity_end [0] - The final opacity of the ripple. +/// @param {Number|String} $duration [2s] - The duration of the ripple animation. +/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation. +/// +@mixin animate_ripple_slow( + $scale_end: 1.5, + $opacity_end: 0, + $duration: 2s, + $timing_function: ease-out +) { + @include animate_base( + animate_ripple_slow, + $duration, + $timing_function, + infinite, + ); + @keyframes animate_ripple_slow { + 0% { transform: scale(1); opacity: 1; } + 100% { transform: scale($scale_end); opacity: $opacity_end; } + } +} + + +// Multi-Ripple Animation +// ---------------------------------------------------------------------------- + +/// +/// Multi-Ripple Animation +/// Creates a ripple effect with multiple stages of scaling and fading. +/// @name animate_ripple_multi +/// @param {Number} $scale_first [1.2] - The scale of the ripple at the first stage. +/// @param {Number} $scale_second [1.5] - The scale of the ripple at the second stage. +/// @param {Number} $opacity_end [0] - The final opacity of the ripple. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the ripple animation. +/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation. +/// +@mixin animate_ripple_multi( + $scale_first: 1.2, + $scale_second: 1.5, + $opacity_end: 0, + $duration: $animate_base_duration, + $timing_function: ease-out +) { + @include animate_base( + animate_ripple_multi, + $duration, + $timing_function, + infinite, + ); + @keyframes animate_ripple_multi { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale($scale_first); opacity: 0.5; } + 100% { transform: scale($scale_second); opacity: $opacity_end; } + } +} + + +// Ripple with Color Change +// ---------------------------------------------------------------------------- + +/// +/// Ripple with Color Change +/// Creates a ripple effect where the element scales up, fades out, and changes color. +/// @name animate_ripple_color +/// @param {Number} $scale_end [1.5] - The final scale of the ripple. +/// @param {Number} $opacity_end [0] - The final opacity of the ripple. +/// @param {Color} $color_start [$animate_base_color_start] - The starting color of the ripple. +/// @param {Color} $color_end [$animate_base_color_end] - The ending color of the ripple. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the ripple animation. +/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation. +/// +@mixin animate_ripple_color( + $scale_end: 1.5, + $opacity_end: 0, + $color_start: $animate_base_color_start, + $color_end: $animate_base_color_end, + $duration: $animate_base_duration, + $timing_function: ease-out +) { + @include animate_base( + animate_ripple_color, + $duration, + $timing_function, + infinite, + ); + @keyframes animate_ripple_color { + 0% { transform: scale(1); opacity: 1; background-color: $color_start; } + 100% { transform: scale($scale_end); opacity: $opacity_end; background-color: $color_end; } + } +} diff --git a/dist/scss/mixins/animations/_roll.scss b/dist/scss/mixins/animations/_roll.scss new file mode 100644 index 0000000..a8f4ee5 --- /dev/null +++ b/dist/scss/mixins/animations/_roll.scss @@ -0,0 +1,261 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Roll Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Roll Animation +/// Creates a rolling animation where the element translates and rotates +/// horizontally. +/// +/// @name animate_roll +/// @param {Number|String} $translate-distance [100%] - The distance to translate the element horizontally. +/// @param {Number|String} $rotation_angle [360deg] - The rotation angle for the roll. +/// @param {Number|String} $duration [$animate_base_duration/// 2] - The duration of the roll animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_roll( + $translate-distance: 100%, + $rotation_angle: 360deg, + $duration: $animate_base_duration * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_roll, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_roll { + 0% { transform: translateX(0) rotate(0deg); } + 100% { transform: translateX($translate-distance) rotate($rotation_angle); } + } +} + + +// Reverse Roll Animation +// ---------------------------------------------------------------------------- + +/// +/// Reverse Roll Animation +/// Creates a reverse rolling animation where the element translates and rotates horizontally in the opposite direction. +/// @name animate_roll_reverse +/// @param {Number|String} $translate-distance [-100%] - The distance to translate the element horizontally. +/// @param {Number|String} $rotation_angle [-360deg] - The rotation angle for the reverse roll. +/// @param {Number|String} $duration [$animate_base_duration/// 2] - The duration of the roll animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_roll_reverse( + $translate-distance: -100%, + $rotation_angle: -360deg, + $duration: $animate_base_duration * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_roll_reverse, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_roll_reverse { + 0% { transform: translateX(0) rotate(0deg); } + 100% { transform: translateX($translate-distance) rotate($rotation_angle); } + } +} + + +// Slow Roll Animation +// ---------------------------------------------------------------------------- + +/// +/// Slow Roll Animation +/// Creates a slower rolling animation where the element translates and rotates horizontally. +/// @name animate_roll_slow +/// @param {Number|String} $translate-distance [100%] - The distance to translate the element horizontally. +/// @param {Number|String} $rotation_angle [360deg] - The rotation angle for the roll. +/// @param {Number|String} $duration [$animate_base_duration_slow/// 2] - The duration of the roll animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_roll_slow( + $translate-distance: 100%, + $rotation_angle: 360deg, + $duration: $animate_base_duration_slow * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_roll_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_roll_slow { + 0% { transform: translateX(0) rotate(0deg); } + 100% { transform: translateX($translate-distance) rotate($rotation_angle); } + } +} + + + +// Vertical Roll Animation +// ---------------------------------------------------------------------------- + +/// +/// Vertical Roll Animation +/// Creates a rolling animation where the element translates and rotates vertically. +/// @name animate_roll_vertical +/// @param {Number|String} $translate-distance [100%] - The distance to translate the element vertically. +/// @param {Number|String} $rotation_angle [360deg] - The rotation angle for the vertical roll. +/// @param {Number|String} $duration [$animate_base_duration/// 2] - The duration of the roll animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_roll_vertical( + $translate-distance: 100%, + $rotation_angle: 360deg, + $duration: $animate_base_duration * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_roll_vertical, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_roll_vertical { + 0% { transform: translateY(0) rotate(0deg); } + 100% { transform: translateY($translate-distance) rotate($rotation_angle); } + } +} + + + + + +// originally authored by Nick Pettit - https://github.com/nickpettit/glide + +// @-webkit-keyframes rollIn { +// from { +// opacity: 0; +// -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); +// transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); +// } + +// 100% { +// opacity: 1; +// -webkit-transform: none; +// transform: none; +// } +// } + +// @keyframes rollIn { +// from { +// opacity: 0; +// -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); +// transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); +// } + +// 100% { +// opacity: 1; +// -webkit-transform: none; +// transform: none; +// } +// } + +// .rollIn { +// -webkit-animation-name: rollIn; +// animation-name: rollIn; +// } + +// /* originally authored by Nick Pettit - https://github.com/nickpettit/glide/// + +// @-webkit-keyframes rollOut { +// from { +// opacity: 1; +// } + +// 100% { +// opacity: 0; +// -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); +// transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); +// } +// } + +// @keyframes rollOut { +// from { +// opacity: 1; +// } + +// 100% { +// opacity: 0; +// -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); +// transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); +// } +// } + +// .rollOut { +// -webkit-animation-name: rollOut; +// animation-name: rollOut; +// } + +// @-webkit-keyframes zoomIn { +// from { +// opacity: 0; +// -webkit-transform: scale3d(.3, .3, .3); +// transform: scale3d(.3, .3, .3); +// } + +// 50% { +// opacity: 1; +// } +// } + +// @keyframes zoomIn { +// from { +// opacity: 0; +// -webkit-transform: scale3d(.3, .3, .3); +// transform: scale3d(.3, .3, .3); +// } + +// 50% { +// opacity: 1; +// } +// } + \ No newline at end of file diff --git a/dist/scss/mixins/animations/_rotate.scss b/dist/scss/mixins/animations/_rotate.scss new file mode 100644 index 0000000..aaa230c --- /dev/null +++ b/dist/scss/mixins/animations/_rotate.scss @@ -0,0 +1,428 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Rotate Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + +// @-webkit-keyframes rotateIn { +// from { +// -webkit-transform-origin: center; +// transform-origin: center; +// -webkit-transform: rotate3d(0, 0, 1, -200deg); +// transform: rotate3d(0, 0, 1, -200deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: center; +// transform-origin: center; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// @keyframes rotateIn { +// from { +// -webkit-transform-origin: center; +// transform-origin: center; +// -webkit-transform: rotate3d(0, 0, 1, -200deg); +// transform: rotate3d(0, 0, 1, -200deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: center; +// transform-origin: center; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// .rotateIn { +// -webkit-animation-name: rotateIn; +// animation-name: rotateIn; +// } + +// @-webkit-keyframes rotateInDownLeft { +// from { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: rotate3d(0, 0, 1, -45deg); +// transform: rotate3d(0, 0, 1, -45deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// @keyframes rotateInDownLeft { +// from { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: rotate3d(0, 0, 1, -45deg); +// transform: rotate3d(0, 0, 1, -45deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// .rotateInDownLeft { +// -webkit-animation-name: rotateInDownLeft; +// animation-name: rotateInDownLeft; +// } + +// @-webkit-keyframes rotateInDownRight { +// from { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: rotate3d(0, 0, 1, 45deg); +// transform: rotate3d(0, 0, 1, 45deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// @keyframes rotateInDownRight { +// from { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: rotate3d(0, 0, 1, 45deg); +// transform: rotate3d(0, 0, 1, 45deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// .rotateInDownRight { +// -webkit-animation-name: rotateInDownRight; +// animation-name: rotateInDownRight; +// } + +// @-webkit-keyframes rotateInUpLeft { +// from { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: rotate3d(0, 0, 1, 45deg); +// transform: rotate3d(0, 0, 1, 45deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// @keyframes rotateInUpLeft { +// from { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: rotate3d(0, 0, 1, 45deg); +// transform: rotate3d(0, 0, 1, 45deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// .rotateInUpLeft { +// -webkit-animation-name: rotateInUpLeft; +// animation-name: rotateInUpLeft; +// } + +// @-webkit-keyframes rotateInUpRight { +// from { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: rotate3d(0, 0, 1, -90deg); +// transform: rotate3d(0, 0, 1, -90deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// @keyframes rotateInUpRight { +// from { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: rotate3d(0, 0, 1, -90deg); +// transform: rotate3d(0, 0, 1, -90deg); +// opacity: 0; +// } + +// 100% { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: none; +// transform: none; +// opacity: 1; +// } +// } + +// .rotateInUpRight { +// -webkit-animation-name: rotateInUpRight; +// animation-name: rotateInUpRight; +// } + +// @-webkit-keyframes rotateOut { +// from { +// -webkit-transform-origin: center; +// transform-origin: center; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: center; +// transform-origin: center; +// -webkit-transform: rotate3d(0, 0, 1, 200deg); +// transform: rotate3d(0, 0, 1, 200deg); +// opacity: 0; +// } +// } + +// @keyframes rotateOut { +// from { +// -webkit-transform-origin: center; +// transform-origin: center; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: center; +// transform-origin: center; +// -webkit-transform: rotate3d(0, 0, 1, 200deg); +// transform: rotate3d(0, 0, 1, 200deg); +// opacity: 0; +// } +// } + +// .rotateOut { +// -webkit-animation-name: rotateOut; +// animation-name: rotateOut; +// } + +// @-webkit-keyframes rotateOutDownLeft { +// from { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: rotate3d(0, 0, 1, 45deg); +// transform: rotate3d(0, 0, 1, 45deg); +// opacity: 0; +// } +// } + +// @keyframes rotateOutDownLeft { +// from { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: rotate3d(0, 0, 1, 45deg); +// transform: rotate3d(0, 0, 1, 45deg); +// opacity: 0; +// } +// } + +// .rotateOutDownLeft { +// -webkit-animation-name: rotateOutDownLeft; +// animation-name: rotateOutDownLeft; +// } + +// @-webkit-keyframes rotateOutDownRight { +// from { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: rotate3d(0, 0, 1, -45deg); +// transform: rotate3d(0, 0, 1, -45deg); +// opacity: 0; +// } +// } + +// @keyframes rotateOutDownRight { +// from { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: rotate3d(0, 0, 1, -45deg); +// transform: rotate3d(0, 0, 1, -45deg); +// opacity: 0; +// } +// } + +// .rotateOutDownRight { +// -webkit-animation-name: rotateOutDownRight; +// animation-name: rotateOutDownRight; +// } + +// @-webkit-keyframes rotateOutUpLeft { +// from { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: rotate3d(0, 0, 1, -45deg); +// transform: rotate3d(0, 0, 1, -45deg); +// opacity: 0; +// } +// } + +// @keyframes rotateOutUpLeft { +// from { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: left bottom; +// transform-origin: left bottom; +// -webkit-transform: rotate3d(0, 0, 1, -45deg); +// transform: rotate3d(0, 0, 1, -45deg); +// opacity: 0; +// } +// } + +// .rotateOutUpLeft { +// -webkit-animation-name: rotateOutUpLeft; +// animation-name: rotateOutUpLeft; +// } + +// @-webkit-keyframes rotateOutUpRight { +// from { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: rotate3d(0, 0, 1, 90deg); +// transform: rotate3d(0, 0, 1, 90deg); +// opacity: 0; +// } +// } + +// @keyframes rotateOutUpRight { +// from { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// opacity: 1; +// } + +// 100% { +// -webkit-transform-origin: right bottom; +// transform-origin: right bottom; +// -webkit-transform: rotate3d(0, 0, 1, 90deg); +// transform: rotate3d(0, 0, 1, 90deg); +// opacity: 0; +// } +// } + +// .rotateOutUpRight { +// -webkit-animation-name: rotateOutUpRight; +// animation-name: rotateOutUpRight; +// } \ No newline at end of file diff --git a/dist/scss/mixins/animations/_rubber.scss b/dist/scss/mixins/animations/_rubber.scss new file mode 100644 index 0000000..960f49e --- /dev/null +++ b/dist/scss/mixins/animations/_rubber.scss @@ -0,0 +1,116 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Rubber Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + +// @-webkit-keyframes rubberBand { +// from { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } + +// 30% { +// -webkit-transform: scale3d(1.25, 0.75, 1); +// transform: scale3d(1.25, 0.75, 1); +// } + +// 40% { +// -webkit-transform: scale3d(0.75, 1.25, 1); +// transform: scale3d(0.75, 1.25, 1); +// } + +// 50% { +// -webkit-transform: scale3d(1.15, 0.85, 1); +// transform: scale3d(1.15, 0.85, 1); +// } + +// 65% { +// -webkit-transform: scale3d(.95, 1.05, 1); +// transform: scale3d(.95, 1.05, 1); +// } + +// 75% { +// -webkit-transform: scale3d(1.05, .95, 1); +// transform: scale3d(1.05, .95, 1); +// } + +// 100% { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } +// } + +// @keyframes rubberBand { +// from { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } + +// 30% { +// -webkit-transform: scale3d(1.25, 0.75, 1); +// transform: scale3d(1.25, 0.75, 1); +// } + +// 40% { +// -webkit-transform: scale3d(0.75, 1.25, 1); +// transform: scale3d(0.75, 1.25, 1); +// } + +// 50% { +// -webkit-transform: scale3d(1.15, 0.85, 1); +// transform: scale3d(1.15, 0.85, 1); +// } + +// 65% { +// -webkit-transform: scale3d(.95, 1.05, 1); +// transform: scale3d(.95, 1.05, 1); +// } + +// 75% { +// -webkit-transform: scale3d(1.05, .95, 1); +// transform: scale3d(1.05, .95, 1); +// } + +// 100% { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } +// } + +// .rubberBand { +// -webkit-animation-name: rubberBand; +// animation-name: rubberBand; +// } \ No newline at end of file diff --git a/dist/scss/mixins/animations/_scale.scss b/dist/scss/mixins/animations/_scale.scss new file mode 100644 index 0000000..22f0583 --- /dev/null +++ b/dist/scss/mixins/animations/_scale.scss @@ -0,0 +1,113 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Scale Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Expand Animation +/// Creates an expand animation where the element scales up and down. +/// @name animate_scale_expand +/// @param {Number|String} $scale_start [1] - The initial scale of the element. +/// @param {Number|String} $scale_end [1.2] - The scale of the element at its maximum size. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the expand animation. +/// @param {String} $timing_function [ease-out] - The timing function for the expand animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_scale_expand( + $scale_start: 1, + $scale_end: 1.2, + $duration: $animate_base_duration, + $timing_function: ease-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_scale_expand, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_scale_expand { + 0%, 100% { transform: scale($scale_start); } + 50% { transform: scale($scale_end); } + } +} + + +// // Scale transition +// .scale-transition { +// &.scale-out { +// transform: scale(0); +// transition: transform .2s !important; +// } + +// &.scale-in { +// transform: scale(1); +// } + +// transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; +// } + + +// Expand and Shrink Animation +// ---------------------------------------------------------------------------- + +/// +/// Expand and Shrink Animation +/// Creates an animation where the element alternates between expanding and shrinking. +/// @name animate_scale_shrink +/// @param {Number|String} $scale_min [0.8] - The minimum scale of the element during the animation. +/// @param {Number|String} $scale_max [1.2] - The maximum scale of the element during the animation. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the expand and shrink animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the expand and shrink animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_scale_shrink( + $scale_min: 0.8, + $scale_max: 1.2, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_scale_shrink, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_scale_shrink { + 0%, 100% { transform: scale($scale_min); } + 50% { transform: scale($scale_max); } + } +} diff --git a/dist/scss/mixins/animations/_shake.scss b/dist/scss/mixins/animations/_shake.scss new file mode 100644 index 0000000..7a0c080 --- /dev/null +++ b/dist/scss/mixins/animations/_shake.scss @@ -0,0 +1,182 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Shake Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "sass:math"; +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + +/// +/// Shake Animation +/// Creates a shake animation with configurable amplitude, duration, timing function, +/// and iteration count. +/// @name animate_shake +/// @param {Number} $amplitude [15deg] - The maximum angle of the shake. +/// @param {Number} $duration [math.div($animate_base_duration, 2)] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run. +/// +@mixin animate_shake( + $amplitude: 15deg, + $duration: math.div($animate_base_duration, 2), + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_shake, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_shake { + 0% { transform: rotate(-$amplitude); } + 4% { transform: rotate($amplitude); } + 8%, 24% { transform: rotate(-1.2 * $amplitude); } + 12%, 28% { transform: rotate(1.2 * $amplitude); } + 16% { transform: rotate(-1.4 * $amplitude); } + 20% { transform: rotate(1.4 * $amplitude); } + 32% { transform: rotate(-0.8 * $amplitude); } + 36% { transform: rotate(0.8 * $amplitude); } + 40%, 100% { transform: rotate(0deg); } + } +} + + +// Gentle Shake Animation +// ---------------------------------------------------------------------------- + +/// +/// Gentle Shake Animation +/// Creates a gentle shake animation with a smaller amplitude, designed for +/// slower and less intense shaking effects. +/// @name animate_shake_slow +/// @param {Number} $amplitude [10deg] - The maximum angle of the shake. +/// @param {Number} $duration [math.div($animate_base_duration_slow, 2)] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run. +/// +@mixin animate_shake_slow( + $amplitude: 10deg, + $duration: math.div($animate_base_duration_slow, 2), + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_shake_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_shake_slow { + 0%, 100% { transform: rotate(0deg); } + 10%, 30%, 50%, 70%, 90% { transform: rotate(-$amplitude); } + 20%, 40%, 60%, 80% { transform: rotate($amplitude); } + } +} + + + +// Horizontal Shake Animation +// ---------------------------------------------------------------------------- + +/// +/// Horizontal Shake Animation +/// Creates a horizontal shake animation, moving the element side to side +/// by a configurable distance. +/// @name animate_shake_horizontal +/// @param {Number} $distance [10px] - The distance to move the element. +/// @param {Number} $duration [math.div($animate_base_duration, 2)] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run. +/// +@mixin animate_shake_horizontal( + $distance: 10px, + $duration: math.div($animate_base_duration, 2), + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_shake_horizontal, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_shake_horizontal { + 0%, 100% { transform: translateX(0); } + 25%, 75% { transform: translateX(-$distance); } + 50% { transform: translateX($distance); } + } +} + + + +// @-webkit-keyframes shake { +// from, 100% { +// -webkit-transform: translate3d(0, 0, 0); +// transform: translate3d(0, 0, 0); +// } + +// 10%, 30%, 50%, 70%, 90% { +// -webkit-transform: translate3d(-10px, 0, 0); +// transform: translate3d(-10px, 0, 0); +// } + +// 20%, 40%, 60%, 80% { +// -webkit-transform: translate3d(10px, 0, 0); +// transform: translate3d(10px, 0, 0); +// } +// } + +// @keyframes shake { +// from, 100% { +// -webkit-transform: translate3d(0, 0, 0); +// transform: translate3d(0, 0, 0); +// } + +// 10%, 30%, 50%, 70%, 90% { +// -webkit-transform: translate3d(-10px, 0, 0); +// transform: translate3d(-10px, 0, 0); +// } + +// 20%, 40%, 60%, 80% { +// -webkit-transform: translate3d(10px, 0, 0); +// transform: translate3d(10px, 0, 0); +// } +// } + +// .shake { +// -webkit-animation-name: shake; +// animation-name: shake; +// } + \ No newline at end of file diff --git a/dist/scss/mixins/animations/_slide.scss b/dist/scss/mixins/animations/_slide.scss new file mode 100644 index 0000000..88252b1 --- /dev/null +++ b/dist/scss/mixins/animations/_slide.scss @@ -0,0 +1,294 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Slide Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + + +/// +/// Slide Animation +/// Creates a sliding animation in a specified direction. +/// @name animate_slide +/// @param {String} $direction [left] - The direction in which the element slides (left, right). +/// @param {Number|String} $distance [100%] - The distance the element slides. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide animation. +/// @param {String} $timing_function [$animate_base_timing_function] - The timing function for the slide animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_slide( + $direction: left, + $distance: 100%, + $duration: $animate_base_duration, + $timing-function: $animate_base_timing_function, + $iteration-count: $animate_base_iteration_count +) { + @include animate_base( + animate_slide, + $duration, + $timing-function, + $iteration-count, + ); + + $translate-value: if($direction == left, -1 * $distance, $distance); + + @keyframes animate_slide { + 0% { transform: translateX(0); } + 100% { transform: translateX($translate-value); } + } +} + + +// Slide Up Animation +// ---------------------------------------------------------------------------- + +/// +/// Slide Up Animation +/// Creates a slide up animation. +/// @name animate_slide_up +/// @param {Number|String} $distance [20px] - The distance the element slides up. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide up animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the slide up animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_slide_up( + $distance: 20px, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_slide_up, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_slide_up { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-$distance); } + } +} + + +// Slide Down Animation +// ---------------------------------------------------------------------------- + +/// +/// Slide Down Animation +/// Creates a slide down animation. +/// @name animate_slide_down +/// @param {Number|String} $distance [20px] - The distance the element slides down. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide down animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the slide down animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_slide_down( + $distance: 20px, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_slide_down, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_slide_down { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY($distance); } + } +} + + +// Slide In Left Animation +// ---------------------------------------------------------------------------- + +/// +/// Slide In Left Animation +/// Creates a slide in animation from the left. +/// @name animate_slide_in_left +/// @param {Number|String} $distance [100%] - The distance the element slides in from the left. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide in animation. +/// @param {String} $timing_function [ease-out] - The timing function for the slide in animation. +/// +@mixin animate_slide_in_left( + $distance: 100%, + $duration: + $animate_base_duration, + $timing_function: ease-out +) { + @include animate_base( + animate_slide_in_left, + $duration, + $timing_function, + 1, + ); + @keyframes animate_slide_in_left { + 0% { transform: translateX(-$distance); } + 100% { transform: translateX(0); } + } +} + + +// Slide In Right Animation +// ---------------------------------------------------------------------------- + +/// +/// Slide In Right Animation +/// Creates a slide in animation from the right. +/// @name animate_slide_in_right +/// @param {Number|String} $distance [100%] - The distance the element slides in from the right. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide in animation. +/// @param {String} $timing_function [ease-out] - The timing function for the slide in animation. +/// +@mixin animate_slide_in_right( + $distance: 100%, + $duration: $animate_base_duration, + $timing_function: ease-out +) { + @include animate_base( + animate_slide_in_right, + $duration, + $timing_function, + 1, + ); + @keyframes animate_slide_in_right { + 0% { transform: translateX($distance); } + 100% { transform: translateX(0); } + } +} + +// Slide Out Left Animation: +// ---------------------------------------------------------------------------- + +/// +/// Slide Out Left Animation +/// Creates a slide out animation to the left. +/// @name animate_slide_out_left +/// @param {Number|String} $distance [100%] - The distance the element slides out to the left. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide out animation. +/// @param {String} $timing_function [ease-in] - The timing function for the slide out animation. +/// +@mixin animate_slide_out_left( + $distance: 100%, + $duration: $animate_base_duration, + $timing_function: ease-in, +) { + @include animate_base( + animate_slide_out_left, + $duration, + $timing_function, + 1, + ); + @keyframes animate_slide_out_left { + 0% { transform: translateX(0); } + 100% { transform: translateX(-$distance); } + } +} + + + + +// Slide Out Right Animation: +// ---------------------------------------------------------------------------- + +/// +/// Slide Out Right Animation +/// Creates a slide out animation to the right. +/// @name animate_slide_out_right +/// @param {Number|String} $distance [100%] - The distance the element slides out to the right. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide out animation. +/// @param {String} $timing_function [ease-in] - The timing function for the slide out animation. +/// +@mixin animate_slide_out_right( + $distance: 100%, + $duration: $animate_base_duration, + $timing_function: ease-in, +) { + @include animate_base( + animate_slide_out_right, + $duration, + $timing_function, + 1, + ); + @keyframes animate_slide_out_right { + 0% { transform: translateX(0); } + 100% { transform: translateX($distance); } + } +} + + + + +// Slide In Fade Animation +// ---------------------------------------------------------------------------- + +/// +/// Slide In Fade Animation +/// Creates a sliding animation with a fade-in effect. +/// @name animate_slide_in_fade +/// @param {String} $direction [left] - The direction from which the element slides in. +/// @param {Number|String} $distance [100%] - The distance the element slides. +/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide in fade animation. +/// @param {String} $timing_function [ease-out] - The timing function for the slide in fade animation. +/// +@mixin animate_slide_in_fade( + $direction: left, + $distance: 100%, + $duration: $animate_base_duration, + $timing-function: ease-out +) { + @include animate_base( + animate_slide_in_fade, + $duration, + $timing-function, + 1, + ); + + // Calculate the translate value based on the direction + $translate-value: if($direction == left, -1 * $distance, $distance); + + @keyframes animate_slide_in_fade { + 0% { + transform: translateX($translate-value); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } + } +} diff --git a/dist/scss/mixins/animations/_spin.scss b/dist/scss/mixins/animations/_spin.scss new file mode 100644 index 0000000..c83df65 --- /dev/null +++ b/dist/scss/mixins/animations/_spin.scss @@ -0,0 +1,219 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Spin Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Spin Animation +/// Creates a continuous spinning animation. +/// @name animate_spin +/// @param {Angle} $start_angle [0deg] - The starting angle for the spin. +/// @param {Angle} $end_angle [360deg] - The ending angle for the spin. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the spin animation. +/// @param {String} $timing_function [linear] - The timing function for the spin animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_spin( + $start_angle: 0deg, + $end_angle: 360deg, + $duration: $animate_base_duration, + $timing_function: linear, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_spin, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_spin { + from { transform: rotate($start_angle); } + to { transform: rotate($end_angle); } + } +} + + +// .spin { +// // position: absolute; +// // top: 50%; +// // left: 50%; +// // width: 120px; +// // height: 120px; +// // margin:-60px 0 0 -60px; +// -webkit-animation:spin 4s linear infinite; +// -moz-animation:spin 4s linear infinite; +// animation:spin 4s linear infinite; +// } +// @-moz-keyframes spin { +// 100% { -moz-transform: rotate(360deg); } +// } +// @-webkit-keyframes spin { +// 100% { -webkit-transform: rotate(360deg); } +// } +// @keyframes spin { +// 100% { +// -webkit-transform: rotate(360deg); +// transform:rotate(360deg); +// } +// } + +// Spin Reverse Animation +// ---------------------------------------------------------------------------- + +/// +/// Spin Reverse Animation +/// Creates a reverse spinning animation. +/// @name animate_spin_reverse +/// @param {Angle} $start_angle [360deg] - The starting angle for the reverse spin. +/// @param {Angle} $end_angle [0deg] - The ending angle for the reverse spin. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the spin animation. +/// @param {String} $timing_function [linear] - The timing function for the spin animation. +/// +@mixin animate_spin_reverse( + $start_angle: 360deg, + $end_angle: 0deg, + $duration: $animate_base_duration, + $timing_function: linear +) { + @include animate_base( + animate_spin_reverse, + $duration, + $timing_function, + infinite, + ); + @keyframes animate_spin_reverse { + from { transform: rotate($start_angle); } + to { transform: rotate($end_angle); } + } +} + + +// Spin and Grow Animation +// ---------------------------------------------------------------------------- + +/// +/// Spin and Grow Animation +/// Creates a spinning animation with a scaling effect. +/// @name animate_spin_grow +/// @param {Number} $scale [1.2] - The scale factor for the grow effect. +/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_spin_grow( + $scale: 1.2, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_spin_grow, + $duration, + $timing_function, + $iteration_count + ); + @keyframes animate_spin_grow { + 0%, 100% { transform: scale(1) rotate(0deg); } + 50% { transform: scale($scale) rotate(180deg); } + } +} + + +// Spin Pulse Animation +// ---------------------------------------------------------------------------- + +/// +/// Spin Pulse Animation +/// Creates a spinning animation with a pulsing scale effect. +/// @name animate_spin_pulse +/// @param {Number} $scale_min [1] - The minimum scale for the pulse effect. +/// @param {Number} $scale_max [1.1] - The maximum scale for the pulse effect. +/// @param {Angle} $rotation_angle [360deg] - The angle for the rotation. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [linear] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_spin_pulse( + $scale_min: 1, + $scale_max: 1.1, + $rotation_angle: 360deg, + $duration: $animate_base_duration, + $timing_function: linear, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_spin_pulse, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_spin_pulse { + 0%, 100% { transform: rotate(0deg) scale($scale_min); } + 50% { transform: rotate($rotation_angle) scale($scale_max); } + } +} + + +// Spin and Flip Animation +// ---------------------------------------------------------------------------- + +/// +/// Spin and Flip Animation +/// Creates a spinning animation with a flipping effect. +/// @name animate_spin_flip +/// @param {Angle} $rotation_angle [360deg] - The angle for the rotation. +/// @param {Angle} $flip_angle [180deg] - The angle for the flip effect. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_spin_flip( + $rotation_angle: 360deg, + $flip-angle: 180deg, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_spin_flip, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_spin_flip { + 0%, 100% { transform: rotateY(0deg) rotate($rotation_angle); } + 50% { transform: rotateY($flip-angle) rotate($rotation_angle); } + } +} diff --git a/dist/scss/mixins/animations/_sway.scss b/dist/scss/mixins/animations/_sway.scss new file mode 100644 index 0000000..94dec26 --- /dev/null +++ b/dist/scss/mixins/animations/_sway.scss @@ -0,0 +1,167 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Sway Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + +/// +/// Sway Animation +/// Creates a swaying motion animation. +/// @name animate_sway +/// @param {Angle} $angle [5deg] - The maximum angle to sway. +/// @param {Duration} $duration [$animate_base_duration/// 2] - The duration of the sway animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the sway animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_sway( + $angle: 5deg, + $duration: $animate_base_duration * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_sway, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_sway { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + + + +// Gentle Sway Animation +// ---------------------------------------------------------------------------- + +/// +/// Gentle Sway Animation +/// Creates a slower, more subtle swaying motion. +/// @name animate_sway_slow +/// @param {Angle} $angle [3deg] - The maximum angle to sway. +/// @param {Duration} $duration [$animate_base_duration_slow/// 2] - The duration of the sway animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the sway animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_sway_slow( + $angle: 3deg, + $duration: $animate_base_duration_slow * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_sway_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_sway_slow { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + + + +// Rapid Sway Animation +// ---------------------------------------------------------------------------- + +/// +/// Rapid Sway Animation +/// Creates a faster and more exaggerated swaying motion. +/// @name animate_sway_fast +/// @param {Angle} $angle [10deg] - The maximum angle to sway. +/// @param {Duration} $duration [$animate_base_duration_fast/// 2] - The duration of the sway animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the sway animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_sway_fast( + $angle: 10deg, + $duration: $animate_base_duration_fast * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_sway_fast, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_sway_fast { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + + + +// Sway with Fade Animation +// ---------------------------------------------------------------------------- + +/// +/// Sway with Fade Animation +/// Creates a swaying motion with a fading effect. +/// @name animate_sway_fade +/// @param {Angle} $angle [5deg] - The maximum angle to sway. +/// @param {Duration} $duration [$animate_base_duration/// 2] - The duration of the sway animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the sway animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_sway_fade( + $angle: 5deg, + $duration: $animate_base_duration * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_sway_fade, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_sway_fade { + 0%, 100% { + transform: rotate(0deg); + opacity: 1; + } + 50% { + transform: rotate($angle); + opacity: 0.5; + } + } +} diff --git a/dist/scss/mixins/animations/_swing.scss b/dist/scss/mixins/animations/_swing.scss new file mode 100644 index 0000000..0a60e5f --- /dev/null +++ b/dist/scss/mixins/animations/_swing.scss @@ -0,0 +1,247 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Swing Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + +// Swing Animation +// ---------------------------------------------------------------------------- + +/// +/// Swing Animation +/// Creates a swinging motion animation. +/// @name animate_swing +/// @param {Angle} $angle [15deg] - The maximum angle to swing. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the swing animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the swing animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_swing( + $angle: 15deg, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_swing, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_swing { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + +.animate_swing { + @include animate_swing(15deg); +} + + +// Gentle Swing Animation +// ---------------------------------------------------------------------------- +/// +/// Gentle Swing Animation +/// Creates a slower, more subtle swinging motion. +/// @name animate_swing_slow +/// @param {Angle} $angle [10deg] - The maximum angle to swing. +/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the swing animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the swing animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_swing_slow( + $angle: 10deg, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_swing_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_swing_slow { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + +.animate_swing_slow { + @include animate_swing_slow(); +} + + +// Rapid Swing Animation +// ---------------------------------------------------------------------------- + + +/// +/// Rapid Swing Animation +/// Creates a faster and more exaggerated swinging motion. +/// @name animate_swing_fast +/// @param {Angle} $angle [20deg] - The maximum angle to swing. +/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the swing animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the swing animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_swing_fast( + $angle: 20deg, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_swing_fast, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_swing_fast { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + +.animate_swing_fast { + @include animate_swing_fast(); +} + + +// Swing with Fade Animation +// ---------------------------------------------------------------------------- + + +/// +/// Swing with Fade Animation +/// Creates a swinging motion with a fading effect. +/// @name animate_swing_fade +/// @param {Angle} $angle [15deg] - The maximum angle to swing. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the swing animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the swing animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_swing_fade( + $angle: 15deg, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_swing_fade, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_swing_fade { + 0%, 100% { + transform: rotate(0deg); + opacity: 1; + } + 50% { + transform: rotate($angle); + opacity: 0.5; + } + } +} + +.animate_swing_fade { + @include animate_swing_fade(); +} + + + +// @-webkit-keyframes swing { +// 20% { +// -webkit-transform: rotate3d(0, 0, 1, 15deg); +// transform: rotate3d(0, 0, 1, 15deg); +// } + +// 40% { +// -webkit-transform: rotate3d(0, 0, 1, -10deg); +// transform: rotate3d(0, 0, 1, -10deg); +// } + +// 60% { +// -webkit-transform: rotate3d(0, 0, 1, 5deg); +// transform: rotate3d(0, 0, 1, 5deg); +// } + +// 80% { +// -webkit-transform: rotate3d(0, 0, 1, -5deg); +// transform: rotate3d(0, 0, 1, -5deg); +// } + +// 100% { +// -webkit-transform: rotate3d(0, 0, 1, 0deg); +// transform: rotate3d(0, 0, 1, 0deg); +// } +// } + +// @keyframes swing { +// 20% { +// -webkit-transform: rotate3d(0, 0, 1, 15deg); +// transform: rotate3d(0, 0, 1, 15deg); +// } + +// 40% { +// -webkit-transform: rotate3d(0, 0, 1, -10deg); +// transform: rotate3d(0, 0, 1, -10deg); +// } + +// 60% { +// -webkit-transform: rotate3d(0, 0, 1, 5deg); +// transform: rotate3d(0, 0, 1, 5deg); +// } + +// 80% { +// -webkit-transform: rotate3d(0, 0, 1, -5deg); +// transform: rotate3d(0, 0, 1, -5deg); +// } + +// 100% { +// -webkit-transform: rotate3d(0, 0, 1, 0deg); +// transform: rotate3d(0, 0, 1, 0deg); +// } +// } + +// .swing { +// -webkit-transform-origin: top center; +// transform-origin: top center; +// -webkit-animation-name: swing; +// animation-name: swing; +// } \ No newline at end of file diff --git a/dist/scss/mixins/animations/_tada.scss b/dist/scss/mixins/animations/_tada.scss new file mode 100644 index 0000000..5929e3b --- /dev/null +++ b/dist/scss/mixins/animations/_tada.scss @@ -0,0 +1,233 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Tada Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Tada Animation +/// Creates a "tada" effect with scaling and rotating. +/// +/// @name animate_tada +/// @param {Number} $scale [1.1] - The scale factor for the animation. +/// @param {Duration} $duration [$animate_base_duration/// 2] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_tada( + $scale: 1.1, + $duration: $animate_base_duration * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_tada, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_tada { + 0%, 100% { transform: scale(1); } + 10%, 20% { transform: scale(0.9) rotate(-3deg); } + 30%, 50%, 70%, 90% { transform: scale($scale) rotate(3deg); } + 40%, 60%, 80% { transform: scale($scale) rotate(-3deg); } + } +} + + + + +// Gentle Tada Animation +// ---------------------------------------------------------------------------- + +/// +/// Gentle Tada Animation +/// A more subtle version of the Tada animation. +/// @name animate_tada_slow +/// @param {Number} $scale [1.05] - The scale factor for the animation. +/// @param {Duration} $duration [$animate_base_duration_slow/// 2] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_tada_slow( + $scale: 1.05, + $duration: $animate_base_duration_slow * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_tada_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_tada_slow { + 0%, 100% { transform: scale(1); } + 10%, 20% { transform: scale(0.95) rotate(-2deg); } + 30%, 50%, 70%, 90% { transform: scale($scale) rotate(2deg); } + 40%, 60%, 80% { transform: scale($scale) rotate(-2deg); } + } +} + + + +// Rapid Tada Animation +// ---------------------------------------------------------------------------- + +/// +/// Rapid Tada Animation +/// A faster and more exaggerated version of the Tada animation. +/// @name animate_tada_fast +/// @param {Number} $scale [1.15] - The scale factor for the animation. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_tada_fast( + $scale: 1.15, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_tada_fast, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_tada_fast { + 0%, 100% { transform: scale(1); } + 10%, 20% { transform: scale(0.85) rotate(-4deg); } + 30%, 50%, 70%, 90% { transform: scale($scale) rotate(4deg); } + 40%, 60%, 80% { transform: scale($scale) rotate(-4deg); } + } +} + + +// Tada with Fade Animation +// ---------------------------------------------------------------------------- + +/// +/// Tada with Fade Animation +/// Adds a fading effect to the Tada animation. +/// @name animate_tada_fade +/// @param {Number} $scale [1.1] - The scale factor for the animation. +/// @param {Duration} $duration [$animate_base_duration/// 2] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_tada_fade( + $scale: 1.1, + $duration: $animate_base_duration * 2, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_tada_fade, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_tada_fade { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale($scale) rotate(3deg); + opacity: 0.5; + } + } +} + + + +// @-webkit-keyframes tada { +// from { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } + +// 10%, 20% { +// -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); +// transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); +// } + +// 30%, 50%, 70%, 90% { +// -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); +// transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); +// } + +// 40%, 60%, 80% { +// -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); +// transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); +// } + +// 100% { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } +// } + +// @keyframes tada { +// from { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } + +// 10%, 20% { +// -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); +// transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); +// } + +// 30%, 50%, 70%, 90% { +// -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); +// transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); +// } + +// 40%, 60%, 80% { +// -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); +// transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); +// } + +// 100% { +// -webkit-transform: scale3d(1, 1, 1); +// transform: scale3d(1, 1, 1); +// } +// } + +// .tada { +// -webkit-animation-name: tada; +// animation-name: tada; +// } \ No newline at end of file diff --git a/dist/scss/mixins/animations/_twist.scss b/dist/scss/mixins/animations/_twist.scss new file mode 100644 index 0000000..6f34def --- /dev/null +++ b/dist/scss/mixins/animations/_twist.scss @@ -0,0 +1,177 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Twist Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Twist Animation +/// Creates a twist effect with scaling and rotating. +/// @name animate_twist +/// @param {Number} $scale_end [0.9] - The scale factor at the midpoint of the animation. +/// @param {Angle} $rotation [10deg] - The rotation angle at the midpoint of the animation. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_twist( + $scale_end: 0.9, + $rotation: 10deg, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_twist, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_twist { + 0%, 100% { transform: scale(1) rotate(0deg); } + 50% { transform: scale($scale_end) rotate($rotation); } + } +} + + + +// Gentle Twist Animation +// ---------------------------------------------------------------------------- + +/// +/// Gentle Twist Animation +/// A slower and subtler version of the Twist animation. +/// @name animate_twist_slow +/// @param {Number} $scale_end [0.95] - The scale factor at the midpoint of the animation. +/// @param {Angle} $rotation [5deg] - The rotation angle at the midpoint of the animation. +/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_twist_slow( + $scale_end: 0.95, + $rotation: 5deg, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_twist_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_twist_slow { + 0%, 100% { transform: scale(1) rotate(0deg); } + 50% { transform: scale($scale_end) rotate($rotation); } + } +} + + + +// Rapid Twist Animation +// ---------------------------------------------------------------------------- + +/// +/// Rapid Twist Animation +/// A faster and more intense version of the Twist animation. +/// @name animate_twist_fast +/// @param {Number} $scale_end [0.85] - The scale factor at the midpoint of the animation. +/// @param {Angle} $rotation [15deg] - The rotation angle at the midpoint of the animation. +/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_twist_fast( + $scale_end: 0.85, + $rotation: 15deg, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_twist_fast, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_twist_fast { + 0%, 100% { transform: scale(1) rotate(0deg); } + 50% { transform: scale($scale_end) rotate($rotation); } + } +} + + + +// Twist with Color Change +// ---------------------------------------------------------------------------- + +/// +/// Twist with Color Change Animation +/// Adds a color transition to the Twist animation. +/// @name animate_twist_color +/// @param {Number} $scale_end [0.9] - The scale factor at the midpoint of the animation. +/// @param {Angle} $rotation [10deg] - The rotation angle at the midpoint of the animation. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// @param {Color} $color_start [$animate_base_color_start] - The starting color of the animation. +/// @param {Color} $color_end [$animate_base_color_end] - The ending color of the animation. +/// +@mixin animate_twist_color( + $scale_end: 0.9, + $rotation: 10deg, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count, + $color_start: $animate_base_color_start, + $color_end: $animate_base_color_end, +) { + @include animate_base( + animate_twist_color, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_twist_color { + 0%, 100% { + transform: scale(1) rotate(0deg); + color: $color_start; + } + 50% { + transform: scale($scale_end) rotate($rotation); + color: $color_end; + } + } +} diff --git a/dist/scss/mixins/animations/_wave.scss b/dist/scss/mixins/animations/_wave.scss new file mode 100644 index 0000000..589f132 --- /dev/null +++ b/dist/scss/mixins/animations/_wave.scss @@ -0,0 +1,166 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Wave Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + +/// +/// Wave Animation +/// Creates a wave effect by rotating an element back and forth. +/// @name animate_wave +/// @param {Angle} $angle [20deg] - The maximum rotation angle during the wave. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_wave( + $angle: 20deg, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_wave, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_wave { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + + +// Gentle Wave Animation +// ---------------------------------------------------------------------------- + +/// +/// Gentle Wave Animation +/// A slower and subtler wave animation. +/// @name animate_wave_slow +/// @param {Angle} $angle [10deg] - The maximum rotation angle during the wave. +/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_wave_slow( + $angle: 10deg, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_wave_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_wave_slow { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + + + +// Rapid Wave Animation +// ---------------------------------------------------------------------------- + +/// +/// Rapid Wave Animation +/// A faster and more intense wave animation. +/// @name animate_wave_fast +/// @param {Angle} $angle [30deg] - The maximum rotation angle during the wave. +/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_wave_fast( + $angle: 30deg, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_wave_fast, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_wave_fast { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate($angle); } + } +} + + + +// Wave with Fade Animation +// ---------------------------------------------------------------------------- + +/// +/// Wave with Fade Animation +/// A wave animation combined with a fading effect. +/// @name animate_wave_fade +/// @param {Angle} $angle [20deg] - The maximum rotation angle during the wave. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_wave_fade( + $angle: 20deg, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_wave_fade + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_wave_fade { + 0%, 100% { + transform: rotate(0deg); + opacity: 1; + } + 50% { + transform: rotate($angle); + opacity: 0.5; + } + } +} diff --git a/dist/scss/mixins/animations/_wobble.scss b/dist/scss/mixins/animations/_wobble.scss new file mode 100644 index 0000000..dfb4bea --- /dev/null +++ b/dist/scss/mixins/animations/_wobble.scss @@ -0,0 +1,254 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Wobble Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + + + + +/// +/// Wobble Animation +/// Creates a wobble effect by rotating an element back and forth. +/// @name animate_wobble +/// @param {Angle} $angle [5deg] - The maximum rotation angle during the wobble. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_wobble( + $angle: 5deg, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_wobble, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_wobble { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(-$angle); } + 50% { transform: rotate($angle); } + 75% { transform: rotate(-$angle); } + } +} + + +// Gentle Wobble Animation +// ---------------------------------------------------------------------------- + +/// +/// Gentle Wobble Animation +/// A slower and subtler wobble animation. +/// @name animate_wobble_slow +/// @param {Angle} $angle [3deg] - The maximum rotation angle during the wobble. +/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_wobble_slow( + $angle: 3deg, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_wobble_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_wobble_slow { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(-$angle); } + 50% { transform: rotate($angle); } + 75% { transform: rotate(-$angle); } + } +} + + +// Rapid Wobble Animation +// ---------------------------------------------------------------------------- + +/// +/// Rapid Wobble Animation +/// A faster and more intense wobble animation. +/// @name animate_wobble_fast +/// @param {Angle} $angle [10deg] - The maximum rotation angle during the wobble. +/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_wobble_fast( + $angle: 10deg, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_wobble_fast, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_wobble_fast { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(-$angle); } + 50% { transform: rotate($angle); } + 75% { transform: rotate(-$angle); } + } +} + + +// Wobble with Scale Animation +// ---------------------------------------------------------------------------- + +/// +/// Wobble with Scale Animation +/// A wobble animation combined with a scaling effect. +/// @name animate_wobble_scale +/// @param {Angle} $angle [5deg] - The maximum rotation angle during the wobble. +/// @param {Number} $scale [1.1] - The scale factor during the wobble. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_wobble_scale( + $angle: 5deg, + $scale: 1.1, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_wobble_scale, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_wobble_scale { + 0%, 100% { transform: scale(1) rotate(0deg); } + 25% { transform: scale($scale) rotate(-$angle); } + 50% { transform: scale($scale) rotate($angle); } + 75% { transform: scale($scale) rotate(-$angle); } + } +} + + + + +// originally authored by Nick Pettit - https://github.com/nickpettit/glide + +// @-webkit-keyframes wobble { +// from { +// -webkit-transform: none; +// transform: none; +// } + +// 15% { +// -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); +// transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); +// } + +// 30% { +// -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); +// transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); +// } + +// 45% { +// -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); +// transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); +// } + +// 60% { +// -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); +// transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); +// } + +// 75% { +// -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); +// transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); +// } + +// 100% { +// -webkit-transform: none; +// transform: none; +// } +// } + +// @keyframes wobble { +// from { +// -webkit-transform: none; +// transform: none; +// } + +// 15% { +// -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); +// transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); +// } + +// 30% { +// -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); +// transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); +// } + +// 45% { +// -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); +// transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); +// } + +// 60% { +// -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); +// transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); +// } + +// 75% { +// -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); +// transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); +// } + +// 100% { +// -webkit-transform: none; +// transform: none; +// } +// } + +// .wobble { +// -webkit-animation-name: wobble; +// animation-name: wobble; +// } + \ No newline at end of file diff --git a/dist/scss/mixins/animations/_zoom.scss b/dist/scss/mixins/animations/_zoom.scss new file mode 100644 index 0000000..a0a4428 --- /dev/null +++ b/dist/scss/mixins/animations/_zoom.scss @@ -0,0 +1,166 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Zoom Animations Mixin Module +/// =========================================================================== +/// +/// This module ... +/// +/// +/// @group Animations +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Zoom Animation +/// Creates a zoom effect by scaling an element. +/// +/// @name animate_zoom +/// @param {Number} $scale [1.5] - The scale factor at the peak of the animation. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_zoom( + $scale: 1.5, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_zoom, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_zoom { + 0%, 100% { transform: scale(1); } + 50% { transform: scale($scale); } + } +} + + + +// Gentle Zoom Animation +// ---------------------------------------------------------------------------- + +/// +/// Gentle Zoom Animation +/// A slower and subtler zoom animation. +/// +/// @name animate_zoom_slow +/// @param {Number} $scale [1.3] - The scale factor at the peak of the animation. +/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_zoom_slow( + $scale: 1.3, + $duration: $animate_base_duration_slow, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_zoom_slow, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_zoom_slow { + 0%, 100% { transform: scale(1); } + 50% { transform: scale($scale); } + } +} + + + +// Rapid Zoom Animation +// ---------------------------------------------------------------------------- + +/// +/// Rapid Zoom Animation +/// A faster and more intense zoom animation. +/// @name animate_zoom_fast +/// @param {Number} $scale [1.7] - The scale factor at the peak of the animation. +/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_zoom_fast( + $scale: 1.7, + $duration: $animate_base_duration_fast, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_zoom_fast, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_zoom_fast { + 0%, 100% { transform: scale(1); } + 50% { transform: scale($scale); } + } +} + + +// Zoom with Fade Animation +// ---------------------------------------------------------------------------- + +/// +/// Zoom with Fade Animation +/// Combines zoom with a fade effect. +/// @name animate_zoom_fade +/// @param {Number} $scale [1.5] - The scale factor at the peak of the animation. +/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation. +/// @param {String} $timing_function [ease-in-out] - The timing function for the animation. +/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run. +/// +@mixin animate_zoom_fade( + $scale: 1.5, + $duration: $animate_base_duration, + $timing_function: ease-in-out, + $iteration_count: $animate_base_iteration_count +) { + @include animate_base( + animate_zoom_fade, + $duration, + $timing_function, + $iteration_count, + ); + @keyframes animate_zoom_fade { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale($scale); + opacity: 0.5; + } + } +} diff --git a/dist/scss/mixins/effects/_filter.scss b/dist/scss/mixins/effects/_filter.scss new file mode 100644 index 0000000..c4ce7b6 --- /dev/null +++ b/dist/scss/mixins/effects/_filter.scss @@ -0,0 +1,148 @@ +/// +/// Basic Filter Mixins +/// Here's how you can create SCSS mixins for commonly used filter effects, +/// allowing for easy reuse throughout your stylesheets: +/// + +/// +/// Mixin for blur effect. +/// +/// @param {Length} $radius [0] - The radius of the blur effect. Default is 0. +/// +/// @example scss - Usage +/// .example { +/// @include filter_blur(5px); +/// } +/// + @mixin filter_blur($radius: 0) { + filter: blur($radius); +} + +/// +/// Mixin for grayscale effect. +/// +/// @param {Percentage} $amount [100%] - The amount of grayscale to apply. Default is 100%. +/// +/// @example scss - Usage +/// .example { +/// @include filter_grayscale(50%); +/// } +/// +@mixin filter_grayscale($amount: 100%) { + filter: grayscale($amount); +} + +/// +/// Mixin for brightness effect. +/// +/// @param {Percentage} $amount [100%] - The amount of brightness to apply. Default is 100%. +/// +/// @example scss - Usage +/// .example { +/// @include filter_brightness(120%); +/// } +/// +@mixin filter_brightness($amount: 100%) { + filter: brightness($amount); +} + +/// +/// Mixin for contrast effect. +/// +/// @param {Percentage} $amount [100%] - The amount of contrast to apply. Default is 100%. +/// +/// @example scss - Usage +/// .example { +/// @include filter_contrast(80%); +/// } +/// +@mixin filter_contrast($amount: 100%) { + filter: contrast($amount); +} + +/// +/// Mixin for sepia effect. +/// +/// @param {Percentage} $amount [100%] - The amount of sepia to apply. Default is 100%. +/// +/// @example scss - Usage +/// .example { +/// @include filter_sepia(50%); +/// } +/// +@mixin filter_sepia($amount: 100%) { + filter: sepia($amount); +} + +/// +/// Mixin for invert effect. +/// +/// @param {Percentage} $amount [100%] - The amount of inversion to apply. Default is 100%. +/// +/// @example scss - Usage +/// .example { +/// @include filter_invert(50%); +/// } +/// +@mixin filter_invert($amount: 100%) { + filter: invert($amount); +} + +/// +/// Mixin for hue-rotate effect. +/// +/// @param {Angle} $angle [0deg] - The angle of hue rotation. Default is 0deg. +/// +/// @example scss - Usage +/// .example { +/// @include filter_hue_rotate(90deg); +/// } +/// +@mixin filter_hue_rotate($angle: 0deg) { + filter: hue-rotate($angle); +} + +/// +/// Mixin for saturate effect. +/// +/// @param {Percentage} $amount [100%] - The amount of saturation to apply. Default is 100%. +/// +/// @example scss - Usage +/// .example { +/// @include filter_saturate(200%); +/// } +/// +@mixin filter_saturate($amount: 100%) { + filter: saturate($amount); +} + +/// +/// Mixin for drop shadow effect. +/// +/// @param {Length} $offsetX [0] - The horizontal offset of the shadow. Default is 0. +/// @param {Length} $offsetY [0] - The vertical offset of the shadow. Default is 0. +/// @param {Length} $blurRadius [0] - The blur radius of the shadow. Default is 0. +/// @param {Color} $color [#000] - The color of the shadow. Default is black. +/// +/// @example scss - Usage +/// .example { +/// @include filter_drop_shadow(10px, 10px, 5px, rgba(0, 0, 0, 0.5)); +/// } +/// +@mixin filter_drop_shadow($offsetX: 0, $offsetY: 0, $blurRadius: 0, $color: #000) { + filter: drop-shadow($offsetX $offsetY $blurRadius $color); +} + +/// +/// Mixin for combining multiple filters. +/// +/// @param {...} $filters - A list of filters to apply. +/// +/// @example scss - Usage +/// .example { +/// @include filter_multi(filter_blur(5px), filter_brightness(120%)); +/// } +/// +@mixin filter_multi($filters...) { + filter: $filters; +} \ No newline at end of file diff --git a/dist/scss/mixins/effects/_index.scss b/dist/scss/mixins/effects/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/mixins/effects/_shadow.scss b/dist/scss/mixins/effects/_shadow.scss new file mode 100644 index 0000000..18df83b --- /dev/null +++ b/dist/scss/mixins/effects/_shadow.scss @@ -0,0 +1,21 @@ +/// Applies a material design-inspired elevation (shadow) to an element. +/// +/// @name elevation +/// @param {Number} $level - The elevation level (1-24). +/// @example scss - Usage +/// @include elevation(4); +@mixin elevation($level) { + $elevations: ( + 1: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24), + 2: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23), + 3: 0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23), + 4: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22), + 5: 0px 19px 38px rgba(0, 0, 0, 0.30), 0px 15px 12px rgba(0, 0, 0, 0.22) + ); + + @if map-has-key($elevations, $level) { + box-shadow: map-get($elevations, $level); + } @else { + @warn "Invalid elevation level: #{$level}."; + } +} \ No newline at end of file diff --git a/dist/scss/mixins/loaders/_index.scss b/dist/scss/mixins/loaders/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/mixins/loaders/_progress.scss b/dist/scss/mixins/loaders/_progress.scss new file mode 100644 index 0000000..78cf318 --- /dev/null +++ b/dist/scss/mixins/loaders/_progress.scss @@ -0,0 +1,174 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +@use "../variables" as *; +@use "../mixins" as *; + + + + + +// /* Add the correct vertical alignment in Chrome, Firefox, and Opera */ +// progress { +// vertical-align: baseline; +// } + + + +// // Disable animation if transitions are disabled + +// // scss-docs-start progress-keyframes +// @if $enable-transitions { +// @keyframes progress-bar-stripes { +// 0% { background-position-x: $progress-height; } +// } +// } +// // scss-docs-end progress-keyframes + +// .progress, +// .progress-stacked { +// // scss-docs-start progress-css-vars +// --#{$prefix}progress-height: #{$progress-height}; +// @include rfs($progress-font-size, --#{$prefix}progress-font-size); +// --#{$prefix}progress-bg: #{$progress-bg}; +// --#{$prefix}progress-border-radius: #{$progress-border-radius}; +// --#{$prefix}progress-box-shadow: #{$progress-box-shadow}; +// --#{$prefix}progress-bar-color: #{$progress-bar-color}; +// --#{$prefix}progress-bar-bg: #{$progress-bar-bg}; +// --#{$prefix}progress-bar-transition: #{$progress-bar-transition}; +// // scss-docs-end progress-css-vars + +// display: flex; +// height: var(--#{$prefix}progress-height); +// overflow: hidden; // force rounded corners by cropping it +// @include font-size(var(--#{$prefix}progress-font-size)); +// background-color: var(--#{$prefix}progress-bg); +// @include border-radius(var(--#{$prefix}progress-border-radius)); +// @include box-shadow(var(--#{$prefix}progress-box-shadow)); +// } + +// .progress-bar { +// display: flex; +// flex-direction: column; +// justify-content: center; +// overflow: hidden; +// color: var(--#{$prefix}progress-bar-color); +// text-align: center; +// white-space: nowrap; +// background-color: var(--#{$prefix}progress-bar-bg); +// @include transition(var(--#{$prefix}progress-bar-transition)); +// } + +// .progress-bar-striped { +// @include gradient-striped(); +// background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); +// } + +// .progress-stacked > .progress { +// overflow: visible; +// } + +// .progress-stacked > .progress > .progress-bar { +// width: 100%; +// } + +// @if $enable-transitions { +// .progress-bar-animated { +// animation: $progress-bar-animation-timing progress-bar-stripes; + +// @if $enable-reduced-motion { +// @media (prefers-reduced-motion: reduce) { +// animation: none; +// } +// } +// } +// } + + + + +// // @import "../utilities/mixins" + +// // $progress-bar-background-color: $border-light !default +// // $progress-value-background-color: $text !default +// // $progress-border-radius: $radius-rounded !default + +// // $progress-indeterminate-duration: 1.5s !default + +// // $progress-colors: $colors !default + +// // .progress +// // @extend %block +// // -moz-appearance: none +// // -webkit-appearance: none +// // border: none +// // border-radius: $progress-border-radius +// // display: block +// // height: $size-normal +// // overflow: hidden +// // padding: 0 +// // width: 100% +// // &::-webkit-progress-bar +// // background-color: $progress-bar-background-color +// // &::-webkit-progress-value +// // background-color: $progress-value-background-color +// // &::-moz-progress-bar +// // background-color: $progress-value-background-color +// // &::-ms-fill +// // background-color: $progress-value-background-color +// // border: none +// // // Colors +// // @each $name, $pair in $progress-colors +// // $color: nth($pair, 1) +// // &.is-#{$name} +// // &::-webkit-progress-value +// // background-color: $color +// // &::-moz-progress-bar +// // background-color: $color +// // &::-ms-fill +// // background-color: $color +// // &:indeterminate +// // background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) + +// // &:indeterminate +// // animation-duration: $progress-indeterminate-duration +// // animation-iteration-count: infinite +// // animation-name: moveIndeterminate +// // animation-timing-function: linear +// // background-color: $progress-bar-background-color +// // background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) +// // background-position: top left +// // background-repeat: no-repeat +// // background-size: 150% 150% +// // &::-webkit-progress-bar +// // background-color: transparent +// // &::-moz-progress-bar +// // background-color: transparent +// // &::-ms-fill +// // animation-name: none + +// // // Sizes +// // &.is-small +// // height: $size-small +// // &.is-medium +// // height: $size-medium +// // &.is-large +// // height: $size-large + +// // @keyframes moveIndeterminate +// // from +// // background-position: 200% 0 +// // to +// // background-position: -200% 0 \ No newline at end of file diff --git a/dist/scss/mixins/loaders/_spinner.scss b/dist/scss/mixins/loaders/_spinner.scss new file mode 100644 index 0000000..119a356 --- /dev/null +++ b/dist/scss/mixins/loaders/_spinner.scss @@ -0,0 +1,101 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +@use "../variables" as *; +@use "../mixins" as *; +// +// Rotating border +// + +.spinner-grow, +.spinner-border { + display: inline-block; + width: var(--#{$prefix}spinner-width); + height: var(--#{$prefix}spinner-height); + vertical-align: var(--#{$prefix}spinner-vertical-align); + // stylelint-disable-next-line property-disallowed-list + border-radius: 50%; + animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name); +} + +// scss-docs-start spinner-border-keyframes +@keyframes spinner-border { + to { transform: rotate(360deg) #{"/* rtl:ignore */"}; } +} +// scss-docs-end spinner-border-keyframes + +.spinner-border { + // scss-docs-start spinner-border-css-vars + --#{$prefix}spinner-width: #{$spinner-width}; + --#{$prefix}spinner-height: #{$spinner-height}; + --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; + --#{$prefix}spinner-border-width: #{$spinner-border-width}; + --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; + --#{$prefix}spinner-animation-name: spinner-border; + // scss-docs-end spinner-border-css-vars + + border: var(--#{$prefix}spinner-border-width) solid currentcolor; + border-right-color: transparent; +} + +.spinner-border-sm { + // scss-docs-start spinner-border-sm-css-vars + --#{$prefix}spinner-width: #{$spinner-width-sm}; + --#{$prefix}spinner-height: #{$spinner-height-sm}; + --#{$prefix}spinner-border-width: #{$spinner-border-width-sm}; + // scss-docs-end spinner-border-sm-css-vars +} + +// +// Growing circle +// + +// scss-docs-start spinner-grow-keyframes +@keyframes spinner-grow { + 0% { + transform: scale(0); + } + 50% { + opacity: 1; + transform: none; + } +} +// scss-docs-end spinner-grow-keyframes + +.spinner-grow { + // scss-docs-start spinner-grow-css-vars + --#{$prefix}spinner-width: #{$spinner-width}; + --#{$prefix}spinner-height: #{$spinner-height}; + --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; + --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; + --#{$prefix}spinner-animation-name: spinner-grow; + // scss-docs-end spinner-grow-css-vars + + background-color: currentcolor; + opacity: 0; +} + +.spinner-grow-sm { + --#{$prefix}spinner-width: #{$spinner-width-sm}; + --#{$prefix}spinner-height: #{$spinner-height-sm}; +} + +@if $enable-reduced-motion { + @media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2}; + } + } +} diff --git a/dist/scss/mixins/loaders/circle_01.scss b/dist/scss/mixins/loaders/circle_01.scss new file mode 100644 index 0000000..f349d74 --- /dev/null +++ b/dist/scss/mixins/loaders/circle_01.scss @@ -0,0 +1,22 @@ +// https://cssloaders.github.io/ + + +.loader { + width: 48px; + height: 48px; + border: 5px solid #FFF; + border-bottom-color: #FF3D00; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/dist/scss/mixins/loaders/circle_02.scss b/dist/scss/mixins/loaders/circle_02.scss new file mode 100644 index 0000000..199aa99 --- /dev/null +++ b/dist/scss/mixins/loaders/circle_02.scss @@ -0,0 +1,19 @@ +.loader { + width: 48px; + height: 48px; + border: 5px solid #FFF; + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/dist/scss/mixins/loaders/circle_03.scss b/dist/scss/mixins/loaders/circle_03.scss new file mode 100644 index 0000000..20fbfa0 --- /dev/null +++ b/dist/scss/mixins/loaders/circle_03.scss @@ -0,0 +1,29 @@ +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + position: relative; + animation: rotate 1s linear infinite +} + +.loader::before { + content: ""; + box-sizing: border-box; + position: absolute; + inset: 0px; + border-radius: 50%; + border: 5px solid #FFF; + animation: prixClipFix 2s linear infinite ; +} + +@keyframes rotate { + 100% {transform: rotate(360deg)} +} + +@keyframes prixClipFix { + 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)} + 25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)} + 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)} + 75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)} + 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)} +} \ No newline at end of file diff --git a/dist/scss/mixins/loaders/circle_inner_01.scss b/dist/scss/mixins/loaders/circle_inner_01.scss new file mode 100644 index 0000000..35ae108 --- /dev/null +++ b/dist/scss/mixins/loaders/circle_inner_01.scss @@ -0,0 +1,33 @@ +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + position: relative; + animation: rotate 1s linear infinite +} + +.loader::before , .loader::after { + content: ""; + box-sizing: border-box; + position: absolute; + inset: 0px; + border-radius: 50%; + border: 5px solid #FFF; + animation: prixClipFix 2s linear infinite ; +} + +.loader::after{ + transform: rotate3d(90, 90, 0, 180deg ); + border-color: #FF3D00; +} + +@keyframes rotate { + 0% {transform: rotate(0deg)} + 100% {transform: rotate(360deg)} +} + +@keyframes prixClipFix { + 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)} + 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)} + 75%, 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)} +} \ No newline at end of file diff --git a/dist/scss/mixins/loaders/circle_inner_02.scss b/dist/scss/mixins/loaders/circle_inner_02.scss new file mode 100644 index 0000000..6c2cd55 --- /dev/null +++ b/dist/scss/mixins/loaders/circle_inner_02.scss @@ -0,0 +1,33 @@ +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + position: relative; + animation: rotate 1s linear infinite +} + + .loader::before , .loader::after { + content: ""; + box-sizing: border-box; + position: absolute; + inset: 0px; + border-radius: 50%; + border: 5px solid #FFF; + animation: prixClipFix 2s linear infinite ; + } + .loader::after{ + inset: 8px; + transform: rotate3d(90, 90, 0, 180deg ); + border-color: #FF3D00; + } + + @keyframes rotate { + 0% {transform: rotate(0deg)} + 100% {transform: rotate(360deg)} + } + + @keyframes prixClipFix { + 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)} + 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)} + 75%, 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)} + } \ No newline at end of file diff --git a/dist/scss/mixins/loaders/circle_inner_03.scss b/dist/scss/mixins/loaders/circle_inner_03.scss new file mode 100644 index 0000000..a3e9b40 --- /dev/null +++ b/dist/scss/mixins/loaders/circle_inner_03.scss @@ -0,0 +1,34 @@ +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + position: relative; + animation: rotate 1s linear infinite + } + .loader::before , .loader::after { + content: ""; + box-sizing: border-box; + position: absolute; + inset: 0px; + border-radius: 50%; + border: 5px solid #FFF; + animation: prixClipFix 2s linear infinite ; + } + .loader::after{ + border-color: #FF3D00; + animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse; + inset: 6px; + } + + @keyframes rotate { + 0% {transform: rotate(0deg)} + 100% {transform: rotate(360deg)} + } + + @keyframes prixClipFix { + 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)} + 25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)} + 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)} + 75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)} + 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)} + } \ No newline at end of file diff --git a/dist/scss/mixins/mouse/_cursor.scss b/dist/scss/mixins/mouse/_cursor.scss new file mode 100644 index 0000000..636a2f1 --- /dev/null +++ b/dist/scss/mixins/mouse/_cursor.scss @@ -0,0 +1,182 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Cursors Mixin Module +/// =========================================================================== +/// +/// This module provides a comprehensive set of mixins for managing cursor +/// styles in CSS. It includes utility mixins for common cursor types, +/// custom cursors with fallback options, animated cursors, and advanced +/// use cases involving state-based and responsive cursor handling. +/// +/// +/// @group Mouse +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../variables" as *; +@use "../maps" as *; +@use "../mixins" as *; + + + + + + + +/// +/// Mixin for applying a cursor style using predefined cursor types from the map. +/// +/// @mixin cursor_style +/// @param {String} $type ['default'] - The cursor style to apply. +/// @example scss - Usage +/// .element { @include cursor_style('pointer'); } // Applies pointer cursor +/// +@mixin cursor_style($type: "default") { + @if map-has-key($cursor_styles, $type) { + cursor: map-get($cursor_styles, $type); + } @else { + cursor: $type; // Fallback if type is not in map + } +} + +/// +/// Mixin for custom cursor images with fallback options. +/// +/// @mixin cursor_custom +/// @param {String} $url - URL of the custom cursor image. +/// @param {String} $fallback ['pointer'] - Fallback cursor style. +/// @example scss - Usage +/// .element { @include cursor_custom('path/to/cursor.png', 'pointer'); } +/// +@mixin cursor_custom($url, $fallback: pointer) { + cursor: url($url), $fallback; + // cursor: url(#{$url}), #{$fallback}; +} + + + + + + +// ============================================================================ +// Utility Mixins for Common Cursor Styles +// ============================================================================ + +@mixin cursor_pointer { @include cursor_style('pointer'); } +@mixin cursor_text { @include cursor_style('text'); } +@mixin cursor_disabled { @include cursor_style('not-allowed'); } +@mixin cursor_move { @include cursor_style('move'); } +@mixin cursor_grab { @include cursor_style('grab'); } +@mixin cursor_grabbing { @include cursor_style('grabbing'); } +@mixin cursor_help { @include cursor_style('help'); } +@mixin cursor_wait { @include cursor_style('wait'); } +@mixin cursor_crosshair { @include cursor_style('crosshair'); } +@mixin cursor_zoom_in { @include cursor_style('zoom-in'); } +@mixin cursor_zoom_out { @include cursor_style('zoom-out'); } + +// ============================================================================ +// Advanced Mixins +// ============================================================================ + +/// +/// Mixin for hover and focus cursor effects. +/// +/// @mixin hover_focus_cursor +/// @param {String} $hover ['pointer'] - Cursor style on hover. +/// @param {String} $focus ['pointer'] - Cursor style on focus. +/// +@mixin hover_focus_cursor($hover: pointer, $focus: pointer) { + &:hover { cursor: $hover; } + &:focus { + cursor: $focus; + outline: none; // Customize focus styles as needed + } +} + +/// +/// Mixin for responsive cursor handling based on device capability. +/// +/// @mixin cursor_responsive +/// @param {String} $desktop ['pointer'] - Cursor for desktop devices. +/// @param {String} $touch ['default'] - Cursor for touch devices. +/// +@mixin cursor_responsive($desktop: pointer, $touch: default) { + @media (pointer: fine) { cursor: $desktop; } + @media (pointer: coarse) { cursor: $touch; } +} + +/// +/// Mixin for animated cursors using a series of images. +/// +/// @mixin cursor_animated +/// @param {List} $images - A list of image URLs for animation frames. +/// @param {Time} $interval ['0.5s'] - Interval between frames. +/// +@mixin cursor_animated($images, $interval: 0.5s) { + $animation-frames: (); + $index: 0; + + @each $image in $images { + $index: $index + 1; + $percentage: percentage($index / length($images)); + $animation-frames: append($animation-frames, ($percentage $image), comma); + } + + @keyframes cursor-animation { + @each $frame in $animation-frames { + #{nth($frame, 1)} { + cursor: url(#{nth($frame, 2)}), auto; + } + } + } + + animation: cursor-animation $interval infinite; +} + +// ============================================================================ +// Utility Class Generator for Common Cursors +// ============================================================================ + +// $cursors: ('pointer', 'text', 'wait', 'crosshair', 'not-allowed', 'zoom-in', 'grab', 'grabbing'); + +@each $cursor in $cursors { + .cursor-#{$cursor} { + @include cursor_style($cursor); + } +} + +// ============================================================================ +// Examples of Using Advanced Mixins +// ============================================================================ + +// /// Example: Advanced hover and focus with cursor change and background effect +// .interactive-element { +// @include hover_focus_cursor(pointer, pointer); +// &:hover { background-color: lighten($primaryColor, 5%); } +// &:focus { background-color: lighten($primaryColor, 10%); } +// } + +// /// Example: Responsive cursor handling for different devices +// .button { +// @include cursor_responsive(pointer, default); +// } + +// /// Example: Using animated cursor with a series of images +// .cursor-animated-element { +// @include cursor_animated(('image1.png', 'image2.png', 'image3.png')); +// } \ No newline at end of file diff --git a/dist/scss/mixins/mouse/_index.scss b/dist/scss/mixins/mouse/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/mixins/mouse/_pointer.scss b/dist/scss/mixins/mouse/_pointer.scss new file mode 100644 index 0000000..c36d4e6 --- /dev/null +++ b/dist/scss/mixins/mouse/_pointer.scss @@ -0,0 +1,258 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Pointers Mixin Module +/// =========================================================================== +/// +/// This module provides mixins for managing pointer events in CSS, allowing +/// for easy application of the `pointer-events` property with support for both +/// global and keyword values. These mixins are useful for managing user +/// interactions on various elements, including SVGs and standard HTML +/// elements. The module includes simplified mixins for frequently used +/// pointer-event states and utility mixins to handle hover styles based on +/// pointer-event settings. +/// +/// +/// @group Mouse +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../mixins" as *; + + +// ============================================================================ +// Mixins +// ============================================================================ + +/// +/// Mixin for setting pointer-events property with support for both global and +/// keyword values. This mixin can be used to enable or disable pointer events +/// on an element. +/// +/// @name pointer_events +/// @param {String} $state ['auto'] - The desired pointer-events state (e.g., 'auto', 'none', 'inherit'). +/// @example scss - Usage +/// .interactive-element { @include pointer_events(auto); } // Enable pointer events +/// .non-interactive-element { @include pointer_events(none); } // Disable pointer events +/// +@mixin pointer_events($state: auto) { + pointer-events: $state; +} + + + +// ============================================================================ +// Global Pointer Event Values +// ============================================================================ + +/// +/// Mixin for setting pointer-events to inherit from parent element. +/// +/// @name pointer_inherit +/// @example scss - Usage +/// .element { @include pointer_inherit; } // Inherits pointer-events from parent +/// +@mixin pointer_inherit { + @include pointer_events(inherit); +} + +/// +/// Mixin for setting pointer-events to initial value. +/// +/// @name pointer_initial +/// @example scss - Usage +/// .element { @include pointer_initial; } // Sets pointer-events to initial +/// +@mixin pointer_initial { + @include pointer_events(initial); +} + +/// +/// Mixin for setting pointer-events to revert. +/// +/// @name pointer_revert +/// @example scss - Usage +/// .element { @include pointer_revert; } // Reverts pointer-events to previous value +/// +@mixin pointer_revert { + @include pointer_events(revert); +} + +/// +/// Mixin for setting pointer-events to revert-layer. +/// +/// @name pointer_revert-layer +/// @example scss - Usage +/// .element { @include pointer_revert-layer; } // Sets pointer-events to revert-layer +/// +@mixin pointer_revert-layer { + @include pointer_events(revert-layer); +} + +/// +/// Mixin for setting pointer-events to unset. +/// +/// @name pointer_unset +/// @example scss - Usage +/// .element { @include pointer_unset; } // Sets pointer-events to unset +/// +@mixin pointer_unset { + @include pointer_events(unset); +} + +// ============================================================================ +// Keyword Pointer Event Values +// ============================================================================ + +/// +/// Mixin for setting pointer-events to auto, enabling all interactions. +/// +/// @name pointer_auto +/// @example scss - Usage +/// .element { @include pointer_auto; } // Enables pointer events +/// +@mixin pointer_auto { + @include pointer_events(auto); +} + +/// +/// Mixin for setting pointer-events to none, disabling all interactions. +/// +/// @name pointer_none +/// @example scss - Usage +/// .element { @include pointer_none; } // Disables pointer events +/// +@mixin pointer_none { + @include pointer_events(none); +} + +/// +/// Mixin for setting pointer-events to all (SVG Only). +/// +/// @name pointer_all +/// @example scss - Usage +/// .svg-element { @include pointer_all; } // Enables all pointer events on SVG +/// +@mixin pointer_all { + @include pointer_events(all); +} + +// Additional SVG-specific pointer-events mixins + +@mixin pointer_fill { + @include pointer_events(fill); +} + +@mixin pointer_painted { + @include pointer_events(painted); +} + +@mixin pointer_stroke { + @include pointer_events(stroke); +} + +@mixin pointer_visible { + @include pointer_events(visible); +} + +@mixin pointer_visible-fill { + @include pointer_events(visibleFill); +} + +@mixin pointer_visible-painted { + @include pointer_events(visiblePainted); +} + +@mixin pointer_visible-stroke { + @include pointer_events(visibleStroke); +} + +// ============================================================================ +// Utility Mixins +// ============================================================================ + +/// +/// Mixin for applying hover styles only when pointer events are enabled. +/// This ensures hover styles do not apply if the element is non-interactive. +/// +/// @name pointer_hover_check +/// @example scss - Usage +/// .interactive-element { +/// @include pointer_hover_check { +/// color: red; +/// } +/// } +/// +@mixin pointer_hover_check { + @if pointer-events != 'none' { + &:hover { + @content; + } + } +} + +/// +/// Simplified mixin for commonly used global pointer-events values. +/// Accepts 'inherit', 'initial', 'revert', 'revert-layer', and 'unset'. +/// +/// @name pointer_global +/// @param {String} $value - The global value for pointer-events. +/// @example scss - Usage +/// .element { @include pointer_global(inherit); } +/// +@mixin pointer_global($value) { + @include pointer_events($value); +} + +/// +/// Simplified mixin for commonly used keyword pointer-events values. +/// Accepts 'auto', 'none', 'all' and SVG-specific values. +/// +/// @name pointer_keyword +/// @param {String} $value - The keyword value for pointer-events. +/// @example scss - Usage +/// .element { @include pointer_keyword(auto); } +/// +@mixin pointer_keyword($value) { + @include pointer_events($value); +} + + + + + + + +// ============================================================================ +// Predefined Classes for Common Use Cases +// ============================================================================ + +.interactive-element { + @include pointer_auto; // Enables pointer events +} + +.non-interactive-element { + @include pointer_none; // Disables pointer events +} + +.custom-element { + @include pointer_visible-painted; // Applies visiblePainted for SVG elements +} + diff --git a/dist/scss/mixins/scroll/_index.scss b/dist/scss/mixins/scroll/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/mixins/scroll/_scroll.scss b/dist/scss/mixins/scroll/_scroll.scss new file mode 100644 index 0000000..ea93f80 --- /dev/null +++ b/dist/scss/mixins/scroll/_scroll.scss @@ -0,0 +1,104 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Scroll Mixins +/// =========================================================================== +/// +/// This module provides mixins to enable smooth scrolling and scroll snapping +/// features for containers, enhancing user interaction and navigation within +/// scrollable elements. +/// +/// +/// +/// @group Mouse +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor +/// @access public +/// +//// + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../variables" as *; +@use "../mixins" as *; + + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Mixin to enable smooth scrolling for a container. +/// Provides a smooth scroll behavior for elements that overflow. +/// +/// @mixin scroll_smooth +/// @param {Boolean} $enable [true] - Enables smooth scrolling if true, disables otherwise. +/// @param {Boolean} $touch_scrolling [true] - Enables WebKit touch scrolling if true. +/// +/// @example scss - Usage +/// .scrollable-container { +/// @include scroll_smooth(true, true); +/// } +/// +@mixin scroll_smooth( + $enable: true, + $touch_scrolling: true +) { + @if $enable { + scroll-behavior: smooth; + } @else { + scroll-behavior: auto; + } + + @if $touch_scrolling { + -webkit-overflow-scrolling: touch; + } @else { + -webkit-overflow-scrolling: auto; + } +} + +/// +/// Mixin to set up scroll snapping for a container. +/// Configures scroll snapping for elements, useful for creating carousels or +/// step-by-step guides with smooth navigation between sections. +/// +/// @mixin scroll_snap +/// @param {String} $type [y mandatory] - The scroll snapping type ('x' or 'y', and 'mandatory' or 'proximity'). +/// @param {String} $align [start] - Alignment of the snapped items (start, center, end, or none). +/// @param {String} $stop [normal] - Specifies the scroll-snap-stop behavior (normal, always). +/// +/// @example scss - Usage +/// .snap-container { +/// @include scroll_snap('x mandatory', 'center', 'always'); +/// } +/// +@mixin scroll_snap( + $type: y mandatory, + $align: start, + $stop: normal +) { + scroll-snap-type: $type; + scroll-snap-align: $align; + scroll-snap-stop: $stop; +} + + +/// Example usage +.scrollable-container { + @include scroll_smooth(); // Enables smooth scrolling with default settings +} + +.snap-container { + @include scroll_snap(x mandatory, center); // Sets up horizontal snapping to center +} \ No newline at end of file diff --git a/dist/scss/mixins/scroll/_scrollbar.scss b/dist/scss/mixins/scroll/_scrollbar.scss new file mode 100644 index 0000000..8f373ac --- /dev/null +++ b/dist/scss/mixins/scroll/_scrollbar.scss @@ -0,0 +1,249 @@ + + +// ============================================================================ +// Scrollbar +// ============================================================================ +@use "../variables" as *; +@use "../mixins" as *; + +/* +::-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: $width / 2; + border: 2px solid $track-color; + &:hover { + background: darken($thumb-color, 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: darken($thumb-color, 10%), + $thumb-active-color: darken($thumb-color, 20%) +) { + // Scrollbar track + &::-webkit-scrollbar { + width: $width; + height: $width; // For horizontal scrollbars + } + + &::-webkit-scrollbar-track { + background: $track-color; + border-radius: $width / 2; + box-shadow: inset 0 0 5px grey; // Optional: adds inset shadow to the track + } + + // Scrollbar thumb + &::-webkit-scrollbar-thumb { + background: $thumb-color; + border-radius: $width / 2; + border: 3px solid $track-color; // Creates a margin between the track and thumb + + &: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; + } +} + + diff --git a/dist/scss/mixins/transforms/_flip.scss b/dist/scss/mixins/transforms/_flip.scss new file mode 100644 index 0000000..1e60e2e --- /dev/null +++ b/dist/scss/mixins/transforms/_flip.scss @@ -0,0 +1,76 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Flip Transforms Mixin Module +/// =========================================================================== +/// This module provides mixins for flipping elements in various directions, +/// such as horizontally, vertically, or both. These mixins can be used to +/// easily apply flip transforms throughout your project. +/// +/// @group Transforms +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Mixin for flipping elements horizontally. +/// Applies a horizontal flip by scaling the element along the X-axis. +/// +/// @name transform_flip_horizontal +/// @example scss - Usage +/// .transform_flip_horizontal { @include transform_flip_horizontal(); } +/// +@mixin transform_flip_horizontal { + transform: scale(-1, 1); +} + + +/// +/// Mixin for flipping elements vertically. +/// Applies a vertical flip by scaling the element along the Y-axis. +/// +/// @name transform_flip_vertical +/// @example scss - Usage +/// .transform_flip_vertical { @include transform_flip_vertical(); } +/// +@mixin transform_flip_vertical { + transform: scale(1, -1); +} + + +/// +/// Mixin for flipping elements both horizontally and vertically. +/// Combines horizontal and vertical flips to mirror the element. +/// +/// @name transform_flip_both +/// @example scss - Usage +/// .transform_flip_both { @include transform_flip_both(); } +/// +@mixin transform_flip_both { + transform: scale(-1, -1); +} diff --git a/dist/scss/mixins/transforms/_index.scss b/dist/scss/mixins/transforms/_index.scss new file mode 100644 index 0000000..28ba8b3 --- /dev/null +++ b/dist/scss/mixins/transforms/_index.scss @@ -0,0 +1,23 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Transforms Mixin Module +/// =========================================================================== +/// This module provides reusable mixins for applying transformations such as +/// rotations and flips to elements. It includes mixins for rotating elements +/// by a specified degree, as well as predefined classes for common rotation +/// angles. This module is designed to facilitate the application of CSS +/// transforms in a consistent and maintainable manner throughout your project. +/// +/// @group Transforms +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + diff --git a/dist/scss/mixins/transforms/_matrix.scss b/dist/scss/mixins/transforms/_matrix.scss new file mode 100644 index 0000000..56e7cbd --- /dev/null +++ b/dist/scss/mixins/transforms/_matrix.scss @@ -0,0 +1 @@ +https://developer.mozilla.org/en-US/docs/Web/CSS/transform \ No newline at end of file diff --git a/dist/scss/mixins/transforms/_perspective.scss b/dist/scss/mixins/transforms/_perspective.scss new file mode 100644 index 0000000..8b86600 --- /dev/null +++ b/dist/scss/mixins/transforms/_perspective.scss @@ -0,0 +1,11 @@ +/// +/// Mixin for setting perspective on elements, useful for 3D transforms. +/// +/// @mixin perspective +/// @param {Number} $value [$default-perspective] - The perspective value for 3D transformations. +/// @example scss - Usage +/// .icon-perspective { @include perspective(1000px); } // Applies a perspective of 1000px +/// +@mixin perspective($value: $default-perspective) { + perspective: $value; +} diff --git a/dist/scss/mixins/transforms/_rotate.scss b/dist/scss/mixins/transforms/_rotate.scss new file mode 100644 index 0000000..2b75118 --- /dev/null +++ b/dist/scss/mixins/transforms/_rotate.scss @@ -0,0 +1,101 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Rotate Transforms Mixin Module +/// =========================================================================== +/// +/// @group Transforms +/// @author Scape Agency +/// @link https://move.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + + + +// ============================================================================ +// Use +// ============================================================================ + +@use "../dev" as *; +@use "../variables" as *; +@use "../keyframes" as *; +@use "base" as *; + + + +// ============================================================================ +// Mixins +// ============================================================================ + + +/// +/// Mixin for rotating elements by a specified degree. +/// Applies a CSS rotation transform to the element. +/// +/// @name transform_rotate +/// @param {Number} $degrees [0deg] - The degree to rotate the element. +/// @example scss - Usage +/// .icon_rotate { @include transform_rotate(90deg); } // Rotates icon by 90 degrees +/// +@mixin transform_rotate($degrees: 0deg) { + transform: rotate($degrees); +} + + +/// +/// Mixin for rotating elements based on a dynamic value from a CSS variable. +/// This allows for rotations that can be adjusted at runtime using CSS variables. +/// +/// @name transform_rotate_dynamic +/// @param {String} $variable [--rotation-angle] - The CSS variable to use for dynamic rotation. +/// @example scss - Usage +/// .transform_rotate_dynamic { @include transform_rotate_dynamic('--my_custom_rotation'); } +/// +@mixin transform_rotate_dynamic($variable: '--rotation_angle') { + transform: rotate(var(#{$variable})); +} + + + + +/// +/// Mixin for rotating elements along the X-axis. +/// +/// @name transform_rotate_x +/// @param {Number} $degrees [$default-rotation] - The degree to rotate the element along the X-axis. +/// @example scss - Usage +/// .icon-transform_rotate_x { @include transform_rotate_x(45deg); } // Rotates the element 45 degrees along the X-axis +/// +@mixin transform_rotate_x($degrees: $default-rotation) { + transform: rotateX($degrees); +} + +/// +/// Mixin for rotating elements along the Y-axis. +/// +/// @name transform_rotate_y +/// @param {Number} $degrees [$default-rotation] - The degree to rotate the element along the Y-axis. +/// @example scss - Usage +/// .icon-transform_rotate_y { @include transform_rotate_y(45deg); } // Rotates the element 45 degrees along the Y-axis +/// +@mixin transform_rotate_y($degrees: $default-rotation) { + transform: rotateY($degrees); +} + +/// +/// Mixin for rotating elements along the Z-axis. +/// +/// @name transform_rotate_z +/// @param {Number} $degrees [$default-rotation] - The degree to rotate the element along the Z-axis. +/// @example scss - Usage +/// .icon-transform_rotate_z { @include transform_rotate_z(45deg); } // Rotates the element 45 degrees along the Z-axis +/// +@mixin transform_rotate_z($degrees: $default-rotation) { + transform: rotateZ($degrees); +} diff --git a/dist/scss/mixins/transforms/_scale.scss b/dist/scss/mixins/transforms/_scale.scss new file mode 100644 index 0000000..1d03481 --- /dev/null +++ b/dist/scss/mixins/transforms/_scale.scss @@ -0,0 +1,11 @@ +/// +/// Mixin for scaling elements by a specified factor. +/// +/// @mixin scale +/// @param {Number} $factor [1] - The scaling factor. +/// @example scss - Usage +/// .icon_scale { @include scale(1.5); } // Scales the element by 1.5 +/// +@mixin scale($factor: 1) { + transform: scale($factor); +} diff --git a/dist/scss/mixins/transforms/_skew.scss b/dist/scss/mixins/transforms/_skew.scss new file mode 100644 index 0000000..c7bb397 --- /dev/null +++ b/dist/scss/mixins/transforms/_skew.scss @@ -0,0 +1,13 @@ + +/// +/// Mixin for skewing elements by specified angles along X and Y axes. +/// +/// @mixin skew +/// @param {Number} $x [$default-skew] - The angle to skew along the X-axis. +/// @param {Number} $y [$default-skew] - The angle to skew along the Y-axis. +/// @example scss - Usage +/// .icon-skew { @include skew(10deg, 5deg); } // Skews the element 10deg on X-axis and 5deg on Y-axis +/// +@mixin skew($x: $default-skew, $y: $default-skew) { + transform: skew($x, $y); +} \ No newline at end of file diff --git a/dist/scss/mixins/transforms/_translate.scss b/dist/scss/mixins/transforms/_translate.scss new file mode 100644 index 0000000..d98fa49 --- /dev/null +++ b/dist/scss/mixins/transforms/_translate.scss @@ -0,0 +1,13 @@ + +/// +/// Mixin for translating elements by a specified distance along X and Y axes. +/// +/// @mixin translate +/// @param {Number} $x [$default-translate] - The distance to translate along the X-axis. +/// @param {Number} $y [$default-translate] - The distance to translate along the Y-axis. +/// @example scss - Usage +/// .icon-translate { @include translate(10px, 20px); } // Moves the element 10px right and 20px down +/// +@mixin translate($x: $default-translate, $y: $default-translate) { + transform: translate($x, $y); +} \ No newline at end of file diff --git a/dist/scss/mixins/transitions/_index.scss b/dist/scss/mixins/transitions/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/scss/mixins/transitions/_transition.scss b/dist/scss/mixins/transitions/_transition.scss new file mode 100644 index 0000000..aebc11a --- /dev/null +++ b/dist/scss/mixins/transitions/_transition.scss @@ -0,0 +1,13 @@ +/// +/// Applies a transition to an element. +/// +/// @name transition +/// @param {String} $property - The CSS property to transition. +/// @param {String} $duration - The duration of the transition (default: 0.3s). +/// @param {String} $timing-function - The timing function of the transition (default: ease). +/// @example scss - Usage +/// @include transition('all', '0.3s', 'ease-in-out'); +/// +@mixin transition($property, $duration: 0.3s, $timing-function: ease) { + transition: #{$property} #{$duration} #{$timing-function}; +} \ No newline at end of file diff --git a/dist/scss/variables/_animation.scss b/dist/scss/variables/_animation.scss new file mode 100644 index 0000000..8e6c2da --- /dev/null +++ b/dist/scss/variables/_animation.scss @@ -0,0 +1,91 @@ + +// ============================================================================ +// StyleScape | Animations | Base +// ============================================================================ + +@use "../dev" as *; + + +// Default Variables +// ---------------------------------------------------------------------------- + +$animate_base_duration: 1s !default; +$animate_base_duration_fast: 0.5s !default; +$animate_base_duration_slow: 2s !default; + +$animate_base_delay: 0s !default; +$animate_base_timing_function: ease-in-out !default; +$animate_base_iteration_count: infinite !default; +$animate_base_direction: normal !default; +$animate_base_color_start: #ffffff !default; +$animate_base_color_end: #000000 !default; +$animate_base_color_glow_01: $N2405 !default; +$animate_base_color_glow_02: $N3005 !default; +$animate_base_color_glow_03: $N3605 !default; + + +// ============================================================================ + +$transition_duration_00: 0.5s; +$transition_duration_01: 1.0s; +$transition_duration_02: 1.5s; +$transition_duration_03: 2.0s; + + + +$slideshow-time: 6s; + + + +// ============================================================================ + +/// Default animation durations +$animate-base-duration: 0.5s !default; +$animate-base-duration-slow: 1s !default; +$animate-base-duration-fast: 0.25s !default; + +/// Default timing functions +$animate-base-timing-function: ease-in-out !default; +$animate-base-timing-function-fade: cubic-bezier(.4, 0, .6, 1) !default; + +/// Default iteration counts +$animate-base-iteration-count: infinite !default; + +/// Default scale values +$animate-scale-base: 1 !default; +$animate-scale-beat: 1.25 !default; +$animate-scale-beat-fade: 1.125 !default; +$animate-scale-beat-double-small: 0.8 !default; +$animate-scale-beat-double-large: 1.5 !default; + +/// Default opacity values +$animate-opacity-fade: 0.4 !default; + +/// Default angles +$animate-angle-twist: 10deg !default; +$animate-angle-gentle: 5deg !default; +$animate-angle-rapid: 15deg !default; + + + + + + +/// Animation Durations +$animate-base-duration: 0.5s !default; +$animate-base-duration-slow: 1s !default; +$animate-base-duration-fast: 0.25s !default; + +/// Timing Functions +$animate-base-timing-function: step-end !default; +$animate-timing-function-rapid: steps(2, end) !default; +$animate-timing-function-soft: ease-in-out !default; +$animate-timing-function-alternate: linear !default; + +/// Iteration Count +$animate-base-iteration-count: infinite !default; + +/// Opacity Levels +$animate-opacity-start: 1 !default; +$animate-opacity-blink: 0 !default; +$animate-opacity-soft-blink: 0.3 !default; \ No newline at end of file diff --git a/dist/scss/variables/_index.scss b/dist/scss/variables/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/dist/ts/ARContent.ts b/dist/ts/ARContent.ts new file mode 100644 index 0000000..ce0b3a8 --- /dev/null +++ b/dist/ts/ARContent.ts @@ -0,0 +1,27 @@ +/** + * @title Augmented Reality Content Manager + * @notice Manages the lifecycle and interaction of AR content in web applications. + * @dev Supports dynamic content updates, positioning, and user interaction in an augmented reality context. + */ + class ARContentManager { + private scene: any; // Placeholder for an AR framework scene object, like AR.js or similar. + + constructor(scene: any) { + this.scene = scene; + } + + public addContent(modelUrl: string, lat: number, lon: number) { + console.log(`Adding AR content at [${lat}, ${lon}] from ${modelUrl}`); + // Here you'd add the model to the scene at the specified geolocation. + } + + public updateContent(modelId: string, properties: any) { + console.log(`Updating content ${modelId} with properties`, properties); + // Update properties like scale, rotation, or interactive elements. + } + + public removeContent(modelId: string) { + console.log(`Removing content ${modelId}`); + // Remove a model from the scene. + } +} diff --git a/dist/ts/ARInteraction.ts b/dist/ts/ARInteraction.ts new file mode 100644 index 0000000..c66d0b9 --- /dev/null +++ b/dist/ts/ARInteraction.ts @@ -0,0 +1,34 @@ +/** + * @title AR Interaction Handler + * @notice Manages Augmented Reality overlays and interactions using the WebXR Device API. + * @dev Provides functionalities to place and interact with virtual objects in the real world through the user's camera. + */ + class ARInteractionHandler { + private xrSession: XRSession | null = null; + + constructor() { + this.checkARSupport(); + } + + private async checkARSupport() { + if (navigator.xr && await navigator.xr.isSessionSupported('immersive-ar')) { + console.log("AR is supported."); + this.initAR(); + } else { + console.error("AR is not supported on this device."); + } + } + + private async initAR() { + this.xrSession = await navigator.xr.requestSession('immersive-ar'); + this.setupARSession(); + } + + private setupARSession() { + // Initialize and configure AR session settings + } + + public addARObjectAt(x: number, y: number, z: number, object: HTMLElement) { + // Translate screen coordinates to real-world coordinates and add an object there + } +} diff --git a/dist/ts/AdaptiveUI.ts b/dist/ts/AdaptiveUI.ts new file mode 100644 index 0000000..25e1dd8 --- /dev/null +++ b/dist/ts/AdaptiveUI.ts @@ -0,0 +1,25 @@ +/** + * @title Adaptive UI Elements Handler + * @notice Dynamically adjusts UI components based on user interactions and environmental contexts. + * @dev Utilizes event listeners and media queries to adapt the UI for different user needs and device capabilities. + */ + class AdaptiveUIHandler { + constructor() { + this.setupResponsiveListeners(); + } + + private setupResponsiveListeners() { + window.addEventListener('resize', this.adjustLayout); + window.addEventListener('orientationchange', this.adjustLayout); + } + + private adjustLayout = () => { + if (window.innerWidth < 600) { + console.log("Switching to mobile layout"); + // Adjust UI for mobile layout. + } else { + console.log("Switching to desktop layout"); + // Adjust UI for desktop layout. + } + } +} diff --git a/dist/ts/ContentStreaming.ts b/dist/ts/ContentStreaming.ts new file mode 100644 index 0000000..1ae1263 --- /dev/null +++ b/dist/ts/ContentStreaming.ts @@ -0,0 +1,20 @@ +/** + * @title Dynamic Content Streaming Handler + * @notice Manages the streaming and dynamic loading of content into web applications, optimizing for network and rendering performance. + * @dev Utilizes service workers and caching strategies to manage content delivery and updates. + */ + class ContentStreamingHandler { + constructor(private baseUrl: string) {} + + public async streamContent(contentPath: string) { + const response = await fetch(`${this.baseUrl}/${contentPath}`); + if (!response.ok) { + throw new Error('Failed to load content: ' + response.statusText); + } + return response.blob(); // Return the raw data for further processing or direct display + } + + public updateContentCache(contentId: string, data: Blob) { + // Use IndexedDB or local storage to cache content for offline use or quicker loading + } +} diff --git a/dist/ts/Draggable.ts b/dist/ts/Draggable.ts new file mode 100644 index 0000000..ce1c177 --- /dev/null +++ b/dist/ts/Draggable.ts @@ -0,0 +1,71 @@ +// Copyright 2024 Scape Agency BV + + +// Draggable Element Class +// Creating draggable elements on the screen can enhance interactivity, especially for applications that involve organizing or direct manipulation of elements, such as dashboards or graphic editors. + + +/** + * @title Draggable Element Handler + * @notice Provides functionality to make an element draggable within the confines of its parent container. + * @dev Supports both mouse and touch interactions, ensuring usability across different devices. + */ + class Draggable { + private element: HTMLElement; + private isDragging: boolean = false; + private startX: number; + private startY: number; + private boundRect: DOMRect; + + constructor(elementId: string) { + this.element = document.getElementById(elementId) as HTMLElement; + this.boundRect = this.element.parentElement!.getBoundingClientRect(); + this.attachEventListeners(); + } + + private attachEventListeners() { + this.element.addEventListener('mousedown', this.startDrag); + this.element.addEventListener('touchstart', this.startDrag, { passive: false }); + + document.addEventListener('mouseup', this.stopDrag); + document.addEventListener('touchend', this.stopDrag); + + document.addEventListener('mousemove', this.drag); + document.addEventListener('touchmove', this.drag, { passive: false }); + } + + private startDrag = (event: MouseEvent | TouchEvent) => { + if (event instanceof TouchEvent) { + event = event.touches[0]; + } + this.isDragging = true; + this.startX = event.clientX - this.element.offsetLeft; + this.startY = event.clientY - this.element.offsetTop; + event.preventDefault(); + }; + + private drag = (event: MouseEvent | TouchEvent) => { + if (!this.isDragging) return; + if (event instanceof TouchEvent) { + event = event.touches[0]; + } + + let x = event.clientX - this.startX; + let y = event.clientY - this.startY; + + // Constrain the movement within the bounds of the element's parent + x = Math.max(this.boundRect.left, Math.min(x, this.boundRect.right - this.element.offsetWidth)); + y = Math.max(this.boundRect.top, Math.min(y, this.boundRect.bottom - this.element.offsetHeight)); + + this.element.style.left = `${x}px`; + this.element.style.top = `${y}px`; + }; + + private stopDrag = () => { + if (this.isDragging) { + this.isDragging = false; + } + }; +} + +new Draggable('draggableElement'); diff --git a/dist/ts/DynamicEnvironment.ts b/dist/ts/DynamicEnvironment.ts new file mode 100644 index 0000000..fd40173 --- /dev/null +++ b/dist/ts/DynamicEnvironment.ts @@ -0,0 +1,60 @@ +/** + * @title Dynamic Environment Handler + * @notice Controls dynamic changes in the virtual environment to enhance immersion. + * @dev Manages environmental effects like lighting, weather, and background changes. + */ + class DynamicEnvironmentHandler { + private environmentSettings: any; + + constructor(private scene: any) { + this.environmentSettings = { + lighting: 'daylight', + weather: 'clear' + }; + } + + public changeLighting(type: string) { + // Change lighting type in the scene + this.environmentSettings.lighting = type; + } + + public changeWeather(type: string) { + // Implement weather changes such as rain, snow, or fog + this.environmentSettings.weather = type; + } + + public updateEnvironment() { + // Apply the changes to the scene based on current settings + } +} + + + + +/** + * @title Environmental Effects Handler + * @notice Manages and applies dynamic environmental effects within immersive web applications. + * @dev Provides an API to change environmental conditions programmatically. + */ + class EnvironmentalEffectsHandler { + private scene: any; // This would be your 3D scene object from a library like Three.js + + constructor(scene: any) { + this.scene = scene; + } + + public changeWeather(weatherType: string) { + console.log(`Changing weather to ${weatherType}`); + // Implementation depends on how weather effects are visualized. This could involve changing textures, particle systems, etc. + } + + public toggleDayNight(isNight: boolean) { + console.log(`Setting environment to ${isNight ? "night" : "day"}`); + // Adjust lighting, skybox, and other environmental factors to reflect day or night + } + + public triggerLightning() { + console.log("Triggering lightning effect"); + // Activate a lightning effect with visuals and sound + } +} diff --git a/dist/ts/Gesture.ts b/dist/ts/Gesture.ts new file mode 100644 index 0000000..18549f5 --- /dev/null +++ b/dist/ts/Gesture.ts @@ -0,0 +1,168 @@ +// Copyright 2024 Scape Agency BV + + +// Touch Gesture Handler Class +// A class for handling touch gestures can interpret user input like swipes, taps, and pinch actions, which are common in mobile and modern web applications. + + +/** + * @title Touch Gesture Handler Class + * @notice Manages touch interactions on a specified element, interpreting various gestures like taps, swipes, and pinches. + * @dev This class attaches touch event listeners to an element and interprets common gestures by analyzing touch points. + */ + class TouchGestureHandler { + private element: HTMLElement; + private startTouches: TouchList | null = null; + private isSwiping = false; + private isPinching = false; + + constructor(elementId: string) { + this.element = document.getElementById(elementId) as HTMLElement; + this.addTouchListeners(); + } + + private addTouchListeners() { + this.element.addEventListener('touchstart', this.handleTouchStart, false); + this.element.addEventListener('touchmove', this.handleTouchMove, false); + this.element.addEventListener('touchend', this.handleTouchEnd, false); + } + + private handleTouchStart = (event: TouchEvent) => { + if (event.touches.length === 1) { + this.startTouches = event.touches; + console.log("Tap started or potential swipe:", event.touches); + } else if (event.touches.length > 1) { + this.startTouches = event.touches; + console.log("Pinch started or potential rotation:", event.touches); + this.isPinching = true; + } + }; + + private handleTouchMove = (event: TouchEvent) => { + if (event.touches.length === 1 && this.startTouches && !this.isPinching) { + const dx = event.touches[0].clientX - this.startTouches[0].clientX; + const dy = event.touches[0].clientY - this.startTouches[0].clientY; + if (Math.abs(dx) > 10 || Math.abs(dy) > 10) { + this.isSwiping = true; + console.log(`Swipe detected: deltaX = ${dx}, deltaY = ${dy}`); + } + } else if (event.touches.length > 1 && this.isPinching) { + const startDistance = this.getDistance(this.startTouches[0], this.startTouches[1]); + const currentDistance = this.getDistance(event.touches[0], event.touches[1]); + const scale = currentDistance / startDistance; + console.log(`Pinch scaling factor: ${scale}`); + } + }; + + private handleTouchEnd = (event: TouchEvent) => { + if (this.isSwiping) { + console.log("Swipe ended"); + this.isSwiping = false; + } else if (this.isPinching) { + console.log("Pinch ended"); + this.isPinching = false; + } else { + console.log("Tap confirmed"); + } + this.startTouches = null; + }; + + /** + * Calculates the distance between two touch points. + * @param touch1 First touch point. + * @param touch2 Second touch point. + * @returns Distance in pixels. + */ + private getDistance(touch1: Touch, touch2: Touch): number { + const dx = touch2.clientX - touch1.clientX; + const dy = touch2.clientY - touch1.clientY; + return Math.sqrt(dx * dx + dy * dy); + } +} + +new TouchGestureHandler('touchElement'); + + + + + + + +/** + * @title Advanced Gesture Recognition Handler + * @notice Handles complex gestures for interactive applications, enhancing user experience with intuitive controls. + * @dev Utilizes pointer events to detect and interpret various gestures. + */ + class AdvancedGestureRecognition { + private element: HTMLElement; + private ongoingTouches: Map = new Map(); + + constructor(elementId: string) { + this.element = document.getElementById(elementId) as HTMLElement; + this.attachEventListeners(); + } + + private attachEventListeners() { + this.element.addEventListener('pointerdown', this.handleGestureStart, { passive: false }); + this.element.addEventListener('pointermove', this.handleGestureMove, { passive: false }); + this.element.addEventListener('pointerup', this.handleGestureEnd, { passive: false }); + } + + private handleGestureStart = (event: PointerEvent) => { + this.ongoingTouches.set(event.pointerId, event); + console.log("Gesture started:", event.pointerType); + }; + + private handleGestureMove = (event: PointerEvent) => { + if (this.ongoingTouches.has(event.pointerId)) { + const startEvent = this.ongoingTouches.get(event.pointerId)!; + const dx = event.clientX - startEvent.clientX; + const dy = event.clientY - startEvent.clientY; + console.log(`Gesture moved: ${dx}px horizontal, ${dy}px vertical`); + } + }; + + private handleGestureEnd = (event: PointerEvent) => { + this.ongoingTouches.delete(event.pointerId); + console.log("Gesture ended"); + }; +} + + + + +/** + * @title Advanced Interaction Controls + * @notice Enhances user interactions within immersive environments with sophisticated input methods. + * @dev Integrates gesture recognition, voice commands, and potentially eye tracking for advanced control. + */ + class AdvancedInteractionControls { + constructor() { + this.initializeGestureControls(); + this.initializeVoiceCommands(); + } + + private initializeGestureControls() { + console.log("Gesture controls initialized."); + // Setup gesture recognition logic or integrate with a library like Hammer.js + } + + private initializeVoiceCommands() { + console.log("Voice command system initialized."); + // Setup voice recognition using APIs like the Web Speech API + } + + public onGestureRecognized(gesture: string) { + console.log(`Gesture recognized: ${gesture}`); + // Respond to specific gestures + } + + public onVoiceCommand(command: string) { + console.log(`Voice command received: ${command}`); + // Execute actions based on voice commands + } +} + + + + diff --git a/dist/ts/ImmersiveAudio.ts b/dist/ts/ImmersiveAudio.ts new file mode 100644 index 0000000..c793ce9 --- /dev/null +++ b/dist/ts/ImmersiveAudio.ts @@ -0,0 +1,40 @@ +/** + * @title Immersive Audio Handler + * @notice Provides control over spatial and immersive audio in web applications. + */ + class ImmersiveAudioHandler { + private audioContext: AudioContext; + private listener: AudioListener; + private soundSources: Map = new Map(); + + constructor() { + this.audioContext = new AudioContext(); + this.listener = this.audioContext.listener; + } + + public loadSound(url: string, id: string): Promise { + return fetch(url) + .then(response => response.arrayBuffer()) + .then(buffer => this.audioContext.decodeAudioData(buffer)) + .then(decodedBuffer => { + const source = this.audioContext.createBufferSource(); + source.buffer = decodedBuffer; + source.connect(this.audioContext.destination); + this.soundSources.set(id, source); + }); + } + + public playSound(id: string) { + const source = this.soundSources.get(id); + if (source) { + source.start(); + } + } + + public stopSound(id: string) { + const source = this.soundSources.get(id); + if (source) { + source.stop(); + } + } +} diff --git a/dist/ts/InteractiveCanvas.ts b/dist/ts/InteractiveCanvas.ts new file mode 100644 index 0000000..2300678 --- /dev/null +++ b/dist/ts/InteractiveCanvas.ts @@ -0,0 +1,177 @@ +// Copyright 2024 Scape Agency BV + + + +// Interactive Canvas Class +// A class for an interactive canvas can enable users to draw, which is +// beneficial for applications like signature pads, drawing tools, or educational apps. + + +/** + * @title Interactive Canvas for Drawing + * @notice This class enables drawing functionalities on a canvas element, supporting features like brush customization, undo/redo actions, and touch responsiveness. + * @dev Implements event listeners for both mouse and touch interactions, provides methods for brush customization, and maintains a history stack for undo/redo capabilities. + */ + class InteractiveCanvas { + private canvas: HTMLCanvasElement; + private context: CanvasRenderingContext2D; + private painting: boolean = false; + private brushSize: number = 5; + private brushColor: string = '#000000'; + private lineOpacity: number = 1.0; + private history: ImageData[] = []; + private historyStep: number = 0; + + /** + * Constructs an InteractiveCanvas instance linked to a specific canvas element. + * @param canvasId The DOM ID of the canvas element. + */ + constructor(canvasId: string) { + this.canvas = document.getElementById(canvasId) as HTMLCanvasElement; + this.context = this.canvas.getContext('2d')!; + this.setupCanvas(); + this.attachEventListeners(); + } + + /** + * Sets up the canvas drawing context and adjusts the canvas size to its initial container. + */ + private setupCanvas() { + this.context.lineWidth = this.brushSize; + this.context.lineCap = 'round'; + this.context.strokeStyle = this.brushColor; + this.context.globalAlpha = this.lineOpacity; + window.addEventListener('resize', this.resizeCanvas); + this.resizeCanvas(); + } + + /** + * Attaches necessary event listeners for mouse and touch interactions. + */ + private attachEventListeners() { + this.canvas.addEventListener('mousedown', this.startPaint); + this.canvas.addEventListener('mouseup', this.endPaint); + this.canvas.addEventListener('mousemove', this.paint); + this.canvas.addEventListener('touchstart', this.startPaint, { passive: false }); + this.canvas.addEventListener('touchend', this.endPaint); + this.canvas.addEventListener('touchmove', this.paint, { passive: false }); + } + + /** + * Adjusts the canvas size to fit its container, ensuring that it is responsive to window size changes. + */ + private resizeCanvas = () => { + this.canvas.width = this.canvas.offsetWidth; + this.canvas.height = this.canvas.offsetHeight; + }; + + /** + * Initiates painting on the canvas, records the initial position, and saves the state for undo functionality. + * @param event Mouse or touch event that triggers the start of painting. + */ + private startPaint = (event: MouseEvent | TouchEvent) => { + event.preventDefault(); + this.painting = true; + const pos = this.getEventPosition(event); + this.context.moveTo(pos.x, pos.y); + this.context.beginPath(); + this.saveState(); + }; + + /** + * Stops the painting process on the canvas. + */ + private endPaint = () => { + this.painting = false; + }; + + /** + * Continues the painting process, drawing lines based on mouse or touch movements. + * @param event Mouse or touch event containing the current position for painting. + */ + private paint = (event: MouseEvent | TouchEvent) => { + if (!this.painting) return; + const pos = this.getEventPosition(event); + this.context.lineTo(pos.x, pos.y); + this.context.stroke(); + }; + + /** + * Calculates the precise position of the mouse or touch event relative to the canvas. + * @param event Mouse or touch event. + * @returns The calculated position as an object with x and y coordinates. + */ + private getEventPosition(event: MouseEvent | TouchEvent) { + if (event instanceof TouchEvent) { + const rect = this.canvas.getBoundingClientRect(); + const touch = event.touches[0]; + return { x: touch.clientX - rect.left, y: touch.clientY - rect.top }; + } else { + return { x: event.clientX - this.canvas.offsetLeft, y: event.clientY - this.canvas.offsetTop }; + } + } + + /** + * Sets the brush size for painting. + * @param size New brush size. + */ + public setBrushSize(size: number) { + this.brushSize = size; + this.context.lineWidth = size; + } + + /** + * Sets the color of the brush. + * @param color New brush color in CSS format. + */ + public setBrushColor(color: string) { + this.brushColor = color; + this.context.strokeStyle = color; + } + + /** + * Sets the opacity of the brush strokes. + * @param opacity A value between 0.0 (fully transparent) and 1.0 (fully opaque). + */ + public setOpacity(opacity: number) { + this.lineOpacity = opacity; + this.context.globalAlpha = opacity; + } + + /** + * Undoes the last action taken on the canvas, reverting to the previous state. + */ + public undo() { + if (this.historyStep > 0) { + this.historyStep--; + this.context.putImageData(this.history[this.historyStep], 0, 0); + } + } + + /** + * Redoes an action that was previously undone on the canvas, if possible. + */ + public redo() { + if (this.historyStep < this.history.length - 1) { + this.historyStep++; + this.context.putImageData(this.history[this.historyStep], 0, 0); + } + } + + /** + * Saves the current state of the canvas for future undo operations. + */ + private saveState() { + if (this.historyStep < this.history.length) this.history.splice(this.historyStep); + this.history.push(this.context.getImageData(0, 0, this.canvas.width, this.canvas.height)); + this.historyStep = this.history.length; + } + + /** + * Clears the entire canvas and saves the state for undo functionality. + */ + public clearCanvas() { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.saveState(); + } +} diff --git a/dist/ts/InteractiveVideo.ts b/dist/ts/InteractiveVideo.ts new file mode 100644 index 0000000..119bbbe --- /dev/null +++ b/dist/ts/InteractiveVideo.ts @@ -0,0 +1,29 @@ +/** + * @title Interactive Video Playback Handler + * @notice Manages complex interactive video elements within web applications. + */ + class InteractiveVideoHandler { + private videoElement: HTMLVideoElement; + + constructor(videoId: string) { + this.videoElement = document.getElementById(videoId) as HTMLVideoElement; + } + + public addHotspot(x: number, y: number, callback: () => void) { + const hotspot = document.createElement("button"); + hotspot.style.position = "absolute"; + hotspot.style.left = `${x}px`; + hotspot.style.top = `${y}px`; + hotspot.innerText = "Click me!"; + hotspot.addEventListener("click", callback); + this.videoElement.parentElement!.appendChild(hotspot); + } + + public play() { + this.videoElement.play(); + } + + public pause() { + this.videoElement.pause(); + } +} diff --git a/dist/ts/Keyboard.ts b/dist/ts/Keyboard.ts new file mode 100644 index 0000000..bf41e3f --- /dev/null +++ b/dist/ts/Keyboard.ts @@ -0,0 +1,162 @@ +// Copyright 2024 Scape Agency BV + + +/** + * @title Virtual Keyboard + * @notice Manages the rendering and interaction of a virtual keyboard on + * the web. + * @dev This class supports multiple layouts (default, shift, special) and + * handles both mouse and keyboard inputs, including touch support. + */ + class VirtualKeyboard { + + private keys: { [mode: string]: string[][] } = { + 'default': [ + ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'], + ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'], + ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'], + ['z', 'x', 'c', 'v', 'b', 'n', 'm', 'Backspace'] + ], + 'shift': [ + ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')'], + ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'], + ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'], + ['Z', 'X', 'C', 'V', 'B', 'N', 'M', 'Backspace'] + ], + 'special': [ + ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='], + ['_', '\\', '|', '~', '<', '>', '€', '£', '¥'], + ['.', ',', '?', '!', "'", '"', ':', ';', 'Backspace'] + ] + }; + private currentMode = 'default'; + private inputElement: HTMLInputElement; + private keyboardElement: HTMLElement; + + /** + * @notice Initializes the virtual keyboard with specific input and + * keyboard element IDs. + * @param inputId The ID of the HTML input element to which the keyboard + * will be linked. + * @param keyboardId The ID of the container element where the keyboard + * will be rendered. + */ + constructor(inputId: string, keyboardId: string) { + this.inputElement = document.getElementById( + inputId + ) as HTMLInputElement; + this.keyboardElement = document.getElementById( + keyboardId + ) as HTMLElement; + this.renderKeyboard(); + this.attachEventListeners(); + } + + /** + * @notice Renders the keyboard based on the current mode (default, shift, + * or special). + * @dev Dynamically creates HTML for keyboard keys and appends them to the + * keyboardElement. + */ + private renderKeyboard() { + // Clear existing keys + this.keyboardElement.innerHTML = ''; + this.keys[this.currentMode].forEach(row => { + const rowElement = document.createElement('div'); + row.forEach(key => { + const keyElement = document.createElement('div'); + keyElement.textContent = key; + // Assign a class for easier CSS styling + keyElement.className = 'key'; + keyElement.addEventListener( + 'click', () => this.handleKeyPress(key) + ); + rowElement.appendChild(keyElement); + }); + this.keyboardElement.appendChild(rowElement); + }); + } + + /** + * @notice Handles key presses on the virtual keyboard. + * @param key The key character or function (like 'Backspace') that was + * pressed. + */ + private handleKeyPress(key: string) { + if (key === 'Backspace') { + this.inputElement.value = this.inputElement.value.slice(0, -1); + } else if (key === 'Shift' || key === 'CapsLock') { + this.toggleShift(); + } else { + this.inputElement.value += key; + } + } + + /** + * @notice Toggles the keyboard between 'default' and 'shift' modes. + * @dev This method is called when the 'Shift' or 'CapsLock' key is pressed. + */ + private toggleShift() { + this.currentMode = this.currentMode === 'default' ? 'shift' : 'default'; + this.renderKeyboard(); + } + + /** + * @notice Attaches necessary event listeners to handle both physical + * keyboard and touch inputs. + */ + private attachEventListeners() { + document.addEventListener('keydown', this.handlePhysicalKeyPress); + this.keyboardElement.addEventListener( + 'touchstart', this.handleTouchStart, false + ); + } + + /** + * @notice Handles physical keyboard events and maps them to virtual key + * presses. + * @param event The keyboard event captured from the user's physical + * keyboard. + */ + private handlePhysicalKeyPress = (event: KeyboardEvent) => { + const key = event.key; + if (key === 'Shift' || key === 'CapsLock') { + this.toggleShift(); + event.preventDefault(); + } else if (key === 'Enter' || key === 'Tab') { + // Optional: Implement behavior for Enter and Tab if needed + } else { + this.handleKeyPress(key); + } + }; + + /** + * @notice Handles touch events on the keyboard element. + * @param event The touch event on the virtual keyboard. + */ + private handleTouchStart = (event: TouchEvent) => { + event.preventDefault(); // Prevents emulating mouse events + const keyElement = event.target as HTMLElement; + if (keyElement.classList.contains('key')) { + this.handleKeyPress(keyElement.textContent || ''); + } + }; + + /** + * @notice Switches the keyboard layout to a specified mode. + * @param mode The mode to which the keyboard layout should switch + * ('default', 'shift', or 'special'). + */ + public switchMode(mode: string) { + if (this.keys[mode]) { + this.currentMode = mode; + this.renderKeyboard(); + } + } +} + +// Example usage: +const keyboard = new VirtualKeyboard('textInput', 'keyboard'); +document.getElementById( + 'switchToSpecial' +).addEventListener('click', () => keyboard.switchMode('special')); diff --git a/dist/ts/RealTimeCollaboration.ts b/dist/ts/RealTimeCollaboration.ts new file mode 100644 index 0000000..e0604b9 --- /dev/null +++ b/dist/ts/RealTimeCollaboration.ts @@ -0,0 +1,25 @@ +/** + * @title Real-Time Collaboration Handler + * @notice Facilitates real-time interaction and collaboration in virtual environments. + * @dev Leverages WebSockets or WebRTC to synchronize user activities across different sessions. + */ + class RealTimeCollaborationHandler { + private socket: WebSocket; + + constructor(serverUrl: string) { + this.socket = new WebSocket(serverUrl); + this.socket.onmessage = this.handleMessage; + this.socket.onopen = () => console.log("Connection established for real-time collaboration."); + } + + private handleMessage = (message: MessageEvent) => { + const data = JSON.parse(message.data); + console.log("Received data for collaboration:", data); + // Process and apply data to the collaborative environment + } + + public sendUpdate(data: object) { + this.socket.send(JSON.stringify(data)); + console.log("Sent update:", data); + } +} diff --git a/dist/ts/Screensaver.ts b/dist/ts/Screensaver.ts new file mode 100644 index 0000000..3b0b208 --- /dev/null +++ b/dist/ts/Screensaver.ts @@ -0,0 +1,140 @@ +// Copyright 2024 Scape Agency BV + + +/** + * @title Screensaver Class + * @notice Handles the activation and deactivation of a screensaver based on + * user inactivity. + * @dev This class provides methods to start and stop the screensaver, manage + * media sources, and handle user interactions. + */ + class Screensaver { + + private timeoutId: number | undefined; + private readonly timeout: number; + private screensaverElement: HTMLElement | undefined; + private videoElement: HTMLVideoElement | undefined; + private audioElement: HTMLAudioElement | undefined; + private isActive: boolean = false; + + /** + * @notice Initializes a new Screensaver instance. + * @param timeout The inactivity timeout in milliseconds after which the + * screensaver activates. + * @param videoUrl The URL for the video to be played when the screensaver + * activates. + * @param audioUrl The URL for the audio to be played when the screensaver + * activates. + */ + constructor(timeout: number, videoUrl: string, audioUrl: string) { + this.timeout = timeout; + this.initializeElements(); + this.loadMedia(videoUrl, audioUrl); + this.setupEventListeners(); + } + + /** + * @notice Initializes HTML elements from the DOM. + * @dev Queries the DOM to get the screensaver, video, and audio elements + * by their IDs. + */ + private initializeElements() { + this.screensaverElement = document.getElementById("screensaver")!; + this.videoElement = document.getElementById( + "screensaverVideo" + ) as HTMLVideoElement; + this.audioElement = document.getElementById( + "screensaverAudio" + ) as HTMLAudioElement; + } + + /** + * @notice Loads media sources into the video and audio elements. + * @param videoUrl The source URL of the video. + * @param audioUrl The source URL of the audio. + */ + private loadMedia(videoUrl: string, audioUrl: string) { + this.videoElement.src = videoUrl; + this.audioElement.src = audioUrl; + } + + /** + * @notice Sets up event listeners for user interaction to prevent + * screensaver activation. + * @dev Listens for 'mousemove', 'keydown', and 'touchstart' events + * to reset the screensaver timer. + */ + private setupEventListeners() { + ['mousemove', 'keydown', 'touchstart'].forEach(event => { + document.addEventListener(event, this.resetScreensaver); + }); + } + + /** + * @notice Starts or restarts the screensaver timeout. + * @dev Resets any existing timeout and sets a new timeout to activate + * the screensaver. + */ + private startScreensaverTimeout() { + this.stopScreensaver(); // Stop existing screensaver if active + this.timeoutId = window.setTimeout( + () => this.activateScreensaver(), this.timeout + ); + } + + /** + * @notice Resets the screensaver timer and stops the screensaver if + * active. + * @dev Called upon user interactions detected by event listeners. + */ + private resetScreensaver = () => { + if (this.isActive) { + this.stopScreensaver(); + } + this.startScreensaverTimeout(); + }; + + /** + * @notice Activates the screensaver, displaying elements and playing media. + */ + private activateScreensaver = () => { + this.screensaverElement.style.display = 'block'; + this.videoElement.play(); + this.audioElement.play(); + this.isActive = true; + }; + + /** + * @notice Stops the screensaver and hides its elements. + * @dev Pauses media playback and clears the activation timeout. + */ + private stopScreensaver() { + this.screensaverElement.style.display = 'none'; + this.videoElement.pause(); + this.audioElement.pause(); + this.isActive = false; + + if (this.timeoutId !== undefined) { + clearTimeout(this.timeoutId); + this.timeoutId = undefined; + } + } + + /** + * @notice Sets the volume for both video and audio elements of the + * screensaver. + * @param volume A number between 0.0 and 1.0 indicating the volume level. + */ + public setVolume(volume: number) { + this.videoElement.volume = volume; + this.audioElement.volume = volume; + } +} + +// Example usage: +const screensaver = new Screensaver( + 300000, + 'path/to/video.mp4', + 'path/to/audio.mp3' +); // Initialize the screensaver with a 5-minute timeout +screensaver.setVolume(0.5); // Set initial volume to 50% diff --git a/dist/ts/SpatialNavigation.ts b/dist/ts/SpatialNavigation.ts new file mode 100644 index 0000000..85b2c23 --- /dev/null +++ b/dist/ts/SpatialNavigation.ts @@ -0,0 +1,38 @@ +/** + * @title Spatial Navigation Handler + * @notice Provides navigation controls for moving through a 3D space or virtual environments. + * @dev Supports both keyboard and other input methods for movement and rotation in a 3D space. + */ + class SpatialNavigationHandler { + private position: { x: number; y: number; z: number } = { x: 0, y: 0, z: 0 }; + private rotation: { yaw: number; pitch: number; roll: number } = { yaw: 0, pitch: 0, roll: 0 }; + + constructor() { + document.addEventListener('keydown', this.handleKeyInput); + } + + private handleKeyInput = (event: KeyboardEvent) => { + switch(event.key) { + case 'ArrowUp': + this.position.y += 1; // Move up + break; + case 'ArrowDown': + this.position.y -= 1; // Move down + break; + case 'ArrowLeft': + this.rotation.yaw -= 5; // Turn left + break; + case 'ArrowRight': + this.rotation.yaw += 5; // Turn right + break; + case 'w': + this.position.z += 1; // Move forward + break; + case 's': + this.position.z -= 1; // Move backward + break; + // Add more controls as needed + } + console.log(`Position: (${this.position.x}, ${this.position.y}, ${this.position.z}), Rotation: (${this.rotation.yaw}, ${this.rotation.pitch}, ${this.rotation.roll})`); + }; +} diff --git a/dist/ts/UserProfile.ts b/dist/ts/UserProfile.ts new file mode 100644 index 0000000..282aace --- /dev/null +++ b/dist/ts/UserProfile.ts @@ -0,0 +1,27 @@ +/** + * @title User Profile and Preferences Handler + * @notice Manages user-specific settings and preferences for an immersive web application. + * @dev Stores and retrieves user preferences from local storage or a remote database. + */ + class UserProfileHandler { + private preferences: Map = new Map(); + + constructor() { + this.loadPreferences(); + } + + private loadPreferences() { + console.log("Loading user preferences..."); + // Load preferences from local storage or a database. + } + + public setPreference(key: string, value: any) { + this.preferences.set(key, value); + console.log(`Preference ${key} set to`, value); + // Optionally save to local storage or update the database. + } + + public getPreference(key: string) { + return this.preferences.get(key); + } +} diff --git a/dist/ts/VRExperience.ts b/dist/ts/VRExperience.ts new file mode 100644 index 0000000..97629a7 --- /dev/null +++ b/dist/ts/VRExperience.ts @@ -0,0 +1,58 @@ +/** + * @title VR Experience Handler + * @notice Manages Virtual Reality scenes and interactions using WebXR. + * @dev Provides an easy interface to setup, control, and interact with VR content. + */ + class VRExperienceHandler { + private xrSession: XRSession | null = null; + + constructor(private container: HTMLElement) { + if ('xr' in navigator) { + this.initVR(); + } else { + console.error("WebXR not available."); + } + } + + private async initVR() { + try { + this.xrSession = await navigator.xr.requestSession('immersive-vr', { + optionalFeatures: ['local-floor', 'bounded-floor'] + }); + this.xrSession.addEventListener('end', this.onSessionEnded); + this.setupXRWebGLLayer(); + } catch (error) { + console.error("Failed to create XR Session: ", error); + } + } + + private setupXRWebGLLayer() { + const gl = this.container.querySelector('canvas')!.getContext('webgl2')!; + this.xrSession!.updateRenderState({ + baseLayer: new XRWebGLLayer(this.xrSession, gl) + }); + } + + private onSessionEnded = () => { + console.log("VR session ended."); + this.xrSession = null; + } + + public startRendering() { + if (!this.xrSession) { + console.error("XR Session is not initialized."); + return; + } + + this.xrSession.requestAnimationFrame((time, frame) => this.renderFrame(time, frame)); + } + + private renderFrame(time: DOMHighResTimeStamp, frame: XRFrame) { + const session = frame.session; + const pose = frame.getViewerPose(xrReferenceSpace); + + if (pose) { + // Update your scene's rendering based on user's position + } + } +} diff --git a/dist/ts/VideoOverlay.ts b/dist/ts/VideoOverlay.ts new file mode 100644 index 0000000..bfeb74e --- /dev/null +++ b/dist/ts/VideoOverlay.ts @@ -0,0 +1,116 @@ +// Copyright 2024 Scape Agency BV + +/** + * @title Transparent Video Overlay Handler + * @notice Manages a transparent video overlay, controlling its visibility, + * playback, and effects. + * @dev Provides methods to show, hide, toggle, and dynamically change the + * video source with visual effects. + */ + class TransparentVideoOverlay { + private videoElement: HTMLVideoElement; + private isVisible: boolean = false; + + constructor(videoElementId: string) { + this.videoElement = document.getElementById( + videoElementId + ) as HTMLVideoElement; + this.setupVideo(); + } + + /** + * @notice Initializes video settings and event listeners for enhanced + * control. + */ + private setupVideo() { + this.videoElement.addEventListener( + "ended", () => this.videoElement.play() + ); // Ensure looping + this.videoElement.addEventListener("loadeddata", () => { + console.log("Video loaded successfully."); + }); + this.videoElement.addEventListener("error", (e) => { + console.error("Error loading video:", e); + }); + } + + /** + * @notice Shows the video overlay with a fade-in effect. + * @dev Uses CSS transitions to create a fade-in effect. + */ + public showOverlay() { + this.videoElement.style.display = "block"; + this.videoElement.style.opacity = "0"; + setTimeout(() => { + this.videoElement.style.opacity = "1"; + this.videoElement.play(); + }, 10); // Timeout to ensure CSS transition takes place + this.isVisible = true; + } + + /** + * @notice Hides the video overlay with a fade-out effect. + * @dev Uses CSS transitions to create a fade-out effect before pausing + * and hiding the video. + */ + public hideOverlay() { + this.videoElement.style.opacity = "0"; + setTimeout(() => { + this.videoElement.style.display = "none"; + this.videoElement.pause(); + }, 500); // Match timeout to CSS transition duration + this.isVisible = false; + } + + /** + * @notice Toggles the visibility of the video overlay with effects. + */ + public toggleOverlay() { + if (this.isVisible) { + this.hideOverlay(); + } else { + this.showOverlay(); + } + } + + /** + * @notice Changes the video source and optionally plays it immediately. + * @param videoUrl The URL of the new video source. + * @param autoPlay Determines if the video should play immediately after + * loading. + */ + public changeVideoSource(videoUrl: string, autoPlay: boolean = true) { + this.videoElement.src = videoUrl; + this.videoElement.load(); // Reload video to apply new source + if (autoPlay) { + this.showOverlay(); + } + } +} + +// Example usage: +const videoOverlay = new TransparentVideoOverlay("videoOverlay"); +videoOverlay.showOverlay(); // Show the overlay with fade-in effect + + + + + + + +function supportsHEVCAlpha() { + const navigator = window.navigator; + const ua = navigator.userAgent.toLowerCase() + const hasMediaCapabilities = !!(navigator.mediaCapabilities && navigator.mediaCapabilities.decodingInfo) + const isSafari = ((ua.indexOf("safari") != -1) && (!(ua.indexOf("chrome")!= -1) && (ua.indexOf("version/")!= -1))) + return isSafari && hasMediaCapabilities +} + +// Here’s an example of how this comes together in HTML: + + + + \ No newline at end of file diff --git a/dist/ts/index.ts b/dist/ts/index.ts new file mode 100644 index 0000000..e69de29