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