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

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

243 lines 6.0 KB

Raw Download Zip

1	.ablocks-modal-trigger-wrap .ablocks-modal-button {
2	display: inline-flex;
3	color: #fff;
4	font-size: 16px;
5	padding: 5px 15px;
6	background-color: rgb(23, 89, 210);
7	border: 1px solid rgb(23, 89, 210);
8	border-radius: 5px;
9	cursor: pointer;
10	transition: 0.5s;
11	}
12
13	.ablocks-modal-trigger-wrap .ablocks-modal-button:hover {
14	background-color: rgb(6, 48, 126);
15	border-color: rgb(6, 48, 126);
16	}
17
18	.ablocks-block-modal---panel-wrap {
19	visibility: hidden;
20	opacity: 0;
21	position: fixed;
22	top: 0;
23	bottom: 0;
24	left: 0;
25	right: 0;
26	z-index: 99999;
27	background: rgba(0, 0, 0, 0.7);
28	transition:
29	opacity 500ms,
30	visibility 300ms;
31	}
32
33	.ablocks-block--modal.ablocks-block-modal-position--top
34	.ablocks-block-modal---panel-wrap
35	.ablocks-modal-popup-content-wrap,
36	.ablocks-block--modal.ablocks-block-modal-position--right
37	.ablocks-block-modal---panel-wrap
38	.ablocks-modal-popup-content-wrap,
39	.ablocks-block--modal.ablocks-block-modal-position--left
40	.ablocks-block-modal---panel-wrap
41	.ablocks-modal-popup-content-wrap {
42	min-height: 100%;
43	width: 400px;
44	top: 0;
45	transform: none;
46	}
47
48	.ablocks-block--modal.ablocks-block-modal-position--left
49	.ablocks-block-modal---panel-wrap
50	.ablocks-modal-popup-content-wrap {
51	left: -100%;
52	}
53	.ablocks-block--modal.ablocks-block-modal-panel-visibility--open.ablocks-block-modal-position--left
54	.ablocks-block-modal---panel-wrap
55	.ablocks-modal-popup-content-wrap {
56	left: 0;
57	}
58
59	.ablocks-block--modal.ablocks-block-modal-position--right
60	.ablocks-block-modal---panel-wrap
61	.ablocks-modal-popup-content-wrap {
62	right: -100%;
63	}
64	.ablocks-block--modal.ablocks-block-modal-panel-visibility--open.ablocks-block-modal-position--right
65	.ablocks-block-modal---panel-wrap
66	.ablocks-modal-popup-content-wrap {
67	right: 0;
68	}
69
70	.ablocks-block--modal.ablocks-block-modal-position--top
71	.ablocks-block-modal---panel-wrap
72	.ablocks-modal-popup-content-wrap,
73	.ablocks-block--modal.ablocks-block-modal-position--right
74	.ablocks-block-modal---panel-wrap
75	.ablocks-modal-popup-content-wrap {
76	left: unset;
77	}
78
79	.ablocks-block--modal.ablocks-block-modal-position--top
80	.ablocks-block-modal---panel-wrap
81	.ablocks-modal-popup-close,
82	.ablocks-block--modal.ablocks-block-modal-position--right
83	.ablocks-block-modal---panel-wrap
84	.ablocks-modal-popup-close {
85	left: -5px;
86	transform: translateX(-100%);
87	}
88
89	.ablocks-block--modal.ablocks-block-modal-position--top
90	.ablocks-block-modal---panel-wrap
91	.ablocks-modal-popup-content-wrap {
92	right: 0;
93	}
94
95	.ablocks-block--modal.ablocks-block-modal-position--top
96	.ablocks-block-modal---panel-wrap
97	.ablocks-modal-popup-content-wrap {
98	top: -100%;
99	}
100
101	.ablocks-block--modal.ablocks-block-modal-panel-visibility--open.ablocks-block-modal-position--top
102	.ablocks-block-modal---panel-wrap
103	.ablocks-modal-popup-content-wrap {
104	top: 0;
105	}
106
107	.ablocks-block--modal.ablocks-block-modal-position--block
108	.ablocks-block-modal---panel-wrap {
109	width: 600px;
110	position: absolute;
111	z-index: 999999;
112	top: 100%;
113	}
114
115	.ablocks-block--modal.ablocks-block-modal-position--block
116	.ablocks-block-modal---panel-wrap
117	.ablocks-modal-popup-content-wrap {
118	left: 0;
119	transform: none;
120	}
121	.ablocks-block--modal.ablocks-block-modal-position--block
122	.ablocks-block-modal---panel-wrap
123	.ablocks-modal-popup-content-wrap {
124	display: none;
125	}
126	.ablocks-block--modal.ablocks-block-modal-panel-visibility--open.ablocks-block-modal-position--block
127	.ablocks-block-modal---panel-wrap
128	.ablocks-modal-popup-content-wrap {
129	display: block;
130	}
131
132	.ablocks-block--modal.ablocks-block-modal-position--block
133	.ablocks-block-modal---panel-wrap
134	.ablocks-modal-popup-close {
135	left: calc(100% + 5px);
136	transform: none;
137	}
138
139	.ablocks-block--modal.ablocks-block-modal-panel-direction--right.ablocks-block-modal-position--block
140	.ablocks-block-modal---panel-wrap
141	.ablocks-modal-popup-close {
142	left: unset;
143	right: calc(100% + 5px);
144	}
145
146	.ablocks-block--modal.ablocks-block-modal-panel-direction--left.ablocks-block-modal-position--block
147	.ablocks-block-modal---panel-wrap {
148	left: unset;
149	right: 100%;
150	}
151
152	.ablocks-block--modal.ablocks-block-modal-panel-direction--right.ablocks-block-modal-position--block
153	.ablocks-block-modal---panel-wrap {
154	left: 100%;
155	}
156
157	.ablocks-block--modal.ablocks-block-modal-panel-direction--top.ablocks-block-modal-position--block
158	.ablocks-block-modal---panel-wrap,
159	.ablocks-block--modal.ablocks-block-modal-panel-direction--top.ablocks-block-modal-position--block
160	.ablocks-block-modal---panel-wrap
161	.ablocks-modal-popup-content-wrap {
162	top: unset;
163	bottom: 100%;
164	}
165
166	.ablocks-block--modal.ablocks-block-modal-panel-direction--bottom.ablocks-block-modal-position--block
167	.ablocks-block-modal---panel-wrap
168	.ablocks-modal-popup-content-wrap {
169	top: 100%;
170	bottom: unset;
171	}
172
173	.ablocks-block--modal.ablocks-block-modal-position--popup
174	.ablocks-block-modal---panel-wrap
175	.ablocks-modal-popup-content-wrap {
176	/* */
177	}
178
179	.ablocks-block--modal.ablocks-block-modal-position--popup.ablocks-block-modal-panel-popup-on-top
180	.ablocks-block-modal---panel-wrap
181	.ablocks-modal-popup-content-wrap {
182	top: 0;
183	transform: translate(-50%, 0);
184	}
185
186	.ablocks-modal-trigger-wrap {
187	cursor: pointer;
188	}
189
190	.ablocks-block--modal.ablocks-block-modal-panel-visibility--open
191	.ablocks-block-modal---panel-wrap {
192	visibility: visible;
193	opacity: 1;
194	}
195
196	.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap {
197	display: flex;
198	box-sizing: border-box;
199	width: 600px;
200	max-width: 92vw;
201	padding: 20px;
202	padding-top: 40px;
203	min-height: 400px;
204	background-color: #fff;
205	border: 1px solid #ddd;
206	position: absolute;
207	top: 50%;
208	left: 50%;
209	transform: translate(-50%, -50%);
210	transition: 1s;
211	}
212
213	.ablocks-block-modal---panel-wrap .ablocks-modal-popup--content {
214	overflow: hidden;
215	width: 100%;
216	}
217
218	.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close {
219	position: absolute;
220	height: 25px;
221	width: 25px;
222	border-radius: 50%;
223	top: 12px;
224	right: 12px;
225	border: 1px solid #eee;
226	background-color: #fff;
227	display: flex;
228	justify-content: center;
229	align-items: center;
230	cursor: pointer;
231	}
232
233	.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close svg {
234	fill: #aaa;
235	width: 12px;
236	height: 12px;
237	}
238
239	.ablocks-block--modal.ablocks-block-modal-position--block
240	.ablocks-block--modal-panel {
241	position: static;
242	}
243