| 1 |
// CHECKED: |
| 2 |
|
| 3 |
.betterdocs-category-icon { |
| 4 |
flex-shrink: 0; |
| 5 |
display: inline-flex; |
| 6 |
align-items: center; |
| 7 |
justify-content: center; |
| 8 |
@include for(".betterdocs-category-box-inner-wrapper") { |
| 9 |
@include if(".betterdocs-category-box-inner-wrapper", ".layout-1") { |
| 10 |
margin-bottom: 20px; |
| 11 |
} |
| 12 |
@include if(".betterdocs-category-box-inner-wrapper", ".layout-2") { |
| 13 |
margin-right: 20px; |
| 14 |
} |
| 15 |
@include if(".betterdocs-category-box-inner-wrapper", ".layout-3") { |
| 16 |
margin-right: 20px; |
| 17 |
} |
| 18 |
} |
| 19 |
@include for(".betterdocs-category-grid-inner-wrapper") { |
| 20 |
@include if(".betterdocs-single-category-wrapper", ".layout-3") { |
| 21 |
margin-right: 12px; |
| 22 |
.betterdocs-folder-icon { |
| 23 |
display: inline-flex; |
| 24 |
width: 32px; |
| 25 |
height: 32px; |
| 26 |
justify-content: center; |
| 27 |
align-items: center; |
| 28 |
background: #F2F4F7; |
| 29 |
border-radius: 6px; |
| 30 |
img { |
| 31 |
width: 100%; |
| 32 |
height: auto; |
| 33 |
} |
| 34 |
} |
| 35 |
} |
| 36 |
} |
| 37 |
.betterdocs-category-icon-img { |
| 38 |
@include for(".betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper:not(.layout-2)") { |
| 39 |
height: 32px; |
| 40 |
margin-right: 15px; |
| 41 |
} |
| 42 |
height: 80px; |
| 43 |
width: auto; |
| 44 |
} |
| 45 |
// A custom category/KB image rendered inside a plain .betterdocs-folder-icon |
| 46 |
// (folder-icon style) overflowed the icon box on block/FSE MKB archives. Bound it |
| 47 |
// to its container — whatever size that is (e.g. the 32px folder box) — rather than |
| 48 |
// a fixed value, so it never exceeds the icon. Targets <img> only, so the inline |
| 49 |
// SVG folder icon is untouched. |
| 50 |
.betterdocs-folder-icon img, |
| 51 |
img.betterdocs-category-folder-img { |
| 52 |
max-width: 100%; |
| 53 |
max-height: 100%; |
| 54 |
width: auto; |
| 55 |
height: auto; |
| 56 |
object-fit: contain; |
| 57 |
} |
| 58 |
} |
| 59 |
|
