diff --git a/package.json b/package.json index fa4aa3d5c..820fe268d 100644 --- a/package.json +++ b/package.json @@ -122,8 +122,7 @@ }, "lint-staged": { "{src,tedi}/**/*.{css,scss}": [ - "stylelint --fix", - "prettier --write" + "stylelint --fix" ], "src/**/*.{ts,html}": [ "prettier --write" diff --git a/tedi/components/notifications/alert/alert.component.scss b/tedi/components/notifications/alert/alert.component.scss index 015ff9be9..b11289961 100644 --- a/tedi/components/notifications/alert/alert.component.scss +++ b/tedi/components/notifications/alert/alert.component.scss @@ -5,6 +5,8 @@ } .tedi-alert { + --_close-button-size: 18px; + position: relative; display: flex; flex-direction: column; @@ -14,10 +16,8 @@ border: 1px solid; border-radius: var(--alert-radius); - @include alert-variant( - var(--alert-default-background-info), - var(--alert-default-border-info) - ); + @include alert-variant(var(--alert-default-background-info), + var(--alert-default-border-info)); &__head { display: flex; @@ -25,6 +25,10 @@ align-items: center; } + &:has(&__close) { + padding-right: calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--alert-default-padding-x)); + } + &__close { position: absolute; top: var(--alert-default-padding-y); @@ -48,31 +52,23 @@ } &--info { - @include alert-variant( - var(--alert-default-background-info), - var(--alert-default-border-info) - ); + @include alert-variant(var(--alert-default-background-info), + var(--alert-default-border-info)); } &--success { - @include alert-variant( - var(--alert-default-background-success), - var(--alert-default-border-success) - ); + @include alert-variant(var(--alert-default-background-success), + var(--alert-default-border-success)); } &--warning { - @include alert-variant( - var(--alert-default-background-warning), - var(--alert-default-border-warning) - ); + @include alert-variant(var(--alert-default-background-warning), + var(--alert-default-border-warning)); } &--danger { - @include alert-variant( - var(--alert-default-background-danger), - var(--alert-default-border-danger) - ); + @include alert-variant(var(--alert-default-background-danger), + var(--alert-default-border-danger)); } &--global {