interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix primeng table pagination style

This commit is contained in:
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
client/src/sass/primeng-custom.scss
View File

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