← All changes | src/Campaigns/Blocks/shared/components/ModalForm/styles.scss +48 -10 4.16.1 → 4.17.0 View file →

		@@ -3,10 +3,20 @@
3	3	width: 100%;
4	4	padding: 1rem;
5	5	overflow-y: scroll;
6	6
7		- &[data-entering="true"] {
8		- animation: modal-fade 300ms, modal-zoom 600ms;
	7	+ /*
	8	+ * The zoom runs on the content, not on this element: the close button
	9	+ * inside is position: fixed, and a transformed ancestor would pin it to
	10	+ * the dialog for the length of the animation, then let it jump to the
	11	+ * viewport corner.
	12	+ */
	13	+ &[data-entering='true'] {
	14	+ animation: modal-fade 300ms;
	15	+
	16	+ .givewp-donation-form-modal__dialog__content {
	17	+ animation: modal-zoom 600ms;
	18	+ }
9	19	}
10	20
11	21	@keyframes modal-fade {
12	22	from {
		@@ -33,9 +43,9 @@
33	43	top: 0;
34	44	left: 0;
35	45	width: 100vw;
36	46	height: 100dvh;
37		- background: rgba(0 0 0 / .7);
	47	+ background: rgba(0 0 0 / 0.7);
38	48	display: flex;
39	49	flex-direction: column;
40	50	align-items: center;
41	51	justify-content: center;
		@@ -40,21 +50,35 @@
40	50	align-items: center;
41	51	justify-content: center;
42	52	z-index: 100;
43	53
44		- &[data-loading="true"] {
	54	+ &[data-loading='true'] {
45	55	display: none;
46	56	}
47	57
48		- &[data-entering="true"] {
	58	+ &[data-entering='true'] {
49	59	animation: modal-fade 300ms;
50	60	}
51	61
52		- &[data-exiting="true"] {
	62	+ &[data-exiting='true'] {
53	63	animation: modal-fade 150ms reverse ease-in;
54	64	}
55	65	}
56	66
	67	+ /*
	68	+ * While the form loads the launcher keeps its size and swaps the label
	69	+ * for a spinner. Drawn in CSS so the external embed, which has no
	70	+ * @wordpress/components, renders the same thing. `data-pending` is what
	71	+ * react-aria's Button sets from isPending; the embed sets it by hand.
	72	+ */
	73	+ &__open {
	74	+ position: relative;
	75	+
	76	+ &[data-pending] &__label {
	77	+ visibility: hidden;
	78	+ }
	79	+ }
	80	+
57	81	&__open__spinner {
58	82	position: absolute;
59	83	top: 50%;
60	84	left: 50%;
		@@ -60,12 +84,24 @@
60	84	left: 50%;
61	85	transform: translate(-50%, -50%);
62	86	z-index: 100;
63	87	line-height: 1;
	88	+ width: 16px;
	89	+ height: 16px;
	90	+ border-radius: 50%;
	91	+ border: 1.5px solid currentColor;
	92	+ border-right-color: transparent;
	93	+ animation: modal-spin 1.4s linear infinite;
64	94	}
65	95
66		- &__open {
67		- position: relative;
	96	+ @keyframes modal-spin {
	97	+ from {
	98	+ transform: translate(-50%, -50%) rotate(0deg);
	99	+ }
	100	+
	101	+ to {
	102	+ transform: translate(-50%, -50%) rotate(360deg);
	103	+ }
68	104	}
69	105
70	106	&__close {
71	107	display: flex;
		@@ -71,9 +107,9 @@
71	107	display: flex;
72	108	position: fixed;
73	109	top: 25px;
74	110	right: 25px;
75		- padding: .75rem;
	111	+ padding: 0.75rem;
76	112	width: fit-content;
77	113	background: #e7e8ed;
78	114	cursor: pointer;
79	115	border: 1px solid transparent;
		@@ -85,9 +121,11 @@
85	121	height: 1rem;
86	122	width: 1rem;
87	123	}
88	124
89		- &:hover, &:focus, &:active {
	125	+ &:hover,
	126	+ &:focus,
	127	+ &:active {
90	128	border: 1px solid darken(#e7e8ed, 10%);
91	129	background-color: darken(#e7e8ed, 10%);
92	130	}
93	131	}