@trilogy-ds/styles 4.4.0 → 4.4.2

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 (9) hide show
  1. package/dist/default/trilogy-mangled.css +1 -1
  2. package/dist/default/trilogy-partials.css +1 -1
  3. package/dist/default/trilogy.css +1 -1
  4. package/framework/src/components/_autocomplete.scss +27 -23
  5. package/framework/src/components/_modal.scss +1 -1
  6. package/framework/src/components/_tabs.scss +66 -26
  7. package/framework/src/utilities/mixins/_mixins.scss +1 -2
  8. package/framework/src/utilities/variables/_color.scss +1 -0
  9. package/package.json +1 -1
package/framework/src/components/_autocomplete.scss CHANGED
@@ -1,32 +1,36 @@
1
- .is-autocomplete {
1
+ .is-autocomplete-container {
2
+ position: relative;
3
+
4
+ .is-autocomplete {
2
5
  .autocomplete-menu {
3
- display: none;
6
+ display: none;
4
7
  }
5
8
 
6
9
  &.is-active {
7
- .autocomplete-menu {
8
- display: block;
9
- border: var(--border);
10
- padding: calc($spacing-1 + 1px) calc($spacing-2 + 2px);
11
- border-radius: 4px;
12
- max-height: 220px;
13
- overflow-y: auto;
14
- background-color: getColor('background');
15
- z-index: 10000;
16
- }
10
+ .autocomplete-menu {
11
+ display: block;
12
+ border: var(--border);
13
+ padding: calc($spacing-1 + 1px) calc($spacing-2 + 2px);
14
+ border-radius: 4px;
15
+ max-height: 220px;
16
+ overflow-y: auto;
17
+ background-color: getColor('background');
18
+ z-index: 10000;
19
+ }
17
20
 
18
- .autocomplete-item {
19
- cursor: pointer;
20
- padding: calc($spacing-1 - 0.25px) calc($spacing-1 + 1px);
21
+ .autocomplete-item {
22
+ cursor: pointer;
23
+ padding: calc($spacing-1 - 0.25px) calc($spacing-1 + 1px);
21
24
 
22
- &.is-active, &[data-autocomplete-item-hover] {
23
- @include hoverRules();
24
- margin-left: calc(2px - $spacing-3 );
25
- margin-right: calc(2px - $spacing-3 );
26
- border-top: 1px solid getColor('neutral-fade');
27
- border-bottom: 1px solid getColor('neutral-fade');
28
- padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
29
- }
25
+ &.is-active, &[data-autocomplete-item-hover] {
26
+ @include hoverRules();
27
+ margin-left: calc(2px - $spacing-3);
28
+ margin-right: calc(2px - $spacing-3);
29
+ border-top: 1px solid getColor('neutral-fade');
30
+ border-bottom: 1px solid getColor('neutral-fade');
31
+ padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
30
32
  }
33
+ }
31
34
  }
35
+ }
32
36
  }
package/framework/src/components/_modal.scss CHANGED
@@ -75,7 +75,7 @@ body:has(.modal.is-active) {
75
75
  width: 100%;
76
76
  z-index: zindex('tiny');
77
77
  transition: transform ease-in-out 250ms;
78
- transform: translateY(100%);
78
+ transform: translateY(50%);
79
79
 
80
80
  @include tablet {
81
81
  max-height: calc(100vh - 120px);
package/framework/src/components/_tabs.scss CHANGED
@@ -1,3 +1,7 @@
1
+ $height-tab-default: 64px;
2
+ $height-arrow-default:48px;
3
+ $height-arrow-small:30px;
4
+
1
5
  .tabs {
2
6
  @include overflow-touch;
3
7
  @include unselectable;
@@ -7,11 +11,28 @@
7
11
  font-weight: $weight-normal;
8
12
  width: 100%;
9
13
  text-align: center;
10
- overflow: scroll;
11
- overflow: -moz-scrollbars-none !important;
12
- -ms-overflow-style: none !important;
13
- scrollbar-width: none;
14
- overflow-y: hidden;
14
+ overflow: hidden;
15
+ position: relative;
16
+
17
+
18
+ .arrow-prev, .arrow-next {
19
+ position: absolute;
20
+ top: calc(($height-tab-default / 2) - calc($height-arrow-default / 2) ) !important ;
21
+ transition: opacity 0.3s ease;
22
+ opacity: 1;
23
+ &.hidden {
24
+ opacity: 0;
25
+ }
26
+ }
27
+
28
+ .arrow-prev {
29
+ left: 0px;
30
+ }
31
+
32
+ .arrow-next {
33
+ right: 0px;
34
+ }
35
+
15
36
 
16
37
  &::-webkit-scrollbar {
17
38
  width: 0 !important;
@@ -50,18 +71,23 @@
50
71
  }
51
72
 
52
73
  .tab-list {
53
- &::-webkit-scrollbar {
54
- width: 0 !important;
55
- height: 0 !important;
56
- scrollbar-width: none !important;
57
- }
58
-
59
74
  background-color: transparent;
60
75
  height: 48px;
61
76
  overflow-x: auto;
62
77
  white-space: nowrap;
63
- display: inline-flex;
64
78
  overflow-y: hidden;
79
+ max-width: 100%;
80
+
81
+ &.is-arrows{
82
+ margin-left: $spacing-7;
83
+ margin-right: $spacing-7;
84
+ }
85
+
86
+ &::-webkit-scrollbar {
87
+ width: 0 !important;
88
+ height: 0 !important;
89
+ scrollbar-width: none !important;
90
+ }
65
91
 
66
92
  &.is-fullwidth {
67
93
  @include desktop {
@@ -93,13 +119,10 @@
93
119
  color: getColor('font');
94
120
  text-decoration: none;
95
121
  outline: none;
96
- padding: 6px 14px;
97
- font-size: $text-14;
98
- @include desktop {
99
- font-size: $text-16;
100
- }
122
+ padding: 12px 24px;
123
+ font-size: $text-16;
101
124
  border: 0px solid transparent;
102
- border-bottom: 2px solid transparent;
125
+ border-bottom: 1px solid getColor('neutral');
103
126
 
104
127
  .tab-icon {
105
128
  margin-top: 2px;
@@ -111,21 +134,19 @@
111
134
  }
112
135
  }
113
136
 
114
- @include mobile {
115
- font-size: $text-14;
116
- }
117
-
118
137
  &.is-active {
119
138
  color: getColor('main');
120
139
  position: relative;
121
140
  border-bottom-color: getColor('main');
122
- font-weight: $weight-medium;
141
+ font-weight: $weight-bold;
142
+ border-bottom-width: 2px;
123
143
  }
124
144
 
125
- &:hover:not(.is-disabled) {
145
+ &:hover:not([disabled]) {
126
146
  color: getColor('main');
127
147
  border-bottom-color: currentColor;
128
148
  cursor: pointer;
149
+ border-bottom-width: 2px;
129
150
 
130
151
  .icon.is-small [class^=tri-]::before, .icon.is-small [class*=" tri-"]::before {
131
152
  font-size: 22px !important;
@@ -148,14 +169,33 @@
148
169
 
149
170
  &[disabled], &[aria-disabled=true] {
150
171
  background-color: transparent !important;
151
- border-bottom-color: transparent !important;
172
+ border-bottom-color: getColor('neutral') !important;
152
173
  &.is-active{
153
174
  border-bottom-color: currentColor !important;
154
175
  }
155
176
  }
156
-
157
177
  }
158
178
  }
179
+
180
+
181
+ &.is-small{
182
+ .arrow-prev, .arrow-next {
183
+ top: calc(($height-tab-default / 2) - calc($height-arrow-small / 2) ) !important;
184
+ }
185
+
186
+ .tab-list {
187
+ & > .tab {
188
+ font-size: $text-14 ;
189
+ padding: 12px 16px;
190
+ }
191
+
192
+ &.is-arrows{
193
+ margin-left: $spacing-6;
194
+ margin-right: $spacing-6;
195
+ }
196
+ }
197
+ }
198
+
159
199
 
160
200
  .tab-panels {
161
201
  padding-top: $spacing-3;
package/framework/src/utilities/mixins/_mixins.scss CHANGED
@@ -30,8 +30,7 @@
30
30
  color: getColor('font');
31
31
 
32
32
  @include placeholder {
33
- color: getColor('font') !important;
34
- filter: grayscale(100%);
33
+ color: getColor('font-placeholder') !important;
35
34
  opacity: 1 !important;
36
35
  transition: all 0.2s ease-out;
37
36
  }
package/framework/src/utilities/variables/_color.scss CHANGED
@@ -17,6 +17,7 @@ $colors: (
17
17
  'main-fade':[ #eff2f8, 'main-fade', 'white'],
18
18
  'accent':[ #da641b,'accent', 'white'],
19
19
  'font':[ #3d5d7e, 'font', 'white'],
20
+ 'font-placeholder':[ #687a87, 'font-placeholder', 'white'],
20
21
  'success':[ #007B52, 'success', 'white'],
21
22
  'success-fade':[ #cae8ca,'success-fade', 'white'],
22
23
  'info':[ #1A688A, 'info', 'white'],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trilogy-ds/styles",
3
- "version": "4.4.0",
3
+ "version": "4.4.2",
4
4
  "author": "Bouygues Telecom",
5
5
  "license": "UNLICENSED",
6
6
  "files": [