@trilogy-ds/styles 0.0.1-beta.27 → 0.0.1-beta.28
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/dist/default/trilogy-mangled.css +1 -1
- package/dist/default/trilogy-partials.css +1 -1
- package/dist/default/trilogy.css +1 -1
- package/framework/src/base/_helpers.scss +5 -9
- package/framework/src/base/_loading.scss +1 -1
- package/framework/src/components/_accordion.scss +11 -15
- package/framework/src/components/_card.scss +6 -74
- package/framework/src/components/_countdown.scss +2 -2
- package/framework/src/components/_dropdown.scss +1 -1
- package/framework/src/components/_level.scss +1 -1
- package/framework/src/components/_modal.scss +1 -1
- package/framework/src/components/_otp.scss +1 -1
- package/framework/src/components/_pagination.scss +18 -25
- package/framework/src/components/_popover.scss +1 -1
- package/framework/src/components/_product-tour.scss +1 -1
- package/framework/src/components/_range.scss +2 -2
- package/framework/src/components/_segmented-control.scss +1 -1
- package/framework/src/components/_stepper.scss +2 -2
- package/framework/src/components/_timeline.scss +3 -3
- package/framework/src/elements/_alert.scss +1 -1
- package/framework/src/elements/_badge.scss +2 -2
- package/framework/src/elements/_box.scss +5 -68
- package/framework/src/elements/_button.scss +1 -1
- package/framework/src/elements/_checkbox.scss +1 -1
- package/framework/src/elements/_chips.scss +3 -5
- package/framework/src/elements/_dot.scss +1 -1
- package/framework/src/elements/_entry.scss +0 -1
- package/framework/src/elements/_icon.scss +3 -3
- package/framework/src/elements/_input-gauge.scss +2 -2
- package/framework/src/elements/_loader.scss +1 -1
- package/framework/src/elements/_notification.scss +1 -1
- package/framework/src/elements/_other.scss +1 -1
- package/framework/src/elements/_progress.scss +3 -3
- package/framework/src/elements/_radio.scss +1 -1
- package/framework/src/elements/_select.scss +5 -5
- package/framework/src/elements/_sticker.scss +5 -8
- package/framework/src/elements/_switch.scss +2 -2
- package/framework/src/elements/_table.scss +1 -1
- package/framework/src/elements/_tag.scss +1 -2
- package/framework/src/elements/_textarea.scss +1 -1
- package/framework/src/elements/_toaster.scss +1 -1
- package/framework/src/grid/_columns.scss +2 -2
- package/framework/src/layout/_hero.scss +2 -4
- package/framework/src/layout/_section.scss +4 -11
- package/framework/src/theming/_all.scss +1 -0
- package/framework/src/theming/buttons_partial.scss +1 -1
- package/framework/src/theming/common_partials.scss +9 -0
- package/framework/src/utilities/_controls.scss +2 -5
- package/framework/src/utilities/_initial-variables.scss +0 -2
- package/framework/src/utilities/_mixins.scss +4 -4
- package/package.json +1 -1
|
@@ -85,13 +85,13 @@ $size: (
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
&.is-circled {
|
|
88
|
-
border-radius:
|
|
88
|
+
border-radius: 9999px;
|
|
89
89
|
text-align: center;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
&.is-stretched {
|
|
93
93
|
transform: skewX(-#{$icon-stretching-level});
|
|
94
|
-
border-top-right-radius:
|
|
94
|
+
border-top-right-radius: 9px;
|
|
95
95
|
background-color: getColor('font');
|
|
96
96
|
|
|
97
97
|
[class^="tri-"],
|
|
@@ -240,7 +240,7 @@ $size: (
|
|
|
240
240
|
right: 0;
|
|
241
241
|
width: $icon-dimensions-default;
|
|
242
242
|
height: $icon-dimensions-default;
|
|
243
|
-
border-radius:
|
|
243
|
+
border-radius: 9999px;
|
|
244
244
|
background-color: getColor('main');
|
|
245
245
|
}
|
|
246
246
|
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
.security-gauge {
|
|
6
6
|
height: 4px;
|
|
7
7
|
background: getColor('disabled');
|
|
8
|
-
border-radius:
|
|
8
|
+
border-radius: var(--radius-small);
|
|
9
9
|
margin: 8px 0;
|
|
10
10
|
|
|
11
11
|
.gauge {
|
|
12
12
|
height: 100%;
|
|
13
|
-
border-radius:
|
|
13
|
+
border-radius: var(--radius-small);
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
|
@@ -9,7 +9,7 @@ $progressbar-small: 5px;
|
|
|
9
9
|
@include block;
|
|
10
10
|
|
|
11
11
|
border: none;
|
|
12
|
-
border-radius:
|
|
12
|
+
border-radius: 9999px;
|
|
13
13
|
display: block;
|
|
14
14
|
height: $progressbar-height;
|
|
15
15
|
overflow: hidden;
|
|
@@ -108,7 +108,7 @@ $progress-circle-slices: (
|
|
|
108
108
|
--progress-circle-spacing-color: 255, 255, 255;
|
|
109
109
|
--progress-circle-spacing-deg: calc(1deg * var(--progress-circle-spacing));
|
|
110
110
|
|
|
111
|
-
border-radius:
|
|
111
|
+
border-radius: 9999px;
|
|
112
112
|
height: var(--progress-circle-size);
|
|
113
113
|
margin: 40px;
|
|
114
114
|
position: relative;
|
|
@@ -147,7 +147,7 @@ $progress-circle-slices: (
|
|
|
147
147
|
.progress-circle-slice::before,
|
|
148
148
|
.progress-circle-slice::after {
|
|
149
149
|
border: var(--progress-circle-border-width) solid rgba(0, 0, 0, 0);
|
|
150
|
-
border-radius:
|
|
150
|
+
border-radius: 9999px;
|
|
151
151
|
content: '';
|
|
152
152
|
height: 100%;
|
|
153
153
|
left: 0;
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.select {
|
|
19
|
-
border:
|
|
19
|
+
border: var(--border);
|
|
20
20
|
display: inline-block;
|
|
21
21
|
max-width: 100%;
|
|
22
22
|
position: relative;
|
|
23
23
|
font-family: $body-family;
|
|
24
|
-
border-radius:
|
|
24
|
+
border-radius: var(--radius-small);
|
|
25
25
|
background-color: getColor('background');
|
|
26
26
|
display: block;
|
|
27
27
|
font-size: 1em;
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
align-items: flex-start;
|
|
181
181
|
background: getColor('background');
|
|
182
182
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
|
|
183
|
-
border-radius:
|
|
183
|
+
border-radius: var(--radius-small);
|
|
184
184
|
overflow: auto;
|
|
185
185
|
width: 100%;
|
|
186
186
|
max-height: 260px;
|
|
@@ -254,8 +254,8 @@
|
|
|
254
254
|
&.is-active {
|
|
255
255
|
.autocomplete-menu {
|
|
256
256
|
display: block;
|
|
257
|
-
border:
|
|
258
|
-
border-radius:
|
|
257
|
+
border: var(--border);
|
|
258
|
+
border-radius: var(--radius-small);
|
|
259
259
|
max-height: 220px;
|
|
260
260
|
overflow-y: auto;
|
|
261
261
|
background-color: getColor('background');
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
$sticker-height: 35px;
|
|
2
|
-
$sticker-radius: $radius-large;
|
|
3
2
|
|
|
4
3
|
.sticker {
|
|
5
|
-
border-radius:
|
|
4
|
+
border-radius: 9999px;
|
|
6
5
|
font-size: 16px;
|
|
7
6
|
flex-grow: 0;
|
|
8
7
|
display: inline-flex;
|
|
@@ -17,7 +16,6 @@ $sticker-radius: $radius-large;
|
|
|
17
16
|
width: fit-content;
|
|
18
17
|
|
|
19
18
|
@include mobile {
|
|
20
|
-
border-radius: 16px;
|
|
21
19
|
font-size: 12px;
|
|
22
20
|
padding: $spacing-1 $spacing-2;
|
|
23
21
|
height: auto;
|
|
@@ -45,7 +43,6 @@ $sticker-radius: $radius-large;
|
|
|
45
43
|
}
|
|
46
44
|
|
|
47
45
|
&.is-small {
|
|
48
|
-
border-radius: 16px;
|
|
49
46
|
font-size: 12px;
|
|
50
47
|
padding: $spacing-1 $spacing-2;
|
|
51
48
|
height: auto;
|
|
@@ -55,7 +52,7 @@ $sticker-radius: $radius-large;
|
|
|
55
52
|
|
|
56
53
|
// deprecated
|
|
57
54
|
&.is-stretched {
|
|
58
|
-
border-radius:
|
|
55
|
+
border-radius: var(--radius) 0;
|
|
59
56
|
padding: 0 10px;
|
|
60
57
|
position: relative;
|
|
61
58
|
margin-right: 10px;
|
|
@@ -75,12 +72,12 @@ $sticker-radius: $radius-large;
|
|
|
75
72
|
}
|
|
76
73
|
|
|
77
74
|
&::before {
|
|
78
|
-
border-radius:
|
|
75
|
+
border-radius: var(--radius) 0 0 var(--radius);
|
|
79
76
|
left: -6px;
|
|
80
77
|
}
|
|
81
78
|
|
|
82
79
|
&::after {
|
|
83
|
-
border-radius: 0
|
|
80
|
+
border-radius: 0 var(--radius) var(--radius) 0;
|
|
84
81
|
right: -7px;
|
|
85
82
|
}
|
|
86
83
|
}
|
|
@@ -99,7 +96,7 @@ $sticker-radius: $radius-large;
|
|
|
99
96
|
.has-hat-mobile {
|
|
100
97
|
.is-hat {
|
|
101
98
|
display: inline-block;
|
|
102
|
-
border-radius:
|
|
99
|
+
border-radius: var(--radius) var(--radius) 0 0;
|
|
103
100
|
position: absolute;
|
|
104
101
|
top: -$sticker-height;
|
|
105
102
|
left: 0;
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
top: 50%;
|
|
43
43
|
transform: translateY(-50%);
|
|
44
44
|
right: 0;
|
|
45
|
-
border-radius:
|
|
45
|
+
border-radius: 9999px;
|
|
46
46
|
width: 44px;
|
|
47
47
|
height: 22px;
|
|
48
48
|
background-color: getBGColor('font');
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
top: 50%;
|
|
57
57
|
transform: translateY(-50%);
|
|
58
58
|
right: calc(44px - 18px - 2px);
|
|
59
|
-
border-radius:
|
|
59
|
+
border-radius: 9999px;
|
|
60
60
|
width: 18px;
|
|
61
61
|
height: 18px;
|
|
62
62
|
background-color: getColorValue('background');
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
$tag-radius: $radius-rounded !default;
|
|
2
1
|
$tag-delete-margin: 1px !default;
|
|
3
2
|
|
|
4
3
|
// container pour multi-tags ou tags avec actions
|
|
@@ -96,7 +95,7 @@ $tag-delete-margin: 1px !default;
|
|
|
96
95
|
.tag {
|
|
97
96
|
align-items: center;
|
|
98
97
|
background-color: getBGColor('neutral-dark');
|
|
99
|
-
border-radius:
|
|
98
|
+
border-radius: 9999px;
|
|
100
99
|
color: getColor('font');
|
|
101
100
|
display: inline-flex;
|
|
102
101
|
font-size: $size-medium;
|
|
@@ -782,13 +782,13 @@
|
|
|
782
782
|
|
|
783
783
|
&::-webkit-scrollbar-track {
|
|
784
784
|
background-color: getBGColor('font');
|
|
785
|
-
border-radius:
|
|
785
|
+
border-radius: var(--radius);
|
|
786
786
|
margin: 0 8px;
|
|
787
787
|
}
|
|
788
788
|
|
|
789
789
|
&::-webkit-scrollbar-thumb {
|
|
790
790
|
background: getColor('main');
|
|
791
|
-
border-radius:
|
|
791
|
+
border-radius: var(--radius);
|
|
792
792
|
}
|
|
793
793
|
}
|
|
794
794
|
|
|
@@ -1,22 +1,15 @@
|
|
|
1
|
-
$section-padding-y: $spacing-6;
|
|
2
|
-
$section-padding-x: $spacing-5;
|
|
3
|
-
$section-padding-desktop-y: $spacing-8;
|
|
4
|
-
$section-padding-desktop-x: $spacing-5;
|
|
5
|
-
$overlap-section: $spacing-4 !default;
|
|
6
|
-
$overlap-section-desktop: $spacing-4 !default;
|
|
7
|
-
|
|
8
1
|
.section {
|
|
9
|
-
padding: $
|
|
2
|
+
padding: $spacing-6 $spacing-5;
|
|
10
3
|
|
|
11
4
|
@include desktop {
|
|
12
|
-
padding: $
|
|
5
|
+
padding: $spacing-8 $spacing-5;
|
|
13
6
|
}
|
|
14
7
|
|
|
15
8
|
&.has-overlap > .container {
|
|
16
|
-
margin-top: -$
|
|
9
|
+
margin-top: -$spacing-6 - $spacing-4;
|
|
17
10
|
|
|
18
11
|
@include desktop {
|
|
19
|
-
margin-top: -$
|
|
12
|
+
margin-top: -$spacing-8 - $spacing-4;
|
|
20
13
|
}
|
|
21
14
|
}
|
|
22
15
|
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
$control-radius: $radius !default;
|
|
2
|
-
$control-radius-small: $radius-small !default;
|
|
3
|
-
|
|
4
1
|
$control-border-width: 1px !default;
|
|
5
2
|
|
|
6
3
|
$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
|
|
@@ -11,7 +8,7 @@ $control-padding-horizontal: 20px;
|
|
|
11
8
|
-webkit-appearance: none;
|
|
12
9
|
align-items: center;
|
|
13
10
|
border: $control-border-width solid transparent;
|
|
14
|
-
border-radius:
|
|
11
|
+
border-radius: var(--radius-small);
|
|
15
12
|
display: inline-flex;
|
|
16
13
|
font-size: $size-normal;
|
|
17
14
|
height: 46px;
|
|
@@ -46,7 +43,7 @@ $control-padding-horizontal: 20px;
|
|
|
46
43
|
}
|
|
47
44
|
|
|
48
45
|
@mixin control-small {
|
|
49
|
-
border-radius:
|
|
46
|
+
border-radius: var(--radius-small);
|
|
50
47
|
font-size: $size-small;
|
|
51
48
|
}
|
|
52
49
|
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
-webkit-appearance: none;
|
|
9
9
|
background-color: rgba(black, 0.2);
|
|
10
10
|
border: none;
|
|
11
|
-
border-radius:
|
|
11
|
+
border-radius: 9999px;
|
|
12
12
|
cursor: pointer;
|
|
13
13
|
display: inline-block;
|
|
14
14
|
flex-grow: 0;
|
|
@@ -388,7 +388,7 @@
|
|
|
388
388
|
}
|
|
389
389
|
|
|
390
390
|
&:before {
|
|
391
|
-
border:
|
|
391
|
+
border: var(--border);
|
|
392
392
|
}
|
|
393
393
|
}
|
|
394
394
|
|
|
@@ -499,8 +499,8 @@
|
|
|
499
499
|
display: block;
|
|
500
500
|
position: relative;
|
|
501
501
|
padding: 40px 16px 16px;
|
|
502
|
-
border:
|
|
503
|
-
border-radius:
|
|
502
|
+
border: var(--border);
|
|
503
|
+
border-radius: var(--radius);
|
|
504
504
|
box-sizing: border-box;
|
|
505
505
|
background-color: getColor('background');
|
|
506
506
|
|