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, $mobile-paginator: true) {
 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     @if $mobile-paginator {
 298       p-paginator .ui-paginator-bottom {
 299         display: block;
 300
 301         .ui-paginator-current {
 302           position: relative;
 303           display: block;
 304         }
 305
 306         a, .ui-paginator-pages {
 307           vertical-align: middle;
 308         }
 309       }
 310     }
 311   }
 312 }
 313
 314 // multiselect customizations
 315 p-multiselect {
 316   .ui-multiselect {
 317     border-color: #C6C6C6;
 318
 319     &:not(.ui-state-disabled) {
 320       &:hover {
 321         border-color: #C6C6C6;
 322       }
 323
 324       &:focus,
 325       &.ui-state-focus {
 326         box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
 327       }
 328     }
 329   }
 330
 331   .ui-multiselect-label {
 332     font-size: 15px !important;
 333     padding: 4px 30px 4px 12px !important;
 334
 335     $width: 338px;
 336     width: $width !important;
 337
 338     @media screen and (max-width: $width) {
 339       width: 100% !important;
 340     }
 341   }
 342
 343   .pi.pi-chevron-down{
 344     margin-left: 0 !important;
 345
 346     &::after {
 347       @include select-arrow-down;
 348
 349       right: 0;
 350       margin-top: 6px;
 351     }
 352   }
 353
 354   .ui-chkbox-icon {
 355     //position: absolute !important;
 356     width: 18px;
 357     height: 18px;
 358     //left: 0;
 359
 360     //&::after {
 361     //  left: -2px !important;
 362     //}
 363   }
 364
 365   .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
 366     background-color: var(--mainColorLighter);
 367   }
 368
 369   .ui-inputtext:enabled:focus:not(.ui-state-error) {
 370     border-color: var(--mainColorLighter) !important;
 371     box-shadow: none;
 372   }
 373 }
 374
 375 // PrimeNG calendar tweaks
 376 p-calendar .ui-datepicker {
 377   a {
 378     @include disable-default-a-behaviour;
 379   }
 380
 381   .ui-datepicker-header {
 382
 383     .ui-datepicker-year {
 384       margin-left: 5px;
 385     }
 386
 387     .ui-datepicker-next {
 388       @extend .glyphicon-chevron-right;
 389       @include glyphicon-light;
 390
 391       color: #000 !important;
 392       text-align: right;
 393
 394       .pi.pi-chevron-right {
 395         display: none !important;
 396       }
 397     }
 398
 399     .ui-datepicker-prev {
 400       @extend .glyphicon-chevron-left;
 401       @include glyphicon-light;
 402
 403       color: #000 !important;
 404       text-align: left;
 405
 406       .pi.pi-chevron-left {
 407         display: none !important;
 408       }
 409     }
 410   }
 411
 412   .ui-timepicker {
 413
 414     .pi.pi-chevron-up {
 415       @extend .glyphicon-chevron-up;
 416       @include glyphicon-light;
 417
 418       color: #000 !important;
 419     }
 420
 421     .pi.pi-chevron-down {
 422       @extend .glyphicon-chevron-down;
 423       @include glyphicon-light;
 424
 425       color: #000 !important;
 426     }
 427   }
 428 }
 429
 430 p-tablecheckbox:hover div .ui-chkbox-box {
 431   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 432 }
 433
 434 .ui-chkbox {
 435
 436   &, .ui-chkbox-box {
 437     width: 18px !important;
 438     height: 18px !important;
 439   }
 440
 441   .ui-chkbox-box {
 442     &.ui-state-active {
 443       border-color: var(--mainColor) !important;
 444       background-color: var(--mainColor) !important;
 445     }
 446
 447     .ui-chkbox-icon {
 448       position: relative;
 449       overflow: visible !important;
 450
 451       &:after {
 452         content: '';
 453         position: absolute;
 454         top: 1px;
 455         left: 6px;
 456         width: 5px;
 457         height: 12px;
 458         opacity: 0;
 459         transform: rotate(45deg) scale(0);
 460         border-right: 2px solid var(--mainBackgroundColor);
 461         border-bottom: 2px solid var(--mainBackgroundColor);
 462       }
 463
 464       &.pi-check:after {
 465         opacity: 1;
 466         transform: rotate(45deg) scale(1);
 467       }
 468     }
 469   }
 470 }
 471
 472 p-inputswitch {
 473   height: 26px;
 474
 475   .ui-inputswitch-checked .ui-inputswitch-slider {
 476     background-color: var(--mainColor) !important;
 477   }
 478
 479   &.small {
 480     height: 20px;
 481
 482     .ui-inputswitch {
 483       width: 2.5em !important;
 484       height: 1.45em !important;
 485
 486       .ui-inputswitch-slider::before {
 487         height: 1em !important;
 488         width: 1em !important;
 489       }
 490     }
 491
 492     .ui-inputswitch-checked .ui-inputswitch-slider::before {
 493       transform: translateX(1em) !important;
 494     }
 495   }
 496 }
 497
 498 p-toast {
 499   .ui-toast {
 500     z-index: z(notification) !important;
 501
 502     .ui-toast-close-icon {
 503       font-family: "Glyphicons Halflings";
 504       opacity: 0;
 505
 506       &:after {
 507         content: "\e014";
 508       }
 509     }
 510
 511     &:hover .ui-toast-close-icon {
 512       opacity: .3;
 513     }
 514   }
 515
 516   .ui-toast-message {
 517     font-family: $main-fonts;
 518     background-color: var(--mainBackgroundColor) !important;
 519     border-radius: 5px;
 520     box-sizing: border-box;
 521     border: 1px solid #EBEEF5 !important;
 522     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
 523     overflow: hidden;
 524
 525     &.ui-toast-message-success .glyphicon {
 526       color: #8BC34A !important;
 527     }
 528
 529     &.ui-toast-message-error .glyphicon {
 530       color: #F44336 !important;
 531     }
 532
 533     &.ui-toast-message-warn .glyphicon {
 534       color: #F1680D !important;
 535     }
 536
 537     &.ui-toast-message-info .glyphicon {
 538       color: #03A9F4 !important;
 539     }
 540
 541     .notification-block {
 542       display: flex;
 543       align-items: center;
 544       padding: 5px;
 545
 546       .message {
 547         flex-grow: 1;
 548
 549         h3 {
 550           font-size: 21px;
 551         }
 552
 553         p {
 554           font-size: 15px;
 555           margin-bottom: 0;
 556         }
 557       }
 558
 559       .glyphicon {
 560         font-size: 32px;
 561         margin-right: 5px;
 562       }
 563     }
 564   }
 565 }
 566
 567 .ui-widget {
 568   font-family: $main-fonts !important;
 569 }