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