client/src/sass/primeng-custom.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 @import '~primeng/resources/primeng.css';
   5 @import '~primeng/resources/themes/bootstrap/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   font-size: 15px !important;
  16
  17   .ui-table-caption {
  18     border: none;
  19
  20     .caption {
  21       height: 40px;
  22       display: flex;
  23       align-items: center;
  24     }
  25   }
  26
  27   td {
  28     padding-left: 15px !important;
  29
  30     &:not(.action-cell) {
  31       overflow: hidden !important;
  32       text-overflow: ellipsis !important;
  33       white-space: nowrap !important;
  34     }
  35   }
  36
  37   tr {
  38     background-color: var(--mainBackgroundColor) !important;
  39     height: 46px;
  40
  41     &.ui-state-highlight {
  42       background-color:var(--submenuColor) !important;
  43       color:var(--mainForegroundColor) !important;
  44     }
  45   }
  46
  47   .ui-table-tbody {
  48     tr {
  49       &:hover {
  50         background-color: var(--submenuColor) !important;
  51       }
  52
  53       &:not(:hover) {
  54         .action-cell * {
  55           display: none !important;
  56         }
  57       }
  58
  59       &:first-child td {
  60         border-top: none !important;
  61       }
  62
  63       &:last-child td {
  64         border-bottom: none !important;
  65       }
  66     }
  67
  68     .expander {
  69       cursor: pointer;
  70       position: relative;
  71       top: 1px;
  72     }
  73   }
  74
  75   th {
  76     border: none !important;
  77     border-bottom: 1px solid !important;
  78     border-color: var(--submenuColor) !important;
  79     text-align: left !important;
  80     padding: 5px 0 5px 15px !important;
  81     font-weight: $font-semibold !important;
  82     color: var(--mainForegroundColor) !important;
  83
  84     &.ui-sortable-column:hover {
  85       background-color: var(--submenuColor) !important;
  86       border: 1px solid !important;
  87       border-color: var(--submenuColor) !important;
  88       border-width: 0 1px !important;
  89
  90       &:first-child {
  91         border-width: 0 1px 0 0 !important;
  92       }
  93     }
  94
  95     &.ui-state-highlight {
  96       background-color:var(--submenuColor) !important;
  97
  98       .pi {
  99         @extend .glyphicon;
 100
 101         color: #000;
 102         font-size: 11px;
 103         top: 0;
 104
 105         &.pi-sort-up {
 106           @extend .glyphicon-triangle-top;
 107         }
 108
 109         &.pi-sort-down {
 110           @extend .glyphicon-triangle-bottom;
 111         }
 112       }
 113     }
 114   }
 115
 116   .action-cell {
 117     width: 250px !important;
 118     padding: 0 !important;
 119     text-align: center;
 120
 121     my-edit-button + my-delete-button {
 122       margin-left: 5px;
 123     }
 124   }
 125
 126   p-paginator {
 127     .ui-paginator-bottom {
 128       background-color: var(--mainBackgroundColor) !important;
 129       position: relative;
 130       border: none;
 131       border-top: 1px solid !important;
 132       border-color: var(--submenuColor) !important;
 133       height: 40px;
 134       display: flex;
 135       justify-content: center;
 136       align-items: center;
 137
 138       .ui-paginator-first,
 139       .ui-paginator-prev,
 140       .ui-paginator-next,
 141       .ui-paginator-last {
 142         @include glyphicon-light;
 143         padding: 5px 2px;
 144         height: auto;
 145         outline: none;
 146         font-size: 13px;
 147         top: -1px;
 148
 149         &.ui-state-disabled:hover {
 150           background-color: #fff !important;
 151         }
 152
 153         &.ui-paginator-first {
 154           @extend .glyphicon-step-backward;
 155         }
 156
 157         &.ui-paginator-prev {
 158           @extend .glyphicon-chevron-left;
 159
 160           margin-right: 10px;
 161         }
 162
 163         &.ui-paginator-next {
 164           @extend .glyphicon-chevron-right;
 165
 166           margin-left: 10px;
 167         }
 168
 169         &.ui-paginator-last {
 170           @extend .glyphicon-step-forward;
 171         }
 172       }
 173
 174       .ui-paginator-pages {
 175         height: auto !important;
 176
 177         a {
 178           color: #000 !important;
 179           font-weight: $font-semibold !important;
 180           margin: 0 10px !important;
 181           outline: 0 !important;
 182           border-radius: 3px !important;
 183           padding: 5px 2px !important;
 184           height: auto !important;
 185
 186           &.ui-state-active {
 187             &, &:hover, &:active, &:focus {
 188               color: #fff !important;
 189               background-color: var(--mainColor) !important;
 190             }
 191           }
 192         }
 193       }
 194     }
 195   }
 196 }
 197
 198 // PrimeNG calendar tweaks
 199 p-calendar .ui-datepicker {
 200   a {
 201     @include disable-default-a-behaviour;
 202   }
 203
 204   .ui-datepicker-header {
 205
 206     .ui-datepicker-year {
 207       margin-left: 5px;
 208     }
 209
 210     .ui-datepicker-next {
 211       @extend .glyphicon-chevron-right;
 212       @include glyphicon-light;
 213     }
 214
 215     .ui-datepicker-prev {
 216       @extend .glyphicon-chevron-left;
 217       @include glyphicon-light;
 218     }
 219   }
 220
 221   .ui-timepicker {
 222
 223     .pi.pi-chevron-up {
 224       @extend .glyphicon-chevron-up;
 225       @include glyphicon-light;
 226     }
 227
 228     .pi.pi-chevron-down {
 229       @extend .glyphicon-chevron-down;
 230       @include glyphicon-light;
 231     }
 232   }
 233 }
 234
 235 .ui-chkbox-box {
 236   &.ui-state-active {
 237     border-color: var(--mainColor) !important;
 238     background-color: var(--mainColor) !important;
 239   }
 240
 241   .ui-chkbox-icon {
 242     position: relative;
 243
 244     &:after {
 245       content: '';
 246       position: absolute;
 247       left: 5px;
 248       width: 5px;
 249       height: 12px;
 250       opacity: 0;
 251       transform: rotate(45deg) scale(0);
 252       border-right: 2px solid var(--mainBackgroundColor);
 253       border-bottom: 2px solid var(--mainBackgroundColor);
 254     }
 255
 256     &.pi-check:after {
 257       opacity: 1;
 258       transform: rotate(45deg) scale(1);
 259     }
 260   }
 261 }