cloud-ide-layout 1.0.154 → 1.0.156

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.
Files changed (17) hide show
  1. package/fesm2022/{cloud-ide-layout-cloud-ide-layout-B9f8akH5.mjs → cloud-ide-layout-cloud-ide-layout-C32z4h9X.mjs} +21 -13
  2. package/fesm2022/cloud-ide-layout-cloud-ide-layout-C32z4h9X.mjs.map +1 -0
  3. package/fesm2022/{cloud-ide-layout-dashboard-manager.component-B2wAM5Ss.mjs → cloud-ide-layout-dashboard-manager.component-BBgc6ErN.mjs} +2 -2
  4. package/fesm2022/{cloud-ide-layout-dashboard-manager.component-B2wAM5Ss.mjs.map → cloud-ide-layout-dashboard-manager.component-BBgc6ErN.mjs.map} +1 -1
  5. package/fesm2022/{cloud-ide-layout-drawer-theme.component-BO7sjFMX.mjs → cloud-ide-layout-drawer-theme.component-B7cUmWIU.mjs} +13 -5
  6. package/fesm2022/cloud-ide-layout-drawer-theme.component-B7cUmWIU.mjs.map +1 -0
  7. package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-CwA_r9U9.mjs → cloud-ide-layout-floating-entity-selection.component-CHl6Wpcw.mjs} +2 -2
  8. package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-CwA_r9U9.mjs.map → cloud-ide-layout-floating-entity-selection.component-CHl6Wpcw.mjs.map} +1 -1
  9. package/fesm2022/{cloud-ide-layout-home-wrapper.component-BXCO5k5Q.mjs → cloud-ide-layout-home-wrapper.component-DxpQcOIo.mjs} +2 -2
  10. package/fesm2022/{cloud-ide-layout-home-wrapper.component-BXCO5k5Q.mjs.map → cloud-ide-layout-home-wrapper.component-DxpQcOIo.mjs.map} +1 -1
  11. package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-yW3f1ItF.mjs → cloud-ide-layout-sidedrawer-notes.component-Ban3rP_a.mjs} +2 -2
  12. package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-yW3f1ItF.mjs.map → cloud-ide-layout-sidedrawer-notes.component-Ban3rP_a.mjs.map} +1 -1
  13. package/fesm2022/cloud-ide-layout.mjs +1 -1
  14. package/package.json +1 -1
  15. package/src/lib/assets/css/cide-lyt-variable.scss +145 -1
  16. package/fesm2022/cloud-ide-layout-cloud-ide-layout-B9f8akH5.mjs.map +0 -1
  17. package/fesm2022/cloud-ide-layout-drawer-theme.component-BO7sjFMX.mjs.map +0 -1
package/src/lib/assets/css/cide-lyt-variable.scss CHANGED
@@ -2,6 +2,9 @@
2
2
  * CIDE-LYT Variable
3
3
  *--------------------------------------------------*/
4
4
  :root {
5
+ // Responsive scale factors - base is 1.0 (desktop)
6
+ --cide-lyt-responsive-scale: 1.0;
7
+
5
8
  // Header Starts Here
6
9
  --cide-lyt-header-wrapper-height: 42px;
7
10
  --cide-lyt-header-wrapper-background-color: white;
@@ -19,11 +22,13 @@
19
22
  // Sidebar Stack Starts Here
20
23
  --cide-lyt-stack-wrapper-background-color: #f9f9f9;
21
24
  --cide-lyt-stack-wrapper-width: 64px;
25
+ --cide-lyt-stack-wrapper-width-base: 64px; // Base value for responsive scaling
22
26
  // Sidebar Stack Ends Here
23
27
 
24
28
  // Sidebar Starts Here
25
29
  --cide-lyt-sidebar-wrapper-background-color: #F9F9F9;
26
30
  --cide-lyt-sidebar-menu-width: 200px;
31
+ --cide-lyt-sidebar-menu-width-base: 200px; // Base value for responsive scaling
27
32
  --cide-lyt-sidebar-menu-border-color: #e6e6e6;
28
33
  --cide-lyt-sidebar-nav-item-color-active: var(--cide-theme-color-brand-primary);
29
34
  --cide-lyt-sidebar-nav-item-color: var(--cide-theme-label-color);
@@ -32,7 +37,9 @@
32
37
  // Side Drawer Starts Here
33
38
  --cide-lyt-sidedrawer-wrapper-background-color: var(--cide-lyt-sidebar-wrapper-background-color);
34
39
  --cide-lyt-sidedrawer-wrapper-width: 32px;
40
+ --cide-lyt-sidedrawer-wrapper-width-base: 32px; // Base value for responsive scaling
35
41
  --cide-lyt-sidedrawer-wrapper-width-expanded-min: 384px;
42
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min-base: 384px; // Base value for responsive scaling
36
43
  // Side Drawer Ends Here
37
44
 
38
45
  // Page Wrapper Starts Here
@@ -46,11 +53,100 @@
46
53
  // Footer Ends Here
47
54
  }
