woocommerce-smallscreen.scss — WooCommerce 10.9.4

woocommerce / assets / css / woocommerce-smallscreen.scss

woocommerce / assets / css Last commit date

woocommerce-smallscreen.scss

281 lines

1	/**
2	* woocommerce-smallscreen.scss
3	* Optimises the default WooCommerce frontend layout when viewed on smaller screens.
4	*/
5
6	/**
7	* Imports
8	*/
9	@import 'mixins';
10	@import 'variables';
11
12	/**
13	* Style begins
14	*/
15	.woocommerce,
16	.woocommerce-page {
17
18	table.shop_table_responsive {
19	thead {
20	display: none;
21	}
22
23	tbody {
24	tr:first-child {
25	td:first-child {
26	border-top: 0;
27	}
28	}
29
30	th {
31	display: none;
32	}
33	}
34
35	tr {
36	display: block;
37
38	td {
39	display: block;
40	text-align: right !important; // Important to overwrite order status inline styling
41
42	&.order-actions {
43	text-align: left !important; // This must always align left on handheld
44	}
45
46	&::before {
47	content: attr(data-title) ': ';
48	font-weight: 700;
49	float: left;
50	}
51
52	&.product-remove,
53	&.actions {
54	&::before {
55	display: none;
56	}
57	}
58	}
59
60	&:nth-child( 2n ) {
61	td {
62	background-color: rgba(0, 0, 0, 0.025);
63	}
64	}
65	}
66	}
67
68	table.my_account_orders {
69	tr {
70	td {
71	&.order-actions {
72	text-align: left;
73
74	&::before {
75	display: none;
76	}
77
78	.button {
79	float: none;
80	margin: 0.125em 0.25em 0.125em 0;
81	}
82	}
83	}
84	}
85	}
86
87	/**
88	* Product attributes table
89	*/
90	table.shop_attributes {
91	tr {
92	display: block;
93
94	th,
95	td {
96	display: block;
97	max-width: 100%;
98	width: auto;
99	text-align: left;
100	padding: 0.5em;
101	}
102
103	th {
104	padding-bottom: 0.25em;
105	border-bottom: 0;
106	}
107
108	td {
109	padding-top: 0.25em;
110	}
111
112	th > :first-child,
113	td > :first-child {
114	padding-top: 0;
115	margin-top: 0;
116	}
117
118	th > :last-child,
119	td > :last-child {
120	padding-bottom: 0;
121	margin-bottom: 0;
122	}
123	}
124	}
125
126	/**
127	* General layout
128	*/
129	.col2-set {
130	.col-1,
131	.col-2 {
132	float: none;
133	width: 100%;
134	}
135	}
136
137	/**
138	* Products
139	*/
140	ul.products[class='columns-']='columns-'] {
141	li.product {
142	width: 48%;
143	float: left;
144	clear: both;
145	margin: 0 0 2.992em;
146
147	&:nth-child( 2n ) {
148	float: right;
149	clear: none !important; // This should never clear.
150	}
151	}
152	}
153
154	/**
155	* Product Details
156	*/
157	div.product,
158	#content div.product {
159	div.images,
160	div.summary {
161	float: none;
162	width: 100%;
163	}
164	}
165
166	/**
167	* Cart
168	*/
169	table.cart,
170	#content table.cart {
171	.product-thumbnail {
172	display: none;
173	}
174
175	td.actions {
176	text-align: left;
177
178	.coupon {
179	float: none;
180	@include clearfix();
181	padding-bottom: 0.5em;
182
183	input,
184	.button,
185	.input-text {
186	width: 48%;
187	box-sizing: border-box;
188	}
189
190	.input-text + .button,
191	.button.alt {
192	float: right;
193	}
194
195	.coupon-error-notice {
196	clear: left;
197	color: var(--wc-red);
198	float: left;
199	font-size: 0.75em;
200	margin-bottom: 0;
201	text-align: left;
202	width: 48%;
203	}
204	}
205
206	.button {
207	display: block;
208	width: 100%;
209	}
210	}
211	}
212
213	.cart-collaterals {
214	.cart_totals,
215	.shipping_calculator,
216	.cross-sells {
217	width: 100%;
218	float: none;
219	text-align: left;
220	}
221	}
222
223	/**
224	* Checkout
225	*/
226	&.woocommerce-checkout {
227	form.login {
228	.form-row {
229	width: 100%;
230	float: none;
231	}
232	}
233	}
234
235	#payment {
236	.terms {
237	text-align: left;
238	padding: 0;
239	}
240
241	#place_order {
242	float: none;
243	width: 100%;
244	box-sizing: border-box;
245	margin-bottom: 1em;
246	}
247	}
248
249	/**
250	* Account
251	*/
252	.lost_reset_password {
253	.form-row-first,
254	.form-row-last {
255	width: 100%;
256	float: none;
257	margin-right: 0;
258	}
259	}
260	}
261
262	.woocommerce-account {
263	.woocommerce-MyAccount-navigation,
264	.woocommerce-MyAccount-content {
265	float: none;
266	width: 100%;
267	}
268	}
269
270	/**
271	* Twenty Thirteen specific styles
272	*/
273	.single-product {
274	.twentythirteen {
275	.panel {
276	padding-left: 20px !important;
277	padding-right: 20px !important;
278	}
279	}
280	}
281