← All changes | assets/build/blocks/modal/style.css +27 -222 2.9.1 → 2.14.0 View file →

		@@ -1,242 +1,47 @@
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
	1	+.ablocks-modal-trigger-wrap .ablocks-modal-button{background-color:#1759d2;border:1px solid #1759d2;border-radius:5px;color:#fff;cursor:pointer;display:inline-flex;font-size:16px;padding:5px 15px;transition:.5s}.ablocks-modal-trigger-wrap .ablocks-modal-button:hover{background-color:#06307e;border-color:#06307e}.ablocks-block-modal---panel-wrap{background:rgba(0,0,0,.7);bottom:0;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity .5s,visibility .3s;visibility:hidden;z-index:99999}.ablocks-block--modal.ablocks-block-modal-position--left
34	2	.ablocks-block-modal---panel-wrap
35		- .ablocks-modal-popup-content-wrap,
36		-.ablocks-block--modal.ablocks-block-modal-position--right
	3	+ .ablocks-modal-popup-content-wrap,.ablocks-block--modal.ablocks-block-modal-position--right
37	4	.ablocks-block-modal---panel-wrap
38		- .ablocks-modal-popup-content-wrap,
39		-.ablocks-block--modal.ablocks-block-modal-position--left
	5	+ .ablocks-modal-popup-content-wrap,.ablocks-block--modal.ablocks-block-modal-position--top
40	6	.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
	7	+ .ablocks-modal-popup-content-wrap{min-height:100%;top:0;transform:none;width:400px}.ablocks-block--modal.ablocks-block-modal-position--left
49	8	.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
	9	+ .ablocks-modal-popup-content-wrap{left:-100%}.ablocks-block--modal.ablocks-block-modal-panel-visibility--open.ablocks-block-modal-position--left
54	10	.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
	11	+ .ablocks-modal-popup-content-wrap{left:0}.ablocks-block--modal.ablocks-block-modal-position--right
60	12	.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
	13	+ .ablocks-modal-popup-content-wrap{right:-100%}.ablocks-block--modal.ablocks-block-modal-panel-visibility--open.ablocks-block-modal-position--right
65	14	.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
	15	+ .ablocks-modal-popup-content-wrap{right:0}.ablocks-block--modal.ablocks-block-modal-position--right
71	16	.ablocks-block-modal---panel-wrap
72		- .ablocks-modal-popup-content-wrap,
73		-.ablocks-block--modal.ablocks-block-modal-position--right
	17	+ .ablocks-modal-popup-content-wrap,.ablocks-block--modal.ablocks-block-modal-position--top
74	18	.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
	19	+ .ablocks-modal-popup-content-wrap{left:unset}.ablocks-block--modal.ablocks-block-modal-position--right
80	20	.ablocks-block-modal---panel-wrap
81		- .ablocks-modal-popup-close,
82		-.ablocks-block--modal.ablocks-block-modal-position--right
	21	+ .ablocks-modal-popup-close,.ablocks-block--modal.ablocks-block-modal-position--top
83	22	.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
	23	+ .ablocks-modal-popup-close{left:-5px;transform:translateX(-100%)}.ablocks-block--modal.ablocks-block-modal-position--top
90	24	.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
	25	+ .ablocks-modal-popup-content-wrap{right:0;top:-100%}.ablocks-block--modal.ablocks-block-modal-panel-visibility--open.ablocks-block-modal-position--top
96	26	.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
	27	+ .ablocks-modal-popup-content-wrap{top:0}.ablocks-block--modal.ablocks-block-modal-position--block
	28	+ .ablocks-block-modal---panel-wrap{position:absolute;top:100%;width:600px;z-index:999999}.ablocks-block--modal.ablocks-block-modal-position--block
102	29	.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
	30	+ .ablocks-modal-popup-content-wrap{display:none;left:0;transform:none}.ablocks-block--modal.ablocks-block-modal-panel-visibility--open.ablocks-block-modal-position--block
116	31	.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
	32	+ .ablocks-modal-popup-content-wrap{display:block}.ablocks-block--modal.ablocks-block-modal-position--block
122	33	.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
	34	+ .ablocks-modal-popup-close{left:calc(100% + 5px);transform:none}.ablocks-block--modal.ablocks-block-modal-panel-direction--right.ablocks-block-modal-position--block
127	35	.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
	36	+ .ablocks-modal-popup-close{left:unset;right:calc(100% + 5px)}.ablocks-block--modal.ablocks-block-modal-panel-direction--left.ablocks-block-modal-position--block
	37	+ .ablocks-block-modal---panel-wrap{left:unset;right:100%}.ablocks-block--modal.ablocks-block-modal-panel-direction--right.ablocks-block-modal-position--block
	38	+ .ablocks-block-modal---panel-wrap{left:100%}.ablocks-block--modal.ablocks-block-modal-panel-direction--top.ablocks-block-modal-position--block
	39	+ .ablocks-block-modal---panel-wrap,.ablocks-block--modal.ablocks-block-modal-panel-direction--top.ablocks-block-modal-position--block
133	40	.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
	41	+ .ablocks-modal-popup-content-wrap{bottom:100%;top:unset}.ablocks-block--modal.ablocks-block-modal-panel-direction--bottom.ablocks-block-modal-position--block
140	42	.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
	43	+ .ablocks-modal-popup-content-wrap{bottom:unset;top:100%}.ablocks-block--modal.ablocks-block-modal-position--popup.ablocks-block-modal-panel-popup-on-top
160	44	.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		-}
	45	+ .ablocks-modal-popup-content-wrap{top:0;transform:translate(-50%)}.ablocks-modal-trigger-wrap{cursor:pointer}.ablocks-block--modal.ablocks-block-modal-panel-visibility--open
	46	+ .ablocks-block-modal---panel-wrap{opacity:1!important;visibility:visible!important}.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap{background-color:#fff;border:1px solid #ddd;box-sizing:border-box;display:flex;left:50%;max-width:92vw;min-height:400px;padding:40px 20px 20px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:1s;width:600px}.ablocks-block-modal---panel-wrap .ablocks-modal-popup--content{overflow:hidden;width:100%}.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close{align-items:center;background-color:#fff;border:1px solid #eee;border-radius:50%;cursor:pointer;display:flex;height:25px;justify-content:center;position:absolute;right:12px;top:12px;width:25px}.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close svg{fill:#aaa;height:12px;width:12px}.ablocks-block--modal.ablocks-block-modal-position--block
	47	+ .ablocks-block--modal-panel{position:static}