paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

better positioning in clearable badges

Browse Source
This commit is contained in:
Michael Shamoon 2022-10-29 15:29:50 -07:00
parent 0993fc07a3
commit 9b3243533c
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
View File

@ -1,4 +1,4 @@
<button *ngIf="active" class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-circle p-1" title="Clear" i18n-title (click)="onClick($event)"> <button *ngIf="active" class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
<svg *ngIf="!isNumbered && selected" width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <svg *ngIf="!isNumbered && selected" width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="assets/bootstrap-icons.svg#check-lg"/> <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
</svg> </svg>

13
src-ui/src/app/components/common/clearable-badge/clearable-badge.component.scss
View File

@ -1,6 +1,6 @@
.badge { .badge {
width: 20px; min-width: 20px;
height: 20px; min-height: 20px;
} }
.x { .x {
@ -8,18 +8,21 @@
} }
.number { .number {
width: 1em; min-width: 1em;
height: 1em; min-height: 1em;
display: inline-block; display: inline-block;
} }
button:hover { button:hover {
.check, .check,
.number { .number {
display: none; opacity: 0 !important;
} }
.x { .x {
display: inline-block; display: inline-block;
position: absolute;
top: 5px;
left: calc(50% - 4px);
} }
} }