diff --git a/docs/examples/css_lib-helpers/animations/animations.hbs b/docs/examples/css_lib-helpers/animations/animations.hbs new file mode 100644 index 00000000..b87dadca --- /dev/null +++ b/docs/examples/css_lib-helpers/animations/animations.hbs @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 159da334..87d3a21e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10691,6 +10691,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10711,6 +10712,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10731,6 +10733,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10751,6 +10754,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10771,6 +10775,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10791,6 +10796,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10811,6 +10817,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10831,6 +10838,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10851,6 +10859,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -19031,7 +19040,7 @@ }, "packages/core": { "name": "@mlut/core", - "version": "2.5.1", + "version": "2.6.0", "license": "MIT", "devDependencies": { "@types/node": "^20.10.5", diff --git a/packages/core/package.json b/packages/core/package.json index 3ce83e36..705ce9d7 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@mlut/core", - "version": "2.5.1", + "version": "2.6.0", "description": "Tailwind CSS alternative for custom websites and creative coding", "author": "mr150", "type": "module", diff --git a/packages/core/src/sass/css/styles/_index.scss b/packages/core/src/sass/css/styles/_index.scss index f9878b39..6778a7ce 100644 --- a/packages/core/src/sass/css/styles/_index.scss +++ b/packages/core/src/sass/css/styles/_index.scss @@ -1,2 +1,3 @@ @forward 'variables'; @forward 'generic'; +@forward 'animation'; diff --git a/packages/core/src/sass/css/styles/animation.scss b/packages/core/src/sass/css/styles/animation.scss new file mode 100644 index 00000000..148816b2 --- /dev/null +++ b/packages/core/src/sass/css/styles/animation.scss @@ -0,0 +1,85 @@ +@use '../../tools' as ml; + +/* +Animations + +Basic animations such as rotation, notification, "heartbeat", etc. You can use it with [An](section-utils-reference.html#kssref-utils-reference-an) utility. + +.An-mSp - spin +.An-mNt - notify +.An-mBt - beat +.An-mBr - breath +.An-mBn - bounce + +Markup: ../../../docs/examples/css_lib-helpers/animations/animations.hbs + +Styleguide: css_lib.styles.animation +*/ + +@keyframes #{ml.$css-var-prefix}spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes #{ml.$css-var-prefix}notify { + 0%, + 70% { + transform: scale(1); + opacity: 1; + } + + 100% { + transform: scale(1.8); + opacity: 0; + } +} + +@keyframes #{ml.$css-var-prefix}beat { + 0%, + 100% { + opacity: 1; + } + + 25% { + opacity: 0.6; + } + + 50% { + opacity: 1; + } + + 75% { + opacity: 0.5; + } +} + +@keyframes #{ml.$css-var-prefix}breath { + 0%, + 100% { + transform: scale(1); + opacity: 1; + } + + 50% { + transform: scale(0.95); + opacity: 0.5; + } +} + +@keyframes #{ml.$css-var-prefix}bounce { + 0%, + 100% { + transform: translateY(-25%) scale(1); + animation-timing-function: cubic-bezier(0.7, 0, 0.85, 0.6); + } + + 50% { + transform: translateY(0) scale(1.05, 0.95); + animation-timing-function: cubic-bezier(0.15, 0, 0.3, 1); + } +} diff --git a/packages/core/src/sass/css/utils/_transition.scss b/packages/core/src/sass/css/utils/_transition.scss index 9ade43ae..19c7e3e6 100644 --- a/packages/core/src/sass/css/utils/_transition.scss +++ b/packages/core/src/sass/css/utils/_transition.scss @@ -11,6 +11,6 @@ ml.$utils-map: map.merge( ml.$cBpAllCp + 'Tsd': (ml.$cArOlBp + ml.$css-transition-time, 1s, 0s), 'Tsdl': (ml.$css-transition-time, 1s), 'Tstf': (ml.$kUvKA), - ml.$cArOlBp + 'An': ('n'), + ml.$cBpAllCp + 'An': (ml.$kUvKA), ) ); diff --git a/packages/core/src/sass/tools/settings/common/_utils.scss b/packages/core/src/sass/tools/settings/common/_utils.scss index ef4d82db..556f9450 100644 --- a/packages/core/src/sass/tools/settings/common/_utils.scss +++ b/packages/core/src/sass/tools/settings/common/_utils.scss @@ -1642,6 +1642,14 @@ $utils-db: ( '': none, ), ), + 'Fils': ( + 'properties': field-sizing, + 'keywords': ( + '': content, + 'c': content, + 'f': fixed + ), + ), 'Acnc': ( 'properties': accent-color, 'conversion': 'color', @@ -1953,6 +1961,13 @@ $utils-db: ( 'infinite': ( 'i': infinite, ), + 'animation': ( + 'mSp': #{ml.$css-var-prefix}spin 1.5s linear infinite, + 'mNt': #{ml.$css-var-prefix}notify 1.5s ease infinite, + 'mBt': #{ml.$css-var-prefix}beat 4s cubic-bezier(0.37, 0, 0.63, 1) infinite, + 'mBr': #{ml.$css-var-prefix}breath 2s ease-in-out infinite, + 'mBn': #{ml.$css-var-prefix}bounce 1s infinite + ), 'font-size': ( 'sl': smaller, // so as not to occupy `lg` diff --git a/test/css/test.css b/test/css/test.css index 6dce11ce..f474ea7f 100644 --- a/test/css/test.css +++ b/test/css/test.css @@ -57,10 +57,10 @@ } .gs-debug { - /* autoprefixer: off */ - padding: calc(var(--ml-gg) * 3) 0px; - background-image: linear-gradient(90deg, #336 var(--ml-gg), #d15 var(--ml-gg), #d15 calc(100% - var(--ml-gg)), #336 0); - background-size: calc(1 / var(--ml-gscc) * 100%); + /* autoprefixer: off */ + padding: calc(var(--ml-gg) * 3) 0px; + background-image: linear-gradient(90deg, #336 var(--ml-gg), #d15 var(--ml-gg), #d15 calc(100% - var(--ml-gg)), #336 0); + background-size: calc(1 / var(--ml-gscc) * 100%); } .kss-description, @@ -90,7 +90,7 @@ .kss-description table:not([class]) th { padding: 6px; border: 1px solid #dfe2e5; - margin-bottom: 24px; + margin-bottom: 24px; } @media (min-width:520px) { @@ -101,7 +101,7 @@ } .kss-description table:not([class]) { - margin-bottom: 24px; + margin-bottom: 24px; } @media (max-width:519px) { @@ -112,124 +112,139 @@ /* CSS for demo, that not included in default bundle */ :root { - --ml-gscc: 12; + --ml-gscc: 12; } .row { - position: relative; - display: flex; - flex-wrap: wrap; - padding: 0px; - list-style: none; - counter-reset: ml-row-item; + position: relative; + display: flex; + flex-wrap: wrap; + padding: 0px; + list-style: none; + counter-reset: ml-row-item; } .row { - margin: 0px -16px; - margin: 0px calc(var(--ml-gg) * -1); + margin: 0px -16px; + margin: 0px calc(var(--ml-gg) * -1); } .row__col, .row__item { - --ml-gsfd: 0px; - max-width: 100%; + --ml-gsfd: 0px; + max-width: 100%; } .row__col, .row__item { - --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2); - --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg))); + --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2); + --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg))); } .row__col > :first-child:not([class]), .row__item > :first-child:not([class]) { - margin-top: 0px; + margin-top: 0px; } .row__col > :last-child:not([class]), .row__item > :last-child:not([class]) { - margin-bottom: 0px; + margin-bottom: 0px; } .row__col { - --ml-gsfd: calc(var(--ml-gg) * 1); + --ml-gsfd: calc(var(--ml-gg) * 1); } .row__col { - --ml-gsc: 12; - width: calc(100% - 32px); - width: var(--ml-gscf, 100%); + --ml-gsc: 12; + width: calc(100% - 32px); + width: var(--ml-gscf, 100%); } .row__col { - margin: 0px 16px 32px; - margin: 0px calc(var(--ml-gg) * 1) calc(var(--ml-gg) * 2); + margin: 0px 16px 32px; + margin: 0px calc(var(--ml-gg) * 1) calc(var(--ml-gg) * 2); } .row__col.row { - margin-bottom: 0px; + margin-bottom: 0px; } .-Gsfd1gg { - --ml-gsfd: calc(var(--ml-gg) * 1); + --ml-gsfd: calc(var(--ml-gg) * 1); } .-Gsfd0 { - --ml-gsfd: 0px; + --ml-gsfd: 0px; } .-Gsf { - --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2); - --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg))); + --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2); + --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg))); +} + +.animation-place { + padding: 15%; +} + +.animation-item { + width: 50%; + aspect-ratio: 1; + background-image: linear-gradient(#0078ff 0% 50%, #c2e3e3 50% 100%); + border-radius: 100%; } @media (min-width: 520px) { - .sm_W1gc { - --ml-gsc: 1; - width: calc(8.3333333333% - 32px); - width: var(--ml-gscf, 8.3333333333%); - } - .sm_W2gc { - --ml-gsc: 2; - width: calc(16.6666666667% - 32px); - width: var(--ml-gscf, 16.6666666667%); - } + .sm_W1gc { + --ml-gsc: 1; + width: calc(8.3333333333% - 32px); + width: var(--ml-gscf, 8.3333333333%); + } + .sm_W2gc { + --ml-gsc: 2; + width: calc(16.6666666667% - 32px); + width: var(--ml-gscf, 16.6666666667%); + } } @media (min-width: 768px) { - .md_W1gc { - --ml-gsc: 1; - width: calc(8.3333333333% - 32px); - width: var(--ml-gscf, 8.3333333333%); - } - - .md_W3gc { - --ml-gsc: 3; - width: calc(25% - 32px); - width: var(--ml-gscf, 25%); - } - - .md_W4gc { - --ml-gsc: 4; - width: calc(33.3333333333% - 32px); - width: var(--ml-gscf, 33.3333333333%); - } - - .md_W5gc { - --ml-gsc: 5; - width: calc(41.6666666667% - 32px); - width: var(--ml-gscf, 41.6666666667%); - } - - .md_W8gc { - --ml-gsc: 8; - width: calc(66.6666666667% - 32px); - width: var(--ml-gscf, 66.6666666667%); - } - - .md_W9gc { - --ml-gsc: 9; - width: calc(75% - 32px); - width: var(--ml-gscf, 75%); - } + .md_W1gc { + --ml-gsc: 1; + width: calc(8.3333333333% - 32px); + width: var(--ml-gscf, 8.3333333333%); + } + + .md_W3gc { + --ml-gsc: 3; + width: calc(25% - 32px); + width: var(--ml-gscf, 25%); + } + + .md_W4gc { + --ml-gsc: 4; + width: calc(33.3333333333% - 32px); + width: var(--ml-gscf, 33.3333333333%); + } + + .md_W5gc { + --ml-gsc: 5; + width: calc(41.6666666667% - 32px); + width: var(--ml-gscf, 41.6666666667%); + } + + .md_W8gc { + --ml-gsc: 8; + width: calc(66.6666666667% - 32px); + width: var(--ml-gscf, 66.6666666667%); + } + + .md_W9gc { + --ml-gsc: 9; + width: calc(75% - 32px); + width: var(--ml-gscf, 75%); + } + + .animation-place { + padding: 3%; + } }