client/src/sass/primeng-custom.scss

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