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