move example template files to examples/, clean up root
This commit is contained in:
Glint Dev
82
examples/display/display.gtlm
Normal file
82
examples/display/display.gtlm
Normal file
@@ -0,0 +1,82 @@
|
||||
// =============================================================================
|
||||
// GLINT UI: Style Properties Test Suite
|
||||
// Tests: opacity, font-weight, text-align, line-height, display: none
|
||||
// =============================================================================
|
||||
|
||||
@version 1
|
||||
@style "main.glts"
|
||||
|
||||
@global $show_secret = true
|
||||
|
||||
Window(title="Style Test Suite", width=800, height=600) {
|
||||
Panel(class="layout-viewport") {
|
||||
Header "Style Properties Test Suite"
|
||||
|
||||
// ── 1. Opacity ───────────────────────────────────────────────
|
||||
Text(class="test-section-header") "1. Opacity"
|
||||
Panel(class="test-row") {
|
||||
Panel(class="opacity-fade") {
|
||||
Text "Fade (0.3)"
|
||||
}
|
||||
Panel(class="opacity-mid") {
|
||||
Text "Mid (0.6)"
|
||||
}
|
||||
Panel(class="opacity-subtle") {
|
||||
Text "Subtle (0.85)"
|
||||
}
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
// ── 2. Font Weight ────────────────────────────────────────────
|
||||
Text(class="test-section-header") "2. Font Weight"
|
||||
Panel(class="test-row") {
|
||||
Text(class="fw-light") "Light 300"
|
||||
Text(class="fw-normal") "Normal 400"
|
||||
Text(class="fw-bold") "Bold 700"
|
||||
Text(class="fw-black") "Black 900"
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
// ── 3. Text Align ─────────────────────────────────────────────
|
||||
Text(class="test-section-header") "3. Text Align"
|
||||
Panel(class="ta-box") { Text(class="ta-left") "Left Aligned" }
|
||||
Panel(class="ta-box") { Text(class="ta-center") "Center Aligned" }
|
||||
Panel(class="ta-box") { Text(class="ta-right") "Right Aligned" }
|
||||
|
||||
Divider()
|
||||
|
||||
// ── 4. Comma-separated Selectors ─────────────────────────────
|
||||
Text(class="test-section-header") "4. Comma Selectors"
|
||||
Panel(class="layout-row") {
|
||||
Text(class="warning-text") "⚠ Warning text"
|
||||
Text(class="error-text") "✖ Error text"
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
// ── 6. Line Height ────────────────────────────────────────────
|
||||
Text(class="test-section-header") "4. Line Height"
|
||||
Panel(class="lh-box") {
|
||||
Text(class="lh-tight") "Line height 0.8 — плотный текст для проверки межстрочного интервала. Текст должен быть более сжатым по вертикали."
|
||||
}
|
||||
Panel(class="lh-box") {
|
||||
Text(class="lh-normal") "Line height 1.2 — нормальное значение по умолчанию. Этот блок служит эталоном для сравнения."
|
||||
}
|
||||
Panel(class="lh-box") {
|
||||
Text(class="lh-loose") "Line height 2.0 — разреженный текст для наглядного сравнения. Строки должны быть хорошо заметно разделены."
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
// ── 7. Display: None ──────────────────────────────────────────
|
||||
Text(class="test-section-header") "5. Display: None"
|
||||
Panel(class="hidden-box") {
|
||||
Text "Этого блока не должно быть видно!"
|
||||
}
|
||||
@if $show_secret {
|
||||
Text "✅ Блок с display:none скрыт (выше не видно красную панель)."
|
||||
}
|
||||
}
|
||||
}
|
||||
432
examples/display/main.glts
Normal file
432
examples/display/main.glts
Normal file
@@ -0,0 +1,432 @@
|
||||
// =============================================================================
|
||||
// Glint Design System — Core Fixed Stylesheet (main.glts)
|
||||
// =============================================================================
|
||||
|
||||
$bg-app = #11111b
|
||||
$bg-panel = #1e1e2e
|
||||
$bg-surface = #313244
|
||||
$bg-input = #181825
|
||||
$accent = #b4befe
|
||||
$text-main = #cdd6f4
|
||||
$text-muted = #9399b2
|
||||
$border-glow = #45475a
|
||||
|
||||
@mixin text-body {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
@mixin standard-card {
|
||||
background: $bg-panel
|
||||
border-color: $border-glow
|
||||
border-width: 1px
|
||||
border-radius: 12px
|
||||
}
|
||||
|
||||
Window {
|
||||
background: $bg-app
|
||||
}
|
||||
|
||||
Panel {
|
||||
background: transparent
|
||||
border-width: 0px
|
||||
padding: 0px
|
||||
gap: 12px
|
||||
direction: vertical
|
||||
}
|
||||
|
||||
.ui-card {
|
||||
@use standard-card
|
||||
padding: 14px
|
||||
gap: 12px
|
||||
align-items: center
|
||||
content-align: center
|
||||
}
|
||||
|
||||
// ── Служебные Layout-классы ──────────────────────────────────────────────────
|
||||
|
||||
.layout-viewport {
|
||||
width: fill
|
||||
padding: 16px
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
direction: horizontal
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.layout-col {
|
||||
direction: vertical
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.layout-clean {
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Стили атомарных компонентов ──────────────────────────────────────────────
|
||||
|
||||
Header {
|
||||
color: $accent
|
||||
font-size: 20px
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
Text {
|
||||
@use text-body
|
||||
}
|
||||
|
||||
Label {
|
||||
color: $text-muted
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
Input {
|
||||
background-color: $bg-input
|
||||
color: $text-main
|
||||
font-size: 14px
|
||||
padding: 10px
|
||||
border-radius: 8px
|
||||
border-width: 1px
|
||||
border-color: $border-glow
|
||||
width: 240px
|
||||
}
|
||||
|
||||
Toggle {
|
||||
color: $text-main
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
Divider {
|
||||
background: $border-glow
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
Button {
|
||||
border-radius: 6px
|
||||
border-width: 1px
|
||||
padding: 8px
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
background: #000000
|
||||
}
|
||||
|
||||
Image {
|
||||
border-radius: 8px
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
// ── Секция тестирования продвинутой геометрии Box-Model ──────────────────────
|
||||
|
||||
.geometry-box {
|
||||
@use standard-card
|
||||
background: #24253a
|
||||
border-color: #f38ba8
|
||||
border-width: 2px
|
||||
padding-top: 24px
|
||||
padding-bottom: 12px
|
||||
padding-left: 16px
|
||||
padding-right: 40px
|
||||
width: 320px
|
||||
}
|
||||
|
||||
.margin-test-item {
|
||||
background: #a6e3a1
|
||||
padding: 8px
|
||||
margin-top: 12px
|
||||
margin-bottom: 4px
|
||||
}
|
||||
|
||||
// ── Секция тестирования каскадного наследования (Inheritance) ────────────────
|
||||
|
||||
.inheritance-box {
|
||||
@use standard-card
|
||||
background: #181825
|
||||
padding: 12px
|
||||
color: #f9e2af
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.override-style {
|
||||
color: #f38ba8
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
// ── Секция распределения весов Flex-Grow (Fill portions) ────────────────────
|
||||
|
||||
.flex-row-bar {
|
||||
background: $bg-surface
|
||||
direction: horizontal
|
||||
padding: 8px
|
||||
gap: 8px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.fill-10 {
|
||||
background: #f38ba8
|
||||
width: 10%
|
||||
}
|
||||
|
||||
.fixed-120 {
|
||||
background: #f9e2af
|
||||
width: 50px
|
||||
color: #11111b
|
||||
}
|
||||
|
||||
.fill-20 {
|
||||
background: #a6e3a1
|
||||
width: 20%
|
||||
color: #11111b
|
||||
}
|
||||
|
||||
// ── СТИЛИ ДЛЯ ПРОВЕРКИ POSITION: FIXED ───────────────────────────────────────
|
||||
|
||||
.fixed-toast {
|
||||
position: fixed
|
||||
top: 20px
|
||||
right: 20px
|
||||
background: #a6e3a1
|
||||
border-radius: 8px
|
||||
padding: 12px
|
||||
border-width: 1px
|
||||
border-color: #a6e3a1
|
||||
color: #000
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background: transparen
|
||||
border-width: 0px
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.scroll-test-box {
|
||||
@use standard-card
|
||||
background: #313244
|
||||
height: 150px
|
||||
width: 250px
|
||||
overflow-y: scroll
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
|
||||
// ── Стили для тестирования Sticky Эффекта ────────────────────
|
||||
|
||||
.sticky-container {
|
||||
@use standard-card
|
||||
background: #181825
|
||||
padding: 12px
|
||||
gap: 8px
|
||||
width: fill
|
||||
height: 200px
|
||||
overflow-y: scroll
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
position: sticky
|
||||
top: 0px
|
||||
background: #fab387
|
||||
padding: 10px 14px
|
||||
border-radius: 6px
|
||||
color: #11111b
|
||||
font-weight: bold
|
||||
font-size: 14px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.scroll-spacer {
|
||||
gap: 100px
|
||||
padding: 10px
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Opacity ────────────────────────────
|
||||
|
||||
.opacity-fade {
|
||||
background: #f38ba8
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
opacity: 0.3
|
||||
}
|
||||
|
||||
.opacity-mid {
|
||||
background: #a6e3a1
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.opacity-subtle {
|
||||
background: #89b4fa
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
opacity: 0.85
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Font-Weight ─────────────────────────
|
||||
|
||||
.fw-light {
|
||||
font-weight: 300
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
.fw-normal {
|
||||
font-weight: 400
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
font-weight: 700
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
.fw-black {
|
||||
font-weight: 900
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Text-Align ──────────────────────────
|
||||
|
||||
.ta-box {
|
||||
background: #313244
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.ta-left {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.ta-center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ta-right {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Line-Height ─────────────────────────
|
||||
|
||||
.lh-box {
|
||||
background: #313244
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.lh-tight {
|
||||
line-height: 0.8
|
||||
}
|
||||
|
||||
.lh-normal {
|
||||
line-height: 1.2
|
||||
}
|
||||
|
||||
.lh-loose {
|
||||
line-height: 2.0
|
||||
}
|
||||
|
||||
// ── Стили для тестирования селекторов через запятую ────────────
|
||||
|
||||
.warning-text, .error-text {
|
||||
font-weight: bold
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #f9e2af
|
||||
background: #3d3520
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #f38ba8
|
||||
background: #3d2020
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Display: None ───────────────────────
|
||||
|
||||
.hidden-box {
|
||||
background: #f38ba8
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
display: none
|
||||
}
|
||||
|
||||
.test-section-header {
|
||||
color: $accent
|
||||
font-size: 16px
|
||||
padding: 4px 0
|
||||
margin-top: 8px
|
||||
}
|
||||
|
||||
.test-row {
|
||||
direction: horizontal
|
||||
gap: 12px
|
||||
align-items: center
|
||||
}
|
||||
|
||||
// ── Стили для тестирования POSITION: ABSOLUTE ────────────────
|
||||
|
||||
.abs-demo-container {
|
||||
position: relative
|
||||
background: #313244
|
||||
padding: 16px
|
||||
margin-top: 8px
|
||||
border-radius: 8px
|
||||
width: fill
|
||||
gap: 8px
|
||||
min-height: 60px
|
||||
}
|
||||
|
||||
.abs-demo-badge {
|
||||
position: absolute
|
||||
top: 10px
|
||||
right: 4px
|
||||
background: #f38ba8
|
||||
color: #11111b
|
||||
font-weight: bold
|
||||
font-size: 10px
|
||||
padding: 4px 8px
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
// ── Полноценная демка absolute-позиционирования ──────────────
|
||||
|
||||
.absolute-demo-section {
|
||||
@use standard-card
|
||||
background: #181825
|
||||
padding: 12px
|
||||
gap: 8px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.abs-stage {
|
||||
position: relative
|
||||
background: #24253a
|
||||
border-color: $accent
|
||||
border-width: 1px
|
||||
border-radius: 8px
|
||||
padding: 16px
|
||||
gap: 6px
|
||||
width: fill
|
||||
min-height: 80px
|
||||
}
|
||||
|
||||
.abs-overlay {
|
||||
position: absolute
|
||||
top: 10px
|
||||
right: 10px
|
||||
background: #f38ba8
|
||||
border-radius: 6px
|
||||
padding: 8px 12px
|
||||
color: #11111b
|
||||
font-weight: bold
|
||||
font-size: 12px
|
||||
gap: 4px
|
||||
}
|
||||
209
examples/glt/desktop.gltm
Normal file
209
examples/glt/desktop.gltm
Normal file
@@ -0,0 +1,209 @@
|
||||
// =============================================================================
|
||||
// GLINT UI: Compact Reactive Test Suite (Fixed Layout)
|
||||
// =============================================================================
|
||||
|
||||
@version 1
|
||||
@style "main.glts"
|
||||
|
||||
// ── 1. Global Application State ──────────────────────────────────────────────
|
||||
@global $APP_TITLE = "Glint Core Console"
|
||||
@global $username = "Operator"
|
||||
@global $volume_level = 50.0
|
||||
@global $is_enabled = true
|
||||
@global $access_level = 5.0
|
||||
@global $team_nodes = ["Alpha", "Bravo", "Charlie"]
|
||||
@global $show_toast = true
|
||||
|
||||
@singleton SystemSettings {
|
||||
theme = "ocean-blue",
|
||||
refresh_rate = 60,
|
||||
debug_mode = true,
|
||||
storage_path = fs:/var/lib/glint/assets
|
||||
}
|
||||
|
||||
!rhei: {
|
||||
fn load_status(val) {
|
||||
if val == 0.0 { "💤 Muted" }
|
||||
else if val >= 80.0 { "🔥 Overload" }
|
||||
else { "⚡ Active" }
|
||||
}
|
||||
|
||||
let sum = 0;
|
||||
for i in 1..=5 { sum = sum + i; }
|
||||
print("Rhai Engine online. Checksum: " + sum);
|
||||
}
|
||||
|
||||
// ── 2. Reusable UI Components ────────────────────────────────────────────────
|
||||
@component NodeCard(nodename: String, level: Float) {
|
||||
Panel(class="ui-card") {
|
||||
Label(text=$nodename)
|
||||
@if !rhei: { level >= 5.0 } {
|
||||
Text "🛡️ Secure Node"
|
||||
} @else {
|
||||
Text "🔓 Guest Node"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── 3. Application Layout Tree ───────────────────────────────────────────────
|
||||
Window(title=$APP_TITLE, width=1024, height=720) {
|
||||
Panel(class="sticky-header") {
|
||||
Header "Glint Compiler/Runtime Demostration"
|
||||
}
|
||||
Panel(class="layout-viewport") {
|
||||
|
||||
// --- Верхняя панель (Header Section) ---
|
||||
Panel(class="layout-row") {
|
||||
Image(src=fs:/home/faynot/elyz/software/glt/logo.png) {}
|
||||
Panel(class="layout-col") {
|
||||
Header "Glint Reactive Dashboard"
|
||||
Text !rhei: { "User: " + username + " | Status: " + load_status(volume_level) }
|
||||
}
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
// --- Главная рабочая область (Workspace Split) ---
|
||||
Panel(class="layout-row") {
|
||||
|
||||
// Левая колонка: Интерактивное состояние и биндинги
|
||||
Panel(class="layout-col") {
|
||||
Panel(class="ui-card") {
|
||||
Header "State Bindings"
|
||||
Input(placeholder="Change title...", value=$APP_TITLE)
|
||||
Toggle(label="Live Engine", value=$is_enabled)
|
||||
|
||||
@if $is_enabled {
|
||||
Text "🟢 System: ONLINE"
|
||||
} @else {
|
||||
Text "🔴 System: OFFLINE"
|
||||
}
|
||||
}
|
||||
|
||||
Panel(class="ui-card") {
|
||||
Header "Control Channels"
|
||||
Slider(value=$volume_level)
|
||||
ProgressBar(value=$volume_level)
|
||||
Text !rhei: { "Metrics Level: " + volume_level + "%" }
|
||||
}
|
||||
}
|
||||
|
||||
// Правая колонка: Тестирование геометрии и каскада стилей
|
||||
Panel(class="layout-col") {
|
||||
Panel(class="geometry-box") {
|
||||
Header "Box Model Geometry"
|
||||
Text "Asymmetric padding layout container."
|
||||
Panel(class="margin-test-item") {
|
||||
Text "Margin-Top Spacer Box"
|
||||
}
|
||||
}
|
||||
|
||||
Panel(class="inheritance-box") {
|
||||
Text "Inherited Yellow Color & 18px Font Size"
|
||||
Text(class="override-style") "Explicit Style Override (Pink, 12px)"
|
||||
}
|
||||
|
||||
// Управление уровнем доступа и изменение переменных по клику
|
||||
Panel(class="ui-card") {
|
||||
Header "Access Management"
|
||||
Slider(value=$access_level)
|
||||
|
||||
// ── ТЕСТ POSITION: ABSOLUTE ─────────────────────
|
||||
Panel(class="abs-demo-container") {
|
||||
Panel(class="abs-demo-badge") {
|
||||
Text "ABSOLUTE!"
|
||||
}
|
||||
Text "(бадж спозиционирован абсолютно)"
|
||||
Button(label="Press me") {}
|
||||
}
|
||||
|
||||
Panel(class="layout-row") {
|
||||
Button(label="Set Admin (Lvl 9)", class="btn-custom") {
|
||||
@on click { !rhei: { access_level = 9.0; } }
|
||||
}
|
||||
Button(label="Reset Access") {
|
||||
@on click { !rhei: { access_level = 1.0; } }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Динамический список узлов (@each Grid) ---
|
||||
Panel(direction="grid", columns=3, gap=12, class="layout-clean") {
|
||||
@each $node in $team_nodes {
|
||||
NodeCard(nodename=$node, level=$access_level)
|
||||
}
|
||||
}
|
||||
|
||||
// --- Нижняя панель распределения пространства ---
|
||||
Panel(class="flex-row-bar") {
|
||||
Panel(class="fill-10") { Text "Grow 10%" }
|
||||
Panel(class="fixed-120") { Text "Fixed 120px" }
|
||||
Panel(class="fill-20") { Text "Grow 20%" }
|
||||
}
|
||||
}
|
||||
|
||||
// ── ТЕСТ ФИКСИРОВАННЫХ СЛОЕВ ───────────────────
|
||||
@if $show_toast {
|
||||
Panel(class="fixed-toast") {
|
||||
Panel(class="layout-row") {
|
||||
Text "🔔 [FIXED LAYER TEST]: Runtime compiled successfully!"
|
||||
Button(label="❌", class="btn-close") {
|
||||
@on click { !rhei: { show_toast = false; } }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Panel(class="scroll-test-box") {
|
||||
Header "Scroll Test"
|
||||
Text "Line 1: Item A"
|
||||
Text "Line 2: Item B"
|
||||
Text "Line 3: Item C"
|
||||
Text "Line 4: Item D"
|
||||
Text "Line 5: Item E"
|
||||
Text "Line 6: Item F"
|
||||
Text "Line 7: Item G"
|
||||
Text "Line 8: Item H"
|
||||
Text "Line 9: Item I"
|
||||
Text "Line 10: Item J"
|
||||
}
|
||||
|
||||
// ── ДЕМО POSITION: ABSOLUTE (Overlay-карточка) ────────────────────
|
||||
Panel(class="absolute-demo-section") {
|
||||
Header "Position: Absolute Demo"
|
||||
Panel(class="abs-stage") {
|
||||
Panel(class="abs-overlay") {
|
||||
Text "🎯 Абсолютно спозиционирована!"
|
||||
Text "top: 10px | right: 10px"
|
||||
}
|
||||
Text "Этот текст — часть нормального потока."
|
||||
Text "Оверлей лежит поверх, не влияя на раскладку."
|
||||
Text "Работает как position: absolute в CSS."
|
||||
}
|
||||
}
|
||||
|
||||
Panel(class="sticky-container") {
|
||||
Text "Scroll down to test sticky effect (внутренний скролл):"
|
||||
|
||||
// Стикер внутри скролл-контейнера
|
||||
Panel(class="sticky-header") {
|
||||
Text "📌 STICKY: я прилип к верху!"
|
||||
}
|
||||
|
||||
// Большой блок текста снизу, чтобы гарантировать появление скролла
|
||||
Panel(class="scroll-spacer") {
|
||||
Text "Item 1: Лорем ипсум долор сит амет..."
|
||||
Text "Item 2: Консектетур адипискинг элит."
|
||||
Text "Item 3: Сед до эйусмод темпор."
|
||||
Text "Item 4: Инсидидунт ут лаборе."
|
||||
Text "Item 5: Долоре магна аликва."
|
||||
Text "Item 6: Ут enim ад миним veniam."
|
||||
Text "Item 7: Квис нострум экзерситатион."
|
||||
Text "Item 8: Уллаmко лаборис ниси ут."
|
||||
Text "Item 9: Аликип экс иа коммодо."
|
||||
Text "— Конец тестового контента —"
|
||||
}
|
||||
}
|
||||
}
|
||||
432
examples/glt/main.glts
Normal file
432
examples/glt/main.glts
Normal file
@@ -0,0 +1,432 @@
|
||||
// =============================================================================
|
||||
// Glint Design System — Core Fixed Stylesheet (main.glts)
|
||||
// =============================================================================
|
||||
|
||||
$bg-app = #11111b
|
||||
$bg-panel = #1e1e2e
|
||||
$bg-surface = #313244
|
||||
$bg-input = #181825
|
||||
$accent = #b4befe
|
||||
$text-main = #cdd6f4
|
||||
$text-muted = #9399b2
|
||||
$border-glow = #45475a
|
||||
|
||||
@mixin text-body {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
@mixin standard-card {
|
||||
background: $bg-panel
|
||||
border-color: $border-glow
|
||||
border-width: 1px
|
||||
border-radius: 12px
|
||||
}
|
||||
|
||||
Window {
|
||||
background: $bg-app
|
||||
}
|
||||
|
||||
Panel {
|
||||
background: transparent
|
||||
border-width: 0px
|
||||
padding: 0px
|
||||
gap: 12px
|
||||
direction: vertical
|
||||
}
|
||||
|
||||
.ui-card {
|
||||
@use standard-card
|
||||
padding: 14px
|
||||
gap: 12px
|
||||
align-items: center
|
||||
content-align: center
|
||||
}
|
||||
|
||||
// ── Служебные Layout-классы ──────────────────────────────────────────────────
|
||||
|
||||
.layout-viewport {
|
||||
width: fill
|
||||
padding: 16px
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
direction: horizontal
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.layout-col {
|
||||
direction: vertical
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.layout-clean {
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Стили атомарных компонентов ──────────────────────────────────────────────
|
||||
|
||||
Header {
|
||||
color: $accent
|
||||
font-size: 20px
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
Text {
|
||||
@use text-body
|
||||
}
|
||||
|
||||
Label {
|
||||
color: $text-muted
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
Input {
|
||||
background-color: $bg-input
|
||||
color: $text-main
|
||||
font-size: 14px
|
||||
padding: 10px
|
||||
border-radius: 8px
|
||||
border-width: 1px
|
||||
border-color: $border-glow
|
||||
width: 240px
|
||||
}
|
||||
|
||||
Toggle {
|
||||
color: $text-main
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
Divider {
|
||||
background: $border-glow
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
Button {
|
||||
border-radius: 6px
|
||||
border-width: 1px
|
||||
padding: 8px
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
background: #000000
|
||||
}
|
||||
|
||||
Image {
|
||||
border-radius: 8px
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
// ── Секция тестирования продвинутой геометрии Box-Model ──────────────────────
|
||||
|
||||
.geometry-box {
|
||||
@use standard-card
|
||||
background: #24253a
|
||||
border-color: #f38ba8
|
||||
border-width: 2px
|
||||
padding-top: 24px
|
||||
padding-bottom: 12px
|
||||
padding-left: 16px
|
||||
padding-right: 40px
|
||||
width: 320px
|
||||
}
|
||||
|
||||
.margin-test-item {
|
||||
background: #a6e3a1
|
||||
padding: 8px
|
||||
margin-top: 12px
|
||||
margin-bottom: 4px
|
||||
}
|
||||
|
||||
// ── Секция тестирования каскадного наследования (Inheritance) ────────────────
|
||||
|
||||
.inheritance-box {
|
||||
@use standard-card
|
||||
background: #181825
|
||||
padding: 12px
|
||||
color: #f9e2af
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.override-style {
|
||||
color: #f38ba8
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
// ── Секция распределения весов Flex-Grow (Fill portions) ────────────────────
|
||||
|
||||
.flex-row-bar {
|
||||
background: $bg-surface
|
||||
direction: horizontal
|
||||
padding: 8px
|
||||
gap: 8px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.fill-10 {
|
||||
background: #f38ba8
|
||||
width: 10%
|
||||
}
|
||||
|
||||
.fixed-120 {
|
||||
background: #f9e2af
|
||||
width: 50px
|
||||
color: #11111b
|
||||
}
|
||||
|
||||
.fill-20 {
|
||||
background: #a6e3a1
|
||||
width: 20%
|
||||
color: #11111b
|
||||
}
|
||||
|
||||
// ── СТИЛИ ДЛЯ ПРОВЕРКИ POSITION: FIXED ───────────────────────────────────────
|
||||
|
||||
.fixed-toast {
|
||||
position: fixed
|
||||
top: 20px
|
||||
right: 20px
|
||||
background: #a6e3a1
|
||||
border-radius: 8px
|
||||
padding: 12px
|
||||
border-width: 1px
|
||||
border-color: #a6e3a1
|
||||
color: #000
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background: transparen
|
||||
border-width: 0px
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.scroll-test-box {
|
||||
@use standard-card
|
||||
background: #313244
|
||||
height: 150px
|
||||
width: 250px
|
||||
overflow-y: scroll
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
|
||||
// ── Стили для тестирования Sticky Эффекта ────────────────────
|
||||
|
||||
.sticky-container {
|
||||
@use standard-card
|
||||
background: #181825
|
||||
padding: 12px
|
||||
gap: 8px
|
||||
width: fill
|
||||
height: 200px
|
||||
overflow-y: scroll
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
position: sticky
|
||||
top: 0px
|
||||
background: #fab387
|
||||
padding: 10px 14px
|
||||
border-radius: 6px
|
||||
color: #11111b
|
||||
font-weight: bold
|
||||
font-size: 14px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.scroll-spacer {
|
||||
gap: 100px
|
||||
padding: 10px
|
||||
width: fill
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Opacity ────────────────────────────
|
||||
|
||||
.opacity-fade {
|
||||
background: #f38ba8
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
opacity: 0.3
|
||||
}
|
||||
|
||||
.opacity-mid {
|
||||
background: #a6e3a1
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.opacity-subtle {
|
||||
background: #89b4fa
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
opacity: 0.85
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Font-Weight ─────────────────────────
|
||||
|
||||
.fw-light {
|
||||
font-weight: 300
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
.fw-normal {
|
||||
font-weight: 400
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
font-weight: 700
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
.fw-black {
|
||||
font-weight: 900
|
||||
color: $text-main
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Text-Align ──────────────────────────
|
||||
|
||||
.ta-box {
|
||||
background: #313244
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.ta-left {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.ta-center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ta-right {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Line-Height ─────────────────────────
|
||||
|
||||
.lh-box {
|
||||
background: #313244
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.lh-tight {
|
||||
line-height: 0.8
|
||||
}
|
||||
|
||||
.lh-normal {
|
||||
line-height: 1.2
|
||||
}
|
||||
|
||||
.lh-loose {
|
||||
line-height: 2.0
|
||||
}
|
||||
|
||||
// ── Стили для тестирования селекторов через запятую ────────────
|
||||
|
||||
.warning-text, .error-text {
|
||||
font-weight: bold
|
||||
padding: 8px
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #f9e2af
|
||||
background: #3d3520
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #f38ba8
|
||||
background: #3d2020
|
||||
}
|
||||
|
||||
// ── Стили для тестирования Display: None ───────────────────────
|
||||
|
||||
.hidden-box {
|
||||
background: #f38ba8
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
display: none
|
||||
}
|
||||
|
||||
.test-section-header {
|
||||
color: $accent
|
||||
font-size: 16px
|
||||
padding: 4px 0
|
||||
margin-top: 8px
|
||||
}
|
||||
|
||||
.test-row {
|
||||
direction: horizontal
|
||||
gap: 12px
|
||||
align-items: center
|
||||
}
|
||||
|
||||
// ── Стили для тестирования POSITION: ABSOLUTE ────────────────
|
||||
|
||||
.abs-demo-container {
|
||||
position: relative
|
||||
background: #313244
|
||||
padding: 16px
|
||||
margin-top: 8px
|
||||
border-radius: 8px
|
||||
width: fill
|
||||
gap: 8px
|
||||
min-height: 60px
|
||||
}
|
||||
|
||||
.abs-demo-badge {
|
||||
position: absolute
|
||||
top: 10px
|
||||
right: 4px
|
||||
background: #f38ba8
|
||||
color: #11111b
|
||||
font-weight: bold
|
||||
font-size: 10px
|
||||
padding: 4px 8px
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
// ── Полноценная демка absolute-позиционирования ──────────────
|
||||
|
||||
.absolute-demo-section {
|
||||
@use standard-card
|
||||
background: #181825
|
||||
padding: 12px
|
||||
gap: 8px
|
||||
width: fill
|
||||
}
|
||||
|
||||
.abs-stage {
|
||||
position: relative
|
||||
background: #24253a
|
||||
border-color: $accent
|
||||
border-width: 1px
|
||||
border-radius: 8px
|
||||
padding: 16px
|
||||
gap: 6px
|
||||
width: fill
|
||||
min-height: 80px
|
||||
}
|
||||
|
||||
.abs-overlay {
|
||||
position: absolute
|
||||
top: 10px
|
||||
right: 10px
|
||||
background: #f38ba8
|
||||
border-radius: 6px
|
||||
padding: 8px 12px
|
||||
color: #11111b
|
||||
font-weight: bold
|
||||
font-size: 12px
|
||||
gap: 4px
|
||||
}
|
||||
Reference in New Issue
Block a user