diff options
Diffstat (limited to 'packages/anastasis-webui/src/scss/_table.scss')
-rw-r--r-- | packages/anastasis-webui/src/scss/_table.scss | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/scss/_table.scss b/packages/anastasis-webui/src/scss/_table.scss new file mode 100644 index 000000000..9cf6f4dcd --- /dev/null +++ b/packages/anastasis-webui/src/scss/_table.scss @@ -0,0 +1,173 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + + /** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +table.table { + thead { + th { + border-bottom-width: 1px; + } + } + + td, th { + &.checkbox-cell { + .b-checkbox.checkbox:not(.button) { + margin-right: 0; + width: 20px; + + .control-label { + display: none; + padding: 0; + } + } + } + } + + td { + .image { + margin: 0 auto; + width: $table-avatar-size; + height: $table-avatar-size; + } + + &.is-progress-col { + min-width: 5rem; + vertical-align: middle; + } + } +} + +.b-table { + .table { + border: 0; + border-radius: 0; + } + + /* This stylizes buefy's pagination */ + .table-wrapper { + margin-bottom: 0; + } + + .table-wrapper + .level { + padding: $notification-padding; + padding-left: $card-content-padding; + padding-right: $card-content-padding; + margin: 0; + border-top: $base-color-light; + background: $notification-background-color; + + .pagination-link { + background: $button-background-color; + color: $button-color; + border-color: $button-border-color; + + &.is-current { + border-color: $button-active-border-color; + } + } + + .pagination-previous, .pagination-next, .pagination-link { + border-color: $button-border-color; + color: $base-color; + + &[disabled] { + background-color: transparent; + } + } + } +} + +@include mobile { + .card { + &.has-table { + .b-table { + .table-wrapper + .level { + .level-left + .level-right { + margin-top: 0; + } + } + } + } + &.has-mobile-sort-spaced { + .b-table { + .field.table-mobile-sort { + padding-top: $default-padding * .5; + } + } + } + } + .b-table { + .field.table-mobile-sort { + padding: 0 $default-padding * .5; + } + + .table-wrapper.has-mobile-cards { + tr { + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); + margin-bottom: 3px!important; + } + td { + &.is-progress-col { + span, progress { + display: flex; + width: 45%; + align-items: center; + align-self: center; + } + } + + &.checkbox-cell, &.is-image-cell { + border-bottom: 0!important; + } + + &.checkbox-cell, &.is-actions-cell { + &:before { + display: none; + } + } + + &.has-no-head-mobile { + &:before { + display: none; + } + + span { + display: block; + width: 100%; + } + + &.is-progress-col { + progress { + width: 100%; + } + } + + &.is-image-cell { + .image { + width: $table-avatar-size-mobile; + height: auto; + margin: 0 auto $default-padding * .25; + } + } + } + } + } + } +} |