63 lines
1.1 KiB
SCSS
63 lines
1.1 KiB
SCSS
@use "sass:math";
|
|
|
|
$w-badges-padding: 0 !default;
|
|
$w-badges-gap: $gap-width*2 !default;
|
|
|
|
$w-badge-icon-color: $brand-secondary !default;
|
|
|
|
|
|
.w-badges {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: $w-badges-padding;
|
|
gap: $w-badges-gap;
|
|
container-type: inline-size;
|
|
flex-wrap: wrap;
|
|
|
|
@container (inline-size > 991px) {
|
|
@for $i from 1 through 5 {
|
|
@include container-query-selector('&-#{$i}') {
|
|
@include container-query-selector('.w-badge') {
|
|
flex-basis: calc(100% / #{$i} - (#{$w-badges-gap} * (#{$i} - 1) / #{$i}));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.w-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
flex-basis: 100%;
|
|
|
|
svg {
|
|
width: 3em;
|
|
height: 3em;
|
|
fill: currentColor;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
> div:first-child {
|
|
flex: none;
|
|
}
|
|
|
|
> div:last-child {
|
|
flex-grow: 1;
|
|
|
|
> *,
|
|
.w-text > * {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.w-badge-link {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|