update
This commit is contained in:
@ -141,7 +141,7 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">CSS Example</div>
|
||||
<div class="section-description">Modern CSS with custom properties and animations.</div>
|
||||
<div class="section-description">Modern CSS with custom properties and animations. Note the shorter language label.</div>
|
||||
<dees-dataview-codebox proglang="css">
|
||||
/* Modern CSS with custom properties */
|
||||
:root {
|
||||
@ -169,6 +169,29 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">JSON Example</div>
|
||||
<div class="section-description">JSON configuration with proper formatting.</div>
|
||||
<dees-dataview-codebox proglang="json">
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "1.10.7",
|
||||
"description": "A comprehensive catalog of web components",
|
||||
"main": "dist_ts_web/index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
|
||||
"watch": "tswatch element",
|
||||
"test": "tstest test/ --web --verbose"
|
||||
},
|
||||
"dependencies": {
|
||||
"@design.estate/dees-element": "^2.0.45",
|
||||
"highlight.js": "^11.9.0"
|
||||
}
|
||||
}
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
|
@ -82,28 +82,34 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
}
|
||||
|
||||
.bottomBar {
|
||||
position: relative;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
text-align: right;
|
||||
padding-right: 100px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spacesLabel {
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.languageLabel {
|
||||
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
z-index: 10;
|
||||
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
padding: 0px 16px 0px 8px;
|
||||
padding: 0px 16px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hljs-keyword {
|
||||
@ -215,7 +221,7 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
<pre><code></code></pre>
|
||||
</div>
|
||||
<div class="bottomBar">
|
||||
Spaces: 2
|
||||
<div class="spacesLabel">Spaces: 2</div>
|
||||
<div class="languageLabel">${this.progLang}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user