@design-factory/styles 21.0.1 → 21.0.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/bundle.css +1 -1
- package/package.json +2 -2
- package/scss/bootstrap/_variables.scss +2 -5
- package/scss/bundle.scss +2 -0
- package/scss/components/accordion/_accordion.scss +17 -1
- package/scss/components/badge/_badge.scss +19 -24
- package/scss/components/breadcrumbs/_breadcrumbs.scss +1 -1
- package/scss/components/button/_button.scss +8 -0
- package/scss/components/card/_card.scss +2 -2
- package/scss/components/carousel/_carousel.scss +1 -1
- package/scss/components/fieldset/_fieldset.variables.scss +1 -0
- package/scss/components/form/_form.scss +0 -1
- package/scss/components/inputs/_inputs.scss +16 -0
- package/scss/components/navbar/_navbar.scss +0 -1
- package/scss/components/radio/_radio.scss +0 -3
- package/scss/components/select/_select.scss +0 -5
- package/scss/components/select/_select.variables.scss +3 -0
- package/scss/components/table/_advancedtables.scss +1 -1
package/package.json
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
"name": "@design-factory/styles",
|
|
3
3
|
"description": "Amadeus design system styles",
|
|
4
4
|
"license": "BSD-3-Clause",
|
|
5
|
-
"version": "21.0.
|
|
5
|
+
"version": "21.0.2",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"peerDependencies": {
|
|
8
8
|
"bootstrap": "5.3.8",
|
|
9
9
|
"@agnos-ui/core-bootstrap": "~0.10.0",
|
|
10
|
-
"@design-factory/tokens": "21.0.
|
|
10
|
+
"@design-factory/tokens": "21.0.2",
|
|
11
11
|
"ag-grid-community": "^35.0.0",
|
|
12
12
|
"@ng-select/ng-select": "^21.0.0"
|
|
13
13
|
},
|
|
@@ -865,15 +865,12 @@ $border-radius-pill: var(--df-borderRadius-main-rounded) !default;
|
|
|
865
865
|
// scss-docs-end box-shadow-variables
|
|
866
866
|
|
|
867
867
|
$component-active-color: $white !default;
|
|
868
|
-
$component-active-bg: var(--df-primary-
|
|
868
|
+
$component-active-bg: var(--df-color-primary-main-default-background) !default; // $primary !default;
|
|
869
869
|
|
|
870
870
|
// scss-docs-start focus-ring-variables
|
|
871
871
|
$focus-ring-width: 0.25rem !default;
|
|
872
872
|
$focus-ring-opacity: 0.25 !default;
|
|
873
|
-
$focus-ring-color:
|
|
874
|
-
var(--df-primary-500-rgb),
|
|
875
|
-
$focus-ring-opacity
|
|
876
|
-
) !default; // default rgba($component-active-bg, $focus-ring-opacity)
|
|
873
|
+
$focus-ring-color: rgb(from var(--df-color-primary-main-default-border) r g b / var(--df-focus-ring-opacity)) !default;
|
|
877
874
|
$focus-ring-blur: 0 !default;
|
|
878
875
|
$focus-ring-box-shadow: 0 0 var(--df-box-shadow-blur, $focus-ring-blur) var(--df-box-shadow-width, $focus-ring-width)
|
|
879
876
|
var(--df-box-shadow-color, $focus-ring-color) !default;
|
package/scss/bundle.scss
CHANGED
|
@@ -32,12 +32,20 @@
|
|
|
32
32
|
&::after {
|
|
33
33
|
background-color: var(--df-color-primary-alt-hovered-foreground);
|
|
34
34
|
}
|
|
35
|
+
|
|
36
|
+
.df-subtitle {
|
|
37
|
+
color: var(--df-color-neutral-alt-hovered-foreground);
|
|
38
|
+
}
|
|
35
39
|
}
|
|
36
40
|
|
|
37
41
|
&:active {
|
|
38
42
|
&::after {
|
|
39
43
|
background-color: var(--df-color-primary-alt-pressed-foreground);
|
|
40
44
|
}
|
|
45
|
+
|
|
46
|
+
.df-subtitle {
|
|
47
|
+
color: var(--df-color-neutral-alt-pressed-foreground);
|
|
48
|
+
}
|
|
41
49
|
}
|
|
42
50
|
}
|
|
43
51
|
|
|
@@ -65,10 +73,12 @@
|
|
|
65
73
|
}
|
|
66
74
|
|
|
67
75
|
&:focus {
|
|
76
|
+
outline: none;
|
|
68
77
|
box-shadow: none;
|
|
69
78
|
}
|
|
70
79
|
|
|
71
80
|
&:focus-visible {
|
|
81
|
+
outline: none;
|
|
72
82
|
box-shadow: var(--df-accordion-btn-focus-box-shadow);
|
|
73
83
|
}
|
|
74
84
|
}
|
|
@@ -128,9 +138,15 @@
|
|
|
128
138
|
// Accordion with a separator
|
|
129
139
|
&.df-accordion-withsep {
|
|
130
140
|
.accordion-button {
|
|
131
|
-
&:not(.collapsed)
|
|
141
|
+
&:not(.collapsed) {
|
|
132
142
|
box-shadow: inset 0 calc(-1 * var(--df-accordion-border-width)) 0 var(--df-accordion-border-color);
|
|
133
143
|
}
|
|
144
|
+
|
|
145
|
+
&:focus-visible {
|
|
146
|
+
box-shadow:
|
|
147
|
+
var(--df-accordion-btn-focus-box-shadow),
|
|
148
|
+
inset 0 calc(-1 * var(--df-accordion-border-width)) 0 var(--df-accordion-border-color);
|
|
149
|
+
}
|
|
134
150
|
}
|
|
135
151
|
}
|
|
136
152
|
|
|
@@ -61,23 +61,16 @@
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
$colors: (
|
|
64
|
-
'primary': 'primary',
|
|
65
|
-
'secondary': 'secondary',
|
|
66
64
|
'success': 'success',
|
|
67
65
|
'info': 'info',
|
|
68
66
|
'warning': 'warning',
|
|
69
67
|
'danger': 'danger',
|
|
70
68
|
'light': 'neutral',
|
|
71
69
|
'neutral': 'neutral',
|
|
72
|
-
'dark': 'dark',
|
|
73
70
|
'tip': 'tip',
|
|
74
71
|
'chromatic1': 'chromatic1',
|
|
75
72
|
'chromatic2': 'chromatic2',
|
|
76
|
-
'
|
|
77
|
-
'white': 'neutral-alt',
|
|
78
|
-
'body': 'body',
|
|
79
|
-
'alt-body': 'alt-body',
|
|
80
|
-
'dark-primary': 'dark-primary'
|
|
73
|
+
'white': 'neutral-alt'
|
|
81
74
|
);
|
|
82
75
|
|
|
83
76
|
@each $color, $mappedColor in $colors {
|
|
@@ -142,23 +135,25 @@
|
|
|
142
135
|
}
|
|
143
136
|
}
|
|
144
137
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
138
|
+
@if ($color != 'white') {
|
|
139
|
+
&.bg-#{$color}-soft {
|
|
140
|
+
--df-badge-color: var(--df-badge-soft-color-#{$mappedColor}-default-foreground);
|
|
141
|
+
--df-badge-background-color: var(--df-badge-soft-color-#{$mappedColor}-default-background);
|
|
142
|
+
--df-badge-border-color: var(--df-badge-soft-color-#{$mappedColor}-default-border);
|
|
143
|
+
|
|
144
|
+
&[role='button'],
|
|
145
|
+
:is([role='button'], button) {
|
|
146
|
+
&:hover {
|
|
147
|
+
--df-badge-color: var(--df-badge-soft-color-#{$mappedColor}-hovered-foreground);
|
|
148
|
+
--df-badge-background-color: var(--df-badge-soft-color-#{$mappedColor}-hovered-background);
|
|
149
|
+
--df-badge-border-color: var(--df-badge-soft-color-#{$mappedColor}-hovered-border);
|
|
150
|
+
}
|
|
157
151
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
152
|
+
&:active {
|
|
153
|
+
--df-badge-color: var(--df-badge-soft-color-#{$mappedColor}-pressed-foreground);
|
|
154
|
+
--df-badge-background-color: var(--df-badge-soft-color-#{$mappedColor}-pressed-background);
|
|
155
|
+
--df-badge-border-color: var(--df-badge-soft-color-#{$mappedColor}-pressed-border);
|
|
156
|
+
}
|
|
162
157
|
}
|
|
163
158
|
}
|
|
164
159
|
}
|
|
@@ -131,6 +131,14 @@
|
|
|
131
131
|
@include btn-mixins.style-btn-text($style, $status);
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
|
+
@each $status in ('primary', 'danger', neutral) {
|
|
135
|
+
.btn-outline-#{$status},
|
|
136
|
+
.df-btn-outline-#{$status}-mirror {
|
|
137
|
+
&.df-btn-transparent {
|
|
138
|
+
--df-btn-bg: transparent;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
134
142
|
|
|
135
143
|
//Button Group
|
|
136
144
|
.btn-check {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
&.btn-outline-primary {
|
|
33
33
|
display: block;
|
|
34
34
|
text-align: start;
|
|
35
|
-
color: var(--df-
|
|
35
|
+
color: var(--df-color-neutral-alt-default-foreground);
|
|
36
36
|
border: none;
|
|
37
37
|
border-radius: var(--df-borderRadius-main-small);
|
|
38
38
|
height: inherit;
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
--df-box-shadow-color: var(--df-color-focus-main-border);
|
|
42
42
|
|
|
43
43
|
&:not(:hover):not(:active) {
|
|
44
|
-
color: var(--df-
|
|
44
|
+
color: var(--df-color-neutral-alt-default-foreground);
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
|
|
@@ -17,6 +17,16 @@
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
.df-readonly {
|
|
21
|
+
background-color: var(--df-color-disabled-main-background);
|
|
22
|
+
color: var(--df-color-subtext-foreground);
|
|
23
|
+
|
|
24
|
+
.input-group-text {
|
|
25
|
+
background-color: var(--df-color-disabled-main-background);
|
|
26
|
+
color: var(--df-color-subtext-foreground);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
20
30
|
%input-group-common {
|
|
21
31
|
@include transition($input-transition); // default bootstrap input has this property
|
|
22
32
|
|
|
@@ -214,6 +224,12 @@ input[type='search']::-webkit-search-decoration {
|
|
|
214
224
|
.input-group-prepend:has(~ .df-input-withicon:disabled) {
|
|
215
225
|
@extend .df-disabled;
|
|
216
226
|
}
|
|
227
|
+
.df-input-withicon[readonly] ~ .input-group-append {
|
|
228
|
+
@extend .df-readonly;
|
|
229
|
+
}
|
|
230
|
+
.input-group-prepend:has(~ .df-input-withicon[readonly]) {
|
|
231
|
+
@extend .df-readonly;
|
|
232
|
+
}
|
|
217
233
|
}
|
|
218
234
|
|
|
219
235
|
.input-group.df-focused {
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
@use '../../common.variables.scss' as df;
|
|
2
2
|
|
|
3
3
|
fieldset[role='radiogroup'] > legend {
|
|
4
|
-
font-weight: var(--df-typo-weight-regular);
|
|
5
|
-
font-size: var(--df-typoe-size-default);
|
|
6
4
|
display: block;
|
|
7
|
-
margin-bottom: var(--df-spacing-3);
|
|
8
5
|
}
|
|
9
6
|
|
|
10
7
|
.form-check-input[type='radio'] {
|
|
@@ -35,11 +35,6 @@ html:root[data-df-theme='dark'] {
|
|
|
35
35
|
--df-form-select-bg-img: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Pro%20v6.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202026%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%230c66e1%22%20d%3D%22M244.7%20116.7c6.2-6.2%2016.4-6.2%2022.6%200l192%20192c6.2%206.2%206.2%2016.4%200%2022.6s-16.4%206.2-22.6%200L256%20150.6%2075.3%20331.3c-6.2%206.2-16.4%206.2-22.6%200s-6.2-16.4%200-22.6l192-192z%22%2F%3E%3C%2Fsvg%3E');
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
&:focus {
|
|
39
|
-
box-shadow: none;
|
|
40
|
-
border-color: unset;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
38
|
&:focus-visible {
|
|
44
39
|
box-shadow: df.$df-focus-box-shadow;
|
|
45
40
|
}
|
|
@@ -14,3 +14,6 @@ $form-select-indicator-padding: calc(#{$form-select-padding-x} * 3) !default; //
|
|
|
14
14
|
$form-select-feedback-icon-padding-end: calc(
|
|
15
15
|
#{$form-select-padding-x} * 2.5 + #{$form-select-indicator-padding}
|
|
16
16
|
) !default;
|
|
17
|
+
|
|
18
|
+
$form-select-focus-box-shadow: none !default;
|
|
19
|
+
$form-select-focus-border-color: unset !default;
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
|
|
118
118
|
//Override ag-grid hover + selected to use hover background-color
|
|
119
119
|
.ag-row-hover.ag-row-selected::before {
|
|
120
|
-
background-image: linear-gradient(var(
|
|
120
|
+
background-image: linear-gradient(var(--ag-row-hover-color), var(--ag-row-hover-color));
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.ag-icon.ag-icon-desc {
|