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