@design-factory/styles 21.0.0-next.1 → 21.0.0

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.
Files changed (11) hide show
  1. package/README.md +30 -1
  2. package/bundle.css +2 -2
  3. package/package.json +11 -4
  4. package/scss/components/card/_card.scss +4 -0
  5. package/scss/components/drawer/_drawer.scss +44 -10
  6. package/scss/components/dropdown/_dropdown.scss +1 -1
  7. package/scss/components/modal/_modal.scss +5 -0
  8. package/scss/components/select/_select.namespace.scss +5 -2
  9. package/scss/components/select/_select.scss +25 -7
  10. package/scss/components/select/_select.variables.scss +3 -5
  11. package/scss/components/sidenav/_sidenav.scss +8 -0
package/package.json CHANGED
@@ -2,13 +2,14 @@
2
2
  "name": "@design-factory/styles",
3
3
  "description": "Amadeus design system styles",
4
4
  "license": "BSD-3-Clause",
5
- "version": "21.0.0-next.1",
5
+ "version": "21.0.0",
6
6
  "type": "module",
7
7
  "peerDependencies": {
8
8
  "bootstrap": "5.3.8",
9
- "@agnos-ui/core-bootstrap": "~0.10.0-next.4",
10
- "@design-factory/tokens": "21.0.0-next.1",
11
- "ag-grid-community": "^35.0.0"
9
+ "@agnos-ui/core-bootstrap": "~0.10.0",
10
+ "@design-factory/tokens": "21.0.0",
11
+ "ag-grid-community": "^35.0.0",
12
+ "@ng-select/ng-select": "^21.0.0"
12
13
  },
13
14
  "peerDependenciesMeta": {
14
15
  "bootstrap": {
@@ -19,6 +20,12 @@
19
20
  },
20
21
  "ag-grid-community": {
21
22
  "optional": true
23
+ },
24
+ "@design-factory/tokens": {
25
+ "optional": true
26
+ },
27
+ "@ng-select/ng-select": {
28
+ "optional": true
22
29
  }
23
30
  },
