@trilogy-ds/styles 4.7.2-beta-1 → 4.7.4
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 +1 -0
- package/framework/src/base/_reset.scss +2 -1
- package/framework/src/components/_box.scss +1 -1
- package/framework/src/components/_button.scss +3 -3
- package/framework/src/components/_card.scss +14 -0
- package/framework/src/components/_divider.scss +1 -1
- package/framework/src/components/_sticker.scss +1 -1
- package/framework/src/components/_switch.scss +7 -7
- package/framework/src/utilities/mixins/_mixins.scss +11 -9
- package/package.json +1 -1
|
@@ -61,12 +61,12 @@ $button-border-width: 2px !default;
|
|
|
61
61
|
&[disabled],
|
|
62
62
|
&[aria-disabled=true] {
|
|
63
63
|
border-color: transparent !important;
|
|
64
|
-
background-color:
|
|
65
|
-
color:
|
|
64
|
+
background-color: getColor('main-fade') !important;
|
|
65
|
+
color: getColor('disabled') !important
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
&.is-loading {
|
|
69
|
-
background-color:
|
|
69
|
+
background-color: getColor('neutral');
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
}
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
$basis-values: (
|
|
2
|
+
'is-1': 70%,
|
|
3
|
+
'is-2': 60%,
|
|
4
|
+
'is-3': 50%,
|
|
5
|
+
'is-4': 40%
|
|
6
|
+
);
|
|
7
|
+
|
|
8
|
+
|
|
1
9
|
.card {
|
|
2
10
|
max-width: 100%;
|
|
3
11
|
display: flex;
|
|
@@ -103,6 +111,12 @@
|
|
|
103
111
|
}
|
|
104
112
|
}
|
|
105
113
|
|
|
114
|
+
@for $i from 1 through 4 {
|
|
115
|
+
&:has(.card-content + .card-image.is-#{$i}) .card-content {
|
|
116
|
+
flex-basis: map-get($basis-values, 'is-#{$i}');
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
106
120
|
.card-image {
|
|
107
121
|
max-width: 100%;
|
|
108
122
|
|
|
@@ -26,14 +26,14 @@
|
|
|
26
26
|
|
|
27
27
|
&:disabled ~ label {
|
|
28
28
|
&:after {
|
|
29
|
-
$colorSvg: encodecolor(
|
|
29
|
+
$colorSvg: encodecolor(getColor('disabled'));
|
|
30
30
|
content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
&:disabled:checked ~ label {
|
|
35
35
|
&:after {
|
|
36
|
-
$colorSvg: encodecolor(
|
|
36
|
+
$colorSvg: encodecolor(getColor('disabled'));
|
|
37
37
|
content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
|
|
38
38
|
}
|
|
39
39
|
}
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
&:after {
|
|
63
|
-
$colorSvg: encodecolor(
|
|
63
|
+
$colorSvg: encodecolor(getColor('neutral'));
|
|
64
64
|
content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
|
|
65
65
|
position: absolute;
|
|
66
66
|
top: 50%;
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
border-radius: 9999px;
|
|
70
70
|
width: 18px;
|
|
71
71
|
height: 18px;
|
|
72
|
-
background-color:
|
|
72
|
+
background-color: getColor('background');
|
|
73
73
|
transition: 0.3s;
|
|
74
74
|
}
|
|
75
75
|
}
|
|
@@ -79,14 +79,14 @@
|
|
|
79
79
|
font-weight: bold;
|
|
80
80
|
|
|
81
81
|
&:before {
|
|
82
|
-
background-color:
|
|
82
|
+
background-color: getColor('main');
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
&:after {
|
|
86
86
|
right: 2px;
|
|
87
|
-
$colorSvg: encodecolor(
|
|
87
|
+
$colorSvg: encodecolor(getColor('main'));
|
|
88
88
|
content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
|
|
89
|
-
background-color:
|
|
89
|
+
background-color: getColor('background');
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
}
|
|
@@ -110,6 +110,11 @@
|
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
|
+
.divider {
|
|
114
|
+
&:not(.is-marginless) {
|
|
115
|
+
margin: $spacing-3 0;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
113
118
|
}
|
|
114
119
|
|
|
115
120
|
// SIMPLE WITH LABEL ONLY
|
|
@@ -258,7 +263,7 @@
|
|
|
258
263
|
|
|
259
264
|
input {
|
|
260
265
|
&:checked:not(:disabled) ~ label.#{$type}-label {
|
|
261
|
-
padding:
|
|
266
|
+
padding: ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-8 - 1px);
|
|
262
267
|
}
|
|
263
268
|
|
|
264
269
|
}
|
|
@@ -269,23 +274,20 @@
|
|
|
269
274
|
align-items: center;
|
|
270
275
|
justify-content: flex-start;
|
|
271
276
|
text-align: left;
|
|
272
|
-
padding:
|
|
277
|
+
padding: $spacing-4 $spacing-4 $spacing-4 $spacing-8;
|
|
278
|
+
|
|
273
279
|
|
|
274
280
|
&:before,
|
|
275
281
|
&:after {
|
|
276
282
|
top: 50% !important;
|
|
277
283
|
transform: translateY(-50%);
|
|
278
284
|
}
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
margin-left: 34px;
|
|
285
|
+
> .icon {
|
|
286
|
+
margin-right: $spacing-4;
|
|
282
287
|
}
|
|
288
|
+
|
|
283
289
|
}
|
|
284
290
|
|
|
285
|
-
.icon {
|
|
286
|
-
margin-left: 34px;
|
|
287
|
-
margin-right: 16px;
|
|
288
|
-
}
|
|
289
291
|
}
|
|
290
292
|
}
|
|
291
293
|
}
|