Cellule-financiere-transverse-PMO/visua-vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Setting the style of the primevue button component

Browse Source
This commit is contained in:
Paul Valerie GOMA 2025-07-17 18:20:34 +02:00
parent 507081d5d7
commit fe28af0cc5
1 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/assets/style/primevue-style/button.css Normal file
View File

@ -0,0 +1,67 @@
:root{
/* global style */
--p-button-border-radius: 0px;
--p-button-gap: 0.5rem;
--p-button-label-font-weight: var(--text-body-MD-standard-text-Regular-weight);
/* size: normal */
--p-button-padding-x: 1rem;
--p-button-padding-y: 0.5rem;
--p-button-icon-only-width: 2.5rem;
/* size: small */
--p-button-sm-padding-x: 0.75rem;
--p-button-sm-padding-y: 0.25rem;
--p-button-sm-font-size: var(--text-body-SM-detail-text-Regular-size);
--p-button-sm-icon-only-width: 2rem;
/* size: large */
--p-button-lg-padding-x: 1.5rem;
--p-button-lg-padding-y: 0.625rem;
--p-button-lg-font-size: var(--text-body-LG-article-text-Medium-size);
--p-button-lg-icon-only-width: 3rem;
/* variant: primary or default */
--p-button-primary-background: var(--background-action-high-blue-france);
--p-button-primary-hover-background: var(--background-action-high-blue-france-hover);
--p-button-primary-active-background: var(--background-action-high-blue-france-active);
--p-button-primary-border-color: transparent;
--p-button-primary-hover-border-color: transparent;
--p-button-primary-active-border-color: transparent;
--p-button-primary-color: var(--text-inverted-blue-france);
--p-button-primary-hover-color: var(--text-inverted-blue-france);
--p-button-primary-active-color: var(--text-inverted-blue-france);
/* variant: secondary */
--p-button-secondary-background: var(--background-transparent);
--p-button-secondary-hover-background: var(--background-transparent-hover);
--p-button-secondary-active-background: var(--background-transparent-active);
--p-button-secondary-border-color: var(--border-action-high-blue-france);
--p-button-secondary-hover-border-color: var(--border-action-high-blue-france);
--p-button-secondary-active-border-color: var(--border-action-high-blue-france);
--p-button-outlined-secondary-hover-background: var(--background-transparent-hover);
--p-button-outlined-secondary-active-background: var(--background-transparent-active);
--p-button-outlined-secondary-border-color: var(--border-action-high-blue-france);
--p-button-outlined-secondary-color: var(--text-action-high-blue-france);
/* variant: tertiary */
--p-button-outlined-primary-hover-background: var(--background-transparent-hover);
--p-button-outlined-primary-active-background: var(--background-transparent-active);
--p-button-outlined-primary-border-color: var(--border-default-grey);
--p-button-outlined-primary-color: var(--text-action-high-blue-france);
/* variant: no-outline */
--p-button-text-primary-hover-background: var(--background-transparent-hover);
--p-button-text-primary-active-background: var(--background-transparent-active);
--p-button-text-primary-color: var(--text-action-high-blue-france);
/* variant: danger */
--p-button-danger-background: var(--primary-color-425-red-marianne-default);
--p-button-danger-hover-background: var(--primary-color-425-red-marianne-hover);
--p-button-danger-active-background: var(--primary-color-425-red-marianne-active);
--p-button-danger-border-color: transparent;
--p-button-danger-hover-border-color: transparent;
--p-button-danger-active-border-color: transparent;
--p-button-danger-color: var(--text-inverted-blue-france);
--p-button-danger-hover-color: var(--text-inverted-blue-france);
--p-button-danger-active-color: var(--text-inverted-blue-france);
/* focus */
--p-button-focus-ring-width: var(--focus-width);
--p-button-focus-ring-style: var(--focus-style);
--p-button-focus-ring-offset: var(--focus-offset);
--p-button-primary-focus-ring-color: var(--focus-color);
--p-button-secondary-focus-ring-color: var(--focus-color);
--p-button-danger-focus-ring-color: var(--focus-color);
}