diff --git a/packages/alert/src/alert.scss b/packages/alert/src/alert.scss index 41c305e0b..0fab03a8a 100644 --- a/packages/alert/src/alert.scss +++ b/packages/alert/src/alert.scss @@ -27,7 +27,7 @@ $typesLite: ( .af-alert__content__left { background: nth($typeLite, 2); - width: 4.2rem; + width: 4.5rem; } } @@ -35,7 +35,7 @@ $typesLite: ( &-icon { background-color: nth($typeLite, 2); color: $white; - width: 4rem; + width: 4.5rem; &::after { border-left-color: nth($typeLite, 2); @@ -54,24 +54,21 @@ $typesLite: ( &-icon { position: relative; - padding: 0 1.3rem; + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; &::after { content: ''; position: absolute; - right: -1rem; - top: 50%; - transform: translateY(-50%); - height: 0; - width: 0; - border-top: 2rem solid transparent; - border-bottom: 2rem solid transparent; - border-left: 1rem solid transparent; - } - - .glyphicon { - top: 50%; - transform: translateY(-50%); + right: 0; + transform: translateX(100%); + border-top: 1.65rem solid transparent; + border-bottom: 1.65rem solid transparent; + border-left: 1.5rem solid transparent; } &-close { @@ -96,6 +93,11 @@ $typesLite: ( &__content { display: flex; + &__left { + flex-grow: 0; + flex-shrink: 0; + } + .af-alert__content__right { padding: 0 1.5rem; }