sccoreui 6.2.54 → 6.2.56
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/dist/App.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "sass:list";
|
|
1
3
|
@import url("./assets/theme.css");
|
|
2
4
|
@import url("./assets/sccoreui.css");
|
|
3
5
|
@import url("./assets/flex.css");
|
|
@@ -45,6 +47,124 @@
|
|
|
45
47
|
--grey-bg: #101828;
|
|
46
48
|
--border-none: border-none;
|
|
47
49
|
--box-shadow-none: none;
|
|
50
|
+
--_primary-800: #0e184f;
|
|
51
|
+
--_primary-700: #111c5b;
|
|
52
|
+
--_primary-600: #132067;
|
|
53
|
+
--_primary-500: #162578;
|
|
54
|
+
--_primary-300: #d0d5dd;
|
|
55
|
+
--_primary-100: #ced4f6;
|
|
56
|
+
--_primary-200: #8794db;
|
|
57
|
+
--_primary-50: #e2e5fa;
|
|
58
|
+
--_primary-25: #f5f6fd;
|
|
59
|
+
|
|
60
|
+
--_gray-700: #344054;
|
|
61
|
+
--_gray-800: #1d2939;
|
|
62
|
+
--_gray-200: #eaecf0;
|
|
63
|
+
--_gray-300: #d0d5dd;
|
|
64
|
+
--_gray-50: #f9fafb;
|
|
65
|
+
--_base-white: #fff;
|
|
66
|
+
|
|
67
|
+
--_text-secondary-600: #475467;
|
|
68
|
+
--_outline-800: #1d2939;
|
|
69
|
+
--_outline-200: #eaecf0;
|
|
70
|
+
--_outline-300: #d0d5dd;
|
|
71
|
+
--_outline-50: #f9fafb;
|
|
72
|
+
--_base-white: #fff;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@mixin flex($justify: flex-start, $align: center, $direction: row) {
|
|
76
|
+
display: flex;
|
|
77
|
+
justify-content: $justify;
|
|
78
|
+
align-items: $align;
|
|
79
|
+
flex-direction: $direction;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@mixin auto__h($height: 0px) {
|
|
83
|
+
height: calc(100vh - $height);
|
|
84
|
+
overflow-y: auto;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@mixin grid__responsive($minWidth: 350px, $maxWidth: 500px) {
|
|
88
|
+
display: var(--_d-grid);
|
|
89
|
+
grid-template-columns: repeat(auto-fill, min($minWidth, $maxWidth));
|
|
90
|
+
width: 100%;
|
|
91
|
+
& > div {
|
|
92
|
+
width: 100%;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.p-button {
|
|
97
|
+
border: 0 !important;
|
|
98
|
+
&.btn-primary {
|
|
99
|
+
background-color: var(--_primary-500);
|
|
100
|
+
color: var(--_base-white);
|
|
101
|
+
padding: 8px 14px;
|
|
102
|
+
&:hover {
|
|
103
|
+
background-color: var(--_primary-700);
|
|
104
|
+
}
|
|
105
|
+
&:focus {
|
|
106
|
+
background-color: var(--_primary-700);
|
|
107
|
+
}
|
|
108
|
+
&:disabled {
|
|
109
|
+
background-color: var(--_primary-200);
|
|
110
|
+
color: var(--_base-white);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&.btn-outline {
|
|
115
|
+
background-color: var(--base-white);
|
|
116
|
+
color: var(--_gray-600);
|
|
117
|
+
border: 1px solid var(--_gray-300) !important;
|
|
118
|
+
padding: 6px 12px;
|
|
119
|
+
&:hover {
|
|
120
|
+
background-color: var(--_gray-50) !important;
|
|
121
|
+
color: var(--_gray-700) !important;
|
|
122
|
+
}
|
|
123
|
+
&:focus {
|
|
124
|
+
background-color: var(--gray-50);
|
|
125
|
+
}
|
|
126
|
+
&:disabled {
|
|
127
|
+
background-color: var(--_gray-200);
|
|
128
|
+
color: var(--_base-white);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&.btn-secondary {
|
|
133
|
+
background-color: var(--_primary-50);
|
|
134
|
+
color: var(--_primary-500);
|
|
135
|
+
padding: 8px 14px;
|
|
136
|
+
&:hover {
|
|
137
|
+
background-color: var(--_primary-100) !important;
|
|
138
|
+
color: var(--_primary-800) !important;
|
|
139
|
+
}
|
|
140
|
+
&:focus {
|
|
141
|
+
background-color: var(--_primary-100);
|
|
142
|
+
}
|
|
143
|
+
&:disabled {
|
|
144
|
+
background-color: var(--_primary-50);
|
|
145
|
+
color: var(--_gray-300);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&.btn-text {
|
|
150
|
+
background-color: var(--_base-white);
|
|
151
|
+
color: var(--_gray-600);
|
|
152
|
+
padding: 8px 14px;
|
|
153
|
+
border: 0 !important;
|
|
154
|
+
&:hover {
|
|
155
|
+
background-color: var(--_gray-50) !important;
|
|
156
|
+
color: var(--_gray-700) !important;
|
|
157
|
+
}
|
|
158
|
+
&:focus {
|
|
159
|
+
background-color: var(--_gray-50);
|
|
160
|
+
color: var(--_gray-700);
|
|
161
|
+
border: 0px !important;
|
|
162
|
+
}
|
|
163
|
+
&:disabled {
|
|
164
|
+
background-color: var(--_primary-50) !important;
|
|
165
|
+
color: var(--_gray-300);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
48
168
|
}
|
|
49
169
|
|
|
50
170
|
// height and width utility classes
|
|
@@ -100,6 +220,23 @@ code {
|
|
|
100
220
|
// font-weight: var(--fw-400);
|
|
101
221
|
// }
|
|
102
222
|
|
|
223
|
+
// ============= Button styles =============== //
|
|
224
|
+
// .btn-primary {
|
|
225
|
+
// @include btn(primary);
|
|
226
|
+
// }
|
|
227
|
+
|
|
228
|
+
// .btn-secondary {
|
|
229
|
+
// @include btn(secondary);
|
|
230
|
+
// }
|
|
231
|
+
|
|
232
|
+
// .btn-outline {
|
|
233
|
+
// @include btn(outline);
|
|
234
|
+
// }
|
|
235
|
+
|
|
236
|
+
// .btn-text {
|
|
237
|
+
// @include btn(text);
|
|
238
|
+
// }
|
|
239
|
+
|
|
103
240
|
// ============= custom progress steps =============== //
|
|
104
241
|
|
|
105
242
|
.progress-container {
|
|
@@ -143,16 +280,47 @@ code {
|
|
|
143
280
|
}
|
|
144
281
|
}
|
|
145
282
|
|
|
283
|
+
// .col-gr-icon-lg {
|
|
284
|
+
// width: 20px;
|
|
285
|
+
// animation: scaleImgLarge 0.4s forwards;
|
|
286
|
+
// }
|
|
287
|
+
|
|
288
|
+
// .col-gr-icon-sm {
|
|
289
|
+
// width: 0px;
|
|
290
|
+
// animation: scaleImgsmall 0.4s forwards;
|
|
291
|
+
// }
|
|
292
|
+
|
|
293
|
+
// @keyframes scaleImgLarge {
|
|
294
|
+
// 0% {
|
|
295
|
+
// width: 0;
|
|
296
|
+
// }
|
|
297
|
+
// 100% {
|
|
298
|
+
// width: 20px;
|
|
299
|
+
// }
|
|
300
|
+
// }
|
|
301
|
+
|
|
302
|
+
// @keyframes scaleImgsmall {
|
|
303
|
+
// 100% {
|
|
304
|
+
// width: 20px;
|
|
305
|
+
// }
|
|
306
|
+
// 0% {
|
|
307
|
+
// width: 0px;
|
|
308
|
+
// }
|
|
309
|
+
// }
|
|
310
|
+
|
|
146
311
|
.col-gr-icon {
|
|
147
312
|
width: 0;
|
|
148
|
-
|
|
149
|
-
transition: all 0.4s ease;
|
|
313
|
+
transition: width 0.4s ease;
|
|
150
314
|
}
|
|
151
315
|
|
|
152
316
|
.col-gr-icon-active {
|
|
153
317
|
width: 20px;
|
|
154
|
-
|
|
155
|
-
|
|
318
|
+
transition: width 0.4s ease; /* Ensure transition applies both ways */
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.no-content {
|
|
322
|
+
text-align: center;
|
|
323
|
+
padding: 10px;
|
|
156
324
|
}
|
|
157
325
|
|
|
158
326
|
.progress-step-item {
|