site-kit-wp/assets/sass/components/email-reporting/_googlesitekit-user-settings-selection-panel.scss at 998c3eec990e5196f2eb0a314ccb7dfdb51ee662 · google/site-kit-wp · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/**
 * User Settings Selection Panel styles.
 *
 * Site Kit by Google, Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.googlesitekit-plugin {

	.googlesitekit-user-settings-selection-panel {
		color: $c-surfaces-on-background-variant;

		.googlesitekit-selection-panel-header {
			p {
				color: $c-surfaces-on-background-variant;
			}
		}

		.googlesitekit-user-settings-selection__panel-content {
			display: flex;
			flex: 1 1 0;
			flex-direction: column;
			min-height: 200px;
			overflow: auto;
			padding: 0 $grid-gap-phone;

			@media (min-width: $bp-tablet) {
				padding: 0 $grid-gap-desktop;
			}

			// Ensure every notice after the first notice has a margin
			// so the notices don't render with no gap.
			// See: https://github.com/google/site-kit-wp/issues/12279
			.googlesitekit-notice-container:nth-of-type(n + 2) {
				margin-top: $grid-gap-phone;
			}
		}

		.googlesitekit-user-settings-selection__panel-description {
			span {
				color: $c-surfaces-on-surface;
				display: block;
			}
		}

		.googlesitekit-selection-panel-subscribe-actions {
			display: flex;
			gap: 10px;
			justify-content: flex-end;
			margin-top: 30px;

			.mdc-button--tertiary {
				&.googlesitekit-button-icon--spinner__running {
					svg {
						circle {
							stroke: $c-surfaces-on-surface-variant;
						}
					}
				}
			}

			.mdc-button--raised {
				&.googlesitekit-button-icon--spinner__running {
					svg {
						circle {
							stroke: $c-interactive-on-disable-container;
						}
					}
				}
			}
		}

		.googlesitekit-selection-panel-footer {
			background: transparent;
			border-top: 1px solid $c-utility-divider;
			padding: 0;

			p {
				padding: $grid-gap-phone $grid-gap-desktop;
			}

			.googlesitekit-notice {
				align-items: center;
				border-radius: 0;
				flex-direction: row;
				gap: $grid-gap-phone;
				margin-top: $grid-gap-phone - 4px;
				padding: $grid-gap-phone - 6px $grid-gap-desktop;
				width: 100%;

				p {
					font-size: $fs-body-sm;
					padding: 0;
				}

				.googlesitekit-notice__content {
					flex: 1;
					min-width: 0;
				}

				.googlesitekit-notice__action {
					flex-shrink: 0;
					flex-wrap: nowrap;
					width: auto;
				}
			}
		}

		.googlesitekit-selection-panel-footer__content {
			margin: 0;

			.googlesitekit-typography {
				margin: 0;
			}
		}
	}
}