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 // PrimeNG calendar tweaks
 236 p-calendar .ui-datepicker {
 237   a {
 238     @include disable-default-a-behaviour;
 239   }
 240
 241   .ui-datepicker-header {
 242
 243     .ui-datepicker-year {
 244       margin-left: 5px;
 245     }
 246
 247     .ui-datepicker-next {
 248       @extend .glyphicon-chevron-right;
 249       @include glyphicon-light;
 250
 251       color: #000 !important;
 252       text-align: right;
 253
 254       .pi.pi-chevron-right {
 255         display: none !important;
 256       }
 257     }
 258
 259     .ui-datepicker-prev {
 260       @extend .glyphicon-chevron-left;
 261       @include glyphicon-light;
 262
 263       color: #000 !important;
 264       text-align: left;
 265
 266       .pi.pi-chevron-left {
 267         display: none !important;
 268       }
 269     }
 270   }
 271
 272   .ui-timepicker {
 273
 274     .pi.pi-chevron-up {
 275       @extend .glyphicon-chevron-up;
 276       @include glyphicon-light;
 277
 278       color: #000 !important;
 279     }
 280
 281     .pi.pi-chevron-down {
 282       @extend .glyphicon-chevron-down;
 283       @include glyphicon-light;
 284
 285       color: #000 !important;
 286     }
 287   }
 288 }
 289
 290 .ui-chkbox {
 291
 292   &, .ui-chkbox-box {
 293     width: 18px !important;
 294     height: 18px !important;
 295   }
 296
 297   .ui-chkbox-box {
 298     &.ui-state-active {
 299       border-color: var(--mainColor) !important;
 300       background-color: var(--mainColor) !important;
 301     }
 302
 303     .ui-chkbox-icon {
 304       position: relative;
 305       overflow: visible !important;
 306
 307       &:after {
 308         content: '';
 309         position: absolute;
 310         top: 1px;
 311         left: 6px;
 312         width: 5px;
 313         height: 12px;
 314         opacity: 0;
 315         transform: rotate(45deg) scale(0);
 316         border-right: 2px solid var(--mainBackgroundColor);
 317         border-bottom: 2px solid var(--mainBackgroundColor);
 318       }
 319
 320       &.pi-check:after {
 321         opacity: 1;
 322         transform: rotate(45deg) scale(1);
 323       }
 324     }
 325   }
 326 }
 327
 328 p-inputswitch {
 329   .ui-inputswitch-checked .ui-inputswitch-slider {
 330     background-color: var(--mainColor) !important;
 331   }
 332 }
 333
 334 p-toast {
 335   .ui-toast {
 336     // Modal is 10005
 337     z-index: 10010 !important;
 338   }
 339
 340   .ui-toast-message {
 341     font-family: $main-fonts;
 342
 343     &.ui-toast-message-success {
 344       color: #fff !important;
 345       background-color: #8BC34A !important;
 346     }
 347
 348     &.ui-toast-message-error {
 349       color: #fff !important;
 350       background-color: #F44336 !important;
 351     }
 352
 353     &.ui-toast-message-info {
 354       color: #fff !important;
 355       background-color: #03A9F4 !important;
 356     }
 357
 358     &.ui-toast-message-info {
 359       color: #fff !important;
 360       background-color: #03A9F4 !important;
 361     }
 362
 363     .notification-block {
 364       display: flex;
 365       align-items: center;
 366       padding: 5px;
 367
 368       .message {
 369         flex-grow: 1;
 370
 371         h3 {
 372           font-size: 21px;
 373         }
 374
 375         p {
 376           font-size: 15px;
 377           margin-bottom: 0;
 378         }
 379       }
 380
 381       .glyphicon {
 382         font-size: 32px;
 383         margin-right: 5px;
 384       }
 385     }
 386   }
 387 }
 388
 389 .ui-widget {
 390   font-family: $main-fonts !important;
 391 }