@trilogy-ds/styles 4.20.3 → 4.20.4-beta.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.
@@ -429,7 +429,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
429
429
  }
430
430
 
431
431
  .is-bordered {
432
- border: var(--border);
432
+ border: getBorder();
433
433
  }
434
434
 
435
435
  .is-vertical-paddingless {
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  &:has(summary:focus-visible) {
43
- outline: var(--border-active);
43
+ outline: getBorder('active');
44
44
  outline-offset: -2px;
45
45
  }
46
46
 
@@ -15,7 +15,7 @@
15
15
  &.is-active {
16
16
  .autocomplete-menu {
17
17
  display: block;
18
- border: var(--border);
18
+ border: getBorder();
19
19
  padding: calc($spacing-1 + 1px) calc($spacing-2 + 2px);
20
20
  border-radius: var(--radius-md);
21
21
  max-height: 220px;
@@ -15,6 +15,7 @@ $radius-values: (
15
15
  'sm',
16
16
  'md',
17
17
  'lg',
18
+ 'full'
18
19
  );
19
20
 
20
21
  $padding-values: (
@@ -64,7 +65,7 @@ a.box {
64
65
  }
65
66
 
66
67
  &.is-active {
67
- outline: var(--border-active);
68
+ outline: getBorder('active');
68
69
  }
69
70
 
70
71
  &.is-offset-header {
@@ -192,7 +193,7 @@ a.box {
192
193
  .box-footer:not(.is-borderless):not([class*="has-background"])::before {
193
194
  content: '';
194
195
  display: block;
195
- border-top: var(--border);
196
+ border-top: getBorder();
196
197
  position: relative;
197
198
  top: calc(var(--padding-box) * -1);
198
199
  }
@@ -99,7 +99,7 @@ $basis-values: (
99
99
  }
100
100
 
101
101
  &.is-active {
102
- outline: var(--border-active);
102
+ outline: getBorder('active');
103
103
 
104
104
  .card-content {
105
105
 
@@ -50,12 +50,12 @@
50
50
  padding: 6px $spacing-4;
51
51
  white-space: nowrap;
52
52
  cursor: pointer;
53
- border: var(--border);
53
+ border: getBorder();
54
54
  &:not(.is-disabled) {
55
55
  &.is-active {
56
56
  background-color: getColor('main');
57
57
  color: white;
58
- border: var(--border-active);
58
+ border: getBorder('active');
59
59
  padding: 5px ($spacing-4 - 1px);
60
60
  #{$hoverSelector} {
61
61
  background-color: getColor('main');
@@ -55,7 +55,7 @@ ol.list {
55
55
 
56
56
  &.has-divider {
57
57
  li {
58
- border-bottom: var(--border);
58
+ border-bottom: getBorder();
59
59
  padding-bottom: $spacing-3;
60
60
  &:last-child {
61
61
  border-bottom: none;
@@ -5,7 +5,7 @@
5
5
  .otp {
6
6
  @include hover();
7
7
  outline: none;
8
- border: var(--border);
8
+ border: getBorder();
9
9
  border-radius: var(--radius-sm);
10
10
  background: transparent;
11
11
  width: 33px;
@@ -47,7 +47,7 @@
47
47
  border-top-right-radius: var(--radius-sm) ;
48
48
  border-bottom-right-radius: var(--radius-sm) ;
49
49
  &:focus-visible{
50
- outline: var(--border-active);
50
+ outline: getBorder('active');
51
51
  outline-offset: -2px;
52
52
  }
53
53
  }
@@ -26,7 +26,7 @@
26
26
  @include control;
27
27
  height: $size-inputs;
28
28
  background-color: getColor('background');
29
- border: var(--border);
29
+ border: getBorder();
30
30
  color: getColor('font');
31
31
 
32
32
  @include placeholder {
@@ -119,7 +119,7 @@
119
119
  }
120
120
 
121
121
  &:before {
122
- border: var(--border);
122
+ border: getBorder();
123
123
  }
124
124
  }
125
125
 
@@ -249,7 +249,7 @@
249
249
  display: block;
250
250
  position: relative;
251
251
  padding: 40px 16px 16px;
252
- border: var(--border);
252
+ border: getBorder();
253
253
  border-radius: var(--radius-md);
254
254
  box-sizing: border-box;
255
255
  background-color: getColor('background');
@@ -57,6 +57,22 @@ $fade-colors: (
57
57
  }
58
58
  }
59
59
 
60
+ @function getBorder( $active: '' ) {
61
+ @if global-variable-exists(suffix-theme) {
62
+ @if $active == 'active' {
63
+ @return var(--border-active-#{$suffix-theme});
64
+ } @else {
65
+ @return var(--border-#{$suffix-theme});
66
+ }
67
+ } @else {
68
+ @if $active == 'active' {
69
+ @return var(--border-active);
70
+ } @else {
71
+ @return var(--border);
72
+ }
73
+ }
74
+ }
75
+
60
76
  @function getColorValue( $name ) {
61
77
  @return #{nth(map-get($colors,$name),1)}
62
78
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trilogy-ds/styles",
3
- "version": "4.20.3",
3
+ "version": "4.20.4-beta.2",
4
4
  "author": "Bouygues Telecom",
5
5
  "repository": {
6
6
  "type": "git",