diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss index 206a189..0787a12 100644 --- a/src/assets/styles/_common-mixins.scss +++ b/src/assets/styles/_common-mixins.scss @@ -46,3 +46,13 @@ @mixin drop-shadow { box-shadow: 0 4px 3px 2px var(--iqser-btn-bg-hover); } + +@mixin clear-btn { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +} diff --git a/src/assets/styles/common-tabs.scss b/src/assets/styles/common-tabs.scss index 08d68e4..05726ea 100644 --- a/src/assets/styles/common-tabs.scss +++ b/src/assets/styles/common-tabs.scss @@ -1,4 +1,8 @@ +@use 'common-mixins' as mixins; + .red-tab { + @include mixins.clear-btn; + &:not(:last-child) { margin-right: 2px; } @@ -10,7 +14,7 @@ transition: background-color 0.2s; cursor: pointer; - &:not(.disabled):not(.active):hover { + &:not([disabled]):not(.active):hover { background-color: var(--iqser-grey-6); } @@ -20,7 +24,7 @@ color: var(--iqser-primary); } - &.disabled { + &[disabled] { color: rgba(var(--iqser-accent-rgb), 0.3); cursor: not-allowed; } diff --git a/src/lib/listing/page-header/models/action-config.model.ts b/src/lib/listing/page-header/models/action-config.model.ts index fdb27ab..96f869b 100644 --- a/src/lib/listing/page-header/models/action-config.model.ts +++ b/src/lib/listing/page-header/models/action-config.model.ts @@ -1,6 +1,8 @@ import { BaseHeaderConfig } from './base-config.model'; +import { Observable } from 'rxjs'; export interface ActionConfig extends BaseHeaderConfig { readonly action: ($event: MouseEvent) => void; readonly helpModeKey?: string; + readonly disabled$?: Observable; } diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html index 27f49b3..2c67e30 100644 --- a/src/lib/listing/page-header/page-header.component.html +++ b/src/lib/listing/page-header/page-header.component.html @@ -1,7 +1,7 @@