lutaml 0.10.7 → 0.10.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,171 +1,121 @@
1
- /* Layout System using CSS Grid */
1
+ /* Layout LutaML Branded */
2
2
 
3
3
  #app {
4
- display: grid;
5
- grid-template-rows: var(--header-height) 1fr;
4
+ display: flex;
6
5
  height: 100vh;
7
6
  overflow: hidden;
8
7
  }
9
8
 
10
- /* Header Layout */
11
- .app-header {
12
- grid-row: 1;
9
+ /* Main column (header + content) */
10
+ .main-content {
11
+ flex: 1;
13
12
  display: flex;
14
- align-items: center;
15
- padding: 0 var(--space-lg);
16
- background-color: var(--color-header-bg);
17
- color: var(--color-header-text);
18
- box-shadow: var(--shadow-md);
19
- z-index: var(--z-header);
13
+ flex-direction: column;
14
+ overflow: hidden;
20
15
  }
21
16
 
22
- .header-content {
17
+ /* Header */
18
+ .app-header {
19
+ height: var(--header-height);
20
+ flex-shrink: 0;
23
21
  display: flex;
24
22
  align-items: center;
25
- justify-content: space-between;
26
- width: 100%;
27
- gap: var(--space-lg);
23
+ padding: 0 var(--space-4);
24
+ background: var(--bg-elevated);
25
+ border-bottom: 1px solid var(--border-light);
26
+ gap: var(--space-4);
27
+ z-index: var(--z-header);
28
28
  }
29
29
 
30
30
  .header-left {
31
31
  display: flex;
32
32
  align-items: center;
33
- gap: var(--space-md);
33
+ gap: var(--space-3);
34
34
  }
35
35
 
36
36
  .header-center {
37
37
  flex: 1;
38
- max-width: 600px;
39
- position: relative;
38
+ display: flex;
39
+ justify-content: center;
40
+ max-width: 480px;
41
+ margin: 0 auto;
40
42
  }
41
43
 
42
44
  .header-right {
43
45
  display: flex;
44
46
  align-items: center;
45
- gap: var(--space-sm);
46
- }
47
-
48
- /* Main Layout (Sidebar + Content) */
49
- .main-layout {
50
- grid-row: 2;
51
- display: grid;
52
- grid-template-columns: var(--sidebar-width) 1fr;
53
- overflow: hidden;
47
+ gap: var(--space-1);
54
48
  }
55
49
 
56
- /* Sidebar Layout */
50
+ /* Sidebar */
57
51
  .sidebar {
58
- grid-column: 1;
52
+ width: var(--sidebar-width);
53
+ flex-shrink: 0;
54
+ background: var(--bg-secondary);
55
+ border-right: 1px solid var(--border-light);
59
56
  display: flex;
60
57
  flex-direction: column;
61
- background-color: var(--color-sidebar-bg);
62
- border-right: 1px solid var(--color-sidebar-border);
63
58
  overflow: hidden;
64
59
  z-index: var(--z-sidebar);
65
60
  }
66
61
 
67
- .sidebar-header {
68
- display: flex;
69
- align-items: center;
70
- justify-content: space-between;
71
- padding: var(--space-md) var(--space-lg);
72
- border-bottom: 1px solid var(--color-border);
73
- }
74
-
75
- .sidebar-header h2 {
76
- font-size: var(--font-size-lg);
77
- font-weight: var(--font-weight-semibold);
78
- color: var(--color-text);
79
- }
80
-
81
- .sidebar-actions {
82
- display: flex;
83
- gap: var(--space-xs);
62
+ .sidebar.collapsed {
63
+ width: 0;
84
64
  }
85
65
 
86
66
  .sidebar-content {
87
67
  flex: 1;
88
- overflow-y: auto;
89
- padding: var(--space-md);
90
- }
91
-
92
- /* Content Area Layout */
93
- .content-area {
94
- grid-column: 2;
95
68
  display: flex;
96
69
  flex-direction: column;
97
70
  overflow: hidden;
71
+ min-width: var(--sidebar-width);
98
72
  }
99
73
 
100
- .breadcrumb {
101
- padding: var(--space-md) var(--space-xl);
102
- border-bottom: 1px solid var(--color-border);
103
- background-color: var(--color-bg-secondary);
104
- font-size: var(--font-size-sm);
105
- color: var(--color-text-secondary);
106
- }
107
-
108
- .content-pane {
74
+ /* Content area */
75
+ .content-area {
109
76
  flex: 1;
110
- overflow-y: auto;
111
- padding: var(--space-xl);
77
+ overflow: auto;
78
+ padding: var(--space-6);
79
+ background: var(--bg-primary);
112
80
  }
113
81
 
114
- /* Responsive Layout */
115
-
116
- /* Tablet and below */
82
+ /* Responsive */
117
83
  @media (max-width: 1023px) {
118
- .main-layout {
119
- grid-template-columns: 1fr;
120
- position: relative;
121
- }
122
-
123
84
  .sidebar {
124
85
  position: absolute;
125
86
  top: 0;
126
87
  left: 0;
127
88
  bottom: 0;
128
- width: var(--sidebar-width);
129
- box-shadow: var(--shadow-xl);
130
- z-index: var(--z-sidebar);
131
- }
132
-
133
- .sidebar-toggle {
134
- display: block !important;
135
- }
136
- }
137
-
138
- /* Mobile */
139
- @media (max-width: 767px) {
140
- :root {
141
- --sidebar-width: 280px;
142
- --header-height: 56px;
89
+ box-shadow: var(--shadow-lg);
143
90
  }
144
91
 
145
- .app-header {
146
- padding: 0 var(--space-md);
92
+ .sidebar.collapsed {
93
+ width: 0;
94
+ overflow: hidden;
147
95
  }
148
96
 
149
- .header-content {
150
- gap: var(--space-sm);
97
+ .sidebar-toggle {
98
+ display: flex !important;
151
99
  }
152
100
 
153
101
  .header-center {
154
102
  max-width: none;
155
103
  }
104
+ }
156
105
 
157
- .content-pane {
158
- padding: var(--space-md);
106
+ @media (max-width: 767px) {
107
+ :root {
108
+ --sidebar-width: 280px;
109
+ --header-height: 48px;
159
110
  }
160
111
 
161
- .breadcrumb {
162
- padding: var(--space-sm) var(--space-md);
112
+ .content-area {
113
+ padding: var(--space-4);
163
114
  }
164
115
  }
165
116
 
166
- /* Large desktop */
167
117
  @media (min-width: 1280px) {
168
118
  :root {
169
- --sidebar-width: 360px;
119
+ --sidebar-width: 320px;
170
120
  }
171
- }
121
+ }