_mixins.scss — Appointment Booking Plugin – LatePoint | Calendar & Scheduling for WordPress 5.6.3

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

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

_mixins.scss

549 lines

1	@mixin remove-block-x(){
2	position: absolute;
3	right: 1px;
4	top: 1px;
5	transform: translate(50%, -50%);
6	font-size: 16px;
7	color: #fff;
8	background-color: #eb3a3a;
9	border: 3px solid #fff;
10	text-decoration: none;
11	padding: 0px 2px;
12	line-height: 26px;
13	width: 26px;
14	height: 26px;
15	border-radius: 50%;
16	text-align: center;
17	display: none;
18	z-index: 3;
19	opacity: 1;
20	&:hover {
21	background-color: #af0000;
22	}
23	i {
24	vertical-align: middle;
25	line-height: 20px;
26	display: block;
27	}
28	&.os-loading {
29	&:after {
30	display: block;
31	content: "";
32	width: 19px;
33	height: 19px;
34	border-bottom: 2px solid #dc5858;
35	border-left: 2px solid #dc5858;
36	border-top: 2px solid #dc5858;
37	border-right: 2px solid rgba(255,255,255,0);
38	border-radius: 20px;
39	position: absolute;
40	top: 50%;
41	left: 50%;
42	transform: translate(-50%, -50%);
43	animation: os-loading 700ms infinite linear;
44	}
45	i {
46	color: transparent;
47	}
48	}
49	}
50
51	@mixin tooltip(){
52	display: none;
53	position: absolute;
54	bottom: 50%;
55	left: 50%;
56	background-color: #111;
57	color: #fff;
58	font-size: floor($font-size-base * 1);
59	font-weight: $body-font-weight-bold;
60	padding: 10px 15px;
61	z-index: 9999;
62	white-space: nowrap;
63	border-radius: $tooltip-border-radius;
64	animation: 0.2s cubic-bezier(.45,1.1,.4,1) 0s toolTipOpen;
65	animation-fill-mode: both;
66	line-height: 1;
67	}
68
69	@mixin latepointfont_admin($content:""){
70	font-family: 'latepointIconsAdmin' !important;
71	speak: none;
72	font-style: normal;
73	font-weight: normal;
74	font-variant: normal;
75	text-transform: none;
76	line-height: 1;
77	-webkit-font-smoothing: antialiased;
78	-moz-osx-font-smoothing: grayscale;
79	content: $content;
80	}
81
82
83	@mixin font-headers(){
84	font-family: $headings-font-family;
85	font-weight: $headings-font-weight-normal;
86	}
87
88
89	@mixin white-box(){
90	background-color: #fff;
91	border-radius: $border-radius-lg;
92	border: 1px solid #d3d5daab;
93
94	background-image: linear-gradient(129deg, #b3b8cc0d, #ffffff5c);
95	box-shadow: 0 0 30px -10px rgba(0, 0, 0,0.01), 1px 1px 5px -1px rgba(134,124, 171, 0.12), inset 2px 2px 0 0 #fff;
96	//border: 1px solid rgba(255,255,255,0.4);
97	}
98
99	@mixin white-box-stack(){
100	background-color: #fff;
101	border-radius: $border-radius-lg;
102
103	border: 1px solid #d3d5daab;
104
105	background-image: linear-gradient(129deg, #b3b8cc0d, #ffffff5c);
106	box-shadow: 0 0 30px -10px rgba(0, 0, 0,0.01), 1px 1px 5px -1px rgba(134,124, 171, 0.12), inset 2px 2px 0 0 #fff;
107	}
108
109	@mixin loading-circle($color: #fff, $width: 14px){
110	display: block;
111	content: "";
112	width: $width!important;
113	height: $width!important;
114	border-bottom: 2px solid $color;
115	border-left: 2px solid $color;
116	border-top: 2px solid $color;
117	border-right: 2px solid rgba(255,255,255,0);
118	border-radius: 50%;
119	position: absolute;
120	top: 50%;
121	left: 50%;
122	transform: translate(-50%, -50%);
123	animation: os-loading 700ms infinite linear;
124	background-color: transparent!important;
125	z-index: 999;
126	}
127
128
129	@mixin minutes-label(){
130	padding: 6px 8px;
131	line-height: 1;
132	background-color: #fff;
133	color: #1d2023;
134	font-size: $body-font-size-xs;
135	font-weight: $body-font-weight-bold;
136	white-space: nowrap;
137	border: 1px solid #000;
138	border-radius: $border-radius-sm;
139	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), 0px 2px 6px rgba(0,0,0,0.1);
140	}
141
142	@mixin minutes-label-not-available(){
143	background-color: #f04739;
144	color: #fff;
145	border-color: #c51809 !important;
146	}
147
148	@mixin avatar($size: 30px){
149	background-size: cover;
150	background-position: center center;
151	width: $size;
152	height: $size;
153	display: block;
154	border-radius: 50%;
155	}
156
157
158	@mixin logo($size: 20px, $color: $brand-primary){
159	$move_y: $size + calc($size/2);
160	$move_x: - calc($size / 2);
161	display: block;
162	width: $size;
163	height: $size;
164	background-color: $color;
165	content: "";
166	box-shadow: $size $size 0px $color, 0px $size 0px $color, $move_y $move_x 0px $color;
167	margin-bottom: $size;
168	margin-right: $size;
169	}
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189	// Bootstrap functions
190	//
191	// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
192
193	// Ascending
194	// Used to evaluate Sass maps like our grid breakpoints.
195	@mixin _assert-ascending($map, $map-name) {
196	$prev-key: null;
197	$prev-num: null;
198	@each $key, $num in $map {
199	@if $prev-num == null {
200	// Do nothing
201	} @else if not comparable($prev-num, $num) {
202	@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
203	} @else if $prev-num >= $num {
204	@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
205	}
206	$prev-key: $key;
207	$prev-num: $num;
208	}
209	}
210
211	// Starts at zero
212	// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
213	@mixin _assert-starts-at-zero($map) {
214	$values: map-values($map);
215	$first-value: nth($values, 1);
216	@if $first-value != 0 {
217	@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
218	}
219	}
220
221	// Replace `$search` with `$replace` in `$string`
222	// Used on our SVG icon backgrounds for custom forms.
223	//
224	// @author Hugo Giraudel
225	// @param {String} $string - Initial string
226	// @param {String} $search - Substring to replace
227	// @param {String} $replace ('') - New value
228	// @return {String} - Updated string
229	@function str-replace($string, $search, $replace: "") {
230	$index: str-index($string, $search);
231
232	@if $index {
233	@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
234	}
235
236	@return $string;
237	}
238
239	// Color contrast
240	@function color-yiq($color) {
241	$r: red($color);
242	$g: green($color);
243	$b: blue($color);
244
245	$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
246
247	@if ($yiq >= 150) {
248	@return #111;
249	} @else {
250	@return #fff;
251	}
252	}
253
254	// Retreive color Sass maps
255	@function color($key: "blue") {
256	@return map-get($colors, $key);
257	}
258
259	@function theme-color($key: "primary") {
260	@return map-get($theme-colors, $key);
261	}
262
263	@function gray($key: "100") {
264	@return map-get($grays, $key);
265	}
266
267	// Request a theme color level
268	@function theme-color-level($color-name: "primary", $level: 0) {
269	$color: theme-color($color-name);
270	$color-base: if($level > 0, #000, #fff);
271	$level: abs($level);
272
273	@return mix($color-base, $color, $level * $theme-color-interval);
274	}
275
276
277
278
279
280	// Framework grid generation
281	//
282	// Used only by Bootstrap to generate the correct number of grid classes given
283	// any value of `$grid-columns`.
284
285	@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
286	// Common properties for all breakpoints
287	%grid-column {
288	position: relative;
289	width: 100%;
290	min-height: 1px; // Prevent columns from collapsing when empty
291	padding-right: calc($gutter / 2);
292	padding-left: calc($gutter / 2);
293	}
294
295	@each $breakpoint in map-keys($breakpoints) {
296	$infix: breakpoint-infix($breakpoint, $breakpoints);
297
298	// Allow columns to stretch full width below their breakpoints
299	@for $i from 1 through $columns {
300	.os-col#{$infix}-#{$i} {
301	@extend %grid-column;
302	}
303	}
304	.os-col#{$infix},
305	.os-col#{$infix}-auto {
306	@extend %grid-column;
307	}
308
309	@include media-breakpoint-up($breakpoint, $breakpoints) {
310	// Provide basic `.os-col-{bp}` classes for equal-width flexbox columns
311	.os-col#{$infix} {
312	flex-basis: 0;
313	flex-grow: 1;
314	max-width: 100%;
315	}
316	.os-col#{$infix}-auto {
317	flex: 0 0 auto;
318	width: auto;
319	max-width: none; // Reset earlier grid tiers
320	}
321
322	@for $i from 1 through $columns {
323	.os-col#{$infix}-#{$i} {
324	@include make-col($i, $columns);
325	}
326	}
327
328	.order#{$infix}-first {
329	order: -1;
330	}
331
332	@for $i from 1 through $columns {
333	.order#{$infix}-#{$i} {
334	order: $i;
335	}
336	}
337
338	// `$columns - 1` because offsetting by the width of an entire row isn't possible
339	@for $i from 0 through ($columns - 1) {
340	@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
341	.offset#{$infix}-#{$i} {
342	@include make-col-offset($i, $columns);
343	}
344	}
345	}
346	}
347	}
348	}
349
350	/// Grid system
351	//
352	// Generate semantic grid columns with these mixins.
353
354	@mixin make-container() {
355	width: 100%;
356	padding-right: calc($grid-gutter-width / 2);
357	padding-left: calc($grid-gutter-width / 2);
358	margin-right: auto;
359	margin-left: auto;
360	}
361
362
363	// For each breakpoint, define the maximum width of the container in a media query
364	@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
365	@each $breakpoint, $container-max-width in $max-widths {
366	@include media-breakpoint-up($breakpoint, $breakpoints) {
367	max-width: $container-max-width;
368	}
369	}
370	}
371
372	@mixin make-row() {
373	display: flex;
374	flex-wrap: wrap;
375	margin-right: calc($grid-gutter-width / -2);
376	margin-left: calc($grid-gutter-width / -2);
377	}
378
379	@mixin make-col-ready() {
380	position: relative;
381	// Prevent columns from becoming too narrow when at smaller grid tiers by
382	// always setting `width: 100%;`. This works because we use `flex` values
383	// later on to override this initial width.
384	width: 100%;
385	min-height: 1px; // Prevent collapsing
386	padding-right: calc($grid-gutter-width / 2);
387	padding-left: calc($grid-gutter-width / 2);
388	}
389
390	@mixin make-col($size, $columns: $grid-columns) {
391	flex: 0 0 percentage(calc($size / $columns));
392	// Add a `max-width` to ensure content within each column does not blow out
393	// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
394	// do not appear to require this.
395	max-width: percentage(calc($size / $columns));
396	}
397
398	@mixin make-col-offset($size, $columns: $grid-columns) {
399	$num: calc($size / $columns);
400	margin-left: if($num == 0, 0, percentage($num));
401	}
402
403
404	@mixin clearfix() {
405	&::after {
406	display: block;
407	clear: both;
408	content: "";
409	}
410	}
411
412
413
414	// Breakpoint viewport sizes and media queries.
415	//
416	// Breakpoints are defined as a map of (name: minimum width), order from small to large:
417	//
418	// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
419	//
420	// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
421
422	// Name of the next breakpoint, or null for the last breakpoint.
423	//
424	// >> breakpoint-next(sm)
425	// md
426	// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
427	// md
428	// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
429	// md
430	@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
431	$n: index($breakpoint-names, $name);
432	@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
433	}
434
435	// Minimum breakpoint width. Null for the smallest (first) breakpoint.
436	//
437	// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
438	// 576px
439	@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
440	$min: map-get($breakpoints, $name);
441	@return if($min != 0, $min, null);
442	}
443
444	// Maximum breakpoint width. Null for the largest (last) breakpoint.
445	// The maximum value is calculated as the minimum of the next one less 0.1.
446	//
447	// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
448	// 767px
449	@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
450	$next: breakpoint-next($name, $breakpoints);
451	@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
452	}
453
454	// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
455	// Useful for making responsive utilities.
456	//
457	// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
458	// "" (Returns a blank string)
459	// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
460	// "-sm"
461	@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
462	@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
463	}
464
465	// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
466	// Makes the @content apply to the given breakpoint and wider.
467	@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
468	$min: breakpoint-min($name, $breakpoints);
469	@if $min {
470	@media (min-width: $min) {
471	@content;
472	}
473	} @else {
474	@content;
475	}
476	}
477
478	// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
479	// Makes the @content apply to the given breakpoint and narrower.
480	@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
481	$max: breakpoint-max($name, $breakpoints);
482	@if $max {
483	@media (max-width: $max) {
484	@content;
485	}
486	} @else {
487	@content;
488	}
489	}
490
491	// Media that spans multiple breakpoint widths.
492	// Makes the @content apply between the min and max breakpoints
493	@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
494	$min: breakpoint-min($lower, $breakpoints);
495	$max: breakpoint-max($upper, $breakpoints);
496
497	@if $min != null and $max != null {
498	@media (min-width: $min) and (max-width: $max) {
499	@content;
500	}
501	} @else if $max == null {
502	@include media-breakpoint-up($lower) {
503	@content;
504	}
505	} @else if $min == null {
506	@include media-breakpoint-down($upper) {
507	@content;
508	}
509	}
510	}
511
512	// Media between the breakpoint's minimum and maximum widths.
513	// No minimum for the smallest breakpoint, and no maximum for the largest one.
514	// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
515	@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
516	$min: breakpoint-min($name, $breakpoints);
517	$max: breakpoint-max($name, $breakpoints);
518
519	@if $min != null and $max != null {
520	@media (min-width: $min) and (max-width: $max) {
521	@content;
522	}
523	} @else if $max == null {
524	@include media-breakpoint-up($name) {
525	@content;
526	}
527	} @else if $min == null {
528	@include media-breakpoint-down($name) {
529	@content;
530	}
531	}
532	}
533
534	@mixin slot-tooltip-info(){
535	position: absolute;
536	top: 0px;
537	left: 50%;
538	transform: translate3d(-50%, -100%, 0);
539	background-color: #111;
540	padding: 4px 6px;
541	color: #fff;
542	font-weight: $body-font-weight-bold;
543	display: none;
544	white-space: nowrap;
545	z-index: 9999;
546	font-size: floor($font-size-base * 1);
547	animation: 0.1s ease latepointAvailabilityPopup;
548	animation-fill-mode: both;
549	}