scinote-web/app/assets/stylesheets/shared/datatable.scss

194 lines
3.4 KiB
SCSS
Raw Normal View History

2020-04-08 03:02:16 +08:00
// scss-lint:disable SelectorDepth SelectorFormat
// scss-lint:disable NestingDepth QualifyingElement
.dataTables_wrapper {
2021-03-16 20:11:15 +08:00
--datatable-pagination-row: 68px;
.main-actions {
2020-06-15 19:49:44 +08:00
align-items: center;
display: flex;
flex-wrap: wrap;
2020-06-01 16:24:03 +08:00
padding: 1em 0;
.toolbar {
2023-05-09 20:53:50 +08:00
align-items: center;
display: flex;
flex-grow: 1;
2023-06-20 21:53:33 +08:00
gap: .25rem;
}
}
.dataTables_filter {
.search-icon {
display: none;
}
.search-icon:not(.collapsed) {
display: initial;
}
.search-container:not(.expand) {
display: none;
}
}
2020-06-01 16:24:03 +08:00
.dataTables_scrollHead {
.dataTable {
margin-top: 0 !important;
}
}
2020-04-08 03:02:16 +08:00
.pagination-row {
align-items: center;
display: flex;
flex-wrap: wrap;
2023-06-14 20:40:26 +08:00
height: var(--datatable-pagination-row);
position: relative;
2020-04-08 03:02:16 +08:00
width: 100%;
z-index: 101;
2020-04-08 03:02:16 +08:00
.actions-toolbar {
align-items: center;
background-color: $color-concrete;
border-bottom: 1px solid $color-alto;
display: none;
height: 70px;
overflow-x: auto;
padding: 0 1em;
position: absolute;
top: 0;
width: 100%;
.emptyPlaceholder {
color: $color-volcano;
margin-left: 12px;
}
.btn {
margin-right: .5em;
}
.btn:focus {
box-shadow: 0 0 0 3px $brand-focus;
}
.btn-light {
&:active {
background-color: $color-alto !important;
}
&:hover {
background: $color-white;
}
}
}
2020-04-08 03:02:16 +08:00
.pagination-info,
.pagination-actions {
flex-grow: 1;
.pagination,
.dataTables_paginate {
align-items: center;
display: flex;
height: 36px;
justify-content: flex-end;
margin: 0;
}
2020-04-08 03:02:16 +08:00
}
.pagination-info {
align-items: center;
display: flex;
flex-wrap: wrap;
2020-04-08 03:02:16 +08:00
.dataTables_info {
padding-top: 0;
}
@media (max-width: 1000px) {
.dataTables_info {
display: none;
}
}
2020-04-08 03:02:16 +08:00
.dataTables_length {
height: 2.25rem;
2020-04-08 03:02:16 +08:00
margin-right: 24px;
2023-06-20 21:53:33 +08:00
width: 180px;
2020-04-08 03:02:16 +08:00
.dropdown-selector-container {
width: inherit;
}
label {
margin-bottom: 0;
}
}
}
@media (max-width: 767px) {
.pagination-info {
display: none;
}
}
2020-04-08 03:02:16 +08:00
}
tr[data-state]:not([data-state='']) {
td.item-name::after {
@include font-small;
background-color: $color-concrete;
color: $color-silver-chalice;
2020-06-12 20:14:00 +08:00
content: attr(data-state);
margin-left: 20px;
padding: .3em;
white-space: nowrap;
}
}
tr[data-shared=true],
tr[data-i-shared=true] {
td.item-name::before {
@include font-awesome;
content: "\f0c0";
margin-right: .5em;
}
}
2020-09-01 22:25:30 +08:00
table > tbody > tr:first-child > td {
border-top: 0;
}
&.show-actions {
--datatable-pagination-row: 139px;
.pagination-row {
padding-top: 71px;
.actions-toolbar {
display: flex;
}
}
}
@media (max-width: 1000px) {
.pagination-row .actions-toolbar {
.btn {
.button-text {
display: none;
}
.fas,
img {
margin: 0;
}
}
}
}
2020-04-08 03:02:16 +08:00
}
2023-06-20 21:53:33 +08:00
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
align-items: center;
display: flex;
2023-06-21 20:32:25 +08:00
justify-content: end;
2023-06-20 21:53:33 +08:00
}