allaw-ui 1.0.77 → 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 +41 -42
  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,85 +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 - Augmentation de la spécificité */
51
- .tab-navigation-d.tab-navigation--round .tab-item-d.inactive,
52
- .tab-navigation-d.small.tab-navigation--round .tab-item-d.inactive,
53
- .tab-navigation-d.normal.tab-navigation--round .tab-item-d.inactive {
54
- background-color: var(--grey-light, #f6fcfe) !important;
55
- color: var(--noir, #171e25) !important;
56
- border: 1px solid var(--grey-venom, #e6edf5) !important;
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));
57
57
  }
58
58
 
59
- /* Round variant - active state - Augmentation de la spécificité */
60
- .tab-navigation-d.tab-navigation--round .tab-item-d.active,
61
- .tab-navigation-d.small.tab-navigation--round .tab-item-d.active,
62
- .tab-navigation-d.normal.tab-navigation--round .tab-item-d.active {
63
- background-color: var(--dark-grey, #456073) !important;
64
- color: var(--pure-white, #fff) !important;
65
- border: 1px solid var(--dark-grey, #456073) !important;
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));
66
62
  }
67
63
 
68
64
  /* Hover states - Augmentation de la spécificité */
69
- .tab-navigation-d.tab-navigation--round .tab-item-d.inactive:hover,
70
- .tab-navigation-d.small.tab-navigation--round .tab-item-d.inactive:hover,
71
- .tab-navigation-d.normal.tab-navigation--round .tab-item-d.inactive:hover {
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 {
72
70
  background-color: var(--grey-venom, #e6edf5) !important;
73
71
  }
74
72
 
75
- .tab-navigation-d.tab-navigation--round .tab-item-d.active:hover,
76
- .tab-navigation-d.small.tab-navigation--round .tab-item-d.active:hover,
77
- .tab-navigation-d.normal.tab-navigation--round .tab-item-d.active:hover {
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 {
78
77
  background-color: #3c5364 !important;
79
78
  }
80
79
 
81
80
  /* Label styles */
82
- .tab-label-d {
81
+ .allaw-tab-label {
83
82
  font-family: "Open Sans", sans-serif;
84
83
  font-style: normal;
85
84
  font-weight: 500;
@@ -88,7 +87,7 @@
88
87
  }
89
88
 
90
89
  /* Notification styles */
91
- .tab-notification-dot {
90
+ .allaw-tab-notification-dot {
92
91
  width: 5px;
93
92
  height: 5px;
94
93
  background-color: #ef1a1a;
@@ -96,12 +95,12 @@
96
95
  position: absolute;
97
96
  }
98
97
 
99
- .tab-navigation-d:not(.tab-navigation--round) .tab-notification-dot {
98
+ .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-notification-dot {
100
99
  top: 7px;
101
100
  right: 10px;
102
101
  }
103
102
 
104
- .tab-navigation-d.tab-navigation--round .tab-notification-dot {
103
+ .allaw-tab-navigation.tab-navigation--round .allaw-tab-notification-dot {
105
104
  top: 15px;
106
105
  right: 10px;
107
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.77",
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",