diff options
Diffstat (limited to 'src/components/molecules/layout/code.module.scss')
| -rw-r--r-- | src/components/molecules/layout/code.module.scss | 305 |
1 files changed, 0 insertions, 305 deletions
diff --git a/src/components/molecules/layout/code.module.scss b/src/components/molecules/layout/code.module.scss deleted file mode 100644 index 2eaf9a2..0000000 --- a/src/components/molecules/layout/code.module.scss +++ /dev/null @@ -1,305 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/mixins" as mix; - -.wrapper { - :global { - .code-toolbar { - --toolbar-height: #{fun.convert-px(100)}; - - position: relative; - margin-top: calc(var(--toolbar-height) + var(--spacing-sm)); - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - --toolbar-height: #{fun.convert-px(60)}; - } - } - - .toolbar { - display: flex; - flex-flow: row wrap; - justify-content: center; - width: 100%; - height: var(--toolbar-height); - position: absolute; - top: calc(var(--toolbar-height) * -1); - left: 0; - right: 0; - background: var(--color-bg-tertiary); - border: fun.convert-px(1) solid var(--color-border); - } - - .toolbar-item { - display: flex; - align-items: center; - margin: 0 var(--spacing-2xs); - } - - .toolbar-item:nth-child(1) { - flex: 0 0 100%; - justify-content: center; - margin: 0 auto 0 0; - padding: 0 var(--spacing-sm); - background: var(--color-bg-code); - border-bottom: fun.convert-px(1) solid var(--color-border); - color: var(--color-primary-darker); - font-size: var(--font-size-sm); - font-weight: 600; - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - flex: 0 0 auto; - justify-content: left; - border-bottom: none; - border-right: fun.convert-px(1) solid var(--color-border); - } - } - } - } - - .copy-to-clipboard-button, - .prism-color-scheme-button { - display: block; - padding: fun.convert-px(3) var(--spacing-xs); - background: var(--color-bg); - border: 0.4ex solid var(--color-primary); - border-radius: fun.convert-px(30); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow); - color: var(--color-primary); - font-size: var(--font-size-sm); - font-weight: 600; - transition: all 0.35s ease-in-out 0s; - - &:hover, - &:focus { - transform: translateX(#{fun.convert-px(-2)}) - translateY(#{fun.convert-px(-2)}); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), - fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) - fun.convert-px(-2) var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) - fun.convert-px(-4) var(--color-shadow-light), - fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) - fun.convert-px(-3) var(--color-shadow-light); - } - - &:focus { - text-decoration: underline var(--color-primary) fun.convert-px(3); - } - - &:active { - text-decoration: none; - transform: translateY(#{fun.convert-px(2)}); - box-shadow: 0 0 0 0 var(--color-shadow); - } - } - - pre[class*="language-"] { - --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs)); - - position: relative; - overflow: auto; - background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border-light); - color: var(--color-fg); - hyphens: none; - tab-size: 4; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - - &.command-line { - --gutter-size: 19ch; - padding-left: var(--gutter-size-with-spacing); - } - - &.line-numbers { - --gutter-size: 6ch; - - counter-reset: lineNumber; - padding-left: var(--gutter-size-with-spacing); - } - - code { - display: block; - padding: var(--spacing-xs) 0; - position: relative; - } - - .line-numbers-rows, - .command-line-prompt { - display: block; - width: var(--gutter-size); - padding: var(--spacing-xs) 0; - position: absolute; - top: 0; - left: calc(var(--gutter-size-with-spacing) * -1); - background: var(--color-bg); - border-right: fun.convert-px(1) solid var(--color-border); - font-size: 100%; - letter-spacing: -1px; - text-align: right; - pointer-events: none; - user-select: none; - - > span { - &::before { - display: block; - padding-right: var(--spacing-xs); - color: var(--color-fg-light); - } - } - } - - .command-line-prompt { - > span { - &::before { - content: " "; - } - - &[data-user]::before { - content: "[" attr(data-user) "@" attr(data-host) "] $"; - } - - &[data-user="root"]::before { - content: "[" attr(data-user) "@" attr(data-host) "] #"; - } - - &[data-prompt]::before { - content: attr(data-prompt); - } - - &[data-continuation-prompt]::before { - content: attr(data-continuation-prompt); - } - } - } - - .line-numbers-rows { - > span { - counter-increment: lineNumber; - - &::before { - content: counter(lineNumber); - } - } - } - - .token { - &.comment, - &.doc-comment { - color: var(--color-fg-light); - } - - &.punctuation { - color: var(--color-fg); - } - - &.attr-name, - &.hexcode, - &.inserted, - &.string { - color: var(--color-token-green); - } - - &.class, - &.coord, - &.id, - &.function { - color: var(--color-token-purple); - } - - &.builtin, - &.builtin.class-name, - &.property-access, - &.regex, - &.scope { - color: var(--color-token-magenta); - } - - &.class-name, - &.constant, - &.global, - &.interpolation, - &.key, - &.package, - &.this, - &.title, - &.variable { - color: var(--color-token-blue); - } - - &.combinator, - &.keyword, - &.operator, - &.pseudo-class, - &.pseudo-element, - &.rule, - &.selector, - &.unit { - color: var(--color-token-orange); - } - - &.attr-value, - &.boolean, - &.number { - color: var(--color-token-yellow); - } - - &.delimiter, - &.doctype, - &.parameter, - &.parent, - &.property, - &.shebang, - &.tag { - color: var(--color-token-cyan); - } - - &.deleted { - color: var(--color-token-red); - } - - &.punctuation.brace-hover, - &.punctuation.brace-selected { - background: var(--color-bg); - outline: solid fun.convert-px(1) var(--color-primary-light); - } - } - - span.inline-color-wrapper { - background: url(fun.encode-svg( - '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>' - )); - - // Prevent repeating pattern to be seen. - background-position: center; - background-size: 110%; - - display: inline-block; - height: 1.1ch; - width: 1.1ch; - margin: 0 0.5ch 0 0; - border: fun.convert-px(1) solid var(--color-bg); - outline: fun.convert-px(1) solid var(--color-border-dark); - overflow: hidden; - } - - span.inline-color { - display: block; - - /* To prevent visual glitches again */ - height: 120%; - width: 120%; - } - } - } -} |
