src/presentation/assets/styles/base/_code-styling.scss
@use "@/presentation/assets/styles/colors" as *;
@use "@/presentation/assets/styles/mixins" as *;
@use "@/presentation/assets/styles/vite-path" as *;
@use "@/presentation/assets/styles/typography" as *;
@use 'sass:math';
@mixin code-block() {
pre {
@content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
}
}
@mixin inline-code() {
:not(pre)>code {
@content;
}
}
@mixin base-code() {
code {
@content;
}
}
@mixin style-code-elements(
$color-background,
$code-block-padding,
) {
$font-size-code: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
$border-radius: 2px; // Subtle rounding still maintaining sharp design.
@include base-code {
font-family: $font-family-monospace;
border-radius: $border-radius;
font-size: $font-size-code;
color: $color-on-primary;
}
@include inline-code {
background: $color-background;
word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
$font-size-code-in-decimal: math.div($font-size-code, 100%); // Converts percentage (e.g., 85%) to decimal (e.g., 0.85) for calculations.
$font-size-code-in-em: calc(1em * #{$font-size-code-in-decimal});
$vertical-padding: calc((1em - #{$font-size-code-in-em}) / 2);
$horizontal-padding: calc(#{$font-size-code-in-em} * 0.4);
padding: $vertical-padding $horizontal-padding;
}
@include code-block {
background: $color-background;
border-radius: $border-radius;
overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
padding: $code-block-padding;
}
}