cloud-ide-layout 1.0.3 → 1.0.5
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.
package/package.json
CHANGED
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
// Apply Variables
|
|
2
|
+
@import './cide-lyt-variable.scss';
|
|
3
|
+
/*----------------------------------------
|
|
4
|
+
* LAYOUT CSS STARTS HERE
|
|
5
|
+
* HERE WE WILL STORE THE CLASSES
|
|
6
|
+
*------------------------------------------*/
|
|
7
|
+
|
|
8
|
+
* {
|
|
9
|
+
scrollbar-width: thin;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// Body Starts Here
|
|
13
|
+
body {
|
|
14
|
+
overflow-y: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Body Ends Here
|
|
18
|
+
|
|
19
|
+
// Header Starts Here
|
|
20
|
+
.cide-lyt-header {
|
|
21
|
+
height: var(--cide-lyt-header-wrapper-height);
|
|
22
|
+
background-color: var(--cide-lyt-header-wrapper-background-color);
|
|
23
|
+
box-shadow: var(--cide-lyt-header-wrapper-box-shadow);
|
|
24
|
+
z-index: var(--cide-lyt-header-wrapper-z-index);
|
|
25
|
+
border-bottom: 1px solid var(--cide-lyt-header-wrapper-border-color);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.cide-lyt-header-wrapper-hide {
|
|
29
|
+
display: none !important;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
// Header Ends Here
|
|
34
|
+
|
|
35
|
+
// Request Starts Here
|
|
36
|
+
.cide-lyt-request {
|
|
37
|
+
height: var(--cide-lyt-request-wrapper-height);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.cide-lyt-request-wrapper-hide {
|
|
41
|
+
display: none !important;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Request Ends Here
|
|
45
|
+
|
|
46
|
+
// Sidebar Stack Starts Here
|
|
47
|
+
.cide-lyt-stack {
|
|
48
|
+
background-color: var(--cide-lyt-stack-wrapper-background-color);
|
|
49
|
+
width: var(--cide-lyt-stack-wrapper-width);
|
|
50
|
+
min-width: var(--cide-lyt-stack-wrapper-width);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Sidebar Stack Ends Here
|
|
54
|
+
|
|
55
|
+
// Sidebar Starts Here
|
|
56
|
+
.cide-lyt-sidebar-page-wrapper {
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: row;
|
|
59
|
+
height: calc(100vh - var(--cide-lyt-header-wrapper-height) - var(--cide-lyt-footer-wrapper-height));
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.cide-lyt-sidebar-page-hide {
|
|
63
|
+
display: none !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.cide-lyt-sidebar {
|
|
67
|
+
background-color: var(--cide-lyt-sidebar-wrapper-background-color);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
#cide-lyt-sidebar-page,
|
|
71
|
+
#cide-lyt-page-wrapper {
|
|
72
|
+
height: calc(100vh - var(--cide-lyt-header-wrapper-height) - var(--cide-lyt-footer-wrapper-height));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.cide-lyt-outlet-sidedrawer-wrapper {
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-direction: row;
|
|
78
|
+
height: 100%;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.tab-content-container~* {
|
|
82
|
+
height: 100%;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.cide-lyt-footer-exist {
|
|
86
|
+
.cide-lyt-outlet-sidedrawer-wrapper {
|
|
87
|
+
// height: calc(100% - var(--cide-lyt-footer-wrapper-height));
|
|
88
|
+
height: 100%;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.cide-lyt-request-exist {
|
|
93
|
+
.cide-lyt-outlet-sidedrawer-wrapper {
|
|
94
|
+
height: calc(100% - var(--cide-lyt-request-wrapper-height));
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.cide-lyt-sidebar-menu {
|
|
99
|
+
width: var(--cide-lyt-sidebar-menu-width);
|
|
100
|
+
min-width: var(--cide-lyt-sidebar-menu-width) !important;
|
|
101
|
+
border-right: 1px solid var(--cide-lyt-sidebar-menu-border-color);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Sidebar Ends Here
|
|
105
|
+
|
|
106
|
+
// Sidedrawer Starts Here
|
|
107
|
+
.cide-lyt-sidedrawer-wrapper {
|
|
108
|
+
width: var(--cide-lyt-sidedrawer-wrapper-width);
|
|
109
|
+
min-width: var(--cide-lyt-sidedrawer-wrapper-width);
|
|
110
|
+
background-color: var(--cide-lyt-sidedrawer-wrapper-background-color);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.cide-lyt-sidedrawer-wrapper-hide {
|
|
114
|
+
display: none !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Sidedrawer Ends Here
|
|
118
|
+
|
|
119
|
+
// Footer Stars Here
|
|
120
|
+
.cide-lyt-footer-console-wrapper {
|
|
121
|
+
height: var(--cide-lyt-footer-wrapper-height);
|
|
122
|
+
min-height: var(--cide-lyt-footer-wrapper-height);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Utility classes for height management
|
|
126
|
+
.cide-full-height {
|
|
127
|
+
height: 100% !important;
|
|
128
|
+
display: flex !important;
|
|
129
|
+
flex-direction: column !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.cide-flex-fill {
|
|
133
|
+
flex: 1 !important;
|
|
134
|
+
height: 100% !important;
|
|
135
|
+
display: flex !important;
|
|
136
|
+
flex-direction: column !important;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.cide-no-full-height {
|
|
140
|
+
height: auto !important;
|
|
141
|
+
display: block !important;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// Scrollable content wrapper
|
|
145
|
+
.cide-scrollable-content {
|
|
146
|
+
overflow-y: auto;
|
|
147
|
+
height: 100%;
|
|
148
|
+
flex: 1;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// Component wrapper that ensures full height
|
|
152
|
+
.cide-component-wrapper {
|
|
153
|
+
height: 100%;
|
|
154
|
+
display: flex;
|
|
155
|
+
flex-direction: column;
|
|
156
|
+
flex: 1;
|
|
157
|
+
|
|
158
|
+
>* {
|
|
159
|
+
flex: 1;
|
|
160
|
+
height: 100%;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.cide-footer {
|
|
165
|
+
background-color: var(--code-lyt-footer-wrapper-background-color);
|
|
166
|
+
border-top: 1px solid var(--code-lyt-footer-wrapper-border-color);
|
|
167
|
+
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.cide-lyt-footer-console-wrapper-hide {
|
|
171
|
+
display: none !important;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
// Footer Ends Here
|
|
175
|
+
|
|
176
|
+
// Sidedrawer Wrapper Child Starts Here
|
|
177
|
+
.cide-lyt-sidedrawer-wrapper-child {
|
|
178
|
+
height: 100%;
|
|
179
|
+
overflow: hidden;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// Sidedrawer Wrapper Child Ends Here
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/*-------------------------------------------------
|
|
2
|
+
* CIDE-LYT Variable
|
|
3
|
+
*--------------------------------------------------*/
|
|
4
|
+
:root {
|
|
5
|
+
// Header Starts Here
|
|
6
|
+
--cide-lyt-header-wrapper-height: 42px;
|
|
7
|
+
--cide-lyt-header-wrapper-background-color: white;
|
|
8
|
+
--cide-lyt-header-wrapper-border-color: rgba(229, 231, 235, 1);
|
|
9
|
+
--cide-lyt-header-wrapper-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
10
|
+
--cide-lyt-header-wrapper-z-index: 1000;
|
|
11
|
+
// Header Ends Here
|
|
12
|
+
|
|
13
|
+
--cide-lyt-request-wrapper-height: 20px;
|
|
14
|
+
--cide-lyt-sidebar-wrapper-hieght: 50px;
|
|
15
|
+
--cide-lyt-sidedrawer-wrapper-hieght:50px;
|
|
16
|
+
--cide-lyt-footer-wrapper-hieght:50px;
|
|
17
|
+
--cide-lyt-console-wrapper-hieght:50px;
|
|
18
|
+
|
|
19
|
+
// Sidebar Stack Starts Here
|
|
20
|
+
--cide-lyt-stack-wrapper-background-color: #f9f9f9;
|
|
21
|
+
--cide-lyt-stack-wrapper-width: 60px;
|
|
22
|
+
// Sidebar Stack Ends Here
|
|
23
|
+
|
|
24
|
+
// Sidebar Starts Here
|
|
25
|
+
--cide-lyt-sidebar-wrapper-background-color: #F9F9F9;
|
|
26
|
+
--cide-lyt-sidebar-menu-width: 176px;
|
|
27
|
+
--cide-lyt-sidebar-menu-border-color: #e6e6e6;
|
|
28
|
+
--cide-lyt-sidebar-nav-item-color-active: var(--cide-theme-color-brand-primary);
|
|
29
|
+
--cide-lyt-sidebar-nav-item-color: var(--cide-theme-label-color);
|
|
30
|
+
// Sidebar Ends Here
|
|
31
|
+
|
|
32
|
+
// Side Drawer Starts Here
|
|
33
|
+
--cide-lyt-sidedrawer-wrapper-background-color: var(--cide-lyt-sidebar-wrapper-background-color);
|
|
34
|
+
--cide-lyt-sidedrawer-wrapper-width: 32px;
|
|
35
|
+
--cide-lyt-sidedrawer-wrapper-width-expanded-min: 384px;
|
|
36
|
+
// Side Drawer Ends Here
|
|
37
|
+
|
|
38
|
+
// Page Wrapper Starts Here
|
|
39
|
+
--cide-lyt-page-wrapper-background-color: rgb(243 244 246);
|
|
40
|
+
// Page Wrapper Ends Here
|
|
41
|
+
|
|
42
|
+
// Footer Starts Here
|
|
43
|
+
--cide-lyt-footer-wrapper-height: 20px;
|
|
44
|
+
--code-lyt-footer-wrapper-background-color: #F9F9F9;
|
|
45
|
+
--code-lyt-footer-wrapper-border-color: #e6e6e6;
|
|
46
|
+
// Footer Ends Here
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
/* :root defines variables available globally */
|
|
51
|
+
:root {
|
|
52
|
+
/* 1. TYPOGRAPHIC SCALE */
|
|
53
|
+
--cide-theme-font-size-xs: 0.72rem; /* 16px */
|
|
54
|
+
--cide-theme-font-size-sm: 0.8rem; /* 12.8px */
|
|
55
|
+
--cide-theme-font-size-lg: 1.25rem; /* 20px */
|
|
56
|
+
--cide-theme-font-size-xl: 1.563rem; /* 25px */
|
|
57
|
+
--cide-theme-font-size-xxl: 1.953rem; /* 31.25px */
|
|
58
|
+
--cide-theme-font-size-xxxl: 2.441rem; /* 39.06px */
|
|
59
|
+
|
|
60
|
+
/* 2. FONT WEIGHTS */
|
|
61
|
+
--cide-theme-font-weight-regular: 400;
|
|
62
|
+
--cide-theme-font-weight-semibold: 600;
|
|
63
|
+
--cide-theme-font-weight-bold: 700;
|
|
64
|
+
|
|
65
|
+
/* 3. LINE HEIGHTS */
|
|
66
|
+
--cide-theme-line-height-body: 1.6;
|
|
67
|
+
--cide-theme-line-height-heading: 1.2;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Base styles for the body */
|
|
71
|
+
body {
|
|
72
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
73
|
+
font-size: var(--cide-theme-font-size-base);
|
|
74
|
+
line-height: var(--cide-theme-line-height-body);
|
|
75
|
+
color: #333; /* Use a dark gray, not pure black */
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Rules for Headings */
|
|
79
|
+
h1, h2, h3, h4, h5 {
|
|
80
|
+
// margin: 2rem 0 1rem 0;
|
|
81
|
+
font-family: inherit;
|
|
82
|
+
line-height: var(--cide-theme-line-height-heading);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
h1 {
|
|
86
|
+
font-size: var(--cide-theme-font-size-xxxxl);
|
|
87
|
+
font-weight: var(--cide-theme-font-weight-bold);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
h2 {
|
|
91
|
+
font-size: var(--cide-theme-font-size-xxxl);
|
|
92
|
+
font-weight: var(--cide-theme-font-weight-bold);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
h3 {
|
|
96
|
+
font-size: var(--cide-theme-font-size-xxl);
|
|
97
|
+
font-weight: var(--cide-theme-font-weight-bold);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
h4 {
|
|
101
|
+
font-size: var(--cide-theme-font-size-xl);
|
|
102
|
+
font-weight: var(--cide-theme-font-weight-semibold);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
h5 {
|
|
106
|
+
font-size: var(--cide-theme-font-size-lg);
|
|
107
|
+
font-weight: var(--cide-theme-font-weight-semibold);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Rules for Paragraphs and Lists */
|
|
111
|
+
p, ul, ol {
|
|
112
|
+
// margin-bottom: 1rem;
|
|
113
|
+
max-width: 65ch; /* Improves readability */
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Use a class for small text to be explicit */
|
|
117
|
+
.text-small {
|
|
118
|
+
font-size: var(--cide-theme-font-size-sm);
|
|
119
|
+
}
|