Skip to content

Commit

Permalink
Merge pull request #1629 from Automattic/1524-improve-outline
Browse files Browse the repository at this point in the history
[amp-stories sub-task] Improve outline of blocks.
  • Loading branch information
mehigh authored Nov 22, 2018
2 parents 0e40c83 + 540e921 commit 5765b9a
Showing 1 changed file with 84 additions and 13 deletions.
97 changes: 84 additions & 13 deletions assets/css/amp-editor-story-blocks.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
div[data-type="amp/amp-story-page"] {
border: 1px solid #ffdddd;
border: 10px solid #eff0f1;
}

div[data-type="amp/amp-story-page"]::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
background: #eff0f1;
}

.editor-block-list__layout div[data-type="amp/amp-story-page"].is-selected > .editor-block-list__block-edit::before {
outline: 1px solid #007cba;
}

.editor-block-list__layout div[data-type="amp/amp-story-page"] {
Expand All @@ -8,7 +22,7 @@ div[data-type="amp/amp-story-page"] {
}

.editor-block-list__layout div[data-type="amp/amp-story-page"] .components-placeholder.wp-block-image {
background: #dcdcdc;
background: #f9f9f9;
}

@media (min-width: 600px) {
Expand All @@ -29,8 +43,14 @@ div[data-type="amp/amp-story-page"] {
div[data-type="amp/amp-story-page"],
div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout:first-of-type {
margin: auto;
width: 320px !important;
height: 533px !important;
width: 100%;
max-width: 338px;
height: 553px;
}

div[data-type="amp/amp-story-page"] .editor-block-list__layout > .block-list-appender {
width: 316px;

}

.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] .editor-inner-blocks .editor-block-list__layout {
Expand Down Expand Up @@ -75,6 +95,38 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay
box-sizing: border-box;
}

.amp-grid-template .editor-block-list__layout .editor-block-list__block.is-selected > .editor-block-list__block-edit::before,
.amp-grid-template .editor-block-list__layout .editor-block-list__block.is-typing > .editor-block-list__block-edit::before {
outline: 1px solid #007cba;
}

.amp-grid-template .editor-block-list__layout .editor-block-list__block.is-selected > .editor-block-list__block-edit .editor-rich-text,
.amp-grid-template .editor-block-list__layout .editor-block-list__block.is-typing > .editor-block-list__block-edit .editor-rich-text {
text-shadow:
0.05em 0 rgba( 255, 255, 255, 0.8 ),
0 0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em 0 rgba( 255, 255, 255, 0.8 ),
0 -0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em -0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em 0.05em rgba( 255, 255, 255, 0.8 ),
0.05em -0.05em rgba( 255, 255, 255, 0.8 ),
0.05em 0.05em rgba( 255, 255, 255, 0.8 );
}

.amp-grid-template .editor-block-list__layout .editor-block-list__block .editor-rich-text__tinymce + .editor-rich-text__tinymce,
.amp-grid-template .editor-block-list__layout .editor-block-list__block .editor-rich-text__tinymce + .editor-rich-text__tinymce p {
opacity: 0.9;
text-shadow:
0.05em 0 rgba( 255, 255, 255, 0.8 ),
0 0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em 0 rgba( 255, 255, 255, 0.8 ),
0 -0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em -0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em 0.05em rgba( 255, 255, 255, 0.8 ),
0.05em -0.05em rgba( 255, 255, 255, 0.8 ),
0.05em 0.05em rgba( 255, 255, 255, 0.8 );
}

.amp-grid-template-horizontal .editor-block-list__layout:first-of-type {
grid-auto-flow: column !important;
grid-template-rows: 100% !important;
Expand Down Expand Up @@ -173,9 +225,15 @@ div[data-amp-position="lower-third"] {

.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] {
position: absolute;
height: 20%;
width: 100%;
bottom: 0;
min-height: 20%;
height: auto;
width: 318px;
bottom: 38px;

}

.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] .editor-block-list__layout:first-of-type {
height: auto !important;
}

.editor-block-list__layout > div {
Expand All @@ -188,11 +246,6 @@ div[data-amp-type="grid"] .block-library-image__resizer {
max-height: 533px !important;
}

.editor-block-list__layout div[data-amp-type="grid"].is-selected,
.editor-block-list__layout div[data-amp-type="grid"].is-selected .editor-block-list__block {
outline: 1px dotted #99c2e0;
}

.editor-block-list__layout div[data-amp-type="grid"]:not(.is-selected):not(.is-selected-parent) .editor-block-list__block {
z-index: 0;
}
Expand Down Expand Up @@ -221,6 +274,10 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-
-webkit-filter: none;
}

div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-inner-blocks > .editor-block-list__layout > .is-selected > .editor-block-list__block-edit::before {
outline: 1px solid #007cba;
}

.edit-post-visual-editor .editor-block-list__block ul.editor-selectors {
position: absolute;
right: -155px;
Expand Down Expand Up @@ -291,6 +348,7 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-
width: 60px;
}


.post-type-amp_story .editor-default-block-appender {
max-width: 318px;
}
Expand Down Expand Up @@ -320,7 +378,7 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-
border: 10px solid #eff0f1;
border-radius: 0;
height: 533px;
width: 318px;
width: 338px;
}

.post-type-amp_story .editor-writing-flow > div > div > .editor-block-list__layout > .editor-block-list__block[data-type="core/paragraph"] .editor-block-list__insertion-point-inserter .components-icon-button:hover,
Expand All @@ -335,3 +393,16 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-
.post-type-amp_story .editor-writing-flow > div > div > .editor-block-list__layout > .editor-block-list__block[data-type="core/paragraph"] .editor-block-list__block-edit {
display: none;
}

/* Fixes Gutenberg bug where an extra wrapping div is causing no pointer events on the notice layer. */
.post-type-amp_story .editor-block-list__layout .editor-block-list__block.has-warning .editor-block-list__block-edit > :not(.editor-warning) {
pointer-events: all;
}

.post-type-amp_story .editor-block-list__layout .editor-block-list__block.has-warning .editor-block-list__block-edit > div > div:not(.editor-warning) {
pointer-events: none;
}

.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit::before {
outline: none;
}

0 comments on commit 5765b9a

Please sign in to comment.