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

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

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

ListTablePage.module.scss

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