@trilogy-ds/styles 0.0.5-beta-v4 → 0.0.7-beta-v4
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/_autolayout.scss +14 -2
- package/framework/src/elements/_button.scss +5 -0
- package/framework/src/elements/_switch.scss +6 -1
- package/framework/src/theming/buttons_partial.scss +1 -1
- package/framework/src/utilities/_colors.scss +1 -0
- package/framework/src/utilities/_mixins.scss +9 -1
- package/package.json +1 -1
|
@@ -2,13 +2,19 @@ body:not(.is-tight) {
|
|
|
2
2
|
.accordions:not(:last-child) {
|
|
3
3
|
margin-bottom: 24px;
|
|
4
4
|
}
|
|
5
|
+
.buttons:not(:last-child) {
|
|
6
|
+
margin-bottom: 24px;
|
|
7
|
+
}
|
|
5
8
|
.card:not(:last-child) {
|
|
6
9
|
margin-bottom: 24px;
|
|
7
10
|
}
|
|
11
|
+
.columns:not(:last-child) {
|
|
12
|
+
margin-bottom: 24px;
|
|
13
|
+
}
|
|
8
14
|
.box:not(:last-child) {
|
|
9
15
|
margin-bottom: 24px;
|
|
10
16
|
}
|
|
11
|
-
*:has(
|
|
17
|
+
*:has(+ .divider):not(:last-child) {
|
|
12
18
|
margin-bottom: 24px;
|
|
13
19
|
}
|
|
14
20
|
.divider:not(:last-child) {
|
|
@@ -153,13 +159,19 @@ body:not(.is-tight) {
|
|
|
153
159
|
.accordions:not(:last-child) {
|
|
154
160
|
margin-bottom: 16px;
|
|
155
161
|
}
|
|
162
|
+
.buttons:not(:last-child) {
|
|
163
|
+
margin-bottom: 16px;
|
|
164
|
+
}
|
|
156
165
|
.card:not(:last-child) {
|
|
157
166
|
margin-bottom: 16px;
|
|
158
167
|
}
|
|
168
|
+
.columns:not(:last-child) {
|
|
169
|
+
margin-bottom: 16px;
|
|
170
|
+
}
|
|
159
171
|
.box:not(:last-child) {
|
|
160
172
|
margin-bottom: 16px;
|
|
161
173
|
}
|
|
162
|
-
*:has(
|
|
174
|
+
*:has(+ .divider):not(:last-child) {
|
|
163
175
|
margin-bottom: 16px;
|
|
164
176
|
}
|
|
165
177
|
.divider:not(:last-child) {
|
|
@@ -53,6 +53,11 @@ $button-border-width: 2px !default;
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
+
&.is-ghost:hover {
|
|
57
|
+
background-color: var(--color-main-fade);
|
|
58
|
+
filter: none !important;
|
|
59
|
+
}
|
|
60
|
+
|
|
56
61
|
&[disabled],
|
|
57
62
|
&[aria-disabled=true] {
|
|
58
63
|
background-color: getColorValue('main-fade') !important;
|
|
@@ -10,7 +10,7 @@ $button-colors: (
|
|
|
10
10
|
'accent':['conversion', 'accent', 'background'],
|
|
11
11
|
'primary': ['primary', 'main', 'background'],
|
|
12
12
|
'secondary': ['secondary', 'main-fade', 'main'],
|
|
13
|
-
'ghost': ['ghost', '
|
|
13
|
+
'ghost': ['ghost', 'transparent', 'main']
|
|
14
14
|
) !default;
|
|
15
15
|
|
|
16
16
|
%buttons-states {
|
|
@@ -11,6 +11,7 @@ $suffix: '';
|
|
|
11
11
|
*/
|
|
12
12
|
$colors: (
|
|
13
13
|
'background': [#fff, 'white', 'main'],
|
|
14
|
+
'transparent': ['transparent', 'transparent', 'transparent'],
|
|
14
15
|
'main':[ #3d5d7e, 'main', 'white'],
|
|
15
16
|
'main-fade':[ #eff2f8, 'main-fade', 'white'],
|
|
16
17
|
'accent':[ #da641b,'accent', 'white'],
|
|
@@ -409,7 +409,9 @@
|
|
|
409
409
|
}
|
|
410
410
|
|
|
411
411
|
input {
|
|
412
|
-
|
|
412
|
+
opacity: 0;
|
|
413
|
+
position: absolute;
|
|
414
|
+
outline: none;
|
|
413
415
|
|
|
414
416
|
&:checked ~ label.#{$type}-label {
|
|
415
417
|
border-color: getColor('main');
|
|
@@ -422,6 +424,9 @@
|
|
|
422
424
|
background-color: getColor('main');
|
|
423
425
|
}
|
|
424
426
|
}
|
|
427
|
+
&:focus-visible ~ label.#{$type}-label:before {
|
|
428
|
+
outline: 1px solid;
|
|
429
|
+
}
|
|
425
430
|
|
|
426
431
|
&:disabled,
|
|
427
432
|
&:disabled:checked {
|
|
@@ -495,6 +500,9 @@
|
|
|
495
500
|
@include disabledRules;
|
|
496
501
|
}
|
|
497
502
|
}
|
|
503
|
+
&:has(input:focus-visible) label.#{$type}-label{
|
|
504
|
+
outline: 1px solid;
|
|
505
|
+
}
|
|
498
506
|
|
|
499
507
|
&:first-child {
|
|
500
508
|
margin-left: 0;
|