allaw-ui 1.0.76 → 1.0.78

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 (3) hide show
  1. package/dist/components/atoms/buttons/TabNavigation.css +44 -37
  2. package/dist/components/atoms/buttons/TabNavigation.js +3 -3
  3. package/package.json +1 -1
package/dist/components/atoms/buttons/TabNavigation.css CHANGED
@@ -1,77 +1,84 @@
1
- .tab-navigation-d {
1
+ .allaw-tab-navigation {
2
2
  display: inline-flex;
3
3
  align-items: flex-start;
4
4
  gap: 8px;
5
5
  }
6
6
 
7
- .tab-navigation-d.small .tab-label-d {
7
+ .allaw-tab-navigation.small .allaw-tab-label {
8
8
  font-size: 14px;
9
9
  }
10
10
 
11
- .tab-navigation-d.normal .tab-label-d {
11
+ .allaw-tab-navigation.normal .allaw-tab-label {
12
12
  font-size: 18px;
13
13
  }
14
14
 
15
- /* Normal variant styles */
16
- .tab-navigation-d:not(.tab-navigation--round) .tab-item-d {
15
+ /* Round variant styles avec préfixe */
16
+ .allaw-tab-navigation.tab-navigation--round .allaw-tab-item {
17
17
  display: flex;
18
- padding: 0px 16px 10px 16px;
18
+ height: 35px;
19
+ padding: 12px 24px;
19
20
  justify-content: center;
20
21
  align-items: center;
21
22
  gap: 8px;
22
23
  cursor: pointer;
23
24
  position: relative;
25
+ border-radius: 18px;
24
26
  }
25
27
 
26
- .tab-navigation-d:not(.tab-navigation--round) .tab-item-d.active {
27
- border-bottom: 3px solid #000;
28
- padding-bottom: 10px;
29
- color: var(--Primary-Mid-black, var(--primary-black, #171e25));
28
+ /* États inactifs avec préfixe */
29
+ .allaw-tab-navigation.tab-navigation--round .allaw-tab-item.inactive {
30
+ background-color: var(--grey-light, #f6fcfe) !important;
31
+ color: var(--noir, #171e25) !important;
32
+ border: 1px solid var(--grey-venom, #e6edf5) !important;
30
33
  }
31
34
 
32
- .tab-navigation-d:not(.tab-navigation--round) .tab-item-d.inactive {
33
- border-bottom: 3px solid var(--grey-venom, #e6edf5);
34
- color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
35
+ /* États actifs avec préfixe */
36
+ .allaw-tab-navigation.tab-navigation--round .allaw-tab-item.active {
37
+ background-color: var(--dark-grey, #456073) !important;
38
+ color: var(--pure-white, #fff) !important;
39
+ border: 1px solid var(--dark-grey, #456073) !important;
35
40
  }
36
41
 
37
- /* Round variant styles */
38
- .tab-navigation-d.tab-navigation--round .tab-item-d {
42
+ /* Normal variant styles */
43
+ .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-item {
39
44
  display: flex;
40
- height: 35px;
41
- padding: 12px 24px;
45
+ padding: 0px 16px 10px 16px;
42
46
  justify-content: center;
43
47
  align-items: center;
44
48
  gap: 8px;
45
49
  cursor: pointer;
46
50
  position: relative;
47
- border-radius: 18px;
48
51
  }
49
52
 
50
- /* Round variant - inactive state */
51
- .tab-navigation-d.tab-navigation--round .tab-item-d.inactive {
52
- background-color: var(--grey-light, #f6fcfe);
53
- color: var(--noir, #171e25);
54
- border: 1px solid var(--grey-venom, #e6edf5);
53
+ .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-item.active {
54
+ border-bottom: 3px solid #000;
55
+ padding-bottom: 10px;
56
+ color: var(--Primary-Mid-black, var(--primary-black, #171e25));
55
57
  }
56
58
 
57
- /* Round variant - active state */
58
- .tab-navigation-d.tab-navigation--round .tab-item-d.active {
59
- background-color: var(--dark-grey, #456073);
60
- color: var(--pure-white, #fff);
61
- border: 1px solid var(--dark-grey, #456073);
59
+ .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-item.inactive {
60
+ border-bottom: 3px solid var(--grey-venom, #e6edf5);
61
+ color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
62
62
  }
63
63
 
64
- /* Hover states for round variant */
65
- .tab-navigation-d.tab-navigation--round .tab-item-d.inactive:hover {
66
- background-color: var(--grey-venom, #e6edf5);
64
+ /* Hover states - Augmentation de la spécificité */
65
+ .allaw-tab-navigation.tab-navigation--round .allaw-tab-item.inactive:hover,
66
+ .allaw-tab-navigation.small.tab-navigation--round
67
+ .allaw-tab-item.inactive:hover,
68
+ .allaw-tab-navigation.normal.tab-navigation--round
69
+ .allaw-tab-item.inactive:hover {
70
+ background-color: var(--grey-venom, #e6edf5) !important;
67
71
  }
68
72
 
69
- .tab-navigation-d.tab-navigation--round .tab-item-d.active:hover {
70
- background-color: #3c5364;
73
+ .allaw-tab-navigation.tab-navigation--round .allaw-tab-item.active:hover,
74
+ .allaw-tab-navigation.small.tab-navigation--round .allaw-tab-item.active:hover,
75
+ .allaw-tab-navigation.normal.tab-navigation--round
76
+ .allaw-tab-item.active:hover {
77
+ background-color: #3c5364 !important;
71
78
  }
72
79
 
73
80
  /* Label styles */
74
- .tab-label-d {
81
+ .allaw-tab-label {
75
82
  font-family: "Open Sans", sans-serif;
76
83
  font-style: normal;
77
84
  font-weight: 500;
@@ -80,7 +87,7 @@
80
87
  }
81
88
 
82
89
  /* Notification styles */
83
- .tab-notification-dot {
90
+ .allaw-tab-notification-dot {
84
91
  width: 5px;
85
92
  height: 5px;
86
93
  background-color: #ef1a1a;
@@ -88,12 +95,12 @@
88
95
  position: absolute;
89
96
  }
90
97
 
91
- .tab-navigation-d:not(.tab-navigation--round) .tab-notification-dot {
98
+ .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-notification-dot {
92
99
  top: 7px;
93
100
  right: 10px;
94
101
  }
95
102
 
96
- .tab-navigation-d.tab-navigation--round .tab-notification-dot {
103
+ .allaw-tab-navigation.tab-navigation--round .allaw-tab-notification-dot {
97
104
  top: 15px;
98
105
  right: 10px;
99
106
  }
package/dist/components/atoms/buttons/TabNavigation.js CHANGED
@@ -3,8 +3,8 @@ import "./TabNavigation.css";
3
3
  import "../../../styles/global.css";
4
4
  var TabNavigation = function (_a) {
5
5
  var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b, _c = _a.variant, variant = _c === void 0 ? "normal" : _c;
6
- return (React.createElement("div", { className: "tab-navigation-d ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "tab-item-d ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
7
- React.createElement("span", { className: "tab-label-d" }, tab.label),
8
- tab.hasNotification && React.createElement("span", { className: "tab-notification-dot" }))); })));
6
+ return (React.createElement("div", { className: "allaw-tab-navigation ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "allaw-tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
7
+ React.createElement("span", { className: "allaw-tab-label" }, tab.label),
8
+ tab.hasNotification && (React.createElement("span", { className: "allaw-tab-notification-dot" })))); })));
9
9
  };
10
10
  export default TabNavigation;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "1.0.76",
3
+ "version": "1.0.78",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",