Fix primeng table pagination style

pull/5817/head
Chocobozzz 2023-05-25 15:49:17 +02:00
parent ffc424259e
commit 0a1aaf2d11
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
1 changed files with 42 additions and 53 deletions

View File

@ -88,9 +88,6 @@ body .p-paginator .p-paginator-current {
min-width: 2.286em;
line-height: 2.286em;
}
body .p-paginator .p-dropdown {
border: 0 none;
}
body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
color: #848484;
}
@ -152,6 +149,7 @@ body .p-dropdown {
background: #ffffff;
border: 1px solid #a6a6a6;
transition: border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
}
body .p-dropdown:not(.p-disabled):hover {
border-color: #212121;
@ -162,28 +160,41 @@ body .p-dropdown:not(.p-disabled).p-focus {
box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
border-color: pvar(--mainColor);
}
body .p-dropdown .p-dropdown-label {
@include padding-right(2em);
body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
@include padding-right(0);
}
body .p-dropdown .p-dropdown-label {
background: transparent;
border: 0 none;
}
body .p-dropdown .p-dropdown-label.p-placeholder {
color: #6c757d;
}
body .p-dropdown .p-dropdown-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
body .p-dropdown .p-dropdown-trigger {
background-color: #ffffff;
width: 2em;
line-height: 2em;
text-align: center;
padding: 0;
background-color: transparent;
width: 2rem;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
color: #848484;
}
body .p-dropdown .p-dropdown-clear-icon {
color: #848484;
right: 2rem;
}
body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
@include padding-right(4em);
}
body .p-dropdown-panel {
padding: 0;
border: 1px solid #c8c8c8;
background-color: #ffffff;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border: 0 none;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
body .p-dropdown-panel .p-dropdown-filter-container {
padding: 0.429em 0.857em 0.429em 0.857em;
@ -611,10 +622,12 @@ p-table {
justify-content: center;
align-items: center;
.p-dropdown {
position: absolute;
top: 10px;
left: 0;
p-dropdown {
.p-dropdown {
@include padding-left(0.5rem);
align-items: center;
}
&.p-focus {
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
@ -632,15 +645,16 @@ p-table {
}
.p-paginator-current {
position: absolute;
right: 0;
color: pvar(--inputPlaceholderColor);
overflow: visible;
}
@media screen and (max-width: $small-view) {
left: 0;
top: 40px;
}
.p-paginator-first {
margin-left: auto;
}
.p-paginator-last {
margin-right: auto;
}
.p-paginator-first,
@ -661,38 +675,17 @@ p-table {
background-color: #fff !important;
}
&.p-paginator-first {
.p-paginator-icon {
width: 18px;
height: 18px;
background: url('../assets/images/feather/skip-back.svg') no-repeat;
background-size: contain;
}
.p-paginator-icon {
width: 18px;
height: 18px;
}
&.p-paginator-prev {
@include margin-right(10px);
.p-paginator-icon {
@include chevron-left-default;
}
}
&.p-paginator-next {
@include margin-left(10px);
.p-paginator-icon {
@include chevron-right-default;
}
}
&.p-paginator-last {
.p-paginator-icon {
width: 18px;
height: 18px;
background: url('../assets/images/feather/skip-forward.svg') no-repeat;
background-size: contain;
}
}
}
@ -742,19 +735,15 @@ p-table {
}
}
@media screen and (max-width: #{breakpoint(lg)}) {
// Prevent overflow
@media screen and (max-width: $small-view) {
p-paginator {
.p-paginator-current,
.p-dropdown {
top: 0;
margin-top: 30px;
.p-paginator-current {
display: none !important;
}
}
}
@media screen and (max-width: $mobile-view) {
// Prevent overflow
p-paginator {
.p-paginator-pages > .p-paginator-page:not(.p-highlight) {
display: none;