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