Skip to content

Commit bdb5f3d

Browse files
streamichstreamich
authored
Merge pull request #23 from streamich/feat/fadeOut
Feat/fade out
2 parents c2d6c07 + 0b970df commit bdb5f3d

33 files changed

Lines changed: 135 additions & 35 deletions

‎.storybook/animate.stories.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ const {addon: addonKeyframes} = require('../addon/keyframes');
99
const animations = [
1010
'fadeIn',
1111
'fadeInDown',
12-
'fadeInExpand',
12+
'fadeInScale',
13+
'fadeOut',
14+
'fadeOutScale',
1315
];
1416

1517
const nano = create();

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,9 @@ __Tiny [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/
3939
- [`unitless`](./docs/unitless.md)
4040
- [`!important`](./docs/important.md)
4141
- [`:global`](./docs/global.md)
42-
- [Animations](./docs/animations.md)
43-
- [CSS resets](./docs/resets.md)
42+
- [`animate/*`](./docs/animations.md)
43+
- [`reset/*`](./docs/resets.md)
44+
- [`reset-font`](./docs/reset-font.md)
4445
- [Server-side rendering](./docs/SSR.md)
4546

4647

addon/animate/fadeInExpand.js renamed to addon/animate/fadeInScale.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports.addon = function (renderer) {
66
}
77

88
renderer.put('', {
9-
'@keyframes fadeInExpand': {
9+
'@keyframes fadeInScale': {
1010
from: {
1111
opacity: 0,
1212
transform: 'scale(.95)'
@@ -18,8 +18,8 @@ exports.addon = function (renderer) {
1818
}
1919
},
2020

21-
'.fadeInExpand': {
22-
animation: 'fadeInExpand .3s',
21+
'.fadeInScale': {
22+
animation: 'fadeInScale .3s',
2323
}
2424
});
2525
};

‎addon/animate/fadeOut.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use strict';
2+
3+
exports.addon = function (renderer) {
4+
if (process.env.NODE_ENV !== 'production') {
5+
require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
6+
}
7+
8+
renderer.put('', {
9+
'@keyframes fadeOut': {
10+
from: {
11+
opacity: 1,
12+
},
13+
to: {
14+
opacity: 0,
15+
}
16+
},
17+
18+
'.fadeOut': {
19+
animation: 'fadeOut .3s linear',
20+
'animation-fill-mode': 'forwards',
21+
}
22+
});
23+
};

‎addon/animate/fadeOutScale.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
'use strict';
2+
3+
exports.addon = function (renderer) {
4+
if (process.env.NODE_ENV !== 'production') {
5+
require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
6+
}
7+
8+
renderer.put('', {
9+
'@keyframes fadeOutScale': {
10+
to: {
11+
opacity: 0,
12+
transform: 'scale(.95)',
13+
}
14+
},
15+
16+
'.fadeOutScale': {
17+
animation: 'fadeOutScale .3s linear',
18+
'animation-fill-mode': 'forwards',
19+
}
20+
});
21+
};

‎addon/reset-font.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use strict';
2+
3+
exports.addon = function (renderer) {
4+
if (process.env.NODE_ENV !== 'production') {
5+
require('./__dev__/warnOnMissingDependencies')('reset-font', renderer, ['rule']);
6+
}
7+
8+
renderer.put('', {
9+
'html, body': {
10+
fontFamily: '"Open Sans",sans',
11+
fontWeight: 400,
12+
fontSize: '16px',
13+
14+
'-moz-text-size-adjust': '100%',
15+
'-ms-text-size-adjust': '100%',
16+
'-webkit-text-size-adjust': '100%',
17+
'text-size-adjust': '100%',
18+
19+
// Makes fonts more smooth/prettier.
20+
'-webkit-font-smoothing': 'antialiased',
21+
'-moz-osx-font-smoothing': 'grayscale',
22+
},
23+
});
24+
};

‎docs/Addons.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ plenty more to chose from. Below is a list of addons shipped with `nano-css`.
2626
- [`unitless`](./unitless.md) &mdash; automatically adds `px` to styles
2727
- [`!important`](./important.md) &mdash; adds `!important` to all declarations
2828
- [`:global`](./global.md) &mdash; allows emitting global styles
29-
- [Animations](./animations.md) &mdash; collection of animation styles
30-
- [CSS resets](./resets.md) &mdash; collection of CSS resets
31-
29+
- [`animate/*`](./animations.md) &mdash; collection of animation styles
30+
- [`reset/*`](./resets.md) &mdash; collection of CSS resets
31+
- [`reset-font`](./docs/reset-font.md) &mdash; global styles for better font
3232

3333
## Addon Installation
3434

‎docs/animations.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ name.
66

77
- `animate/fadeIn`
88
- `animate/fadeInDown`
9-
- `animate/fadeInExpand`
9+
- `animate/fadeInScale`
10+
- `animate/fadeOut`
11+
- `animate/fadeOutScale`
1012

11-
Read more about the [Addons Installation](./Addons.md#addon-installation).
13+
Read more about the [Addon Installation](./Addons.md#addon-installation).
1214

1315

1416
## Example

‎docs/atoms.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,4 @@ var atoms = {
8282

8383
## Installation
8484

85-
Simply install `atoms` addon. Read more about the [Addons Installation](./Addons.md#addon-installation).
85+
Simply install `atoms` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).

‎docs/component.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,4 @@ Simply install `component` addon and its dependencies:
4949
- `cache`
5050
- [`rule()`](./rule.md)
5151

52-
Read more about the [Addons Installation](./Addons.md#addon-installation).
52+
Read more about the [Addon Installation](./Addons.md#addon-installation).

0 commit comments

Comments
 (0)
⚡