initial commit
This commit is contained in:
commit
559ede34bf
|
|
@ -0,0 +1,18 @@
|
|||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# WordPress Coding Standards
|
||||
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = tab
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Output of `npm pack`
|
||||
*.tgz
|
||||
|
||||
# Output of `wp-scripts plugin-zip`
|
||||
*.zip
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "red-orbital",
|
||||
"version": "0.1.0",
|
||||
"description": "Red Orbital Block",
|
||||
"author": "Ray Elliott",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"homepage": "rayelliott.dev",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^23.5.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
=== Orbital ===
|
||||
Contributors: Ray Elliott
|
||||
Tags: block
|
||||
Tested up to: 6.0
|
||||
Stable tag: 0.1.0
|
||||
License: GPL-2.0-or-later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
Red Orbital Block
|
||||
|
||||
== Description ==
|
||||
|
||||
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
|
||||
|
||||
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
|
||||
Markdown parsed.
|
||||
|
||||
== Installation ==
|
||||
|
||||
This section describes how to install the plugin and get it working.
|
||||
|
||||
e.g.
|
||||
|
||||
1. Upload the plugin files to the `/wp-content/plugins/red-orbital` directory, or install the plugin through the WordPress plugins screen directly.
|
||||
1. Activate the plugin through the 'Plugins' screen in WordPress
|
||||
|
||||
|
||||
== Frequently Asked Questions ==
|
||||
|
||||
= A question that someone might have =
|
||||
|
||||
An answer to that question.
|
||||
|
||||
= What about foo bar? =
|
||||
|
||||
Answer to foo bar dilemma.
|
||||
|
||||
== Screenshots ==
|
||||
|
||||
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
|
||||
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
|
||||
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
|
||||
(or jpg, jpeg, gif).
|
||||
2. This is the second screen shot
|
||||
|
||||
== Changelog ==
|
||||
|
||||
= 0.1.0 =
|
||||
* Release
|
||||
|
||||
== Arbitrary section ==
|
||||
|
||||
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
|
||||
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
|
||||
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<?php
|
||||
/**
|
||||
* Plugin Name: Orbital
|
||||
* Plugin URI: rayelliott.dev
|
||||
* Description: Red Orbital Block
|
||||
* Requires at least: 5.9
|
||||
* Requires PHP: 7.0
|
||||
* Version: 0.1.0
|
||||
* Author: Ray Elliott
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: red-orbital
|
||||
*
|
||||
* @package red-block
|
||||
*/
|
||||
|
||||
/**
|
||||
* Registers the block using the metadata loaded from the `block.json` file.
|
||||
* Behind the scenes, it registers also all assets so they can be enqueued
|
||||
* through the block editor in the corresponding context.
|
||||
*
|
||||
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
||||
*/
|
||||
function red_block_red_orbital_block_init() {
|
||||
register_block_type( __DIR__ . '/build' );
|
||||
}
|
||||
add_action( 'init', 'red_block_red_orbital_block_init' );
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 2,
|
||||
"name": "red-block/red-orbital",
|
||||
"version": "0.1.0",
|
||||
"title": "Orbital",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Red Orbital Block",
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"textdomain": "red-orbital",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"attributes": {
|
||||
"primaries": {
|
||||
"type": "array",
|
||||
"source": "query",
|
||||
"selector": ".orbitals img",
|
||||
"query": {
|
||||
"url": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"attribute": "src"
|
||||
}
|
||||
},
|
||||
"default": [
|
||||
{ "url": "https://via.placeholder.com/64x64"},
|
||||
{ "url": "https://via.placeholder.com/66x66"},
|
||||
{ "url": "https://via.placeholder.com/68x68"},
|
||||
{ "url": "https://via.placeholder.com/88x88"}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import {useState} from "@wordpress/element";
|
||||
import { __ } from "@wordpress/i18n";
|
||||
import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
|
||||
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
|
||||
|
||||
import Orbital from "./orbital.js";
|
||||
|
||||
import "./editor.scss";
|
||||
|
||||
export default function Edit( { attributes, setAttributes }) {
|
||||
const [discardedPrimaries, setDiscardedPrimaries] = useState([]);
|
||||
const [count, setCount] = useState(attributes.primaries.length);
|
||||
|
||||
const onCountChange = (value) => {
|
||||
if (value > attributes.primaries.length) {
|
||||
const newPrimary = discardedPrimaries.length < 1 ?
|
||||
{ url: "https://via.placeholder.com/64x64" } :
|
||||
discardedPrimaries.pop();
|
||||
const newPrimaries = attributes.primaries.concat([newPrimary]);
|
||||
setAttributes({ primaries: newPrimaries });
|
||||
}
|
||||
|
||||
if (value < attributes.primaries.length) {
|
||||
const newPrimaries = attributes.primaries;
|
||||
setDiscardedPrimaries(discardedPrimaries.concat([newPrimaries.pop()]));
|
||||
setAttributes({ primaries: newPrimaries });
|
||||
}
|
||||
|
||||
setCount(value);
|
||||
}
|
||||
|
||||
const primaryList = attributes.primaries.map((primary) => {
|
||||
return (
|
||||
<Orbital img={primary.url} />
|
||||
)
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
<div>
|
||||
<NumberControl
|
||||
value={ count }
|
||||
min={1}
|
||||
onChange={ onCountChange }
|
||||
/>
|
||||
</div>
|
||||
</InspectorControls>
|
||||
<div {...useBlockProps()}>
|
||||
|
||||
<ul className="orbitals clockwise">
|
||||
{primaryList}
|
||||
</ul>
|
||||
|
||||
<div className="inner-content">
|
||||
<div className="image-hover">
|
||||
<img
|
||||
className="img"
|
||||
src="https://via.placeholder.com/256x256/999/333"
|
||||
/>
|
||||
<img
|
||||
className="img"
|
||||
src="https://via.placeholder.com/256x256/666/ccc"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-red-block-red-orbital {
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
export default function Orbital({ img }) {
|
||||
return (
|
||||
<li className="orbital bg bg--red pulse">
|
||||
<div className="orbital-content content-center anti-clockwise">
|
||||
<div className="feature">
|
||||
<div className="feature-item primary">
|
||||
<img className="img" src={img} />
|
||||
</div>
|
||||
<div className="feature-item secondary">
|
||||
<p>Hallo!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
/**
|
||||
* Retrieves the translation of text.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
|
||||
*/
|
||||
import { __ } from "@wordpress/i18n";
|
||||
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
|
||||
*/
|
||||
import { useBlockProps } from "@wordpress/block-editor";
|
||||
import Orbital from "./orbital.js";
|
||||
|
||||
/**
|
||||
* The save function defines the way in which the different attributes should
|
||||
* be combined into the final markup, which is then serialized by the block
|
||||
* editor into `post_content`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
|
||||
*
|
||||
* @return {WPElement} Element to render.
|
||||
*/
|
||||
export default function save( {attributes} ) {
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
const primaryList = attributes.primaries.map((primary) => {
|
||||
return (
|
||||
<Orbital img={primary.url} />
|
||||
)
|
||||
});
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
|
||||
<ul className="orbitals clockwise">
|
||||
{primaryList}
|
||||
</ul>
|
||||
|
||||
<div className="inner-content">
|
||||
<div className="image-hover">
|
||||
<img
|
||||
className="img"
|
||||
src="https://via.placeholder.com/256x256/999/333"
|
||||
/>
|
||||
<img
|
||||
className="img"
|
||||
src="https://via.placeholder.com/256x256/666/ccc"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,393 @@
|
|||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-red-block-red-orbital {
|
||||
--count__orbitals: 8;
|
||||
|
||||
--width__inner-content: 11em;
|
||||
--width__orbital: 7.5em;
|
||||
|
||||
--radius: 14em;
|
||||
|
||||
--duration__rotation: 50s;
|
||||
--duration__pulse: 1.5s;
|
||||
--duration__image-hover: 0.3s;
|
||||
--duration__feature-hover: 0.3s;
|
||||
|
||||
position: relative;
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
overflow: hidden;
|
||||
|
||||
font-size: 1rem;
|
||||
|
||||
background-color: white;
|
||||
|
||||
background-color: #21759b;
|
||||
|
||||
ul,
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.orbitals {
|
||||
position: relative;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.orbital {
|
||||
position: absolute;
|
||||
width: var(--width__orbital);
|
||||
height: var(--width__orbital);
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(
|
||||
calc(-50% + var(--x-offset)),
|
||||
calc(-50% - var(--y-offset))
|
||||
);
|
||||
}
|
||||
|
||||
.orbital {
|
||||
/* --angle must be in radians so multiply by 2 * pi */
|
||||
--angle: calc(6.2831853036 * var(--index) / var(--count__orbitals));
|
||||
|
||||
/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
|
||||
--sin-term1: var(--angle);
|
||||
--sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
|
||||
--sin-term3: calc(
|
||||
(var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) /
|
||||
120
|
||||
);
|
||||
--sin-term4: calc(
|
||||
(
|
||||
var(--angle) * var(--angle) * var(--angle) * var(--angle) *
|
||||
var(--angle) * var(--angle) * var(--angle)
|
||||
) / 5040
|
||||
);
|
||||
--sin-term5: calc(
|
||||
(
|
||||
var(--angle) * var(--angle) * var(--angle) * var(--angle) *
|
||||
var(--angle) * var(--angle) * var(--angle) * var(--angle) *
|
||||
var(--angle)
|
||||
) / 362880
|
||||
);
|
||||
--sin: calc(
|
||||
var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) +
|
||||
var(--sin-term5)
|
||||
);
|
||||
|
||||
/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
|
||||
--cos-term1: 1;
|
||||
--cos-term2: calc((var(--angle) * var(--angle)) / 2);
|
||||
--cos-term3: calc(
|
||||
(var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 24
|
||||
);
|
||||
--cos-term4: calc(
|
||||
(
|
||||
var(--angle) * var(--angle) * var(--angle) * var(--angle) *
|
||||
var(--angle) * var(--angle)
|
||||
) / 720
|
||||
);
|
||||
--cos-term5: calc(
|
||||
(
|
||||
var(--angle) * var(--angle) * var(--angle) * var(--angle) *
|
||||
var(--angle) * var(--angle) * var(--angle) * var(--angle)
|
||||
) / 40320
|
||||
);
|
||||
--cos: calc(
|
||||
var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) +
|
||||
var(--cos-term5)
|
||||
);
|
||||
|
||||
--x-offset: calc(var(--radius) * var(--cos));
|
||||
--y-offset: calc(var(--radius) * var(--sin));
|
||||
|
||||
&:nth-child(1) {
|
||||
--index: 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
--index: 1;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
--index: -1;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
--index: 2;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
--index: -2;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
--index: 3;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
--index: -3;
|
||||
}
|
||||
&:nth-child(8) {
|
||||
--index: 4;
|
||||
}
|
||||
|
||||
&:nth-child(9) {
|
||||
--index: -4;
|
||||
}
|
||||
&:nth-child(10) {
|
||||
--index: 5;
|
||||
}
|
||||
|
||||
&:nth-child(11) {
|
||||
--index: -5;
|
||||
}
|
||||
&:nth-child(12) {
|
||||
--index: 6;
|
||||
}
|
||||
}
|
||||
|
||||
.orbital-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
position: absolute;
|
||||
width: var(--width__inner-content);
|
||||
height: var(--width__inner-content);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
border-radius: 3em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-hover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > .img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
object-fit: cover;
|
||||
|
||||
&:last-child {
|
||||
transition: opacity var(--duration__image-hover);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > .img {
|
||||
&:last-child {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bg {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
|
||||
transition: background-color var(--duration__feature-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.bg--red {
|
||||
&::before {
|
||||
background-color: rgba(255, 200, 200);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-color: rgba(255, 150, 150);
|
||||
}
|
||||
}
|
||||
|
||||
.bg--green {
|
||||
&::before {
|
||||
background-color: rgba(200, 255, 200);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-color: rgba(150, 255, 150);
|
||||
}
|
||||
}
|
||||
|
||||
.bg--blue {
|
||||
&::before {
|
||||
background-color: rgba(200, 200, 255);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-color: rgba(150, 150, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
& > .feature-item {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transition: opacity var(--duration__feature-hover);
|
||||
|
||||
&:first-child {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > .feature-item {
|
||||
&:first-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orbitals:hover {
|
||||
&.clockwise,
|
||||
& .anti-clockwise {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.orbital.pulse:hover {
|
||||
&::before {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.clockwise {
|
||||
animation: rotate var(--duration__rotation) linear infinite running;
|
||||
}
|
||||
|
||||
.anti-clockwise {
|
||||
animation: rotate var(--duration__rotation) reverse linear infinite running;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
&::before {
|
||||
animation: pulse var(--duration__pulse) alternate ease-in-out infinite
|
||||
running;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
animation-delay: 1.1s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
&::before {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.wp-admin .wp-block-red-block-red-orbital {
|
||||
.clockwise {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.anti-clockwise {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
&::before {
|
||||
animation: rotate var(--duration__rotation) reverse linear infinite
|
||||
running;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue