summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss')
-rw-r--r--plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss148
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;
- }
-}