cloud-ide-layout 1.0.154 → 1.0.155

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/lib/assets/css/cide-lyt-variable.scss +135 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cloud-ide-layout",
3
- "version": "1.0.154",
3
+ "version": "1.0.155",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.1.0",
6
6
  "@angular/core": "^20.1.0",
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;
@@ -46,11 +49,97 @@
46
49
  // Footer Ends Here
47
50
  }
48
51
 
52
+ /* Small Mobile Devices (< 480px) */
53
+ @media screen and (max-width: 479px) {
54
+ :root {
55
+ --cide-lyt-responsive-scale: 0.75;
56
+
57
+ // Header - scaled down
58
+ --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
59
+
60
+ // Sidebar Stack - scaled down
61
+ --cide-lyt-stack-wrapper-width: calc(64px * var(--cide-lyt-responsive-scale));
62
+
63
+ // Sidebar - scaled down
64
+ --cide-lyt-sidebar-menu-width: calc(200px * var(--cide-lyt-responsive-scale));
65
+
66
+ // Side Drawer - scaled down
67
+ --cide-lyt-sidedrawer-wrapper-width: calc(32px * var(--cide-lyt-responsive-scale));
68
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(384px * var(--cide-lyt-responsive-scale));
69
+
70
+ // Footer - scaled down
71
+ --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
72
+ --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
73
+ --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
74
+ --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
75
+ --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
76
+ }
77
+ }
78
+
79
+ /* Mobile Devices (480px - 640px) */
80
+ @media screen and (min-width: 480px) and (max-width: 640px) {
81
+ :root {
82
+ --cide-lyt-responsive-scale: 0.85;
83
+
84
+ // Header - scaled down
85
+ --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
86
+
87
+ // Sidebar Stack - scaled down
88
+ --cide-lyt-stack-wrapper-width: calc(64px * var(--cide-lyt-responsive-scale));
89
+
90
+ // Sidebar - scaled down
91
+ --cide-lyt-sidebar-menu-width: calc(200px * var(--cide-lyt-responsive-scale));
92
+
93
+ // Side Drawer - scaled down
94
+ --cide-lyt-sidedrawer-wrapper-width: calc(32px * var(--cide-lyt-responsive-scale));
95
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(384px * var(--cide-lyt-responsive-scale));
96
+
97
+ // Footer - scaled down
98
+ --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
99
+ --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
100
+ --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
101
+ --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
102
+ --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
103
+ }
104
+ }
105
+
106
+ /* Tablet Devices (641px - 1024px) */
107
+ @media screen and (min-width: 641px) and (max-width: 1024px) {
108
+ :root {
109
+ --cide-lyt-responsive-scale: 0.95;
110
+
111
+ // Header - slightly scaled down
112
+ --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
113
+
114
+ // Sidebar Stack - slightly scaled down
115
+ --cide-lyt-stack-wrapper-width: calc(64px * var(--cide-lyt-responsive-scale));
116
+
117
+ // Sidebar - slightly scaled down
118
+ --cide-lyt-sidebar-menu-width: calc(200px * var(--cide-lyt-responsive-scale));
119
+
120
+ // Side Drawer - slightly scaled down
121
+ --cide-lyt-sidedrawer-wrapper-width: calc(32px * var(--cide-lyt-responsive-scale));
122
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(384px * var(--cide-lyt-responsive-scale));
123
+
124
+ // Footer - slightly scaled down
125
+ --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
126
+ --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
127
+ --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
128
+ --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
129
+ --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
130
+ }
131
+ }
132
+
133
+ /* Desktop Devices (> 1024px) - Default values already set above */
134
+
49
135
 
50
136
  /* :root defines variables available globally */
51
137
  :root {
138
+ /* Responsive font scale factor - base is 1.0 (desktop) */
139
+ --cide-lyt-font-responsive-scale: 1.0;
140
+
52
141
  /* 1. TYPOGRAPHIC SCALE */
53
- --cide-theme-font-size-xs: 0.72rem; /* 16px */
142
+ --cide-theme-font-size-xs: 0.72rem; /* 11.52px */
54
143
  --cide-theme-font-size-sm: 0.8rem; /* 12.8px */
55
144
  --cide-theme-font-size-lg: 1.25rem; /* 20px */
56
145
  --cide-theme-font-size-xl: 1.563rem; /* 25px */
@@ -67,6 +156,51 @@
67
156
  --cide-theme-line-height-heading: 1.2;
68
157
  }
69
158
 
159
+ /* Small Mobile Devices (< 480px) - Font scaling */
160
+ @media screen and (max-width: 479px) {
161
+ :root {
162
+ --cide-lyt-font-responsive-scale: 0.875;
163
+
164
+ /* Typographic scale - scaled down to 87.5% */
165
+ --cide-theme-font-size-xs: calc(0.72rem * var(--cide-lyt-font-responsive-scale));
166
+ --cide-theme-font-size-sm: calc(0.8rem * var(--cide-lyt-font-responsive-scale));
167
+ --cide-theme-font-size-lg: calc(1.25rem * var(--cide-lyt-font-responsive-scale));
168
+ --cide-theme-font-size-xl: calc(1.563rem * var(--cide-lyt-font-responsive-scale));
169
+ --cide-theme-font-size-xxl: calc(1.953rem * var(--cide-lyt-font-responsive-scale));
170
+ --cide-theme-font-size-xxxl: calc(2.441rem * var(--cide-lyt-font-responsive-scale));
171
+ }
172
+ }
173
+
174
+ /* Mobile Devices (480px - 640px) - Font scaling */
175
+ @media screen and (min-width: 480px) and (max-width: 640px) {
176
+ :root {
177
+ --cide-lyt-font-responsive-scale: 0.9;
178
+
179
+ /* Typographic scale - scaled down to 90% */
180
+ --cide-theme-font-size-xs: calc(0.72rem * var(--cide-lyt-font-responsive-scale));
181
+ --cide-theme-font-size-sm: calc(0.8rem * var(--cide-lyt-font-responsive-scale));
182
+ --cide-theme-font-size-lg: calc(1.25rem * var(--cide-lyt-font-responsive-scale));
183
+ --cide-theme-font-size-xl: calc(1.563rem * var(--cide-lyt-font-responsive-scale));
184
+ --cide-theme-font-size-xxl: calc(1.953rem * var(--cide-lyt-font-responsive-scale));
185
+ --cide-theme-font-size-xxxl: calc(2.441rem * var(--cide-lyt-font-responsive-scale));
186
+ }
187
+ }
188
+
189
+ /* Tablet Devices (641px - 1024px) - Font scaling */
190
+ @media screen and (min-width: 641px) and (max-width: 1024px) {
191
+ :root {
192
+ --cide-lyt-font-responsive-scale: 0.95;
193
+
194
+ /* Typographic scale - slightly scaled down to 95% */
195
+ --cide-theme-font-size-xs: calc(0.72rem * var(--cide-lyt-font-responsive-scale));
196
+ --cide-theme-font-size-sm: calc(0.8rem * var(--cide-lyt-font-responsive-scale));
197
+ --cide-theme-font-size-lg: calc(1.25rem * var(--cide-lyt-font-responsive-scale));
198
+ --cide-theme-font-size-xl: calc(1.563rem * var(--cide-lyt-font-responsive-scale));
199
+ --cide-theme-font-size-xxl: calc(1.953rem * var(--cide-lyt-font-responsive-scale));
200
+ --cide-theme-font-size-xxxl: calc(2.441rem * var(--cide-lyt-font-responsive-scale));
201
+ }
202
+ }
203
+
70
204
  /* Base styles for the body */
71
205
  body {
72
206
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;