| 1 |
// CHECKED: |
| 2 |
|
| 3 |
.betterdocs-category-grid-wrapper { |
| 4 |
.betterdocs-category-grid-inner-wrapper { |
| 5 |
.betterdocs-grid-top-row-wrapper { |
| 6 |
margin-bottom: 40px; |
| 7 |
flex-basis: 100%; |
| 8 |
@for $i from 1 through 12 { |
| 9 |
@include if( |
| 10 |
".betterdocs-category-grid-inner-wrapper", |
| 11 |
".layout-flex.docs-col-#{$i}" |
| 12 |
) { |
| 13 |
// grid-column-start: 1; |
| 14 |
// grid-column-end: #{$i + 1}; |
| 15 |
// @include responsive-below("small-laptop") { |
| 16 |
// @if ($i >= 3) { |
| 17 |
// grid-column-end: 4; |
| 18 |
// } @else { |
| 19 |
// grid-column-end: #{$i + 1}; |
| 20 |
// } |
| 21 |
// } |
| 22 |
// @include responsive("tablet") { |
| 23 |
// @if ($i >= 2) { |
| 24 |
// grid-column-end: 3; |
| 25 |
// } @else { |
| 26 |
// grid-column-end: #{$i + 1}; |
| 27 |
// } |
| 28 |
// } |
| 29 |
// @include responsive("phone") { |
| 30 |
// grid-column-end: 2; |
| 31 |
// } |
| 32 |
} |
| 33 |
} |
| 34 |
} |
| 35 |
|
| 36 |
.betterdocs-single-category-wrapper { |
| 37 |
width: 100%; |
| 38 |
} |
| 39 |
} |
| 40 |
} |
| 41 |
|
| 42 |
// Skeleton placeholder shown while a lazy .betterdocs-body is fetching its |
| 43 |
// real content. Styles intentionally do NOT inherit padding from |
| 44 |
// .betterdocs-body or .betterdocs-articles-list li -- the skeleton owns its |
| 45 |
// own spacing so it renders consistently regardless of which sidebar layout |
| 46 |
// the body lives in. |
| 47 |
ul.betterdocs-skeleton { |
| 48 |
list-style: none !important; |
| 49 |
margin: 0 !important; |
| 50 |
padding: 18px 16px !important; |
| 51 |
background: transparent; |
| 52 |
} |
| 53 |
|
| 54 |
ul.betterdocs-skeleton > li { |
| 55 |
list-style: none !important; |
| 56 |
margin: 0 !important; |
| 57 |
padding: 6px 0 !important; |
| 58 |
border: 0 !important; |
| 59 |
background: none !important; |
| 60 |
min-height: 0; |
| 61 |
line-height: 1; |
| 62 |
|
| 63 |
&::before, &::after { |
| 64 |
content: none !important; |
| 65 |
} |
| 66 |
} |
| 67 |
|
| 68 |
.betterdocs-skeleton-bar { |
| 69 |
display: block; |
| 70 |
height: 12px; |
| 71 |
border-radius: 4px; |
| 72 |
background-color: #e9edf3; |
| 73 |
background-image: linear-gradient( |
| 74 |
90deg, |
| 75 |
rgba(255, 255, 255, 0) 0%, |
| 76 |
rgba(255, 255, 255, 0.65) 50%, |
| 77 |
rgba(255, 255, 255, 0) 100% |
| 78 |
); |
| 79 |
background-repeat: no-repeat; |
| 80 |
background-size: 220% 100%; |
| 81 |
background-position: 100% 0; |
| 82 |
animation: betterdocs-skeleton-shimmer 1.4s linear infinite; |
| 83 |
} |
| 84 |
|
| 85 |
ul.betterdocs-skeleton > li:nth-child(1) .betterdocs-skeleton-bar { width: 88%; } |
| 86 |
ul.betterdocs-skeleton > li:nth-child(2) .betterdocs-skeleton-bar { width: 72%; } |
| 87 |
ul.betterdocs-skeleton > li:nth-child(3) .betterdocs-skeleton-bar { width: 92%; } |
| 88 |
ul.betterdocs-skeleton > li:nth-child(4) .betterdocs-skeleton-bar { width: 65%; } |
| 89 |
ul.betterdocs-skeleton > li:nth-child(5) .betterdocs-skeleton-bar { width: 80%; } |
| 90 |
|
| 91 |
@keyframes betterdocs-skeleton-shimmer { |
| 92 |
0% { background-position: 100% 0; } |
| 93 |
100% { background-position: -100% 0; } |
| 94 |
} |
| 95 |
|