48
55
 
56
+ /* Small Mobile Devices (< 480px) */
57
+ @media screen and (max-width: 479px) {
58
+ :root {
59
+ // Use theme scale if available, otherwise default to 0.75
60
+ --cide-lyt-responsive-scale: var(--cide-lyt-responsive-scale-sm, 0.75);
61
+
62
+ // Header - scaled down
63
+ --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
64
+
65
+ // Sidebar Stack - scaled down (use base value from theme if set, otherwise 64px)
66
+ --cide-lyt-stack-wrapper-width: calc(var(--cide-lyt-stack-wrapper-width-base, 64px) * var(--cide-lyt-responsive-scale));
67
+
68
+ // Sidebar - scaled down (use base value from theme if set, otherwise 200px)
69
+ --cide-lyt-sidebar-menu-width: calc(var(--cide-lyt-sidebar-menu-width-base, 200px) * var(--cide-lyt-responsive-scale));
70
+
71
+ // Side Drawer - scaled down
72
+ --cide-lyt-sidedrawer-wrapper-width: calc(var(--cide-lyt-sidedrawer-wrapper-width-base, 32px) * var(--cide-lyt-responsive-scale));
73
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(var(--cide-lyt-sidedrawer-wrapper-width-expanded-min-base, 384px) * var(--cide-lyt-responsive-scale));
74
+
75
+ // Footer - scaled down
76
+ --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
77
+ --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
78
+ --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
79
+ --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
80
+ --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
81
+ }
82
+ }
83
+
84
+ /* Mobile Devices (480px - 640px) */
85
+ @media screen and (min-width: 480px) and (max-width: 640px) {
86
+ :root {
87
+ // Use theme scale if available, otherwise default to 0.85
88
+ --cide-lyt-responsive-scale: var(--cide-lyt-responsive-scale-md, 0.85);
89
+
90
+ // Header - scaled down
91
+ --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
92
+
93
+ // Sidebar Stack - scaled down
94
+ --cide-lyt-stack-wrapper-width: calc(var(--cide-lyt-stack-wrapper-width-base, 64px) * var(--cide-lyt-responsive-scale));
95
+
96
+ // Sidebar - scaled down
97
+ --cide-lyt-sidebar-menu-width: calc(var(--cide-lyt-sidebar-menu-width-base, 200px) * var(--cide-lyt-responsive-scale));
98
+
99
+ // Side Drawer - scaled down
100
+ --cide-lyt-sidedrawer-wrapper-width: calc(var(--cide-lyt-sidedrawer-wrapper-width-base, 32px) * var(--cide-lyt-responsive-scale));
101
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(var(--cide-lyt-sidedrawer-wrapper-width-expanded-min-base, 384px) * var(--cide-lyt-responsive-scale));
102
+
103
+ // Footer - scaled down
104
+ --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
105
+ --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
106
+ --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
107
+ --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
108
+ --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
109
+ }
110
+ }
111
+
112
+ /* Tablet Devices (641px - 1024px) */
113
+ @media screen and (min-width: 641px) and (max-width: 1024px) {
114
+ :root {
115
+ // Use theme scale if available, otherwise default to 0.95
116
+ --cide-lyt-responsive-scale: var(--cide-lyt-responsive-scale-lg, 0.95);
117
+
118
+ // Header - slightly scaled down
119
+ --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
120
+
121
+ // Sidebar Stack - slightly scaled down
122
+ --cide-lyt-stack-wrapper-width: calc(var(--cide-lyt-stack-wrapper-width-base, 64px) * var(--cide-lyt-responsive-scale));
123
+
124
+ // Sidebar - slightly scaled down
125
+ --cide-lyt-sidebar-menu-width: calc(var(--cide-lyt-sidebar-menu-width-base, 200px) * var(--cide-lyt-responsive-scale));
126
+
127
+ // Side Drawer - slightly scaled down
128
+ --cide-lyt-sidedrawer-wrapper-width: calc(var(--cide-lyt-sidedrawer-wrapper-width-base, 32px) * var(--cide-lyt-responsive-scale));
129
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(var(--cide-lyt-sidedrawer-wrapper-width-expanded-min-base, 384px) * var(--cide-lyt-responsive-scale));
130
+
131
+ // Footer - slightly scaled down
132
+ --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
133
+ --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
134
+ --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
135
+ --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
136
+ --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
137
+ }
138
+ }
139
+
140
+ /* Desktop Devices (> 1024px) - Default values already set above */
141
+
49
142
 
