@trilogy-ds/styles 4.16.1-beta-1 → 4.16.1-icons
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/_flex-box.scss +1 -1
- package/framework/src/components/_icon.scss +9 -8
- package/framework/src/components/_sticker.scss +14 -6
- package/package.json +1 -1
|
@@ -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-"],
|
|
@@ -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
|