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

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

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

_pickr.scss

267 lines

1	// Constants
2	$box-shadow-app: 0px 20px 60px rgba(0, 0, 0, 0.2), 0px 5px 30px rgba(0, 0, 0, 0.4);
3	$color-input-fields: #f8f8f8;
4
5	// Colors
6	$color-blue-hover: #4370f4;
7
8	$color-red-active: #f44250;
9	$color-red-hover: #db3d49;
10
11	$color-gray-light: #c4c4c4;
12	$color-gray-default: #808080;
13
14	$color-rainbow: linear-gradient(to bottom,
15	hsl(0, 100%, 50%),
16	hsl(60, 100%, 50%),
17	hsl(120, 100%, 50%),
18	hsl(180, 100%, 50%),
19	hsl(240, 100%, 50%),
20	hsl(300, 100%, 50%),
21	hsl(360, 100%, 50%));
22
23	// Box shadows
24	$box-shadow-small: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
25
26	// Border radius
27
28	// Inline SVG muster
29	$icon-transparency: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
30	$icon-x: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>');
31
32	@mixin pseudo-reset {
33	position: absolute;
34	content: '';
35	top: 0;
36	left: 0;
37	}
38
39	@mixin transparency-background {
40	&::before {
41	@include pseudo-reset;
42	width: 100%;
43	height: 100%;
44	background: $icon-transparency;
45	background-size: 0.5em;
46	border-radius: $border-radius;
47	z-index: -1;
48	}
49	}
50
51
52	.pickr {
53	position: relative;
54	overflow: visible;
55	}
56
57	.pickr .pcr-button {
58	position: relative;
59	height: 18px;
60	width: 18px;
61	border-radius: 9px;
62	cursor: pointer;
63	background: transparent;
64	transition: background-color 0.3s;
65	@include transparency-background;
66
67	&::after {
68	@include pseudo-reset;
69	height: 100%;
70	width: 100%;
71	background: $icon-x no-repeat center;
72	background-size: 70%;
73	opacity: 0;
74	}
75
76	&.clear::after {
77	opacity: 1;
78	}
79
80	&.disabled {
81	cursor: not-allowed;
82	}
83	}
84
85	.pcr-app {
86	z-index: 999;
87	position: absolute;
88	display: flex;
89	flex-direction: column;
90	box-shadow: $box-shadow-app;
91	top: 5px;
92	height: 15em;
93	width: 220px;
94	max-width: 220px;
95	padding: 15px;
96	border-radius: $border-radius;
97	background: #fff;
98	opacity: 0;
99	visibility: hidden;
100	transition: opacity 0.3s;
101
102	&.visible {
103	visibility: visible;
104	opacity: 1;
105	}
106	}
107
108	.pcr-app .pcr-interaction {
109	display: flex;
110	align-items: center;
111
112	> * {
113	}
114
115	input {
116	padding: 10px;
117	border: none;
118	outline: none;
119	font-size: $body-font-size-m;
120	text-align: center;
121	cursor: pointer;
122	color: $color-gray-light;
123	background: $color-input-fields;
124	border-radius: $border-radius;
125
126	&:hover {
127	color: $color-gray-default;
128	}
129	}
130
131	.pcr-result {
132	color: $color-gray-default;
133	text-align: left;
134	flex-grow: 1;
135	min-width: 1em;
136	transition: all 0.2s;
137	border-radius: $border-radius;
138	background: $color-input-fields;
139	cursor: text;
140	padding-left: 0.8em;
141
142	&:focus {
143	color: $brand-primary;
144	}
145
146	&::selection {
147	background: $brand-primary;
148	color: #fff;
149	}
150	}
151
152	.pcr-type.active {
153	color: #fff;
154	background: $brand-primary;
155	}
156
157	.pcr-clear,
158	.pcr-save {
159	color: #fff;
160	width: 100%;
161	}
162
163	.pcr-save {
164	background: $brand-primary;
165	display: none;
166
167	&:hover {
168	background: $color-blue-hover;
169	color: #fff;
170	}
171	}
172
173	.pcr-clear {
174	background: $color-red-active;
175
176	&:hover {
177	background: $color-red-hover;
178	color: #fff;
179	}
180	}
181	}
182
183	.pcr-app .pcr-selection {
184	display: flex;
185	justify-content: space-between;
186	flex-grow: 1;
187
188	.pcr-picker {
189	position: absolute;
190	height: 18px;
191	width: 18px;
192	border: 2px solid #fff;
193	border-radius: 100%;
194	user-select: none;
195	cursor: -moz-grab;
196	cursor: -webkit-grabbing;
197	}
198
199	.pcr-color-preview {
200	position: relative;
201	z-index: 1;
202	width: 2em;
203	display: flex;
204	flex-direction: column;
205	justify-content: space-between;
206	@include transparency-background;
207
208	.pcr-last-color {
209	cursor: pointer;
210	transition: background-color 0.3s;
211	border-radius: $border-radius $border-radius 0 0;
212	}
213
214	.pcr-current-color {
215	border-radius: 0 0 $border-radius $border-radius;
216	}
217
218	.pcr-last-color,
219	.pcr-current-color {
220	background: transparent;
221	width: 100%;
222	height: 50%;
223	}
224	}
225
226	.pcr-color-palette,
227	.pcr-color-chooser,
228	.pcr-color-opacity {
229	position: relative;
230	user-select: none;
231	}
232
233	.pcr-color-palette {
234	flex-grow: 0.9;
235	z-index: 1;
236
237	.pcr-palette {
238	height: 100%;
239	border-radius: $border-radius;
240	@include transparency-background;
241	}
242	}
243
244	.pcr-color-chooser,
245	.pcr-color-opacity {
246
247	.pcr-picker {
248	left: 50%;
249	transform: translateX(-50%);
250	}
251
252	.pcr-slider {
253	width: 12px;
254	height: 100%;
255	border-radius: $border-radius;
256	}
257	}
258
259	.pcr-color-chooser .pcr-slider {
260	background: $color-rainbow;
261	}
262
263	.pcr-color-opacity .pcr-slider {
264	background: linear-gradient(to bottom, transparent, black), $icon-transparency;
265	background-size: 100%, 50%;
266	}
267	}