order-review.scss — WooCommerce 10.9.4

woocommerce / assets / css / order-review.scss

woocommerce / assets / css Last commit date

order-review.scss

241 lines

1	// Star DOM order is 5..1 under `flex-direction: row-reverse` so the `~`
2	// sibling selector can fill stars 1..N without `:has()`.
3
4	.woocommerce-review-order {
5	&.is-success {
6	.woocommerce-review-order__title,
7	.woocommerce-review-order__intro,
8	.woocommerce-review-order__legend,
9	.woocommerce-review-order__notice,
10	.woocommerce-review-order__form {
11	display: none;
12	}
13	}
14
15	&__items {
16	list-style: none;
17	padding: 0;
18	margin: 0 0 1.5em;
19	}
20
21	&__item {
22	padding: 1.5em 0;
23	border-top: 1px solid rgba(0, 0, 0, 0.1);
24
25	&:first-child {
26	border-top: 0;
27	padding-top: 0;
28	}
29	}
30
31	&__item-title {
32	margin: 0 0 1em;
33	font-size: 1.25em;
34	line-height: 1.2;
35	font-weight: 500;
36
37	a {
38	text-decoration: underline;
39	}
40	}
41
42	&__item-variation {
43	display: block;
44	margin-top: 0.25em;
45	font-size: 0.875em;
46	font-weight: 400;
47	opacity: 0.75;
48	}
49
50	&__item-row {
51	display: flex;
52	gap: 1.5em;
53	align-items: flex-start;
54	}
55
56	&__item-image {
57	flex: 0 0 120px;
58	max-width: 120px;
59
60	img {
61	display: block;
62	width: 100%;
63	height: auto;
64	}
65	}
66
67	&__item-rating {
68	flex: 0 0 auto;
69	min-width: 8em;
70	}
71
72	&__item-rating-label {
73	margin: 0 0 0.25em;
74	}
75
76	&__item-review {
77	flex: 1 1 auto;
78	min-width: 0;
79	display: flex;
80	flex-direction: column;
81	gap: 0.5em;
82	}
83
84	&__item-review-textarea {
85	width: 100%;
86	min-height: 6em;
87	resize: vertical;
88	}
89
90	&__item-rating-error {
91	margin: 0.5em 0 1em;
92	color: var(--wc-red, #a00);
93	}
94
95	&__item-status {
96	margin: 0.5em 0 0;
97
98	&--ok {
99	color: var(--wc-green, #007518);
100	}
101
102	&--error {
103	color: var(--wc-red, #a00);
104	}
105	}
106
107	// Layered on `.woocommerce-info`; theme paints background, border, icon.
108	&__notice {
109	position: relative;
110
111	&-body {
112	min-width: 0;
113	}
114
115	&-title {
116	margin: 0;
117	font-weight: 600;
118	}
119
120	&-text {
121	margin: 0.25em 0 0;
122	}
123
124	&-dismiss {
125	position: absolute;
126	top: 0.5em;
127	right: 0.5em;
128	background: transparent;
129	border: 0;
130	cursor: pointer;
131	padding: 0;
132	min-width: 24px;
133	min-height: 24px;
134	font-size: 1.25em;
135	line-height: 1;
136	color: inherit;
137	}
138
139	&--hidden {
140	display: none;
141	}
142	}
143
144	@media (max-width: 600px) {
145	&__item-row {
146	flex-direction: column;
147	}
148
149	&__item-image {
150	flex: 0 0 auto;
151	max-width: 240px;
152	width: 100%;
153	}
154
155	&__item-rating,
156	&__item-review {
157	flex: 1 1 auto;
158	width: 100%;
159	}
160	}
161	}
162
163	.woocommerce-star-rating {
164	display: inline-flex;
165	flex-direction: column;
166	align-items: flex-start;
167	gap: 0.25em;
168	line-height: 1;
169
170	&__stars {
171	display: inline-flex;
172	flex-direction: row-reverse;
173	justify-content: flex-end;
174	align-items: center;
175	gap: 4px;
176	}
177
178	// Visually hide radios, keep them in the a11y tree.
179	&__input {
180	position: absolute;
181	width: 1px;
182	height: 1px;
183	padding: 0;
184	margin: -1px;
185	overflow: hidden;
186	clip: rect(0, 0, 0, 0);
187	white-space: nowrap;
188	border: 0;
189	}
190
191	// Reset margin so the theme's `input[type=radio]+label` rule can't leak in.
192	&__star {
193	cursor: pointer;
194	display: inline-flex;
195	padding: 0;
196	margin: 0;
197	color: currentColor;
198	}
199
200	&__input + &__star {
201	margin-left: 0;
202	}
203
204	// Absolute px so theme resets on `input[type=radio]+label` (e.g. font-size:0)
205	// can't collapse the icon to 0x0.
206	&__icon {
207	display: block;
208	width: 24px;
209	height: 24px;
210	fill: currentColor;
211	opacity: 0.3;
212	transition: opacity 100ms ease-in-out;
213	}
214
215	// Checked input fills its own star + every following sibling (visual left).
216	&__input:checked ~ .woocommerce-star-rating__star .woocommerce-star-rating__icon {
217	opacity: 1;
218	}
219
220	&__stars:hover .woocommerce-star-rating__icon {
221	opacity: 0.3;
222	}
223
224	&__star:hover .woocommerce-star-rating__icon,
225	&__star:hover ~ .woocommerce-star-rating__star .woocommerce-star-rating__icon {
226	opacity: 1;
227	}
228
229	&__input:focus-visible + .woocommerce-star-rating__star {
230	outline: 2px solid currentColor;
231	outline-offset: 2px;
232	}
233
234	&__caption {
235	min-height: 1em;
236	min-width: 4em;
237	font-size: 0.875em;
238	opacity: 0.7;
239	}
240	}
241