diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js index b94f72ee8..767ef69ec 100644 --- a/frontend/gulpfile.js +++ b/frontend/gulpfile.js @@ -234,7 +234,11 @@ gulp.task("scss:modules", function () { gulp.task("scss:main", function () { return gulp .src(paths.resources + "styles/main-default.scss") - .pipe(gulpSass.sync().on("error", gulpSass.logError)) + .pipe(gulpSass.sync({ + includePaths: [ + "./node_modules/animate.css" + ] + })) .pipe(gulpPostcss([autoprefixer])) .pipe(gulp.dest(paths.output + "css/")); }); diff --git a/frontend/package.json b/frontend/package.json index 62402f801..f9801e155 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -41,6 +41,7 @@ "@storybook/react": "^7.5.3", "@storybook/react-vite": "^7.5.3", "@storybook/testing-library": "^0.2.2", + "animate.css": "^4.1.1", "autoprefixer": "^10.4.15", "concurrently": "^8.2.2", "cypress": "^10.3.0", diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index a6b6178c7..26695dd85 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -23,6 +23,7 @@ @import "common/dependencies/z-index"; @import "common/dependencies/highlightjs-theme"; +@import "animate"; @import "common/refactor/color-defs.scss"; @import "common/refactor/themes.scss"; @import "common/refactor/design-tokens.scss"; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 8a2c9b517..066b43cc4 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3249,6 +3249,11 @@ aggregate-error@^3.0.0: clean-stack "^2.0.0" indent-string "^4.0.0" +animate.css@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075" + integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ== + ansi-colors@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-1.1.0.tgz#6374b4dd5d4718ff3ce27a671a3b1cad077132a9"