wc-setup.scss — WooCommerce 4.3.0-rc.3

woocommerce / assets / css / wc-setup.scss

woocommerce / assets / css Last commit date

wc-setup.scss

1627 lines

1	/* stylelint-disable no-descending-specificity */
2	body {
3	margin: 65px auto 24px;
4	box-shadow: none;
5	background: #f1f1f1;
6	padding: 0;
7	}
8
9	.wc-logo {
10	border: 0;
11	margin: 0 0 24px;
12	padding: 0;
13	text-align: center;
14
15	img {
16	max-width: 30%;
17	}
18	}
19
20	.wc-setup {
21	text-align: center;
22
23	#wc_tracker_checkbox {
24	display: none;
25	}
26
27	.select2-container {
28	text-align: left;
29	width: auto;
30	}
31
32	.hidden {
33	display: none;
34	}
35
36	#tiptip_content {
37	background: #5f6973;
38	}
39
40	#tiptip_holder.tip_top #tiptip_arrow_inner {
41	border-top-color: #5f6973;
42	}
43	}
44
45	.wc-setup-content {
46	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
47	padding: 2em;
48	margin: 0 0 20px;
49	background: #fff;
50	overflow: hidden;
51	zoom: 1;
52	text-align: left;
53
54	h1,
55	h2,
56	h3,
57	table {
58	margin: 0 0 20px;
59	border: 0;
60	padding: 0;
61	color: #666;
62	clear: none;
63	font-weight: 500;
64	}
65
66	p {
67	margin: 20px 0;
68	font-size: 1em;
69	line-height: 1.75;
70	color: #666;
71	}
72
73	table {
74	font-size: 1em;
75	line-height: 1.75;
76	color: #666;
77	}
78
79	a {
80	color: #a16696;
81
82	&:hover,
83	&:focus {
84	color: #111;
85	}
86	}
87
88	.form-table {
89
90	th {
91	width: 35%;
92	vertical-align: top;
93	font-weight: 400;
94	}
95
96	td {
97	vertical-align: top;
98
99	select,
100	input {
101	width: 100%;
102	box-sizing: border-box;
103	}
104
105	input[size]] {
106	width: auto;
107	}
108
109	.description {
110	line-height: 1.5;
111	display: block;
112	margin-top: 0.25em;
113	color: #999;
114	font-style: italic;
115	}
116
117	.input-checkbox,
118	.input-radio {
119	width: auto;
120	box-sizing: inherit;
121	padding: inherit;
122	margin: 0 0.5em 0 0;
123	box-shadow: none;
124	}
125	}
126
127	.section_title {
128
129	td {
130	padding: 0;
131
132	h2,
133	p {
134	margin: 12px 0 0;
135	}
136	}
137	}
138
139	th,
140	td {
141	padding: 12px 0;
142	margin: 0;
143	border: 0;
144
145	&:first-child {
146	padding-right: 1em;
147	}
148	}
149	}
150
151	table.tax-rates {
152	width: 100%;
153	font-size: 0.92em;
154
155	th {
156	padding: 0;
157	text-align: center;
158	width: auto;
159	vertical-align: middle;
160	}
161
162	td {
163	border: 1px solid #f5f5f5;
164	padding: 6px;
165	text-align: center;
166	vertical-align: middle;
167
168	input {
169	outline: 0;
170	border: 0;
171	padding: 0;
172	box-shadow: none;
173	text-align: center;
174	width: 100%;
175	}
176
177	&.sort {
178	cursor: move;
179	color: #ccc;
180
181	&::before {
182	content: "\f333";
183	font-family: dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
184	}
185	}
186
187	&.readonly {
188	background: #f5f5f5;
189	}
190	}
191
192	.add {
193	padding: 1em 0 0 1em;
194	line-height: 1;
195	font-size: 1em;
196	width: 0;
197	margin: 6px 0 0;
198	height: 0;
199	overflow: hidden;
200	position: relative;
201	display: inline-block;
202
203	&::before {
204	content: "\f502";
205	font-family: dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
206	position: absolute;
207	left: 0;
208	top: 0;
209	}
210	}
211
212	.remove {
213	padding: 1em 0 0 1em;
214	line-height: 1;
215	font-size: 1em;
216	width: 0;
217	margin: 0;
218	height: 0;
219	overflow: hidden;
220	position: relative;
221	display: inline-block;
222
223	&::before {
224	content: "\f182";
225	font-family: dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
226	position: absolute;
227	left: 0;
228	top: 0;
229	}
230	}
231	}
232
233	.wc-setup-pages {
234	width: 100%;
235	border-top: 1px solid #eee;
236
237	thead th {
238	display: none;
239	}
240
241	.page-name {
242	width: 30%;
243	font-weight: 700;
244	}
245
246	th,
247	td {
248	padding: 14px 0;
249	border-bottom: 1px solid #eee;
250
251	&:first-child {
252	padding-right: 9px;
253	}
254	}
255
256	th {
257	padding-top: 0;
258	}
259
260	.page-options {
261
262	p {
263	color: #777;
264	margin: 6px 0 0 24px;
265	line-height: 1.75;
266
267	input {
268	vertical-align: middle;
269	margin: 1px 0 0;
270	height: 1.75em;
271	width: 1.75em;
272	line-height: 1.75;
273	}
274
275	label {
276	line-height: 1;
277	}
278	}
279	}
280	}
281
282	@media screen and (max-width: 782px) {
283
284	.form-table {
285
286	tbody {
287
288	th {
289	width: auto;
290	}
291	}
292	}
293	}
294
295	.twitter-share-button {
296	float: right;
297	}
298
299	.wc-setup-next-steps {
300	overflow: hidden;
301	margin: 0 0 24px;
302	padding-bottom: 2px;
303
304	h2 {
305	margin-bottom: 12px;
306	}
307
308	.wc-setup-next-steps-first {
309	float: left;
310	width: 50%;
311	box-sizing: border-box;
312	}
313
314	.wc-setup-next-steps-last {
315	float: right;
316	width: 50%;
317	box-sizing: border-box;
318	}
319
320	ul {
321	padding: 0 2em 0 0;
322	list-style: none outside;
323	margin: 0;
324
325	li a {
326	display: block;
327	padding: 0 0 0.75em;
328	}
329
330	.setup-product {
331
332	a.button {
333	background-color: #f7f7f7;
334	border-color: #ccc;
335	color: #23282d;
336	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #ccc;
337	text-shadow: 1px 0 1px #eee, 0 1px 1px #eee;
338	font-size: 1em;
339	height: auto;
340	line-height: 1.75;
341	margin: 0 0 0.75em;
342	opacity: 1;
343	padding: 1em;
344	text-align: center;
345
346	&:hover,
347	&:focus,
348	&:active {
349	background: #f5f5f5;
350	border-color: #aaa;
351	}
352	}
353
354	a.button-primary {
355	color: #fff;
356	background-color: #bb77ae;
357	border-color: #a36597;
358	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
359	text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597, -1px 0 1px #a36597;
360
361	&:hover,
362	&:focus,
363	&:active {
364	color: #fff;
365	background: #a36597;
366	border-color: #a36597;
367	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
368	}
369	}
370	}
371
372	li a::before {
373	color: #82878c;
374	font: 400 20px/1 dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
375	speak: none;
376	display: inline-block;
377	padding: 0 10px 0 0;
378	top: 1px;
379	position: relative;
380	text-decoration: none !important;
381	vertical-align: top;
382	}
383
384	.learn-more a::before {
385	content: "\f105";
386	}
387
388	.video-walkthrough a::before {
389	content: "\f126";
390	}
391
392	.newsletter a::before {
393	content: "\f465";
394	}
395	}
396	}
397
398	.woocommerce-newsletter,
399	.updated {
400	padding: 24px 24px 0;
401	margin: 0 0 24px;
402	overflow: hidden;
403	background: #f5f5f5;
404
405	p {
406	padding: 0;
407	margin: 0 0 12px;
408	}
409
410	form,
411	p:last-child {
412	margin: 0 0 24px;
413	}
414	}
415
416	.checkbox {
417
418	input[type="checkbox"]="checkbox""] {
419	opacity: 0;
420	position: absolute;
421	left: -9999px;
422	}
423
424	label {
425	position: relative;
426	display: inline-block;
427	padding-left: 28px;
428
429	&::before,
430	&::after {
431	position: absolute;
432	content: "";
433	display: inline-block;
434	}
435
436	&::before {
437	height: 16px;
438	width: 16px;
439	left: 0;
440	top: 3px;
441	border: 1px solid #aaa;
442	background-color: #fff;
443	border-radius: 3px;
444	}
445
446	&::after {
447	height: 5px;
448	width: 9px;
449	border-left: 2px solid;
450	border-bottom: 2px solid;
451	transform: rotate(-45deg);
452	left: 4px;
453	top: 7px;
454	color: #fff;
455	}
456	}
457
458	input[type="checkbox"]="checkbox""] + label::after {
459	content: none;
460	}
461
462	input[type="checkbox"]="checkbox""]:checked + label::after {
463	content: "";
464	}
465
466	input[type="checkbox"]="checkbox""]:focus + label::before {
467	outline: rgb(59, 153, 252) auto 5px;
468	}
469
470	input[type="checkbox"]="checkbox""]:checked + label::before {
471	background: #935687;
472	border-color: #935687;
473	}
474	}
475	}
476
477	.woocommerce-tracker {
478	margin: 24px 0;
479	border: 1px solid #eee;
480	padding: 20px;
481	border-radius: 4px;
482	overflow: hidden;
483	text-align: left;
484
485	h1 {
486	border-bottom: 0;
487	padding-bottom: 0;
488	}
489
490	.wc-backbone-modal-header {
491	border-bottom: 0;
492	}
493
494	.wc-backbone-modal-main article {
495	padding-top: 0;
496	}
497
498	.wc-backbone-modal-main footer {
499	border-top: 0;
500	box-shadow: none;
501	}
502
503	p {
504	font-size: 14px;
505	line-height: 1.5;
506	}
507
508	.woocommerce-tracker-checkbox label {
509	margin-top: -4px;
510	display: inline-block;
511	}
512	}
513
514	.wc-setup-steps {
515	padding: 0 0 24px;
516	margin: 0;
517	list-style: none outside;
518	overflow: hidden;
519	color: #ccc;
520	width: 100%;
521	display: inline-flex;
522
523	li {
524	width: 100%;
525	float: left;
526	padding: 0 0 0.8em;
527	margin: 0;
528	text-align: center;
529	position: relative;
530	border-bottom: 4px solid #ccc;
531	line-height: 1.4;
532
533	a {
534	color: #a16696;
535	text-decoration: none;
536	padding: 1.5em;
537	margin: -1.5em;
538	position: relative;
539	z-index: 1;
540
541	&:hover,
542	&:focus {
543	color: #111;
544	text-decoration: underline;
545	}
546	}
547	}
548
549	li::before {
550	content: "";
551	border: 4px solid #ccc;
552	border-radius: 100%;
553	width: 4px;
554	height: 4px;
555	position: absolute;
556	bottom: 0;
557	left: 50%;
558	margin-left: -6px;
559	margin-bottom: -8px;
560	background: #fff;
561	}
562
563	li.active {
564	border-color: #a16696;
565	color: #a16696;
566	font-weight: 700;
567
568	&::before {
569	border-color: #a16696;
570	}
571	}
572
573	li.done {
574	border-color: #a16696;
575	color: #a16696;
576
577	&::before {
578	border-color: #a16696;
579	background: #a16696;
580	}
581	}
582	}
583
584	.wc-setup .wc-setup-actions {
585	overflow: hidden;
586	margin: 20px 0 0;
587	position: relative;
588	}
589
590	.wc-setup .wc-setup-actions .button-primary,
591	.woocommerce-tracker .button-primary {
592	background-color: #bb77ae;
593	border-color: #a36597;
594	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
595	text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597, -1px 0 1px #a36597;
596	margin: 0;
597	opacity: 1;
598
599	&:hover,
600	&:focus,
601	&:active {
602	background: #a36597;
603	border-color: #a36597;
604	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
605	}
606	}
607
608	.wc-setup-content p:last-child {
609	margin-bottom: 0;
610	}
611
612	.wc-setup-content p.store-setup {
613	margin-top: 0;
614	}
615
616	.wc-setup-footer-links {
617	font-size: 0.85em;
618	color: #7b7b7b;
619	margin: 1.18em auto;
620	display: inline-block;
621	text-align: center;
622	}
623
624	.wc-wizard-storefront {
625
626	.wc-wizard-storefront-intro {
627	padding: 40px 40px 0;
628	background: #f5f5f5;
629	text-align: center;
630
631	img {
632	margin: 40px 0 0 0;
633	width: 100%;
634	display: block;
635	}
636	}
637
638	.wc-wizard-storefront-features {
639	list-style: none outside;
640	margin: 0 0 20px;
641	padding: 0 0 0 30px;
642	overflow: hidden;
643	}
644
645	.wc-wizard-storefront-feature {
646	margin: 0;
647	padding: 20px 30px 20px 2em;
648	width: 50%;
649	box-sizing: border-box;
650
651	&::before {
652	margin-left: -2em;
653	position: absolute;
654	}
655
656	&.first {
657	clear: both;
658	float: left;
659	}
660
661	&.last {
662	float: right;
663	}
664	}
665
666	.wc-wizard-storefront-feature__bulletproof::before {
667	content: "🔒";
668	}
669
670	.wc-wizard-storefront-feature__mobile::before {
671	content: "📱";
672	}
673
674	.wc-wizard-storefront-feature__accessibility::before {
675	content: "👓";
676	}
677
678	.wc-wizard-storefront-feature__search::before {
679	content: "🔍";
680	}
681
682	.wc-wizard-storefront-feature__compatibility::before {
683	content: "🔧";
684	}
685
686	.wc-wizard-storefront-feature__extendable::before {
687	content: "🎨";
688	}
689	}
690
691	// List of services
692	.wc-wizard-services {
693	border: 1px solid #eee;
694	padding: 0;
695	margin: 0 0 1em;
696	list-style: none outside;
697	border-radius: 4px;
698	overflow: hidden; // Make sure dark background doesn't cover curved border
699
700	p {
701	margin: 0 0 1em 0;
702	padding: 0;
703	font-size: 1em;
704	line-height: 1.5;
705	}
706	}
707
708	.wc-wizard-service-item,
709	.wc-wizard-services-list-toggle {
710	display: flex;
711	flex-wrap: nowrap;
712	justify-content: space-between;
713	padding: 0;
714	border-bottom: 1px solid #eee;
715	color: #666;
716	align-items: center;
717
718	&:last-child {
719	border-bottom: 0;
720	}
721
722	.payment-gateway-fee {
723	color: #a6a6a6;
724	}
725
726	.wc-wizard-service-name {
727	flex-basis: 0;
728	min-width: 160px;
729	text-align: center;
730	font-weight: 700;
731	padding: 2em 0;
732	align-self: stretch;
733	display: flex;
734	align-items: baseline;
735
736	.wc-wizard-payment-gateway-form & {
737	justify-content: center;
738	}
739
740	img {
741	max-width: 75px;
742	}
743	}
744
745	&.stripe-logo .wc-wizard-service-name img {
746	padding: 8px 0;
747	}
748
749	&.paypal-logo .wc-wizard-service-name img {
750	max-width: 87px;
751	padding: 2px 0;
752	}
753
754	&.klarna-logo .wc-wizard-service-name img {
755	max-width: 87px;
756	padding: 12px 0;
757	}
758
759	&.square-logo .wc-wizard-service-name img {
760	max-width: 95px;
761	padding: 12px 0;
762	}
763
764	&.eway-logo .wc-wizard-service-name img {
765	max-width: 87px;
766	}
767
768	&.payfast-logo .wc-wizard-service-name img {
769	max-width: 140px;
770	}
771
772	.wc-wizard-service-description {
773	flex-grow: 1;
774	padding: 20px;
775
776	p {
777	margin-bottom: 1em;
778	}
779
780	p:last-child {
781	margin-bottom: 0;
782	}
783
784	.wc-wizard-service-settings-description {
785	display: block;
786	font-style: italic;
787	color: #999;
788	}
789	}
790
791	.wc-wizard-service-enable {
792	flex-basis: 0;
793	min-width: 75px;
794	text-align: center;
795	cursor: pointer;
796	padding: 2em 0;
797	position: relative;
798	max-height: 1.5em;
799	align-self: flex-start;
800	order: 3;
801	}
802
803	.wc-wizard-service-toggle {
804	height: 16px;
805	width: 32px;
806	border: 2px solid #935687;
807	background-color: #935687;
808	display: inline-block;
809	text-indent: -9999px;
810	border-radius: 10em;
811	position: relative;
812
813	input[type="checkbox"]="checkbox""] {
814	display: none;
815	}
816
817	&::before {
818	content: "";
819	display: block;
820	width: 16px;
821	height: 16px;
822	background: #fff;
823	position: absolute;
824	top: 0;
825	right: 0;
826	border-radius: 100%;
827	}
828
829	&.disabled {
830	border-color: #999;
831	background-color: #999;
832
833	&::before {
834	right: auto;
835	left: 0;
836	}
837	}
838	}
839
840	.wc-wizard-service-settings {
841	display: none;
842	margin-top: 0.75em;
843	margin-bottom: 0;
844	cursor: default;
845
846	&.hide {
847	display: none;
848	}
849	}
850
851	&.checked {
852
853	.wc-wizard-service-settings {
854	display: inline-block;
855
856	&.hide {
857	display: none;
858	}
859	}
860	}
861
862	&.closed {
863	border-bottom: 0;
864	}
865	}
866
867	// Toggle display a list of services.
868	.wc-wizard-services-list-toggle {
869	cursor: pointer;
870
871	.wc-wizard-service-enable::before {
872	content: "\f343"; // up chevron
873	font-family: dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
874	color: #666;
875	font-size: 25px;
876	margin-top: -7px;
877	margin-left: -5px;
878	position: absolute;
879	visibility: visible;
880	}
881
882	&.closed {
883
884	.wc-wizard-service-enable::before {
885	content: "\f347"; // down chevron
886	}
887	}
888
889	.wc-wizard-service-enable input {
890	visibility: hidden;
891	position: relative;
892	}
893	}
894
895	.wc-wizard-services.manual .wc-wizard-service-item {
896	display: none;
897	}
898
899	// Shipping list of services
900	.wc-wizard-services.shipping {
901	margin: 0;
902
903	.wc-wizard-service-name {
904	font-weight: 400;
905	text-align: left;
906	align-items: center;
907	max-height: 5em;
908	padding: 0;
909	}
910
911	// List header
912	.wc-wizard-service-item {
913	padding-left: 2em;
914	padding-top: 0.67em;
915
916	&:first-child {
917	border-bottom: 0;
918	padding-bottom: 0;
919	font-weight: 700;
920
921	.wc-wizard-service-name {
922	font-weight: 700;
923	}
924	}
925	}
926
927	.wc-wizard-shipping-method-select,
928	.shipping-method-setting {
929	display: flex;
930
931	&.hide {
932	display: none;
933	}
934	}
935
936	.wc-wizard-shipping-method-dropdown,
937	.shipping-method-setting input {
938	margin-right: 2em;
939	margin-bottom: 1em;
940
941	.select2 {
942	min-width: 130px;
943	}
944	}
945
946	.wc-wizard-service-description {
947	display: flex;
948	flex-direction: column;
949	color: #a6a6a6;
950	}
951
952	.wc-wizard-service-item:not(:first-child) .wc-wizard-service-description {
953	font-size: 0.92em;
954	padding-bottom: 10px;
955	}
956
957	.shipping-method-setting {
958
959	input {
960	width: 95px; // match dropdown height
961	border: 1px solid #aaa;
962	border-color: #ddd;
963	border-radius: 4px;
964	height: 28px;
965	padding-left: 8px;
966	padding-right: 24px;
967	font-size: 14px;
968	color: #444;
969	background-color: #fff;
970	display: inline-block;
971	}
972	}
973
974	.shipping-method-description,
975	.shipping-method-setting .description {
976	color: #7e7e7e;
977	font-size: 0.9em;
978	}
979
980	.shipping-method-setting input::placeholder {
981	color: #e1e1e1;
982	}
983	}
984
985	.wc-setup-shipping-units {
986
987	p {
988	line-height: 1.5;
989	font-size: 13px;
990	margin-bottom: 0.25em;
991	text-align: center;
992	}
993
994	.wc-setup-shipping-unit {
995	margin-bottom: 1.75em;
996
997	.select2 {
998	min-width: 125px; // widen dropdowns
999	top: -5px; // vertically align dropdown value with surrounding text
1000	}
1001	}
1002	}
1003
1004	.hide {
1005	display: none;
1006	}
1007
1008	.wc-wizard-features {
1009	display: flex;
1010	flex-wrap: wrap;
1011	list-style: none;
1012	padding: 0;
1013
1014	.wc-wizard-feature-item {
1015	flex-basis: calc(50% - 4em - 3px); // two columns, account for padding and borders
1016	border: 1px solid #eee;
1017	padding: 2em;
1018	}
1019
1020	.wc-wizard-feature-item:nth-child(1) {
1021	border-radius: 4px 0 0 0;
1022	}
1023
1024	.wc-wizard-feature-item:nth-child(2) {
1025	border-left: 0;
1026	border-radius: 0 4px 0 0;
1027	}
1028
1029	.wc-wizard-feature-item:nth-child(3) {
1030	border-top: 0;
1031	border-radius: 0 0 0 4px;
1032	}
1033
1034	.wc-wizard-feature-item:nth-child(4) {
1035	border-top: 0;
1036	border-left: 0;
1037	border-radius: 0 0 4px 0;
1038	}
1039
1040	p.wc-wizard-feature-name,
1041	p.wc-wizard-feature-description {
1042	margin: 0;
1043	line-height: 1.5;
1044	}
1045	}
1046
1047	h3.jetpack-reasons {
1048	text-align: center;
1049	margin: 3em 0 1em 0;
1050	font-size: 14px;
1051	}
1052
1053	.jetpack-logo,
1054	.wcs-notice {
1055	display: block;
1056	margin: 1.75em auto 2em auto;
1057	max-height: 175px;
1058	}
1059
1060	.activate-splash {
1061
1062	.jetpack-logo {
1063	width: 170px;
1064	margin-bottom: 0;
1065	}
1066
1067	.wcs-notice {
1068	margin-top: 1em;
1069	padding-left: 57px;
1070	}
1071	}
1072
1073	.wc-setup-step__new_onboarding {
1074
1075	.wc-logo,
1076	.wc-setup-steps {
1077	display: none;
1078	}
1079
1080	.wc-setup-step__new_onboarding-wrapper {
1081
1082	.wc-logo {
1083	display: block;
1084	}
1085
1086	p {
1087	text-align: center;
1088	}
1089
1090	.wc-setup-step__new_onboarding-welcome,
1091	.wc-setup-step__new_onboarding-plugin-info {
1092	color: #7c7c7c;
1093	font-size: 12px;
1094	}
1095	}
1096	}
1097
1098	.step {
1099	text-align: center;
1100	}
1101
1102	.wc-setup .wc-setup-actions .button {
1103	font-weight: 300;
1104	font-size: 16px;
1105	padding: 1em 2em;
1106	box-shadow: none;
1107	min-width: 12em;
1108	margin-top: 10px;
1109	line-height: 1;
1110	margin-right: 0.5em;
1111	margin-bottom: 2px;
1112	height: auto;
1113	border-radius: 4px;
1114
1115	&:focus,
1116	&:hover,
1117	&:active {
1118	box-shadow: none;
1119	}
1120	}
1121
1122	.wc-setup .wc-setup-actions .plugin-install-info {
1123	display: block;
1124	font-style: italic;
1125	color: #999;
1126	font-size: 14px;
1127	line-height: 1.5;
1128	margin: 5px 0;
1129
1130	& > * {
1131	display: block;
1132	}
1133
1134	.plugin-install-info-list-item::after {
1135	content: ", ";
1136	}
1137
1138	.plugin-install-info-list-item:last-of-type::after {
1139	content: ". ";
1140	}
1141
1142	a {
1143	white-space: nowrap;
1144
1145	&:not(:hover):not(:focus) {
1146	color: inherit;
1147	}
1148	}
1149	}
1150
1151	.plugin-install-source {
1152	$background: rgba(#bb77ae, 0.15);
1153	background: $background;
1154
1155	&:not(.wc-wizard-service-item) {
1156	box-shadow: 0 0 0 10px $background;
1157	}
1158	}
1159
1160	.location-prompt {
1161	color: #666;
1162	font-size: 13px;
1163	font-weight: 500;
1164	margin-bottom: 0.5em;
1165	margin-top: 0.85em;
1166	display: inline-block;
1167	}
1168
1169	.location-input {
1170	border: 1px solid #aaa;
1171	border-color: #ddd;
1172	border-radius: 4px;
1173	height: 30px;
1174	width: calc(100% - 8px - 8px - 2px);
1175	padding-left: 8px;
1176	padding-right: 8px;
1177	font-size: 16px;
1178	color: #444;
1179	background-color: #fff;
1180	display: block;
1181
1182	&.dropdown {
1183	width: 100%;
1184	}
1185	}
1186
1187	.branch-5-2,
1188	.wc-wp-version-gte-53 {
1189
1190	.location-input {
1191	margin: 0;
1192	width: 100%;
1193	}
1194	}
1195
1196	.address-step {
1197
1198	.select2 {
1199	min-width: 100%; // widen currency, product type dropdowns
1200	}
1201	}
1202
1203	.store-address-container {
1204
1205	.city-and-postcode {
1206	display: flex;
1207
1208	div {
1209	flex-basis: 50%;
1210	margin-right: 1em;
1211
1212	&:last-of-type {
1213	margin-right: 0;
1214	}
1215	}
1216	}
1217
1218	input[type="text"]="text""],
1219	select,
1220	.select2-container {
1221	margin-bottom: 10px;
1222	}
1223	}
1224
1225	.product-type-container,
1226	.sell-in-person-container {
1227	margin-top: 14px;
1228	margin-bottom: 1px;
1229	}
1230
1231	#woocommerce_sell_in_person {
1232	margin-left: 0;
1233	margin-top: calc(0.85em / 2);
1234	}
1235
1236	.wc-wizard-service-settings {
1237
1238	.payment-email-input {
1239	border: 1px solid #aaa;
1240	border-color: #ddd;
1241	border-radius: 4px;
1242	height: 30px;
1243	padding: 0 8px;
1244	font-size: 14px;
1245	color: #444;
1246	background-color: #fff;
1247	display: inline-block;
1248
1249	&[disabled]] {
1250	color: #aaa;
1251	}
1252	}
1253	}
1254
1255	.newsletter-form-container {
1256	display: flex;
1257
1258	.newsletter-form-email {
1259	border: 1px solid #aaa;
1260	border-color: #ddd;
1261	border-radius: 4px;
1262	height: 42px;
1263	padding: 0 8px;
1264	font-size: 16px;
1265	color: #666;
1266	background-color: #fff;
1267	display: inline-block;
1268	margin-right: 6px;
1269	flex-grow: 1;
1270	}
1271
1272	.newsletter-form-button-container {
1273	flex-grow: 0;
1274	}
1275	}
1276
1277	.wc-setup .wc-setup-actions .button.newsletter-form-button {
1278	height: 42px;
1279	padding: 0 1em;
1280	margin: 0;
1281	}
1282
1283	.wc-wizard-next-steps {
1284	border: 1px solid #eee;
1285	border-radius: 4px;
1286	list-style: none;
1287	padding: 0;
1288
1289	li {
1290	padding: 0;
1291	}
1292
1293	.wc-wizard-next-step-item {
1294	display: flex;
1295	border-top: 1px solid #eee;
1296
1297	&:first-child {
1298	border-top: 0;
1299	}
1300	}
1301
1302	.wc-wizard-next-step-description {
1303	flex-grow: 1;
1304	margin: 1.5em;
1305	}
1306
1307	.wc-wizard-next-step-action {
1308	flex-grow: 0;
1309	display: flex;
1310	align-items: center;
1311
1312	.button {
1313	margin: 1em 1.5em;
1314	}
1315	}
1316
1317	p {
1318
1319	&.next-step-heading {
1320	margin: 0;
1321	font-size: 0.95em;
1322	font-weight: 400;
1323	font-variant: all-petite-caps;
1324	}
1325
1326	&.next-step-extra-info {
1327	margin: 0;
1328	}
1329	}
1330
1331	h3 {
1332
1333	&.next-step-description {
1334	margin: 0;
1335	font-size: 16px;
1336	font-weight: 600;
1337	}
1338	}
1339
1340	.wc-wizard-additional-steps {
1341	border-top: 1px solid #eee;
1342
1343	.wc-wizard-next-step-description {
1344	margin-bottom: 0;
1345	}
1346
1347	.wc-setup-actions {
1348	margin: 0 0 1.5em 0;
1349
1350	.button {
1351	font-size: 15px;
1352	margin: 1em 0 1em 1.5em;
1353	}
1354	}
1355	}
1356	}
1357
1358	p.next-steps-help-text {
1359	color: #9f9f9f;
1360	padding: 0 2em;
1361	text-align: center;
1362	font-size: 0.9em;
1363	}
1364
1365	p.jetpack-terms {
1366	font-size: 0.8em;
1367	text-align: center;
1368	max-width: 480px;
1369	margin: 0 auto;
1370	line-height: 1.5;
1371	}
1372
1373	.woocommerce-error {
1374	background: #ffe6e5;
1375	border-color: #ffc5c2;
1376	padding: 1em;
1377	margin-bottom: 1em;
1378
1379	p {
1380	margin-top: 0;
1381	margin-bottom: 0.5em;
1382	color: #444;
1383	}
1384
1385	a {
1386	color: #ff645c;
1387	}
1388
1389	.reconnect-reminder {
1390	font-size: 0.85em;
1391	}
1392
1393	.wc-setup-actions .button {
1394	font-size: 14px;
1395	}
1396	}
1397
1398	.wc-wizard-service-setting-stripe_create_account,
1399	.wc-wizard-service-setting-ppec_paypal_reroute_requests {
1400	display: flex;
1401	align-items: flex-start;
1402
1403	.payment-checkbox-input {
1404	order: 1;
1405	margin-top: 5px;
1406	margin-left: 0;
1407	margin-right: 0;
1408	}
1409
1410	.stripe_create_account,
1411	.ppec_paypal_reroute_requests {
1412	order: 2;
1413	margin-left: 0.3em;
1414	}
1415	}
1416
1417	.branch-5-2,
1418	.wc-wp-version-gte-53 {
1419
1420	.wc-wizard-service-setting-stripe_create_account,
1421	.wc-wizard-service-setting-ppec_paypal_reroute_requests {
1422
1423	.payment-checkbox-input {
1424	margin-top: 3px;
1425	}
1426	}
1427	}
1428
1429	.wc-wizard-service-setting-stripe_email,
1430	.wc-wizard-service-setting-ppec_paypal_email {
1431	margin-top: 0.75em;
1432	margin-left: 1.5em;
1433
1434	label.stripe_email,
1435	label.ppec_paypal_email {
1436	position: absolute;
1437	margin: -1px;
1438	padding: 0;
1439	height: 1px;
1440	width: 1px;
1441	overflow: hidden;
1442	clip: rect(0 0 0 0);
1443	border: 0;
1444	}
1445
1446	input.payment-email-input {
1447	box-sizing: border-box;
1448	margin-bottom: 0.5em;
1449	width: 100%;
1450	height: 32px;
1451	}
1452	}
1453
1454	.wc-setup-content .recommended-step {
1455	border: 1px solid #ebebeb;
1456	border-radius: 4px;
1457	padding: 2.5em;
1458	}
1459
1460	.wc-setup-content .recommended-item {
1461	list-style: none;
1462	margin-bottom: 1.5em;
1463
1464	&:last-child {
1465	margin-bottom: 0; // Avoid extra space at the end of the list.
1466	}
1467
1468	label {
1469	display: flex;
1470	align-items: center;
1471
1472	&::before,
1473	&::after {
1474	top: auto;
1475	}
1476
1477	&::after {
1478	margin-top: -1.5px;
1479	}
1480	}
1481
1482	.recommended-item-icon {
1483	border: 1px solid #fff;
1484	border-radius: 7px;
1485	height: 3.5em;
1486	margin-right: 1em;
1487	margin-left: 4px;
1488
1489	&.recommended-item-icon-wc_admin {
1490	background-color: #96588a;
1491	padding: 0.5em;
1492	height: 2em;
1493	}
1494
1495	&.recommended-item-icon-storefront_theme {
1496	background-color: #f4a224;
1497	max-height: 3em;
1498	max-width: 3em;
1499	padding: ( 3.5em - 3em ) / 2;
1500	}
1501
1502	&.recommended-item-icon-automated_taxes {
1503	background-color: #d0011b;
1504	max-height: 1.75em;
1505	padding: ( 3.5em - 1.75em ) / 2;
1506	}
1507
1508	&.recommended-item-icon-mailchimp {
1509	background-color: #ffe01b;
1510	height: 2em;
1511	padding: ( 3.5em - 2em ) / 2;
1512	}
1513
1514	&.recommended-item-icon-woocommerce_services {
1515	background-color: #f0f0f0;
1516	max-height: 1.5em;
1517	padding: 1.3em 0.7em;
1518	}
1519
1520	&.recommended-item-icon-shipstation {
1521	background-color: #f0f0f0;
1522	padding: 0.3em;
1523	}
1524	}
1525
1526	.recommended-item-description-container {
1527
1528	h3 {
1529	font-size: 15px;
1530	font-weight: 700;
1531	letter-spacing: 0.5px;
1532	margin-bottom: 0;
1533	}
1534
1535	p {
1536	margin-top: 0;
1537	line-height: 1.5;
1538	}
1539	}
1540	}
1541
1542	.wc-wizard-service-info {
1543	padding: 1em 2em;
1544	background-color: #fafafa;
1545	}
1546
1547	.help_tip {
1548	text-decoration: underline dotted;
1549	}
1550
1551	@media only screen and (max-width: 400px) {
1552
1553	.wc-logo img {
1554	max-width: 80%;
1555	}
1556
1557	.wc-setup-steps {
1558	display: none;
1559	}
1560
1561	.store-address-container {
1562
1563	.city-and-postcode {
1564	display: block;
1565
1566	div {
1567	margin-right: 0;
1568	}
1569	}
1570	}
1571
1572	.wc-wizard-service-item,
1573	.wc-wizard-services-list-toggle {
1574	flex-wrap: wrap;
1575
1576	.wc-wizard-service-enable {
1577	order: 2;
1578	padding: 20px 0 0;
1579	}
1580
1581	.wc-wizard-service-description {
1582	order: 3;
1583	}
1584
1585	.wc-wizard-service-name {
1586	padding: 20px 20px 0;
1587	text-align: left;
1588	justify-content: space-between !important;
1589
1590	img {
1591	margin: 0;
1592	}
1593	}
1594	}
1595
1596	.newsletter-form-container {
1597	display: block;
1598
1599	.newsletter-form-email {
1600	display: block;
1601	box-sizing: border-box;
1602	width: 100%;
1603	margin-bottom: 10px;
1604	}
1605
1606	.button.newsletter-form-button {
1607	float: left;
1608	}
1609	}
1610
1611	.wc-wizard-next-steps .wc-wizard-next-step-item {
1612	flex-wrap: wrap;
1613
1614	.wc-wizard-next-step-description {
1615	margin-bottom: 0;
1616	}
1617
1618	.wc-wizard-next-step-action {
1619
1620	p {
1621	margin: 0;
1622	}
1623	}
1624	}
1625	}
1626	/* stylelint-enable */
1627