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-pages {
 116         height: auto !important;
 117
 118         a {
 119           color: #000 !important;
 120           font-weight: $font-semibold !important;
 121           margin-right: 20px !important;
 122           outline: 0 !important;
 123           border-radius: 3px !important;
 124           padding: 5px 2px !important;
 125           height: auto !important;
 126
 127           &.ui-state-active {
 128             &, &:hover, &:active, &:focus {
 129               color: #fff !important;
 130               background-color: $orange-color !important;
 131             }
 132           }
 133         }
 134       }
 135     }
 136   }
 137 }
 138
 139 // PrimeNG calendar tweaks
 140 p-calendar .ui-datepicker {
 141   a {
 142     @include disable-default-a-behaviour;
 143   }
 144
 145   .ui-datepicker-header {
 146
 147     .ui-datepicker-year {
 148       margin-left: 5px;
 149     }
 150
 151     .ui-datepicker-next {
 152       @extend .glyphicon-chevron-right;
 153       @include glyphicon-light;
 154     }
 155
 156     .ui-datepicker-prev {
 157       @extend .glyphicon-chevron-left;
 158       @include glyphicon-light;
 159     }
 160   }
 161
 162   .ui-timepicker {
 163
 164     .pi.pi-chevron-up {
 165       @extend .glyphicon-chevron-up;
 166       @include glyphicon-light;
 167     }
 168
 169     .pi.pi-chevron-down {
 170       @extend .glyphicon-chevron-down;
 171       @include glyphicon-light;
 172     }
 173   }
 174 }