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         left: 0;
 195       }
 196
 197       .ui-paginator-current {
 198         position: absolute;
 199         right: 0;
 200       }
 201
 202       .ui-paginator-first,
 203       .ui-paginator-prev,
 204       .ui-paginator-next,
 205       .ui-paginator-last {
 206         @include glyphicon-light;
 207         padding: 5px 2px;
 208         height: auto;
 209         outline: none;
 210         font-size: 13px;
 211         top: -1px;
 212
 213         &.focus-within,
 214         &:focus {
 215           box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
 216         }
 217
 218         &.ui-state-disabled:hover {
 219           background-color: #fff !important;
 220         }
 221
 222         &.ui-paginator-first {
 223           @extend .glyphicon-step-backward;
 224         }
 225
 226         &.ui-paginator-prev {
 227           @extend .glyphicon-chevron-left;
 228
 229           margin-right: 10px;
 230         }
 231
 232         &.ui-paginator-next {
 233           @extend .glyphicon-chevron-right;
 234
 235           margin-left: 10px;
 236         }
 237
 238         &.ui-paginator-last {
 239           @extend .glyphicon-step-forward;
 240         }
 241       }
 242
 243       .ui-paginator-pages {
 244         height: auto !important;
 245
 246         .ui-paginator-page {
 247           &.focus-within,
 248           &:focus {
 249             box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
 250           }
 251         }
 252
 253         a {
 254           color: var(--mainForegroundColor) !important;
 255           font-weight: $font-semibold !important;
 256           margin: 0 5px !important;
 257           outline: 0 !important;
 258           border-radius: 3px !important;
 259           padding: 5px 2px !important;
 260           height: auto !important;
 261           line-height: initial !important;
 262
 263           &.ui-state-active {
 264             &, &:hover, &:active, &:focus {
 265               color: #fff !important;
 266               background-color: var(--mainColor) !important;
 267             }
 268           }
 269         }
 270       }
 271     }
 272   }
 273 }
 274
 275 // overflow data table
 276 @mixin overflow-datatable ($table-min-width, $horizontal-margins) {
 277   p-table {
 278     .ui-table-wrapper {
 279       overflow-x: auto;
 280       max-width: calc(100vw - #{$horizontal-margins * 2});
 281
 282       table {
 283         min-width: $table-min-width;
 284       }
 285     }
 286
 287     p-paginator .ui-paginator-bottom {
 288       display: block;
 289
 290       .ui-paginator-current {
 291         position: relative;
 292         display: block;
 293       }
 294
 295       a, .ui-paginator-pages {
 296         vertical-align: middle;
 297       }
 298     }
 299   }
 300 }
 301
 302 // multiselect customizations
 303 p-multiselect {
 304   .ui-multiselect {
 305     border-color: #C6C6C6;
 306
 307     &:not(.ui-state-disabled) {
 308       &:hover {
 309         border-color: #C6C6C6;
 310       }
 311
 312       &:focus,
 313       &.ui-state-focus {
 314         box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
 315       }
 316     }
 317   }
 318
 319   .ui-multiselect-label {
 320     font-size: 15px !important;
 321     padding: 4px 30px 4px 12px !important;
 322
 323     $width: 338px;
 324     width: $width !important;
 325
 326     @media screen and (max-width: $width) {
 327       width: 100% !important;
 328     }
 329   }
 330
 331   .pi.pi-chevron-down{
 332     margin-left: 0 !important;
 333
 334     &::after {
 335       @include select-arrow-down;
 336
 337       right: 0;
 338       margin-top: 6px;
 339     }
 340   }
 341
 342   .ui-chkbox-icon {
 343     //position: absolute !important;
 344     width: 18px;
 345     height: 18px;
 346     //left: 0;
 347
 348     //&::after {
 349     //  left: -2px !important;
 350     //}
 351   }
 352
 353   .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
 354     background-color: var(--mainColorLighter);
 355   }
 356
 357   .ui-inputtext:enabled:focus:not(.ui-state-error) {
 358     border-color: var(--mainColorLighter) !important;
 359     box-shadow: none;
 360   }
 361 }
 362
 363 // PrimeNG calendar tweaks
 364 p-calendar .ui-datepicker {
 365   a {
 366     @include disable-default-a-behaviour;
 367   }
 368
 369   .ui-datepicker-header {
 370
 371     .ui-datepicker-year {
 372       margin-left: 5px;
 373     }
 374
 375     .ui-datepicker-next {
 376       @extend .glyphicon-chevron-right;
 377       @include glyphicon-light;
 378
 379       color: #000 !important;
 380       text-align: right;
 381
 382       .pi.pi-chevron-right {
 383         display: none !important;
 384       }
 385     }
 386
 387     .ui-datepicker-prev {
 388       @extend .glyphicon-chevron-left;
 389       @include glyphicon-light;
 390
 391       color: #000 !important;
 392       text-align: left;
 393
 394       .pi.pi-chevron-left {
 395         display: none !important;
 396       }
 397     }
 398   }
 399
 400   .ui-timepicker {
 401
 402     .pi.pi-chevron-up {
 403       @extend .glyphicon-chevron-up;
 404       @include glyphicon-light;
 405
 406       color: #000 !important;
 407     }
 408
 409     .pi.pi-chevron-down {
 410       @extend .glyphicon-chevron-down;
 411       @include glyphicon-light;
 412
 413       color: #000 !important;
 414     }
 415   }
 416 }
 417
 418 p-tablecheckbox:hover div .ui-chkbox-box {
 419   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 420 }
 421
 422 .ui-chkbox {
 423
 424   &, .ui-chkbox-box {
 425     width: 18px !important;
 426     height: 18px !important;
 427   }
 428
 429   .ui-chkbox-box {
 430     &.ui-state-active {
 431       border-color: var(--mainColor) !important;
 432       background-color: var(--mainColor) !important;
 433     }
 434
 435     .ui-chkbox-icon {
 436       position: relative;
 437       overflow: visible !important;
 438
 439       &:after {
 440         content: '';
 441         position: absolute;
 442         top: 1px;
 443         left: 6px;
 444         width: 5px;
 445         height: 12px;
 446         opacity: 0;
 447         transform: rotate(45deg) scale(0);
 448         border-right: 2px solid var(--mainBackgroundColor);
 449         border-bottom: 2px solid var(--mainBackgroundColor);
 450       }
 451
 452       &.pi-check:after {
 453         opacity: 1;
 454         transform: rotate(45deg) scale(1);
 455       }
 456     }
 457   }
 458 }
 459
 460 p-inputswitch {
 461   height: 26px;
 462
 463   .ui-inputswitch-checked .ui-inputswitch-slider {
 464     background-color: var(--mainColor) !important;
 465   }
 466
 467   &.small {
 468     height: 20px;
 469
 470     .ui-inputswitch {
 471       width: 2.5em !important;
 472       height: 1.45em !important;
 473
 474       .ui-inputswitch-slider::before {
 475         height: 1em !important;
 476         width: 1em !important;
 477       }
 478     }
 479
 480     .ui-inputswitch-checked .ui-inputswitch-slider::before {
 481       transform: translateX(1em) !important;
 482     }
 483   }
 484 }
 485
 486 p-toast {
 487   .ui-toast {
 488     z-index: z(notification) !important;
 489
 490     .ui-toast-close-icon {
 491       font-family: "Glyphicons Halflings";
 492       opacity: 0;
 493
 494       &:after {
 495         content: "\e014";
 496       }
 497     }
 498
 499     &:hover .ui-toast-close-icon {
 500       opacity: .3;
 501     }
 502   }
 503
 504   .ui-toast-message {
 505     font-family: $main-fonts;
 506     background-color: var(--mainBackgroundColor) !important;
 507     border-radius: 5px;
 508     box-sizing: border-box;
 509     border: 1px solid #EBEEF5 !important;
 510     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
 511     overflow: hidden;
 512
 513     &.ui-toast-message-success .glyphicon {
 514       color: #8BC34A !important;
 515     }
 516
 517     &.ui-toast-message-error .glyphicon {
 518       color: #F44336 !important;
 519     }
 520
 521     &.ui-toast-message-warn .glyphicon {
 522       color: #F1680D !important;
 523     }
 524
 525     &.ui-toast-message-info .glyphicon {
 526       color: #03A9F4 !important;
 527     }
 528
 529     .notification-block {
 530       display: flex;
 531       align-items: center;
 532       padding: 5px;
 533
 534       .message {
 535         flex-grow: 1;
 536
 537         h3 {
 538           font-size: 21px;
 539         }
 540
 541         p {
 542           font-size: 15px;
 543           margin-bottom: 0;
 544         }
 545       }
 546
 547       .glyphicon {
 548         font-size: 32px;
 549         margin-right: 5px;
 550       }
 551     }
 552   }
 553 }
 554
 555 .ui-widget {
 556   font-family: $main-fonts !important;
 557 }