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, 0 insertions, 148 deletions
diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss deleted file mode 100644 index 7663d70c..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss +++ /dev/null @@ -1,148 +0,0 @@ -@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; - } -} |