client/src/sass/primeng-custom.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 /* stylelint-disable */
   5 @use 'primeng/resources/primeng';
   6
   7 // Override primeng style we don't want
   8 input[type=button] {
   9   border-radius: inherit;
  10 }
  11
  12 p-table .p-datatable-header .caption {
  13   margin-bottom: 15px;
  14 }
  15
  16 // Taken from old nova light theme
  17
  18 body .p-disabled {
  19   opacity: 0.5;
  20 }
  21
  22 // Checkbox
  23 body .p-checkbox {
  24   display: inline-block;
  25   vertical-align: middle;
  26   margin: 0;
  27   width: 20px;
  28   height: 20px;
  29 }
  30 body .p-checkbox .p-checkbox-box {
  31   border: 1px solid #a6a6a6;
  32   background-color: #ffffff;
  33   width: 20px;
  34   height: 20px;
  35   text-align: center;
  36   border-radius: 3px;
  37   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  38 }
  39 body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
  40   border-color: #212121;
  41 }
  42 body .p-checkbox .p-checkbox-box .p-checkbox-icon {
  43   overflow: hidden;
  44   position: relative;
  45   font-size: 18px;
  46 }
  47
  48 // Paginator
  49 body .p-paginator {
  50   background-color: #f4f4f4;
  51   border: 1px solid #c8c8c8;
  52   padding: 0;
  53 }
  54 body .p-paginator .p-paginator-first,
  55 body .p-paginator .p-paginator-prev,
  56 body .p-paginator .p-paginator-next,
  57 body .p-paginator .p-paginator-last {
  58   color: #848484;
  59   height: 2.286em;
  60   min-width: 2.286em;
  61   border: 0 none;
  62   line-height: 2.286em;
  63   padding: 0;
  64   margin: 0;
  65   vertical-align: top;
  66   transition: box-shadow 0.2s;
  67   border-radius: 0;
  68 }
  69 body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
  70 body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
  71 body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
  72 body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
  73   background-color: #e0e0e0;
  74   color: #333333;
  75 }
  76 body .p-paginator .p-paginator-first:focus,
  77 body .p-paginator .p-paginator-prev:focus,
  78 body .p-paginator .p-paginator-next:focus,
  79 body .p-paginator .p-paginator-last:focus {
  80   outline: 0 none;
  81   outline-offset: 0;
  82   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
  83 }
  84 body .p-paginator .p-paginator-current {
  85   color: #333333;
  86   height: 2.286em;
  87   min-width: 2.286em;
  88   line-height: 2.286em;
  89 }
  90 body .p-paginator .p-dropdown {
  91   border: 0 none;
  92 }
  93 body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
  94   color: #848484;
  95 }
  96 body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
  97   color: #333333;
  98 }
  99 body .p-paginator .p-paginator-first:before {
 100   position: relative;
 101   top: 1px;
 102 }
 103 body .p-paginator .p-paginator-prev:before {
 104   position: relative;
 105   top: 1px;
 106 }
 107 body .p-paginator .p-paginator-next:before {
 108   position: relative;
 109   top: 1px;
 110 }
 111 body .p-paginator .p-paginator-last:before {
 112   position: relative;
 113   top: 1px;
 114 }
 115 body .p-paginator .p-paginator-pages {
 116   vertical-align: top;
 117   display: inline-block;
 118   padding: 0;
 119 }
 120 body .p-paginator .p-paginator-pages .p-paginator-page {
 121   color: #848484;
 122   height: 2.286em;
 123   min-width: 2.286em;
 124   border: 0 none;
 125   line-height: 2.286em;
 126   padding: 0;
 127   margin: 0;
 128   vertical-align: top;
 129   transition: box-shadow 0.2s;
 130   border-radius: 0;
 131 }
 132 body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
 133   background-color: #e0e0e0;
 134   color: #333333;
 135 }
 136 body .p-paginator .p-paginator-pages .p-paginator-page:focus {
 137   outline: 0 none;
 138   outline-offset: 0;
 139   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 140 }
 141 body .p-paginator .p-dropdown {
 142   @include margin-left(0.5em);
 143
 144   height: 2.286em;
 145   min-width: auto;
 146 }
 147
 148 // Dropdown
 149
 150 body .p-dropdown {
 151   background: #ffffff;
 152   border: 1px solid #a6a6a6;
 153   transition: border-color 0.2s, box-shadow 0.2s;
 154 }
 155 body .p-dropdown:not(.p-disabled):hover {
 156   border-color: #212121;
 157 }
 158 body .p-dropdown:not(.p-disabled).p-focus {
 159   outline: 0 none;
 160   outline-offset: 0;
 161   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 162   border-color: pvar(--mainColor);
 163 }
 164 body .p-dropdown .p-dropdown-label {
 165   @include padding-right(2em);
 166 }
 167 body .p-dropdown .p-dropdown-trigger {
 168   background-color: #ffffff;
 169   width: 2em;
 170   line-height: 2em;
 171   text-align: center;
 172   padding: 0;
 173   color: #848484;
 174 }
 175 body .p-dropdown .p-dropdown-clear-icon {
 176   color: #848484;
 177 }
 178 body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
 179   @include padding-right(4em);
 180 }
 181 body .p-dropdown-panel {
 182   padding: 0;
 183   border: 1px solid #c8c8c8;
 184   background-color: #ffffff;
 185   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 186 }
 187 body .p-dropdown-panel .p-dropdown-filter-container {
 188   padding: 0.429em 0.857em 0.429em 0.857em;
 189   border-bottom: 1px solid #eaeaea;
 190   color: #333333;
 191   background-color: #ffffff;
 192   margin: 0;
 193 }
 194 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
 195   @include padding-right(2em);
 196
 197   width: 100%;
 198 }
 199 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
 200   top: 50%;
 201   margin-top: -0.5em;
 202   right: 1.357em;
 203   color: pvar(--mainColor);
 204 }
 205 body .p-dropdown-panel .p-dropdown-items {
 206   padding: 0;
 207 }
 208 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
 209   margin: 0;
 210   padding: 0.429em 0.857em;
 211   border: 0 none;
 212   color: #333333;
 213   background-color: transparent;
 214   -moz-border-radius: 0;
 215   -webkit-border-radius: 0;
 216   border-radius: 0;
 217 }
 218 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
 219 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
 220   color: #ffffff;
 221   background-color: pvar(--mainColor);
 222 }
 223 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
 224 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
 225   color: #333333;
 226   background-color: #eaeaea;
 227 }
 228 body p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
 229   border: 1px solid #a80000;
 230 }
 231
 232 // p-toast
 233 body .p-toast .p-toast-message {
 234   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 235   margin: 0 0 1em 0;
 236 }
 237
 238 // p-calendar
 239 body .p-datepicker {
 240   padding: 0.857em;
 241   min-width: 20em;
 242   background-color: #ffffff;
 243   color: #333333;
 244   border: 1px solid #a6a6a6;
 245 }
 246
 247 body .p-datepicker:not(.p-datepicker-inline) {
 248   border: 1px solid #c8c8c8;
 249   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 250 }
 251 body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:focus,
 252 body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:focus {
 253   outline: 0 none;
 254   outline-offset: 0;
 255   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 256 }
 257 body .p-datepicker:not(.p-disabled) table td a:not(.p-highlight):not(.p-highlight):hover {
 258   background-color: #eaeaea;
 259 }
 260 body .p-datepicker:not(.p-disabled) .p-monthpicker a.p-monthpicker-month:not(.p-highlight):hover {
 261   background-color: #eaeaea;
 262 }
 263 body .p-datepicker .p-datepicker-header {
 264   padding: 0.429em 0.857em 0.429em 0.857em;
 265   background-color: #ffffff;
 266   color: #333333;
 267   -moz-border-radius: 0;
 268   -webkit-border-radius: 0;
 269   border-radius: 0;
 270 }
 271 body .p-datepicker .p-datepicker-header .p-datepicker-prev,
 272 body .p-datepicker .p-datepicker-header .p-datepicker-next {
 273   cursor: pointer;
 274   top: 0;
 275   color: #a6a6a6;
 276   transition: color 0.2s, box-shadow 0.2s;
 277 }
 278 body .p-datepicker .p-datepicker-header .p-datepicker-title {
 279   margin: 0;
 280   padding: 0;
 281   line-height: 1;
 282 }
 283 body .p-datepicker .p-datepicker-header .p-datepicker-title select {
 284   margin-top: -0.35em;
 285   margin-bottom: 0;
 286   transition: color 0.2s, box-shadow 0.2s;
 287 }
 288 body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
 289   outline: 0 none;
 290   outline-offset: 0;
 291   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 292 }
 293 body .p-datepicker table {
 294   font-size: 14px;
 295   margin: 0.857em 0 0 0;
 296 }
 297 body .p-datepicker table th {
 298   padding: 0.5em;
 299 }
 300 body .p-datepicker table th.p-datepicker-weekheader {
 301   border-right: 1px solid #a6a6a6;
 302 }
 303 body .p-datepicker table td {
 304   padding: 0.5em;
 305 }
 306 body .p-datepicker table td > a,
 307 body .p-datepicker table td > span {
 308   display: block;
 309   text-align: center;
 310   color: #333333;
 311   padding: 0.5em;
 312   transition: box-shadow 0.2s;
 313   border-radius: 3px;
 314 }
 315 body .p-datepicker table td > a.p-highlight,
 316 body .p-datepicker table td > span.p-highlight {
 317   color: #ffffff;
 318   background-color: pvar(--mainColor);
 319 }
 320 body .p-datepicker table td > a {
 321   cursor: pointer;
 322 }
 323 body .p-datepicker table td > a:focus {
 324   outline: 0 none;
 325   outline-offset: 0;
 326   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 327 }
 328 body .p-datepicker table td.p-datepicker-today > a,
 329 body .p-datepicker table td.p-datepicker-today > span {
 330   background-color: #d0d0d0;
 331   color: #333333;
 332 }
 333 body .p-datepicker table td.p-datepicker-today > a.p-highlight,
 334 body .p-datepicker table td.p-datepicker-today > span.p-highlight {
 335   color: #ffffff;
 336   background-color: pvar(--mainColor);
 337 }
 338 body .p-datepicker table td.p-datepicker-weeknumber {
 339   border-right: 1px solid #a6a6a6;
 340 }
 341 body .p-datepicker .p-datepicker-buttonbar {
 342   border-top: 1px solid #d8dae2;
 343 }
 344 body .p-datepicker .p-timepicker {
 345   border: 0 none;
 346   border-top: 1px solid #d8dae2;
 347   padding: 0.857em;
 348 }
 349 body .p-datepicker .p-timepicker a {
 350   color: #333333;
 351   font-size: 1.286em;
 352 }
 353 body .p-datepicker .p-timepicker a:hover {
 354   color: pvar(--mainColor);
 355 }
 356 body .p-datepicker .p-timepicker span {
 357   font-size: 1.286em;
 358 }
 359 body .p-datepicker .p-monthpicker .p-monthpicker-month {
 360   color: #333333;
 361 }
 362 body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
 363   color: #ffffff;
 364   background-color: pvar(--mainColor);
 365 }
 366 body .p-datepicker.p-datepicker-timeonly {
 367   padding: 0;
 368 }
 369 body .p-datepicker.p-datepicker-timeonly .p-timepicker {
 370   border-top: 0 none;
 371 }
 372 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
 373   @include padding-right(0.857em);
 374   @include padding-left(0.857em);
 375
 376   border-right: 1px solid #d8dae2;
 377   padding-top: 0;
 378   padding-bottom: 0;
 379 }
 380 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
 381   @include padding-left(0);
 382 }
 383 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
 384   @include padding-right(0);
 385   border-right: 0 none;
 386 }
 387 body .p-calendar.p-calendar-w-btn .p-inputtext {
 388   border-top-right-radius: 0;
 389   border-bottom-right-radius: 0;
 390   border-right: 0 none;
 391 }
 392 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error),
 393 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
 394   border-right: 0 none;
 395 }
 396 body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
 397   width: 2.357em;
 398   border-top-left-radius: 0;
 399   border-bottom-left-radius: 0;
 400 }
 401 body .ui-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
 402   width: calc(100% - 2.357em);
 403 }
 404 body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 405   border: 1px solid #a80000;
 406 }
 407 body .p-timepicker .p-separator {
 408   @include margin-left(0);
 409   min-width: 0.75rem;
 410 }
 411
 412 // auto complete
 413 body .p-autocomplete .p-autocomplete-input {
 414   padding: 0.429em;
 415 }
 416 body .p-autocomplete-panel {
 417   padding: 0;
 418   border: 1px solid #c8c8c8;
 419   background-color: #ffffff;
 420   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 421 }
 422 body .p-autocomplete-panel .p-autocomplete-items {
 423   padding: 0;
 424 }
 425 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
 426   margin: 0;
 427   padding: 0.429em 0.857em;
 428   border: 0 none;
 429   color: #333333;
 430   background-color: transparent;
 431   border-radius: 0;
 432 }
 433 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
 434 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
 435   color: #ffffff;
 436   background-color: pvar(--mainColor);
 437 }
 438 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
 439   padding: 0.429em 0.857em;
 440   background-color: #d8dae2;
 441   color: #333333;
 442 }
 443 body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
 444   border: 1px solid #a80000;
 445 }
 446
 447 // select button
 448 body .p-selectbutton .p-button {
 449   background-color: #dadada;
 450   border: 1px solid #dadada;
 451   color: #333333;
 452   overflow: hidden;
 453   transition: background-color 0.2s, box-shadow 0.2s;
 454 }
 455 body .p-selectbutton .p-button .p-button-icon-left {
 456   color: #666666;
 457 }
 458 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
 459   background-color: #c8c8c8;
 460   border-color: #c8c8c8;
 461   color: #333333;
 462 }
 463 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
 464   color: #212121;
 465 }
 466 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight).ui-state-focus {
 467   box-shadow: 0 0 0 0.2em #8dcdff;
 468   z-index: 1;
 469 }
 470 body .p-selectbutton .p-button.p-highlight {
 471   background-color: pvar(--mainColor);
 472   border-color: pvar(--mainColor);
 473   color: #ffffff;
 474 }
 475 body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
 476   color: #ffffff;
 477 }
 478 body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
 479   background-color: pvar(--mainColorLighter);
 480   border-color: pvar(--mainColorLighter);
 481   color: #ffffff;
 482 }
 483 body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
 484   color: #ffffff;
 485 }
 486 body .p-selectbutton .p-button:first-child {
 487   border-top-left-radius: 3px;
 488   border-bottom-left-radius: 3px;
 489 }
 490 body .p-selectbutton .p-button:last-child {
 491   border-top-right-radius: 3px;
 492   border-bottom-right-radius: 3px;
 493 }
 494 body p-selectbutton.ng-dirty.ng-invalid .p-button {
 495   border: 1px solid #a80000;
 496 }
 497
 498 //
 499
 500 @mixin glyphicon-light {
 501   font-family: 'Glyphicons Halflings';
 502   text-decoration: none !important;
 503   color: pvar(--mainForegroundColor) !important;
 504   font-display: swap;
 505 }
 506
 507 // data table customizations
 508 p-table {
 509   .p-datatable-header {
 510     border: none !important;
 511     background-color: pvar(--mainBackgroundColor) !important;
 512
 513     .caption {
 514       height: 40px;
 515       width: 100%;
 516       display: inline-flex;
 517       align-items: center;
 518
 519       .left-buttons {
 520         @include padding-left(15px);
 521       }
 522     }
 523   }
 524
 525   th {
 526     background-color: pvar(--mainBackgroundColor) !important;
 527     outline: 0;
 528     overflow: hidden;
 529     text-overflow: ellipsis;
 530     white-space: nowrap;
 531   }
 532
 533   td, th {
 534     font-family: $main-fonts;
 535     font-size: 15px !important;
 536     color: pvar(--mainForegroundColor) !important;
 537   }
 538
 539   td {
 540     @include padding-left(15px !important);
 541
 542     &.expand-cell {
 543       padding: 10px 15px;
 544     }
 545
 546     &:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
 547       overflow: hidden !important;
 548       text-overflow: ellipsis !important;
 549       white-space: nowrap !important;
 550     }
 551   }
 552
 553   tr {
 554     outline: 0;
 555     background-color: pvar(--mainBackgroundColor) !important;
 556     height: 46px;
 557
 558     &.p-highlight {
 559       background-color: pvar(--submenuBackgroundColor) !important;
 560
 561       td, td > a {
 562         color: pvar(--mainForegroundColor) !important;
 563       }
 564     }
 565   }
 566
 567   .p-datatable-tbody {
 568     tr {
 569       &:hover {
 570         background-color: pvar(--submenuBackgroundColor) !important;
 571       }
 572
 573       td {
 574         border: none !important;
 575         white-space: normal !important;
 576       }
 577
 578       &:first-child td {
 579         border-top: none !important;
 580       }
 581
 582       &:last-child td {
 583         border-bottom: none !important;
 584       }
 585
 586       &:focus + tr > td,
 587       &:focus > td {
 588         box-shadow: none !important;
 589       }
 590     }
 591
 592     .expander {
 593       cursor: pointer;
 594       position: relative;
 595       top: 1px;
 596     }
 597   }
 598
 599   th {
 600     border: none !important;
 601     border-bottom: 1px solid !important;
 602     border-color: pvar(--submenuBackgroundColor) !important;
 603     text-align: left !important;
 604     padding: 5px 0 5px 15px !important;
 605     font-weight: $font-semibold !important;
 606     color: pvar(--mainForegroundColor) !important;
 607
 608     &.p-sortable-column:hover {
 609       background-color: pvar(--submenuBackgroundColor) !important;
 610       border: 1px solid !important;
 611       border-color: pvar(--submenuBackgroundColor) !important;
 612       border-width: 0 1px !important;
 613
 614       &:first-child {
 615         border-width: 0 1px 0 0 !important;
 616       }
 617     }
 618
 619     &.p-highlight {
 620       background-color: pvar(--submenuBackgroundColor) !important;
 621
 622       .pi {
 623         @extend .glyphicon !optional;
 624
 625         color: #000 !important;
 626         font-size: 11px !important;
 627         top: 0 !important;
 628
 629         &.pi-sort-amount-up-alt {
 630           @extend .glyphicon-triangle-top !optional;
 631
 632           color: pvar(--mainForegroundColor) !important;
 633         }
 634
 635         &.pi-sort-amount-down {
 636           @extend .glyphicon-triangle-bottom !optional;
 637
 638           color: pvar(--mainForegroundColor) !important;
 639         }
 640       }
 641     }
 642   }
 643
 644   .action-cell {
 645     width: 250px !important;
 646
 647     .dropdown-root,
 648     my-edit-button,
 649     my-delete-button,
 650     my-button {
 651       display: inline-block !important;
 652       @include margin-left(5px);
 653
 654       &:first-child {
 655         @include margin-left(0)
 656       }
 657     }
 658   }
 659
 660   p-paginator {
 661     .p-paginator-bottom {
 662       background-color: pvar(--mainBackgroundColor) !important;
 663       position: relative;
 664       border: none;
 665       border-top: 1px solid !important;
 666       border-color: pvar(--submenuBackgroundColor) !important;
 667       height: 40px;
 668       display: flex;
 669       justify-content: center;
 670       align-items: center;
 671
 672       .p-dropdown {
 673         position: absolute;
 674         top: 10px;
 675         left: 0;
 676
 677         &.p-focus {
 678           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 679         }
 680
 681         .p-label {
 682           color: pvar(--inputPlaceholderColor);
 683         }
 684       }
 685
 686       .p-paginator-current {
 687         position: absolute;
 688         right: 0;
 689         color: pvar(--inputPlaceholderColor);
 690         overflow: visible;
 691       }
 692
 693       .p-paginator-first,
 694       .p-paginator-prev,
 695       .p-paginator-next,
 696       .p-paginator-last {
 697         @include glyphicon-light;
 698         padding: 5px 2px;
 699         height: auto;
 700         outline: none;
 701         font-size: 13px;
 702         top: -1px;
 703
 704         &.focus-within,
 705         &:focus {
 706           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 707         }
 708
 709         &.p-disabled:hover {
 710           background-color: #fff !important;
 711         }
 712
 713         &.p-paginator-first {
 714           @extend .glyphicon-step-backward !optional;
 715         }
 716
 717         &.p-paginator-prev {
 718           @extend .glyphicon-chevron-left !optional;
 719
 720           @include margin-right(10px);
 721         }
 722
 723         &.p-paginator-next {
 724           @extend .glyphicon-chevron-right !optional;
 725
 726           @include margin-left(10px);
 727         }
 728
 729         &.p-paginator-last {
 730           @extend .glyphicon-step-forward !optional;
 731         }
 732       }
 733
 734       .p-paginator-pages {
 735         height: auto !important;
 736
 737         .p-paginator-page {
 738           &.focus-within,
 739           &:focus {
 740             box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
 741           }
 742
 743           color: pvar(--mainForegroundColor) !important;
 744           font-weight: $font-semibold !important;
 745           margin: 0 5px !important;
 746           outline: 0 !important;
 747           border-radius: 3px !important;
 748           padding: 5px 2px !important;
 749           height: auto !important;
 750           line-height: initial !important;
 751
 752           &.p-highlight {
 753             &, &:hover, &:active, &:focus {
 754               color: #fff !important;
 755               background-color: pvar(--mainColor) !important;
 756             }
 757           }
 758         }
 759       }
 760     }
 761   }
 762 }
 763
 764 // overflow data table
 765 p-table {
 766   .p-datatable-wrapper {
 767     overflow-x: auto;
 768     max-width: 100%;
 769
 770     table {
 771       min-width: breakpoint(lg);
 772     }
 773   }
 774
 775   @media screen and (max-width: #{breakpoint(lg)}) {
 776     // Prevent overflow
 777     p-paginator {
 778       .p-paginator-current,
 779       .p-dropdown {
 780         top: 0;
 781         margin-top: 30px;
 782       }
 783     }
 784   }
 785
 786   @media screen and (max-width: $mobile-view) {
 787     // Prevent overflow
 788     p-paginator {
 789       .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
 790         display: none;
 791       }
 792     }
 793   }
 794 }
 795
 796 // PrimeNG calendar tweaks
 797 p-calendar .p-datepicker {
 798   a {
 799     @include disable-default-a-behaviour;
 800   }
 801
 802   .p-datepicker-header {
 803
 804     .p-datepicker-year {
 805       @include margin-left(5px);
 806     }
 807
 808     .p-datepicker-next {
 809       @extend .glyphicon-chevron-right !optional;
 810       @include glyphicon-light;
 811
 812       color: #000 !important;
 813       text-align: end;
 814
 815       .pi.pi-chevron-right {
 816         display: none !important;
 817       }
 818     }
 819
 820     .p-datepicker-prev {
 821       @extend .glyphicon-chevron-left !optional;
 822       @include glyphicon-light;
 823
 824       color: #000 !important;
 825       text-align: start;
 826
 827       .pi.pi-chevron-left {
 828         display: none !important;
 829       }
 830     }
 831   }
 832
 833   .p-timepicker {
 834
 835     .pi.pi-chevron-up {
 836       @extend .glyphicon-chevron-up !optional;
 837       @include glyphicon-light;
 838
 839       color: #000 !important;
 840     }
 841
 842     .pi.pi-chevron-down {
 843       @extend .glyphicon-chevron-down !optional;
 844       @include glyphicon-light;
 845
 846       color: #000 !important;
 847     }
 848   }
 849 }
 850
 851 p-tablecheckbox:hover div .p-checkbox-box {
 852   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 853 }
 854
 855 .p-checkbox {
 856
 857   &, .p-checkbox-box {
 858     width: 18px !important;
 859     height: 18px !important;
 860   }
 861
 862   .p-checkbox-box {
 863     &.p-highlight {
 864       border-color: pvar(--mainColor) !important;
 865       background-color: pvar(--mainColor) !important;
 866     }
 867
 868     .p-checkbox-icon {
 869       position: relative;
 870       overflow: visible !important;
 871
 872       &:after {
 873         content: '';
 874         position: absolute;
 875         bottom: -5px;
 876         left: -2px;
 877         width: 5px;
 878         height: 12px;
 879         opacity: 0;
 880         transform: rotate(45deg) scale(0);
 881         border-right: 2px solid pvar(--mainBackgroundColor);
 882         border-bottom: 2px solid pvar(--mainBackgroundColor);
 883       }
 884
 885       &.pi-check:after {
 886         opacity: 1;
 887         transform: rotate(45deg) scale(1);
 888       }
 889     }
 890   }
 891 }
 892
 893 p-toast {
 894   .p-toast {
 895     width: auto;
 896     max-width: 300px;
 897     min-width: 200px;
 898     z-index: z(notification) !important;
 899
 900     .p-toast-icon-close {
 901       font-family: "Glyphicons Halflings";
 902       opacity: 0;
 903       position: absolute;
 904       right: 5px;
 905       top: 5px;
 906
 907       &:after {
 908         content: "\e014";
 909       }
 910     }
 911
 912     &:hover .p-toast-icon-close {
 913       opacity: .3;
 914     }
 915   }
 916
 917   .p-toast-message {
 918     font-family: $main-fonts;
 919     background-color: pvar(--mainBackgroundColor) !important;
 920     color: pvar(--mainForegroundColor) !important;
 921     border-radius: 5px;
 922     box-sizing: border-box;
 923     border: 1px solid #EBEEF5 !important;
 924     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
 925     overflow: hidden;
 926
 927     &.p-toast-message-success .glyphicon {
 928       color: #8BC34A !important;
 929     }
 930
 931     &.p-toast-message-error .glyphicon {
 932       color: #F44336 !important;
 933     }
 934
 935     &.p-toast-message-warn .glyphicon {
 936       color: #F1680D !important;
 937     }
 938
 939     &.p-toast-message-info .glyphicon {
 940       color: #03A9F4 !important;
 941     }
 942
 943     .notification-block {
 944       display: flex;
 945       align-items: center;
 946       width: 100%;
 947       padding: 10px 20px;
 948
 949       .message {
 950         flex-grow: 1;
 951         @include margin-right(20px);
 952
 953         h3 {
 954           font-size: 21px;
 955         }
 956
 957         p {
 958           font-size: 15px;
 959           margin-bottom: 0;
 960         }
 961       }
 962
 963       .glyphicon {
 964         font-size: 32px;
 965         @include margin-right(5px);
 966       }
 967     }
 968   }
 969 }
 970
 971 .p-selectbutton {
 972   .p-button:focus {
 973     outline: none;
 974   }
 975
 976   .p-button-label {
 977     padding: 5px 15px;
 978     font-size: 15px;
 979     font-weight: 600;
 980   }
 981 }