Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-14 06:07:07 +04:00
Code Issues Projects Releases Wiki Activity

Add shadows to the Code block and its header

Browse Source 
The dark surface blended with dark cards. The block gets a soft shadow
all around and the header bar a shadow on the code below it. Both are
themeable through --tblr-code-block-box-shadow and
--tblr-code-block-header-box-shadow.
This commit is contained in:
Bartek committed 2026-10-08 19:55:34 +02:00
1 parent ec1915e55b
commit 45ad316876
2 files changed
+10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

core/scss/_variables.scss
+4
View File
@@ -1827,9 +1827,13 @@ $mockup-browser-sm-url-icon-size: 0.75rem !default;
$code-block-bg: $pre-bg !default;
$code-block-color: $pre-color !default;
$code-block-border-radius: var(--border-radius) !default;
$code-block-box-shadow:
0 0 12px 1px color-transparent(var(--shadow-color), 0.35),
0 10px 20px -6px color-transparent(var(--shadow-color), 0.4) !default;
$code-block-header-bg: rgba(255, 255, 255, 0.05) !default;
$code-block-header-color: rgba(255, 255, 255, 0.6) !default;
$code-block-header-border-color: rgba(255, 255, 255, 0.1) !default;
$code-block-header-box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.5) !default;
$code-block-header-padding-y: 0.375rem !default;
$code-block-header-padding-x: 1rem !default;
$code-block-title-color: $code-block-color !default;
core/scss/ui/_code-block.scss
+6
View File
@@ -6,9 +6,11 @@
--code-block-bg: #{$code-block-bg};
--code-block-color: #{$code-block-color};
--code-block-border-radius: #{$code-block-border-radius};
--code-block-box-shadow: #{$code-block-box-shadow};
--code-block-header-bg: #{$code-block-header-bg};
--code-block-header-color: #{$code-block-header-color};
--code-block-header-border-color: #{$code-block-header-border-color};
--code-block-header-box-shadow: #{$code-block-header-box-shadow};
--code-block-header-padding-y: #{$code-block-header-padding-y};
--code-block-header-padding-x: #{$code-block-header-padding-x};
--code-block-title-color: #{$code-block-title-color};
@@ -31,6 +33,7 @@
text-align: left;
direction: ltr;
background: var(--code-block-bg);
box-shadow: var(--code-block-box-shadow);
@include border-radius(var(--code-block-border-radius));
pre {
@@ -47,6 +50,8 @@
}
.code-block-header {
position: relative;
z-index: 1;
display: flex;
gap: 0.75rem;
align-items: center;
@@ -54,6 +59,7 @@
color: var(--code-block-header-color);
background: var(--code-block-header-bg);
border-bottom: var(--border-width) solid var(--code-block-header-border-color);
box-shadow: var(--code-block-header-box-shadow);
}
.code-block-title {