diff --git a/components/alert/index.css b/components/alert/index.css index 108ffebf701..c89eb04cde7 100644 --- a/components/alert/index.css +++ b/components/alert/index.css @@ -25,10 +25,12 @@ governing permissions and limitations under the License. display: inline-block; box-sizing: border-box; - min-width: var(--spectrum-alert-min-width); - min-height: var(--spectrum-alert-header-height); - margin: 8px 0; - padding: var(--spectrum-alert-padding-y) var(--spectrum-alert-padding-x); + min-inline-size: var(--spectrum-alert-min-width); + min-block-size: var(--spectrum-alert-header-height); + margin-block: 8px; + margin-inline: 0; + padding-block: var(--spectrum-alert-padding-y); + padding-inline: var(--spectrum-alert-padding-x); border-width: var(--spectrum-alert-border-width); border-style: solid; @@ -38,19 +40,19 @@ governing permissions and limitations under the License. .spectrum-Alert-icon { position: absolute; display: block; - top: 20px; - right: 20px; + inset-block-start: 20px; + inset-inline-end: 20px; } .spectrum-Alert-header { display: inline-block; - height: auto; - min-height: 0; + block-size: auto; + min-block-size: 0; margin: 0; padding: 0; /* Leave room for the icon */ - padding-right: 30px; + padding-inline-end: 30px; font-size: 14px; font-weight: 700; @@ -71,18 +73,18 @@ governing permissions and limitations under the License. .spectrum-Alert-footer { display: block; - text-align: right; + text-align: end; - padding-top: 0.5rem; + padding-block-start: 0.5rem; &:empty { display: none; } .spectrum-Button { - margin-right: 0; + margin-inline-end: 0; /* Spacing between buttons */ - margin-left: 0.75rem; + margin-inline-start: 0.75rem; } }