Files
tiptap/docs/src/templates/DocPage/style.scss
2020-08-28 13:20:49 +02:00

162 lines
2.7 KiB
SCSS

.doc-page {
&__markdown ::v-deep {
a {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
font-weight: 500;
}
h1 {
font-weight: 400;
}
h1,
h4,
h5,
h6 {
a {
display: none;
}
}
h2,
h3 {
position: relative;
a {
position: absolute;
top: 0;
right: 100%;
color: rgba($colorBlack, 0.4);
text-decoration: none;
font-weight: 400;
padding-right: 0.5rem;
opacity: 0;
transition: opacity 0.1s $ease;
}
&:hover a {
opacity: 1;
}
}
> * + * {
margin-top: 1.5em;
}
ul {
list-style-type: none;
> * + * {
margin-top: 0.5rem;
}
li {
position: relative;
padding-left: 1.25rem;
&::before {
position: absolute;
left: 0;
display: inline-block;
margin-right: 0.75rem;
content: "\2022";
opacity: 0.2;
}
}
}
ol {
counter-reset: item;
> * + * {
margin-top: 0.5rem;
}
li {
position: relative;
padding-left: 2.5rem;
&::before {
position: absolute;
top: 0;
left: 0;
margin-top: 1px;
display: flex;
align-items: center;
justify-content: center;
height: 1.5rem;
width: 1.5rem;
background-color: rgba($colorBlack, 0.1);
border-radius: 9999px;
color: rgba($colorBlack, 0.4);
font-size: 0.75rem;
font-weight: 700;
content: counter(item);
counter-increment: item;
}
}
}
table {
width: 100%;
border-collapse: collapse;
th,
td {
text-align: left;
font-size: 0.75rem;
padding: 0.5rem;
}
th {
font-weight: 600;
background-color: rgba($colorBlack, 0.05);
&:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
td {
border-bottom: 1px solid rgba($colorBlack, 0.05);
}
tr:last-child td {
border-bottom: 0;
}
}
.remark-container {
padding: 1rem;
border: 2px solid rgba($colorBlack, 0.1);
border-radius: 0.25rem;
&.warning {
border-color:#ffd8a8;
background-color: #fff4e6;
}
.remark-container-title {
font-weight: 600;
color: #ca9c63;
}
}
}
}