diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.css b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.css index 13e0ad425..5e64f671c 100644 --- a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.css +++ b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.css @@ -44,7 +44,7 @@ Copyright (c) 2023-present Kaleidos INC &:not(.edit) { border-block-end: 1px solid var(--color-gray20); border-block-start: 1px solid var(--color-gray10); - padding-block-end: var(--spacing-16); + padding-block-end: var(--spacing-8); } } @@ -53,6 +53,17 @@ Copyright (c) 2023-present Kaleidos INC position: relative; } +.description-empty { + margin-block: 0; + margin-inline: var(--spacing-8); + + .edit-description { + inset-block-start: 0; + inset-inline-end: 2px; + position: absolute; + } +} + .edit-description { inset-block-start: var(--spacing-12); inset-inline-end: 2px; @@ -68,12 +79,14 @@ Copyright (c) 2023-present Kaleidos INC } .empty { + background-color: var(--color-gray10); color: var(--color-gray70); font-size: var(--font-size-medium); font-style: italic; margin: 0; - padding-block-end: var(--spacing-8); - padding-block-start: var(--spacing-16); + margin-block-start: var(--spacing-8); + padding-block: var(--spacing-8); + padding-inline: var(--spacing-16); text-align: center; &.can-view { diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.html b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.html index 739b7ac73..6683b65c2 100644 --- a/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.html +++ b/javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-description/story-detail-description.component.html @@ -79,7 +79,7 @@
+ class="description-wrapper description-empty">

+ appearance="small" + tuiButton + type="button"> + Edit + + appearance="small" + tuiButton + type="button"> + Edit +

diff --git a/javascript/apps/taiga/src/app/styles/shared/button.css b/javascript/apps/taiga/src/app/styles/shared/button.css index 2b86446d2..97e7fe5c2 100644 --- a/javascript/apps/taiga/src/app/styles/shared/button.css +++ b/javascript/apps/taiga/src/app/styles/shared/button.css @@ -164,6 +164,37 @@ Used only in comment list sort button } } +[data-appearance="small"]:is(button, a) { + @mixin button-dropdown-expanded { + background: var(--color-gray30); + color: var(--color-secondary90); + } + + & [tuiWrapper] { + background: var(--color-gray10); + block-size: auto !important; + border-radius: 3px; + color: var(--color-secondary); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: 0.875rem; + padding-block: var(--spacing-4) !important; + padding-inline: var(--spacing-8) !important; + + @mixin wrapper-hover { + background: var(--color-gray30); + color: var(--color-secondary90); + } + + @mixin wrapper-focus { + &::after { + border-color: var(--color-secondary); + border-width: 1px; + } + } + } +} + [data-appearance="main-nav"]:is(button, a) { @mixin button-dropdown-expanded { background: var(--color-white);