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