50
143
  /* :root defines variables available globally */
51
144
  :root {
145
+ /* Responsive font scale factor - base is 1.0 (desktop) */
146
+ --cide-lyt-font-responsive-scale: 1.0;
147
+
52
148
  /* 1. TYPOGRAPHIC SCALE */
53
- --cide-theme-font-size-xs: 0.72rem; /* 16px */
149
+ --cide-theme-font-size-xs: 0.72rem; /* 11.52px */
54
150
  --cide-theme-font-size-sm: 0.8rem; /* 12.8px */
55
151
  --cide-theme-font-size-lg: 1.25rem; /* 20px */
56
152
  --cide-theme-font-size-xl: 1.563rem; /* 25px */
@@ -67,6 +163,54 @@
67
163
  --cide-theme-line-height-heading: 1.2;
68
164
  }
69
165
 
166
+ /* Small Mobile Devices (< 480px) - Font scaling */
167
+ @media screen and (max-width: 479px) {
168
+ :root {
169
+ // Use theme font scale if available, otherwise default to 0.875
170
+ --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-sm, 0.875);
171
+
172
+ /* Typographic scale - scaled down using theme scale */
173
+ --cide-theme-font-size-xs: calc(0.72rem * var(--cide-lyt-font-responsive-scale));
174
+ --cide-theme-font-size-sm: calc(0.8rem * var(--cide-lyt-font-responsive-scale));
175
+ --cide-theme-font-size-lg: calc(1.25rem * var(--cide-lyt-font-responsive-scale));
176
+ --cide-theme-font-size-xl: calc(1.563rem * var(--cide-lyt-font-responsive-scale));
177
+ --cide-theme-font-size-xxl: calc(1.953rem * var(--cide-lyt-font-responsive-scale));
178
+ --cide-theme-font-size-xxxl: calc(2.441rem * var(--cide-lyt-font-responsive-scale));
179
+ }
180
+ }
181
+
182
+ /* Mobile Devices (480px - 640px) - Font scaling */
183
+ @media screen and (min-width: 480px) and (max-width: 640px) {
184
+ :root {
185
+ // Use theme font scale if available, otherwise default to 0.9
186
+ --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-md, 0.9);
187
+
188
+ /* Typographic scale - scaled down using theme scale */
189
+ --cide-theme-font-size-xs: calc(0.72rem * var(--cide-lyt-font-responsive-scale));
190
+ --cide-theme-font-size-sm: calc(0.8rem * var(--cide-lyt-font-responsive-scale));
191
+ --cide-theme-font-size-lg: calc(1.25rem * var(--cide-lyt-font-responsive-scale));
192
+ --cide-theme-font-size-xl: calc(1.563rem * var(--cide-lyt-font-responsive-scale));
193
+ --cide-theme-font-size-xxl: calc(1.953rem * var(--cide-lyt-font-responsive-scale));
194
+ --cide-theme-font-size-xxxl: calc(2.441rem * var(--cide-lyt-font-responsive-scale));
195
+ }
196
+ }
197
+
198
+ /* Tablet Devices (641px - 1024px) - Font scaling */
199
+ @media screen and (min-width: 641px) and (max-width: 1024px) {
200
+ :root {
201
+ // Use theme font scale if available, otherwise default to 0.95
202
+ --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-lg, 0.95);
203
+
204
+ /* Typographic scale - slightly scaled down using theme scale */
205
+ --cide-theme-font-size-xs: calc(0.72rem * var(--cide-lyt-font-responsive-scale));
206
+ --cide-theme-font-size-sm: calc(0.8rem * var(--cide-lyt-font-responsive-scale));
207
+ --cide-theme-font-size-lg: calc(1.25rem * var(--cide-lyt-font-responsive-scale));
208
+ --cide-theme-font-size-xl: calc(1.563rem * var(--cide-lyt-font-responsive-scale));
209
+ --cide-theme-font-size-xxl: calc(1.953rem * var(--cide-lyt-font-responsive-scale));
210
+ --cide-theme-font-size-xxxl: calc(2.441rem * var(--cide-lyt-font-responsive-scale));
211
+ }
212
+ }
213
+
70
214
  /* Base styles for the body */
71
215
  body {
72
216
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;