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 // PrimeNG calendar tweaks
 307 p-calendar .ui-datepicker {
 308   a {
 309     @include disable-default-a-behaviour;
 310   }
 311
 312   .ui-datepicker-header {
 313
 314     .ui-datepicker-year {
 315       margin-left: 5px;
 316     }
 317
 318     .ui-datepicker-next {
 319       @extend .glyphicon-chevron-right;
 320       @include glyphicon-light;
 321
 322       color: #000 !important;
 323       text-align: right;
 324
 325       .pi.pi-chevron-right {
 326         display: none !important;
 327       }
 328     }
 329
 330     .ui-datepicker-prev {
 331       @extend .glyphicon-chevron-left;
 332       @include glyphicon-light;
 333
 334       color: #000 !important;
 335       text-align: left;
 336
 337       .pi.pi-chevron-left {
 338         display: none !important;
 339       }
 340     }
 341   }
 342
 343   .ui-timepicker {
 344
 345     .pi.pi-chevron-up {
 346       @extend .glyphicon-chevron-up;
 347       @include glyphicon-light;
 348
 349       color: #000 !important;
 350     }
 351
 352     .pi.pi-chevron-down {
 353       @extend .glyphicon-chevron-down;
 354       @include glyphicon-light;
 355
 356       color: #000 !important;
 357     }
 358   }
 359 }
 360
 361 p-tablecheckbox:hover div .ui-chkbox-box {
 362   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 363 }
 364
 365 .ui-chkbox {
 366
 367   &, .ui-chkbox-box {
 368     width: 18px !important;
 369     height: 18px !important;
 370   }
 371
 372   .ui-chkbox-box {
 373     &.ui-state-active {
 374       border-color: pvar(--mainColor) !important;
 375       background-color: pvar(--mainColor) !important;
 376     }
 377
 378     .ui-chkbox-icon {
 379       position: relative;
 380       overflow: visible !important;
 381
 382       &:after {
 383         content: '';
 384         position: absolute;
 385         top: 1px;
 386         left: 6px;
 387         width: 5px;
 388         height: 12px;
 389         opacity: 0;
 390         transform: rotate(45deg) scale(0);
 391         border-right: 2px solid pvar(--mainBackgroundColor);
 392         border-bottom: 2px solid pvar(--mainBackgroundColor);
 393       }
 394
 395       &.pi-check:after {
 396         opacity: 1;
 397         transform: rotate(45deg) scale(1);
 398       }
 399     }
 400   }
 401 }
 402
 403 p-inputswitch {
 404   height: 26px;
 405
 406   .ui-inputswitch-checked .ui-inputswitch-slider {
 407     background-color: pvar(--mainColor) !important;
 408   }
 409
 410   &.small {
 411     height: 20px;
 412
 413     .ui-inputswitch {
 414       width: 2.5em !important;
 415       height: 1.45em !important;
 416
 417       .ui-inputswitch-slider::before {
 418         height: 1em !important;
 419         width: 1em !important;
 420       }
 421     }
 422
 423     .ui-inputswitch-checked .ui-inputswitch-slider::before {
 424       transform: translateX(1em) !important;
 425     }
 426   }
 427 }
 428
 429 p-toast {
 430   .ui-toast {
 431     z-index: z(notification) !important;
 432
 433     .ui-toast-close-icon {
 434       font-family: "Glyphicons Halflings";
 435       opacity: 0;
 436
 437       &:after {
 438         content: "\e014";
 439       }
 440     }
 441
 442     &:hover .ui-toast-close-icon {
 443       opacity: .3;
 444     }
 445   }
 446
 447   .ui-toast-message {
 448     font-family: $main-fonts;
 449     background-color: pvar(--mainBackgroundColor) !important;
 450     color: pvar(--mainForegroundColor) !important;
 451     border-radius: 5px;
 452     box-sizing: border-box;
 453     border: 1px solid #EBEEF5 !important;
 454     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
 455     overflow: hidden;
 456
 457     &.ui-toast-message-success .glyphicon {
 458       color: #8BC34A !important;
 459     }
 460
 461     &.ui-toast-message-error .glyphicon {
 462       color: #F44336 !important;
 463     }
 464
 465     &.ui-toast-message-warn .glyphicon {
 466       color: #F1680D !important;
 467     }
 468
 469     &.ui-toast-message-info .glyphicon {
 470       color: #03A9F4 !important;
 471     }
 472
 473     .notification-block {
 474       display: flex;
 475       align-items: center;
 476       padding: 5px;
 477
 478       .message {
 479         flex-grow: 1;
 480
 481         h3 {
 482           font-size: 21px;
 483         }
 484
 485         p {
 486           font-size: 15px;
 487           margin-bottom: 0;
 488         }
 489       }
 490
 491       .glyphicon {
 492         font-size: 32px;
 493         margin-right: 5px;
 494       }
 495     }
 496   }
 497 }
 498
 499 .ui-widget {
 500   font-family: $main-fonts !important;
 501 }