merchant / assets / sass / pagination.scss

pagination.scss in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 1.8, at assets/sass/pagination.scss

149 lines 2.9 KB

Raw Download Zip

1	/**
2	* Merchant Pagination
3	*
4	*/
5
6	/**
7	* Animations.
8	*
9	*/
10	.mrc-animated {
11	opacity: 0;
12	}
13
14	.mrc-anim-infinite {
15	animation-iteration-count: infinite;
16	}
17
18	.mrc-anim-fowards {
19	animation-fill-mode: forwards;
20	}
21
22	.mrc-anim-timing-linear {
23	animation-timing-function: linear;
24	}
25
26	.mrc-anim-duration-300ms {
27	animation-duration: 600ms;
28	}
29
30	// Rotate.
31	@keyframes rotateAnim {
32	from {
33	transform: rotate(0deg);
34	}
35	to {
36	transform: rotate(360deg);
37	}
38	}
39
40	.mrcPagRotateAnim {
41	animation: rotateAnim 1.5s linear infinite;
42	}
43
44	// Fade In Short.
45	@keyframes mrcPagFadeInShort {
46	0% {
47	opacity: 0;
48	transform: translate3d(0, 20px, 0);
49	}
50	100% {
51	opacity: 1;
52	transform: none;
53	}
54	}
55
56	.mrcPagFadeInShort {
57	animation-name: mrcPagFadeInShort;
58	}
59
60	// Default pagination.
61	.merchant-pagination {
62	ul {
63	border: none !important;
64
65	li {
66	border: none !important;
67	margin: 0 !important;
68	list-style: none !important;
69
70	& + li {
71	margin-left: 5px;
72	}
73
74	.page-numbers {
75	display: flex !important;
76	justify-content: center !important;
77	align-items: center !important;
78	width: 35px !important;
79	height: 35px !important;
80	text-decoration: none !important;
81
82	&.next,
83	&.prev {
84	&:before,
85	&:after {
86	content: none !important;
87	}
88	}
89	}
90	}
91	}
92	}
93
94	// Load More.
95	.merchant-pagination-load-more {
96	.navigation.pagination,
97	.woocommerce-pagination {
98	display: none;
99	}
100	}
101	.merchant-pagination-wrapper {
102	text-align: center;
103	margin-top: 60px;
104	}
105	.merchant-pagination-button {
106	position: relative;
107	display: inline-flex !important;
108	align-items: center;
109	.merchant-pagination-button__label {
110	display: inline-block;
111	font-size: 0.9em;
112	text-transform: uppercase;
113	letter-spacing: 1.5px;
114	transition: ease all 300ms;
115	}
116	.merchant-pagination-button__loader {
117	position: absolute;
118	top: 50%;
119	left: 50%;
120	transform: translate3d(-50%, -50%, 0);
121	}
122	svg {
123	opacity: 0;
124	animation-name: rotateAnim;
125	animation-duration: 1.5s;
126	animation-timing-function: linear;
127	animation-iteration-count: infinite;
128	transition: ease all 300ms;
129	}
130
131	&.loading,
132	&.loading-anim {
133	.merchant-pagination-button__label {
134	opacity: 0;
135	visibility: hidden;
136	}
137	svg {
138	display: block;
139	opacity: 0.7;
140	max-width: 17px;
141	}
142	}
143	&.loading-anim {
144	.merchant-pagination-button__label {
145	display: none;
146	}
147	}
148	}
149