diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss')
-rw-r--r-- | plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss new file mode 100644 index 00000000..7663d70c --- /dev/null +++ b/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss @@ -0,0 +1,148 @@ +@import './view.scss'; +@import './variables.scss'; +@import '../../shared/styles/gutenberg-colors.scss'; + +// inspired by from assets/shared/_animations loading-fade +@keyframes tiled-gallery-img-placeholder { + 0% { + background-color: var( --color-neutral-0 ); + } + 50% { + background-color: rgba( var( --color-neutral-0-rgb ), 0.5 ); + } + 100% { + background-color: var( --color-neutral-0 ); + } +} + +.wp-block-jetpack-tiled-gallery { + // Ensure that selected image outlines are visibile + padding-left: 4px; + padding-right: 4px; + + &.is-style-square, + &.is-style-circle { + .tiled-gallery__item.is-transient img { + // Transient images (no src attribute) occupy no vertical space. + // If on a row by themself, the row is hidden. + // By setting the bottom margin, ensure they occupy the correct vertical space. + margin-bottom: 100%; + } + } + + .tiled-gallery__item { + // Hide the focus outline that otherwise briefly appears when selecting a block. + > img:focus { + outline: none; + } + + > img { + // Inspired by Calypso's placeholder mixin + animation: tiled-gallery-img-placeholder 1.6s ease-in-out infinite; + } + + &.is-selected { + outline: 4px solid $tiled-gallery-selection; + + // Disable filters when selected + filter: none; + &::before, + &::after { + content: none; + } + } + + &.is-transient { + height: 100%; + width: 100%; + img { + background-position: center; + background-size: cover; + height: 100%; + opacity: 0.3; + width: 100%; + } + } + } + + .tiled-gallery__add-item { + margin-top: $tiled-gallery-gutter; + width: 100%; + + .components-form-file-upload, + .components-button.tiled-gallery__add-item-button { + width: 100%; + height: 100%; + } + + .components-button.tiled-gallery__add-item-button { + display: flex; + flex-direction: column; + justify-content: center; + box-shadow: none; + border: none; + border-radius: 0; + min-height: 100px; + + .dashicon { + margin-top: 10px; + } + + &:hover, + &:focus { + border: 1px solid $dark-gray-500; + } + } + } + + .tiled-gallery__item__inline-menu { + background-color: $tiled-gallery-selection; + display: inline-flex; + padding: 0 0 2px 2px; + position: absolute; + right: 0; + top: 0; + + .components-button { + color: var( --color-white ); + &:hover, + &:focus { + color: var( --color-white ); + } + } + } + + .tiled-gallery__item__remove { + padding: 0; + } + + .tiled-gallery__item .components-spinner { + position: absolute; + top: 50%; + left: 50%; + margin: 0; + transform: translate( -50%, -50% ); + } + + // Hide upload buttons in style picker preview + .editor-block-preview__content & { + .editor-media-placeholder { + display: none; + } + } +} + +.tiled-gallery__filter-picker-menu { + $active-item-outline-width: 2px; + padding: 7px; + + // Leave space between elements for active state styling + .components-menu-item__button + .components-menu-item__button { + margin-top: $active-item-outline-width; + } + + .components-menu-item__button.is-active { + color: $dark-gray-900; + box-shadow: 0 0 0 $active-item-outline-width $dark-gray-500 !important; + } +} |