@trilogy-ds/styles 4.19.0 → 4.20.0-beta.2
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 +26 -3
- package/framework/src/components/_accordion.scss +3 -3
- package/framework/src/components/_autocomplete.scss +1 -1
- package/framework/src/components/_badge.scss +2 -2
- package/framework/src/components/_box.scss +41 -25
- package/framework/src/components/_button.scss +1 -1
- package/framework/src/components/_calendar.scss +4 -4
- package/framework/src/components/_card.scss +20 -2
- package/framework/src/components/_checkbox.scss +1 -1
- package/framework/src/components/_chips.scss +1 -1
- package/framework/src/components/_container.scss +15 -0
- package/framework/src/components/_countdown.scss +2 -2
- package/framework/src/components/_divider.scss +1 -0
- package/framework/src/components/_dropdown.scss +2 -3
- package/framework/src/components/_fab.scss +1 -1
- package/framework/src/components/_icon.scss +6 -6
- package/framework/src/components/_modal.scss +2 -2
- package/framework/src/components/_otp.scss +1 -1
- package/framework/src/components/_pagination.scss +1 -1
- package/framework/src/components/_popover.scss +1 -1
- package/framework/src/components/_product-tour.scss +2 -2
- package/framework/src/components/_prompt.scss +5 -5
- package/framework/src/components/_radio.scss +1 -1
- package/framework/src/components/_range.scss +1 -2
- package/framework/src/components/_segmented-control.scss +2 -2
- package/framework/src/components/_select.scss +1 -1
- package/framework/src/components/_stepper.scss +2 -2
- package/framework/src/components/_sticker.scss +5 -5
- package/framework/src/components/_switch.scss +2 -2
- package/framework/src/components/_table.scss +1 -1
- package/framework/src/components/_tag.scss +1 -1
- package/framework/src/components/_timeline.scss +4 -4
- package/framework/src/components/_timepicker.scss +2 -2
- package/framework/src/components/alert/_alert.scss +1 -1
- package/framework/src/components/alert/_toaster.scss +1 -1
- package/framework/src/components/input/_form.scss +7 -7
- package/framework/src/components/input/_input-gauge.scss +2 -2
- package/framework/src/components/input/_input-icons.scss +2 -2
- package/framework/src/grid/_columns.scss +1 -1
- package/framework/src/layout/_section.scss +3 -3
- package/framework/src/theming/common_partials.scss +14 -0
- package/framework/src/theming/links_partial.scss +1 -1
- package/framework/src/utilities/_controls.scss +2 -2
- package/framework/src/utilities/_initial-variables.scss +2 -2
- package/framework/src/utilities/mixins/_delete.scss +1 -1
- package/framework/src/utilities/mixins/_mixins.scss +1 -1
- package/package.json +1 -1
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
top: 50%;
|
|
54
54
|
transform: translateY(-50%);
|
|
55
55
|
right: 0;
|
|
56
|
-
border-radius:
|
|
56
|
+
border-radius: var(--radius-full);
|
|
57
57
|
width: 44px;
|
|
58
58
|
height: 22px;
|
|
59
59
|
background-color: getColor('neutral');
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
top: 50%;
|
|
67
67
|
transform: translateY(-50%);
|
|
68
68
|
right: calc(44px - 18px - 2px);
|
|
69
|
-
border-radius:
|
|
69
|
+
border-radius: var(--radius-full);
|
|
70
70
|
width: 18px;
|
|
71
71
|
height: 18px;
|
|
72
72
|
background-color: getColor('background');
|
|
@@ -51,7 +51,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
|
|
|
51
51
|
left: 3rem;
|
|
52
52
|
bottom: 8px;
|
|
53
53
|
height: auto;
|
|
54
|
-
border-radius:
|
|
54
|
+
border-radius: var(--radius-full);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.timeline-marker.is-icon {
|
|
@@ -80,7 +80,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
|
|
|
80
80
|
.timeline-marker {
|
|
81
81
|
position: absolute;
|
|
82
82
|
background: $timeline-marker-color;
|
|
83
|
-
border-radius:
|
|
83
|
+
border-radius: var(--radius-full);
|
|
84
84
|
content: '';
|
|
85
85
|
display: block;
|
|
86
86
|
height: $timeline-marker-size;
|
|
@@ -100,7 +100,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
background: $timeline-marker-color;
|
|
103
|
-
border-radius:
|
|
103
|
+
border-radius: var(--radius-full);
|
|
104
104
|
display: block;
|
|
105
105
|
overflow: hidden;
|
|
106
106
|
}
|
|
@@ -115,7 +115,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
|
|
|
115
115
|
$timeline-marker-border-size * 0.5);
|
|
116
116
|
line-height: size(0.75rem);
|
|
117
117
|
padding: math.div($timeline-icon-size, 3);
|
|
118
|
-
border-radius:
|
|
118
|
+
border-radius: var(--radius-full);
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
&.is-outlined {
|
|
@@ -8,7 +8,7 @@ $CURSOR_SIZE: 30px;
|
|
|
8
8
|
left: 0;
|
|
9
9
|
right: 0;
|
|
10
10
|
background-color: getColor('background');
|
|
11
|
-
border-radius:
|
|
11
|
+
border-radius: var(--radius-md);
|
|
12
12
|
padding: 16px;
|
|
13
13
|
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
|
14
14
|
z-index: 1000;
|
|
@@ -52,7 +52,7 @@ $CURSOR_SIZE: 30px;
|
|
|
52
52
|
|
|
53
53
|
&-item {
|
|
54
54
|
padding: 12px;
|
|
55
|
-
border-radius:
|
|
55
|
+
border-radius: var(--radius-sm);
|
|
56
56
|
text-align: center;
|
|
57
57
|
cursor: pointer;
|
|
58
58
|
user-select: none;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
$file-radius:
|
|
1
|
+
$file-radius: var(--radius-sm);
|
|
2
2
|
$file-name-max-width: 16em;
|
|
3
3
|
$field-margin: 20px;
|
|
4
4
|
$help-size: $size-small;
|
|
@@ -255,8 +255,8 @@ $label-weight: $weight-bold;
|
|
|
255
255
|
|
|
256
256
|
.icon {
|
|
257
257
|
left: 0;
|
|
258
|
-
border-top-left-radius:
|
|
259
|
-
border-bottom-left-radius:
|
|
258
|
+
border-top-left-radius: var(--radius-sm);
|
|
259
|
+
border-bottom-left-radius: var(--radius-sm);
|
|
260
260
|
padding: 0 24px;
|
|
261
261
|
}
|
|
262
262
|
|
|
@@ -292,8 +292,8 @@ $label-weight: $weight-bold;
|
|
|
292
292
|
|
|
293
293
|
.icon {
|
|
294
294
|
right: 0;
|
|
295
|
-
border-top-right-radius:
|
|
296
|
-
border-bottom-right-radius:
|
|
295
|
+
border-top-right-radius: var(--radius-sm);
|
|
296
|
+
border-bottom-right-radius: var(--radius-sm);
|
|
297
297
|
padding: 0 24px;
|
|
298
298
|
}
|
|
299
299
|
}
|
|
@@ -407,8 +407,8 @@ $label-weight: $weight-bold;
|
|
|
407
407
|
|
|
408
408
|
.is-searching {
|
|
409
409
|
background-color: transparent;
|
|
410
|
-
border-top-right-radius:
|
|
411
|
-
border-bottom-right-radius:
|
|
410
|
+
border-top-right-radius: var(--radius-sm);
|
|
411
|
+
border-bottom-right-radius: var(--radius-sm);
|
|
412
412
|
height: 100%;
|
|
413
413
|
position: absolute;
|
|
414
414
|
right: 0;
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
.security-gauge {
|
|
6
6
|
height: 4px;
|
|
7
7
|
background: getColor('disabled');
|
|
8
|
-
border-radius: var(--radius-
|
|
8
|
+
border-radius: var(--radius-full);
|
|
9
9
|
margin: 8px 0;
|
|
10
10
|
|
|
11
11
|
.gauge {
|
|
12
12
|
height: 100%;
|
|
13
|
-
border-radius: var(--radius-
|
|
13
|
+
border-radius: var(--radius-full);
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
button[data-show-pwd], button[data-show-calendar] {
|
|
45
45
|
background-color: transparent;
|
|
46
46
|
border:none;
|
|
47
|
-
border-top-right-radius:
|
|
48
|
-
border-bottom-right-radius:
|
|
47
|
+
border-top-right-radius: var(--radius-sm) ;
|
|
48
|
+
border-bottom-right-radius: var(--radius-sm) ;
|
|
49
49
|
&:focus-visible{
|
|
50
50
|
outline: var(--border-active);
|
|
51
51
|
outline-offset: -2px;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.section {
|
|
2
|
-
padding: $spacing-
|
|
2
|
+
padding: $spacing-4 $spacing-6;
|
|
3
3
|
|
|
4
4
|
@include desktop {
|
|
5
|
-
padding: $spacing-
|
|
5
|
+
padding: $spacing-5 $spacing-6;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
&.has-background {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
&.has-overlap > .container {
|
|
14
14
|
margin-top: -$spacing-6 - $spacing-4;
|
|
15
|
-
|
|
15
|
+
|
|
16
16
|
@include desktop {
|
|
17
17
|
margin-top: -$spacing-8 - $spacing-4;
|
|
18
18
|
}
|
|
@@ -5,6 +5,20 @@
|
|
|
5
5
|
--radius-medium: 8px;
|
|
6
6
|
--radius-small: 4px;
|
|
7
7
|
--radius-large: 16px;
|
|
8
|
+
--radius-xs: 4px;
|
|
9
|
+
--radius-sm: 8px;
|
|
10
|
+
--radius-md: 16px;
|
|
11
|
+
--radius-lg: 24px;
|
|
12
|
+
--radius-full: 9999px;
|
|
8
13
|
--border: 1px solid #{getColor('stroke')};
|
|
9
14
|
--border-active: 2px solid #{getColor('main')};
|
|
15
|
+
--spacing-none: 0;
|
|
16
|
+
--spacing-xxs: 4px;
|
|
17
|
+
--spacing-xs: 8px;
|
|
18
|
+
--spacing-sm: 12px;
|
|
19
|
+
--spacing-md: 16px;
|
|
20
|
+
--spacing-lg: 24px;
|
|
21
|
+
--spacing-xl: 32px;
|
|
22
|
+
--spacing-xxl: 48px;
|
|
23
|
+
--spacing-xxxl: 64px;
|
|
10
24
|
}
|
|
@@ -8,7 +8,7 @@ $control-padding-horizontal: 16px;
|
|
|
8
8
|
-webkit-appearance: none;
|
|
9
9
|
align-items: center;
|
|
10
10
|
border: $control-border-width solid transparent;
|
|
11
|
-
border-radius: var(--radius-
|
|
11
|
+
border-radius: var(--radius-sm);
|
|
12
12
|
display: inline-flex;
|
|
13
13
|
font-size: $size-normal;
|
|
14
14
|
height: 46px;
|
|
@@ -43,7 +43,7 @@ $control-padding-horizontal: 16px;
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
@mixin control-small {
|
|
46
|
-
border-radius: var(--radius-
|
|
46
|
+
border-radius: var(--radius-sm);
|
|
47
47
|
font-size: $size-small;
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
@import './variables';
|
|
2
2
|
|
|
3
|
-
$hoverSelector: "&:hover:not([disabled]):not([aria-disabled=true])";
|
|
3
|
+
$hoverSelector: "&:hover:not([disabled]):not([aria-disabled=true]):not(.inactive)";
|
|
4
4
|
|
|
5
5
|
// Radius
|
|
6
6
|
$radius-small: 4px !default;
|
|
7
7
|
$radius: 8px !default;
|
|
8
8
|
|
|
9
9
|
// Arrow size
|
|
10
|
-
$arrow-size: 15px;
|
|
10
|
+
$arrow-size: 15px;
|