@rangertechnologies/fusion-ui 0.1.6 → 0.1.7
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
package/styles/tabs.css
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/* MR 09NOV26 Standardize tabs and sub-tabs to modern underline indicator specification */
|
|
2
|
+
|
|
3
|
+
/* ==========================================================================
|
|
4
|
+
Main Navigation Tabs (.fc-tabs / .nav-tabs)
|
|
5
|
+
========================================================================== */
|
|
6
|
+
|
|
7
|
+
.nav-tabs,
|
|
8
|
+
.fc-tabs {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-wrap: nowrap;
|
|
11
|
+
border-bottom: 1px solid var(--border-color, #E2E8F0);
|
|
12
|
+
gap: 4px;
|
|
13
|
+
list-style: none;
|
|
14
|
+
padding: 0;
|
|
15
|
+
margin: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.nav-tabs .nav-link,
|
|
19
|
+
.fc-tabs .nav-link {
|
|
20
|
+
background-color: transparent;
|
|
21
|
+
border: none;
|
|
22
|
+
border-bottom: 3.5px solid transparent;
|
|
23
|
+
margin-bottom: -1px; /* Sits flush on top of the 1px container border */
|
|
24
|
+
font-size: var(--fs-normal, 14px);
|
|
25
|
+
font-weight: var(--fw-500, 500);
|
|
26
|
+
color: var(--label-text-color, #475569);
|
|
27
|
+
padding: 10px 18px;
|
|
28
|
+
display: inline-flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
gap: 6px;
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.nav-tabs .nav-link:hover,
|
|
36
|
+
.fc-tabs .nav-link:hover {
|
|
37
|
+
color: var(--fc-text-color-dark, #0F172A);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.nav-tabs .nav-link.active,
|
|
41
|
+
.fc-tabs .nav-link.active {
|
|
42
|
+
color: var(--fc-primary-color, #0140C1);
|
|
43
|
+
font-weight: var(--fw-600, 600);
|
|
44
|
+
border-bottom: 3.5px solid var(--fc-primary-color, #0140C1);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* ==========================================================================
|
|
48
|
+
Secondary Sub-Tabs (.sub-nav-head / .sub-nav)
|
|
49
|
+
========================================================================== */
|
|
50
|
+
|
|
51
|
+
.sub-nav-head {
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-wrap: nowrap;
|
|
54
|
+
overflow-x: auto;
|
|
55
|
+
border-bottom: 1px solid var(--border-color, #E2E8F0);
|
|
56
|
+
gap: 4px;
|
|
57
|
+
list-style: none;
|
|
58
|
+
padding: 0;
|
|
59
|
+
margin: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.sub-nav {
|
|
63
|
+
background: transparent;
|
|
64
|
+
border: none;
|
|
65
|
+
border-bottom: 3.5px solid transparent;
|
|
66
|
+
margin-bottom: -1px;
|
|
67
|
+
padding: 8px 16px;
|
|
68
|
+
font-size: var(--fs-normal, 14px);
|
|
69
|
+
font-weight: var(--fw-500, 500);
|
|
70
|
+
color: var(--label-text-color, #475569);
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
display: inline-flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 6px;
|
|
75
|
+
transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.sub-nav:hover {
|
|
79
|
+
color: var(--fc-text-color-dark, #0F172A);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.sub-nav.active {
|
|
83
|
+
color: var(--fc-primary-color, #0140C1);
|
|
84
|
+
font-weight: var(--fw-600, 600);
|
|
85
|
+
border-bottom: 3.5px solid var(--fc-primary-color, #0140C1);
|
|
86
|
+
}
|
|
87
|
+
|