Add custom build warning (#1451)
This commit is contained in:
parent
f120bb5a95
commit
d6170a328f
File diff suppressed because one or more lines are too long
2
animate.css
vendored
2
animate.css
vendored
|
@ -5,7 +5,7 @@
|
||||||
* Version - 4.1.1
|
* Version - 4.1.1
|
||||||
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
|
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
|
||||||
*
|
*
|
||||||
* Copyright (c) 2021 Animate.css
|
* Copyright (c) 2022 Animate.css
|
||||||
*/
|
*/
|
||||||
:root {
|
:root {
|
||||||
--animate-duration: 1s;
|
--animate-duration: 1s;
|
||||||
|
|
2
animate.min.css
vendored
2
animate.min.css
vendored
File diff suppressed because one or more lines are too long
3
docs/animate.min.css
vendored
3
docs/animate.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -1208,9 +1208,11 @@ animateCSS('.my-element', 'bounce').then((message) => {
|
||||||
|
|
||||||
<section class="docSection-custom-builds" id="custom-builds">
|
<section class="docSection-custom-builds" id="custom-builds">
|
||||||
<h2>Custom Builds</h2>
|
<h2>Custom Builds</h2>
|
||||||
<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>
|
<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>
|
||||||
|
<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>
|
||||||
<p>First of all, you’ll need Node and all other dependencies:</p>
|
<p>First of all, you’ll need Node and all other dependencies:</p>
|
||||||
<pre><code class="language-shell">$ cd path/to/animate.css/
|
<pre><code class="language-shell">$ git clone https://github.com/animate-css/animate.css.git
|
||||||
|
$ cd animate.css
|
||||||
$ npm install
|
$ npm install
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<p>Next, run <code>npm start</code> to compile your custom build. Three files will be generated:</p>
|
<p>Next, run <code>npm start</code> to compile your custom build. Three files will be generated:</p>
|
||||||
|
|
|
@ -148,6 +148,16 @@ h5 {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
color: #000;
|
||||||
|
background: var(--c-background-dark);
|
||||||
|
border-radius: 0.25em;
|
||||||
|
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
border-left: 6px solid var(--c-secondary);
|
border-left: 6px solid var(--c-secondary);
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
|
@ -283,7 +293,7 @@ blockquote {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-item--title{
|
.animation-item--title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -320,23 +330,23 @@ blockquote {
|
||||||
.copy-icon {
|
.copy-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border: 1px solid rgba(0, 0, 0, .3);
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
align-self: center;
|
align-self: center;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: none;
|
background: none;
|
||||||
background: #F7D7B5;
|
background: #f7d7b5;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-icon::before{
|
.copy-icon::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -4px;
|
right: -4px;
|
||||||
top: -4px;
|
top: -4px;
|
||||||
width: 120%;
|
width: 120%;
|
||||||
height: 120%;
|
height: 120%;
|
||||||
border: 1px solid rgba(0, 0, 0, .3);
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -345,7 +355,7 @@ blockquote {
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-item .copy-icon:hover,
|
.animation-item .copy-icon:hover,
|
||||||
.animation-item .copy-icon:hover::before{
|
.animation-item .copy-icon:hover::before {
|
||||||
border-color: black;
|
border-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -686,19 +696,19 @@ blockquote {
|
||||||
|
|
||||||
.dark .animation-list,
|
.dark .animation-list,
|
||||||
.dark .sidebar {
|
.dark .sidebar {
|
||||||
background: #15151D;
|
background: #15151d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .button.button-animations,
|
.dark .button.button-animations,
|
||||||
.dark .callout-hideList.button {
|
.dark .callout-hideList.button {
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
border-color: rgba(255, 255, 255, .7);
|
border-color: rgba(255, 255, 255, 0.7);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .copy-icon,
|
.dark .copy-icon,
|
||||||
.dark .copy-icon:hover {
|
.dark .copy-icon:hover {
|
||||||
background: #15151D;
|
background: #15151d;
|
||||||
border-color: #e0e0e0;
|
border-color: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -714,13 +724,13 @@ blockquote {
|
||||||
.dark h2,
|
.dark h2,
|
||||||
.dark h3,
|
.dark h3,
|
||||||
.dark h4,
|
.dark h4,
|
||||||
.dark a[title="Documentation"],
|
.dark a[title='Documentation'],
|
||||||
.dark pre * {
|
.dark pre * {
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark section {
|
.dark section {
|
||||||
border-color: rgba(255, 255, 255, .2);
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark h1,
|
.dark h1,
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
## Custom Builds
|
## Custom Builds
|
||||||
|
|
||||||
Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.
|
<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>
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
First of all, you’ll need Node and all other dependencies:
|
First of all, you’ll need Node and all other dependencies:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ cd path/to/animate.css/
|
$ git clone https://github.com/animate-css/animate.css.git
|
||||||
|
$ cd animate.css
|
||||||
$ npm install
|
$ npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue