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