client/src/sass/primeng-custom.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 @import '~primeng/resources/primeng.css';
   5 @import '~primeng/resources/themes/nova-light/theme.css';
   6
   7 @mixin glyphicon-light {
   8   font-family: 'Glyphicons Halflings';
   9   text-decoration: none !important;
  10   color: var(--mainForegroundColor) !important;
  11   font-display: swap;
  12 }
  13
  14 my-edit-button,
  15 my-delete-button,
  16 my-button {
  17   height: max-content;
  18 }
  19
  20 // focus box-shadow for primeng
  21 .ui-inputtext:enabled:focus:not(.ui-state-error) {
  22   box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
  23 }
  24
  25 // data table customizations
  26 p-table {
  27   .ui-table-caption {
  28     border: none !important;
  29     background-color: var(--mainBackgroundColor) !important;
  30
  31     .caption {
  32       height: 40px;
  33       display: flex;
  34       align-items: center;
  35
  36       .input-group-text {
  37         background-color: transparent;
  38       }
  39     }
  40   }
  41
  42   th {
  43     background-color: var(--mainBackgroundColor) !important;
  44     outline: 0;
  45   }
  46
  47   td, th {
  48     font-family: $main-fonts;
  49     font-size: 15px !important;
  50     color: var(--mainForegroundColor) !important;
  51   }
  52
  53   td {
  54     padding-left: 15px !important;
  55
  56     &:not(.action-cell):not(.expand-cell) {
  57       overflow: hidden !important;
  58       text-overflow: ellipsis !important;
  59       white-space: nowrap !important;
  60     }
  61   }
  62
  63   tr {
  64     outline: 0;
  65     background-color: var(--mainBackgroundColor) !important;
  66     height: 46px;
  67
  68     &.ui-state-highlight {
  69       background-color: var(--submenuColor) !important;
  70
  71       td, td > a {
  72         color: var(--mainForegroundColor) !important;
  73       }
  74     }
  75   }
  76
  77   .ui-table-tbody {
  78     tr {
  79       &:hover {
  80         background-color: var(--submenuColor) !important;
  81
  82         .action-cell {
  83           .dropdown-root,
  84           my-edit-button,
  85           my-delete-button,
  86           my-button {
  87             display: inline-block !important;
  88           }
  89         }
  90       }
  91
  92       td {
  93         border: none !important;
  94       }
  95
  96       &:first-child td {
  97         border-top: none !important;
  98       }
  99
 100       &:last-child td {
 101         border-bottom: none !important;
 102       }
 103     }
 104
 105     .expander {
 106       cursor: pointer;
 107       position: relative;
 108       top: 1px;
 109     }
 110   }
 111
 112   th {
 113     border: none !important;
 114     border-bottom: 1px solid !important;
 115     border-color: var(--submenuColor) !important;
 116     text-align: left !important;
 117     padding: 5px 0 5px 15px !important;
 118     font-weight: $font-semibold !important;
 119     color: var(--mainForegroundColor) !important;
 120
 121     &.ui-sortable-column:hover {
 122       background-color: var(--submenuColor) !important;
 123       border: 1px solid !important;
 124       border-color: var(--submenuColor) !important;
 125       border-width: 0 1px !important;
 126
 127       &:first-child {
 128         border-width: 0 1px 0 0 !important;
 129       }
 130     }
 131
 132     &.ui-state-highlight {
 133       background-color: var(--submenuColor) !important;
 134
 135       .pi {
 136         @extend .glyphicon;
 137
 138         color: #000 !important;
 139         font-size: 11px !important;
 140         top: 0 !important;
 141
 142         &.pi-sort-up {
 143           @extend .glyphicon-triangle-top;
 144
 145           color: var(--mainForegroundColor) !important;
 146         }
 147
 148         &.pi-sort-down {
 149           @extend .glyphicon-triangle-bottom;
 150
 151           color: var(--mainForegroundColor) !important;
 152         }
 153       }
 154     }
 155   }
 156
 157   .action-cell {
 158     width: 250px !important;
 159     padding: 0 !important;
 160     text-align: center;
 161
 162     .dropdown-root,
 163     my-edit-button,
 164     my-delete-button,
 165     my-button {
 166       display: none !important;
 167       margin-left: 5px;
 168
 169       &.show {
 170         display: inline-block !important;
 171       }
 172
 173       // keep displaying on touchscreen
 174       @media not all and (hover: hover) and (pointer: fine) {
 175         display: inline-block !important;
 176       }
 177
 178       :first-child {
 179         margin-left: 0
 180       }
 181     }
 182   }
 183
 184   p-paginator {
 185     .ui-paginator-bottom {
 186       background-color: var(--mainBackgroundColor) !important;
 187       position: relative;
 188       border: none;
 189       border-top: 1px solid !important;
 190       border-color: var(--submenuColor) !important;
 191       height: 40px;
 192       display: flex;
 193       justify-content: center;
 194       align-items: center;
 195
 196       .ui-dropdown {
 197         position: absolute;
 198         top: 3px;
 199         left: 0;
 200
 201         &.ui-state-focus {
 202           box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
 203         }
 204
 205         .ui-dropdown-label {
 206           color: var(--inputPlaceholderColor);
 207         }
 208       }
 209
 210       .ui-paginator-current {
 211         position: absolute;
 212         right: 0;
 213         color: var(--inputPlaceholderColor);
 214       }
 215
 216       .ui-paginator-first,
 217       .ui-paginator-prev,
 218       .ui-paginator-next,
 219       .ui-paginator-last {
 220         @include glyphicon-light;
 221         padding: 5px 2px;
 222         height: auto;
 223         outline: none;
 224         font-size: 13px;
 225         top: -1px;
 226
 227         &.focus-within,
 228         &:focus {
 229           box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
 230         }
 231
 232         &.ui-state-disabled:hover {
 233           background-color: #fff !important;
 234         }
 235
 236         &.ui-paginator-first {
 237           @extend .glyphicon-step-backward;
 238         }
 239
 240         &.ui-paginator-prev {
 241           @extend .glyphicon-chevron-left;
 242
 243           margin-right: 10px;
 244         }
 245
 246         &.ui-paginator-next {
 247           @extend .glyphicon-chevron-right;
 248
 249           margin-left: 10px;
 250         }
 251
 252         &.ui-paginator-last {
 253           @extend .glyphicon-step-forward;
 254         }
 255       }
 256
 257       .ui-paginator-pages {
 258         height: auto !important;
 259
 260         .ui-paginator-page {
 261           &.focus-within,
 262           &:focus {
 263             box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
 264           }
 265         }
 266
 267         a {
 268           color: var(--mainForegroundColor) !important;
 269           font-weight: $font-semibold !important;
 270           margin: 0 5px !important;
 271           outline: 0 !important;
 272           border-radius: 3px !important;
 273           padding: 5px 2px !important;
 274           height: auto !important;
 275           line-height: initial !important;
 276
 277           &.ui-state-active {
 278             &, &:hover, &:active, &:focus {
 279               color: #fff !important;
 280               background-color: var(--mainColor) !important;
 281             }
 282           }
 283         }
 284       }
 285     }
 286   }
 287 }
 288
 289 // overflow data table
 290 @mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
 291   p-table {
 292     .ui-table-wrapper {
 293       overflow-x: auto;
 294       max-width: calc(100vw - #{$horizontal-margins * 2});
 295
 296       table {
 297         min-width: $table-min-width;
 298       }
 299     }
 300
 301     @if $mobile-paginator {
 302       p-paginator .ui-paginator-bottom {
 303         display: block;
 304
 305         .ui-paginator-current {
 306           position: relative;
 307           display: block;
 308         }
 309
 310         a, .ui-paginator-pages {
 311           vertical-align: middle;
 312         }
 313       }
 314     }
 315   }
 316 }
 317
 318 // multiselect customizations
 319 p-multiselect {
 320   .ui-multiselect {
 321     border-color: #C6C6C6;
 322
 323     &:not(.ui-state-disabled) {
 324       &:hover {
 325         border-color: #C6C6C6;
 326       }
 327
 328       &:focus,
 329       &.ui-state-focus {
 330         box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
 331       }
 332     }
 333   }
 334
 335   .ui-multiselect-label {
 336     font-size: 15px !important;
 337     padding: 4px 30px 4px 12px !important;
 338
 339     $width: 338px;
 340     width: $width !important;
 341
 342     @media screen and (max-width: $width) {
 343       width: 100% !important;
 344     }
 345   }
 346
 347   .pi.pi-chevron-down{
 348     margin-left: 0 !important;
 349
 350     &::after {
 351       @include select-arrow-down;
 352
 353       right: 0;
 354       margin-top: 6px;
 355     }
 356   }
 357
 358   .ui-chkbox-icon {
 359     //position: absolute !important;
 360     width: 18px;
 361     height: 18px;
 362     //left: 0;
 363
 364     //&::after {
 365     //  left: -2px !important;
 366     //}
 367   }
 368
 369   .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
 370     background-color: var(--mainColorLighter);
 371   }
 372
 373   .ui-inputtext:enabled:focus:not(.ui-state-error) {
 374     border-color: var(--mainColorLighter) !important;
 375     box-shadow: none;
 376   }
 377 }
 378
 379 // PrimeNG calendar tweaks
 380 p-calendar .ui-datepicker {
 381   a {
 382     @include disable-default-a-behaviour;
 383   }
 384
 385   .ui-datepicker-header {
 386
 387     .ui-datepicker-year {
 388       margin-left: 5px;
 389     }
 390
 391     .ui-datepicker-next {
 392       @extend .glyphicon-chevron-right;
 393       @include glyphicon-light;
 394
 395       color: #000 !important;
 396       text-align: right;
 397
 398       .pi.pi-chevron-right {
 399         display: none !important;
 400       }
 401     }
 402
 403     .ui-datepicker-prev {
 404       @extend .glyphicon-chevron-left;
 405       @include glyphicon-light;
 406
 407       color: #000 !important;
 408       text-align: left;
 409
 410       .pi.pi-chevron-left {
 411         display: none !important;
 412       }
 413     }
 414   }
 415
 416   .ui-timepicker {
 417
 418     .pi.pi-chevron-up {
 419       @extend .glyphicon-chevron-up;
 420       @include glyphicon-light;
 421
 422       color: #000 !important;
 423     }
 424
 425     .pi.pi-chevron-down {
 426       @extend .glyphicon-chevron-down;
 427       @include glyphicon-light;
 428
 429       color: #000 !important;
 430     }
 431   }
 432 }
 433
 434 p-tablecheckbox:hover div .ui-chkbox-box {
 435   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 436 }
 437
 438 .ui-chkbox {
 439
 440   &, .ui-chkbox-box {
 441     width: 18px !important;
 442     height: 18px !important;
 443   }
 444
 445   .ui-chkbox-box {
 446     &.ui-state-active {
 447       border-color: var(--mainColor) !important;
 448       background-color: var(--mainColor) !important;
 449     }
 450
 451     .ui-chkbox-icon {
 452       position: relative;
 453       overflow: visible !important;
 454
 455       &:after {
 456         content: '';
 457         position: absolute;
 458         top: 1px;
 459         left: 6px;
 460         width: 5px;
 461         height: 12px;
 462         opacity: 0;
 463         transform: rotate(45deg) scale(0);
 464         border-right: 2px solid var(--mainBackgroundColor);
 465         border-bottom: 2px solid var(--mainBackgroundColor);
 466       }
 467
 468       &.pi-check:after {
 469         opacity: 1;
 470         transform: rotate(45deg) scale(1);
 471       }
 472     }
 473   }
 474 }
 475
 476 p-inputswitch {
 477   height: 26px;
 478
 479   .ui-inputswitch-checked .ui-inputswitch-slider {
 480     background-color: var(--mainColor) !important;
 481   }
 482
 483   &.small {
 484     height: 20px;
 485
 486     .ui-inputswitch {
 487       width: 2.5em !important;
 488       height: 1.45em !important;
 489
 490       .ui-inputswitch-slider::before {
 491         height: 1em !important;
 492         width: 1em !important;
 493       }
 494     }
 495
 496     .ui-inputswitch-checked .ui-inputswitch-slider::before {
 497       transform: translateX(1em) !important;
 498     }
 499   }
 500 }
 501
 502 p-toast {
 503   .ui-toast {
 504     z-index: z(notification) !important;
 505
 506     .ui-toast-close-icon {
 507       font-family: "Glyphicons Halflings";
 508       opacity: 0;
 509
 510       &:after {
 511         content: "\e014";
 512       }
 513     }
 514
 515     &:hover .ui-toast-close-icon {
 516       opacity: .3;
 517     }
 518   }
 519
 520   .ui-toast-message {
 521     font-family: $main-fonts;
 522     background-color: var(--mainBackgroundColor) !important;
 523     border-radius: 5px;
 524     box-sizing: border-box;
 525     border: 1px solid #EBEEF5 !important;
 526     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
 527     overflow: hidden;
 528
 529     &.ui-toast-message-success .glyphicon {
 530       color: #8BC34A !important;
 531     }
 532
 533     &.ui-toast-message-error .glyphicon {
 534       color: #F44336 !important;
 535     }
 536
 537     &.ui-toast-message-warn .glyphicon {
 538       color: #F1680D !important;
 539     }
 540
 541     &.ui-toast-message-info .glyphicon {
 542       color: #03A9F4 !important;
 543     }
 544
 545     .notification-block {
 546       display: flex;
 547       align-items: center;
 548       padding: 5px;
 549
 550       .message {
 551         flex-grow: 1;
 552
 553         h3 {
 554           font-size: 21px;
 555         }
 556
 557         p {
 558           font-size: 15px;
 559           margin-bottom: 0;
 560         }
 561       }
 562
 563       .glyphicon {
 564         font-size: 32px;
 565         margin-right: 5px;
 566       }
 567     }
 568   }
 569 }
 570
 571 .ui-widget {
 572   font-family: $main-fonts !important;
 573 }