From 051ac3a3ee8bb3f74ef1cb7629d9fa14920a5ced Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Tue, 13 Jun 2023 12:02:52 +0200 Subject: [PATCH] fix: problem with Sal.js in production mode --- .eslintignore | 1 + public/assets/scripts/sal.js | 2 + public/assets/scripts/sal.js.map | 1 + src/components/Sal.astro | 19 +- src/styles/sal.css | 333 +++++++++++++++++++++++++++++++ src/styles/sal.css.map | 1 + 6 files changed, 352 insertions(+), 5 deletions(-) create mode 100644 .eslintignore create mode 100644 public/assets/scripts/sal.js create mode 100644 public/assets/scripts/sal.js.map create mode 100644 src/styles/sal.css create mode 100644 src/styles/sal.css.map diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..bdf2332 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +public/assets/scripts/ diff --git a/public/assets/scripts/sal.js b/public/assets/scripts/sal.js new file mode 100644 index 0000000..91d3e1b --- /dev/null +++ b/public/assets/scripts/sal.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.sal=t():e.sal=t()}(this,(function(){return(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function r(e){for(var t=1;tj});var a="Sal was not initialised! Probably it is used in SSR.",s="Your browser does not support IntersectionObserver!\nGet a polyfill from here:\nhttps://github.com/w3c/IntersectionObserver/tree/master/polyfill",i={root:null,rootMargin:"0% 50%",threshold:.5,animateClassName:"sal-animate",disabledClassName:"sal-disabled",enterEventName:"sal:in",exitEventName:"sal:out",selector:"[data-sal]",once:!0,disabled:!1},l=[],c=null,u=function(e){e&&e!==i&&(i=r(r({},i),e))},d=function(e){e.classList.remove(i.animateClassName)},f=function(e,t){var n=new CustomEvent(e,{bubbles:!0,detail:t});t.target.dispatchEvent(n)},b=function(){document.body.classList.add(i.disabledClassName)},p=function(){c.disconnect(),c=null},m=function(){return i.disabled||"function"==typeof i.disabled&&i.disabled()},v=function(e,t){e.forEach((function(e){var n=e.target,r=void 0!==n.dataset.salRepeat,o=void 0!==n.dataset.salOnce,a=r||!(o||i.once);e.intersectionRatio>=i.threshold?(function(e){e.target.classList.add(i.animateClassName),f(i.enterEventName,e)}(e),a||t.unobserve(n)):a&&function(e){d(e.target),f(i.exitEventName,e)}(e)}))},y=function(){var e=[].filter.call(document.querySelectorAll(i.selector),(function(e){return!function(e){return e.classList.contains(i.animateClassName)}(e,i.animateClassName)}));return e.forEach((function(e){return c.observe(e)})),e},O=function(){b(),p()},h=function(){document.body.classList.remove(i.disabledClassName),c=new IntersectionObserver(v,{root:i.root,rootMargin:i.rootMargin,threshold:i.threshold}),l=y()},g=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};p(),Array.from(document.querySelectorAll(i.selector)).forEach(d),u(e),h()},w=function(){var e=y();l.push(e)};const j=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:i;if(u(e),"undefined"==typeof window)return console.warn(a),{elements:l,disable:O,enable:h,reset:g,update:w};if(!window.IntersectionObserver)throw b(),Error(s);return m()?b():h(),{elements:l,disable:O,enable:h,reset:g,update:w}};return t.default})()})); +//# sourceMappingURL=sal.js.map \ No newline at end of file diff --git a/public/assets/scripts/sal.js.map b/public/assets/scripts/sal.js.map new file mode 100644 index 0000000..1871641 --- /dev/null +++ b/public/assets/scripts/sal.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack://sal/webpack/universalModuleDefinition","webpack://sal/webpack/bootstrap","webpack://sal/webpack/runtime/define property getters","webpack://sal/webpack/runtime/hasOwnProperty shorthand","webpack://sal/./src/sal.js"],"names":["root","factory","exports","module","define","amd","this","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","SSR_MESSAGE","NOT_SUPPORTED_MESSAGE","options","rootMargin","threshold","animateClassName","disabledClassName","enterEventName","exitEventName","selector","once","disabled","elements","intersectionObserver","setOptions","settings","clearAnimation","element","classList","remove","fireEvent","name","entry","event","CustomEvent","bubbles","detail","target","dispatchEvent","disableAnimations","document","body","add","clearObserver","disconnect","isDisabled","onIntersection","entries","observer","forEach","hasRepeatFlag","undefined","dataset","salRepeat","hasOnceFlag","salOnce","shouldRepeat","intersectionRatio","animate","unobserve","reverse","getObservedElements","collection","filter","querySelectorAll","contains","isAnimated","observe","disable","enable","IntersectionObserver","reset","Array","from","update","newElements","push","window","console","warn","Error"],"mappings":"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","file":"sal.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"sal\"] = factory();\n\telse\n\t\troot[\"sal\"] = factory();\n})(this, function() {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","/**\n * Sal - Scroll Animation Library\n * Performance focused, lightweight scroll animation library\n */\n\nimport './sal.scss';\n\nconst SSR_MESSAGE = 'Sal was not initialised! Probably it is used in SSR.';\n\nconst NOT_SUPPORTED_MESSAGE = ''\n + 'Your browser does not support IntersectionObserver!\\n'\n + 'Get a polyfill from here:\\n'\n + 'https://github.com/w3c/IntersectionObserver/tree/master/polyfill';\n\n/**\n * Default options\n */\nlet options = {\n root: null,\n rootMargin: '0% 50%',\n threshold: 0.5,\n animateClassName: 'sal-animate',\n disabledClassName: 'sal-disabled',\n enterEventName: 'sal:in',\n exitEventName: 'sal:out',\n selector: '[data-sal]',\n once: true,\n disabled: false,\n};\n\n/**\n * Private\n */\nlet elements = [];\nlet intersectionObserver = null;\n\n/**\n * Sets options.\n * @param {Object} settings\n */\nconst setOptions = (settings) => {\n if (settings && settings !== options) {\n options = {\n ...options,\n ...settings,\n };\n }\n};\n\n/**\n * Clears animation for given element.\n * @param {HTMLElement} element\n */\nconst clearAnimation = (element) => {\n element.classList.remove(options.animateClassName);\n};\n\n/**\n * Dispatches the animate event on the intersection observer entry.\n * @param {IntersectionObserverEntry} detail The entry to fire event on.\n */\nconst fireEvent = (name, entry) => {\n const event = new CustomEvent(name, {\n bubbles: true,\n detail: entry,\n });\n\n entry.target.dispatchEvent(event);\n};\n\n/**\n * Launches animation by adding class.\n * @param {IntersectionObserverEntry} entry\n */\nconst animate = (entry) => {\n entry.target.classList.add(options.animateClassName);\n fireEvent(options.enterEventName, entry);\n};\n\n/**\n * Reverses animation by removing class.\n * @param {IntersectionObserverEntry} entry\n */\nconst reverse = (entry) => {\n clearAnimation(entry.target);\n fireEvent(options.exitEventName, entry);\n};\n\n/**\n * Checks if element was animated.\n * @param {HTMLElement} element\n */\nconst isAnimated = (element) => (\n element.classList.contains(options.animateClassName)\n);\n\n/**\n * Enables animations by remove class from body.\n */\nconst enableAnimations = () => {\n document.body.classList.remove(options.disabledClassName);\n};\n\n/**\n * Disables animations by add class from body.\n */\nconst disableAnimations = () => {\n document.body.classList.add(options.disabledClassName);\n};\n\n/**\n * Clears observer.\n */\nconst clearObserver = () => {\n intersectionObserver.disconnect();\n intersectionObserver = null;\n};\n\n/**\n * Check if should be disabled.\n * @return {Boolean}\n */\nconst isDisabled = () => (\n options.disabled\n || (\n (typeof options.disabled === 'function')\n && options.disabled()\n )\n);\n\n/**\n * IntersectionObserver callback.\n * @param {Array} entries\n * @param {IntersectionObserver} observer\n */\nconst onIntersection = (entries, observer) => {\n entries.forEach((entry) => {\n const { target } = entry;\n const hasRepeatFlag = target.dataset.salRepeat !== undefined;\n const hasOnceFlag = target.dataset.salOnce !== undefined;\n const shouldRepeat = hasRepeatFlag || !(hasOnceFlag || options.once);\n\n if (entry.intersectionRatio >= options.threshold) {\n animate(entry);\n\n if (!shouldRepeat) {\n observer.unobserve(target);\n }\n } else if (shouldRepeat) {\n reverse(entry);\n }\n });\n};\n\n/**\n * Returns collection of elements and pushes them to observer.\n *\n * @returns {Array}\n */\nconst getObservedElements = () => {\n const collection = [].filter.call(\n document.querySelectorAll(options.selector),\n (element) => !isAnimated(element, options.animateClassName),\n );\n\n collection.forEach((element) => intersectionObserver.observe(element));\n\n return collection;\n};\n\n/**\n * Disables instance by removing animations and clearing observer.\n */\nconst disable = () => {\n disableAnimations();\n clearObserver();\n};\n\n/**\n * Enables instance by launching new IntersectionObserver.\n */\nconst enable = () => {\n enableAnimations();\n\n intersectionObserver = new IntersectionObserver(onIntersection, {\n root: options.root,\n rootMargin: options.rootMargin,\n threshold: options.threshold,\n });\n\n elements = getObservedElements();\n};\n\n/**\n * Resets instance to provide new settings.\n * @param {Object} settings\n */\nconst reset = (settings = {}) => {\n clearObserver();\n\n Array.from(document.querySelectorAll(options.selector))\n .forEach(clearAnimation);\n\n setOptions(settings);\n enable();\n};\n\n/**\n * Updates observer with new elements to animated.\n * Useful for dynamically injected elements.\n */\nconst update = () => {\n const newElements = getObservedElements();\n elements.push(newElements);\n};\n\n/**\n * Init\n * @param {Object} settings\n * @return {Object} public API\n */\nconst init = (settings = options) => {\n setOptions(settings);\n\n // Early return, when window object is not defined\n // e.g. during Server Side Rendering\n if (typeof window === 'undefined') {\n // eslint-disable-next-line no-console\n console.warn(SSR_MESSAGE);\n\n return {\n elements,\n disable,\n enable,\n reset,\n update,\n };\n }\n\n if (!window.IntersectionObserver) {\n disableAnimations();\n\n throw Error(NOT_SUPPORTED_MESSAGE);\n }\n\n if (!isDisabled()) {\n enable();\n } else {\n disableAnimations();\n }\n\n return {\n elements,\n disable,\n enable,\n reset,\n update,\n };\n};\n\nexport default init;\n"],"sourceRoot":""} \ No newline at end of file diff --git a/src/components/Sal.astro b/src/components/Sal.astro index 97c81f1..e564184 100644 --- a/src/components/Sal.astro +++ b/src/components/Sal.astro @@ -1,8 +1,8 @@ --- -import '../../node_modules/sal.js/dist/sal.css'; +import '../styles/sal.css'; --- - + diff --git a/src/styles/sal.css b/src/styles/sal.css new file mode 100644 index 0000000..1f73071 --- /dev/null +++ b/src/styles/sal.css @@ -0,0 +1,333 @@ +[data-sal] { + transition-delay: 0s; + transition-delay: var(--sal-delay, 0s); + transition-duration: 0.2s; + transition-duration: var(--sal-duration, 0.2s); + transition-timing-function: ease; + transition-timing-function: var(--sal-easing, ease); +} +[data-sal][data-sal-duration='200'] { + transition-duration: 0.2s; +} +[data-sal][data-sal-duration='250'] { + transition-duration: 0.25s; +} +[data-sal][data-sal-duration='300'] { + transition-duration: 0.3s; +} +[data-sal][data-sal-duration='350'] { + transition-duration: 0.35s; +} +[data-sal][data-sal-duration='400'] { + transition-duration: 0.4s; +} +[data-sal][data-sal-duration='450'] { + transition-duration: 0.45s; +} +[data-sal][data-sal-duration='500'] { + transition-duration: 0.5s; +} +[data-sal][data-sal-duration='550'] { + transition-duration: 0.55s; +} +[data-sal][data-sal-duration='600'] { + transition-duration: 0.6s; +} +[data-sal][data-sal-duration='650'] { + transition-duration: 0.65s; +} +[data-sal][data-sal-duration='700'] { + transition-duration: 0.7s; +} +[data-sal][data-sal-duration='750'] { + transition-duration: 0.75s; +} +[data-sal][data-sal-duration='800'] { + transition-duration: 0.8s; +} +[data-sal][data-sal-duration='850'] { + transition-duration: 0.85s; +} +[data-sal][data-sal-duration='900'] { + transition-duration: 0.9s; +} +[data-sal][data-sal-duration='950'] { + transition-duration: 0.95s; +} +[data-sal][data-sal-duration='1000'] { + transition-duration: 1s; +} +[data-sal][data-sal-duration='1050'] { + transition-duration: 1.05s; +} +[data-sal][data-sal-duration='1100'] { + transition-duration: 1.1s; +} +[data-sal][data-sal-duration='1150'] { + transition-duration: 1.15s; +} +[data-sal][data-sal-duration='1200'] { + transition-duration: 1.2s; +} +[data-sal][data-sal-duration='1250'] { + transition-duration: 1.25s; +} +[data-sal][data-sal-duration='1300'] { + transition-duration: 1.3s; +} +[data-sal][data-sal-duration='1350'] { + transition-duration: 1.35s; +} +[data-sal][data-sal-duration='1400'] { + transition-duration: 1.4s; +} +[data-sal][data-sal-duration='1450'] { + transition-duration: 1.45s; +} +[data-sal][data-sal-duration='1500'] { + transition-duration: 1.5s; +} +[data-sal][data-sal-duration='1550'] { + transition-duration: 1.55s; +} +[data-sal][data-sal-duration='1600'] { + transition-duration: 1.6s; +} +[data-sal][data-sal-duration='1650'] { + transition-duration: 1.65s; +} +[data-sal][data-sal-duration='1700'] { + transition-duration: 1.7s; +} +[data-sal][data-sal-duration='1750'] { + transition-duration: 1.75s; +} +[data-sal][data-sal-duration='1800'] { + transition-duration: 1.8s; +} +[data-sal][data-sal-duration='1850'] { + transition-duration: 1.85s; +} +[data-sal][data-sal-duration='1900'] { + transition-duration: 1.9s; +} +[data-sal][data-sal-duration='1950'] { + transition-duration: 1.95s; +} +[data-sal][data-sal-duration='2000'] { + transition-duration: 2s; +} +[data-sal][data-sal-delay='50'] { + transition-delay: 0.05s; +} +[data-sal][data-sal-delay='100'] { + transition-delay: 0.1s; +} +[data-sal][data-sal-delay='150'] { + transition-delay: 0.15s; +} +[data-sal][data-sal-delay='200'] { + transition-delay: 0.2s; +} +[data-sal][data-sal-delay='250'] { + transition-delay: 0.25s; +} +[data-sal][data-sal-delay='300'] { + transition-delay: 0.3s; +} +[data-sal][data-sal-delay='350'] { + transition-delay: 0.35s; +} +[data-sal][data-sal-delay='400'] { + transition-delay: 0.4s; +} +[data-sal][data-sal-delay='450'] { + transition-delay: 0.45s; +} +[data-sal][data-sal-delay='500'] { + transition-delay: 0.5s; +} +[data-sal][data-sal-delay='550'] { + transition-delay: 0.55s; +} +[data-sal][data-sal-delay='600'] { + transition-delay: 0.6s; +} +[data-sal][data-sal-delay='650'] { + transition-delay: 0.65s; +} +[data-sal][data-sal-delay='700'] { + transition-delay: 0.7s; +} +[data-sal][data-sal-delay='750'] { + transition-delay: 0.75s; +} +[data-sal][data-sal-delay='800'] { + transition-delay: 0.8s; +} +[data-sal][data-sal-delay='850'] { + transition-delay: 0.85s; +} +[data-sal][data-sal-delay='900'] { + transition-delay: 0.9s; +} +[data-sal][data-sal-delay='950'] { + transition-delay: 0.95s; +} +[data-sal][data-sal-delay='1000'] { + transition-delay: 1s; +} +[data-sal][data-sal-easing='linear'] { + transition-timing-function: linear; +} +[data-sal][data-sal-easing='ease'] { + transition-timing-function: ease; +} +[data-sal][data-sal-easing='ease-in'] { + transition-timing-function: ease-in; +} +[data-sal][data-sal-easing='ease-out'] { + transition-timing-function: ease-out; +} +[data-sal][data-sal-easing='ease-in-out'] { + transition-timing-function: ease-in-out; +} +[data-sal][data-sal-easing='ease-in-cubic'] { + transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); +} +[data-sal][data-sal-easing='ease-out-cubic'] { + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); +} +[data-sal][data-sal-easing='ease-in-out-cubic'] { + transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); +} +[data-sal][data-sal-easing='ease-in-circ'] { + transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); +} +[data-sal][data-sal-easing='ease-out-circ'] { + transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); +} +[data-sal][data-sal-easing='ease-in-out-circ'] { + transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); +} +[data-sal][data-sal-easing='ease-in-expo'] { + transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); +} +[data-sal][data-sal-easing='ease-out-expo'] { + transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); +} +[data-sal][data-sal-easing='ease-in-out-expo'] { + transition-timing-function: cubic-bezier(1, 0, 0, 1); +} +[data-sal][data-sal-easing='ease-in-quad'] { + transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +} +[data-sal][data-sal-easing='ease-out-quad'] { + transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); +} +[data-sal][data-sal-easing='ease-in-out-quad'] { + transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); +} +[data-sal][data-sal-easing='ease-in-quart'] { + transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); +} +[data-sal][data-sal-easing='ease-out-quart'] { + transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); +} +[data-sal][data-sal-easing='ease-in-out-quart'] { + transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); +} +[data-sal][data-sal-easing='ease-in-quint'] { + transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} +[data-sal][data-sal-easing='ease-out-quint'] { + transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} +[data-sal][data-sal-easing='ease-in-out-quint'] { + transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); +} +[data-sal][data-sal-easing='ease-in-sine'] { + transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); +} +[data-sal][data-sal-easing='ease-out-sine'] { + transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); +} +[data-sal][data-sal-easing='ease-in-out-sine'] { + transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); +} +[data-sal][data-sal-easing='ease-in-back'] { + transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); +} +[data-sal][data-sal-easing='ease-out-back'] { + transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +[data-sal][data-sal-easing='ease-in-out-back'] { + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); +} +[data-sal|='fade'] { + opacity: 0; + transition-property: opacity; +} +[data-sal|='fade'].sal-animate, +body.sal-disabled [data-sal|='fade'] { + opacity: 1; +} +[data-sal|='slide'] { + opacity: 0; + transition-property: opacity, transform; +} +[data-sal='slide-up'] { + transform: translateY(20%); +} +[data-sal='slide-down'] { + transform: translateY(-20%); +} +[data-sal='slide-left'] { + transform: translateX(20%); +} +[data-sal='slide-right'] { + transform: translateX(-20%); +} +[data-sal|='slide'].sal-animate, +body.sal-disabled [data-sal|='slide'] { + opacity: 1; + transform: none; +} +[data-sal|='zoom'] { + opacity: 0; + transition-property: opacity, transform; +} +[data-sal='zoom-in'] { + transform: scale(0.5); +} +[data-sal='zoom-out'] { + transform: scale(1.1); +} +[data-sal|='zoom'].sal-animate, +body.sal-disabled [data-sal|='zoom'] { + opacity: 1; + transform: none; +} +[data-sal|='flip'] { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transition-property: transform; +} +[data-sal='flip-left'] { + transform: perspective(2000px) rotateY(-91deg); +} +[data-sal='flip-right'] { + transform: perspective(2000px) rotateY(91deg); +} +[data-sal='flip-up'] { + transform: perspective(2000px) rotateX(-91deg); +} +[data-sal='flip-down'] { + transform: perspective(2000px) rotateX(91deg); +} +[data-sal|='flip'].sal-animate, +body.sal-disabled [data-sal|='flip'] { + transform: none; +} + +/*# sourceMappingURL=sal.css.map*/ diff --git a/src/styles/sal.css.map b/src/styles/sal.css.map new file mode 100644 index 0000000..33703a6 --- /dev/null +++ b/src/styles/sal.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack://sal/./src/sal.scss"],"names":[],"mappings":"AAAA,WA+DE,mBAAwD,CAAxD,oCAAwD,CADxD,uBAAiE,CAAjE,2CAAiE,CAEjE,+BAA4B,CAA5B,iDAA4E,CAC7E,oCAIG,uBAAqB,CACtB,oCADC,wBAAqB,CACtB,oCADC,uBAAqB,CACtB,oCADC,wBAAqB,CACtB,oCADC,uBAAqB,CACtB,oCADC,wBAAqB,CACtB,oCADC,uBAAqB,CACtB,oCADC,wBAAqB,CACtB,oCADC,uBAAqB,CACtB,oCADC,wBAAqB,CACtB,oCADC,uBAAqB,CACtB,oCADC,wBAAqB,CACtB,oCADC,uBAAqB,CACtB,oCADC,wBAAqB,CACtB,oCADC,uBAAqB,CACtB,oCADC,wBAAqB,CACtB,qCADC,sBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,wBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,wBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,wBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,wBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,wBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,wBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,wBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,wBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,wBAAqB,CACtB,qCADC,yBAAqB,CACtB,qCADC,sBAAqB,CACtB,gCAKC,qBAAkB,CACnB,iCADC,oBAAkB,CACnB,iCADC,qBAAkB,CACnB,iCADC,oBAAkB,CACnB,iCADC,qBAAkB,CACnB,iCADC,oBAAkB,CACnB,iCADC,qBAAkB,CACnB,iCADC,oBAAkB,CACnB,iCADC,qBAAkB,CACnB,iCADC,oBAAkB,CACnB,iCADC,qBAAkB,CACnB,iCADC,oBAAkB,CACnB,iCADC,qBAAkB,CACnB,iCADC,oBAAkB,CACnB,iCADC,qBAAkB,CACnB,iCADC,oBAAkB,CACnB,iCADC,qBAAkB,CACnB,iCADC,oBAAkB,CACnB,iCADC,qBAAkB,CACnB,kCADC,mBAAkB,CACnB,mCAKC,iCAjEY,CAkEb,iCADC,+BAhEQ,CAiET,oCADC,kCA/Dc,CAgEf,qCADC,mCA9DgB,CA+DjB,wCADC,sCA7DsB,CA8DvB,0CADC,0DA3D+C,CA4DhD,2CADC,wDA1D8C,CA2D/C,8CADC,yDAzDkD,CA0DnD,yCADC,wDAvD4C,CAwD7C,0CADC,wDAtD6C,CAuD9C,6CADC,0DArDkD,CAsDnD,yCADC,0DAnD8C,CAoD/C,0CADC,oDAlDyC,CAmD1C,6CADC,gDAjDwC,CAkDzC,yCADC,yDA/C6C,CAgD9C,0CADC,wDA9C6C,CA+C9C,6CADC,2DA7CmD,CA8CpD,0CADC,0DA3C+C,CA4ChD,2CADC,uDA1C6C,CA2C9C,8CADC,qDAzC8C,CA0C/C,0CADC,0DAvC+C,CAwChD,2CADC,oDAtC0C,CAuC3C,8CADC,oDArC6C,CAsC9C,yCADC,wDAnC4C,CAoC7C,0CADC,wDAlC6C,CAmC9C,6CADC,yDAjCiD,CAkClD,yCADC,0DA/B8C,CAgC/C,0CADC,4DA9BiD,CA+BlD,6CADC,2DA7BmD,CA8BpD,iBASD,SAAU,CACV,2BAA4B,CAC7B,gEAIC,SAAU,CACX,kBAIC,SAAU,CACV,qCAAuC,CACxC,oBAGC,yBAAwC,CACzC,sBAGC,0BAAyC,CAC1C,sBAGC,yBAAwC,CACzC,uBAGC,0BAAyC,CAC1C,kEAIC,SAAU,CACV,cAAe,CAChB,iBAIC,SAAU,CACV,qCAAuC,CACxC,mBAGC,mBAAoC,CACrC,oBAGC,oBAAqC,CACtC,gEAIC,SAAU,CACV,cAAe,CAChB,iBAIC,kCAA2B,CAA3B,0BAA2B,CAC3B,6BAA8B,CAC/B,qBAGC,6CAAyD,CAC1D,sBAGC,4CAAwD,CACzD,mBAGC,6CAAyD,CAC1D,qBAGC,4CAAwD,CACzD,gEAIC,cAAe,C","file":"sal.css","sourcesContent":["/**\n * Settings\n */\n\n$sal-animation-duration: 0.2s !default;\n$sal-animation-delay: 0s !default;\n$sal-slide-offset: 20% !default;\n$sal-zoom-in-scale: 0.5 !default;\n$sal-zoom-out-scale: 1.1 !default;\n$sal-flip-rotate: 91deg !default;\n\n/**\n * Easings\n */\n\n$sal-easings: (\n linear: linear,\n ease: ease,\n ease-in: ease-in,\n ease-out: ease-out,\n ease-in-out: ease-in-out,\n\n ease-in-cubic: cubic-bezier(.55, .055, .675, .19),\n ease-out-cubic: cubic-bezier(.215, .61, .355, 1),\n ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1),\n\n ease-in-circ: cubic-bezier(.6, .04, .98, .335),\n ease-out-circ: cubic-bezier(.075, .82, .165, 1),\n ease-in-out-circ: cubic-bezier(.785, .135, .15, .86),\n\n ease-in-expo: cubic-bezier(.95, .05, .795, .035),\n ease-out-expo: cubic-bezier(.19, 1, .22, 1),\n ease-in-out-expo: cubic-bezier(1, 0, 0, 1),\n\n ease-in-quad: cubic-bezier(.55, .085, .68, .53),\n ease-out-quad: cubic-bezier(.25, .46, .45, .94),\n ease-in-out-quad: cubic-bezier(.455, .03, .515, .955),\n\n ease-in-quart: cubic-bezier(.895, .03, .685, .22),\n ease-out-quart: cubic-bezier(.165, .84, .44, 1),\n ease-in-out-quart: cubic-bezier(.77, 0, .175, 1),\n\n ease-in-quint: cubic-bezier(.755, .05, .855, .06),\n ease-out-quint: cubic-bezier(.23, 1, .32, 1),\n ease-in-out-quint: cubic-bezier(.86, 0, .07, 1),\n\n ease-in-sine: cubic-bezier(.47, 0, .745, .715),\n ease-out-sine: cubic-bezier(.39, .575, .565, 1),\n ease-in-out-sine: cubic-bezier(.445, .05, .55, .95),\n\n ease-in-back: cubic-bezier(.6, -.28, .735, .045),\n ease-out-back: cubic-bezier(.175, .885, .32, 1.275),\n ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55)\n);\n\n/**\n * Core\n */\n\n[data-sal] {\n transition-duration: $sal-animation-duration;\n transition-delay: $sal-animation-delay;\n transition-duration: var(--sal-duration, $sal-animation-duration);\n transition-delay: var(--sal-delay, $sal-animation-delay);\n transition-timing-function: var(--sal-easing, map-get($sal-easings, 'ease'));\n}\n\n@for $i from 4 through 40 {\n [data-sal][data-sal-duration='#{$i * 50}'] {\n transition-duration: #{$i * 0.05}s;\n }\n}\n\n@for $i from 1 through 20 {\n [data-sal][data-sal-delay='#{$i * 50}'] {\n transition-delay: #{$i * 0.05}s;\n }\n}\n\n@each $key, $value in $sal-easings {\n [data-sal][data-sal-easing='#{$key}'] {\n transition-timing-function: $value;\n }\n}\n\n/**\n * Animations\n */\n\n// Fade\n[data-sal|='fade'] {\n opacity: 0;\n transition-property: opacity;\n}\n\n[data-sal|='fade'].sal-animate,\nbody.sal-disabled [data-sal|='fade'] {\n opacity: 1;\n}\n\n// Slide\n[data-sal|='slide'] {\n opacity: 0;\n transition-property: opacity, transform;\n}\n\n[data-sal='slide-up'] {\n transform: translateY($sal-slide-offset);\n}\n\n[data-sal='slide-down'] {\n transform: translateY(-$sal-slide-offset);\n}\n\n[data-sal='slide-left'] {\n transform: translateX($sal-slide-offset);\n}\n\n[data-sal='slide-right'] {\n transform: translateX(-$sal-slide-offset);\n}\n\n[data-sal|='slide'].sal-animate,\nbody.sal-disabled [data-sal|='slide'] {\n opacity: 1;\n transform: none;\n}\n\n// Zoom\n[data-sal|='zoom'] {\n opacity: 0;\n transition-property: opacity, transform;\n}\n\n[data-sal='zoom-in'] {\n transform: scale($sal-zoom-in-scale);\n}\n\n[data-sal='zoom-out'] {\n transform: scale($sal-zoom-out-scale);\n}\n\n[data-sal|='zoom'].sal-animate,\nbody.sal-disabled [data-sal|='zoom'] {\n opacity: 1;\n transform: none;\n}\n\n// Flip\n[data-sal|='flip'] {\n backface-visibility: hidden;\n transition-property: transform;\n}\n\n[data-sal='flip-left'] {\n transform: perspective(2000px) rotateY(-$sal-flip-rotate);\n}\n\n[data-sal='flip-right'] {\n transform: perspective(2000px) rotateY($sal-flip-rotate);\n}\n\n[data-sal='flip-up'] {\n transform: perspective(2000px) rotateX(-$sal-flip-rotate);\n}\n\n[data-sal='flip-down'] {\n transform: perspective(2000px) rotateX($sal-flip-rotate);\n}\n\n[data-sal|='flip'].sal-animate,\nbody.sal-disabled [data-sal|='flip'] {\n transform: none;\n}\n"],"sourceRoot":""} \ No newline at end of file