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
|
||||
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
|
||||
*
|
||||
* Copyright (c) 2021 Animate.css
|
||||
* Copyright (c) 2022 Animate.css
|
||||
*/
|
||||
:root {
|
||||
--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">
|
||||
<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>
|
||||
<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
|
||||
</code></pre>
|
||||
<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;
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 1rem;
|
||||
|
||||
color: #000;
|
||||
background: var(--c-background-dark);
|
||||
border-radius: 0.25em;
|
||||
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 6px solid var(--c-secondary);
|
||||
padding-left: 1rem;
|
||||
|
@ -283,7 +293,7 @@ blockquote {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.animation-item--title{
|
||||
.animation-item--title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -320,23 +330,23 @@ blockquote {
|
|||
.copy-icon {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
align-self: center;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
background: #F7D7B5;
|
||||
background: #f7d7b5;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.copy-icon::before{
|
||||
.copy-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: -4px;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
@ -345,7 +355,7 @@ blockquote {
|
|||
}
|
||||
|
||||
.animation-item .copy-icon:hover,
|
||||
.animation-item .copy-icon:hover::before{
|
||||
.animation-item .copy-icon:hover::before {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
|
@ -686,19 +696,19 @@ blockquote {
|
|||
|
||||
.dark .animation-list,
|
||||
.dark .sidebar {
|
||||
background: #15151D;
|
||||
background: #15151d;
|
||||
}
|
||||
|
||||
.dark .button.button-animations,
|
||||
.dark .callout-hideList.button {
|
||||
color: #e0e0e0;
|
||||
border-color: rgba(255, 255, 255, .7);
|
||||
border-color: rgba(255, 255, 255, 0.7);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dark .copy-icon,
|
||||
.dark .copy-icon:hover {
|
||||
background: #15151D;
|
||||
background: #15151d;
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
|
@ -714,13 +724,13 @@ blockquote {
|
|||
.dark h2,
|
||||
.dark h3,
|
||||
.dark h4,
|
||||
.dark a[title="Documentation"],
|
||||
.dark a[title='Documentation'],
|
||||
.dark pre * {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.dark section {
|
||||
border-color: rgba(255, 255, 255, .2);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dark h1,
|
||||
|
|
|
@ -1,11 +1,14 @@
|
|||
## 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:
|
||||
|
||||
```shell
|
||||
$ cd path/to/animate.css/
|
||||
$ git clone https://github.com/animate-css/animate.css.git
|
||||
$ cd animate.css
|
||||
$ npm install
|
||||
```
|
||||
|
||||
|
|
Loading…
Reference in a new issue