client/src/sass/primeng-custom.scss

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