diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts index 9e6dcb415..788bcb0b9 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts @@ -24,6 +24,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn lengthMenu: [this.selectOptionValues, this.selectOptionNames], buttons: [ { + text: "Column Visibility" + " ▼", extend: 'colvis', columns: ':not(.hidden-col)' }, diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 8b64ef4aa..43c004314 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -78,11 +78,15 @@ General Datatable adjustment styles .dt-buttons { .dt-button { - background-image: linear-gradient($info); + color: #ffffff; + font-family: roboto, arial, sans-serif; + background: $primary; + border: 1px solid transparent; + border-radius: 5px; } .dt-button:hover:not(.disabled) { - background-image: linear-gradient($info); - opacity: 0.5; + background: $primary; + border: 1px solid transparent; } .dt-button.disabled { @@ -90,3 +94,43 @@ General Datatable adjustment styles opacity: 0.5; } } + +.dataTables_paginate { + .paginate_button { + &:hover { + color: #ffffff; + background: $primary; + border: 1px solid transparent; + } + } +} + +.dataTables_wrapper { + padding-top: 10px; + padding-right: 10px; +} + +.dataTables_wrapper input { + border: 1px solid #ced4da; + border-radius: 5px; + outline: none; +} + +.dataTables_wrapper input:focus { + border: 1px solid #80bdff; + box-shadow: 0px 0px 2px 3px #bfdeff; + -webkit-box-shadow: 0px 0px 2px 3px #bfdeff; + -moz-box-shadow: 0px 0px 2px 3px #bfdeff; +} + +.dataTables_wrapper select { + border: 1px solid #ced4da; + outline: none; +} + +.dataTables_wrapper select:focus { + border: 1px solid #80bdff; + box-shadow: 0px 0px 2px 3px #bfdeff; + -webkit-box-shadow: 0px 0px 2px 3px #bfdeff; + -moz-box-shadow: 0px 0px 2px 3px #bfdeff; +}