Display resizing dots only when hovering.

ampproject · Mar 18, 2019 · 5d24258 · 5d24258
1 parent 685d187
commit 5d24258
Showing 1 changed file with 22 additions and 0 deletions.
diff --git 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
  */