$ibo-datatable--padding-y: 2em !default; $ibo-datatable-cell-row--line-height: 30px !default; $ibo-datatable-cell-row--padding-x: 1em !default; $ibo-datatable-cell-row--link--color: $ibo-color-primary-600 !default; $ibo-datatable-row--odd--background-color: $ibo-color-white-200 !default; $ibo-datatable-row--even--background-color: $ibo-color-white-100 !default; $ibo-datatable--toolbar--elements--padding-top: 0.755em !default; $ibo-datatable--toolbar--length--padding-right: 0.5em !default; $ibo-datatable--toolbar--length--select--height: 18px !default; $ibo-datatable--toolbar--length--select--width: unset !default; $ibo-datatable--toolbar--length--select--padding-y: 1px !default; $ibo-datatable--toolbar--length--select--padding-x: 2px !default; $ibo-datatable--toolbar--info--padding-right: 2em !default; $ibo-datatable--toolbar--info--padding-left: 0em !default; $ibo-datatable--toolbar--info--line-height: $ibo-datatable--toolbar--length--select--height + $ibo-datatable--toolbar--length--select--padding-y !default; $ibo-datatable--select-info--padding-left: 2em !default; $ibo-datatable--pagination--color: $ibo-color-grey-800 !default; $ibo-datatable--pagination--position-x: 1.21% !default; $ibo-datatable--pagination--position-top: 91.58% !default; $ibo-datatable--pagination--position-bottom: 4.85% !default; $ibo-datatable--pagination--button-margin-x: 0.5em !default; $ibo-datatable--paginate--padding-top: $ibo-datatable--toolbar--elements--padding-top !default; $ibo-datatable--paginate--padding-left: 2em !default; $ibo-datatable--paginate-button--link--color: $ibo-color-grey-800 !default; $ibo-datatable--paginate-button--link--hover--color: $ibo-color-blue-grey-200 !default; $ibo-datatable--paginate-button-active--link--color: $ibo-color-grey-900 !default; $ibo-datatable--paginate-button-active--link--background-color: $ibo-color-grey-200 !default; $ibo-datatable--paginate-button-active--link--padding-y: 2px !default; $ibo-datatable--paginate-button-active--link--padding-x: 6px !default; $ibo-datatable--paginate-button-active--link--box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.15) !default; $ibo-datatable--paginate-button-active--link--border-radius: $ibo-border-radius-300 !default; $ibo-datatable--sorting--opacity: 0.3 !default; $ibo-datatable--sorting--right: 1em !default; $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-panel--body--padding-bottom !default; .ibo-datatable { padding-bottom: $ibo-datatable--padding-y; padding-top: $ibo-datatable--padding-y; thead tr th, tbody tr td { line-height: $ibo-datatable-cell-row--line-height; padding-right: $ibo-datatable-cell-row--padding-x; padding-left: $ibo-datatable-cell-row--padding-x; @extend %ibo-font-ral-med-100; a { color: $ibo-datatable-cell-row--link--color; } } .ibo-datatable-header.sorting, .ibo-datatable-header.sorting_asc, .ibo-datatable-header.sorting_desc { cursor: pointer; } tbody tr:nth-child(odd) { background-color: $ibo-datatable-row--odd--background-color; } tbody tr:nth-child(even) { background-color: $ibo-datatable-row--even--background-color; } } .dataTables_length { @extend %ibo-font-ral-med-100; color: $ibo-color-grey-700; position: relative; float: right; padding-top: $ibo-datatable--toolbar--elements--padding-top; padding-right: $ibo-datatable--toolbar--length--padding-right; select{ @extend .ibo-input; @extend .ibo-input-select; display: inline-block; height: $ibo-datatable--toolbar--length--select--height; width: $ibo-datatable--toolbar--length--select--width; padding: $ibo-datatable--toolbar--length--select--padding-y $ibo-datatable--toolbar--length--select--padding-x; @extend %ibo-font-ral-med-100; } } .dataTables_info { @extend %ibo-font-ral-med-100; color: $ibo-color-grey-700; position: relative; float: right; padding-top: $ibo-datatable--toolbar--elements--padding-top; padding-right: $ibo-datatable--toolbar--info--padding-right; padding-left: $ibo-datatable--toolbar--info--padding-left; line-height: $ibo-datatable--toolbar--info--line-height; } .select-info { padding-left: $ibo-datatable--select-info--padding-left; } .pagination { color: $ibo-datatable--pagination--color; left: $ibo-datatable--pagination--position-x; right: $ibo-datatable--pagination--position-x; top: $ibo-datatable--pagination--position-top; bottom: $ibo-datatable--pagination--position-bottom; .paginate_button { margin-left: $ibo-datatable--pagination--button-margin-x; margin-right: $ibo-datatable--pagination--button-margin-x; } } .dataTables_paginate { float: left; padding-top: $ibo-datatable--paginate--padding-top; padding-left: $ibo-datatable--paginate--padding-left; } .paginate_button { display: inline-block; box-sizing: border-box; } .paginate_button a{ @extend %ibo-font-ral-med-100; color: $ibo-datatable--paginate-button--link--color; } .paginate_button a:hover { color: $ibo-datatable--paginate-button--link--hover--color; } .paginate_button.active a { @extend %ibo-font-ral-med-100; color: $ibo-datatable--paginate-button-active--link--color; background-color: $ibo-datatable--paginate-button-active--link--background-color; padding: $ibo-datatable--paginate-button-active--link--padding-y $ibo-datatable--paginate-button-active--link--padding-x; box-shadow: $ibo-datatable--paginate-button-active--link--box-shadow; border-radius: $ibo-border-radius-300; } .ibo-datatable thead tr th{ position: relative; } .ibo-datatable thead tr th.sorting::after{ position: absolute; font-family: "Font Awesome 5 Free"; content: "\f0dc"; font-weight: 900; opacity: $ibo-datatable--sorting--opacity; right: $ibo-datatable--sorting--right; } .ibo-datatable thead tr th.sorting_desc:after{ position: absolute; font-family: "Font Awesome 5 Free"; content: "\f0d7"; font-weight: 900; right: $ibo-datatable--sorting--right; } .ibo-datatable thead tr th.sorting_asc:after{ position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0d8"; right: $ibo-datatable--sorting--right; } .ibo-datatable-panel > .ibo-panel--body { padding: $ibo-datatable-panel--body--padding; } // For cancel / OK / next... selection validation buttons .ibo-datatable--selection-validation-buttons-toolbar { clear: both; }