ablocks / assets / build / blocks / coupon / style.css

style.css in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.9.1, at assets/build/blocks/coupon/style.css

127 lines 2.4 KB

Raw Download Zip

1	.ablocks-block--coupon{
2	display: flex !important;
3	}
4
5	.ablocks-coupon-clipboard{
6	min-width: 150px;
7	display: flex;
8	align-items: center;
9	justify-content: center;
10	gap: 4px;
11	}
12
13	.ablocks-coupon-code {
14	display: flex;
15	align-items: center;
16	min-width: 150px;
17	justify-content: center;
18	gap: 4px;
19	}
20
21
22	/* style 1 */
23	.ablocks-block--coupon > .ablocks-block-container{
24	display: flex;
25	width: fit-content;
26	}
27
28	.ablocks-block--coupon .ablocks-coupon-code {
29	border: 1px dashed #000;
30	padding: 10px;
31	min-width: 150px;
32	border-right: 0;
33	}
34
35	.ablocks-block--coupon .ablocks-coupon-clipboard {
36	min-width: 150px;
37	padding: 10px;
38	border: 1px dashed #000;
39	border-left: 0;
40	cursor: pointer;
41	}
42
43	/* style2 */
44	.ablocks-block---coupon-layout-two > .ablocks-block-container {
45	position: relative;
46	display: inline-block;
47	width: fit-content;
48	}
49
50	.ablocks-block---coupon-layout-two .ablocks-coupon-code {
51	display: inline-block;
52	border: 1px dashed #000;
53	min-width: 150px;
54	padding: 10px;
55	}
56
57	.ablocks-block---coupon-layout-two .ablocks-coupon-clipboard {
58	min-width: 150px;
59	position: absolute;
60	top: 0;
61	left: 0;
62	right: 0;
63	bottom: 0;
64	display: flex;
65	align-items: center;
66	justify-content: center;
67	cursor: pointer;
68	clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
69	overflow: hidden;
70	}
71
72	.ablocks-block---coupon-layout-two .ablocks-coupon-clipboard-text{
73	padding-right: 10px;
74	}
75
76
77	/* style 3 */
78	.ablocks-block---coupon-layout-three > .ablocks-block-container{
79	display: flex;
80	align-items: center;
81	cursor: pointer;
82	}
83
84	.ablocks-block---coupon-layout-three .ablocks-coupon-code {
85	padding: 10px;
86	border: 1px dashed #000;
87	min-width: 150px;
88	}
89
90
91	/* style 4 */
92	.ablocks-block---coupon-layout-four > .ablocks-block-container {
93	position: relative;
94	display: inline-block;
95	cursor: pointer;
96	}
97
98	.ablocks-block---coupon-layout-four .ablocks-coupon-code {
99	display: inline-block;
100	padding: 10px;
101	min-width: 150px;
102	border: 1px dashed #000;
103	text-align: center;
104	}
105
106	/* Button overlay */
107	.ablocks-block---coupon-layout-four .ablocks-coupon-clipboard {
108	position: absolute;
109	top: 0;
110	left: 0;
111	right: 0;
112	bottom: 0;
113	display: flex;
114	align-items: center;
115	justify-content: center;
116	width: 100%;
117	border: 0px solid #000;
118	cursor: pointer;
119	text-align: center;
120	transition: width 0.3s ease-in-out;
121	overflow: hidden;
122	padding: 0px;
123	}
124
125	.ablocks-coupon-code:hover .ablocks-coupon-clipboard {
126	width: 80%;
127	}