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