github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor(ui): move datatable css from bootstrap-override [EE-3664] (#7206)

pull/7165/head
Chaim Lev-Ari 2022-07-07 07:29:46 +03:00 committed by GitHub
parent 3241738775
commit 8d46692d66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
app/assets/css/bootstrap-override.css
View File

@ -153,78 +153,6 @@ input:checked + .slider:before {
display: none; display: none;
} }
/* Datatable */
.datatable .searchBar {
border: 1px solid var(--border-searchbar);
padding: 5px;
background: var(--bg-searchbar) !important;
border-radius: 5px;
}
.datatable .searchBar input[type='text'] {
border: 0px !important;
}
.datatable .toolBar {
border-radius: 8px;
}
.datatable .footer {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-bottom: 10px;
}
.datatable .toolBar {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.toolBar {
display: flex;
flex-direction: row;
gap: 5px;
}
.toolBar > .toolBarTitle {
flex: auto;
display: inline-flex;
flex-wrap: nowarp;
}
.toolBar .searchBar {
flex: right;
margin-right: 10px;
width: 500px;
height: 30px;
display: inline-flex;
}
.datatable .searchBar {
padding: 4px 10px !important;
font-size: 14px;
}
.toolBar > .actionBar {
margin-right: 10px;
display: inline-flex;
}
.datatable .actionBar {
padding: 0px !important;
}
.toolBar > .settings {
width: 60px;
text-align: right;
display: inline-flex;
}
.datatable .toolBar .settings {
margin-right: 5px !important;
}
/* Widget */ /* Widget */
.widget .widget-icon i { .widget .widget-icon i {

52
app/portainer/components/datatables/datatable.css
View File

@ -1,24 +1,32 @@
.datatable .toolBar { .datatable .toolBar {
background-color: var(--bg-card-color); background-color: var(--bg-card-color);
overflow: auto; overflow: auto;
padding: 10px; padding: 20px 10px;
font-size: 16px; font-size: 16px;
border-radius: 8px;
display: flex;
gap: 5px;
} }
.datatable .actionBar { .datatable .actionBar {
padding: 10px; padding: 0;
} }
.datatable .toolBar .toolBarTitle { .datatable .toolBar .toolBarTitle {
@apply items-center gap-1;
float: left; float: left;
margin: 5px 0 0 10px;
color: var(--text-widget-header-color); color: var(--text-widget-header-color);
font-weight: 500; font-weight: 500;
flex: auto;
display: inline-flex;
flex-wrap: nowrap;
} }
.datatable .toolBar .settings { .datatable .toolBar .settings {
float: right; float: right;
margin: 5px 10px 0 0; margin-right: 5px;
} }
.datatable .toolBar .setting { .datatable .toolBar .setting {
@ -30,10 +38,24 @@
@apply text-blue-7; @apply text-blue-7;
} }
.toolBar .actionBar {
margin-right: 10px;
display: inline-flex;
}
.toolBar .settings {
width: 60px;
text-align: right;
display: inline-flex;
}
.datatable .searchBar { .datatable .searchBar {
border: 1px solid var(--border-color); border: 1px solid var(--border-searchbar);
padding: 8px; padding: 5px;
background: var(--bg-main-color); background: var(--bg-searchbar) !important;
border-radius: 5px;
padding: 4px 10px !important;
font-size: 14px;
} }
.datatable .searchInput { .datatable .searchInput {
@ -42,6 +64,18 @@
width: 90%; width: 90%;
} }
.toolBar .searchBar {
flex: right;
margin-right: 10px;
width: 500px;
height: 30px;
display: inline-flex;
}
.datatable .searchBar input[type='text'] {
border: 0px !important;
}
.datatable .searchIcon { .datatable .searchIcon {
color: #767676; color: #767676;
margin-right: 5px; margin-right: 5px;
@ -65,6 +99,10 @@
color: var(--text-main-color); color: var(--text-main-color);
overflow: auto; overflow: auto;
border-top: 1px solid var(--border-datatable-top-color); border-top: 1px solid var(--border-datatable-top-color);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-bottom: 10px;
} }
.datatable .footer .infoBar { .datatable .footer .infoBar {