24
31
  "exports": {
package/scss/components/card/_card.scss CHANGED
@@ -5,6 +5,10 @@
5
5
  .card {
6
6
  box-shadow: var(--df-card-box-shadow);
7
7
 
8
+ .btn {
9
+ --df-inner-box-shadow-color: var(--df-color-inert-neutral-main-background);
10
+ }
11
+
8
12
  .card-title {
9
13
  font-weight: var(--df-typo-weight-medium);
10
14
  }
package/scss/components/drawer/_drawer.scss CHANGED
@@ -4,6 +4,8 @@
4
4
  --df-drawer-min-size: 0;
5
5
  --df-drawer-max-size: 100vw;
6
6
 
7
+ display: flex;
8
+ flex-direction: column;
7
9
  width: 100%;
8
10
  min-width: 0;
9
11
  max-width: none;
@@ -11,6 +13,22 @@
11
13
  min-height: var(--df-drawer-min-size);
12
14
  max-height: var(--df-drawer-max-size);
13
15
 
16
+ .df-drawer-header {
17
+ padding: var(--df-spacing-6) var(--df-spacing-4) var(--df-spacing-5) var(--df-spacing-6);
18
+ }
19
+
20
+ .df-drawer-body {
21
+ padding: var(--df-spacing-6) var(--df-spacing-6) 0;
22
+ }
23
+
24
+ .df-drawer-footer {
25
+ display: flex;
26
+ justify-content: end;
27
+ padding: var(--df-spacing-6);
28
+ margin-top: auto;
29
+ flex-wrap: wrap;
30
+ }
31
+
14
32
  &.inline-start,
15
33
  &.inline-end {
16
34
  width: var(--df-drawer-size);
@@ -28,10 +46,9 @@
28
46
 
29
47
  background-color: var(--df-color-inert-neutral-main-background);
30
48
  z-index: var(--df-drawer-z-index);
49
+ position: fixed;
31
50
 
32
- transition:
33
- transform 0.25s ease,
34
- visibility 0.25s ease;
51
+ @include transition(0.25s ease);
35
52
 
36
53
  &:not(.show) {
37
54
  display: block;
@@ -41,8 +58,10 @@
41
58
  inset-block: 0;
42
59
  inset-inline-start: 0;
43
60
 
44
- // transform: translateX(-75%);
45
- // &.show { transform: translateX(0); }
61
+ transform: translateX(-100%);
62
+ &.show {
63
+ transform: translateX(0);
64
+ }
46
65
  }
47
66
 
48
67
  &.inline-end {
@@ -54,7 +73,14 @@
54
73
  transform: translateX(0);
55
74
  }
56
75
 
57
- .au-splitter {
76
+ &.inline-start {
77
+ transform: translateX(0);
78
+ &.show {
79
+ transform: translateX(0);
80
+ }
81
+ }
82
+
83
+ .df-drawer-splitter {
58
84
  inset-inline-end: auto;
59
85
  }
60
86
  }
@@ -69,7 +95,7 @@
69
95
  transform: translateY(0);
70
96
  }
71
97
 
72
- .au-splitter {
98
+ .df-drawer-splitter {
73
99
  inset-block-start: auto;
74
100
  }
75
101
  }
@@ -85,18 +111,26 @@
85
111
  }
86
112
 
87
113
  // Vertical splitter (default for inline drawers)
88
- .splitter {
114
+ .df-drawer-splitter {
115
+ display: flex;
89
116
  position: absolute;
90
117
  inset-block: 0;
91
118
  inset-inline-end: -4px; // half outside for visual separation
92
119
  width: 8px; // larger hit area
93
120
  cursor: ew-resize;
94
121
  background: transparent;
122
+
123
+ .df-drawer-splitter-handle {
124
+ --df-btn-bg: transparent;
125
+ flex-shrink: 0;
126
+ border: none;
127
+ cursor: ew-resize;
128
+ }
95
129
  }
96
130
 
97
131
  // Horizontal splitter for block drawers (height resize)
98
- &.block-start .splitter,
99
- &.block-end .splitter {
132
+ &.block-start .df-drawer-splitter,
133
+ &.block-end .df-drawer-splitter {
100
134
  inset-inline: 0;
101
135
  width: auto;
102
136
  height: 8px;
package/scss/components/dropdown/_dropdown.scss CHANGED
@@ -29,7 +29,7 @@
29
29
  margin-left: 0;
30
30
  margin-right: 0;
31
31
  line-height: 1rem;
32
- font-weight: var(--df-typo-weight-medium);
32
+ font-weight: 300;
33
33
  }
34
34
 
35
35
  &.btn-sm {
package/scss/components/modal/_modal.scss CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  .modal-content {
4
4
  box-shadow: #{df.$df-box-shadow};
5
+
6
+ .btn {
7
+ --df-inner-box-shadow-color: var(--df-color-inert-neutral-main-background);
8
+ }
5
9
  }
6
10
 
7
11
  .modal-header {
@@ -44,6 +48,7 @@
44
48
 
45
49
  &:focus-visible {
46
50
  --df-box-shadow-color: var(--df-button-text-basic-color-neutral-default-foreground);
51
+ --df-inner-box-shadow-color: var(--df-color-inert-neutral-main-background);
47
52
  box-shadow: #{df.$df-focus-box-shadow};
48
53
  }
49
54
 
package/scss/components/select/_select.namespace.scss CHANGED
@@ -2,9 +2,12 @@
2
2
  //TODO: we are forced to use the color instead of the token: https://github.com/Amadeus-xDLC/design-factory.design-system/issues/2840
3
3
  html:root[data-df-theme='dark'] #{$df-css-namespace-selector} {
4
4
  .form-select {
5
- --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fafafa' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
5
+ --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%233a8bff%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
6
+ &:open {
7
+ --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%233a8bff%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');
8
+ }
6
9
  &:not([multiple]):disabled {
7
- --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23999999' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
10
+ --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%23999999%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
8
11
  }
9
12
  }
10
13
  }
package/scss/components/select/_select.scss CHANGED
@@ -4,9 +4,12 @@
4
4
  //TODO: we are forced to use the color instead of the token: https://github.com/Amadeus-xDLC/design-factory.design-system/issues/2840
5
5
  html:root[data-df-theme='dark'] {
6
6
  .form-select {
7
- --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fafafa' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
7
+ --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%233a8bff%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
8
+ &:open {
9
+ --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%233a8bff%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');
10
+ }
8
11
  &:not([multiple]):disabled {
9
- --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23999999' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
12
+ --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%23999999%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
10
13
  }
11
14
  }
12
15
  }
@@ -14,7 +17,6 @@ html:root[data-df-theme='dark'] {
14
17
  /* Native select */
15
18
  .form-select {
16
19
  --df-box-shadow-color: var(--df-color-input-border);
17
- --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%231a1a1a' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
18
20
 
19
21
  @each $state, $name in ('invalid': 'danger', 'warning': 'warning') {
20
22
  &.is-#{$state} {
@@ -28,6 +30,10 @@ html:root[data-df-theme='dark'] {
28
30
  background-position: left 0.5rem center;
29
31
  }
30
32
  }
33
+ &:open {
34
+ // chevron-up with button-text-basic-color-primary-default-foreground color (#0c66e1)
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
+ }
31
37
 
32
38
  &:focus {
33
39
  box-shadow: none;
@@ -61,7 +67,8 @@ html:root[data-df-theme='dark'] {
61
67
  }
62
68
 
63
69
  &:not([multiple]):disabled {
64
- --df-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23b3b3b3' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
70
+ // chevron-down with color-disabled-main-foreground color (#b3b3b3)
71
+ --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%23b3b3b3%22%20d%3D%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E');
65
72
  }
66
73
  }
67
74
 
@@ -137,13 +144,17 @@ html:root[data-df-theme='dark'] {
137
144
 
138
145
  .ng-arrow:before {
139
146
  font-family: 'Font Awesome 6 Pro', sans-serif;
140
- content: '\f0d7';
141
- font-weight: 900;
147
+ content: '\f078';
148
+ font-weight: 300;
142
149
  font-size: 1rem;
143
150
  width: 1.5rem;
144
151
  height: 1.5rem;
145
152
  }
146
153
 
154
+ &.ng-select-opened .ng-arrow:before {
155
+ content: '\f077';
156
+ }
157
+
147
158
  &.ng-select-focused > .ng-select-container {
148
159
  outline: 0;
149
160
  box-shadow: df.$df-focus-box-shadow;
@@ -157,6 +168,7 @@ html:root[data-df-theme='dark'] {
157
168
 
158
169
  .ng-arrow-wrapper {
159
170
  cursor: not-allowed;
171
+ color: var(--df-color-disabled-main-foreground);
160
172
  }
161
173
 
162
174
  .ng-value {
@@ -383,6 +395,7 @@ html:root[data-df-theme='dark'] {
383
395
  margin-inline-start: 0.3rem;
384
396
  margin-inline-end: 0.375rem;
385
397
  display: flex;
398
+ color: var(--df-button-text-basic-color-primary-default-foreground);
386
399
 
387
400
  @include select-mixins.ngs-root('.form-control-lg') {
388
401
  margin-top: $df-select-value-margin-lg;
@@ -400,7 +413,12 @@ html:root[data-df-theme='dark'] {
400
413
 
401
414
  &:not(.ng-select-disabled):not(.df-ng-select-readonly) {
402
415
  .ng-arrow-wrapper:hover {
403
- background-color: var(--df-color-primary-alt-hovered-background);
416
+ background-color: var(--df-button-text-basic-color-primary-hovered-background);
417
+ color: var(--df-button-text-basic-color-primary-hovered-foreground);
418
+ }
419
+ .ng-arrow-wrapper:active {
420
+ background-color: var(--df-button-text-basic-color-primary-pressed-background);
421
+ color: var(--df-button-text-basic-color-primary-pressed-foreground);
404
422
  }
405
423
  }
406
424
 
package/scss/components/select/_select.variables.scss CHANGED
@@ -1,9 +1,7 @@
1
1
  $form-select-bg-size: 16px 16px !default; // In pixels because image dimensions
2
- $form-select-indicator: str-replace(
3
- url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E"),
4
- '#',
5
- '%23'
6
- ) !default;
2
+ //TODO: we are forced to use the color instead of the token: https://github.com/Amadeus-xDLC/design-factory.design-system/issues/2840
3
+ // chevron-down with button-text-basic-color-primary-default-foreground color (#0c66e1)
4
+ $form-select-indicator: 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%22M267.3%20395.3c-6.2%206.2-16.4%206.2-22.6%200l-192-192c-6.2-6.2-6.2-16.4%200-22.6s16.4-6.2%2022.6%200L256%20361.4%20436.7%20180.7c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6l-192%20192z%22%2F%3E%3C%2Fsvg%3E') !default;
7
5
 
8
6
  $form-select-disabled-color: var(--df-color-disabled-main-foreground) !default;
9
7
  $form-select-disabled-bg: var(--df-color-disabled-main-background) !default;
package/scss/components/sidenav/_sidenav.scss CHANGED
@@ -58,6 +58,14 @@
58
58
  --df-drawer-max-size: max-content;
59
59
  // TODO: not needed when we have inline drawer
60
60
  z-index: 10;
61
+ transition: none;
62
+
63
+ &.inline-start {
64
+ transform: translateX(0);
65
+ &.show {
66
+ transform: translateX(0);
67
+ }
68
+ }
61
69
 
62
70
  &.show {
63
71
  --df-drawer-size: max-content;