Files
kupshop/web/common/static/scss/blocek/_usp.scss
2025-08-02 16:30:27 +02:00

93 lines
1.6 KiB
SCSS

$w-badge-padding: 10px !default;
.w-badges {
$w-badges-padding: 24px 0 !default;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: -#{$w-badge-padding};
margin-right: -#{$w-badge-padding};
padding: $w-badges-padding;
@media (max-width: 991px) {
flex-wrap: wrap;
}
}
.w-badge {
$badge-icon-size: 26px !default;
$brand-primary: inherit !default;
$badge-icon-color: $brand-primary !default;
$badge-icon-width: 1.5em !default;
$badge-img-padding: calc(#{$badge-icon-size} / 2) !default;
display: flex;
align-items: center;
flex: 1 1 auto;
padding: $w-badge-padding;
position: relative;
.fc::before {
color: $badge-icon-color;
flex-shrink: 0;
font-size: $badge-icon-size;
width: $badge-icon-width;
}
> img {
flex-shrink: 0;
width: $badge-icon-width;
padding-right: $badge-img-padding;
}
> svg {
width: 3em;
height: 3em;
fill: currentColor;
margin-right: $badge-img-padding;
}
> div {
flex-grow: 1;
}
> .fc {
flex-shrink: 0;
}
.w-text p:last-child {
margin-bottom: 0;
}
@if mixin-exists(badge) {
@include badge;
} @else {
.fc::before {
color: $badge-icon-color;
}
}
@media (max-width: 991px) {
flex: none;
width: 50%;
}
@media (max-width: 543px) {
width: 100%;
}
}
.w-badge-link {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
// hide link during editation
.wpj-blocek-active .w-badge-link {
display: none;
}