Skip to content

Commit d6170a3

Browse files
eltonmesquitaeltonmesquita
authored
Add custom build warning (#1451)
1 parent f120bb5 commit d6170a3

File tree

7 files changed

+37
-21
lines changed

7 files changed

+37
-21
lines changed

‎animate.compat.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎animate.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Version - 4.1.1
66
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
77
*
8-
* Copyright (c) 2021 Animate.css
8+
* Copyright (c) 2022 Animate.css
99
*/
1010
:root {
1111
--animate-duration: 1s;

‎animate.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/animate.min.css‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1208,9 +1208,11 @@ <h2>Migration from v3.x and under</h2>
12081208

12091209
<section class="docSection-custom-builds" id="custom-builds">
12101210
<h2>Custom Builds</h2>
1211-
<p>Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.</p>
1211+
<p class="warning">Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.</p>
1212+
<p>Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks.</p>
12121213
<p>First of all, you’ll need Node and all other dependencies:</p>
1213-
<pre><code class="language-shell">$ cd path/to/animate.css/
1214+
<pre><code class="language-shell">$ git clone https://github.com/animate-css/animate.css.git
1215+
$ cd animate.css
12141216
$ npm install
12151217
</code></pre>
12161218
<p>Next, run <code>npm start</code> to compile your custom build. Three files will be generated:</p>

‎docs/style.css‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,16 @@ h5 {
148148
text-decoration: none;
149149
}
150150

151+
.warning {
152+
padding: 1rem;
153+
154+
color: #000;
155+
background: var(--c-background-dark);
156+
border-radius: 0.25em;
157+
158+
font-style: italic;
159+
}
160+
151161
blockquote {
152162
border-left: 6px solid var(--c-secondary);
153163
padding-left: 1rem;
@@ -283,7 +293,7 @@ blockquote {
283293
justify-content: space-between;
284294
}
285295

286-
.animation-item--title{
296+
.animation-item--title {
287297
width: 100%;
288298
}
289299

@@ -320,23 +330,23 @@ blockquote {
320330
.copy-icon {
321331
position: relative;
322332
height: 10px;
323-
border: 1px solid rgba(0, 0, 0, .3);
333+
border: 1px solid rgba(0, 0, 0, 0.3);
324334
align-self: center;
325335
outline: none;
326336
cursor: pointer;
327337
background: none;
328-
background: #F7D7B5;
338+
background: #f7d7b5;
329339
visibility: hidden;
330340
}
331341

332-
.copy-icon::before{
342+
.copy-icon::before {
333343
content: '';
334344
position: absolute;
335345
right: -4px;
336346
top: -4px;
337347
width: 120%;
338348
height: 120%;
339-
border: 1px solid rgba(0, 0, 0, .3);
349+
border: 1px solid rgba(0, 0, 0, 0.3);
340350
z-index: -1;
341351
}
342352

@@ -345,7 +355,7 @@ blockquote {
345355
}
346356

347357
.animation-item .copy-icon:hover,
348-
.animation-item .copy-icon:hover::before{
358+
.animation-item .copy-icon:hover::before {
349359
border-color: black;
350360
}
351361

@@ -663,7 +673,7 @@ blockquote {
663673
}
664674

665675
.moon-svg {
666-
right: 5px;
676+
right: 5px;
667677
}
668678

669679
.sun-svg {
@@ -686,19 +696,19 @@ blockquote {
686696

687697
.dark .animation-list,
688698
.dark .sidebar {
689-
background: #15151D;
699+
background: #15151d;
690700
}
691701

692702
.dark .button.button-animations,
693703
.dark .callout-hideList.button {
694704
color: #e0e0e0;
695-
border-color: rgba(255, 255, 255, .7);
705+
border-color: rgba(255, 255, 255, 0.7);
696706
outline: none;
697707
}
698708

699709
.dark .copy-icon,
700710
.dark .copy-icon:hover {
701-
background: #15151D;
711+
background: #15151d;
702712
border-color: #e0e0e0;
703713
}
704714

@@ -714,16 +724,16 @@ blockquote {
714724
.dark h2,
715725
.dark h3,
716726
.dark h4,
717-
.dark a[title="Documentation"],
727+
.dark a[title='Documentation'],
718728
.dark pre * {
719729
color: #e0e0e0;
720730
}
721731

722732
.dark section {
723-
border-color: rgba(255, 255, 255, .2);
733+
border-color: rgba(255, 255, 255, 0.2);
724734
}
725735

726736
.dark h1,
727737
.dark a {
728738
color: #4672fe;
729-
}
739+
}

‎docsSource/sections/07-custom-builds.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
## Custom Builds
22

3-
Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.
3+
<p class="warning">Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.</p>
4+
5+
Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks.
46

57
First of all, you’ll need Node and all other dependencies:
68

79
```shell
8-
$ cd path/to/animate.css/
10+
$ git clone https://github.com/animate-css/animate.css.git
11+
$ cd animate.css
912
$ npm install
1013
```
1114

0 commit comments

Comments
 (0)