UNPKG

dumi

Version:

📖 Documentation Generator of React Component

203 lines (169 loc) • 3.69 kB
@import (reference) '../../styles/variables.less'; // override prism theme for dark mode @{dark-selector} { .token.doctype, .token.punctuation, .token.entity, code[class*='language-'], pre[class*='language-'] { color: @c-text-secondary-dark; } .token.comment, .token.prolog, .token.cdata { color: @c-text-note-dark; } } .@{prefix}-source-code { @bg-color: tint(@c-site-bg, 50%); position: relative; background-color: @bg-color; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; &-scroll-container { overflow: auto; width: 100%; height: 100%; } &-scroll-content { position: relative; width: max-content; height: max-content; min-width: 100%; min-height: 100%; > pre.prism-code { width: max-content; position: relative; overflow: visible; } } > pre.prism-code { overflow: auto; } > pre.prism-code, &-scroll-content > pre.prism-code { margin: 0; padding: 18px 24px; font-size: 14px; line-height: 1.58; direction: ltr; background: transparent; // remove shadow from coy theme &::before, &::after { content: none; } // highlight line & > .highlighted { position: relative; width: calc(100% + 24px); background-color: shade(@bg-color, 5%); .line-cell { position: relative; &::after { content: ''; position: absolute; top: 0; right: -24px; bottom: 0; width: 24px; background-color: shade(@bg-color, 5%); } } &::after { content: ''; position: absolute; top: 0; left: -24px; bottom: 0; width: 24px; background-color: shade(@bg-color, 5%); } } & > .wrap { display: table-row; & > .token-line-num { display: table-cell; text-align: right; padding-right: 1em; user-select: none; opacity: 0.5; } & > .line-cell { display: table-cell; width: 100%; } } } &-copy { position: absolute; z-index: 2; top: 9px; right: 12px; display: inline-block; padding: 8px 12px; background-color: fade(@bg-color, 80%); border: 0; border-radius: 2px; cursor: pointer; transition: all 0.2s; > svg { width: 16px; fill: darken(@c-border, 20%); transition: fill 0.2s; @{dark-selector} & { fill: lighten(@c-border-dark, 20%); } } &:hover > svg { fill: darken(@c-border, 30%); @{dark-selector} & { fill: lighten(@c-border-dark, 30%); } } &[data-copied] > svg { fill: @c-success; @{dark-selector} & { fill: @c-success-dark; } } } &:not(:hover) &-copy { opacity: 0; visibility: hidden; } &-language { position: absolute; top: 2px; right: 8px; z-index: 2; font-size: 12px; font-weight: 500; user-select: none; user-select: none; color: @c-text-note; transition: color 0.4s, opacity 0.4s; } &:hover &-language { opacity: 0; visibility: hidden; } @{dark-selector} & { @bg-color: shade(@c-site-bg-dark, 50%); background-color: @bg-color; &-copy { background-color: fadeout(@bg-color, 80%); } & > pre.prism-code > .highlighted { background-color: tint(@bg-color, 10%); &::after { background-color: tint(@bg-color, 10%); } .line-cell { &::after { background-color: tint(@bg-color, 10%); } } } } }