sdga-ui 1.0.16 → 1.0.18
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/css/dga-ui.css +294 -5
- package/css/dga-ui.css.map +1 -1
- package/package.json +1 -1
- package/theme/_variables.scss +1 -0
- package/theme/components/_navs.scss +35 -0
- package/theme/customizations/_navs.scss +86 -0
- package/theme/customizations/_tabs.scss +335 -0
- package/theme/dga-ui.scss +2 -0
package/package.json
CHANGED
package/theme/_variables.scss
CHANGED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// Bootstrap 5.3 - Navs & Tabs Variables
|
|
2
|
+
|
|
3
|
+
// ============================================
|
|
4
|
+
// NAVS
|
|
5
|
+
// ============================================
|
|
6
|
+
|
|
7
|
+
$nav-link-padding-y: .5rem;
|
|
8
|
+
$nav-link-padding-x: 1rem;
|
|
9
|
+
$nav-link-font-size: null;
|
|
10
|
+
$nav-link-font-weight: null;
|
|
11
|
+
$nav-link-color: var(--#{$prefix}primary);
|
|
12
|
+
$nav-link-hover-color: var(--#{$prefix}primary-emphasis);
|
|
13
|
+
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
|
|
14
|
+
$nav-link-disabled-color: var(--#{$prefix}secondary-color);
|
|
15
|
+
$nav-link-focus-box-shadow: $focus-ring-box-shadow;
|
|
16
|
+
|
|
17
|
+
// ============================================
|
|
18
|
+
// TABS
|
|
19
|
+
// ============================================
|
|
20
|
+
|
|
21
|
+
$nav-tabs-border-width: 1px;
|
|
22
|
+
$nav-tabs-border-color: var(--#{$prefix}border-color);
|
|
23
|
+
$nav-tabs-border-radius: $radius-sm;
|
|
24
|
+
$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
|
|
25
|
+
$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color);
|
|
26
|
+
$nav-tabs-link-active-bg: var(--#{$prefix}body-bg);
|
|
27
|
+
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg;
|
|
28
|
+
|
|
29
|
+
// ============================================
|
|
30
|
+
// PILLS
|
|
31
|
+
// ============================================
|
|
32
|
+
|
|
33
|
+
$nav-pills-border-radius: $radius-sm;
|
|
34
|
+
$nav-pills-link-active-color: $component-active-color;
|
|
35
|
+
$nav-pills-link-active-bg: $component-active-bg;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
// Navs & Tabs Customizations
|
|
2
|
+
|
|
3
|
+
.navbar {
|
|
4
|
+
.nav-tabs {
|
|
5
|
+
--#{$prefix}nav-tabs-link-active-color: #{$primary-700};
|
|
6
|
+
--#{$prefix}nav-tabs-link-active-bg: #{$white};
|
|
7
|
+
--#{$prefix}nav-tabs-link-active-border-color: #{$gray-200} #{$gray-200} #{$white};
|
|
8
|
+
border-bottom: 1px solid #{$gray-200};
|
|
9
|
+
|
|
10
|
+
.nav-link {
|
|
11
|
+
font-weight: 500;
|
|
12
|
+
color: #{$gray-600};
|
|
13
|
+
border: 1px solid transparent;
|
|
14
|
+
border-top-left-radius: $radius-sm;
|
|
15
|
+
border-top-right-radius: $radius-sm;
|
|
16
|
+
margin-bottom: -1px;
|
|
17
|
+
padding: 0.75rem 1rem;
|
|
18
|
+
|
|
19
|
+
&:hover {
|
|
20
|
+
color: #{$primary-600};
|
|
21
|
+
background-color: #{$gray-50};
|
|
22
|
+
border-color: #{$gray-200} #{$gray-200} #{$gray-200};
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&.active {
|
|
26
|
+
color: #{$primary-700};
|
|
27
|
+
background-color: #{$white};
|
|
28
|
+
border-color: #{$gray-200} #{$gray-200} transparent;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&.disabled {
|
|
32
|
+
color: #{$gray-400};
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.nav-pills {
|
|
38
|
+
.nav-link {
|
|
39
|
+
font-weight: 500;
|
|
40
|
+
color: #{$gray-600};
|
|
41
|
+
border-radius: $radius-md;
|
|
42
|
+
padding: 0.5rem 1rem;
|
|
43
|
+
|
|
44
|
+
&.active {
|
|
45
|
+
background-color: #{$primary-600};
|
|
46
|
+
color: #{$white};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:hover:not(.active) {
|
|
50
|
+
background-color: #{$gray-100};
|
|
51
|
+
color: #{$gray-900};
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Vertical tabs customization
|
|
57
|
+
.flex-column.nav-tabs {
|
|
58
|
+
border-bottom: 0;
|
|
59
|
+
border-inline-end: 1px solid #{$gray-200};
|
|
60
|
+
|
|
61
|
+
.nav-link {
|
|
62
|
+
border-radius: $radius-sm 0 0 $radius-sm;
|
|
63
|
+
margin-bottom: 0;
|
|
64
|
+
margin-inline-end: -1px;
|
|
65
|
+
|
|
66
|
+
&.active {
|
|
67
|
+
border-color: #{$gray-200} transparent #{$gray-200} #{$gray-200};
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[dir="rtl"] & {
|
|
72
|
+
border-inline-end: 0;
|
|
73
|
+
border-inline-start: 1px solid #{$gray-200};
|
|
74
|
+
|
|
75
|
+
.nav-link {
|
|
76
|
+
border-radius: 0 $radius-sm $radius-sm 0;
|
|
77
|
+
margin-inline-end: 0;
|
|
78
|
+
margin-inline-start: -1px;
|
|
79
|
+
|
|
80
|
+
&.active {
|
|
81
|
+
border-color: #{$gray-200} #{$gray-200} #{$gray-200} transparent;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -0,0 +1,335 @@
|
|
|
1
|
+
// Tabs Customizations (Strict Separation from Navs)
|
|
2
|
+
|
|
3
|
+
// Using SDGA Variables directly
|
|
4
|
+
// #161616 -> $black
|
|
5
|
+
// #384250 -> $gray-700
|
|
6
|
+
// #9DA4AE -> $gray-400
|
|
7
|
+
// #F3F4F6 -> $gray-100
|
|
8
|
+
// #E5E7EB -> $gray-200
|
|
9
|
+
// #D2D6DB -> $gray-300
|
|
10
|
+
// #1B8354 -> $sa-600 (Selection indicator color from samples)
|
|
11
|
+
// Radius: 4px -> $radius-sm
|
|
12
|
+
|
|
13
|
+
$nav-tabs-border-color: $gray-300;
|
|
14
|
+
$nav-link-color: $gray-700;
|
|
15
|
+
$nav-link-hover-bg: $gray-100;
|
|
16
|
+
$nav-link-active-color: $black;
|
|
17
|
+
$nav-link-disabled-color: $gray-400;
|
|
18
|
+
$nav-link-pressed-bg: $gray-200;
|
|
19
|
+
$nav-link-selection-indicator: $sa-600; // Green from samples
|
|
20
|
+
$nav-link-selection-indicator-default: $black; // Green from samples
|
|
21
|
+
|
|
22
|
+
// Spacing Variables mapped from HTML static values
|
|
23
|
+
// 52px = 3.25rem (Custom) or close to spacer 8 (48px) - keeping calculation
|
|
24
|
+
$tab-height-lg: 3.25rem;
|
|
25
|
+
$tab-height-md: 2.75rem; // 44px
|
|
26
|
+
$tab-height-sm: 2.25rem; // 36px
|
|
27
|
+
|
|
28
|
+
$tab-v-height-lg: map-get($spacers, 7); // 40px
|
|
29
|
+
$tab-v-height-md: map-get($spacers, 6); // 32px
|
|
30
|
+
$tab-v-height-sm: map-get($spacers, 5); // 24px
|
|
31
|
+
|
|
32
|
+
.nav {
|
|
33
|
+
padding: 0;
|
|
34
|
+
}
|
|
35
|
+
// Sizes Mixin
|
|
36
|
+
@mixin nav-size($height, $padding-y, $padding-x, $font-size) {
|
|
37
|
+
.nav-link {
|
|
38
|
+
height: $height !important;
|
|
39
|
+
padding: $padding-y $padding-x !important;
|
|
40
|
+
font-size: $font-size;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
gap: map-get($spacers, 1); // 4px
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.nav-tabs {
|
|
49
|
+
--#{$prefix}nav-tabs-border-width: 0;
|
|
50
|
+
--#{$prefix}nav-tabs-border-radius: 0;
|
|
51
|
+
--#{$prefix}nav-tabs-link-active-bg: transparent;
|
|
52
|
+
|
|
53
|
+
position: relative; // Establish positioning context
|
|
54
|
+
border-bottom: 3px solid transparent; // Maintain space but make transparent
|
|
55
|
+
gap: map-get($spacers, 2); // 8px
|
|
56
|
+
|
|
57
|
+
// Rounded bottom border line
|
|
58
|
+
&::before {
|
|
59
|
+
content: '';
|
|
60
|
+
position: absolute;
|
|
61
|
+
left: 0;
|
|
62
|
+
bottom: -3px; // Align with the transparent border
|
|
63
|
+
width: 100%;
|
|
64
|
+
height: 3px;
|
|
65
|
+
background-color: $nav-tabs-border-color;
|
|
66
|
+
border-radius: $radius-full; // Rounded ends
|
|
67
|
+
pointer-events: none; // Prevent interference with clicks/hover
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.nav-link {
|
|
71
|
+
font-family: $font-family-base;
|
|
72
|
+
font-weight: $font-weight-base; // 400
|
|
73
|
+
color: $nav-link-color;
|
|
74
|
+
border: none;
|
|
75
|
+
border-radius: $radius-sm;
|
|
76
|
+
position: relative;
|
|
77
|
+
transition: all 0.2s ease;
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
gap: map-get($spacers, 1); // 4px gap between icon and text (from sample)
|
|
81
|
+
|
|
82
|
+
// Hover State & Pseudo-Hover (exclude active tabs)
|
|
83
|
+
&:hover:not(.disabled):not(.active),
|
|
84
|
+
&.pseudo-hover:not(.active) {
|
|
85
|
+
background-color: $nav-link-hover-bg;
|
|
86
|
+
color: $nav-link-color;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Pressed State & Pseudo-Active (exclude active tabs)
|
|
90
|
+
&:active:not(.disabled):not(.active),
|
|
91
|
+
&.pseudo-active:not(.active) {
|
|
92
|
+
background-color: $nav-link-pressed-bg;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Active State
|
|
96
|
+
&.active {
|
|
97
|
+
color: $nav-link-active-color;
|
|
98
|
+
font-weight: $font-weight-bold; // 700
|
|
99
|
+
background-color: transparent;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Disabled State
|
|
103
|
+
&.disabled {
|
|
104
|
+
color: $nav-link-disabled-color;
|
|
105
|
+
background-color: transparent;
|
|
106
|
+
pointer-events: none;
|
|
107
|
+
cursor: not-allowed;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// ============================================
|
|
113
|
+
// HORIZONTAL TABS - ACTIVE INDICATOR
|
|
114
|
+
// ============================================
|
|
115
|
+
// Bottom underline indicator for horizontal tabs only
|
|
116
|
+
// Bumped specificity to override _nav.scss
|
|
117
|
+
.nav-tabs.nav-tabs:not(.flex-column) .nav-link {
|
|
118
|
+
|
|
119
|
+
// Active indicator as ::before pseudo-element (bottom underline)
|
|
120
|
+
// Changed from ::after to avoid conflict with dropdown caret
|
|
121
|
+
&::before {
|
|
122
|
+
content: '';
|
|
123
|
+
position: absolute;
|
|
124
|
+
inset-inline-start: map-get($spacers, 4); // 16px from start
|
|
125
|
+
inset-inline-end: map-get($spacers, 4); // 16px from end
|
|
126
|
+
bottom: 0;
|
|
127
|
+
height: 3px;
|
|
128
|
+
background-color: transparent;
|
|
129
|
+
border-radius: $radius-full; // Rounded ends
|
|
130
|
+
z-index: 1; // Ensure it sits on top of the border
|
|
131
|
+
transition: background-color 0.2s ease; // Smooth transition
|
|
132
|
+
margin-bottom: -2.75px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// Flush variant (no left/right gap for indicator)
|
|
136
|
+
@at-root .nav-tabs.nav-tabs.flush .nav-link::before {
|
|
137
|
+
inset-inline-start: 0;
|
|
138
|
+
inset-inline-end: 0;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&.active::before {
|
|
142
|
+
background-color: $nav-link-selection-indicator; // #1B8354 green
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// Hover & Pressed state for non-active, non-disabled tabs
|
|
146
|
+
&:hover:not(.active):not(.disabled)::before,
|
|
147
|
+
&.pseudo-hover:not(.active):not(.disabled)::before,
|
|
148
|
+
&:active:not(.active):not(.disabled)::before,
|
|
149
|
+
&.pseudo-active:not(.active):not(.disabled)::before {
|
|
150
|
+
background-color: $nav-link-selection-indicator-default;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
// If disabled AND active, show gray indicator
|
|
154
|
+
&.disabled.active::before {
|
|
155
|
+
background-color: $nav-link-disabled-color; // Gray indicator for disabled selected tabs
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// ============================================
|
|
160
|
+
// HORIZONTAL TABS - SIZES
|
|
161
|
+
// ============================================
|
|
162
|
+
// Bumped specificity to override _nav.scss
|
|
163
|
+
.nav-tabs.nav-tabs:not(.flex-column) {
|
|
164
|
+
|
|
165
|
+
// Sizes
|
|
166
|
+
&.nav-lg {
|
|
167
|
+
@include nav-size($tab-height-lg, map-get($spacers, 4), map-get($spacers, 4), $font-size-sm); // 16px padding, 14px font
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&.nav-md {
|
|
171
|
+
@include nav-size($tab-height-md, map-get($spacers, 3), map-get($spacers, 4), $font-size-sm); // 12px padding, 14px font
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&.nav-sm {
|
|
175
|
+
@include nav-size($tab-height-sm, map-get($spacers, 2), map-get($spacers, 3), $font-size-sm); // 8px padding, 12px padding, 14px font
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// Vertical Tabs Customization
|
|
180
|
+
// Based on samples in: c:\Users\amro_\source\repos\dga-ui\samples\vertical tabs
|
|
181
|
+
// Applies ONLY to vertical tabs (.nav.flex-column.nav-tabs), not horizontal tabs
|
|
182
|
+
.nav.flex-column.nav-tabs {
|
|
183
|
+
border-bottom: 0;
|
|
184
|
+
&::before {
|
|
185
|
+
display: none; // Hide the rounded horizontal border
|
|
186
|
+
}
|
|
187
|
+
border-right: 0;
|
|
188
|
+
gap: 0;
|
|
189
|
+
|
|
190
|
+
.nav-link {
|
|
191
|
+
width: 100%;
|
|
192
|
+
justify-content: flex-start;
|
|
193
|
+
border: none; // Remove all default button/link borders
|
|
194
|
+
border-bottom: none;
|
|
195
|
+
border-radius: $radius-sm;
|
|
196
|
+
margin-bottom: map-get($spacers, 1); // 4px
|
|
197
|
+
font-weight: $font-weight-base; // 400 (default from samples)
|
|
198
|
+
color: $nav-link-color; // #384250 default
|
|
199
|
+
position: relative; // For ::before positioning
|
|
200
|
+
display: flex;
|
|
201
|
+
align-items: center; // Vertically center content
|
|
202
|
+
gap: map-get($spacers, 2); // 8px gap between icon and text
|
|
203
|
+
|
|
204
|
+
// Enable indicator rendering but keep transparent by default
|
|
205
|
+
&::before {
|
|
206
|
+
content: '';
|
|
207
|
+
position: absolute;
|
|
208
|
+
inset-inline-start: 0; // Logical property for LTR left / RTL right
|
|
209
|
+
top: map-get($spacers, 1); // 4px from top
|
|
210
|
+
bottom: map-get($spacers, 1); // 4px from bottom
|
|
211
|
+
width: 3px;
|
|
212
|
+
background-color: transparent;
|
|
213
|
+
border-radius: $radius-full; // rounded ends like in samples
|
|
214
|
+
transition: background-color 0.2s ease;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// Ensure icon is vertically centered
|
|
218
|
+
i,
|
|
219
|
+
img,
|
|
220
|
+
svg {
|
|
221
|
+
display: inline-flex;
|
|
222
|
+
align-items: center;
|
|
223
|
+
justify-content: center;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
// Remove default button outline for buttons used as nav-links
|
|
227
|
+
&:focus,
|
|
228
|
+
&:focus-visible {
|
|
229
|
+
outline: none; // Remove browser default outline
|
|
230
|
+
border: none;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
// Hover State for non-active
|
|
234
|
+
&:hover:not(.disabled):not(.active),
|
|
235
|
+
&.pseudo-hover:not(.active) {
|
|
236
|
+
background-color: $nav-link-hover-bg; // #f3f4f6
|
|
237
|
+
color: $nav-link-color; // No color change on hover
|
|
238
|
+
|
|
239
|
+
&::before {
|
|
240
|
+
background-color: $nav-link-selection-indicator-default;
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
// Pressed State
|
|
245
|
+
&:active:not(.disabled):not(.active),
|
|
246
|
+
&.pseudo-active:not(.active) {
|
|
247
|
+
background-color: $nav-link-pressed-bg; // #e5e7eb
|
|
248
|
+
color: $black;
|
|
249
|
+
|
|
250
|
+
&::before {
|
|
251
|
+
background-color: $nav-link-selection-indicator-default;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
// Selected/Active State
|
|
256
|
+
&.active {
|
|
257
|
+
background-color: transparent;
|
|
258
|
+
color: $nav-link-active-color; // #161616
|
|
259
|
+
font-weight: $font-weight-semibold; // 600
|
|
260
|
+
position: relative;
|
|
261
|
+
|
|
262
|
+
&::before {
|
|
263
|
+
background-color: $nav-link-selection-indicator; // #1B8354 green
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
// When selected tab is hovered
|
|
267
|
+
&:hover:not(.disabled),
|
|
268
|
+
&.pseudo-hover {
|
|
269
|
+
background-color: transparent; // No background change on hover for selected
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
// When selected tab is pressed
|
|
273
|
+
&:active:not(.disabled),
|
|
274
|
+
&.pseudo-active {
|
|
275
|
+
background-color: transparent; // No background change on press for selected
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
// Disabled State
|
|
280
|
+
&.disabled,
|
|
281
|
+
&:disabled {
|
|
282
|
+
color: $nav-link-disabled-color; // #9da4ae
|
|
283
|
+
background-color: transparent !important; // Override any hover/pressed backgrounds
|
|
284
|
+
pointer-events: none;
|
|
285
|
+
cursor: not-allowed;
|
|
286
|
+
|
|
287
|
+
// If disabled AND active/selected, show gray indicator instead of green
|
|
288
|
+
&.active::before {
|
|
289
|
+
background-color: $nav-link-disabled-color; // Gray indicator for disabled selected tabs
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
// If disabled but NOT selected, hide indicator (transparent)
|
|
293
|
+
&:not(.active)::before {
|
|
294
|
+
background-color: transparent;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
// Size Variants - matches samples for large/medium/small
|
|
300
|
+
&.nav-lg {
|
|
301
|
+
.nav-link {
|
|
302
|
+
min-height: $tab-v-height-lg; // 40px
|
|
303
|
+
padding: map-get($spacers, 2) map-get($spacers, 2); // 8px vertical, 8px horizontal (reduced gap from indicator)
|
|
304
|
+
font-size: $font-size-base; // 16px
|
|
305
|
+
|
|
306
|
+
&.active {
|
|
307
|
+
font-weight: $font-weight-semibold; // 600
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
&.nav-md {
|
|
313
|
+
.nav-link {
|
|
314
|
+
min-height: $tab-v-height-md; // 32px
|
|
315
|
+
padding: map-get($spacing-tokens, 'spacing-sm') map-get($spacers, 2); // 6px vertical, 8px horizontal (reduced gap from indicator)
|
|
316
|
+
font-size: $font-size-sm; // 14px
|
|
317
|
+
|
|
318
|
+
&.active {
|
|
319
|
+
font-weight: $font-weight-semibold; // 600 for selected medium tabs
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
&.nav-sm {
|
|
325
|
+
.nav-link {
|
|
326
|
+
min-height: $tab-v-height-sm; // 24px
|
|
327
|
+
padding: map-get($spacing-tokens, 'spacing-xxs') map-get($spacing-tokens, 'spacing-sm'); // 2px vertical, 6px horizontal
|
|
328
|
+
font-size: $font-size-sm; // 14px
|
|
329
|
+
|
|
330
|
+
&.active {
|
|
331
|
+
font-weight: $font-weight-medium; // 500 for small tabs (from sample analysis)
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
}
|
package/theme/dga-ui.scss
CHANGED
|
@@ -28,6 +28,8 @@
|
|
|
28
28
|
@import './customizations/tables';
|
|
29
29
|
@import './customizations/footer';
|
|
30
30
|
@import './customizations/navbar';
|
|
31
|
+
@import './customizations/navs';
|
|
32
|
+
@import './customizations/tabs';
|
|
31
33
|
@import './customizations/progress-indicator';
|
|
32
34
|
@import './customizations/breadcrumb';
|
|
33
35
|
@import './customizations/custom-styles';
|