helper.scss — WooCommerce 9.1.0-beta.1

woocommerce / assets / css / helper.scss

woocommerce / assets / css Last commit date

helper.scss

1082 lines

1	/*------------------------------------------------------------------------------
2	General table styling
3	------------------------------------------------------------------------------*/
4
5	$white: #fff;
6
7	// Grays
8	$gray: #87a6bc;
9	$gray-light: lighten($gray, 33%); //#f3f6f8
10	$gray-dark: darken($gray, 38%); //#2e4453
11
12	// $gray-text: ideal for standard, non placeholder text
13	// $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
14	$gray-text: $gray-dark;
15	$gray-text-min: darken($gray, 18%); //#537994
16
17	$admin-theme-color: var(--wp-admin-theme-color);
18
19	/*------------------------------------------------------------------------------
20	Tab navigation
21	------------------------------------------------------------------------------*/
22	.wc-helper {
23
24	.nav-tab-wrapper {
25	margin-bottom: 22px;
26	}
27
28	@media only screen and (max-width: 784px) {
29
30	.nav-tab {
31	max-width: 40%;
32	overflow: hidden;
33	text-overflow: ellipsis;
34	}
35	}
36	}
37
38
39	/*------------------------------------------------------------------------------
40	Buttons
41	------------------------------------------------------------------------------*/
42
43	.wc-helper {
44
45	.button,
46	.button:hover,
47	.button:focus,
48	.button:active {
49	background-color: $admin-theme-color;
50	border-width: 0;
51	box-shadow: none;
52	border-radius: 3px;
53	color: #fff;
54	height: auto;
55	padding: 3px 14px;
56	text-align: center;
57	white-space: normal !important;
58
59	@media only screen and (max-width: 782px) {
60	line-height: 2;
61	}
62
63	&.button-secondary {
64	background-color: #e6e6e6;
65	color: #3c3c3c;
66	text-shadow: none;
67	}
68	}
69
70	.button:hover {
71	opacity: 0.8;
72	}
73	}
74
75	.wc-helper .subscription-filter {
76	font-size: 13px;
77	line-height: 13px;
78	margin: 22px 0;
79
80	label {
81	display: none;
82	position: relative;
83
84	.chevron {
85	color: #e1e1e1;
86	border-bottom-width: 0;
87	line-height: 1;
88	padding: 0;
89	position: absolute;
90	top: 10px;
91	right: 14px;
92	}
93	}
94
95	li {
96	display: inline-block;
97	padding: 0 4px 0 8px;
98	position: relative;
99
100	&::before {
101	background-color: #979797;
102	content: " ";
103	position: absolute;
104	top: 0;
105	left: 0;
106	bottom: 0;
107	width: 1px;
108	}
109
110	&:first-of-type {
111
112	&::before {
113	display: none;
114	}
115	}
116	}
117
118	a {
119	text-decoration: none;
120
121	&.current {
122	color: #000;
123	font-weight: 600;
124	}
125	}
126
127	.count {
128	color: #555d66;
129	font-weight: 400;
130	}
131
132	@media only screen and (max-width: 600px) {
133	background-color: #fff;
134	border: 1px solid #e1e1e1;
135	border-radius: 4px;
136	font-size: 14px;
137
138	label,
139	li {
140	line-height: 21px;
141	padding: 8px 16px;
142	margin: 0;
143
144	&:last-child {
145	border-bottom: none;
146	}
147	}
148
149	li {
150	border-bottom: 1px solid #e1e1e1;
151	}
152
153	label,
154	span.chevron {
155	display: block;
156	}
157
158	label {
159	text-decoration: none;
160	}
161
162	li {
163	display: none;
164	}
165
166	li {
167
168	&::before {
169	display: none;
170	}
171	}
172
173	a {
174	cursor: pointer;
175	}
176
177	span.chevron {
178	color: #555;
179	opacity: 0.5;
180	transform: rotateX(180deg);
181	}
182
183	&:focus,
184	&:hover {
185	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
186
187	label {
188	border-bottom: 1px solid #e1e1e1;
189	}
190
191	li {
192	display: block;
193	}
194
195	span.chevron {
196	transform: rotateX(0deg);
197	}
198	}
199	}
200
201	}
202
203	/*------------------------------------------------------------------------------
204	Subscriptons Header
205	------------------------------------------------------------------------------*/
206
207	.wc-helper {
208
209	.subscriptions-header {
210	margin: 3em 0 0;
211	position: relative;
212	z-index: 10;
213
214	h2 {
215	display: inline-block;
216	line-height: 25px;
217	margin: 0 0 1.5em 0;
218	}
219
220	}
221
222	.button-update,
223	.button-update:hover {
224	background-color: #e6e6e6;
225	border-radius: 4px;
226	color: #333;
227	font-weight: 800;
228	font-size: 10px;
229	line-height: 20px;
230	margin-left: 6px;
231	opacity: 0.75;
232	padding: 3px 7px;
233	text-transform: uppercase;
234
235	.dashicons {
236	font-size: 12px;
237	height: 12px;
238	width: 12px;
239	vertical-align: text-bottom;
240	}
241	}
242
243	.button-update:hover {
244	opacity: 1;
245	}
246
247	.user-info {
248	background-color: #fff;
249	border: 1px solid #e1e1e1;
250	border-radius: 4px;
251	font-size: 12px;
252	line-height: 26px;
253	position: absolute;
254	top: -10px;
255	right: 0;
256	transition: all 0.1s ease-in;
257
258	@media only screen and (max-width: 600px) {
259	position: relative;
260	width: 100%;
261	}
262
263	p {
264	line-height: 26px;
265	margin: 0;
266	}
267
268	&:hover {
269	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
270	}
271
272	header {
273	color: #555;
274	font-weight: 600;
275	padding: 6px 14px;
276	position: relative;
277
278	p {
279	padding-right: 26px;
280	}
281
282	.dashicons {
283	opacity: 0.5;
284	position: absolute;
285	top: 9px;
286	right: 14px;
287	}
288
289	&:hover {
290	cursor: pointer;
291	}
292	}
293
294	section {
295	display: none;
296
297	p {
298	border-top: 1px solid #e1e1e1;
299	padding: 6px 14px;
300	text-align: center;
301	}
302
303	.actions {
304	border-top: 1px solid #e1e1e1;
305	display: flex;
306	}
307
308	a {
309	cursor: pointer;
310	font-weight: 600;
311	line-height: 38px;
312	padding: 0 14px;
313	text-align: center;
314	text-decoration: none;
315	white-space: nowrap;
316	width: 50%;
317
318	.dashicons {
319	margin-top: -3px;
320	vertical-align: middle;
321	}
322
323	&:first-child {
324	border-right: 1px solid #e1e1e1;
325	}
326
327	&:hover {
328	background-color: $admin-theme-color;
329	color: #fff;
330	}
331	}
332
333	.avatar {
334	border: 1px solid #ece1ea;
335	border-radius: 50%;
336	height: auto;
337	margin-right: 6px;
338	width: 24px;
339	vertical-align: bottom;
340	}
341	}
342	}
343
344	.user-info:hover,
345	.user-info:focus,
346	.user-info:active {
347
348	header .dashicons {
349	transform: rotateX(180deg);
350	}
351
352	section {
353	display: block;
354	}
355	}
356	}
357
358	/*------------------------------------------------------------------------------
359	Subscripton table
360	------------------------------------------------------------------------------*/
361
362	.wc-helper {
363
364	.striped > tbody > :nth-child(odd),
365	ul.striped > :nth-child(odd),
366	.alternate {
367	background-color: #fff;
368	}
369
370	table.widefat,
371	.wp-editor-container,
372	.stuffbox,
373	p.popular-tags,
374	.widgets-holder-wrap,
375	.popular-tags,
376	.feature-filter,
377	.imgedit-group,
378	.comment-ays {
379	padding-top: 5px;
380	}
381
382	.widefat thead tr th,
383	.widefat thead tr td,
384	.widefat tfoot tr th,
385	.widefat tfoot tr td {
386	color: #32373c;
387	padding-bottom: 15px;
388	padding-top: 10px;
389	}
390
391	.widefat td {
392	padding-bottom: 15px;
393	padding-top: 15px;
394	}
395
396	.wp-list-table {
397	border: 0;
398	box-shadow: none;
399	padding-top: 0 !important;
400	z-index: 1;
401	}
402
403	.button {
404
405	@media only screen and (max-width: 782px) {
406	font-size: 11px;
407	}
408	}
409
410	.wp-list-table__row {
411	background-color: rgba(0, 0, 0, 0);
412
413	td {
414	align-items: center;
415	background-color: #fff;
416	border: 0;
417	//border-top: 1px solid #e5e5e5;
418	padding: 16px 22px;
419	vertical-align: middle;
420
421	@media only screen and (max-width: 782px) {
422	padding: 16px;
423	}
424	}
425
426	td.color-bar {
427	border-left: 0;
428	}
429
430	&.is-ext-header {
431
432	td {
433	border-top: 1px solid #e1e1e1;
434	}
435
436	@media only screen and (max-width: 782px) {
437	display: inline-flex;
438	flex-flow: row wrap;
439	width: 100%;
440
441	.wp-list-table__ext-details {
442	display: block;
443	flex: 2;
444	}
445
446	.wp-list-table__ext-actions {
447	display: block;
448	flex: 1;
449	min-width: 0;
450	}
451	}
452	}
453
454	&:last-child td {
455	border-bottom: 24px solid #f1f1f1;
456	box-shadow: inset 0 -1px 0 #e1e1e1;
457	}
458	}
459
460	.wp-list-table__ext-details,
461	.wp-list-table__ext-status,
462	.wp-list-table__licence-container {
463	padding-right: 22px;
464	position: relative;
465	width: 100%;
466
467	&::before {
468	background-color: #e1e1e1;
469	content: " ";
470	position: absolute;
471	top: 0;
472	bottom: 0;
473	left: 0 !important;
474	width: 1px !important;
475	}
476	}
477
478	.wp-list-table__ext-details {
479	display: flex;
480
481	@media only screen and (max-width: 782px) {
482	display: table;
483	}
484	}
485
486	.wp-list-table__ext-title {
487	color: $admin-theme-color;
488	font-size: 18px;
489	font-weight: 600;
490	width: 60%;
491
492	@media only screen and (max-width: 782px) {
493	margin-bottom: 12px;
494	width: 100%;
495	}
496
497	@media only screen and (max-width: 320px) {
498	max-width: 120px;
499	}
500	}
501
502	.wp-list-table__ext-description {
503	color: #333;
504	padding-left: 12px;
505	width: 40%;
506
507	@media only screen and (max-width: 782px) {
508	padding-left: 0;
509	width: 100%;
510	}
511	}
512
513	.wp-list-table__ext-status {
514	position: relative;
515
516	&.update-available::after {
517	background-color: #ffc322;
518	content: " ";
519	position: absolute;
520	top: 0;
521	left: 0;
522	bottom: 0;
523	width: 5px;
524	}
525
526	&.expired::after {
527	background-color: #b81c23;
528	content: " ";
529	position: absolute;
530	top: 0;
531	left: 0;
532	bottom: 0;
533	width: 5px;
534	}
535
536	.dashicons-update {
537	color: #ffc322;
538	}
539
540	.dashicons-info {
541	color: #b81c23;
542	}
543
544	p {
545	color: #333;
546	margin: 0;
547	}
548
549	.dashicons {
550	margin-right: 5px;
551	}
552	}
553
554	.wp-list-table__ext-actions {
555	min-width: 150px;
556	position: relative;
557	width: 25%;
558	text-align: right;
559
560	&::after {
561	background-color: #e1e1e1;
562	content: " ";
563	position: absolute;
564	top: 0;
565	bottom: 0;
566	right: 0;
567	width: 1px;
568	}
569	}
570
571	.wp-list-table__ext-updates,
572	.wp-list-table__ext-licence {
573
574	td {
575	position: relative;
576
577	&::before {
578	background-color: #e1e1e1;
579	content: " ";
580	height: 1px;
581	position: absolute;
582	top: 0;
583	left: 0;
584	right: 0;
585	}
586	}
587
588	td.wp-list-table__ext-status,
589	td.wp-list-table__licence-container {
590
591	&::before {
592	left: 22px !important;
593	width: auto !important;
594	}
595	}
596
597	td.wp-list-table__ext-actions::before {
598	right: 22px;
599	}
600
601	@media only screen and (max-width: 782px) {
602	display: flex;
603
604	.wp-list-table__ext-status {
605	flex: 2;
606
607	&::before {
608	left: 0 !important;
609	width: 100% !important;
610	}
611	}
612
613	.wp-list-table__ext-actions {
614	flex: 1;
615	min-width: 0;
616
617	&::before {
618	left: 0 !important;
619	right: 0 !important;
620	width: 100% !important;
621	}
622	}
623	}
624	}
625
626	.wp-list-table__licence-container {
627	padding: 0 !important;
628
629	&::after {
630	background-color: #e1e1e1;
631	content: " ";
632	position: absolute;
633	top: 0;
634	bottom: 0;
635	right: 0;
636	width: 1px;
637	}
638	}
639
640	.wp-list-table__licence-form {
641	display: flex;
642	padding: 16px 22px;
643
644	@media only screen and (max-width: 782px) {
645	display: block;
646	}
647
648	&::before {
649	background-color: #e1e1e1;
650	content: " ";
651	height: 1px;
652	position: absolute;
653	top: 0;
654	right: 22px;
655	left: 22px;
656
657	@media only screen and (max-width: 782px) {
658	right: 0;
659	left: 0;
660	}
661	}
662
663	div {
664	padding-right: 16px;
665	vertical-align: middle;
666
667	@media only screen and (max-width: 782px) {
668	padding: 0;
669	}
670	}
671
672	p {
673	margin: 0 !important;
674	}
675	}
676
677	.wp-list-table__licence-label {
678
679	label {
680	color: #23282d;
681	font-weight: 600;
682	line-height: 30px;
683	}
684	}
685
686	.wp-list-table__licence-field {
687
688	input {
689	height: 32px;
690
691	@media only screen and (max-width: 480px) {
692	width: 100%;
693	}
694	}
695
696	@media only screen and (max-width: 782px) {
697	padding: 8px 0 16px !important;
698	}
699	}
700
701	.wp-list-table__licence-actions {
702	flex-grow: 2;
703	padding-right: 0 !important;
704
705	.button {
706	margin-right: 8px;
707	}
708
709	.button-secondary {
710	float: right;
711	margin: 0 0 0 8px;
712	}
713
714	@media only screen and (max-width: 480px) {
715	text-align: right;
716	}
717	}
718	}
719
720	/*------------------------------------------------------------------------------
721	Expired notification bar
722	------------------------------------------------------------------------------*/
723
724	.wc-helper {
725
726	td.color-bar {
727	border-left: solid 4px transparent;
728	}
729
730	td.color-bar.expired {
731	border-left-color: #b81c23;
732	}
733
734	td.color-bar.expiring {
735	border-left-color: orange;
736	}
737
738	td.color-bar.update-available {
739	border-left-color: #8fae1b;
740	}
741
742	td.color-bar.expiring.update-available {
743	border-left-color: #8fae1b;
744	}
745	}
746
747	/*------------------------------------------------------------------------------
748	Connected account table
749	------------------------------------------------------------------------------*/
750
751	.wc-helper {
752
753	.connect-wrapper {
754	background-color: #fff;
755	border: 1px solid #e5e5e5;
756	margin-bottom: 25px;
757	overflow: auto;
758	}
759
760	.connected {
761	display: flex;
762
763	.user-info {
764	display: flex;
765	padding: 20px;
766	width: 100%;
767	vertical-align: middle;
768	}
769
770	img {
771	border: 1px solid #e5e5e5;
772	height: 34px;
773	width: 34px;
774	}
775
776	.buttons {
777	padding: 20px;
778	white-space: nowrap;
779	}
780
781	p {
782	flex: 2;
783	margin: 10px 0 0 20px;
784	}
785
786	.chevron {
787	display: none;
788
789	&:hover {
790	color: $admin-theme-color;
791	cursor: pointer;
792	}
793	}
794
795	@media only screen and (max-width: 784px) {
796	display: block;
797
798	strong {
799	display: block;
800	overflow: hidden;
801	text-overflow: ellipsis;
802	}
803
804	p {
805	margin: 0;
806	overflow: hidden;
807	text-overflow: ellipsis;
808	width: 80%;
809	}
810
811	.user-info {
812	padding-right: 0;
813	width: auto;
814	}
815
816	.avatar {
817	margin-right: 12px;
818	}
819
820	.chevron {
821	color: #e1e1e1;
822	display: block;
823	margin: 10px;
824	transform: rotateX(0deg);
825	}
826
827	.buttons {
828	display: none;
829	border-top: 1px solid #e1e1e1;
830	padding: 10px 20px;
831
832	&.active {
833	display: block;
834	}
835
836	}
837	}
838	}
839	}
840
841	/*------------------------------------------------------------------------------
842	Initial connection screen
843	------------------------------------------------------------------------------*/
844
845	.wc-helper {
846
847	.start-container {
848	background-color: #fff;
849	border-left: 4px solid $admin-theme-color;
850	padding: 45px 20px 20px 30px;
851	position: relative;
852	overflow: hidden;
853
854	h2,
855	p {
856	max-width: 800px;
857	}
858	}
859
860	.start-container::before {
861	color: #e9e9e9;
862	content: "\e01C";
863	display: block;
864	font-family: WooCommerce;
865	font-size: 192px;
866	line-height: 1;
867	position: absolute;
868	top: 65%;
869	right: -3%;
870	text-align: center;
871	width: 1em;
872	}
873
874	.start-container h2 {
875	font-size: 24px;
876	line-height: 29px;
877	position: relative;
878	}
879
880	.start-container p {
881	font-size: 16px;
882	margin-bottom: 30px;
883	position: relative;
884	}
885
886	.button-helper-connect {
887	height: 37px;
888	line-height: 37px;
889	min-width: 124px;
890	padding: 0 13px;
891	text-shadow: none;
892
893	&:hover,
894	&:active,
895	&:focus {
896	padding: 0 13px;
897	}
898	}
899	}
900
901
902	// ==========================================================================
903	// FormToggle
904	// ==========================================================================
905
906	.form-toggle__wrapper {
907	position: relative;
908
909	label {
910	cursor: default;
911	}
912	}
913
914	.form-toggle {
915	cursor: pointer;
916	display: block;
917	position: absolute;
918	top: 0;
919	bottom: -1px;
920	left: 0;
921	right: 0;
922	text-align: left;
923	text-indent: -100000px;
924	z-index: 2;
925
926	&:focus {
927	box-shadow: none;
928	}
929
930	&.disabled {
931	cursor: default;
932	}
933	}
934
935	.form-toggle__switch {
936	align-self: flex-start;
937	background: #999;
938	border-radius: 12px;
939	box-sizing: border-box;
940	display: inline-block;
941	padding: 2px;
942	outline: 0;
943	position: relative;
944	width: 40px;
945	height: 24px;
946	transition: all 0.4s ease, box-shadow 0s;
947	vertical-align: middle;
948
949	&::before,
950	&::after {
951	content: "";
952	display: block;
953	position: relative;
954	width: 20px;
955	height: 20px;
956	}
957
958	&::after {
959	border-radius: 50%;
960	background: $white;
961	left: 0;
962	transition: all 0.2s ease;
963	}
964
965	&::before {
966	display: none;
967	}
968
969	.accessible-focus &:focus {
970	box-shadow: 0 0 0 2px $admin-theme-color;
971	}
972
973
974	}
975
976	.form-toggle__label {
977	vertical-align: bottom;
978	z-index: 1;
979
980	.form-toggle__label-content {
981	color: $gray-dark;
982	flex: 0 1 100%;
983	font-size: 13px;
984	line-height: 16px;
985	margin-left: 12px;
986	margin-right: 8px;
987	vertical-align: top;
988	text-transform: uppercase;
989
990	@media only screen and (max-width: 480px) {
991	display: none;
992	}
993	}
994	}
995
996	.form-toggle {
997
998	.accessible-focus &:focus {
999
1000	+ .form-toggle__label .form-toggle__switch {
1001	box-shadow: 0 0 0 2px $admin-theme-color;
1002	}
1003
1004	&:checked + .form-toggle__label .form-toggle__switch {
1005	box-shadow: 0 0 0 2px $admin-theme-color;
1006	}
1007	}
1008
1009	& + .form-toggle__label .form-toggle__switch {
1010	background: #999;
1011	}
1012
1013	&:not(:disabled) {
1014
1015	+ .form-toggle__label:hover .form-toggle__switch {
1016	background: #999;
1017	}
1018	}
1019
1020	&.active {
1021
1022	+ .form-toggle__label .form-toggle__switch {
1023	background: $admin-theme-color;
1024
1025	&::after {
1026	left: 8px;
1027	}
1028	}
1029
1030	+ .form-toggle__label:hover .form-toggle__switch {
1031	background: $admin-theme-color;
1032	}
1033	}
1034
1035	&.disabled {
1036
1037	+ label.form-toggle__label span.form-toggle__switch {
1038	opacity: 0.25;
1039	}
1040	}
1041	}
1042
1043	// Classes for toggle state before action is complete (updating plugin or something)
1044	.form-toggle.is-toggling {
1045
1046	+ .form-toggle__label .form-toggle__switch {
1047	background: $admin-theme-color;
1048	}
1049
1050	&:checked {
1051
1052	+ .form-toggle__label .form-toggle__switch {
1053	background: #999;
1054	}
1055	}
1056	}
1057
1058	.form-toggle.is-compact {
1059
1060	+ .form-toggle__label .form-toggle__switch {
1061	border-radius: 8px;
1062	width: 24px;
1063	height: 16px;
1064
1065	&::before,
1066	&::after {
1067	height: 12px;
1068	width: 12px;
1069	}
1070	}
1071
1072	&:checked {
1073
1074	+ .form-toggle__label .form-toggle__switch {
1075
1076	&::after {
1077	left: 8px;
1078	}
1079	}
1080	}
1081	}
1082