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