display: block;
font-family: var(--font-heading, var(--font-body));
@include lightDark(color, #222, #BBB);
- .subheader {
- font-size: 0.5em;
- line-height: 1em;
- color: lighten($text-dark, 32%);
- }
}
h5 {
@include lightDark(background-color, #FFF, #2B2B2B);
@include lightDark(border-color, #DDD, #111);
border-radius: 4px;
- padding-left: 26px;
+ padding-inline-start: 26px;
position: relative;
padding-top: 3px;
padding-bottom: 3px;
position: absolute;
top: 0;
width: 22.4px;
- left: 0;
+ inset-inline-start: 0;
height: 100%;
@include lightDark(background-color, #f5f5f5, #313335);
- @include lightDark(border-right, 1px solid #DDD, none);
+ @include lightDark(border-inline-end, 1px solid #DDD, none);
}
}
position: absolute;
top: $-s;
left: $-s;
- color: lighten($text-dark, 20%);
+ color: #777;
}
}
padding-right: $-m * 1.2;
}
+/**
+ * Checkbox lists
+ * Some styles duplicated for supporting logical units (eg. inline-end) while
+ * providing fallbacks to non-logical rules, so RTL is natively supported where possible.
+ */
li.checkbox-item, li.task-list-item {
display: list-item;
list-style: none;
margin-left: -($-m * 1.2);
+ margin-inline-start: -($-m * 1.2);
+ margin-inline-end: 0;
input[type="checkbox"] {
margin-right: $-xs;
+ margin-inline-end: $-xs;
+ margin-inline-start: 0;
}
li.checkbox-item, li.task-list-item {
margin-left: $-xs;
+ margin-inline-start: $-xs;
+ margin-inline-end: 0;
}
}