wc-setup.scss — WooCommerce 10.9.4

woocommerce / assets / css / wc-setup.scss

woocommerce / assets / css Last commit date

wc-setup.scss

1631 lines

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