From 9a909ec4798eb6328ff3f15e31b0474b002d430b Mon Sep 17 00:00:00 2001 From: Cory Birdsong Date: Wed, 12 Apr 2023 08:39:51 -0500 Subject: [PATCH 1/5] Adjust transition value --- build/style.asset.php | 2 +- build/style.css | 2 +- src/index.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/build/style.asset.php b/build/style.asset.php index fa8c718..42ac8ca 100644 --- a/build/style.asset.php +++ b/build/style.asset.php @@ -1 +1 @@ - array(), 'version' => '86864980bdc66088e7c0'); + array(), 'version' => '8a8920dcfe863de47e17'); diff --git a/build/style.css b/build/style.css index aa1902c..0c4012b 100644 --- a/build/style.css +++ b/build/style.css @@ -1 +1 @@ -.wp-block-outermost-icon-block{display:flex;line-height:0}.wp-block-outermost-icon-block.has-border-color{border:none}.wp-block-outermost-icon-block .has-icon-color svg,.wp-block-outermost-icon-block.has-icon-color svg{color:currentColor}.wp-block-outermost-icon-block .has-icon-color:not(.has-no-icon-fill-color) svg,.wp-block-outermost-icon-block.has-icon-color:not(.has-no-icon-fill-color) svg{fill:currentColor}.wp-block-outermost-icon-block .icon-container{box-sizing:border-box}.wp-block-outermost-icon-block a,.wp-block-outermost-icon-block svg{height:100%;transition:all .1s ease-in-out;width:100%}.wp-block-outermost-icon-block a:hover{transform:scale(1.1)}.wp-block-outermost-icon-block .rotate-90 svg,.wp-block-outermost-icon-block.rotate-90 svg{transform:rotate(90deg)}.wp-block-outermost-icon-block .rotate-180 svg,.wp-block-outermost-icon-block.rotate-180 svg{transform:rotate(180deg)}.wp-block-outermost-icon-block .rotate-270 svg,.wp-block-outermost-icon-block.rotate-270 svg{transform:rotate(270deg)}.wp-block-outermost-icon-block .flip-horizontal svg,.wp-block-outermost-icon-block.flip-horizontal svg{transform:scaleX(-1)}.wp-block-outermost-icon-block .flip-vertical svg,.wp-block-outermost-icon-block.flip-vertical svg{transform:scaleY(-1)}.wp-block-outermost-icon-block .flip-vertical.flip-horizontal svg,.wp-block-outermost-icon-block.flip-vertical.flip-horizontal svg{transform:scale(-1)}.wp-block-outermost-icon-block .rotate-90.flip-horizontal svg,.wp-block-outermost-icon-block.rotate-90.flip-horizontal svg{transform:rotate(90deg) scaleX(-1)}.wp-block-outermost-icon-block .rotate-90.flip-vertical svg,.wp-block-outermost-icon-block.rotate-90.flip-vertical svg{transform:rotate(90deg) scaleY(-1)}.wp-block-outermost-icon-block .rotate-90.flip-horizontal.flip-vertical svg,.wp-block-outermost-icon-block.rotate-90.flip-horizontal.flip-vertical svg{transform:rotate(90deg) scale(-1)}.wp-block-outermost-icon-block .rotate-180.flip-horizontal svg,.wp-block-outermost-icon-block.rotate-180.flip-horizontal svg{transform:rotate(180deg) scaleX(-1)}.wp-block-outermost-icon-block .rotate-180.flip-vertical svg,.wp-block-outermost-icon-block.rotate-180.flip-vertical svg{transform:rotate(180deg) scaleY(-1)}.wp-block-outermost-icon-block .rotate-180.flip-horizontal.flip-vertical svg,.wp-block-outermost-icon-block.rotate-180.flip-horizontal.flip-vertical svg{transform:rotate(180deg) scale(-1)}.wp-block-outermost-icon-block .rotate-270.flip-horizontal svg,.wp-block-outermost-icon-block.rotate-270.flip-horizontal svg{transform:rotate(270deg) scaleX(-1)}.wp-block-outermost-icon-block .rotate-270.flip-vertical svg,.wp-block-outermost-icon-block.rotate-270.flip-vertical svg{transform:rotate(270deg) scaleY(-1)}.wp-block-outermost-icon-block .rotate-270.flip-horizontal.flip-vertical svg,.wp-block-outermost-icon-block.rotate-270.flip-horizontal.flip-vertical svg{transform:rotate(270deg) scale(-1)} +.wp-block-outermost-icon-block{display:flex;line-height:0}.wp-block-outermost-icon-block.has-border-color{border:none}.wp-block-outermost-icon-block .has-icon-color svg,.wp-block-outermost-icon-block.has-icon-color svg{color:currentColor}.wp-block-outermost-icon-block .has-icon-color:not(.has-no-icon-fill-color) svg,.wp-block-outermost-icon-block.has-icon-color:not(.has-no-icon-fill-color) svg{fill:currentColor}.wp-block-outermost-icon-block .icon-container{box-sizing:border-box}.wp-block-outermost-icon-block a,.wp-block-outermost-icon-block svg{height:100%;transition:transform .1s ease-in-out;width:100%}.wp-block-outermost-icon-block a:hover{transform:scale(1.1)}.wp-block-outermost-icon-block .rotate-90 svg,.wp-block-outermost-icon-block.rotate-90 svg{transform:rotate(90deg)}.wp-block-outermost-icon-block .rotate-180 svg,.wp-block-outermost-icon-block.rotate-180 svg{transform:rotate(180deg)}.wp-block-outermost-icon-block .rotate-270 svg,.wp-block-outermost-icon-block.rotate-270 svg{transform:rotate(270deg)}.wp-block-outermost-icon-block .flip-horizontal svg,.wp-block-outermost-icon-block.flip-horizontal svg{transform:scaleX(-1)}.wp-block-outermost-icon-block .flip-vertical svg,.wp-block-outermost-icon-block.flip-vertical svg{transform:scaleY(-1)}.wp-block-outermost-icon-block .flip-vertical.flip-horizontal svg,.wp-block-outermost-icon-block.flip-vertical.flip-horizontal svg{transform:scale(-1)}.wp-block-outermost-icon-block .rotate-90.flip-horizontal svg,.wp-block-outermost-icon-block.rotate-90.flip-horizontal svg{transform:rotate(90deg) scaleX(-1)}.wp-block-outermost-icon-block .rotate-90.flip-vertical svg,.wp-block-outermost-icon-block.rotate-90.flip-vertical svg{transform:rotate(90deg) scaleY(-1)}.wp-block-outermost-icon-block .rotate-90.flip-horizontal.flip-vertical svg,.wp-block-outermost-icon-block.rotate-90.flip-horizontal.flip-vertical svg{transform:rotate(90deg) scale(-1)}.wp-block-outermost-icon-block .rotate-180.flip-horizontal svg,.wp-block-outermost-icon-block.rotate-180.flip-horizontal svg{transform:rotate(180deg) scaleX(-1)}.wp-block-outermost-icon-block .rotate-180.flip-vertical svg,.wp-block-outermost-icon-block.rotate-180.flip-vertical svg{transform:rotate(180deg) scaleY(-1)}.wp-block-outermost-icon-block .rotate-180.flip-horizontal.flip-vertical svg,.wp-block-outermost-icon-block.rotate-180.flip-horizontal.flip-vertical svg{transform:rotate(180deg) scale(-1)}.wp-block-outermost-icon-block .rotate-270.flip-horizontal svg,.wp-block-outermost-icon-block.rotate-270.flip-horizontal svg{transform:rotate(270deg) scaleX(-1)}.wp-block-outermost-icon-block .rotate-270.flip-vertical svg,.wp-block-outermost-icon-block.rotate-270.flip-vertical svg{transform:rotate(270deg) scaleY(-1)}.wp-block-outermost-icon-block .rotate-270.flip-horizontal.flip-vertical svg,.wp-block-outermost-icon-block.rotate-270.flip-horizontal.flip-vertical svg{transform:rotate(270deg) scale(-1)} diff --git a/src/index.scss b/src/index.scss index 9d03f3f..ebdc2d6 100644 --- a/src/index.scss +++ b/src/index.scss @@ -42,7 +42,7 @@ $flipHV: scale(-1, -1); svg { width: 100%; height: 100%; - transition: all 0.1s ease-in-out; + transition: transform 0.1s ease-in-out; } /* Added for a11y. In-block hover/focus controls will be added in future releases. */ From 8967ce7cb2639a8192ac6d1c2f3ea7387828389d Mon Sep 17 00:00:00 2001 From: Cory Birdsong Date: Wed, 19 Apr 2023 13:21:41 -0500 Subject: [PATCH 2/5] Rework transforms to require less CSS --- build/style.asset.php | 2 +- build/style.css | 2 +- src/index.scss | 77 ++++--------------------------------------- 3 files changed, 9 insertions(+), 72 deletions(-) diff --git a/build/style.asset.php b/build/style.asset.php index 42ac8ca..cd20d21 100644 --- a/build/style.asset.php +++ b/build/style.asset.php @@ -1 +1 @@ - array(), 'version' => '8a8920dcfe863de47e17'); + array(), 'version' => '625b0386d94877db6c9f'); diff --git a/build/style.css b/build/style.css index 0c4012b..9db1090 100644 --- a/build/style.css +++ b/build/style.css @@ -1 +1 @@ -.wp-block-outermost-icon-block{display:flex;line-height:0}.wp-block-outermost-icon-block.has-border-color{border:none}.wp-block-outermost-icon-block .has-icon-color svg,.wp-block-outermost-icon-block.has-icon-color svg{color:currentColor}.wp-block-outermost-icon-block .has-icon-color:not(.has-no-icon-fill-color) svg,.wp-block-outermost-icon-block.has-icon-color:not(.has-no-icon-fill-color) svg{fill:currentColor}.wp-block-outermost-icon-block .icon-container{box-sizing:border-box}.wp-block-outermost-icon-block a,.wp-block-outermost-icon-block svg{height:100%;transition:transform .1s ease-in-out;width:100%}.wp-block-outermost-icon-block a:hover{transform:scale(1.1)}.wp-block-outermost-icon-block .rotate-90 svg,.wp-block-outermost-icon-block.rotate-90 svg{transform:rotate(90deg)}.wp-block-outermost-icon-block .rotate-180 svg,.wp-block-outermost-icon-block.rotate-180 svg{transform:rotate(180deg)}.wp-block-outermost-icon-block .rotate-270 svg,.wp-block-outermost-icon-block.rotate-270 svg{transform:rotate(270deg)}.wp-block-outermost-icon-block .flip-horizontal svg,.wp-block-outermost-icon-block.flip-horizontal svg{transform:scaleX(-1)}.wp-block-outermost-icon-block .flip-vertical svg,.wp-block-outermost-icon-block.flip-vertical svg{transform:scaleY(-1)}.wp-block-outermost-icon-block .flip-vertical.flip-horizontal svg,.wp-block-outermost-icon-block.flip-vertical.flip-horizontal svg{transform:scale(-1)}.wp-block-outermost-icon-block .rotate-90.flip-horizontal svg,.wp-block-outermost-icon-block.rotate-90.flip-horizontal svg{transform:rotate(90deg) scaleX(-1)}.wp-block-outermost-icon-block .rotate-90.flip-vertical svg,.wp-block-outermost-icon-block.rotate-90.flip-vertical svg{transform:rotate(90deg) scaleY(-1)}.wp-block-outermost-icon-block .rotate-90.flip-horizontal.flip-vertical svg,.wp-block-outermost-icon-block.rotate-90.flip-horizontal.flip-vertical svg{transform:rotate(90deg) scale(-1)}.wp-block-outermost-icon-block .rotate-180.flip-horizontal svg,.wp-block-outermost-icon-block.rotate-180.flip-horizontal svg{transform:rotate(180deg) scaleX(-1)}.wp-block-outermost-icon-block .rotate-180.flip-vertical svg,.wp-block-outermost-icon-block.rotate-180.flip-vertical svg{transform:rotate(180deg) scaleY(-1)}.wp-block-outermost-icon-block .rotate-180.flip-horizontal.flip-vertical svg,.wp-block-outermost-icon-block.rotate-180.flip-horizontal.flip-vertical svg{transform:rotate(180deg) scale(-1)}.wp-block-outermost-icon-block .rotate-270.flip-horizontal svg,.wp-block-outermost-icon-block.rotate-270.flip-horizontal svg{transform:rotate(270deg) scaleX(-1)}.wp-block-outermost-icon-block .rotate-270.flip-vertical svg,.wp-block-outermost-icon-block.rotate-270.flip-vertical svg{transform:rotate(270deg) scaleY(-1)}.wp-block-outermost-icon-block .rotate-270.flip-horizontal.flip-vertical svg,.wp-block-outermost-icon-block.rotate-270.flip-horizontal.flip-vertical svg{transform:rotate(270deg) scale(-1)} +.wp-block-outermost-icon-block{display:flex;line-height:0}.wp-block-outermost-icon-block.has-border-color{border:none}.wp-block-outermost-icon-block .has-icon-color svg,.wp-block-outermost-icon-block.has-icon-color svg{color:currentColor}.wp-block-outermost-icon-block .has-icon-color:not(.has-no-icon-fill-color) svg,.wp-block-outermost-icon-block.has-icon-color:not(.has-no-icon-fill-color) svg{fill:currentColor}.wp-block-outermost-icon-block .icon-container{box-sizing:border-box}.wp-block-outermost-icon-block a,.wp-block-outermost-icon-block svg{height:100%;transition:transform .1s ease-in-out;width:100%}.wp-block-outermost-icon-block a:hover{transform:scale(1.1)}.wp-block-outermost-icon-block .rotate-90 svg,.wp-block-outermost-icon-block.rotate-90 svg{rotate:90deg}.wp-block-outermost-icon-block .rotate-180 svg,.wp-block-outermost-icon-block.rotate-180 svg{rotate:180deg}.wp-block-outermost-icon-block .rotate-270 svg,.wp-block-outermost-icon-block.rotate-270 svg{rotate:270deg}.wp-block-outermost-icon-block .flip-horizontal svg,.wp-block-outermost-icon-block.flip-horizontal svg{scale:-1 1}.wp-block-outermost-icon-block .flip-vertical svg,.wp-block-outermost-icon-block.flip-vertical svg{scale:1 -1}.wp-block-outermost-icon-block .flip-vertical.flip-horizontal svg,.wp-block-outermost-icon-block.flip-vertical.flip-horizontal svg{scale:-1 -1} diff --git a/src/index.scss b/src/index.scss index ebdc2d6..41384b2 100644 --- a/src/index.scss +++ b/src/index.scss @@ -50,109 +50,46 @@ $flipHV: scale(-1, -1); transform: scale(1.1); } - /* There is likely a more efficient way to handle the rotation/flipping */ + &.rotate-90, .rotate-90 { svg { - transform: $r90; + rotate: 90deg; } } &.rotate-180, .rotate-180 { svg { - transform: $r180; + rotate: 180deg; } } &.rotate-270, .rotate-270 { svg { - transform: $r270; + rotate: 270deg; } } &.flip-horizontal, .flip-horizontal { svg { - transform: $flipH; + scale: -1 1; } } &.flip-vertical, .flip-vertical { svg { - transform: $flipV; + scale: 1 -1; } } &.flip-vertical.flip-horizontal, .flip-vertical.flip-horizontal { svg { - transform: $flipHV; - } - } - - &.rotate-90.flip-horizontal, - .rotate-90.flip-horizontal { - svg { - transform: $r90 $flipH; - } - } - - &.rotate-90.flip-vertical, - .rotate-90.flip-vertical { - svg { - transform: $r90 $flipV; - } - } - - &.rotate-90.flip-horizontal.flip-vertical, - .rotate-90.flip-horizontal.flip-vertical { - svg { - transform: $r90 $flipHV; - } - } - - &.rotate-180.flip-horizontal, - .rotate-180.flip-horizontal { - svg { - transform: $r180 $flipH; - } - } - - &.rotate-180.flip-vertical, - .rotate-180.flip-vertical { - svg { - transform: $r180 $flipV; - } - } - - &.rotate-180.flip-horizontal.flip-vertical, - .rotate-180.flip-horizontal.flip-vertical { - svg { - transform: $r180 $flipHV; - } - } - - &.rotate-270.flip-horizontal, - .rotate-270.flip-horizontal { - svg { - transform: $r270 $flipH; - } - } - - &.rotate-270.flip-vertical, - .rotate-270.flip-vertical { - svg { - transform: $r270 $flipV; - } - } - - &.rotate-270.flip-horizontal.flip-vertical, - .rotate-270.flip-horizontal.flip-vertical { - svg { - transform: $r270 $flipHV; + scale: -1 -1; } } } From 83a91ee3e285f4981cc544932a7ca71cd1e42fab Mon Sep 17 00:00:00 2001 From: Cory Birdsong Date: Wed, 19 Apr 2023 13:26:02 -0500 Subject: [PATCH 3/5] Remove unnecessary Sass variables --- src/index.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/index.scss b/src/index.scss index 41384b2..92faed1 100644 --- a/src/index.scss +++ b/src/index.scss @@ -2,14 +2,6 @@ * Editor and frontend styles for the Icon Block. */ -/* Register our variables. */ -$r90: rotate(90deg); -$r180: rotate(180deg); -$r270: rotate(270deg); -$flipH: scaleX(-1); -$flipV: scaleY(-1); -$flipHV: scale(-1, -1); - /* Icon Block styles. */ .wp-block-outermost-icon-block { display: flex; @@ -50,7 +42,6 @@ $flipHV: scale(-1, -1); transform: scale(1.1); } - &.rotate-90, .rotate-90 { svg { From 7d31f75a1056033b467061aa5bd7e38336c7e47a Mon Sep 17 00:00:00 2001 From: Cory Birdsong Date: Wed, 19 Apr 2023 13:40:37 -0500 Subject: [PATCH 4/5] Switch to custom property-based method --- build/style.asset.php | 2 +- build/style.css | 2 +- src/index.scss | 29 +++++++++++------------------ 3 files changed, 13 insertions(+), 20 deletions(-) diff --git a/build/style.asset.php b/build/style.asset.php index cd20d21..3186162 100644 --- a/build/style.asset.php +++ b/build/style.asset.php @@ -1 +1 @@ - array(), 'version' => '625b0386d94877db6c9f'); + array(), 'version' => '8582154118e1a72d641d'); diff --git a/build/style.css b/build/style.css index 9db1090..f3811a0 100644 --- a/build/style.css +++ b/build/style.css @@ -1 +1 @@ -.wp-block-outermost-icon-block{display:flex;line-height:0}.wp-block-outermost-icon-block.has-border-color{border:none}.wp-block-outermost-icon-block .has-icon-color svg,.wp-block-outermost-icon-block.has-icon-color svg{color:currentColor}.wp-block-outermost-icon-block .has-icon-color:not(.has-no-icon-fill-color) svg,.wp-block-outermost-icon-block.has-icon-color:not(.has-no-icon-fill-color) svg{fill:currentColor}.wp-block-outermost-icon-block .icon-container{box-sizing:border-box}.wp-block-outermost-icon-block a,.wp-block-outermost-icon-block svg{height:100%;transition:transform .1s ease-in-out;width:100%}.wp-block-outermost-icon-block a:hover{transform:scale(1.1)}.wp-block-outermost-icon-block .rotate-90 svg,.wp-block-outermost-icon-block.rotate-90 svg{rotate:90deg}.wp-block-outermost-icon-block .rotate-180 svg,.wp-block-outermost-icon-block.rotate-180 svg{rotate:180deg}.wp-block-outermost-icon-block .rotate-270 svg,.wp-block-outermost-icon-block.rotate-270 svg{rotate:270deg}.wp-block-outermost-icon-block .flip-horizontal svg,.wp-block-outermost-icon-block.flip-horizontal svg{scale:-1 1}.wp-block-outermost-icon-block .flip-vertical svg,.wp-block-outermost-icon-block.flip-vertical svg{scale:1 -1}.wp-block-outermost-icon-block .flip-vertical.flip-horizontal svg,.wp-block-outermost-icon-block.flip-vertical.flip-horizontal svg{scale:-1 -1} +.wp-block-outermost-icon-block{display:flex;line-height:0}.wp-block-outermost-icon-block.has-border-color{border:none}.wp-block-outermost-icon-block .has-icon-color svg,.wp-block-outermost-icon-block.has-icon-color svg{color:currentColor}.wp-block-outermost-icon-block .has-icon-color:not(.has-no-icon-fill-color) svg,.wp-block-outermost-icon-block.has-icon-color:not(.has-no-icon-fill-color) svg{fill:currentColor}.wp-block-outermost-icon-block .icon-container{box-sizing:border-box}.wp-block-outermost-icon-block a,.wp-block-outermost-icon-block svg{height:100%;transition:transform .1s ease-in-out;width:100%}.wp-block-outermost-icon-block a:hover{transform:scale(1.1)}.wp-block-outermost-icon-block svg{transform:rotate(var(--outermost--icon-transform-rotate,0deg)) scaleX(var(--outermost--icon-transform-scale-x,1)) scaleY(var(--outermost--icon-transform-scale-y,1))}.wp-block-outermost-icon-block .rotate-90,.wp-block-outermost-icon-block.rotate-90{--outermost--icon-transform-rotate:90deg}.wp-block-outermost-icon-block .rotate-180,.wp-block-outermost-icon-block.rotate-180{--outermost--icon-transform-rotate:180deg}.wp-block-outermost-icon-block .rotate-270,.wp-block-outermost-icon-block.rotate-270{--outermost--icon-transform-rotate:270deg}.wp-block-outermost-icon-block .flip-horizontal,.wp-block-outermost-icon-block.flip-horizontal{--outermost--icon-transform-scale-x:-1}.wp-block-outermost-icon-block .flip-vertical,.wp-block-outermost-icon-block.flip-vertical{--outermost--icon-transform-scale-y:-1}.wp-block-outermost-icon-block .flip-vertical.flip-horizontal,.wp-block-outermost-icon-block.flip-vertical.flip-horizontal{--outermost--icon-transform-scale-x:-1;--outermost--icon-transform-scale-y:-1} diff --git a/src/index.scss b/src/index.scss index 92faed1..c23d79b 100644 --- a/src/index.scss +++ b/src/index.scss @@ -42,45 +42,38 @@ transform: scale(1.1); } + svg { + transform: rotate(var(--outermost--icon-transform-rotate, 0deg)) scaleX(var(--outermost--icon-transform-scale-x, 1)) scaleY(var(--outermost--icon-transform-scale-y, 1)); + } + &.rotate-90, .rotate-90 { - svg { - rotate: 90deg; - } + --outermost--icon-transform-rotate: 90deg; } &.rotate-180, .rotate-180 { - svg { - rotate: 180deg; - } + --outermost--icon-transform-rotate: 180deg; } &.rotate-270, .rotate-270 { - svg { - rotate: 270deg; - } + --outermost--icon-transform-rotate: 270deg; } &.flip-horizontal, .flip-horizontal { - svg { - scale: -1 1; - } + --outermost--icon-transform-scale-x: -1; } &.flip-vertical, .flip-vertical { - svg { - scale: 1 -1; - } + --outermost--icon-transform-scale-y: -1; } &.flip-vertical.flip-horizontal, .flip-vertical.flip-horizontal { - svg { - scale: -1 -1; - } + --outermost--icon-transform-scale-x: -1; + --outermost--icon-transform-scale-y: -1; } } From 6051adbcfa44d413078d971b796485e1fbbdb8e8 Mon Sep 17 00:00:00 2001 From: Nick Diego Date: Sat, 29 Jul 2023 14:53:51 -0500 Subject: [PATCH 5/5] Modify variable name. --- build/style.asset.php | 2 +- build/style.css | 2 +- src/index.scss | 16 ++++++++-------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/build/style.asset.php b/build/style.asset.php index 3186162..e57818c 100644 --- a/build/style.asset.php +++ b/build/style.asset.php @@ -1 +1 @@ - array(), 'version' => '8582154118e1a72d641d'); + array(), 'version' => 'ca9dfa13a90bf7f4013a'); diff --git a/build/style.css b/build/style.css index f3811a0..e52c329 100644 --- a/build/style.css +++ b/build/style.css @@ -1 +1 @@ -.wp-block-outermost-icon-block{display:flex;line-height:0}.wp-block-outermost-icon-block.has-border-color{border:none}.wp-block-outermost-icon-block .has-icon-color svg,.wp-block-outermost-icon-block.has-icon-color svg{color:currentColor}.wp-block-outermost-icon-block .has-icon-color:not(.has-no-icon-fill-color) svg,.wp-block-outermost-icon-block.has-icon-color:not(.has-no-icon-fill-color) svg{fill:currentColor}.wp-block-outermost-icon-block .icon-container{box-sizing:border-box}.wp-block-outermost-icon-block a,.wp-block-outermost-icon-block svg{height:100%;transition:transform .1s ease-in-out;width:100%}.wp-block-outermost-icon-block a:hover{transform:scale(1.1)}.wp-block-outermost-icon-block svg{transform:rotate(var(--outermost--icon-transform-rotate,0deg)) scaleX(var(--outermost--icon-transform-scale-x,1)) scaleY(var(--outermost--icon-transform-scale-y,1))}.wp-block-outermost-icon-block .rotate-90,.wp-block-outermost-icon-block.rotate-90{--outermost--icon-transform-rotate:90deg}.wp-block-outermost-icon-block .rotate-180,.wp-block-outermost-icon-block.rotate-180{--outermost--icon-transform-rotate:180deg}.wp-block-outermost-icon-block .rotate-270,.wp-block-outermost-icon-block.rotate-270{--outermost--icon-transform-rotate:270deg}.wp-block-outermost-icon-block .flip-horizontal,.wp-block-outermost-icon-block.flip-horizontal{--outermost--icon-transform-scale-x:-1}.wp-block-outermost-icon-block .flip-vertical,.wp-block-outermost-icon-block.flip-vertical{--outermost--icon-transform-scale-y:-1}.wp-block-outermost-icon-block .flip-vertical.flip-horizontal,.wp-block-outermost-icon-block.flip-vertical.flip-horizontal{--outermost--icon-transform-scale-x:-1;--outermost--icon-transform-scale-y:-1} +.wp-block-outermost-icon-block{display:flex;line-height:0}.wp-block-outermost-icon-block.has-border-color{border:none}.wp-block-outermost-icon-block .has-icon-color svg,.wp-block-outermost-icon-block.has-icon-color svg{color:currentColor}.wp-block-outermost-icon-block .has-icon-color:not(.has-no-icon-fill-color) svg,.wp-block-outermost-icon-block.has-icon-color:not(.has-no-icon-fill-color) svg{fill:currentColor}.wp-block-outermost-icon-block .icon-container{box-sizing:border-box}.wp-block-outermost-icon-block a,.wp-block-outermost-icon-block svg{height:100%;transition:transform .1s ease-in-out;width:100%}.wp-block-outermost-icon-block a:hover{transform:scale(1.1)}.wp-block-outermost-icon-block svg{transform:rotate(var(--outermost--icon-block--transform-rotate,0deg)) scaleX(var(--outermost--icon-block--transform-scale-x,1)) scaleY(var(--outermost--icon-block--transform-scale-y,1))}.wp-block-outermost-icon-block .rotate-90,.wp-block-outermost-icon-block.rotate-90{--outermost--icon-block--transform-rotate:90deg}.wp-block-outermost-icon-block .rotate-180,.wp-block-outermost-icon-block.rotate-180{--outermost--icon-block--transform-rotate:180deg}.wp-block-outermost-icon-block .rotate-270,.wp-block-outermost-icon-block.rotate-270{--outermost--icon-block--transform-rotate:270deg}.wp-block-outermost-icon-block .flip-horizontal,.wp-block-outermost-icon-block.flip-horizontal{--outermost--icon-block--transform-scale-x:-1}.wp-block-outermost-icon-block .flip-vertical,.wp-block-outermost-icon-block.flip-vertical{--outermost--icon-block--transform-scale-y:-1}.wp-block-outermost-icon-block .flip-vertical.flip-horizontal,.wp-block-outermost-icon-block.flip-vertical.flip-horizontal{--outermost--icon-block--transform-scale-x:-1;--outermost--icon-block--transform-scale-y:-1} diff --git a/src/index.scss b/src/index.scss index c23d79b..5dc6994 100644 --- a/src/index.scss +++ b/src/index.scss @@ -43,37 +43,37 @@ } svg { - transform: rotate(var(--outermost--icon-transform-rotate, 0deg)) scaleX(var(--outermost--icon-transform-scale-x, 1)) scaleY(var(--outermost--icon-transform-scale-y, 1)); + transform: rotate(var(--outermost--icon-block--transform-rotate, 0deg)) scaleX(var(--outermost--icon-block--transform-scale-x, 1)) scaleY(var(--outermost--icon-block--transform-scale-y, 1)); } &.rotate-90, .rotate-90 { - --outermost--icon-transform-rotate: 90deg; + --outermost--icon-block--transform-rotate: 90deg; } &.rotate-180, .rotate-180 { - --outermost--icon-transform-rotate: 180deg; + --outermost--icon-block--transform-rotate: 180deg; } &.rotate-270, .rotate-270 { - --outermost--icon-transform-rotate: 270deg; + --outermost--icon-block--transform-rotate: 270deg; } &.flip-horizontal, .flip-horizontal { - --outermost--icon-transform-scale-x: -1; + --outermost--icon-block--transform-scale-x: -1; } &.flip-vertical, .flip-vertical { - --outermost--icon-transform-scale-y: -1; + --outermost--icon-block--transform-scale-y: -1; } &.flip-vertical.flip-horizontal, .flip-vertical.flip-horizontal { - --outermost--icon-transform-scale-x: -1; - --outermost--icon-transform-scale-y: -1; + --outermost--icon-block--transform-scale-x: -1; + --outermost--icon-block--transform-scale-y: -1; } }