client/src/sass/primeng-custom.scss

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