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 // ---------------------------------------------------------------------------
 449 // PeerTube customizations
 450 // ---------------------------------------------------------------------------
 451
 452 p-table {
 453   .p-datatable-header {
 454     border: none !important;
 455     background-color: pvar(--mainBackgroundColor) !important;
 456
 457     .caption {
 458       height: 40px;
 459       width: 100%;
 460       display: inline-flex;
 461       align-items: center;
 462
 463       .left-buttons {
 464         @include padding-left(15px);
 465       }
 466     }
 467   }
 468
 469   th {
 470     background-color: pvar(--mainBackgroundColor) !important;
 471     outline: 0;
 472     overflow: hidden;
 473     text-overflow: ellipsis;
 474     white-space: nowrap;
 475   }
 476
 477   td, th {
 478     font-family: $main-fonts;
 479     font-size: 15px;
 480     color: pvar(--mainForegroundColor) !important;
 481   }
 482
 483   td {
 484     @include padding-left(15px !important);
 485
 486     &.expand-cell {
 487       padding: 10px 15px;
 488     }
 489
 490     &:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
 491       overflow: hidden !important;
 492       text-overflow: ellipsis !important;
 493       white-space: nowrap !important;
 494     }
 495   }
 496
 497   tr {
 498     outline: 0;
 499     background-color: pvar(--mainBackgroundColor) !important;
 500     height: 46px;
 501
 502     &.p-highlight {
 503       background-color: pvar(--submenuBackgroundColor) !important;
 504
 505       td, td > a {
 506         color: pvar(--mainForegroundColor) !important;
 507       }
 508     }
 509   }
 510
 511   .p-datatable-tbody {
 512     tr {
 513       &:hover {
 514         background-color: pvar(--submenuBackgroundColor) !important;
 515       }
 516
 517       td {
 518         border: none !important;
 519         white-space: normal !important;
 520       }
 521
 522       &:first-child td {
 523         border-top: none !important;
 524       }
 525
 526       &:last-child td {
 527         border-bottom: none !important;
 528       }
 529
 530       &:focus + tr > td,
 531       &:focus > td {
 532         box-shadow: none !important;
 533       }
 534     }
 535
 536     .expander {
 537       cursor: pointer;
 538       position: relative;
 539       top: 1px;
 540     }
 541   }
 542
 543   th {
 544     border: none !important;
 545     border-bottom: 1px solid !important;
 546     border-color: pvar(--submenuBackgroundColor) !important;
 547     text-align: left !important;
 548     padding: 5px 0 5px 15px !important;
 549     font-weight: $font-semibold !important;
 550     color: pvar(--mainForegroundColor) !important;
 551
 552     &.p-sortable-column:hover {
 553       background-color: pvar(--submenuBackgroundColor) !important;
 554       border: 1px solid !important;
 555       border-color: pvar(--submenuBackgroundColor) !important;
 556       border-width: 0 1px !important;
 557
 558       &:first-child {
 559         border-width: 0 1px 0 0 !important;
 560       }
 561     }
 562
 563     &.p-highlight {
 564       background-color: pvar(--submenuBackgroundColor) !important;
 565
 566       .pi-sort-amount-up-alt,
 567       .pi-sort-amount-down {
 568         display: inline-block;
 569         position: relative;
 570         top: -1px;
 571         color: pvar(--mainForegroundColor) !important;
 572       }
 573
 574       .pi-sort-amount-up-alt {
 575         @include arrow-up(5px);
 576       }
 577
 578       .pi-sort-amount-down {
 579         @include arrow-down(5px);
 580       }
 581     }
 582   }
 583
 584   .action-cell {
 585     width: 250px !important;
 586
 587     .dropdown-root,
 588     my-edit-button,
 589     my-delete-button,
 590     my-button {
 591       display: inline-block !important;
 592       @include margin-left(5px);
 593
 594       &:first-child {
 595         @include margin-left(0)
 596       }
 597     }
 598   }
 599
 600   p-paginator {
 601     .p-paginator-bottom {
 602       background-color: pvar(--mainBackgroundColor) !important;
 603       position: relative;
 604       border: none;
 605       border-top: 1px solid !important;
 606       border-color: pvar(--submenuBackgroundColor) !important;
 607       height: 40px;
 608       display: flex;
 609       justify-content: center;
 610       align-items: center;
 611
 612       .p-dropdown {
 613         position: absolute;
 614         top: 10px;
 615         left: 0;
 616
 617         &.p-focus {
 618           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 619         }
 620
 621         .p-label {
 622           color: pvar(--inputPlaceholderColor);
 623         }
 624       }
 625
 626       .p-paginator-current {
 627         position: absolute;
 628         right: 0;
 629         color: pvar(--inputPlaceholderColor);
 630         overflow: visible;
 631       }
 632
 633       .p-paginator-first,
 634       .p-paginator-prev,
 635       .p-paginator-next,
 636       .p-paginator-last {
 637         padding: 5px 2px;
 638         height: 100%;
 639         outline: none;
 640         color: pvar(--mainForegroundColor);
 641
 642         &.focus-within,
 643         &:focus {
 644           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 645         }
 646
 647         &.p-disabled:hover {
 648           background-color: #fff !important;
 649         }
 650
 651         &.p-paginator-first {
 652           .p-paginator-icon {
 653             width: 18px;
 654             height: 18px;
 655             background: url('../assets/images/feather/skip-back.svg') no-repeat;
 656             background-size: contain;
 657           }
 658         }
 659
 660         &.p-paginator-prev {
 661           @include margin-right(10px);
 662
 663           .p-paginator-icon {
 664             @extend .chevron-left !optional;
 665           }
 666         }
 667
 668         &.p-paginator-next {
 669           @include margin-left(10px);
 670
 671           .p-paginator-icon {
 672             @extend .chevron-right !optional;
 673           }
 674         }
 675
 676         &.p-paginator-last {
 677           .p-paginator-icon {
 678             width: 18px;
 679             height: 18px;
 680             background: url('../assets/images/feather/skip-forward.svg') no-repeat;
 681             background-size: contain;
 682           }
 683         }
 684       }
 685
 686       .p-paginator-pages {
 687         height: auto !important;
 688
 689         .p-paginator-page {
 690           &.focus-within,
 691           &:focus {
 692             box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
 693           }
 694
 695           color: pvar(--mainForegroundColor) !important;
 696           font-weight: $font-semibold !important;
 697           margin: 0 5px !important;
 698           outline: 0 !important;
 699           border-radius: 3px !important;
 700           padding: 5px 2px !important;
 701           height: auto !important;
 702           line-height: initial !important;
 703
 704           &.p-highlight {
 705             &, &:hover, &:active, &:focus {
 706               color: #fff !important;
 707               background-color: pvar(--mainColor) !important;
 708             }
 709           }
 710         }
 711       }
 712     }
 713   }
 714
 715   .pt-badge {
 716     font-size: 12px;
 717     text-transform: uppercase;
 718   }
 719 }
 720
 721 // overflow data table
 722 p-table {
 723   .p-datatable-wrapper {
 724     overflow-x: auto;
 725     max-width: 100%;
 726
 727     table {
 728       width: 100%;
 729     }
 730   }
 731
 732   @media screen and (max-width: #{breakpoint(lg)}) {
 733     // Prevent overflow
 734     p-paginator {
 735       .p-paginator-current,
 736       .p-dropdown {
 737         top: 0;
 738         margin-top: 30px;
 739       }
 740     }
 741   }
 742
 743   @media screen and (max-width: $mobile-view) {
 744     // Prevent overflow
 745     p-paginator {
 746       .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
 747         display: none;
 748       }
 749     }
 750   }
 751 }
 752
 753 // PrimeNG calendar tweaks
 754 p-calendar .p-datepicker {
 755   a {
 756     @include disable-default-a-behaviour;
 757   }
 758
 759   .p-datepicker-header {
 760
 761     .p-datepicker-year {
 762       @include margin-left(5px);
 763     }
 764
 765     .p-datepicker-next {
 766       @extend .chevron-right !optional;
 767
 768       color: #000 !important;
 769       text-align: end;
 770
 771       .pi.pi-chevron-right {
 772         display: none !important;
 773       }
 774     }
 775
 776     .p-datepicker-prev {
 777       @extend .chevron-left !optional;
 778
 779       color: #000 !important;
 780       text-align: start;
 781
 782       .pi.pi-chevron-left {
 783         display: none !important;
 784       }
 785     }
 786   }
 787
 788   .p-timepicker {
 789
 790     .pi.pi-chevron-up {
 791       @extend .chevron-up !optional;
 792
 793       color: #000 !important;
 794     }
 795
 796     .pi.pi-chevron-down {
 797       @extend .chevron-down !optional;
 798
 799       color: #000 !important;
 800     }
 801   }
 802 }
 803
 804 p-tablecheckbox:hover div .p-checkbox-box {
 805   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 806 }
 807
 808 .p-checkbox {
 809
 810   &, .p-checkbox-box {
 811     width: 18px !important;
 812     height: 18px !important;
 813   }
 814
 815   .p-checkbox-box {
 816     &.p-highlight {
 817       border-color: pvar(--mainColor) !important;
 818       background-color: pvar(--mainColor) !important;
 819     }
 820
 821     .p-checkbox-icon {
 822       position: relative;
 823       overflow: visible !important;
 824
 825       &:after {
 826         content: '';
 827         position: absolute;
 828         bottom: -5px;
 829         left: -2px;
 830         width: 5px;
 831         height: 12px;
 832         opacity: 0;
 833         transform: rotate(45deg) scale(0);
 834         border-right: 2px solid pvar(--mainBackgroundColor);
 835         border-bottom: 2px solid pvar(--mainBackgroundColor);
 836       }
 837
 838       &.pi-check:after {
 839         opacity: 1;
 840         transform: rotate(45deg) scale(1);
 841       }
 842     }
 843   }
 844 }
 845
 846 p-toast {
 847   .p-toast {
 848     width: auto;
 849     max-width: 300px;
 850     min-width: 200px;
 851
 852     .p-toast-icon-close {
 853       opacity: 0;
 854       position: absolute;
 855       right: 5px;
 856       top: 5px;
 857       width: 18px;
 858       height: 18px;
 859       background: url('../assets/images/feather/x.svg') no-repeat;
 860       background-size: contain;
 861     }
 862
 863     &:hover .p-toast-icon-close {
 864       opacity: .3;
 865     }
 866   }
 867
 868   .p-toast-message {
 869     font-family: $main-fonts;
 870     background-color: pvar(--mainBackgroundColor) !important;
 871     color: pvar(--mainForegroundColor) !important;
 872     border-radius: 5px;
 873     box-sizing: border-box;
 874     border: 1px solid #EBEEF5 !important;
 875     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
 876     overflow: hidden;
 877
 878     .notification-block {
 879       display: flex;
 880       align-items: center;
 881       width: 100%;
 882       padding: 10px 20px;
 883
 884       .message {
 885         flex-grow: 1;
 886         @include margin-right(20px);
 887
 888         h3 {
 889           font-size: 21px;
 890         }
 891
 892         p {
 893           font-size: 16px;
 894           margin-bottom: 0;
 895         }
 896       }
 897     }
 898   }
 899
 900   .p-toast-message-success my-global-icon {
 901     color: #8BC34A !important;
 902   }
 903
 904   .p-toast-message-error my-global-icon {
 905     color: #F44336 !important;
 906   }
 907
 908   .p-toast-message-warn my-global-icon {
 909     color: #F1680D !important;
 910   }
 911
 912   .p-toast-message-info my-global-icon {
 913     color: #03A9F4 !important;
 914   }
 915 }
 916
 917 @media screen and (max-width: $primeng-breakpoint) {
 918   p-table {
 919     td {
 920       padding: 3px 0;
 921
 922       &.expand-cell {
 923         padding: 5px;
 924       }
 925     }
 926
 927     .p-datatable-tbody {
 928
 929       td:last-child {
 930         padding-bottom: 15px;
 931         margin-bottom: 15px;
 932         border-bottom: 1px solid $separator-border-color !important;
 933       }
 934     }
 935   }
 936 }
 937
 938 @media screen and (max-width: $mobile-view) {
 939   p-table {
 940     .p-datatable-header {
 941       .caption {
 942         flex-wrap: wrap;
 943
 944         > div {
 945           width: 100%;
 946           padding: 0 !important;
 947           margin-bottom: 5px;
 948         }
 949       }
 950     }
 951   }
 952 }