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

96 lines
2.2 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, .05);
$documentation-playground-button-height: 3 * $unit;
$documentation-playground-button-font-size: 1.2 * $unit;
$documentation-table-font-size: 1.4 * $unit;
:global {
@import "~highlight.js/styles/github-gist";
}
.markdown {
display: block;
max-height: 100%;
flex-grow: 1;
padding-bottom: 4 * $unit;
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;
}
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;
line-height: 1.5;
a {
color: $color-text;
text-decoration: underline;
}
}
code {
@include code-typography;
padding: .3 * $unit .5 * $unit;
background-color: $documentation-code-background;
border-radius: 2px;
}
pre {
@include code-typography;
padding: $documentation-v-offset $documentation-h-offset;
background-color: $documentation-code-background;
}
> :global(.playground-button) {
display: block;
text-align: left;
> button {
height: $documentation-playground-button-height;
> span {
font-size: $documentation-playground-button-font-size;
line-height: $documentation-playground-button-height;
}
}
}
ul {
margin-left: 7 * $unit;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
> li {
margin-bottom: $unit;
}
}
table {
width: auto;
font-size: $documentation-table-font-size;
thead th {
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
th, td {
padding: $unit;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
}
}