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