From 5d242587e0f2b5056ae9f5f251f2b3dadf0d1868 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Mon, 18 Mar 2019 16:54:42 +0100 Subject: [PATCH] Display resizing dots only when hovering. --- assets/css/amp-editor-story-blocks.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 41133e23a49..17dd7d886b3 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -795,15 +795,37 @@ div[data-type="amp/amp-story-page"] .wp-block:hover .amp-story-editor-block-move */ .amp-story-text__resize-container .components-resizable-box__handle-right { right: -26px; + height: 50px; + top: calc(50% - 25px); +} +.amp-story-text__resize-container .components-resizable-box__handle-right::before { + margin: 17px 0; } .amp-story-text__resize-container .components-resizable-box__handle-bottom { bottom: -26px; + width: 50px; + left: calc(50% - 25px); +} +.amp-story-text__resize-container .components-resizable-box__handle-bottom::before { + margin: 0 auto; } .editor-styles-wrapper #amp-story-editor .wp-block .wp-block[data-type="amp/amp-story-text"] { width: initial; } +.wp-block[data-type="amp/amp-story-text"] .components-resizable-box__handle, +.wp-block.is-typing[data-type="amp/amp-story-text"] .components-resizable-box__handle{ + display: block; + opacity: 0; + transition: opacity .3s; +} + +.wp-block[data-type="amp/amp-story-text"]:hover .components-resizable-box__handle, +.wp-block[data-type="amp/amp-story-text"] .components-resizable-box__handle:hover { + opacity: 100; +} + /* * 100. Shame */