diff --git a/CHANGELOG.md b/CHANGELOG.md index e6b5206..db7f51e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,54 +1,150 @@ # Changelog +## [3.2.1](https://github.com/primefaces/primeflex/tree/3.2.1) (2022-05-30) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/3.2.0...3.2.1) + +**Fixed bugs:** + +- SassError: Expected identifier [\#91](https://github.com/primefaces/primeflex/issues/91) + +## [3.2.0](https://github.com/primefaces/primeflex/tree/3.2.0) (2022-05-07) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/3.1.3...3.2.0) + +**Implemented New Features and Enhancements:** + +- Primary and Red Color Palette [\#113](https://github.com/primefaces/primeflex/issues/113) +- Add gap, row-gap and column-gap classes [\#115](https://github.com/primefaces/primeflex/issues/115) +- Container - Container-fluid Class \(proposal\) [\#46](https://github.com/primefaces/primeflex/issues/46) +- Add rem and direction options to border-radius classes [\#121](https://github.com/primefaces/primeflex/issues/121) +- Add text-color and text-color-secondary classes to use text color variables of Prime UI themes [\#120](https://github.com/primefaces/primeflex/issues/120) +- Add rem options to max-w\* and max-h\* classes [\#119](https://github.com/primefaces/primeflex/issues/119) +- Add focus, hover and active states to shadow classes [\#118](https://github.com/primefaces/primeflex/issues/118) +- Add focus, hover and active states to text-decoration classes [\#117](https://github.com/primefaces/primeflex/issues/117) +- Add vertical alignment classes [\#116](https://github.com/primefaces/primeflex/issues/116) +- Add $prefix variable to not conflict with other libraries like Tailwind [\#110](https://github.com/primefaces/primeflex/issues/110) +- Missing responsive styles for col and col-fixed classes [\#82](https://github.com/primefaces/primeflex/issues/82) + +**Fixed bugs:** + +- Breakpoints variable cannot be overriden [\#111](https://github.com/primefaces/primeflex/issues/111) + ## [3.1.3](https://github.com/primefaces/primeflex/tree/3.1.3) (2022-02-18) -[Full Changelog](https://github.com/primefaces/primevue/compare/3.1.2...3.1.3) +[Full Changelog](https://github.com/primefaces/primeflex/compare/3.1.2...3.1.3) **Fixed bugs:** -- Surface colors might be overridden [\#100](https://github.com/primefaces/primevue/issues/100) -- surface-hover uses border-color not bg-color [\#101](https://github.com/primefaces/primevue/issues/101) -- widths may not be overridden responsively [\#102](https://github.com/primefaces/primevue/issues/102) +- widths may not be overridden responsively [\#102](https://github.com/primefaces/primeflex/issues/102) +- surface-hover uses border-color not bg-color [\#101](https://github.com/primefaces/primeflex/issues/101) +- Surface colors might be overridden [\#100](https://github.com/primefaces/primeflex/issues/100) ## [3.1.2](https://github.com/primefaces/primeflex/tree/3.1.2) (2021-12-16) -[Full Changelog](https://github.com/primefaces/primevue/compare/3.1.1...3.1.2) +[Full Changelog](https://github.com/primefaces/primeflex/compare/3.1.1...3.1.2) **Fixed bugs:** -- primeflex.scss is missing in primeflex 3.1.1 [\#90](https://github.com/primefaces/primevue/issues/90) +- primeflex.scss is missing in primeflex 3.1.1 [\#90](https://github.com/primefaces/primeflex/issues/90) ## [3.1.1](https://github.com/primefaces/primeflex/tree/3.1.1) (2021-12-15) -[Full Changelog](https://github.com/primefaces/primevue/compare/3.1.0...3.1.1) +[Full Changelog](https://github.com/primefaces/primeflex/compare/3.1.0...3.1.1) **Fixed bugs:** -- Deprecation Warnings for Dart Sass [\#81](https://github.com/primefaces/primevue/issues/81) +- Deprecation Warnings for Dart Sass [\#81](https://github.com/primefaces/primeflex/issues/81) -## [3.1.0](https://github.com/primefaces/primeflex/tree/3.0.1) (2021-10-18) +## [3.1.0](https://github.com/primefaces/primeflex/tree/3.1.0) (2021-10-18) -[Full Changelog](https://github.com/primefaces/primevue/compare/3.0.1...3.1.0) +[Full Changelog](https://github.com/primefaces/primeflex/compare/3.0.1...3.1.0) **Implemented New Features and Enhancements:** -- feat: more colors customization [\#62](https://github.com/primefaces/primevue/issues/62) -- Add text overflow classes [\#78](https://github.com/primefaces/primevue/issues/78) -- RGBA colors for black and white [\#77](https://github.com/primefaces/primevue/issues/77) -- Negative Margins [\#76](https://github.com/primefaces/primevue/issues/76) -- primeflex.css.map error [\#72](https://github.com/primefaces/primevue/issues/72) -- Explicitly State The licence this is under [\#75](https://github.com/primefaces/primevue/issues/75) +- Add text overflow classes [\#78](https://github.com/primefaces/primeflex/issues/78) +- RGBA colors for black and white [\#77](https://github.com/primefaces/primeflex/issues/77) +- Negative Margins [\#76](https://github.com/primefaces/primeflex/issues/76) +- Explicitly State The licence this is under [\#75](https://github.com/primefaces/primeflex/issues/75) +- feat: more colors customization [\#62](https://github.com/primefaces/primeflex/issues/62) **Fixed bugs:** -- Document named surface-* classes [\#80](https://github.com/primefaces/primevue/issues/80) -- Reuse Classes not working [\#68](https://github.com/primefaces/primevue/issues/68) -- Opacity on fadeout animations is incorrect [\#71](https://github.com/primefaces/primevue/issues/71) +- Document named surface-\* classes [\#80](https://github.com/primefaces/primeflex/issues/80) +- Opacity on fadeout animations is incorrect [\#71](https://github.com/primefaces/primeflex/issues/71) +- Reuse Classes not working [\#68](https://github.com/primefaces/primeflex/issues/68) ## [3.0.1](https://github.com/primefaces/primeflex/tree/3.0.1) (2021-07-29) -[Full Changelog](https://github.com/primefaces/primevue/compare/3.0.0...3.0.1) +[Full Changelog](https://github.com/primefaces/primeflex/compare/3.0.0...3.0.1) + +**Fixed bugs:** + +- Add sources to distribution [\#79](https://github.com/primefaces/primeflex/issues/79) + +## [3.0.0](https://github.com/primefaces/primeflex/tree/3.0.0) (2021-07-14) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/2.0.0...3.0.0) + +## [2.0.0](https://github.com/primefaces/primeflex/tree/2.0.0) (2020-08-26) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/2.0.0-rc.1...2.0.0) **Implemented New Features and Enhancements:** -- Add sources to distribution [\#73](https://github.com/primefaces/primevue/issues/73) \ No newline at end of file +- Deprecate Grid CSS flex props in favor of FlexBox [\#32](https://github.com/primefaces/primeflex/issues/32) +- .src folder seems to be exlcuded in node module [\#23](https://github.com/primefaces/primeflex/issues/23) + +**Fixed bugs:** + +- Missing padding-top-bottom inside .p-field.p-grid [\#29](https://github.com/primefaces/primeflex/issues/29) + +## [2.0.0-rc.1](https://github.com/primefaces/primeflex/tree/2.0.0-rc.1) (2020-07-03) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/1.3.1...2.0.0-rc.1) + +## [1.3.1](https://github.com/primefaces/primeflex/tree/1.3.1) (2020-06-26) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/1.3.0...1.3.1) + +## [1.3.0](https://github.com/primefaces/primeflex/tree/1.3.0) (2020-06-18) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/1.2.0...1.3.0) + +## [1.2.0](https://github.com/primefaces/primeflex/tree/1.2.0) (2020-06-16) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/1.1.1...1.2.0) + +## [1.1.1](https://github.com/primefaces/primeflex/tree/1.1.1) (2020-05-28) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/1.1.0...1.1.1) + +**Implemented New Features and Enhancements:** + +- Narrow down the scope of field label [\#21](https://github.com/primefaces/primeflex/issues/21) + +## [1.1.0](https://github.com/primefaces/primeflex/tree/1.1.0) (2020-05-07) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/1.0.0...1.1.0) + +**Implemented New Features and Enhancements:** + +- Add form layout utility [\#19](https://github.com/primefaces/primeflex/issues/19) + +## [1.0.0](https://github.com/primefaces/primeflex/tree/1.0.0) (2019-10-15) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/1.0.0-rc.1...1.0.0) + +**Implemented New Features and Enhancements:** + +- Add p-\*-order-\* class to all breakpoints [\#15](https://github.com/primefaces/primeflex/issues/15) +- Add row direction class [\#14](https://github.com/primefaces/primeflex/issues/14) + +**Fixed bugs:** + +- Doesn't work with basic usage \(includes used workaround\) [\#8](https://github.com/primefaces/primeflex/issues/8) +- "p-dir-col" not properly rendered in IE11 [\#2](https://github.com/primefaces/primeflex/issues/2) + +## [1.0.0-rc.1](https://github.com/primefaces/primeflex/tree/1.0.0-rc.1) (2018-09-01) + +[Full Changelog](https://github.com/primefaces/primeflex/compare/8ec29b3fa3861ca4debc71aad07201af27e8c5a3...1.0.0-rc.1) \ No newline at end of file diff --git a/README.md b/README.md index 9b95a7e..a18c021 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +[![npm version](https://badge.fury.io/js/primeflex.svg)](https://badge.fury.io/js/primeflex) + # PrimeFlex PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. See [PrimeFlex homepage](http://www.primefaces.org/primeflex) for live showcase and documentation. -![alt text](http://www.primefaces.org/images/primeflex.jpg "PrimeFlex") \ No newline at end of file +![alt text](http://www.primefaces.org/images/primeflex.jpg "PrimeFlex") diff --git a/_sass/lib/src/_animation.scss b/_sass/lib/src/_animation.scss index f7f8277..e19d3f2 100644 --- a/_sass/lib/src/_animation.scss +++ b/_sass/lib/src/_animation.scss @@ -1,210 +1,371 @@ +$animationPerspective: 2000px !default; + @keyframes fadein { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } } @keyframes fadeout { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } } @keyframes scalein { - 0% { - opacity: 0; - transform: scaleY(0.8); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); - } - 100% { - opacity: 1; - transform: scaleY(1); - } + 0% { + opacity: 0; + transform: scaleY(0.8); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + 100% { + opacity: 1; + transform: scaleY(1); + } } @keyframes slidedown { - 0% { - max-height: 0; - } - 100% { - max-height: auto; - } + 0% { + max-height: 0; + } + + 100% { + max-height: auto; + } } @keyframes slideup { - 0% { - max-height: 1000px; - } - 100% { - max-height: 0; - } + 0% { + max-height: 1000px; + } + + 100% { + max-height: 0; + } } @keyframes fadeinleft { - 0% { - opacity: 0; - transform: translateX(-100%); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); - } - 100% { - opacity: 1; - transform: translateX(0%); - } + 0% { + opacity: 0; + transform: translateX(-100%); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + 100% { + opacity: 1; + transform: translateX(0%); + } } @keyframes fadeoutleft { - 0% { - opacity: 1; - transform: translateX(0%); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); - } - 100% { - opacity: 0; - transform: translateX(-100%); - } + 0% { + opacity: 1; + transform: translateX(0%); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + 100% { + opacity: 0; + transform: translateX(-100%); + } } @keyframes fadeinright { - 0% { - opacity: 0; - transform: translateX(100%); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); - } - 100% { - opacity: 1; - transform: translateX(0%); - } + 0% { + opacity: 0; + transform: translateX(100%); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + 100% { + opacity: 1; + transform: translateX(0%); + } } @keyframes fadeoutright { - 0% { - opacity: 1; - transform: translateX(0%); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); - } - 100% { - opacity: 0; - transform: translateX(100%); - } + 0% { + opacity: 1; + transform: translateX(0%); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + 100% { + opacity: 0; + transform: translateX(100%); + } } @keyframes fadeinup { - 0% { - opacity: 0; - transform: translateY(-100%); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); - } - 100% { - opacity: 1; - transform: translateY(0%); - } + 0% { + opacity: 0; + transform: translateY(-100%); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + 100% { + opacity: 1; + transform: translateY(0%); + } } @keyframes fadeoutup { - 0% { - opacity: 1; - transform: translateY(0%); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); - } - 100% { - opacity: 0; - transform: translateY(-100%); - } + 0% { + opacity: 1; + transform: translateY(0%); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + 100% { + opacity: 0; + transform: translateY(-100%); + } } @keyframes fadeindown { - 0% { - opacity: 0; - transform: translateY(100%); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); - } - 100% { - opacity: 1; - transform: translateY(0%); - } + 0% { + opacity: 0; + transform: translateY(100%); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + 100% { + opacity: 1; + transform: translateY(0%); + } } @keyframes fadeoutdown { - 0% { - opacity: 1; - transform: translateY(0%); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); - } - 100% { - opacity: 0; - transform: translateY(100%); - } + 0% { + opacity: 1; + transform: translateY(0%); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + 100% { + opacity: 0; + transform: translateY(100%); + } } @keyframes animate-width { - 0% { - width: 0; - } - 100% { - width: 100%; - } + 0% { + width: 0; + } + + 100% { + width: 100%; + } +} + +@keyframes flip { + from { + transform: perspective($animationPerspective) rotateX(-100deg); + } + + to { + transform: perspective($animationPerspective) rotateX(0); + } +} + +@keyframes flipleft { + from { + transform: perspective($animationPerspective) rotateY(-100deg); + opacity: 0; + } + + to { + transform: perspective($animationPerspective) rotateY(0); + opacity: 1; + } +} + +@keyframes flipright { + from { + transform: perspective($animationPerspective) rotateY(100deg); + opacity: 0; + } + + to { + transform: perspective($animationPerspective) rotateY(0); + opacity: 1; + } +} + +@keyframes flipup { + from { + transform: perspective($animationPerspective) rotateX(-100deg); + opacity: 0; + } + + to { + transform: perspective($animationPerspective) rotateX(0); + opacity: 1; + } +} + +@keyframes zoomin { + from { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); + } + + 50% { + opacity: 1; + } +} + +@keyframes zoomindown { + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + } + + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + } +} + +@keyframes zoominleft { + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + } + + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + } +} + +@keyframes zoominright { + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + } + + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + } +} + +@keyframes zoominup { + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + } + + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + } } .#{$prefix}fadein { - animation: fadein .15s linear; + animation: fadein .15s linear; } .#{$prefix}fadeout { - animation: fadeout .15s linear; + animation: fadeout .15s linear; } .#{$prefix}slidedown { - animation: slidedown .45s ease-in-out; + animation: slidedown .45s ease-in-out; } .#{$prefix}slideup { - animation: slideup .45s cubic-bezier(0, 1, 0, 1); + animation: slideup .45s cubic-bezier(0, 1, 0, 1); } .#{$prefix}scalein { - animation: scalein .15s linear; + animation: scalein .15s linear; } .#{$prefix}fadeinleft { - animation: fadeinleft .15s linear; + animation: fadeinleft .15s linear; } .#{$prefix}fadeoutleft { - animation: fadeoutleft .15s linear; + animation: fadeoutleft .15s linear; } .#{$prefix}fadeinright { - animation: fadeinright .15s linear; + animation: fadeinright .15s linear; } .#{$prefix}fadeoutright { - animation: fadeoutright .15s linear; + animation: fadeoutright .15s linear; } .#{$prefix}fadeinup { - animation: fadeinup .15s linear; + animation: fadeinup .15s linear; } .#{$prefix}fadeoutup { - animation: fadeoutup .15s linear; + animation: fadeoutup .15s linear; } .#{$prefix}fadeindown { - animation: fadeindown .15s linear; + animation: fadeindown .15s linear; } .#{$prefix}fadeoutdown { - animation: fadeoutdown .15s linear; + animation: fadeoutdown .15s linear; } .#{$prefix}animate-width { - animation: animate-width 1000ms linear; + animation: animate-width 1000ms linear; +} + +.#{$prefix}flip { + backface-visibility: visible; + animation: flip .15s linear; +} + +.#{$prefix}flipup { + backface-visibility: visible; + animation: flipup .15s linear; +} + +.#{$prefix}flipleft { + backface-visibility: visible; + animation: flipleft .15s linear; +} + +.#{$prefix}flipright { + backface-visibility: visible; + animation: flipright .15s linear; +} + +.#{$prefix}zoomin { + animation: zoomin .15s linear; +} + +.#{$prefix}zoomindown { + animation: zoomindown .15s linear; +} + +.#{$prefix}zoominleft { + animation: zoominleft .15s linear; +} + +.#{$prefix}zoominright { + animation: zoominright .15s linear; +} + +.#{$prefix}zoominup { + animation: zoominup .15s linear; } $animation-duration-props: ( @@ -253,4 +414,4 @@ $animation-fill-props: ( @include style-class('animation-delay', $animation-delay-props); @include style-class('animation-iteration-count', $animation-iteration-props); @include style-class('animation-timing-function', $animation-timing-props); -@include style-class('animation-fill-mode', $animation-fill-props); +@include style-class('animation-fill-mode', $animation-fill-props); \ No newline at end of file diff --git a/_sass/lib/src/_colors.scss b/_sass/lib/src/_colors.scss index fb25761..02d9169 100644 --- a/_sass/lib/src/_colors.scss +++ b/_sass/lib/src/_colors.scss @@ -1,4 +1,4 @@ -$colors: 'blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'gray', 'red', 'primary' !default; +$themeColors: 'blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'gray', 'red', 'primary' !default; $colorShades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 !default; $surfaceShades: 0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 !default; $rgbaShades: 10, 20, 30, 40, 50, 60, 70, 80, 90 !default; @@ -8,9 +8,9 @@ $rgbaShades: 10, 20, 30, 40, 50, 60, 70, 80, 90 !default; @include surface-class('border', 'border-color', $surfaceShades); @include style-class('background-color', (bg-transparent:'transparent'), true); @include style-class('border-color', (border-transparent:'transparent'), true); -@include color-class('text-', 'color', $colors, $colorShades); -@include color-class('bg-', 'background-color', $colors, $colorShades); -@include color-class('border-', 'border-color', $colors, $colorShades); +@include color-class('text-', 'color', $themeColors, $colorShades); +@include color-class('bg-', 'background-color', $themeColors, $colorShades); +@include color-class('border-', 'border-color', $themeColors, $colorShades); @include rgba-color-class('bg-', 'background-color', ('white': '255,255,255', 'black': '0,0,0'), $rgbaShades); @include rgba-color-class('border-', 'border-color', ('white': '255,255,255', 'black': '0,0,0'), $rgbaShades); @include rgba-color-class('text-', 'color', ('white': '255,255,255', 'black': '0,0,0'), $rgbaShades); diff --git a/dist/package.json b/dist/package.json index 2dfb5b0..477e119 100644 --- a/dist/package.json +++ b/dist/package.json @@ -1,6 +1,6 @@ { "name": "primeflex", - "version": "3.2.0", + "version": "3.2.2", "description": "PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.", "repository": { "type": "git", diff --git a/dist/themes/arya-blue.css b/dist/themes/arya-blue.css index 8d78f26..748ba0b 100644 --- a/dist/themes/arya-blue.css +++ b/dist/themes/arya-blue.css @@ -157,5 +157,3 @@ --primary-800:#daedfd; --primary-900:#f7fbff; } - -/*# sourceMappingURL=arya-blue.css.map */ diff --git a/dist/themes/arya-blue.css.map b/dist/themes/arya-blue.css.map deleted file mode 100644 index 6e50f49..0000000 --- a/dist/themes/arya-blue.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../../_sass/lib/themes/arya-blue.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"arya-blue.css"} \ No newline at end of file diff --git a/dist/themes/saga-blue.css b/dist/themes/saga-blue.css index 2205abb..dfd83ee 100644 --- a/dist/themes/saga-blue.css +++ b/dist/themes/saga-blue.css @@ -157,5 +157,3 @@ --primary-800:#125386; --primary-900:#0d3c61; } - -/*# sourceMappingURL=saga-blue.css.map */ diff --git a/dist/themes/saga-blue.css.map b/dist/themes/saga-blue.css.map deleted file mode 100644 index 2268681..0000000 --- a/dist/themes/saga-blue.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../../_sass/lib/themes/saga-blue.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"saga-blue.css"} \ No newline at end of file diff --git a/dist/themes/vela-blue.css b/dist/themes/vela-blue.css index f989473..6978733 100644 --- a/dist/themes/vela-blue.css +++ b/dist/themes/vela-blue.css @@ -157,5 +157,3 @@ --primary-800:#376487; --primary-900:#284862; } - -/*# sourceMappingURL=vela-blue.css.map */ diff --git a/dist/themes/vela-blue.css.map b/dist/themes/vela-blue.css.map deleted file mode 100644 index 0bcb02c..0000000 --- a/dist/themes/vela-blue.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../../_sass/lib/themes/vela-blue.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"vela-blue.css"} \ No newline at end of file diff --git a/package.json b/package.json index ac77667..2b0fc02 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "primeflex", - "version": "3.2.0", + "version": "3.2.2-SNAPSHOT", "description": "PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.", "scripts": { "serve": "jekyll serve --livereload", diff --git a/pages/animation/animations.html b/pages/animation/animations.html index 128fb5a..c002093 100644 --- a/pages/animation/animations.html +++ b/pages/animation/animations.html @@ -1,7 +1,7 @@ --- layout: layout permalink: /animations -title: Animaitons +title: Animations ---
@@ -252,6 +252,165 @@
Classes
100% { width: 100%; } + } + + + + flip + + animation: flip .15s linear; + + @keyframes flip { + from { + transform: perspective($animationPerspective) rotateX(-100deg); + } + + to { + transform: perspective($animationPerspective) rotateX(0); + } + } + + + + flipleft + + animation: flipleft .15s linear; + + @keyframes flipleft { + from { + transform: perspective($animationPerspective) rotateY(-100deg); + opacity: 0; + } + + to { + transform: perspective($animationPerspective) rotateY(0); + opacity: 1; + } + } + + + + flipright + + animation: flipright .15s linear; + + @keyframes flipright { + from { + transform: perspective($animationPerspective) rotateY(100deg); + opacity: 0; + } + + to { + transform: perspective($animationPerspective) rotateY(0); + opacity: 1; + } + } + + + + flipup + + animation: flipup .15s linear; + + @keyframes flipup { + from { + transform: perspective($animationPerspective) rotateX(-100deg); + opacity: 0; + } + + to { + transform: perspective($animationPerspective) rotateX(0); + opacity: 1; + } + } + + + + zoomin + + animation: zoomin .15s linear; + + @keyframes zoomin { + from { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); + } + + 50% { + opacity: 1; + } + } + + + + zoomindown + + animation: zoomindown .15s linear; + + @keyframes zoomindown { + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + } + + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + } + } + + + + zoominleft + + animation: zoominleft .15s linear; + + @keyframes zoominleft { + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + } + + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + } + } + + + + zoomninright + + animation: zoomninright .15s linear; + + @keyframes zoomninright { + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + } + + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + } + } + + + + zoominup + + animation: zoominup .15s linear; + + @keyframes zoominup { + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + } + + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + } } diff --git a/pages/background/backgroundcolor.html b/pages/background/backgroundcolor.html index 773ced2..bc5a6a6 100644 --- a/pages/background/backgroundcolor.html +++ b/pages/background/backgroundcolor.html @@ -75,9 +75,9 @@
Classes
- surface-200 + surface-100 background-color: var(--surface-100); -
+
surface-200 diff --git a/pages/layout/display.html b/pages/layout/display.html index 074225c..af9c29f 100644 --- a/pages/layout/display.html +++ b/pages/layout/display.html @@ -150,7 +150,7 @@
Flex
Inline Flex
-

Displays the element as an inline level flex container..

+

Displays the element as an inline level flex container.

1
diff --git a/pages/setup.html b/pages/setup.html index 511507b..cc91c86 100644 --- a/pages/setup.html +++ b/pages/setup.html @@ -24,7 +24,7 @@
Module Loader
Load from CDN

PrimeFlex can also be loaded from a CDN using a link tag.


-<link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.2/primeflex.css">
+<link rel="stylesheet" href="https://unpkg.com/primeflex@3.2.1/primeflex.css">