# ghostkit/3.3.3/gutenberg/extend/display/editor.scss

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.3.3. 29 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.3/code/gutenberg/extend/display/editor.scss
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.3/raw/gutenberg/extend/display/editor.scss
- Modified: 2024-02-18T18:40:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.3.3/code/gutenberg/extend/display/editor.scss#L10-L20`.

```scss
@import "../../variables";

.ghostkit-tools-panel-display {
	grid-column: 1/-1;
}

// Classes for visual styling hidden blocks
@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-down($breakpoint) {
		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

		.ghostkit-d#{$infix}-none {
			filter: opacity(0.4) saturate(0);

			&::after {
				background-image: linear-gradient(45deg, rgba(0, 0, 0, 15%) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 15%) 50%, rgba(0, 0, 0, 15%) 75%, transparent 75%, transparent);
				background-size: 6px 6px;
			}
		}
		.ghostkit-d#{$infix}-block {
			filter: none;

			&::after {
				background-image: none;
			}
		}
	}
}

```