diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 370cd47c4..d83440036 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -5309,6 +5309,44 @@ button.module-image__border-overlay:focus { } } +%blessed-sticker-pack-icon { + height: 14px; + width: 14px; + border-radius: 8px; + background-color: $color-white; + display: inline-block; + vertical-align: middle; + margin: { + left: 5px; + bottom: 2px; + } + position: relative; + + &::before { + content: ""; + display: block; + width: 16px; + height: 16px; + position: absolute; + top: -1px; + left: -1px; + + @include light-theme { + @include color-svg( + '../images/icons/v2/check-circle-solid-24.svg', + $color-accent-blue + ); + } + + @include dark-theme { + @include color-svg( + '../images/icons/v2/check-circle-solid-24.svg', + $color-accent-blue + ); + } + } +} + .module-sticker-manager__pack-row { @include button-reset; @@ -5370,12 +5408,7 @@ button.module-image__border-overlay:focus { } &__blessed-icon { - height: 16px; - width: 16px; - display: inline-block; - margin-left: 3px; - vertical-align: top; - background-image: url('../images/check-circle-filled-16.svg'); + @extend %blessed-sticker-pack-icon; } } @@ -5615,19 +5648,7 @@ button.module-image__border-overlay:focus { } &__blessed-icon { - height: 16px; - width: 16px; - display: inline-block; - margin-left: 3px; - vertical-align: top; - - @include light-theme { - background-image: url('../images/check-circle-filled-16.svg'); - } - - @include dark-theme { - background-image: url('../images/check-circle-filled-16.svg'); - } + @extend %blessed-sticker-pack-icon; } }