react-toolbox/docs/app/components/markdown/style.scss

68 lines
1.3 KiB
SCSS

@import "../globals";
@import "../mixins";
$documentation-h1-size: 3.4 * $unit;
$documentation-h2-size: 2.4 * $unit;
$documentation-h-offset: 4 * $unit;
$documentation-v-offset: ($documentation-h-offset / 2);
$documentation-code-background: rgba(0, 0, 0, .0588235);
:global {
@import "~highlight.js/styles/github";
}
.markdown {
max-height: 100%;
display: block;
flex-grow: 1;
overflow-y: scroll;
font-size: $font-size-normal;
color: $color-text;
> *:not(pre) {
margin: $documentation-v-offset $documentation-h-offset;
}
h1 {
font-size: $documentation-h1-size;
text-transform: capitalize;
+ p {
font-size: $font-size-big;
}
}
h2 {
font-size: $documentation-h2-size;
}
h3, h4, h5, h6 {
font-size: inherit;
font-weight: $font-weight-bold;
}
h1, h2 {
padding-top: $documentation-v-offset;
color: $color-primary-dark;
}
p {
font-size: inherit;
a {
color: $color-text;
text-decoration: underline;
}
}
pre {
padding: $documentation-v-offset $documentation-h-offset;
background-color: $documentation-code-background;
}
code {
@include code-typography;
}
table {
width: auto;
background-color: white;
thead th {
font-size: $font-size-tiny;
color: $color-text;
}
th, td {
padding: $unit;
}
}
}