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