_lightbox.scss — Appointment Booking Plugin – LatePoint | Calendar & Scheduling for WordPress 5.6.8

latepoint / lib / assets / stylesheets / admin / _lightbox.scss

latepoint / lib / assets / stylesheets / admin Last commit date

_lightbox.scss

185 lines

1	.latepoint-lightbox-w {
2	position: fixed;
3	top: 0px;
4	left: 0px;
5	bottom: 0px;
6	right: 0px;
7	transition: all 0.2s ease;
8	z-index: 10000;
9	display: none;
10	align-items: center;
11	justify-content: center;
12
13
14	.latepoint-lightbox-close {
15	position: absolute;
16	line-height: 1;
17	top: 16px;
18	right: 19px;
19	font-size: 20px;
20	color: #333;
21	text-decoration: none;
22	display: block;
23	outline: none;
24	box-shadow: none;
25	padding: 5px;
26	border-radius: $border-radius;
27	i {
28	display: block;
29	}
30	&:focus {
31	outline: none;
32	}
33	&:hover {
34	background-color: rgba(0,0,0,0.05);
35	color: #000;
36	}
37	}
38
39	.latepoint-lightbox-shadow {
40	background-color: rgba(79, 107, 156, 0.61);
41	position: absolute;
42	top: 0px;
43	left: 0px;
44	bottom: 0px;
45	right: 0px;
46	z-index: 1;
47	}
48
49	.latepoint-lightbox-i {
50	max-height: 94vh;
51	transform-origin: center center;
52	transition: all 0.3s cubic-bezier(0.25, 1.1, 0.5, 1);
53	background-color: #fff;
54	width: 450px;
55	box-shadow: 0px 20px 60px rgba(0,0,0, 0.2), 0px 5px 30px rgba(0,0,0,0.4);
56	border-radius: $lightbox-border-radius;
57	z-index: 2;
58	display: flex;
59	flex-direction: column;
60	.latepoint-lightbox-wrapper-form {
61	display: flex;
62	flex-direction: column;
63	max-height: 94vh;
64	}
65	> .os-form-w {
66	padding: 20px;
67	}
68
69	.latepoint-lightbox-inner-form {
70	display: flex;
71	flex-direction: column;
72	max-height: 94vh;
73	}
74	}
75
76	&.width-400 .latepoint-lightbox-i{ width: 400px; }
77	&.width-500 .latepoint-lightbox-i{ width: 500px; }
78	&.width-600 .latepoint-lightbox-i{ width: 600px; }
79	&.width-700 .latepoint-lightbox-i{ width: 700px; }
80	&.width-800 .latepoint-lightbox-i{ width: 800px; }
81	&.width-1000 .latepoint-lightbox-i{ width: 1000px; }
82	&.width-max .latepoint-lightbox-i{ width: 90%; }
83
84
85
86	.latepoint-lightbox-heading {
87	padding: 15px 30px;
88	border-bottom: 1px solid $border-color-lightest;
89
90	&.os-loading {
91	&:before {
92	@include loading-circle($brand-primary);
93	top: 10px;
94	left: 10px;
95	}
96	}
97
98	h2 {
99	color: $headings-color;
100	margin: 0px;
101	font-size: floor($headings-font-size * 1);
102	}
103	}
104
105	.latepoint-lightbox-content {
106	padding: 30px;
107	flex: 1;
108	overflow: auto;
109	font-size: $font-size-base;
110	&.no-padding {
111	padding: 0;
112	}
113	}
114
115	.latepoint-lightbox-footer {
116	padding: 15px 30px;
117	border-top: 1px solid $border-color-lightest;
118	.os-form-group {
119	margin-bottom: 0;
120	}
121	.latepoint-btn:not(:last-child) {
122	margin-right: 10px;
123	}
124	&.right-aligned {
125	display: flex;
126	align-items: center;
127	justify-content: flex-end;
128	}
129	}
130
131	.os-form-w {
132	margin: 0px;
133	form > .os-form-group:last-child {
134	margin-bottom: 0px;
135	}
136	}
137	}
138	body.latepoint-lightbox-active {
139	.latepoint-lightbox-w {
140	display: flex;
141	}
142	}
143
144
145	@keyframes floatingPopupAnimation {
146	0% { transform: translate3d(-50%, -85%, 0) scale(0.8); opacity: 0; }
147	100% { transform: translate3d(-50%, -100%, 0) scale(1); opacity: 1; }
148	}
149
150	.os-floating-popup {
151	position: absolute;
152	background-color: #fff;
153	box-shadow: 0px 30px 60px -15px rgba(0,0,0,0.25), 0px 4px 22px -10px rgba(0,0,0,0.40);
154	border-radius: $lightbox-border-radius;
155	z-index: 9999;
156	min-width: 400px;
157	min-height: 200px;
158	transform: translate3d(-50%, -100%, 0);
159	animation: 0.3s cubic-bezier(0.05, 0.45, 0.1, 1) 0s floatingPopupAnimation;
160	animation-fill-mode: both;
161	&.os-loading {
162	&:before {
163	@include loading-circle($brand-primary, 30px);
164	}
165	}
166
167	.os-floating-popup-close {
168	position: absolute;
169	top: 5px;
170	right: 5px;
171	font-size: 18px;
172	color: #333;
173	text-decoration: none;
174	display: block;
175	transition: all 0.6s ease;
176	outline: none;
177	box-shadow: none;
178	&:focus {
179	outline: none;
180	}
181	&:hover {
182	transform: rotate(90deg);
183	}
184	}
185	}