client/src/sass/primeng-custom.scss

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