ListTablePage.module.scss — GiveWP – Donation Plugin and Fundraising Platform 2.22.3

give / src / Views / Components / ListTable / ListTablePage.module.scss

give / src / Views / Components / ListTable Last commit date

ListTablePage.module.scss

299 lines

1	:global {
2	:root {
3	--give-primary-color: #69b868;
4	}
5
6	.post-type-give_forms #wpbody {
7	box-sizing: border-box;
8
9	& > a {
10	text-decoration: underline
11	}
12	}
13
14	.post-type-give_forms #wpbody-content {
15	box-sizing: border-box;
16	}
17
18	.post-type-give_forms #wpbody::after {
19	all: revert;
20	}
21
22	.give-visually-hidden {
23	position: absolute;
24	width: 1px;
25	height: 1px;
26	padding: 0;
27	margin: -1px;
28	overflow: hidden;
29	clip: rect(0, 0, 0, 0);
30	white-space: nowrap;
31	border-width: 0;
32	}
33
34	#wpcontent {
35	padding: 0;
36	}
37	}
38
39	.page {
40	box-sizing: border-box;
41	color: #333;
42	font-family: Open Sans, system-ui, sans-serif;
43	font-size: 1rem;
44
45	*, ::before, ::after {
46	box-sizing: inherit;
47	}
48	}
49
50	.pageHeader {
51	display: flex;
52	flex-wrap: wrap;
53	align-items: center;
54	justify-content: space-between;
55	gap: 1rem;
56	background-color: #fff;
57	padding-block: 1em;
58	padding-inline: 1.5em;
59	border-bottom: 0.0625rem solid #dbdbdb;
60
61	& > * {
62	flex-shrink: 0;
63	}
64	}
65
66	.flexRow {
67	display: flex;
68	flex-direction: row;
69	align-items: center;
70	column-gap: 1rem;
71	}
72
73	.pageTitle {
74	color: #424242;
75	margin: 0;
76	font-size: 1.5rem;
77	font-weight: 600;
78
79	}
80
81	.pageContent {
82	padding: 0 1.5em 1.5em 1.5em;
83	}
84
85	.pageActions {
86	display: flex;
87	flex-wrap: wrap;
88	width: 100%;
89	align-items: center;
90	justify-content: space-between;
91	margin-block-end: 0.5rem;
92	margin-block-start: 0.5rem;
93	column-gap: 2rem;
94
95	& > * {
96	flex-shrink: 0;
97	}
98	}
99
100	.alignEnd {
101	justify-content: flex-end;
102	}
103
104	.addFormButton {
105	$depth: 0 0.125rem 0 #ddd;
106
107	background-color: #f7f7f7;
108	border: 1px solid #ddd;
109	border-radius: 0.1875rem;
110	box-shadow: $depth;
111	color: #888;
112	font-family: inherit;
113	font-size: 0.875rem;
114	font-weight: 500;
115	display: flex;
116	align-items: center;
117	block-size: 2.5rem;
118	padding-inline: 0.75rem;
119	transition-property: filter, color, outline;
120	transition-duration: 180ms;
121	transition-timing-function: ease-in;
122	cursor: pointer;
123
124	&:is(a) {
125	text-decoration: none;
126	}
127
128	&:is(:hover, :active, :focus) {
129	color: #777;
130	}
131
132	&:hover {
133	filter: contrast(110%);
134	}
135
136	&:active {
137	filter: contrast(90%);
138	}
139
140	&:focus {
141	box-shadow: $depth;
142	outline: 0.125rem solid var(--give-primary-color);
143	outline-offset: 0.25em;
144	}
145	}
146
147	#searchContainer {
148	display: flex;
149	flex-wrap: wrap;
150	gap: 1rem 1.5rem;
151	align-items: center;
152	justify-content: flex-start;
153	background-color: rgba(248, 248, 248);
154	padding-inline: 1.5em;
155	padding-block: 1em;
156	border-bottom: 0.0625rem solid #dbdbdb;
157	}
158
159	.container,
160	.overlay {
161	position: fixed;
162	top: 0;
163	right: 0;
164	bottom: 0;
165	left: 0;
166	}
167
168	.container {
169	z-index: 11;
170	display: flex;
171	opacity: 1;
172	animation: appear 180ms ease-in 0s 1;
173	font-family: "Open Sans", sans-serif;
174
175	&[aria-hidden='true']='true'] {
176	display: none;
177	opacity: 0;
178	}
179	}
180
181	@keyframes appear {
182	0% {
183	opacity: 0;
184	}
185	100% {
186	opacity: 1;
187	}
188	}
189
190	.overlay {
191	background-color: rgba(43, 46, 56, 0.9);
192	}
193
194	#modalTitle {
195	font-size: 1.25rem;
196	font-weight: 700;
197	padding-inline: 1rem;
198	}
199
200	.dialog {
201	margin: auto;
202	z-index: 2;
203	position: relative;
204	background: #fff;
205	border: 1px solid #c3c4c7;
206	border-block-start-color: var(--give-primary-color);
207	border-block-start-width: 0.25rem;
208	box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
209	max-width: 50vw;
210	min-width: 20rem;
211
212	&.warning {
213	border-block-start-color: #dba617;
214	}
215
216	&.danger {
217	border-block-start-color: #d63638;
218	}
219
220	& ul {
221	max-height: 40vh;
222	overflow-y: auto;
223	overscroll-behavior-y: contain;
224	}
225
226	& li {
227	font-weight: 600;
228	display: flex;
229	align-items: center;
230	gap: 0.5rem;
231	}
232
233	& li+li {
234	border-top: 1px solid rgba(196, 196, 196);
235	padding-top: 0.75rem;
236	}
237	}
238
239	.modalContent > * {
240	padding-inline: 1rem;
241	margin-block: 1rem;
242	}
243
244	.gutter {
245	border-top: 1px solid #DFDFDF;
246	background: rgba(245 245 245);
247	width: 100%;
248	display: flex;
249	flex-direction: row;
250	justify-content: flex-end;
251	column-gap: 1em;
252	box-sizing: border-box !important;
253	padding-block: 1em;
254	padding-inline: 2rem;
255	overflow: hidden
256	}
257
258	$button-blue: rgba(8 120 176);
259
260	#cancel, #confirm {
261	border-radius: 3px;
262	padding-inline: 0.75em;
263	padding-block: 0.5em;
264	transition: all 0.15s;
265	box-shadow: 0px 2px 0px #DDDDDD;
266	cursor: pointer;
267
268	&:hover, &:focus {
269	border-color: black;
270	background: white;
271	color: $button-blue;
272	box-shadow: none;
273	}
274
275	&:active {
276	border-color: rgba(170 170 170);
277	box-shadow: inset 0px 0px 3px rgba(170 170 170 / 0.8);
278	}
279	}
280
281	#cancel {
282	border: 1px solid $button-blue;
283	color: $button-blue;
284	background: rgba(247 247 247);
285	}
286
287	#confirm {
288	border: 1px solid $button-blue;
289	background: $button-blue;
290	color: white;
291	}
292
293	@media (prefers-reduced-motion: reduce) {
294
295	.container {
296	animation: none;
297	}
298	}
299