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