diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss index c202028..c818f03 100644 --- a/src/assets/styles/common-buttons.scss +++ b/src/assets/styles/common-buttons.scss @@ -2,14 +2,17 @@ .mat-flat-button { border-radius: var(--iqser-button-radius) !important; font-size: var(--iqser-button-font-size) !important; - height: var(--iqser-button-height); display: flex !important; align-items: center; + &:not(.text) { + height: var(--iqser-button-height); + } + .mat-button-wrapper { display: flex; align-items: center; - line-height: 34px; + line-height: var(--iqser-font-size); transition: opacity 0.2s; width: 100%; @@ -68,10 +71,19 @@ iqser-circle-button { background: rgba(var(--iqser-primary-rgb), 0.1); } - &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):hover { + &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):not(.text):hover { background-color: var(--iqser-btn-bg); } + &.text { + color: var(--iqser-primary); + font-weight: 500 !important; + + &:hover { + background-color: rgba(var(--iqser-primary-rgb), 0.05); + } + } + &.primary { font-weight: 500 !important; background-color: var(--iqser-primary); diff --git a/src/lib/buttons/types/icon-button.type.ts b/src/lib/buttons/types/icon-button.type.ts index f2af12d..b0f99e6 100644 --- a/src/lib/buttons/types/icon-button.type.ts +++ b/src/lib/buttons/types/icon-button.type.ts @@ -3,6 +3,7 @@ export const IconButtonTypes = { dark: 'dark', primary: 'primary', help: 'help', + text: 'text', } as const; export type IconButtonType = keyof typeof IconButtonTypes;