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