cloud-ide-element 1.1.45 → 1.1.47

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 (6) hide show
  1. package/fesm2022/cloud-ide-element.mjs +4 -4
  2. package/fesm2022/cloud-ide-element.mjs.map +1 -1
  3. package/index.d.ts +2 -2
  4. package/package.json +1 -1
  5. package/src/lib/assets/css/cide-ele-color-variables.scss +212 -212
  6. package/src/lib/assets/css/cide-ele-style.scss +85 -85
package/index.d.ts CHANGED
@@ -574,7 +574,7 @@ declare class CideEleFileInputComponent implements ControlValueAccessor, OnDestr
574
574
  readonly id: _angular_core.WritableSignal<string>;
575
575
  readonly isUploading: _angular_core.WritableSignal<boolean>;
576
576
  readonly uploadProgress: _angular_core.WritableSignal<number>;
577
- readonly uploadStatus: _angular_core.WritableSignal<"error" | "start" | "uploading" | "success" | "idle">;
577
+ readonly uploadStatus: _angular_core.WritableSignal<"success" | "error" | "start" | "uploading" | "idle">;
578
578
  readonly files: _angular_core.WritableSignal<FileList | null>;
579
579
  readonly fileNames: _angular_core.WritableSignal<string[]>;
580
580
  readonly previewUrls: _angular_core.WritableSignal<string[]>;
@@ -701,7 +701,7 @@ declare class CideEleFileInputComponent implements ControlValueAccessor, OnDestr
701
701
  multiple: boolean;
702
702
  showPreview: boolean;
703
703
  autoUpload: boolean;
704
- uploadStatus: "error" | "start" | "uploading" | "success" | "idle";
704
+ uploadStatus: "success" | "error" | "start" | "uploading" | "idle";
705
705
  isUploading: boolean;
706
706
  uploadProgress: number;
707
707
  files: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cloud-ide-element",
3
- "version": "1.1.45",
3
+ "version": "1.1.47",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.1.0",
6
6
  "@angular/core": "^20.1.0"
