vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Better alignment for icon only buttons

pull/5806/head
Cagatay Civici 2024-05-26 00:25:00 +03:00
parent aef883944a
commit c6663196a0
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/button/Button.vue
View File

@ -8,7 +8,7 @@
<slot v-else name="icon" :class="[cx('icon')]"> <slot v-else name="icon" :class="[cx('icon')]">
<span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span> <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
</slot> </slot>
<span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span> <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
<Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('pcBadge')"></Badge> <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('pcBadge')"></Badge>
</slot> </slot>
</button> </button>

7
components/lib/button/style/ButtonStyle.js
View File

@ -36,10 +36,10 @@ const theme = ({ dt }) => `
} }
.p-button-icon-only { .p-button-icon-only {
justify-content: center;
width: ${dt('button.icon.only.width')}; width: ${dt('button.icon.only.width')};
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
gap: 0;
} }
.p-button-icon-only.p-button-rounded { .p-button-icon-only.p-button-rounded {
@ -47,6 +47,11 @@ const theme = ({ dt }) => `
height: ${dt('button.icon.only.width')}; height: ${dt('button.icon.only.width')};
} }
.p-button-icon-only .p-button-label {
visibility: hidden;
width: 0;
}
.p-button-sm { .p-button-sm {
font-size: ${dt('button.sm.font.size')}; font-size: ${dt('button.sm.font.size')};
padding: ${dt('button.sm.padding.y')} ${dt('button.sm.padding.x')}; padding: ${dt('button.sm.padding.y')} ${dt('button.sm.padding.x')};