client/src/sass/primeng-custom.scss

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