twenty-seventeen.scss — WooCommerce 10.8.0-beta.1

woocommerce / assets / css / twenty-seventeen.scss

woocommerce / assets / css Last commit date

twenty-seventeen.scss

1214 lines

1	/**
2	* Twenty Seventeen integration styles
3	*/
4	@import "mixins";
5	@import "animation";
6
7	/**
8	* Fonts
9	*/
10	@import "fonts";
11
12	/**
13	* Forms
14	*/
15	@import "forms";
16
17	/**
18	* Mixins
19	*/
20	@mixin link() {
21	box-shadow: 0 1px 0 rgba(15, 15, 15, 1);
22	transition: box-shadow ease-in-out 130ms;
23
24	&:hover {
25	box-shadow: 0 3px 0 rgba(15, 15, 15, 1);
26	}
27	}
28
29	@mixin link_white() {
30	color: #fff;
31	box-shadow: 0 1px 0 rgba(#fff, 1) !important;
32	transition: box-shadow ease-in-out 130ms;
33
34	&:hover {
35	color: #fff !important;
36	box-shadow: 0 3px 0 rgba(#fff, 1) !important;
37	}
38	}
39
40	/**
41	* Global elements
42	*/
43	.woocommerce {
44	.blockUI.blockOverlay {
45	position: relative;
46
47	@include loader();
48	}
49
50	.loader {
51	@include loader();
52	}
53
54	.woocommerce-form-login {
55	.woocommerce-form-login__submit {
56	float: left;
57	margin-right: 1em;
58	}
59
60	.woocommerce-form-login__rememberme {
61	display: inline-block;
62	line-height: 3em;
63	}
64	}
65
66	button.show-password-input:focus {
67	background-color: transparent !important;
68	outline: 1px solid #333;
69	outline-offset: 2px;
70	}
71	}
72
73	.woocommerce-breadcrumb {
74	padding-bottom: 2em;
75	margin-bottom: 4em;
76	border-bottom: 1px solid #eee;
77	font-size: 13px;
78	font-size: 0.8125rem;
79
80	a {
81	@include link();
82	}
83	}
84
85	.woocommerce-pagination {
86	padding-top: 2em;
87	margin-top: 4em;
88	border-top: 1px solid #eee;
89	font-size: 13px;
90	font-size: 0.8125rem;
91
92	ul.page-numbers {
93	padding: 0;
94	display: block;
95	}
96
97	span.page-numbers,
98	a.page-numbers,
99	.next.page-numbers,
100	.prev.page-numbers {
101	padding: 0.5em 1em;
102	background: #ddd;
103	display: inline-block;
104	font-size: 1em;
105	float: none;
106	line-height: 1.5;
107	border-radius: 2px;
108	transition: background-color ease-in-out 0.3s;
109	}
110
111	span.page-numbers {
112	background-color: #fff;
113	}
114
115	a.page-numbers:hover {
116	background-color: #767676;
117	color: #fff;
118	}
119	}
120
121	.onsale {
122	background-color: #fff;
123	position: absolute;
124	top: 0;
125	left: 0;
126	display: inline-block;
127	padding: 0.5em 1em;
128	font-size: 13px;
129	font-size: 0.8125rem;
130	text-transform: uppercase;
131	font-weight: 800;
132	z-index: 1;
133	}
134
135	.price {
136	del {
137	opacity: 0.7;
138	display: inline-block;
139	}
140
141	ins {
142	display: inline-block;
143	}
144	}
145
146	/**
147	* Shop page
148	*/
149	.woocommerce-result-count {
150	padding: 0.75em 0;
151	}
152
153	.woocommerce-ordering > label {
154	display: inline;
155	margin-right: 0.25rem;
156	}
157
158	/**
159	* Products
160	*/
161	ul.products {
162	li.product {
163	list-style: none;
164
165	.woocommerce-loop-product__link {
166	display: block;
167	}
168
169	.price,
170	.star-rating {
171	display: block;
172	margin-bottom: 0.75em;
173	}
174
175	.woocommerce-placeholder {
176	border: 1px solid #f2f2f2;
177	}
178
179	.button {
180	@include link();
181
182	&.loading {
183	opacity: 0.5;
184	}
185	}
186
187	.added_to_cart {
188	@include link();
189	margin-left: 0.5em;
190	}
191	}
192	}
193
194	.star-rating {
195	overflow: hidden;
196	position: relative;
197	height: 1em;
198	line-height: 1;
199	font-size: 1em;
200	width: 5.4em;
201	font-family: WooCommerce;
202
203	&::before {
204	content: "\73\73\73\73\73";
205	float: left;
206	top: 0;
207	left: 0;
208	position: absolute;
209	}
210
211	span {
212	overflow: hidden;
213	float: left;
214	top: 0;
215	left: 0;
216	position: absolute;
217	padding-top: 1.5em;
218	}
219
220	span::before {
221	content: "\53\53\53\53\53";
222	top: 0;
223	position: absolute;
224	left: 0;
225	}
226	}
227
228	.woocommerce-loop-product__title {
229	font-size: 13px;
230	font-size: 0.8125rem;
231	text-transform: uppercase;
232	font-weight: 800;
233	letter-spacing: 0.15em;
234	}
235
236	a.remove {
237	display: inline-block;
238	width: 16px;
239	height: 16px;
240	line-height: 16px;
241	font-size: 16px;
242	text-align: center;
243	border-radius: 100%;
244	box-shadow: none !important;
245	border: 1px solid #000;
246
247	&:hover {
248	background: #000;
249	color: #fff !important;
250	}
251	}
252
253	dl.variation,
254	.wc-item-meta {
255	list-style: none outside;
256
257	dt,
258	.wc-item-meta-label {
259	float: left;
260	clear: both;
261	margin-right: 0.25em;
262	display: inline-block;
263	list-style: none outside;
264	}
265
266	dd {
267	margin: 0;
268	}
269
270	p,
271	&:last-child {
272	margin-bottom: 0;
273	}
274	}
275
276	/**
277	* Single product
278	*/
279	.single-product {
280	div.product {
281	position: relative;
282	}
283
284	.single-featured-image-header {
285	display: none;
286	}
287
288	.summary {
289	margin-bottom: 3em;
290
291	p.price {
292	margin-bottom: 2em;
293	}
294	}
295
296	.woocommerce-product-rating {
297	margin-bottom: 2em;
298	line-height: 1;
299
300	.star-rating {
301	float: left;
302	margin-right: 0.25em;
303	}
304	}
305
306	form.cart {
307	.quantity {
308	float: left;
309	margin-right: 0.5em;
310	}
311
312	input {
313	width: 5em;
314	}
315	}
316
317	.woocommerce-variation-add-to-cart {
318	.button {
319	padding-top: 0.72em;
320	padding-bottom: 0.72em;
321	}
322
323	.button.disabled {
324	opacity: 0.2;
325	}
326	}
327	}
328
329	table.variations {
330	label {
331	margin: 0;
332	}
333
334	select {
335	margin-right: 0.5em;
336	}
337	}
338
339	.woocommerce-product-gallery {
340	position: relative;
341	margin-bottom: 3em;
342
343	figure {
344	margin: 0;
345	padding: 0;
346	}
347
348	.woocommerce-product-gallery__wrapper {
349	margin: 0;
350	padding: 0;
351	}
352
353	.zoomImg {
354	background-color: #fff;
355	opacity: 0;
356	}
357
358	.woocommerce-product-gallery__image--placeholder {
359	border: 1px solid #f2f2f2;
360	}
361
362	.woocommerce-product-gallery__image:nth-child(n + 2) {
363	width: 25%;
364	display: inline-block;
365	}
366
367	.woocommerce-product-gallery__image a {
368	display: block;
369	outline-offset: -1px;
370	}
371
372	.flex-control-thumbs {
373	li {
374	list-style: none;
375	cursor: pointer;
376	float: left;
377	}
378
379	img {
380	opacity: 0.5;
381
382	&:hover,
383	&.flex-active {
384	opacity: 1;
385	}
386	}
387	}
388
389	img {
390	display: block;
391	height: auto;
392	}
393	}
394
395	.woocommerce-product-gallery--columns-3 {
396	.flex-control-thumbs li {
397	width: 33.3333%;
398	}
399
400	.flex-control-thumbs li:nth-child(3n + 1) {
401	clear: left;
402	}
403	}
404
405	.woocommerce-product-gallery--columns-4 {
406	.flex-control-thumbs li {
407	width: 25%;
408	}
409
410	.flex-control-thumbs li:nth-child(4n + 1) {
411	clear: left;
412	}
413	}
414
415	.woocommerce-product-gallery--columns-5 {
416	.flex-control-thumbs li {
417	width: 20%;
418	}
419
420	.flex-control-thumbs li:nth-child(5n + 1) {
421	clear: left;
422	}
423	}
424
425	.woocommerce-product-gallery__trigger {
426	@include woocommerce-product-gallery__trigger;
427	}
428
429	.woocommerce-tabs {
430	margin-bottom: 2em;
431
432	li {
433	margin-right: 1em;
434
435	&.active {
436	a {
437	box-shadow: 0 3px 0 rgba(15, 15, 15, 1);
438	}
439	}
440	}
441
442	a {
443	@include link();
444	}
445
446	#comments {
447	padding-top: 0;
448	}
449
450	.comment-reply-title {
451	font-size: 22px;
452	font-size: 1.375rem;
453	font-weight: 300;
454	line-height: 1.4;
455	margin: 0 0 0.75em;
456	display: block;
457	}
458
459	#reviews {
460	li.review,
461	li.comment {
462	list-style: none;
463	margin-right: 0;
464	margin-bottom: 2.5em;
465
466	.avatar {
467	max-height: 36px;
468	width: auto;
469	float: right;
470	}
471
472	p.meta {
473	margin-bottom: 0.5em;
474	}
475	}
476
477	p.stars {
478	a {
479	position: relative;
480	height: 1em;
481	width: 1em;
482	text-indent: -999em;
483	display: inline-block;
484	text-decoration: none;
485	box-shadow: none;
486	font-size: 24px;
487
488	&::before {
489	display: block;
490	position: absolute;
491	top: 0;
492	left: 0;
493	width: 1em;
494	height: 1em;
495	line-height: 1;
496	font-family: WooCommerce;
497	content: "\e021";
498	text-indent: 0;
499	}
500
501	&:hover {
502	~ a::before {
503	content: "\e021";
504	}
505	}
506	}
507
508	&:hover {
509	a {
510	&::before {
511	content: "\e020";
512	}
513	}
514	}
515
516	&.selected {
517	a.active {
518	&::before {
519	content: "\e020";
520	}
521
522	~ a::before {
523	content: "\e021";
524	}
525	}
526
527	a:not(.active) {
528	&::before {
529	content: "\e020";
530	}
531	}
532	}
533	}
534	}
535	}
536
537	/**
538	* Widgets
539	*/
540	.widget .product_list_widget,
541	.site-footer .widget .product_list_widget {
542	margin-bottom: 1.5em;
543
544	a {
545	display: block;
546	box-shadow: none;
547
548	&:hover {
549	box-shadow: none;
550	}
551	}
552
553	li {
554	padding: 1.5em 0;
555
556	a.remove {
557	float: right;
558	margin-top: 2px;
559	}
560	}
561
562	img {
563	display: none;
564	}
565	}
566
567	.widget_shopping_cart {
568	.buttons {
569	a {
570	display: inline-block;
571	margin: 0 0.5em 0 0;
572	}
573	}
574	}
575
576	.widget_layered_nav {
577	.chosen {
578	&::before {
579	content: "×";
580	display: inline-block;
581	width: 16px;
582	height: 16px;
583	line-height: 16px;
584	font-size: 16px;
585	text-align: center;
586	border-radius: 100%;
587	border: 1px solid black;
588	margin-right: 0.25em;
589	}
590	}
591	}
592
593	.widget_price_filter {
594	.price_slider {
595	margin-bottom: 1em;
596	}
597
598	.price_slider_amount {
599	text-align: right;
600	line-height: 2.4;
601	font-size: 0.8751em;
602
603	.button {
604	float: left;
605	padding: 0.4em 1em;
606	}
607	}
608
609	.ui-slider {
610	position: relative;
611	text-align: left;
612	margin-left: 0.5em;
613	margin-right: 0.5em;
614	}
615
616	.ui-slider .ui-slider-handle {
617	position: absolute;
618	z-index: 2;
619	width: 1em;
620	height: 1em;
621	background-color: #000;
622	border-radius: 1em;
623	cursor: ew-resize;
624	outline: none;
625	top: -0.3em;
626	margin-left: -0.5em;
627	}
628
629	.ui-slider .ui-slider-range {
630	position: absolute;
631	z-index: 1;
632	font-size: 0.7em;
633	display: block;
634	border: 0;
635	border-radius: 1em;
636	background-color: #000;
637	}
638
639	.price_slider_wrapper .ui-widget-content {
640	border-radius: 1em;
641	background-color: #666;
642	border: 0;
643	}
644
645	.ui-slider-horizontal {
646	height: 0.5em;
647	}
648
649	.ui-slider-horizontal .ui-slider-range {
650	top: 0;
651	height: 100%;
652	}
653
654	.ui-slider-horizontal .ui-slider-range-min {
655	left: -1px;
656	}
657
658	.ui-slider-horizontal .ui-slider-range-max {
659	right: -1px;
660	}
661	}
662
663	.widget_rating_filter {
664	li {
665	text-align: right;
666
667	.star-rating {
668	float: left;
669	margin-top: 0.3em;
670	}
671	}
672	}
673
674	.widget_product_search {
675	form {
676	position: relative;
677	}
678
679	.search-field {
680	padding-right: 100px;
681	}
682
683	input[type="submit"]="submit""] {
684	position: absolute;
685	top: 0.5em;
686	right: 0.5em;
687	padding-left: 1em;
688	padding-right: 1em;
689	}
690	}
691
692	/**
693	* Account section
694	*/
695	.woocommerce-account {
696	.woocommerce-MyAccount-navigation {
697	float: right;
698	width: 25%;
699	border-top: 1px solid #ddd;
700
701	li {
702	list-style: none;
703	padding: 0.5em 0;
704	border-bottom: 1px solid #ddd;
705
706	a {
707	box-shadow: none;
708
709	&:hover {
710	box-shadow: 0 3px 0 rgba(15, 15, 15, 1);
711	}
712	}
713
714	&::before {
715	content: "→";
716	display: inline-block;
717	margin-right: 0.25em;
718	color: #ddd;
719	}
720
721	&.is-active {
722	a {
723	box-shadow: 0 3px 0 rgba(15, 15, 15, 1);
724	}
725	}
726	}
727	}
728
729	.woocommerce-MyAccount-content {
730	float: left;
731	}
732	}
733
734	/**
735	* Cart
736	*/
737	.woocommerce-cart-form {
738	td {
739	padding: 1em 0.5em;
740	}
741
742	img {
743	max-width: 42px;
744	height: auto;
745	display: block;
746	}
747
748	dl.variation {
749	margin-top: 0;
750
751	p,
752	&:last-child {
753	margin-bottom: 0;
754	}
755	}
756
757	.button {
758	padding: 1.2em 2em;
759	}
760
761	.actions {
762	.input-text {
763	width: 130px !important;
764	float: left;
765	margin-right: 0.25em;
766	}
767	}
768
769	.quantity {
770	input {
771	width: 4em;
772	}
773	}
774	}
775
776	.cart_totals {
777	th,
778	td {
779	vertical-align: top;
780	padding: 1em 0;
781	line-height: 1.5em;
782	}
783
784	th {
785	padding-right: 1em;
786	}
787
788	.woocommerce-shipping-destination {
789	margin-bottom: 0;
790	}
791	}
792
793	.shipping-calculator-button {
794	margin-top: 0.5em;
795	display: inline-block;
796	}
797
798	.shipping-calculator-form {
799	margin: 1em 0 0 0;
800	}
801
802	#shipping_method {
803	list-style: none;
804	margin: 0;
805
806	li {
807	margin-bottom: 0.5em;
808
809	input {
810	float: left;
811	margin-top: 0.17em;
812	}
813
814	label {
815	line-height: 1.5em;
816	}
817	}
818	}
819
820	.checkout-button {
821	display: block;
822	padding: 1em 2em;
823	border: 2px solid #000;
824	text-align: center;
825	font-weight: 800;
826	box-shadow: none !important;
827
828	&:hover {
829	box-shadow: none !important;
830	border-color: #999;
831	}
832
833	&::after {
834	content: "→";
835	}
836	}
837
838	/**
839	* Checkout
840	*/
841	#ship-to-different-address {
842	label {
843	font-weight: 300;
844	cursor: pointer;
845
846	span {
847	position: relative;
848	display: block;
849
850	&::before {
851	content: "";
852	display: block;
853	height: 16px;
854	width: 30px;
855	border: 2px solid #bbb;
856	background: #bbb;
857	border-radius: 13em;
858	box-sizing: content-box;
859	transition: all ease-in-out 0.3s;
860	position: absolute;
861	top: 4px;
862	right: 0;
863	}
864
865	&::after {
866	content: "";
867	display: block;
868	width: 14px;
869	height: 14px;
870	background: white;
871	position: absolute;
872	top: 7px;
873	right: 17px;
874	border-radius: 13em;
875	transition: all ease-in-out 0.3s;
876	}
877	}
878
879	input[type="checkbox"]="checkbox""] {
880	display: none;
881	}
882
883	input[type="checkbox"]="checkbox""]:checked + span::after {
884	right: 3px;
885	}
886
887	input[type="checkbox"]="checkbox""]:checked + span::before {
888	border-color: #000;
889	background: #000;
890	}
891	}
892	}
893
894	.woocommerce-no-js {
895	form.woocommerce-form-login,
896	form.woocommerce-form-coupon {
897	display: block !important;
898	}
899
900	.woocommerce-form-login-toggle,
901	.woocommerce-form-coupon-toggle,
902	.showcoupon {
903	display: none !important;
904	}
905	}
906
907	.woocommerce-terms-and-conditions {
908	border: 1px solid rgba(0, 0, 0, 0.2);
909	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
910	background: rgba(0, 0, 0, 0.05);
911	}
912
913	.woocommerce-terms-and-conditions-link {
914	display: inline-block;
915
916	&::after {
917	content: "";
918	display: inline-block;
919	border-style: solid;
920	margin-bottom: 2px;
921	margin-left: 0.25em;
922	border-width: 6px 6px 0 6px;
923	border-color: #111 transparent transparent transparent;
924	}
925
926	&.woocommerce-terms-and-conditions-link--open::after {
927	border-width: 0 6px 6px 6px;
928	border-color: transparent transparent #111 transparent;
929	}
930	}
931
932	.woocommerce-checkout {
933	.woocommerce-input-wrapper {
934	.description {
935	background: royalblue;
936	color: #fff;
937	border-radius: 3px;
938	padding: 1em;
939	margin: 0.5em 0 0;
940	clear: both;
941	display: none;
942	position: relative;
943
944	a {
945	color: #fff;
946	text-decoration: underline;
947	border: 0;
948	box-shadow: none;
949	}
950
951	&::before {
952	left: 50%;
953	top: 0%;
954	margin-top: -4px;
955	transform: translateX(-50%) rotate(180deg);
956	content: "";
957	position: absolute;
958	border-width: 4px 6px 0 6px;
959	border-style: solid;
960	border-color: royalblue transparent transparent transparent;
961	z-index: 100;
962	display: block;
963	}
964	}
965	}
966	}
967
968	.woocommerce-checkout-review-order-table {
969	td {
970	padding: 1em 0.5em;
971	}
972
973	dl.variation {
974	margin: 0;
975
976	p {
977	margin: 0;
978	}
979	}
980	}
981
982	.wc_payment_method {
983	list-style: none;
984	border-bottom: 1px solid #ddd;
985
986	.payment_box {
987	padding: 2em;
988	background: #eee;
989
990	ul,
991	ol {
992	&:last-of-type {
993	margin-bottom: 0;
994	}
995	}
996
997	fieldset {
998	padding: 1.5em;
999	padding-bottom: 0;
1000	border: 0;
1001	background: #f6f6f6;
1002	}
1003
1004	li {
1005	list-style: none;
1006	}
1007
1008	p:last-child {
1009	margin-bottom: 0;
1010	}
1011	}
1012
1013	> label:first-of-type {
1014	margin: 1em 0;
1015
1016	img {
1017	max-height: 24px;
1018	max-width: 200px;
1019	float: right;
1020	}
1021	}
1022
1023	label {
1024	cursor: pointer;
1025	}
1026
1027	input.input-radio[name="payment_method"]="payment_method""] {
1028	display: none;
1029
1030	& + label {
1031	&::before {
1032	content: "";
1033	display: inline-block;
1034	width: 16px;
1035	height: 16px;
1036	border: 2px solid white;
1037	box-shadow: 0 0 0 2px black;
1038	background: white;
1039	margin-left: 4px;
1040	margin-right: 0.5em;
1041	border-radius: 100%;
1042	transform: translateY(2px);
1043	}
1044	}
1045
1046	&:checked + label {
1047	&::before {
1048	background: black;
1049	}
1050	}
1051	}
1052	}
1053
1054	.colors-dark {
1055	.page-numbers {
1056	color: #444;
1057
1058	&.next,
1059	&.prev {
1060	color: #ddd;
1061	}
1062	}
1063
1064	.checkout-button {
1065	border: 2px solid #555;
1066
1067	&:hover {
1068	border-color: #fff;
1069	}
1070	}
1071
1072	.wc_payment_method {
1073	.payment_box {
1074	background: #333;
1075	}
1076	}
1077	}
1078
1079	/**
1080	* Layout stuff
1081	*/
1082	@media screen and (min-width: 48em) {
1083	.has-sidebar.woocommerce-page:not(.error404) {
1084	#primary {
1085	width: 74%;
1086	}
1087
1088	#secondary {
1089	width: 20%;
1090	}
1091	}
1092
1093	body.page-two-column.woocommerce-cart:not(.archive) #primary .entry-header,
1094	body.page-two-column.woocommerce-checkout:not(.archive)
1095	#primary
1096	.entry-header,
1097	body.page-two-column.woocommerce-account:not(.archive)
1098	#primary
1099	.entry-header {
1100	width: 16%;
1101	}
1102
1103	body.page-two-column.woocommerce-cart:not(.archive) #primary .entry-content,
1104	body.page-two-column.woocommerce-checkout:not(.archive)
1105	#primary
1106	.entry-content,
1107	body.page-two-column.woocommerce-account:not(.archive)
1108	#primary
1109	.entry-content {
1110	width: 78%;
1111	}
1112	}
1113
1114	.woocommerce-message,
1115	.woocommerce-error,
1116	.woocommerce-info {
1117	margin-bottom: 1.5em;
1118	padding: 2em;
1119	background: #eee;
1120	}
1121
1122	.woocommerce-message {
1123	background: teal;
1124	color: #fff;
1125	}
1126
1127	.woocommerce-error {
1128	background: firebrick;
1129	color: #fff;
1130	}
1131
1132	.woocommerce-info {
1133	background: royalblue;
1134	color: #fff;
1135	}
1136
1137	.woocommerce-message,
1138	.woocommerce-error,
1139	.woocommerce-info {
1140	a {
1141	@include link_white();
1142	}
1143	}
1144
1145	.woocommerce-store-notice {
1146	background: royalblue;
1147	color: #fff;
1148	padding: 1em;
1149	position: absolute;
1150	top: 0;
1151	left: 0;
1152	width: 100%;
1153	z-index: 999;
1154	}
1155
1156	.admin-bar .woocommerce-store-notice {
1157	top: 32px;
1158	}
1159
1160	.woocommerce-store-notice__dismiss-link {
1161	float: right;
1162	color: #fff;
1163
1164	&:hover {
1165	text-decoration: underline;
1166	color: #fff;
1167	}
1168	}
1169
1170	/**
1171	* Coupon error notice
1172	*/
1173	.woocommerce-cart {
1174	td.actions .coupon .coupon-error-notice {
1175	@include coupon-error-notice-cart();
1176	}
1177	}
1178
1179	form.checkout_coupon {
1180	.coupon-error-notice {
1181	@include coupon-error-notice-checkout();
1182	}
1183
1184	.input-text.has-error:focus {
1185	border-color: var(--wc-red);
1186	}
1187	}
1188
1189	/**
1190	* Checkout error message
1191	*/
1192	.woocommerce-checkout {
1193	form .form-row.woocommerce-invalid input.input-text {
1194	border-color: var(--wc-red);
1195	}
1196
1197	.checkout-inline-error-message {
1198	@include checkout-inline-error-message();
1199	}
1200	}
1201
1202	/**
1203	* Log in form
1204	*/
1205	.woocommerce-page {
1206	form {
1207	.password-input {
1208	input[type="text"]="text""] {
1209	padding-right: 2.5rem;
1210	}
1211	}
1212	}
1213	}
1214