Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 30952: Change tables style

Browse source 
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Solène Desvaux 2022-07-25 16:37:41 +02:00 committed by Tomas Cohen Arazi
parent 0f8ccc0a60
commit 96f9d2b9c3
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
1 changed files with 60 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss
View file

@ -1,6 +1,6 @@
table { table {
border-collapse: collapse; border-collapse: collapse;
border-right: 1px solid $table-border-color;
border-top: 1px solid $table-border-color; border-top: 1px solid $table-border-color;
.btn-group { .btn-group {
@ -70,6 +70,10 @@ table {
&.dataTable { &.dataTable {
border-collapse: collapse; border-collapse: collapse;
border: none;
margin-top: .5em;
margin-bottom: .5em;
tfoot { tfoot {
td, td,
@ -79,15 +83,20 @@ table {
} }
thead { thead {
th, th,
td { td {
border-bottom: 1px solid $table-border-color;
border-left: 1px solid $table-border-color;
padding: .5em;
border-top: none;
border-left: none;
border-right: none;
border: none;
padding: .5em;
} }
tr { tr {
background-color: #fff;
&.columnFilter { &.columnFilter {
th { th {
padding: 0; padding: 0;
@ -96,8 +105,6 @@ table {
} }
.sorting_asc { .sorting_asc {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+") no-repeat scroll right center $table-header-background;
padding-right: 19px;
&.fixed_sort { &.fixed_sort {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iOS4wMSIgdmlld0JveD0iMCAwIDYgMi4zODQiPjxwYXRoIGZpbGw9IiM5NDk0OTQiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L3N2Zz4=") no-repeat scroll right center $table-header-background; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iOS4wMSIgdmlld0JveD0iMCAwIDYgMi4zODQiPjxwYXRoIGZpbGw9IiM5NDk0OTQiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L3N2Zz4=") no-repeat scroll right center $table-header-background;
@ -107,26 +114,22 @@ table {
.sorting_desc { .sorting_desc {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=") no-repeat scroll right center $table-header-background; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=") no-repeat scroll right center $table-header-background;
padding-right: 19px;
&.fixed_sort { &.fixed_sort {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iOS4wMSIgdmlld0JveD0iMCAwIDYgMi4zODQiPjxwYXRoIGZpbGw9IiM5NDk0OTQiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvc3ZnPg==") no-repeat scroll right center $table-header-background; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iOS4wMSIgdmlld0JveD0iMCAwIDYgMi4zODQiPjxwYXRoIGZpbGw9IiM5NDk0OTQiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvc3ZnPg==") no-repeat scroll right center $table-header-background;
cursor: default; cursor: default;
} }
} }
.sorting {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==") no-repeat scroll right center $table-header-background;
padding-right: 19px;
}
} }
tbody { tbody {
border-top: 2px solid #A19B9E;
td { td {
padding: .5em; padding: .5em;
border: none;
} }
} }
} }
/* Row grouping */ /* Row grouping */
@ -154,9 +157,7 @@ table {
td, td,
th { th {
border-bottom: 1px solid $table-border-color; padding: .2em .9em;
border-left: 1px solid $table-border-color;
padding: .2em .3em;
} }
td { td {
@ -167,6 +168,24 @@ td {
white-space: nowrap; white-space: nowrap;
} }
button, a, input[type="button"]{
&.btn-default{
color: #71B443;
padding: .3em;
border: none;
background-color: transparent;
border: none;
box-shadow: none;
font-size: 100%;
&:hover, &:active, &:focus, &:active:hover, &:active:focus{
background-color: transparent;
color: #71B443;
text-decoration: underline;
}
}
}
&.borderless { &.borderless {
border: 0 none; border: 0 none;
border-collapse: separate; border-collapse: separate;
@ -197,7 +216,6 @@ td {
th { th {
background-color: $table-header-background;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -354,15 +372,17 @@ caption {
tbody { tbody {
tr { tr {
&:nth-child(odd):not(.dtrg-group) { &:nth-child(odd):not(.dtrg-group) {
td { td {
border-right: 1px solid $table-border-color; border: none;
} }
} }
&:nth-child(odd):not(.dtrg-group):not(.active):not(.ok) { &:nth-child(odd):not(.dtrg-group):not(.active):not(.ok) {
td { td {
&:not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-primary) { &:not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-primary) {
background-color: $table-odd-row; background-color: $table-odd-row;
margin: 1em;
} }
} }
} }
@ -372,7 +392,7 @@ tbody {
.dataTables_wrapper { .dataTables_wrapper {
.dataTables_processing { .dataTables_processing {
background-color: #F4F8F9; background-color: #F4F8F9;
border: 2px solid #82B4BE; border: 2px solid #538200;
border-radius: 3px; border-radius: 3px;
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .2); box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .2);
color: #333; color: #333;
@ -419,43 +439,29 @@ tbody {
} }
.paginate_button { .paginate_button {
color: #004D99 !important;
padding-bottom: 0; padding-bottom: 0;
padding-top: 0; padding-top: 0;
&.current,
&:hover, &:hover,
&:active { &:active {
background: #FFC none; border-radius: 4px;
border: 1px solid transparent; color: #666 !important;
box-shadow: none;
color: #222BAC !important;
}
&.current {
background: #E6FCB7 none;
border: 0;
color: #666;
font-weight: bold; font-weight: bold;
background: #fff;
&:hover,
&:active {
background: #E6FCB7 none;
border: 0;
box-shadow: none;
color: #666;
cursor: default;
}
} }
&.first, &.first,
&.previous, &.previous,
&.next, &.next,
&.last { &.last {
padding: 0;
&::before, &::before,
&::after { &::after {
display: inline-block; display: inline-block;
font-family: FontAwesome; font-family: FontAwesome;
width: 1em;
} }
} }
@ -464,21 +470,18 @@ tbody {
&::before { &::before {
content: "\f100"; content: "\f100";
padding-right: .5em;
} }
} }
&.previous { &.previous {
&::before { &::before {
content: "\f104"; content: "\f104";
padding-right: .5em;
} }
} }
&.next { &.next {
&::after { &::after {
content: "\f105"; content: "\f105";
padding-left: .5em;
} }
} }
@ -487,7 +490,6 @@ tbody {
&::after { &::after {
content: "\f101"; content: "\f101";
padding-left: .5em;
} }
} }
} }
@ -498,13 +500,21 @@ tbody {
font-size: 90%; font-size: 90%;
&.top { &.top {
border-top: 1px solid $table-border-color; padding: 1em 0;
padding-top: 1em; margin-top: 1em;
margin-bottom: 17px;
} }
&.bottom { &.bottom {
border-bottom: 1px solid $table-border-color;
padding-bottom: 1em; padding-bottom: 1em;
display: none;
}
div{
&.dt-buttons {
position: relative;
float: right;
}
} }
button, button,
@ -513,11 +523,13 @@ tbody {
&.dt-button { &.dt-button {
background: transparent none; background: transparent none;
border: 0; border: 0;
color: #000; color: #696969;
font-size: 1em; font-size: 1em;
line-height: 1.7em; line-height: 1.7em;
margin: 3px 3px 0; margin: 3px 3px 0;
padding: 0 .5em; padding: 0 .5em;
position: relative;
float: right;
&::before { &::before {
content: ''; content: '';