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 // Taken from old nova light theme
  13
  14 body .p-disabled {
  15   opacity: 0.5;
  16 }
  17
  18 // Checkbox
  19 body .p-checkbox {
  20   display: inline-block;
  21   vertical-align: middle;
  22   margin: 0;
  23   width: 20px;
  24   height: 20px;
  25 }
  26 body .p-checkbox .p-checkbox-box {
  27   border: 1px solid #a6a6a6;
  28   background-color: #ffffff;
  29   width: 20px;
  30   height: 20px;
  31   text-align: center;
  32   border-radius: 3px;
  33   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  34 }
  35 body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
  36   border-color: #212121;
  37 }
  38 body .p-checkbox .p-checkbox-box .p-checkbox-icon {
  39   overflow: hidden;
  40   position: relative;
  41   font-size: 18px;
  42 }
  43
  44 // Paginator
  45 body .p-paginator {
  46   background-color: #f4f4f4;
  47   border: 1px solid #c8c8c8;
  48   padding: 0;
  49 }
  50 body .p-paginator .p-paginator-first,
  51 body .p-paginator .p-paginator-prev,
  52 body .p-paginator .p-paginator-next,
  53 body .p-paginator .p-paginator-last {
  54   color: #848484;
  55   height: 2.286em;
  56   min-width: 2.286em;
  57   border: 0 none;
  58   line-height: 2.286em;
  59   padding: 0;
  60   margin: 0;
  61   vertical-align: top;
  62   transition: box-shadow 0.2s;
  63   border-radius: 0;
  64 }
  65 body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
  66 body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
  67 body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
  68 body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
  69   background-color: #e0e0e0;
  70   color: #333333;
  71 }
  72 body .p-paginator .p-paginator-first:focus,
  73 body .p-paginator .p-paginator-prev:focus,
  74 body .p-paginator .p-paginator-next:focus,
  75 body .p-paginator .p-paginator-last:focus {
  76   outline: 0 none;
  77   outline-offset: 0;
  78   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
  79 }
  80 body .p-paginator .p-paginator-current {
  81   color: #333333;
  82   height: 2.286em;
  83   min-width: 2.286em;
  84   line-height: 2.286em;
  85 }
  86 body .p-paginator .p-dropdown {
  87   border: 0 none;
  88 }
  89 body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
  90   color: #848484;
  91 }
  92 body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
  93   color: #333333;
  94 }
  95 body .p-paginator .p-paginator-first:before {
  96   position: relative;
  97   top: 1px;
  98 }
  99 body .p-paginator .p-paginator-prev:before {
 100   position: relative;
 101   top: 1px;
 102 }
 103 body .p-paginator .p-paginator-next:before {
 104   position: relative;
 105   top: 1px;
 106 }
 107 body .p-paginator .p-paginator-last:before {
 108   position: relative;
 109   top: 1px;
 110 }
 111 body .p-paginator .p-paginator-pages {
 112   vertical-align: top;
 113   display: inline-block;
 114   padding: 0;
 115 }
 116 body .p-paginator .p-paginator-pages .p-paginator-page {
 117   color: #848484;
 118   height: 2.286em;
 119   min-width: 2.286em;
 120   border: 0 none;
 121   line-height: 2.286em;
 122   padding: 0;
 123   margin: 0;
 124   vertical-align: top;
 125   transition: box-shadow 0.2s;
 126   border-radius: 0;
 127 }
 128 body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
 129   background-color: #e0e0e0;
 130   color: #333333;
 131 }
 132 body .p-paginator .p-paginator-pages .p-paginator-page:focus {
 133   outline: 0 none;
 134   outline-offset: 0;
 135   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 136 }
 137 body .p-paginator .p-dropdown {
 138   margin-left: 0.5em;
 139   height: 2.286em;
 140   min-width: auto;
 141 }
 142
 143 // Dropdown
 144
 145 body .p-dropdown {
 146   background: #ffffff;
 147   border: 1px solid #a6a6a6;
 148   transition: border-color 0.2s, box-shadow 0.2s;
 149 }
 150 body .p-dropdown:not(.p-disabled):hover {
 151   border-color: #212121;
 152 }
 153 body .p-dropdown:not(.p-disabled).p-focus {
 154   outline: 0 none;
 155   outline-offset: 0;
 156   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 157   border-color: pvar(--mainColor);
 158 }
 159 body .p-dropdown .p-dropdown-label {
 160   padding-right: 2em;
 161 }
 162 body .p-dropdown .p-dropdown-trigger {
 163   background-color: #ffffff;
 164   width: 2em;
 165   line-height: 2em;
 166   text-align: center;
 167   padding: 0;
 168   color: #848484;
 169 }
 170 body .p-dropdown .p-dropdown-clear-icon {
 171   color: #848484;
 172 }
 173 body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
 174   padding-right: 4em;
 175 }
 176 body .p-dropdown-panel {
 177   padding: 0;
 178   border: 1px solid #c8c8c8;
 179   background-color: #ffffff;
 180   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 181 }
 182 body .p-dropdown-panel .p-dropdown-filter-container {
 183   padding: 0.429em 0.857em 0.429em 0.857em;
 184   border-bottom: 1px solid #eaeaea;
 185   color: #333333;
 186   background-color: #ffffff;
 187   margin: 0;
 188 }
 189 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
 190   width: 100%;
 191   padding-right: 2em;
 192 }
 193 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
 194   top: 50%;
 195   margin-top: -0.5em;
 196   right: 1.357em;
 197   color: pvar(--mainColor);
 198 }
 199 body .p-dropdown-panel .p-dropdown-items {
 200   padding: 0;
 201 }
 202 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
 203   margin: 0;
 204   padding: 0.429em 0.857em;
 205   border: 0 none;
 206   color: #333333;
 207   background-color: transparent;
 208   -moz-border-radius: 0;
 209   -webkit-border-radius: 0;
 210   border-radius: 0;
 211 }
 212 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
 213 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
 214   color: #ffffff;
 215   background-color: pvar(--mainColor);
 216 }
 217 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
 218 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
 219   color: #333333;
 220   background-color: #eaeaea;
 221 }
 222 body p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
 223   border: 1px solid #a80000;
 224 }
 225
 226 // p-toast
 227 body .p-toast .p-toast-message {
 228   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 229   margin: 0 0 1em 0;
 230 }
 231
 232 // p-calendar
 233 body .p-datepicker {
 234   padding: 0.857em;
 235   min-width: 20em;
 236   background-color: #ffffff;
 237   color: #333333;
 238   border: 1px solid #a6a6a6;
 239 }
 240
 241 body .p-datepicker:not(.p-datepicker-inline) {
 242   border: 1px solid #c8c8c8;
 243   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 244 }
 245 body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:focus,
 246 body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:focus {
 247   outline: 0 none;
 248   outline-offset: 0;
 249   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 250 }
 251 body .p-datepicker:not(.p-disabled) table td a:not(.p-highlight):not(.p-highlight):hover {
 252   background-color: #eaeaea;
 253 }
 254 body .p-datepicker:not(.p-disabled) .p-monthpicker a.p-monthpicker-month:not(.p-highlight):hover {
 255   background-color: #eaeaea;
 256 }
 257 body .p-datepicker .p-datepicker-header {
 258   padding: 0.429em 0.857em 0.429em 0.857em;
 259   background-color: #ffffff;
 260   color: #333333;
 261   -moz-border-radius: 0;
 262   -webkit-border-radius: 0;
 263   border-radius: 0;
 264 }
 265 body .p-datepicker .p-datepicker-header .p-datepicker-prev,
 266 body .p-datepicker .p-datepicker-header .p-datepicker-next {
 267   cursor: pointer;
 268   top: 0;
 269   color: #a6a6a6;
 270   transition: color 0.2s, box-shadow 0.2s;
 271 }
 272 body .p-datepicker .p-datepicker-header .p-datepicker-title {
 273   margin: 0;
 274   padding: 0;
 275   line-height: 1;
 276 }
 277 body .p-datepicker .p-datepicker-header .p-datepicker-title select {
 278   margin-top: -0.35em;
 279   margin-bottom: 0;
 280   transition: color 0.2s, box-shadow 0.2s;
 281 }
 282 body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
 283   outline: 0 none;
 284   outline-offset: 0;
 285   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 286 }
 287 body .p-datepicker table {
 288   font-size: 14px;
 289   margin: 0.857em 0 0 0;
 290 }
 291 body .p-datepicker table th {
 292   padding: 0.5em;
 293 }
 294 body .p-datepicker table th.p-datepicker-weekheader {
 295   border-right: 1px solid #a6a6a6;
 296 }
 297 body .p-datepicker table td {
 298   padding: 0.5em;
 299 }
 300 body .p-datepicker table td > a,
 301 body .p-datepicker table td > span {
 302   display: block;
 303   text-align: center;
 304   color: #333333;
 305   padding: 0.5em;
 306   transition: box-shadow 0.2s;
 307   border-radius: 3px;
 308 }
 309 body .p-datepicker table td > a.p-highlight,
 310 body .p-datepicker table td > span.p-highlight {
 311   color: #ffffff;
 312   background-color: pvar(--mainColor);
 313 }
 314 body .p-datepicker table td > a {
 315   cursor: pointer;
 316 }
 317 body .p-datepicker table td > a:focus {
 318   outline: 0 none;
 319   outline-offset: 0;
 320   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 321 }
 322 body .p-datepicker table td.p-datepicker-today > a,
 323 body .p-datepicker table td.p-datepicker-today > span {
 324   background-color: #d0d0d0;
 325   color: #333333;
 326 }
 327 body .p-datepicker table td.p-datepicker-today > a.p-highlight,
 328 body .p-datepicker table td.p-datepicker-today > span.p-highlight {
 329   color: #ffffff;
 330   background-color: pvar(--mainColor);
 331 }
 332 body .p-datepicker table td.p-datepicker-weeknumber {
 333   border-right: 1px solid #a6a6a6;
 334 }
 335 body .p-datepicker .p-datepicker-buttonbar {
 336   border-top: 1px solid #d8dae2;
 337 }
 338 body .p-datepicker .p-timepicker {
 339   border: 0 none;
 340   border-top: 1px solid #d8dae2;
 341   padding: 0.857em;
 342 }
 343 body .p-datepicker .p-timepicker a {
 344   color: #333333;
 345   font-size: 1.286em;
 346 }
 347 body .p-datepicker .p-timepicker a:hover {
 348   color: pvar(--mainColor);
 349 }
 350 body .p-datepicker .p-timepicker span {
 351   font-size: 1.286em;
 352 }
 353 body .p-datepicker .p-monthpicker .p-monthpicker-month {
 354   color: #333333;
 355 }
 356 body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
 357   color: #ffffff;
 358   background-color: pvar(--mainColor);
 359 }
 360 body .p-datepicker.p-datepicker-timeonly {
 361   padding: 0;
 362 }
 363 body .p-datepicker.p-datepicker-timeonly .p-timepicker {
 364   border-top: 0 none;
 365 }
 366 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
 367   border-right: 1px solid #d8dae2;
 368   padding-right: 0.857em;
 369   padding-left: 0.857em;
 370   padding-top: 0;
 371   padding-bottom: 0;
 372 }
 373 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
 374   padding-left: 0;
 375 }
 376 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
 377   padding-right: 0;
 378   border-right: 0 none;
 379 }
 380 body .p-calendar.p-calendar-w-btn .p-inputtext {
 381   border-top-right-radius: 0;
 382   border-bottom-right-radius: 0;
 383   border-right: 0 none;
 384 }
 385 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error),
 386 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
 387   border-right: 0 none;
 388 }
 389 body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
 390   width: 2.357em;
 391   border-top-left-radius: 0;
 392   border-bottom-left-radius: 0;
 393 }
 394 body .ui-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
 395   width: calc(100% - 2.357em);
 396 }
 397 body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 398   border: 1px solid #a80000;
 399 }
 400 body .p-timepicker .p-separator {
 401   margin-left: 0;
 402   min-width: 0.75rem;
 403 }
 404
 405 // auto complete
 406 body .p-autocomplete .p-autocomplete-input {
 407   padding: 0.429em;
 408 }
 409 body .p-autocomplete-panel {
 410   padding: 0;
 411   border: 1px solid #c8c8c8;
 412   background-color: #ffffff;
 413   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 414 }
 415 body .p-autocomplete-panel .p-autocomplete-items {
 416   padding: 0;
 417 }
 418 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
 419   margin: 0;
 420   padding: 0.429em 0.857em;
 421   border: 0 none;
 422   color: #333333;
 423   background-color: transparent;
 424   border-radius: 0;
 425 }
 426 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
 427 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
 428   color: #ffffff;
 429   background-color: pvar(--mainColor);
 430 }
 431 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
 432   padding: 0.429em 0.857em;
 433   background-color: #d8dae2;
 434   color: #333333;
 435 }
 436 body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
 437   border: 1px solid #a80000;
 438 }
 439
 440 // select button
 441 body .p-selectbutton .p-button {
 442   background-color: #dadada;
 443   border: 1px solid #dadada;
 444   color: #333333;
 445   overflow: hidden;
 446   transition: background-color 0.2s, box-shadow 0.2s;
 447 }
 448 body .p-selectbutton .p-button .p-button-icon-left {
 449   color: #666666;
 450 }
 451 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
 452   background-color: #c8c8c8;
 453   border-color: #c8c8c8;
 454   color: #333333;
 455 }
 456 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
 457   color: #212121;
 458 }
 459 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight).ui-state-focus {
 460   box-shadow: 0 0 0 0.2em #8dcdff;
 461   z-index: 1;
 462 }
 463 body .p-selectbutton .p-button.p-highlight {
 464   background-color: pvar(--mainColor);
 465   border-color: pvar(--mainColor);
 466   color: #ffffff;
 467 }
 468 body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
 469   color: #ffffff;
 470 }
 471 body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
 472   background-color: pvar(--mainColorLighter);
 473   border-color: pvar(--mainColorLighter);
 474   color: #ffffff;
 475 }
 476 body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
 477   color: #ffffff;
 478 }
 479 body .p-selectbutton .p-button:first-child {
 480   border-top-left-radius: 3px;
 481   border-bottom-left-radius: 3px;
 482 }
 483 body .p-selectbutton .p-button:last-child {
 484   border-top-right-radius: 3px;
 485   border-bottom-right-radius: 3px;
 486 }
 487 body p-selectbutton.ng-dirty.ng-invalid .p-button {
 488   border: 1px solid #a80000;
 489 }
 490
 491 //
 492
 493 @mixin glyphicon-light {
 494   font-family: 'Glyphicons Halflings';
 495   text-decoration: none !important;
 496   color: pvar(--mainForegroundColor) !important;
 497   font-display: swap;
 498 }
 499
 500 // data table customizations
 501 p-table {
 502   .p-datatable-header {
 503     border: none !important;
 504     background-color: pvar(--mainBackgroundColor) !important;
 505
 506     .caption {
 507       height: 40px;
 508       width: 100%;
 509       display: inline-flex;
 510       align-items: center;
 511
 512       .left-buttons {
 513         padding-left: 15px;
 514       }
 515
 516       .input-group-text {
 517         background-color: transparent;
 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 }