Owen Leonard
85d09997c9
This patch adds responsive handling of text labels to the columns configuration and export buttons. To test, apply the patch and clear your browser cache if necessary. - View a page with column configuration, e.g. Administration -> Patron categories. - At wider browser widths the buttons should have text labels. - At narrower browser widths the labels should be hidden. Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
313 lines
No EOL
7.4 KiB
CSS
313 lines
No EOL
7.4 KiB
CSS
input.search_init {
|
|
color: #999999;
|
|
}
|
|
.sorting_asc {
|
|
padding-right: 19px;
|
|
background: url("../img/asc.gif") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_desc {
|
|
padding-right: 19px;
|
|
background: url("../img/desc.gif") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting {
|
|
padding-right: 19px;
|
|
background: url("../img/ascdesc.gif") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_asc_disabled {
|
|
padding-right: 19px;
|
|
background: url("../img/datatables/sort_asc_disabled.png") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_desc_disabled {
|
|
padding-right: 19px;
|
|
background: url("../img/datatables/sort_desc_disabled.png") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_disabled {
|
|
padding-right: 19px;
|
|
background-color: #EEEEEE;
|
|
}
|
|
|
|
div.top {clear : both; }
|
|
|
|
div.top.pager,
|
|
div.bottom.pager {
|
|
background-color : #E5E5E5;
|
|
padding : 0;
|
|
}
|
|
|
|
div.bottom.pager div.dataTables_paginate.paging_full_numbers,
|
|
div.bottom.pager div.dataTables_paginate.paging_four_button {
|
|
border-right-width : 0;
|
|
}
|
|
|
|
div.dataTables_filter,
|
|
div.dataTables_length,
|
|
div.dataTables_info,
|
|
div.dataTables_paginate {
|
|
float: left;
|
|
padding : .3em .5em .3em .5em;
|
|
}
|
|
|
|
div.dataTables_filter label,
|
|
div.dataTables_length label,
|
|
div.dataTables_info label,
|
|
div.dataTables_paginate label,
|
|
div.dataTables_filter input,
|
|
div.dataTables_length input,
|
|
div.dataTables_info input,
|
|
div.dataTables_paginate input {
|
|
padding: 0;
|
|
}
|
|
|
|
div.dataTables_length {
|
|
border-right : 1px solid #686868;
|
|
line-height:1.9em;
|
|
}
|
|
div.dataTables_info {
|
|
border-right : 1px solid #AAA;
|
|
line-height:1.9em;
|
|
}
|
|
div.dataTables_length,
|
|
div.dataTables_filter {
|
|
border-left : 1px solid #FFF;
|
|
border-right : 1px solid #AAAAAA;
|
|
}
|
|
div.dataTables_length label {
|
|
display: inline;
|
|
}
|
|
div.dataTables_filter {
|
|
line-height : inherit;
|
|
}
|
|
div.dataTables_paginate {
|
|
padding : 0;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers a.paginate_active,
|
|
.paging_full_numbers > span > span {
|
|
border-right : 1px solid #AAA;
|
|
border-left : 1px solid #FFF;
|
|
display : block;
|
|
float : left;
|
|
line-height:1.9em;
|
|
padding : 0.4em 0.7em;
|
|
}
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers a.paginate_active {
|
|
cursor: pointer;
|
|
}
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers > span > span {
|
|
background-color : #FFF;
|
|
background-repeat: no-repeat;
|
|
color : #0000CC;
|
|
}
|
|
.paging_full_numbers a.paginate_button.first {
|
|
background-color: transparent;
|
|
background-image : url('../img/first.png');
|
|
background-position : 3px center;
|
|
padding-left : 23px;
|
|
}
|
|
.paging_full_numbers a.paginate_button.previous {
|
|
background-color: transparent;
|
|
background-image : url('../img/prev.png');
|
|
background-position : 3px center;
|
|
padding-left : 23px;
|
|
}
|
|
.paging_full_numbers a.paginate_button.next {
|
|
background-color: transparent;
|
|
background-image : url('../img/next.png');
|
|
background-position : 93% center;
|
|
padding-right : 25px;
|
|
}
|
|
.paging_full_numbers a.paginate_button.last {
|
|
background-color: transparent;
|
|
background-image : url('../img/last.png');
|
|
background-position : 93% center;
|
|
border-right : 0;
|
|
padding-right : 25px;
|
|
}
|
|
|
|
div.bottom.pager .paging_full_numbers a.paginate_button.last {
|
|
border-right-width : 0;
|
|
}
|
|
|
|
div.bottom.pager div:first-child {
|
|
border-left : 0;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_active {
|
|
background-color : #FFFFEA;
|
|
color : #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button:hover {
|
|
background-color: #FFC;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button.paginate_button_disabled {
|
|
color : #666;
|
|
}
|
|
|
|
/* Two-button version */
|
|
|
|
div.dataTables_paginate.paging_two_button,
|
|
div.dataTables_paginate.paging_four_button {
|
|
background-color : transparent;
|
|
border-right : 1px solid #686868;
|
|
border-left : 1px solid #FFF;
|
|
line-height : 2.5em;
|
|
}
|
|
.paginate_disabled_first,
|
|
.paginate_enabled_first,
|
|
.paginate_disabled_previous,
|
|
.paginate_enabled_previous,
|
|
.paginate_disabled_next,
|
|
.paginate_enabled_next,
|
|
.paginate_disabled_last,
|
|
.paginate_enabled_last {
|
|
cursor: pointer;
|
|
*cursor: hand;
|
|
padding: .2em 0;
|
|
}
|
|
|
|
.paginate_disabled_previous,
|
|
.paginate_enabled_previous,
|
|
.paginate_disabled_next,
|
|
.paginate_enabled_next {
|
|
color: #111 !important;
|
|
}
|
|
|
|
.paginate_disabled_first,
|
|
.paginate_enabled_first,
|
|
.paginate_disabled_previous,
|
|
.paginate_enabled_previous {
|
|
padding-left: 23px;
|
|
}
|
|
.paginate_disabled_next,
|
|
.paginate_enabled_next,
|
|
.paginate_disabled_last,
|
|
.paginate_enabled_last {
|
|
padding-right: 23px;
|
|
margin-left: 10px;
|
|
margin-right : .3em;
|
|
}
|
|
|
|
.paging_four_button .paginate_disabled_first,
|
|
.paging_four_button .paginate_disabled_previous,
|
|
.paging_four_button .paginate_enabled_first,
|
|
.paging_four_button .paginate_enabled_previous {
|
|
margin-left : .3em;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button.first.disabled,
|
|
.paginate_disabled_first {
|
|
background: transparent url("../img/first-disabled.png") no-repeat 3px top;
|
|
color: #666;
|
|
cursor: default;
|
|
}
|
|
.paginate_enabled_first {
|
|
background: transparent url("../img/first.png") no-repeat 3px top;
|
|
cursor: pointer;
|
|
}
|
|
.paging_full_numbers a.paginate_button.previous.disabled,
|
|
.paginate_disabled_previous {
|
|
background: transparent url("../img/prev-disabled.png") no-repeat 3px top;
|
|
color: #666;
|
|
cursor: default;
|
|
}
|
|
.paginate_enabled_previous {
|
|
background: transparent url("../img/prev.png") no-repeat 3px top;
|
|
cursor: pointer;
|
|
}
|
|
.paging_full_numbers a.paginate_button.next.disabled,
|
|
.paginate_disabled_next {
|
|
background: transparent url("../img/next-disabled.png") no-repeat right top;
|
|
color: #666;
|
|
cursor: default;
|
|
}
|
|
.paginate_enabled_next {
|
|
background: transparent url("../img/next.png") no-repeat right top;
|
|
cursor: pointer;
|
|
}
|
|
.paging_full_numbers a.paginate_button.last.disabled,
|
|
.paginate_disabled_last {
|
|
background: transparent url("../img/last-disabled.png") no-repeat right top;
|
|
color: #666;
|
|
cursor: default;
|
|
}
|
|
.paginate_enabled_last {
|
|
background: transparent url("../img/last.png") no-repeat right top;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button.first.disabled,
|
|
.paging_full_numbers a.paginate_button.previous.disabled,
|
|
.paging_full_numbers a.paginate_button.next.disabled,
|
|
.paging_full_numbers a.paginate_button.last.disabled {
|
|
background-position-y: 7px;
|
|
}
|
|
|
|
.dataTables_processing {
|
|
background-color: white;
|
|
border: 1px solid #999;
|
|
-webkit-box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
|
|
color: #333;
|
|
font-size: 14px;
|
|
left: 50%;
|
|
margin-left: -125px;
|
|
margin-top: -15px;
|
|
padding: 10px 14px 12px;
|
|
position: fixed;
|
|
text-align: center;
|
|
top: 50%;
|
|
}
|
|
|
|
tr.odd.selected td {
|
|
background-color: #D3D3D3;
|
|
}
|
|
|
|
tr.even.selected td {
|
|
background-color: #D3D3D3;
|
|
}
|
|
|
|
/* ColumnFilter */
|
|
span.filter_column > input[type="text"] {
|
|
font-size: 80%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Row grouping */
|
|
td.group,
|
|
table.group td.group {
|
|
background-color: #D1CFD0;
|
|
border-bottom: 2px solid #A19B9E;
|
|
border-top: 2px solid #A19B9E;
|
|
}
|
|
|
|
table.group tr.odd td {
|
|
background-color : #F3F3F3;
|
|
border : 1px solid #BCBCBC;
|
|
border-right : 1px solid #BCBCBC;
|
|
}
|
|
|
|
table.group tr.even td {
|
|
background-color: #FFF;
|
|
border-right : 1px solid #BCBCBC;
|
|
}
|
|
|
|
button.dt-button, div.dt-button, a.dt-button {
|
|
margin: 3px 3px 0;
|
|
}
|
|
|
|
.dt-button-text {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 1028px) {
|
|
.dt-button-text {
|
|
display: inline;
|
|
}
|
|
} |