@trilogy-ds/styles 4.16.1 → 4.16.3
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/components/_autocomplete.scss +5 -0
- package/framework/src/components/_autolayout.scss +6 -0
- package/framework/src/components/_icon.scss +9 -8
- package/framework/src/components/_prompt.scss +19 -6
- package/framework/src/components/_sticker.scss +14 -6
- package/framework/src/components/_timepicker-circular.scss +17 -0
- package/package.json +1 -1
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
.is-autocomplete-container {
|
|
4
4
|
position: relative;
|
|
5
5
|
|
|
6
|
+
.field{
|
|
7
|
+
margin: 0!important;
|
|
8
|
+
}
|
|
9
|
+
|
|
6
10
|
.is-autocomplete {
|
|
7
11
|
.autocomplete-menu {
|
|
8
12
|
display: none;
|
|
@@ -18,6 +22,7 @@
|
|
|
18
22
|
overflow-y: auto;
|
|
19
23
|
background-color: getColor('background');
|
|
20
24
|
z-index: 10000;
|
|
25
|
+
margin-top: $spacing-2;
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
.autocomplete-item {
|
|
@@ -161,6 +161,9 @@ body:not(.is-tight) {
|
|
|
161
161
|
.title.is-level-6 + .subtitle:not(.flex-box > .title.is-level-6 + .subtitle):not(:last-child) {
|
|
162
162
|
margin-bottom: 12px;
|
|
163
163
|
}
|
|
164
|
+
.is-autocomplete-container:not(.flex-box > .is-autocomplete-container):not(:last-child) {
|
|
165
|
+
margin-bottom: 24px;
|
|
166
|
+
}
|
|
164
167
|
}
|
|
165
168
|
|
|
166
169
|
@include mobile() {
|
|
@@ -327,6 +330,9 @@ body:not(.is-tight) {
|
|
|
327
330
|
.title.is-level-6 + .subtitle:not(.flex-box > .title.is-level-6 + .subtitle):not(:last-child) {
|
|
328
331
|
margin-bottom: 8px;
|
|
329
332
|
}
|
|
333
|
+
.is-autocomplete-container:not(.flex-box > .is-autocomplete-container):not(:last-child) {
|
|
334
|
+
margin-bottom: 16px;
|
|
335
|
+
}
|
|
330
336
|
|
|
331
337
|
}
|
|
332
338
|
}
|
|
@@ -7,20 +7,20 @@ $icon-padding-default: 8px;
|
|
|
7
7
|
$icon-dimensions-default: 15px;
|
|
8
8
|
|
|
9
9
|
$size: (
|
|
10
|
-
'
|
|
11
|
-
container: 20px, icon:
|
|
10
|
+
'smaller': (
|
|
11
|
+
container: 20px, icon:16px, radius: var(--radius-small)
|
|
12
12
|
),
|
|
13
13
|
'small': (
|
|
14
|
-
container: 32px, icon: 20px
|
|
14
|
+
container: 32px, icon: 20px, radius: var(--radius-small)
|
|
15
15
|
),
|
|
16
16
|
'medium': (
|
|
17
|
-
container: 48px, icon: 32px
|
|
17
|
+
container: 48px, icon: 32px, radius: var(--radius-medium)
|
|
18
18
|
),
|
|
19
19
|
'large': (
|
|
20
|
-
container: 66px, icon: 44px
|
|
20
|
+
container: 66px, icon: 44px, radius: var(--radius-medium)
|
|
21
21
|
),
|
|
22
22
|
'huge': (
|
|
23
|
-
container: 99px, icon: 66px
|
|
23
|
+
container: 99px, icon: 66px, radius: var(--radius-large)
|
|
24
24
|
)
|
|
25
25
|
);
|
|
26
26
|
|
|
@@ -31,7 +31,7 @@ $size: (
|
|
|
31
31
|
font-size: inherit;
|
|
32
32
|
width: 1.5em;
|
|
33
33
|
height: 1.5em;
|
|
34
|
-
|
|
34
|
+
border-radius: var(--radius-small);
|
|
35
35
|
[class^="tri-"],
|
|
36
36
|
[class*=" tri-"] {
|
|
37
37
|
&::before {
|
|
@@ -53,6 +53,7 @@ $size: (
|
|
|
53
53
|
@each $name, $sizeConfig in $size {
|
|
54
54
|
&.is-#{$name} {
|
|
55
55
|
font-size: map.get($sizeConfig, 'icon');
|
|
56
|
+
border-radius: map.get($sizeConfig, 'radius');
|
|
56
57
|
[class^="tri-picto-"],
|
|
57
58
|
[class*=" tri-picto-"] {
|
|
58
59
|
min-height: 1.5em !important;
|
|
@@ -91,7 +92,7 @@ $size: (
|
|
|
91
92
|
|
|
92
93
|
&.is-stretched {
|
|
93
94
|
transform: skewX(-#{$icon-stretching-level});
|
|
94
|
-
border-
|
|
95
|
+
border-radius: 0 9px 0 0;
|
|
95
96
|
background-color: getColor('font');
|
|
96
97
|
|
|
97
98
|
[class^="tri-"],
|
|
@@ -5,8 +5,9 @@ $height-prompt-item: 64px;
|
|
|
5
5
|
border-radius: var(--radius-small);
|
|
6
6
|
overflow: hidden;
|
|
7
7
|
background-color: getColor('background');
|
|
8
|
-
&[aria-disabled] {
|
|
9
|
-
background-color: getColor('
|
|
8
|
+
&[aria-disabled=true] {
|
|
9
|
+
background-color: getColor('disabled-fade') !important;
|
|
10
|
+
border: 1px solid getColor('disabled');
|
|
10
11
|
}
|
|
11
12
|
* {
|
|
12
13
|
margin-bottom: 0px !important;
|
|
@@ -28,9 +29,6 @@ $height-prompt-item: 64px;
|
|
|
28
29
|
padding: 16px !important;
|
|
29
30
|
height: auto;
|
|
30
31
|
resize: none;
|
|
31
|
-
&[disabled] {
|
|
32
|
-
background-color: getColor('background') !important;
|
|
33
|
-
}
|
|
34
32
|
}
|
|
35
33
|
}
|
|
36
34
|
&-files {
|
|
@@ -131,7 +129,22 @@ $height-prompt-item: 64px;
|
|
|
131
129
|
&-tool-submit.streaming {
|
|
132
130
|
padding: 0;
|
|
133
131
|
}
|
|
134
|
-
|
|
132
|
+
&-tool-submit:not(.active):not(:disabled) {
|
|
133
|
+
background-color: getColor('disabled-fade') !important;
|
|
134
|
+
&:hover {
|
|
135
|
+
filter: brightness(1) !important;
|
|
136
|
+
cursor: default !important;
|
|
137
|
+
}
|
|
138
|
+
i {
|
|
139
|
+
background-color: getColor('disabled') !important;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
&-tool-submit:disabled {
|
|
143
|
+
background-color: getColor('disabled') !important;
|
|
144
|
+
i {
|
|
145
|
+
background-color: getColor('disabled-fade') !important;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
135
148
|
}
|
|
136
149
|
|
|
137
150
|
&-stop_streaming {
|
|
@@ -14,25 +14,29 @@ $sticker-height: 35px;
|
|
|
14
14
|
max-height: 36px;
|
|
15
15
|
|
|
16
16
|
.icon {
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
font-size: 20px;
|
|
18
|
+
width: auto;
|
|
19
|
+
height: auto;
|
|
20
|
+
margin-right: $spacing-2;
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
&.is-small {
|
|
22
24
|
.icon {
|
|
23
|
-
margin-right:
|
|
25
|
+
margin-right: $spacing-1;
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
&:not(.is-hat) {
|
|
28
30
|
width: fit-content;
|
|
29
|
-
|
|
30
31
|
@include mobile {
|
|
31
32
|
font-size: 12px;
|
|
32
33
|
padding: $spacing-1 $spacing-2;
|
|
33
34
|
height: auto;
|
|
34
35
|
line-height: 15px;
|
|
35
|
-
|
|
36
|
+
.icon {
|
|
37
|
+
font-size: 16px;
|
|
38
|
+
margin-right: $spacing-1;
|
|
39
|
+
}
|
|
36
40
|
}
|
|
37
41
|
}
|
|
38
42
|
|
|
@@ -59,7 +63,11 @@ $sticker-height: 35px;
|
|
|
59
63
|
padding: $spacing-1 $spacing-2;
|
|
60
64
|
height: auto;
|
|
61
65
|
line-height: 15px;
|
|
62
|
-
|
|
66
|
+
.icon {
|
|
67
|
+
font-size: 16px;
|
|
68
|
+
height: 15px;
|
|
69
|
+
margin-right: $spacing-1;
|
|
70
|
+
}
|
|
63
71
|
}
|
|
64
72
|
|
|
65
73
|
// deprecated
|
|
@@ -3,6 +3,21 @@ $CURSOR_SIZE: 30px;
|
|
|
3
3
|
|
|
4
4
|
.timepicker-circular {
|
|
5
5
|
|
|
6
|
+
&_dot-hour {
|
|
7
|
+
background-color: getColor('neutral');
|
|
8
|
+
&.is-filled {
|
|
9
|
+
background-color: getColor('main');
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&_progress {
|
|
14
|
+
stroke: getColor('main');
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&_progress-container {
|
|
18
|
+
stroke: getColor('main-fade');
|
|
19
|
+
}
|
|
20
|
+
|
|
6
21
|
.circle_container {
|
|
7
22
|
width: $CIRCLE_SIZE;
|
|
8
23
|
height: $CIRCLE_SIZE;
|
|
@@ -18,6 +33,8 @@ $CURSOR_SIZE: 30px;
|
|
|
18
33
|
z-index: 20;
|
|
19
34
|
}
|
|
20
35
|
|
|
36
|
+
|
|
37
|
+
|
|
21
38
|
&-inputs {
|
|
22
39
|
position: absolute;
|
|
23
40
|
display: flex;
|