mirror of
https://github.com/portainer/portainer.git
synced 2025-08-04 21:35:23 +02:00
feat(UX): replace tables with datatables (#1460)
This commit is contained in:
Anthony Lapenna
GitHub
parent
7922ecc4a1
commit
bdb23a8dd2
121 changed files with 4123 additions and 2701 deletions
244
app/directives/ui/datatables/datatable.css
Normal file
244
app/directives/ui/datatables/datatable.css
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
.datatable .toolBar {
|
||||
background-color: #f6f6f6;
|
||||
color: #767676;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.datatable .actionBar {
|
||||
color: #767676;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.datatable .toolBar .toolBarTitle {
|
||||
float: left;
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
|
||||
.datatable .toolBar .settings {
|
||||
float: right;
|
||||
margin: 5px 10px 0 0;
|
||||
}
|
||||
|
||||
.datatable .toolBar .setting {
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.datatable .toolBar .setting-active {
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
.datatable .searchBar {
|
||||
border-top: 1px solid #f6f6f6;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.datatable .searchInput {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.datatable .searchIcon {
|
||||
color: #767676;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.datatable .searchInput:active, .datatable .searchInput:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.datatable .pagination-controls {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.datatable .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.datatable .footer {
|
||||
background-color: #f6f6f6;
|
||||
color: #767676;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.datatable .footer .infoBar {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
margin: 15px 0 0 10px;
|
||||
}
|
||||
|
||||
.datatable .footer .paginationControls {
|
||||
float: right;
|
||||
margin: 10px 15px 5px 0;
|
||||
}
|
||||
|
||||
.datatable .footer .paginationControls .limitSelector {
|
||||
font-size: 12px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.datatable .footer .paginationControls .pagination {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.datatable .pagination > li > a, .pagination > li > span {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.tableMenu {
|
||||
color: #767676;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tableMenu .menuHeader {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tableMenu .menuContent {
|
||||
border-bottom: 1px solid #777;
|
||||
font-size: 12px;
|
||||
margin: 10px 0;
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tableMenu .menuContent .md-radio:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.datatable .table-filters thead tr > th {
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.widget .widget-body table thead th .table-filter {
|
||||
color: #767676;
|
||||
cursor: pointer;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.widget .widget-body table thead th .filter-active {
|
||||
color: #f0ad4e;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.datatable .filterbar > th {
|
||||
border: none;
|
||||
font-size: 12px !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-checkbox {
|
||||
margin: 1px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.md-checkbox label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.md-checkbox label:before, .md-checkbox label:after {
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.md-checkbox label:before {
|
||||
background: #fff;
|
||||
border: 2px solid black;
|
||||
border: 2px solid rgba(0, 0, 0, 0.54);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
height: 16px;
|
||||
transition: background .3s;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.md-checkbox input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.md-checkbox input[type="checkbox"]:checked + label:before {
|
||||
background: #337ab7;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.md-checkbox input[type="checkbox"]:disabled + label:before {
|
||||
background: #ececec;
|
||||
border: 2px solid #ddd;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.md-checkbox input[type="checkbox"]:checked + label:after {
|
||||
border: 2px solid #fff;
|
||||
border-right-style: none;
|
||||
border-top-style: none;
|
||||
height: 4px;
|
||||
left: 4px;
|
||||
top: 5px;
|
||||
transform: rotate(-45deg);
|
||||
width: 9px;
|
||||
|
||||
}
|
||||
|
||||
.md-radio {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.md-radio .md-radio-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.md-radio input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md-radio input[type="radio"]:checked + label:before {
|
||||
animation: ripple 0.2s linear forwards;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
|
||||
.md-radio input[type="radio"]:checked + label:after {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.md-radio label {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
margin-bottom: 0;
|
||||
padding: 0 22px;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.md-radio label:before, .md-radio label:after {
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all .3s ease;
|
||||
transition-property: transform, border-color;
|
||||
}
|
||||
|
||||
.md-radio label:before {
|
||||
border: 2px solid black;
|
||||
border: 2px solid rgba(0, 0, 0, 0.54);
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.md-radio label:after {
|
||||
background: #337ab7;
|
||||
height: 8px;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
transform: scale(0);
|
||||
width: 8px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue