gutenberg/packages/edit-site/src/components/page-patterns/style.scss at e0bc30ce724336f66eafb026cabb419e0085d088 · WordPress/gutenberg · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
.edit-site-patterns {
	background: rgba(0, 0, 0, 0.05);
	margin: $header-height 0 0;
	.components-text {
		color: $gray-600;
	}

	.components-heading {
		color: $gray-200;
	}

	@include break-medium {
		margin: 0;
	}
}

.edit-site-patterns__grid {
	column-gap: $grid-unit-30;
	@include break-large() {
		column-count: 2;
	}

	// Small top padding required to avoid cutting off the visible outline
	// when hovering items.
	padding-top: $border-width-focus-fallback;
	margin-bottom: $grid-unit-40;

	.edit-site-patterns__pattern {
		break-inside: avoid-column;
		display: flex;
		flex-direction: column;
		margin-bottom: $grid-unit-60;

		.edit-site-patterns__preview {
			border-radius: $radius-block-ui;
			cursor: pointer;
			overflow: hidden;

			&:focus {
				box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

				// Windows High Contrast mode will show this outline, but not the box-shadow.
				outline: 2px solid transparent;
			}

			&.is-inactive {
				cursor: default;
			}
		}

		.edit-site-patterns__footer,
		.edit-site-patterns__button {
			color: $gray-600;
		}

		&.is-placeholder .edit-site-patterns__preview {
			min-height: $grid-unit-80;
			color: $gray-600;
			border: 1px dashed $gray-800;
			display: flex;
			align-items: center;
			justify-content: center;

			&:focus {
				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
			}
		}
	}

	.edit-site-patterns__preview {
		flex: 1;
		margin-bottom: $grid-unit-20;
	}
}

// The increased specificity here is to overcome component styles
// without relying on internal component class names.
.edit-site-patterns__search {
	&#{&} input[type="search"] {
		background: $gray-800;
		color: $gray-200;

		&:focus {
			background: $gray-800;
		}
	}

	svg {
		fill: $gray-600;
	}
}

.edit-site-patterns__pattern-title {
	color: $gray-600;

	svg {
		border-radius: $grid-unit-05;
		background: var(--wp-block-synced-color);
		fill: $white;
	}
}

.edit-site-patterns__no-results {
	color: $gray-600;
}