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 // data table customizations
 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 p-table {
 508   .p-datatable-header {
 509     border: none !important;
 510     background-color: pvar(--mainBackgroundColor) !important;
 511
 512     .caption {
 513       height: 40px;
 514       width: 100%;
 515       display: inline-flex;
 516       align-items: center;
 517
 518       .left-buttons {
 519         @include padding-left(15px);
 520       }
 521     }
 522   }
 523
 524   th {
 525     background-color: pvar(--mainBackgroundColor) !important;
 526     outline: 0;
 527     overflow: hidden;
 528     text-overflow: ellipsis;
 529     white-space: nowrap;
 530   }
 531
 532   td, th {
 533     font-family: $main-fonts;
 534     font-size: 15px !important;
 535     color: pvar(--mainForegroundColor) !important;
 536   }
 537
 538   td {
 539     @include padding-left(15px !important);
 540
 541     &.expand-cell {
 542       padding: 10px 15px;
 543     }
 544
 545     &:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
 546       overflow: hidden !important;
 547       text-overflow: ellipsis !important;
 548       white-space: nowrap !important;
 549     }
 550   }
 551
 552   tr {
 553     outline: 0;
 554     background-color: pvar(--mainBackgroundColor) !important;
 555     height: 46px;
 556
 557     &.p-highlight {
 558       background-color: pvar(--submenuBackgroundColor) !important;
 559
 560       td, td > a {
 561         color: pvar(--mainForegroundColor) !important;
 562       }
 563     }
 564   }
 565
 566   .p-datatable-tbody {
 567     tr {
 568       &:hover {
 569         background-color: pvar(--submenuBackgroundColor) !important;
 570       }
 571
 572       td {
 573         border: none !important;
 574         white-space: normal !important;
 575       }
 576
 577       &:first-child td {
 578         border-top: none !important;
 579       }
 580
 581       &:last-child td {
 582         border-bottom: none !important;
 583       }
 584
 585       &:focus + tr > td,
 586       &:focus > td {
 587         box-shadow: none !important;
 588       }
 589     }
 590
 591     .expander {
 592       cursor: pointer;
 593       position: relative;
 594       top: 1px;
 595     }
 596   }
 597
 598   th {
 599     border: none !important;
 600     border-bottom: 1px solid !important;
 601     border-color: pvar(--submenuBackgroundColor) !important;
 602     text-align: left !important;
 603     padding: 5px 0 5px 15px !important;
 604     font-weight: $font-semibold !important;
 605     color: pvar(--mainForegroundColor) !important;
 606
 607     &.p-sortable-column:hover {
 608       background-color: pvar(--submenuBackgroundColor) !important;
 609       border: 1px solid !important;
 610       border-color: pvar(--submenuBackgroundColor) !important;
 611       border-width: 0 1px !important;
 612
 613       &:first-child {
 614         border-width: 0 1px 0 0 !important;
 615       }
 616     }
 617
 618     &.p-highlight {
 619       background-color: pvar(--submenuBackgroundColor) !important;
 620
 621       .pi {
 622         @extend .glyphicon !optional;
 623
 624         color: #000 !important;
 625         font-size: 11px !important;
 626         top: 0 !important;
 627
 628         &.pi-sort-amount-up-alt {
 629           @extend .glyphicon-triangle-top !optional;
 630
 631           color: pvar(--mainForegroundColor) !important;
 632         }
 633
 634         &.pi-sort-amount-down {
 635           @extend .glyphicon-triangle-bottom !optional;
 636
 637           color: pvar(--mainForegroundColor) !important;
 638         }
 639       }
 640     }
 641   }
 642
 643   .action-cell {
 644     width: 250px !important;
 645
 646     .dropdown-root,
 647     my-edit-button,
 648     my-delete-button,
 649     my-button {
 650       display: inline-block !important;
 651       @include margin-left(5px);
 652
 653       &:first-child {
 654         @include margin-left(0)
 655       }
 656     }
 657   }
 658
 659   p-paginator {
 660     .p-paginator-bottom {
 661       background-color: pvar(--mainBackgroundColor) !important;
 662       position: relative;
 663       border: none;
 664       border-top: 1px solid !important;
 665       border-color: pvar(--submenuBackgroundColor) !important;
 666       height: 40px;
 667       display: flex;
 668       justify-content: center;
 669       align-items: center;
 670
 671       .p-dropdown {
 672         position: absolute;
 673         top: 10px;
 674         left: 0;
 675
 676         &.p-focus {
 677           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 678         }
 679
 680         .p-label {
 681           color: pvar(--inputPlaceholderColor);
 682         }
 683       }
 684
 685       .p-paginator-current {
 686         position: absolute;
 687         right: 0;
 688         color: pvar(--inputPlaceholderColor);
 689         overflow: visible;
 690       }
 691
 692       .p-paginator-first,
 693       .p-paginator-prev,
 694       .p-paginator-next,
 695       .p-paginator-last {
 696         @include glyphicon-light;
 697         padding: 5px 2px;
 698         height: auto;
 699         outline: none;
 700         font-size: 13px;
 701         top: -1px;
 702
 703         &.focus-within,
 704         &:focus {
 705           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 706         }
 707
 708         &.p-disabled:hover {
 709           background-color: #fff !important;
 710         }
 711
 712         &.p-paginator-first {
 713           @extend .glyphicon-step-backward !optional;
 714         }
 715
 716         &.p-paginator-prev {
 717           @extend .glyphicon-chevron-left !optional;
 718
 719           @include margin-right(10px);
 720         }
 721
 722         &.p-paginator-next {
 723           @extend .glyphicon-chevron-right !optional;
 724
 725           @include margin-left(10px);
 726         }
 727
 728         &.p-paginator-last {
 729           @extend .glyphicon-step-forward !optional;
 730         }
 731       }
 732
 733       .p-paginator-pages {
 734         height: auto !important;
 735
 736         .p-paginator-page {
 737           &.focus-within,
 738           &:focus {
 739             box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
 740           }
 741
 742           color: pvar(--mainForegroundColor) !important;
 743           font-weight: $font-semibold !important;
 744           margin: 0 5px !important;
 745           outline: 0 !important;
 746           border-radius: 3px !important;
 747           padding: 5px 2px !important;
 748           height: auto !important;
 749           line-height: initial !important;
 750
 751           &.p-highlight {
 752             &, &:hover, &:active, &:focus {
 753               color: #fff !important;
 754               background-color: pvar(--mainColor) !important;
 755             }
 756           }
 757         }
 758       }
 759     }
 760   }
 761
 762   .badge {
 763     @include table-badge;
 764   }
 765 }
 766
 767 // overflow data table
 768 p-table {
 769   .p-datatable-wrapper {
 770     overflow-x: auto;
 771     max-width: 100%;
 772
 773     table {
 774       width: 100%;
 775     }
 776   }
 777
 778   @media screen and (max-width: #{breakpoint(lg)}) {
 779     // Prevent overflow
 780     p-paginator {
 781       .p-paginator-current,
 782       .p-dropdown {
 783         top: 0;
 784         margin-top: 30px;
 785       }
 786     }
 787   }
 788
 789   @media screen and (max-width: $mobile-view) {
 790     // Prevent overflow
 791     p-paginator {
 792       .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
 793         display: none;
 794       }
 795     }
 796   }
 797 }
 798
 799 // PrimeNG calendar tweaks
 800 p-calendar .p-datepicker {
 801   a {
 802     @include disable-default-a-behaviour;
 803   }
 804
 805   .p-datepicker-header {
 806
 807     .p-datepicker-year {
 808       @include margin-left(5px);
 809     }
 810
 811     .p-datepicker-next {
 812       @extend .glyphicon-chevron-right !optional;
 813       @include glyphicon-light;
 814
 815       color: #000 !important;
 816       text-align: end;
 817
 818       .pi.pi-chevron-right {
 819         display: none !important;
 820       }
 821     }
 822
 823     .p-datepicker-prev {
 824       @extend .glyphicon-chevron-left !optional;
 825       @include glyphicon-light;
 826
 827       color: #000 !important;
 828       text-align: start;
 829
 830       .pi.pi-chevron-left {
 831         display: none !important;
 832       }
 833     }
 834   }
 835
 836   .p-timepicker {
 837
 838     .pi.pi-chevron-up {
 839       @extend .glyphicon-chevron-up !optional;
 840       @include glyphicon-light;
 841
 842       color: #000 !important;
 843     }
 844
 845     .pi.pi-chevron-down {
 846       @extend .glyphicon-chevron-down !optional;
 847       @include glyphicon-light;
 848
 849       color: #000 !important;
 850     }
 851   }
 852 }
 853
 854 p-tablecheckbox:hover div .p-checkbox-box {
 855   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 856 }
 857
 858 .p-checkbox {
 859
 860   &, .p-checkbox-box {
 861     width: 18px !important;
 862     height: 18px !important;
 863   }
 864
 865   .p-checkbox-box {
 866     &.p-highlight {
 867       border-color: pvar(--mainColor) !important;
 868       background-color: pvar(--mainColor) !important;
 869     }
 870
 871     .p-checkbox-icon {
 872       position: relative;
 873       overflow: visible !important;
 874
 875       &:after {
 876         content: '';
 877         position: absolute;
 878         bottom: -5px;
 879         left: -2px;
 880         width: 5px;
 881         height: 12px;
 882         opacity: 0;
 883         transform: rotate(45deg) scale(0);
 884         border-right: 2px solid pvar(--mainBackgroundColor);
 885         border-bottom: 2px solid pvar(--mainBackgroundColor);
 886       }
 887
 888       &.pi-check:after {
 889         opacity: 1;
 890         transform: rotate(45deg) scale(1);
 891       }
 892     }
 893   }
 894 }
 895
 896 p-toast {
 897   .p-toast {
 898     width: auto;
 899     max-width: 300px;
 900     min-width: 200px;
 901     z-index: z(notification) !important;
 902
 903     .p-toast-icon-close {
 904       font-family: "Glyphicons Halflings";
 905       opacity: 0;
 906       position: absolute;
 907       right: 5px;
 908       top: 5px;
 909
 910       &:after {
 911         content: "\e014";
 912       }
 913     }
 914
 915     &:hover .p-toast-icon-close {
 916       opacity: .3;
 917     }
 918   }
 919
 920   .p-toast-message {
 921     font-family: $main-fonts;
 922     background-color: pvar(--mainBackgroundColor) !important;
 923     color: pvar(--mainForegroundColor) !important;
 924     border-radius: 5px;
 925     box-sizing: border-box;
 926     border: 1px solid #EBEEF5 !important;
 927     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
 928     overflow: hidden;
 929
 930     &.p-toast-message-success .glyphicon {
 931       color: #8BC34A !important;
 932     }
 933
 934     &.p-toast-message-error .glyphicon {
 935       color: #F44336 !important;
 936     }
 937
 938     &.p-toast-message-warn .glyphicon {
 939       color: #F1680D !important;
 940     }
 941
 942     &.p-toast-message-info .glyphicon {
 943       color: #03A9F4 !important;
 944     }
 945
 946     .notification-block {
 947       display: flex;
 948       align-items: center;
 949       width: 100%;
 950       padding: 10px 20px;
 951
 952       .message {
 953         flex-grow: 1;
 954         @include margin-right(20px);
 955
 956         h3 {
 957           font-size: 21px;
 958         }
 959
 960         p {
 961           font-size: 15px;
 962           margin-bottom: 0;
 963         }
 964       }
 965
 966       .glyphicon {
 967         font-size: 32px;
 968         @include margin-right(5px);
 969       }
 970     }
 971   }
 972 }
 973
 974 .p-selectbutton {
 975   .p-button:focus {
 976     outline: none;
 977   }
 978
 979   .p-button-label {
 980     padding: 5px 15px;
 981     font-size: 15px;
 982     font-weight: 600;
 983   }
 984 }
 985
 986 @media screen and (max-width: $primeng-breakpoint) {
 987   p-table {
 988     td {
 989       padding: 3px 0;
 990
 991       &.expand-cell {
 992         padding: 5px;
 993       }
 994     }
 995
 996     .p-datatable-tbody {
 997
 998       td:last-child {
 999         padding-bottom: 15px;
1000         margin-bottom: 15px;
1001         border-bottom: 1px solid $separator-border-color !important;
1002       }
1003     }
1004   }
1005 }
1006
1007 @media screen and (max-width: $mobile-view) {
1008   p-table {
1009     .p-datatable-header {
1010       .caption {
1011         flex-wrap: wrap;
1012
1013         > div {
1014           width: 100%;
1015           padding: 0 !important;
1016           margin-bottom: 5px;
1017         }
1018       }
1019     }
1020   }
1021 }