$tablet-l-width: 1024px; $tablet-s-width: 768px; ::ng-deep .sticker-selector { height: 210px; border-top: 1px solid #cccccc; .mat-tab-header { .mat-tab-label { padding: 0 10px; } } .mat-tab-body-wrapper { height: 150px; overflow: auto; } @media screen and (max-width: #{$tablet-s-width}) { height: 180px; .mat-tab-body-wrapper { height: 130px; } } } .sticker-item-box { flex-wrap: wrap; padding: 10px 20px 0; overflow: auto; .sticker-item { width: 60px; margin-bottom: 10px; display: inline-flex; cursor: pointer; } } @media screen and (max-width: #{$tablet-s-width}) { .sticker-item-box { .sticker-item { width: 50px; } } } .selected-sticker { position: relative; padding: 10px 20px; text-align: right; background-color: rgba(45, 58, 74, 0.8); img { margin-right: 40px; } .btn-close { position: absolute; top: 2px; right: 10px; width: 40px; height: 40px; color: #ffffff; } }