_mixins.scss — WooCommerce 10.9.4

woocommerce / assets / css / _mixins.scss

woocommerce / assets / css Last commit date

_mixins.scss

386 lines

1	/**
2	* Deprecated
3	* Fallback for bourbon equivalent
4	*/
5	@mixin clearfix() {
6	*zoom: 1;
7
8	&::before,
9	&::after {
10	content: " ";
11	display: table;
12	}
13
14	&::after {
15	clear: both;
16	}
17	}
18
19	/**
20	* Deprecated
21	* Vendor prefix no longer required.
22	*/
23	@mixin border_radius($radius: 4px) {
24	border-radius: $radius;
25	}
26
27	/**
28	* Deprecated
29	* Vendor prefix no longer required.
30	*/
31	@mixin border_radius_right($radius: 4px) {
32	border-top-right-radius: $radius;
33	border-bottom-right-radius: $radius;
34	}
35
36	/**
37	* Deprecated
38	* Vendor prefix no longer required.
39	*/
40	@mixin border_radius_left($radius: 4px) {
41	border-top-left-radius: $radius;
42	border-bottom-left-radius: $radius;
43	}
44
45	/**
46	* Deprecated
47	* Vendor prefix no longer required.
48	*/
49	@mixin border_radius_bottom($radius: 4px) {
50	border-bottom-left-radius: $radius;
51	border-bottom-right-radius: $radius;
52	}
53
54	/**
55	* Deprecated
56	* Vendor prefix no longer required.
57	*/
58	@mixin border_radius_top($radius: 4px) {
59	border-top-left-radius: $radius;
60	border-top-right-radius: $radius;
61	}
62
63	/**
64	* Deprecated
65	* Vendor prefix no longer required.
66	*/
67	@mixin opacity( $opacity: 0.75 ) {
68	opacity: $opacity;
69	}
70
71	/**
72	* Deprecated
73	* Vendor prefix no longer required.
74	*/
75	@mixin box_shadow($shadow_x: 3px, $shadow_y: 3px, $shadow_rad: 3px, $shadow_in: 3px, $shadow_color: #888) {
76	box-shadow: $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color;
77	}
78
79	/**
80	* Deprecated
81	* Vendor prefix no longer required.
82	*/
83	@mixin inset_box_shadow($shadow_x: 3px, $shadow_y: 3px, $shadow_rad: 3px, $shadow_in: 3px, $shadow_color: #888) {
84	box-shadow: inset $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color;
85	}
86
87	/**
88	* Deprecated
89	* Vendor prefix no longer required.
90	*/
91	@mixin text_shadow($shadow_x: 3px, $shadow_y: 3px, $shadow_rad: 3px, $shadow_color: #fff) {
92	text-shadow: $shadow_x $shadow_y $shadow_rad $shadow_color;
93	}
94
95	/**
96	* Deprecated
97	* Vendor prefix no longer required.
98	*/
99	@mixin vertical_gradient($from: #000, $to: #fff) {
100	background-color: $from;
101	background: -webkit-linear-gradient($from, $to);
102	}
103
104	/**
105	* Deprecated
106	* Vendor prefix no longer required.
107	*/
108	@mixin transition($selector: all, $animation: ease-in-out, $duration: 0.2s) {
109	transition: $selector $animation $duration;
110	}
111
112	/**
113	* Deprecated
114	* Use bourbon mixin instead `@include transform(scale(1.5));`
115	*/
116	@mixin scale($ratio: 1.5) {
117	-webkit-transform: scale($ratio);
118	transform: scale($ratio);
119	}
120
121	/**
122	* Deprecated
123	* Use bourbon mixin instead `@include box-sizing(border-box);`
124	*/
125	@mixin borderbox() {
126	box-sizing: border-box;
127	}
128
129	@mixin darkorlighttextshadow($a, $opacity: 0.8) {
130
131	@if lightness($a) >= 65% {
132
133	@include text_shadow(0, -1px, 0, rgba(0, 0, 0, $opacity));
134	}
135
136	@else {
137
138	@include text_shadow(0, 1px, 0, rgba(255, 255, 255, $opacity));
139	}
140	}
141
142	/**
143	* Objects
144	*/
145	@mixin menu() {
146
147	@include clearfix();
148
149	li {
150	display: inline-block;
151	}
152	}
153
154	@mixin mediaright() {
155
156	@include clearfix();
157
158	img {
159	float: right;
160	height: auto;
161	}
162	}
163
164	@mixin medialeft() {
165
166	@include clearfix();
167
168	img {
169	float: right;
170	height: auto;
171	}
172	}
173
174	@mixin ir() {
175	display: block;
176	text-indent: -9999px;
177	position: relative;
178	height: 1em;
179	width: 1em;
180	}
181
182	@mixin icon( $glyph: "\e001" ) {
183	font-family: "WooCommerce";
184	speak: never;
185	font-weight: normal;
186	font-variant: normal;
187	text-transform: none;
188	line-height: 1;
189	margin: 0;
190	text-indent: 0;
191	position: absolute;
192	top: 0;
193	left: 0;
194	width: 100%;
195	height: 100%;
196	text-align: center;
197	content: $glyph;
198	}
199
200	@mixin icon_dashicons( $glyph: "\f333" ) {
201	font-family: "Dashicons";
202	speak: never;
203	font-weight: normal;
204	font-variant: normal;
205	text-transform: none;
206	line-height: 1;
207	-webkit-font-smoothing: antialiased;
208	margin: 0;
209	text-indent: 0;
210	position: absolute;
211	top: 0;
212	left: 0;
213	width: 100%;
214	height: 100%;
215	text-align: center;
216	content: $glyph;
217	}
218
219	@mixin iconbefore( $glyph: "\e001" ) {
220	font-family: "WooCommerce";
221	speak: never;
222	font-weight: normal;
223	font-variant: normal;
224	text-transform: none;
225	line-height: 1;
226	-webkit-font-smoothing: antialiased;
227	margin-right: 0.618em;
228	content: $glyph;
229	text-decoration: none;
230	}
231
232	@mixin iconbeforedashicons( $glyph: "\f333" ) {
233	font-family: "Dashicons";
234	speak: never;
235	font-weight: normal;
236	font-variant: normal;
237	text-transform: none;
238	line-height: 1;
239	-webkit-font-smoothing: antialiased;
240	content: $glyph;
241	text-decoration: none;
242	}
243
244	@mixin iconafter( $glyph: "\e001" ) {
245	font-family: "WooCommerce";
246	speak: never;
247	font-weight: normal;
248	font-variant: normal;
249	text-transform: none;
250	line-height: 1;
251	-webkit-font-smoothing: antialiased;
252	margin-left: 0.618em;
253	content: $glyph;
254	text-decoration: none;
255	}
256
257	@mixin loader() {
258
259	&::before {
260	height: 1em;
261	width: 1em;
262	display: block;
263	position: absolute;
264	top: 50%;
265	left: 50%;
266	margin-left: -0.5em;
267	margin-top: -0.5em;
268	content: "";
269	animation: spin 1s ease-in-out infinite;
270	background: url("../images/icons/loader.svg") center center;
271	background-size: cover;
272	line-height: 1;
273	text-align: center;
274	font-size: 2em;
275	color: rgba(#000, 0.75);
276	}
277	}
278
279	@mixin inversebuttoncolors {
280	background-color: transparent !important;
281	color: var(--button--color-text-hover) !important;
282
283	&:hover {
284	background-color: var(--button--color-background) !important;
285	color: var(--button--color-text) !important;
286	text-decoration: none !important;
287	}
288	}
289
290	@mixin table-marks() {
291	mark {
292	background: transparent none;
293	}
294
295	mark.yes {
296	color: var(--wc-green);
297	}
298
299	mark.no {
300	color: var(--wc-secondary-text);
301	}
302	}
303
304	@mixin coupon-error-notice-cart() {
305	clear: left;
306	color: var(--wc-red);
307	flex-basis: 100%;
308	float: none;
309	font-size: 0.75em;
310	margin-bottom: 0;
311	margin-top: 8px;
312	text-align: left;
313	width: auto;
314	}
315
316	@mixin coupon-error-notice-checkout() {
317	color: var(--wc-red);
318	display: block;
319	font-size: 0.75em;
320	margin-top: 8px;
321	}
322
323	@mixin checkout-inline-error-message() {
324	color: var(--wc-red);
325	font-size: 0.75em;
326	line-height: 1.3;
327	margin-bottom: 0;
328	margin-top: 0.5em;
329	}
330
331	@mixin woocommerce-product-gallery__trigger {
332	background: #fff;
333	border: none;
334	box-sizing: content-box;
335	border-radius: 100%;
336	cursor: pointer;
337	font-size: 2em;
338	height: 36px;
339	padding: 0;
340	position: absolute;
341	right: 0.5em;
342	text-indent: -9999px;
343	top: 0.5em;
344	width: 36px;
345	z-index: 99;
346
347	&::before {
348	border: 2px solid #000;
349	border-radius: 100%;
350	box-sizing: content-box;
351	content: "";
352	display: block;
353	height: 10px;
354	left: 9px;
355	top: 9px;
356	position: absolute;
357	width: 10px;
358	}
359
360	&::after {
361	background: #000;
362	border-radius: 6px;
363	box-sizing: content-box;
364	content: "";
365	display: block;
366	height: 8px;
367	left: 22px;
368	position: absolute;
369	top: 19px;
370	transform: rotate(-45deg);
371	width: 2px;
372	}
373
374	& span[aria-hidden="true"]="true""] {
375	border: 0;
376	clip-path: inset(50%);
377	height: 1px;
378	left: 50%;
379	margin: -1px;
380	overflow: hidden;
381	position: absolute;
382	top: 50%;
383	width: 1px;
384	}
385	}
386