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