package/src/lib/assets/css/cide-ele-color-variables.scss CHANGED
@@ -1,212 +1,212 @@
1
- /*-------------------------------------------------
2
- * CIDE-ELE Color Variables
3
- * Global color system for theming
4
- * Can be overridden from control project
5
- *--------------------------------------------------*/
6
-
7
- :root {
8
- /* ============================================
9
- * BASE COLORS - Light Mode (Default)
10
- * ============================================ */
11
-
12
- /* Background Colors */
13
- --cide-ele-bg-primary: #ffffff;
14
- --cide-ele-bg-secondary: #f9fafb;
15
- --cide-ele-bg-tertiary: #f3f4f6;
16
- --cide-ele-bg-hover: #f9fafb;
17
- --cide-ele-bg-active: #f3f4f6;
18
-
19
- /* Text Colors */
20
- --cide-ele-text-primary: #1f2937;
21
- --cide-ele-text-secondary: #6b7280;
22
- --cide-ele-text-tertiary: #9ca3af;
23
- --cide-ele-text-disabled: #d1d5db;
24
-
25
- /* Border Colors */
26
- --cide-ele-border-primary: #e5e7eb;
27
- --cide-ele-border-secondary: #d1d5db;
28
- --cide-ele-border-hover: #9ca3af;
29
- --cide-ele-border-active: #3b82f6;
30
-
31
- /* Brand Colors */
32
- --cide-ele-brand-primary: #3b82f6;
33
- --cide-ele-brand-primary-hover: #2563eb;
34
- --cide-ele-brand-primary-light: #dbeafe;
35
- --cide-ele-brand-primary-dark: #1e40af;
36
-
37
- /* Status Colors */
38
- --cide-ele-success: #10b981;
39
- --cide-ele-success-light: #d1fae5;
40
- --cide-ele-warning: #f59e0b;
41
- --cide-ele-warning-light: #fef3c7;
42
- --cide-ele-error: #ef4444;
43
- --cide-ele-error-light: #fee2e2;
44
- --cide-ele-info: #3b82f6;
45
- --cide-ele-info-light: #dbeafe;
46
-
47
- /* ============================================
48
- * DATA GRID SPECIFIC COLORS
49
- * ============================================ */
50
-
51
- /* Grid Backgrounds */
52
- --cide-ele-grid-bg: #ffffff;
53
- --cide-ele-grid-bg-striped: #fafafa;
54
- --cide-ele-grid-bg-hover: #f9fafb;
55
- --cide-ele-grid-bg-header: #fafafa;
56
- --cide-ele-grid-bg-group: #f3f4f6;
57
-
58
- /* Grid Borders */
59
- --cide-ele-grid-border: #e5e7eb;
60
- --cide-ele-grid-border-header: rgba(0, 0, 0, 0.08);
61
- --cide-ele-grid-border-hover: #3b82f6;
62
-
63
- /* Grid Text */
64
- --cide-ele-grid-text: #1f2937;
65
- --cide-ele-grid-text-header: #6b7280;
66
- --cide-ele-grid-text-secondary: #6b7280;
67
-
68
- /* ============================================
69
- * SHADOW & EFFECTS
70
- * ============================================ */
71
-
72
- --cide-ele-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
73
- --cide-ele-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
74
- --cide-ele-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
75
- --cide-ele-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
76
-
77
- /* ============================================
78
- * SCROLLBAR COLORS
79
- * ============================================ */
80
-
81
- --cide-ele-scrollbar-track: #f9fafb;
82
- --cide-ele-scrollbar-thumb: #d1d5db;
83
- --cide-ele-scrollbar-thumb-hover: #9ca3af;
84
- }
85
-
86
- /* ============================================
87
- * DARK MODE COLORS
88
- * ============================================ */
89
-
90
- [data-theme="dark"],
91
- .dark-mode,
92
- html.dark-mode,
93
- body.dark-mode {
94
- /* Background Colors */
95
- --cide-ele-bg-primary: #1f2937;
96
- --cide-ele-bg-secondary: #111827;
97
- --cide-ele-bg-tertiary: #374151;
98
- --cide-ele-bg-hover: #374151;
99
- --cide-ele-bg-active: #4b5563;
100
-
101
- /* Text Colors */
102
- --cide-ele-text-primary: #f9fafb;
103
- --cide-ele-text-secondary: #d1d5db;
104
- --cide-ele-text-tertiary: #9ca3af;
105
- --cide-ele-text-disabled: #6b7280;
106
-
107
- /* Border Colors */
108
- --cide-ele-border-primary: #374151;
109
- --cide-ele-border-secondary: #4b5563;
110
- --cide-ele-border-hover: #60a5fa;
111
- --cide-ele-border-active: #3b82f6;
112
-
113
- /* Brand Colors */
114
- --cide-ele-brand-primary: #60a5fa;
115
- --cide-ele-brand-primary-hover: #3b82f6;
116
- --cide-ele-brand-primary-light: #1e3a8a;
117
- --cide-ele-brand-primary-dark: #1e40af;
118
-
119
- /* Status Colors */
120
- --cide-ele-success: #34d399;
121
- --cide-ele-success-light: #065f46;
122
- --cide-ele-warning: #fbbf24;
123
- --cide-ele-warning-light: #78350f;
124
- --cide-ele-error: #f87171;
125
- --cide-ele-error-light: #7f1d1d;
126
- --cide-ele-info: #60a5fa;
127
- --cide-ele-info-light: #1e3a8a;
128
-
129
- /* Data Grid Dark Mode */
130
- --cide-ele-grid-bg: #1f2937;
131
- --cide-ele-grid-bg-striped: #111827;
132
- --cide-ele-grid-bg-hover: #374151;
133
- --cide-ele-grid-bg-header: #374151;
134
- --cide-ele-grid-bg-group: #374151;
135
-
136
- --cide-ele-grid-border: #374151;
137
- --cide-ele-grid-border-header: rgba(255, 255, 255, 0.1);
138
- --cide-ele-grid-border-hover: #60a5fa;
139
-
140
- --cide-ele-grid-text: #f9fafb;
141
- --cide-ele-grid-text-header: #d1d5db;
142
- --cide-ele-grid-text-secondary: #9ca3af;
143
-
144
- /* Scrollbar Dark Mode */
145
- --cide-ele-scrollbar-track: #1f2937;
146
- --cide-ele-scrollbar-thumb: #4b5563;
147
- --cide-ele-scrollbar-thumb-hover: #6b7280;
148
- }
149
-
150
- /* ============================================
151
- * MEDIA QUERY DARK MODE SUPPORT
152
- * ============================================ */
153
-
154
- @media (prefers-color-scheme: dark) {
155
- :root:not([data-theme="light"]):not(.light-mode) {
156
- /* Background Colors */
157
- --cide-ele-bg-primary: #1f2937;
158
- --cide-ele-bg-secondary: #111827;
159
- --cide-ele-bg-tertiary: #374151;
160
- --cide-ele-bg-hover: #374151;
161
- --cide-ele-bg-active: #4b5563;
162
-
163
- /* Text Colors */
164
- --cide-ele-text-primary: #f9fafb;
165
- --cide-ele-text-secondary: #d1d5db;
166
- --cide-ele-text-tertiary: #9ca3af;
167
- --cide-ele-text-disabled: #6b7280;
168
-
169
- /* Border Colors */
170
- --cide-ele-border-primary: #374151;
171
- --cide-ele-border-secondary: #4b5563;
172
- --cide-ele-border-hover: #60a5fa;
173
- --cide-ele-border-active: #3b82f6;
174
-
175
- /* Brand Colors */
176
- --cide-ele-brand-primary: #60a5fa;
177
- --cide-ele-brand-primary-hover: #3b82f6;
178
- --cide-ele-brand-primary-light: #1e3a8a;
179
- --cide-ele-brand-primary-dark: #1e40af;
180
-
181
- /* Status Colors */
182
- --cide-ele-success: #34d399;
183
- --cide-ele-success-light: #065f46;
184
- --cide-ele-warning: #fbbf24;
185
- --cide-ele-warning-light: #78350f;
186
- --cide-ele-error: #f87171;
187
- --cide-ele-error-light: #7f1d1d;
188
- --cide-ele-info: #60a5fa;
189
- --cide-ele-info-light: #1e3a8a;
190
-
191
- /* Data Grid Dark Mode */
192
- --cide-ele-grid-bg: #1f2937;
193
- --cide-ele-grid-bg-striped: #111827;
194
- --cide-ele-grid-bg-hover: #374151;
195
- --cide-ele-grid-bg-header: #374151;
196
- --cide-ele-grid-bg-group: #374151;
197
-
198
- --cide-ele-grid-border: #374151;
199
- --cide-ele-grid-border-header: rgba(255, 255, 255, 0.1);
200
- --cide-ele-grid-border-hover: #60a5fa;
201
-
202
- --cide-ele-grid-text: #f9fafb;
203
- --cide-ele-grid-text-header: #d1d5db;
204
- --cide-ele-grid-text-secondary: #9ca3af;
205
-
206
- /* Scrollbar Dark Mode */
207
- --cide-ele-scrollbar-track: #1f2937;
208
- --cide-ele-scrollbar-thumb: #4b5563;
209
- --cide-ele-scrollbar-thumb-hover: #6b7280;
210
- }
211
- }
212
-
1
+ /*-------------------------------------------------
2
+ * CIDE-ELE Color Variables
3
+ * Global color system for theming
4
+ * Can be overridden from control project
5
+ *--------------------------------------------------*/
6
+
7
+ :root {
8
+ /* ============================================
9
+ * BASE COLORS - Light Mode (Default)
10
+ * ============================================ */
11
+
12
+ /* Background Colors */
13
+ --cide-ele-bg-primary: #ffffff;
14
+ --cide-ele-bg-secondary: #f9fafb;
15
+ --cide-ele-bg-tertiary: #f3f4f6;
16
+ --cide-ele-bg-hover: #f9fafb;
17
+ --cide-ele-bg-active: #f3f4f6;
18
+
19
+ /* Text Colors */
20
+ --cide-ele-text-primary: #1f2937;
21
+ --cide-ele-text-secondary: #6b7280;
22
+ --cide-ele-text-tertiary: #9ca3af;
23
+ --cide-ele-text-disabled: #d1d5db;
24
+
25
+ /* Border Colors */
26
+ --cide-ele-border-primary: #e5e7eb;
27
+ --cide-ele-border-secondary: #d1d5db;
28
+ --cide-ele-border-hover: #9ca3af;
29
+ --cide-ele-border-active: #3b82f6;
30
+
31
+ /* Brand Colors */
32
+ --cide-ele-brand-primary: #3b82f6;
33
+ --cide-ele-brand-primary-hover: #2563eb;
34
+ --cide-ele-brand-primary-light: #dbeafe;
35
+ --cide-ele-brand-primary-dark: #1e40af;
36
+
37
+ /* Status Colors */
38
+ --cide-ele-success: #10b981;
39
+ --cide-ele-success-light: #d1fae5;
40
+ --cide-ele-warning: #f59e0b;
41
+ --cide-ele-warning-light: #fef3c7;
42
+ --cide-ele-error: #ef4444;
43
+ --cide-ele-error-light: #fee2e2;
44
+ --cide-ele-info: #3b82f6;
45
+ --cide-ele-info-light: #dbeafe;
46
+
47
+ /* ============================================
48
+ * DATA GRID SPECIFIC COLORS
49
+ * ============================================ */
50
+
51
+ /* Grid Backgrounds */
52
+ --cide-ele-grid-bg: #ffffff;
53
+ --cide-ele-grid-bg-striped: #fafafa;
54
+ --cide-ele-grid-bg-hover: #f9fafb;
55
+ --cide-ele-grid-bg-header: #fafafa;
56
+ --cide-ele-grid-bg-group: #f3f4f6;
57
+
58
+ /* Grid Borders */
59
+ --cide-ele-grid-border: #e5e7eb;
60
+ --cide-ele-grid-border-header: rgba(0, 0, 0, 0.08);
61
+ --cide-ele-grid-border-hover: #3b82f6;
62
+
63
+ /* Grid Text */
64
+ --cide-ele-grid-text: #1f2937;
65
+ --cide-ele-grid-text-header: #6b7280;
66
+ --cide-ele-grid-text-secondary: #6b7280;
67
+
68
+ /* ============================================
69
+ * SHADOW & EFFECTS
70
+ * ============================================ */
71
+
72
+ --cide-ele-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
73
+ --cide-ele-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
74
+ --cide-ele-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
75
+ --cide-ele-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
76
+
77
+ /* ============================================
78
+ * SCROLLBAR COLORS
79
+ * ============================================ */
80
+
81
+ --cide-ele-scrollbar-track: #f9fafb;
82
+ --cide-ele-scrollbar-thumb: #d1d5db;
83
+ --cide-ele-scrollbar-thumb-hover: #9ca3af;
84
+ }
85
+
86
+ /* ============================================
87
+ * DARK MODE COLORS
88
+ * ============================================ */
89
+
90
+ [data-theme="dark"],
91
+ .dark-mode,
92
+ html.dark-mode,
93
+ body.dark-mode {
94
+ /* Background Colors */
95
+ --cide-ele-bg-primary: #1f2937;
96
+ --cide-ele-bg-secondary: #111827;
97
+ --cide-ele-bg-tertiary: #374151;
98
+ --cide-ele-bg-hover: #374151;
99
+ --cide-ele-bg-active: #4b5563;
100
+
101
+ /* Text Colors */
102
+ --cide-ele-text-primary: #f9fafb;
103
+ --cide-ele-text-secondary: #d1d5db;
104
+ --cide-ele-text-tertiary: #9ca3af;
105
+ --cide-ele-text-disabled: #6b7280;
106
+
107
+ /* Border Colors */
108
+ --cide-ele-border-primary: #374151;
109
+ --cide-ele-border-secondary: #4b5563;
110
+ --cide-ele-border-hover: #60a5fa;
111
+ --cide-ele-border-active: #3b82f6;
112
+
113
+ /* Brand Colors */
114
+ --cide-ele-brand-primary: #60a5fa;
115
+ --cide-ele-brand-primary-hover: #3b82f6;
116
+ --cide-ele-brand-primary-light: #1e3a8a;
117
+ --cide-ele-brand-primary-dark: #1e40af;
118
+
119
+ /* Status Colors */
120
+ --cide-ele-success: #34d399;
121
+ --cide-ele-success-light: #065f46;
122
+ --cide-ele-warning: #fbbf24;
123
+ --cide-ele-warning-light: #78350f;
124
+ --cide-ele-error: #f87171;
125
+ --cide-ele-error-light: #7f1d1d;
126
+ --cide-ele-info: #60a5fa;
127
+ --cide-ele-info-light: #1e3a8a;
128
+
129
+ /* Data Grid Dark Mode */
130
+ --cide-ele-grid-bg: #1f2937;
131
+ --cide-ele-grid-bg-striped: #111827;
132
+ --cide-ele-grid-bg-hover: #374151;
133
+ --cide-ele-grid-bg-header: #374151;
134
+ --cide-ele-grid-bg-group: #374151;
135
+
136
+ --cide-ele-grid-border: #374151;
137
+ --cide-ele-grid-border-header: rgba(255, 255, 255, 0.1);
138
+ --cide-ele-grid-border-hover: #60a5fa;
139
+
140
+ --cide-ele-grid-text: #f9fafb;
141
+ --cide-ele-grid-text-header: #d1d5db;
142
+ --cide-ele-grid-text-secondary: #9ca3af;
143
+
144
+ /* Scrollbar Dark Mode */
145
+ --cide-ele-scrollbar-track: #1f2937;
146
+ --cide-ele-scrollbar-thumb: #4b5563;
147
+ --cide-ele-scrollbar-thumb-hover: #6b7280;
148
+ }
149
+
150
+ /* ============================================
151
+ * MEDIA QUERY DARK MODE SUPPORT
152
+ * ============================================ */
153
+
154
+ @media (prefers-color-scheme: dark) {
155
+ :root:not([data-theme="light"]):not(.light-mode) {
156
+ /* Background Colors */
157
+ --cide-ele-bg-primary: #1f2937;
158
+ --cide-ele-bg-secondary: #111827;
159
+ --cide-ele-bg-tertiary: #374151;
160
+ --cide-ele-bg-hover: #374151;
161
+ --cide-ele-bg-active: #4b5563;
162
+
163
+ /* Text Colors */
164
+ --cide-ele-text-primary: #f9fafb;
165
+ --cide-ele-text-secondary: #d1d5db;
166
+ --cide-ele-text-tertiary: #9ca3af;
167
+ --cide-ele-text-disabled: #6b7280;
168
+
169
+ /* Border Colors */
170
+ --cide-ele-border-primary: #374151;
171
+ --cide-ele-border-secondary: #4b5563;
172
+ --cide-ele-border-hover: #60a5fa;
173
+ --cide-ele-border-active: #3b82f6;
174
+
175
+ /* Brand Colors */
176
+ --cide-ele-brand-primary: #60a5fa;
177
+ --cide-ele-brand-primary-hover: #3b82f6;
178
+ --cide-ele-brand-primary-light: #1e3a8a;
179
+ --cide-ele-brand-primary-dark: #1e40af;
180
+
181
+ /* Status Colors */
182
+ --cide-ele-success: #34d399;
183
+ --cide-ele-success-light: #065f46;
184
+ --cide-ele-warning: #fbbf24;
185
+ --cide-ele-warning-light: #78350f;
186
+ --cide-ele-error: #f87171;
187
+ --cide-ele-error-light: #7f1d1d;
188
+ --cide-ele-info: #60a5fa;
189
+ --cide-ele-info-light: #1e3a8a;
190
+
191
+ /* Data Grid Dark Mode */
192
+ --cide-ele-grid-bg: #1f2937;
193
+ --cide-ele-grid-bg-striped: #111827;
194
+ --cide-ele-grid-bg-hover: #374151;
195
+ --cide-ele-grid-bg-header: #374151;
196
+ --cide-ele-grid-bg-group: #374151;
197
+
198
+ --cide-ele-grid-border: #374151;
199
+ --cide-ele-grid-border-header: rgba(255, 255, 255, 0.1);
200
+ --cide-ele-grid-border-hover: #60a5fa;
201
+
202
+ --cide-ele-grid-text: #f9fafb;
203
+ --cide-ele-grid-text-header: #d1d5db;
204
+ --cide-ele-grid-text-secondary: #9ca3af;
205
+
206
+ /* Scrollbar Dark Mode */
207
+ --cide-ele-scrollbar-track: #1f2937;
208
+ --cide-ele-scrollbar-thumb: #4b5563;
209
+ --cide-ele-scrollbar-thumb-hover: #6b7280;
210
+ }
211
+ }
212
+
package/src/lib/assets/css/cide-ele-style.scss CHANGED
@@ -1,86 +1,86 @@
1
- // Apply Variables
2
- @import './cide-ele-variable.scss';
3
- @import './cide-ele-color-variables.scss';
4
- @import '../../utils/directives/tooltip/tooltip.directive.scss';
5
- /*----------------------------------------
6
- * ELEMENT CSS STARTS HERE
7
- * HERE WE WILL STORE THE CLASSES
8
- *------------------------------------------*/
9
-
10
- // Sidebar Devider Starts Here
11
- .cide-lyt-devider-horizontal {
12
- width: 2px;
13
- position: absolute;
14
- top: 0;
15
- bottom: 0;
16
- right: -5px;
17
- padding: 0px 7px;
18
- cursor: ew-resize;
19
- z-index: 10;
20
- height: 100%;
21
-
22
- .cide-lyt-devider-track {
23
- width: 2px;
24
- height: 100%;
25
- }
26
- }
27
-
28
- .cide-lyt-devider-horizontal-right-to-left {
29
- left: -9px !important;
30
- right: none;
31
-
32
- .cide-lyt-sidedrawer-wrapper {
33
- height: 100%;
34
- }
35
- }
36
-
37
- .cide-lyt-devider-vertical {
38
- height: 2px;
39
- position: absolute;
40
- left: 0;
41
- right: 0;
42
- top: -5px;
43
- padding: 7px 0px;
44
- cursor: ns-resize;
45
- z-index: 10;
46
- width: 100%;
47
-
48
- .cide-lyt-devider-track {
49
- width: 100%;
50
- height: 2px;
51
- }
52
- }
53
-
54
- // .cide-lyt-devider-track {
55
- // background-color: var(--cide-ele-devider-border-color);
56
- // }
57
-
58
- .panel-resizer:hover {
59
- .cide-lyt-devider-track {
60
- background-color: var(--cide-ele-devider-border-color);
61
- }
62
- }
63
-
64
- .cide-lyt-devider-track {
65
- transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
66
- }
67
-
68
- .cide-lyt-devider-track:hover::after {
69
- content: '';
70
- position: absolute;
71
- left: 50%;
72
- top: 50%;
73
- transform: translate(-50%, -50%);
74
- width: 8px;
75
- height: 50px;
76
- background-color: var(--cide-ele-devider-border-color);
77
- border-radius: 2px;
78
- box-shadow: 0 0 6px var(--cide-ele-devider-border-color);
79
- }
80
-
81
- .cide-lyt-devider-vertical {
82
- .cide-lyt-devider-track:hover::after {
83
- height: 8px !important;
84
- width: 50px !important;
85
- }
1
+ // Apply Variables
2
+ @import './cide-ele-variable.scss';
3
+ @import './cide-ele-color-variables.scss';
4
+ @import '../../utils/directives/tooltip/tooltip.directive.scss';
5
+ /*----------------------------------------
6
+ * ELEMENT CSS STARTS HERE
7
+ * HERE WE WILL STORE THE CLASSES
8
+ *------------------------------------------*/
9
+
10
+ // Sidebar Devider Starts Here
11
+ .cide-lyt-devider-horizontal {
12
+ width: 2px;
13
+ position: absolute;
14
+ top: 0;
15
+ bottom: 0;
16
+ right: -5px;
17
+ padding: 0px 7px;
18
+ cursor: ew-resize;
19
+ z-index: 10;
20
+ height: 100%;
21
+
22
+ .cide-lyt-devider-track {
23
+ width: 2px;
24
+ height: 100%;
25
+ }
26
+ }
27
+
28
+ .cide-lyt-devider-horizontal-right-to-left {
29
+ left: -9px !important;
30
+ right: none;
31
+
32
+ .cide-lyt-sidedrawer-wrapper {
33
+ height: 100%;
34
+ }
35
+ }
36
+
37
+ .cide-lyt-devider-vertical {
38
+ height: 2px;
39
+ position: absolute;
40
+ left: 0;
41
+ right: 0;
42
+ top: -5px;
43
+ padding: 7px 0px;
44
+ cursor: ns-resize;
45
+ z-index: 10;
46
+ width: 100%;
47
+
48
+ .cide-lyt-devider-track {
49
+ width: 100%;
50
+ height: 2px;
51
+ }
52
+ }
53
+
54
+ // .cide-lyt-devider-track {
55
+ // background-color: var(--cide-ele-devider-border-color);
56
+ // }
57
+
58
+ .panel-resizer:hover {
59
+ .cide-lyt-devider-track {
60
+ background-color: var(--cide-ele-devider-border-color);
61
+ }
62
+ }
63
+
64
+ .cide-lyt-devider-track {
65
+ transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
66
+ }
67
+
68
+ .cide-lyt-devider-track:hover::after {
69
+ content: '';
70
+ position: absolute;
71
+ left: 50%;
72
+ top: 50%;
73
+ transform: translate(-50%, -50%);
74
+ width: 8px;
75
+ height: 50px;
76
+ background-color: var(--cide-ele-devider-border-color);
77
+ border-radius: 2px;
78
+ box-shadow: 0 0 6px var(--cide-ele-devider-border-color);
79
+ }
80
+
81
+ .cide-lyt-devider-vertical {
82
+ .cide-lyt-devider-track:hover::after {
83
+ height: 8px !important;
84
+ width: 50px !important;
85
+ }
86
86
  }