@wwtdev/bsds-css 1.9.0 → 1.10.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/dist/components/_dropdown-options.scss +15 -4
  2. package/dist/components/_dropdown.scss +97 -31
  3. package/dist/components/_loader.scss +3 -0
  4. package/dist/components/_toast.scss +10 -75
  5. package/dist/components/dropdown-options.css +15 -4
  6. package/dist/components/dropdown.css +97 -31
  7. package/dist/components/loader.css +3 -0
  8. package/dist/components/toast.css +10 -75
  9. package/dist/wwt-bsds.css +121 -104
  10. package/dist/wwt-bsds.min.css +1 -1
  11. package/package.json +1 -1
package/dist/components/_dropdown-options.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  /* Option list */
3
3
  .bs-dropdown-options {
4
4
  list-style: none;
5
+ max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
6
+ overflow-y: auto;
5
7
  padding: 0;
6
8
  }
7
9
 
@@ -23,10 +25,12 @@
23
25
  display: grid;
24
26
  margin-bottom: 0.5rem;
25
27
  padding-bottom: 0.25rem;
26
- padding-left: 0.5rem;
27
- padding-right: 0.75rem;
28
+ padding-left: 1.25rem;
29
+ padding-right: 1.375rem;
28
30
  padding-top: 0.25rem;
29
31
  row-gap: 0.125rem;
32
+ word-break: break-word;
33
+ word-wrap: break-word;
30
34
  }
31
35
 
32
36
  /* Variant: 2-col */
@@ -38,7 +42,7 @@
38
42
  .bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
39
43
  color: var(--bs-ink-light);
40
44
  font-size: var(--bs-text-xs);
41
- height: 1.125rem;
45
+ min-height: 1.125rem;
42
46
  line-height: 1.125rem;
43
47
  }
44
48
 
@@ -47,7 +51,7 @@
47
51
  color: var(--bs-ink-light);
48
52
  font-size: var(--bs-text-xs);
49
53
  grid-column-start: 2;
50
- height: 1.125rem;
54
+ min-height: 1.125rem;
51
55
  line-height: 1.125rem;
52
56
  }
53
57
 
@@ -115,5 +119,12 @@
115
119
  --focus-border-color: var(--bs-red-200);
116
120
  }
117
121
 
122
+ @media (min-width: 752px) {
123
+ .bs-dropdown-options :where(li) {
124
+ padding-left: 0.5rem;
125
+ padding-right: 0.75rem;
126
+ }
127
+ }
128
+
118
129
  }
119
130
 
package/dist/components/_dropdown.scss CHANGED
@@ -7,62 +7,128 @@
7
7
 
8
8
  /* Content */
9
9
  .bs-dropdown {
10
+ --dropdown-bottom: 0;
11
+ --dropdown-left: 0;
12
+ --dropdown-top: auto;
13
+ --dropdown-width: 100%;
10
14
  background-color: var(--bs-bg-base-elevated);
11
15
  border-radius: 4px;
12
- bottom: auto;
16
+ bottom: var(--dropdown-bottom);
13
17
  box-shadow: var(--bs-shadow-contentMedium);
18
+ left: var(--dropdown-left);
14
19
  line-height: 1.5rem;
15
20
  margin: 0;
16
- max-height: 0;
17
21
  opacity: 0;
18
22
  overflow-y: auto;
19
- position: absolute;
20
- top: calc(100% + 0.5rem);
23
+ position: fixed;
24
+ top: var(--dropdown-top);
25
+ transform: translateY(100%);
26
+ transform-origin: center bottom;
21
27
  transition-duration: 75ms;
22
- transition-property: opacity, max-height;
28
+ transition-property: opacity, transform;
23
29
  transition-timing-function: ease-in-out;
24
- z-index: 999;
30
+ width: var(--dropdown-width);
31
+ z-index: -1;
25
32
  }
26
33
 
27
- /* Sizing */
28
- .bs-dropdown:where([data-width="sm"]) {
29
- width: 10rem;
34
+ /* mobile header */
35
+ /* TODO: h3 may not be the right tag to use here... label, possibly? */
36
+ .bs-dropdown > :where(header) {
37
+ border-bottom: 1px solid var(--bs-border-base);
38
+ padding: 1.5rem;
30
39
  }
31
-
32
- .bs-dropdown:where([data-width="md"]),
33
- .bs-dropdown:where(:not([data-width])) {
34
- width: 20rem;
40
+ .bs-dropdown > :where(header) :where(h3) {
41
+ font-size: 1.25rem;
35
42
  }
36
-
37
- .bs-dropdown:where([data-width="lg"]) {
38
- width: 40rem;
43
+ .bs-dropdown > :where(header) :where(p) {
44
+ font-size: 1rem;
39
45
  }
40
46
 
41
- .bs-dropdown:where([data-width="content"]) {
42
- width: auto;
47
+ /* mobile search input */
48
+ .bs-dropdown :where(.bs-dropdown-search) {
49
+ padding: 1.5rem 1.5rem 0 1.5rem;
43
50
  }
44
-
45
- .bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
46
- width: 100%;
51
+ .bs-dropdown :where(.bs-dropdown-search bs-input-search) {
52
+ margin-bottom: 1rem;
53
+ margin-left: -0.75rem;
54
+ width: calc(100% + 1.5rem);
55
+ }
56
+ .bs-dropdown:where([data-search]) :where(.bs-dropdown-options) {
57
+ --options-height-max: 11.5rem;
47
58
  }
48
59
 
49
60
  /* data-shown */
50
61
  .bs-dropdown:where([data-shown]) {
51
- max-height: 20rem;
52
62
  opacity: 1;
63
+ transform: translateY(0);
64
+ z-index: 999;
53
65
  }
54
66
 
55
- /* data-top */
56
- .bs-dropdown:where([data-top]) {
57
- bottom: calc(100% + 0.5rem);
58
- top: auto;
59
- }
60
67
 
61
- /* data-justify="center" */
62
- .bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
63
- left: 50%;
64
- transform: translateX(-50%);
68
+ @media (min-width: 752px) {
69
+ .bs-dropdown {
70
+ --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
71
+ --dropdown-left: var(--dropdown-wscreen-left, initial);
72
+ --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
73
+ --dropdown-width: var(--dropdown-wscreen-width, initial);
74
+ position: absolute;
75
+ transform: initial;
76
+ }
77
+
78
+ /* Hide the header */
79
+ .bs-dropdown > :where(header) {
80
+ display: none;
81
+ }
82
+
83
+ /* Sizing */
84
+ .bs-dropdown:where([data-width="sm"]) {
85
+ --dropdown-wscreen-width: 10rem;
86
+ }
87
+
88
+ .bs-dropdown:where([data-width="md"]),
89
+ .bs-dropdown:where(:not([data-width])) {
90
+ --dropdown-wscreen-width: 20rem;
91
+ }
92
+
93
+ .bs-dropdown:where([data-width="lg"]) {
94
+ --dropdown-wscreen-width: 40rem;
95
+ }
96
+
97
+ .bs-dropdown:where([data-width="content"]) {
98
+ --dropdown-wscreen-width: auto;
99
+ }
100
+
101
+ .bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
102
+ --dropdown-wscreen-width: 100%;
103
+ }
104
+
105
+ /* data-shown */
106
+ .bs-dropdown:where([data-shown]) {
107
+ opacity: 1;
108
+ }
109
+
110
+ /* data-top */
111
+ .bs-dropdown:where([data-top]) {
112
+ --dropdown-wscreen-bottom: calc(100% + 0.5rem);
113
+ --dropdown-wscreen-top: auto;
114
+ }
115
+
116
+ /* data-justify="center" */
117
+ .bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
118
+ --dropdown-wscreen-left: 50%;
119
+ transform: translateX(-50%);
120
+ }
121
+
122
+ .bs-dropdown :where(.bs-dropdown-options) {
123
+ --options-height-max: 20rem;
124
+ }
125
+ .bs-dropdown:where([data-search]) :where(.bs-dropdown-options) {
126
+ --options-height-max: 17.25rem;
127
+ }
65
128
  }
66
129
 
130
+
131
+
132
+
67
133
  }
68
134
 
package/dist/components/_loader.scss CHANGED
@@ -66,6 +66,9 @@
66
66
  .bs-loader:where([data-variant="black"]) {
67
67
  --loader-dot-bg: var(--bs-black);
68
68
  }
69
+ .bs-loader:where([data-variant="gray"]) {
70
+ --loader-dot-bg: var(--bs-gray-400);
71
+ }
69
72
  .bs-loader:where([data-variant="white"]) {
70
73
  --loader-dot-bg: var(--bs-white);
71
74
  }
package/dist/components/_toast.scss CHANGED
@@ -11,13 +11,16 @@
11
11
  opacity: 0;
12
12
  position: fixed;
13
13
  right: 0;
14
- transform: translateY(calc(100% + 1.5rem));
14
+ transform: translate(0, calc(100% + 1.5rem));
15
+ transition-duration: 200ms;
16
+ transition-property: transform, opacity;
17
+ transition-timing-function: ease;
15
18
  /* Clamp width for mobile -> full screen */
16
19
  width: clamp(17rem, calc(100vw - 3rem), 25rem);
17
20
  z-index: 999;
18
21
  }
19
22
 
20
- .bs-toast[data-stacked] {
23
+ .bs-toast:where([data-stacked]) {
21
24
  bottom: auto;
22
25
  left: auto;
23
26
  position: static;
@@ -26,42 +29,9 @@
26
29
  }
27
30
 
28
31
  /* Mobile - Toast comes up from bottom */
29
- @keyframes slideDown {
30
- 0% {
31
- opacity: 1;
32
- transform: translateY(0);
33
- }
34
- 100% {
35
- opacity: 0;
36
- transform: translateY(calc(100% + 1.5rem));
37
- }
38
- }
39
-
40
- @keyframes slideUp {
41
- 0% {
42
- opacity: 0;
43
- transform: translateY(calc(100% + 1.5rem));
44
- }
45
- 100% {
46
- opacity: 1;
47
- transform: translateY(0);
48
- }
49
- }
50
-
51
32
  .bs-toast:where([data-shown]) {
52
- /* Small delay on load to alow for HTML element to exist */
53
- animation-delay: 10ms;
54
- animation-duration: 200ms;
55
- animation-fill-mode: forwards;
56
- animation-name: slideUp;
57
- animation-timing-function: ease;
58
- }
59
-
60
- .bs-toast:where([data-dismissed]) {
61
- animation-duration: 200ms;
62
- animation-fill-mode: forwards;
63
- animation-name: slideDown;
64
- animation-timing-function: ease;
33
+ opacity: 1;
34
+ transform: translate(0, 0);
65
35
  }
66
36
 
67
37
  .bs-toast-header {
@@ -140,53 +110,18 @@
140
110
  }
141
111
 
142
112
  @media (min-width: 440px) {
143
-
144
113
  .bs-toast {
145
114
  left: auto;
146
115
  margin-left: 0;
147
116
  margin-right: 0;
148
117
  opacity: 0;
149
118
  right: 1.5rem;
150
- transform: translateX(calc(100% + 1.5rem));
119
+ transform: translate(calc(100% + 1.5rem), 0);
151
120
  }
152
121
 
153
122
  .bs-toast:where([data-shown]) {
154
- /* Small delay on load to alow for HTML element to exist */
155
- animation-delay: 10ms;
156
- animation-duration: 200ms;
157
- animation-fill-mode: forwards;
158
- animation-name: slideLeft;
159
- animation-timing-function: ease;
160
- }
161
-
162
- .bs-toast:where([data-dismissed]) {
163
- animation-duration: 200ms;
164
- animation-fill-mode: forwards;
165
- animation-name: slideRight;
166
- animation-timing-function: ease;
167
- }
168
-
169
- /* Non-mobile toasts come in from the right */
170
- @keyframes slideRight {
171
- 0% {
172
- opacity: 1;
173
- transform: translateX(0);
174
- }
175
- 100% {
176
- opacity: 0;
177
- transform: translateX(calc(100% + 1.5rem));
178
- }
179
- }
180
-
181
- @keyframes slideLeft {
182
- 0% {
183
- opacity: 0;
184
- transform: translateX(calc(100% + 1.5rem));
185
- }
186
- 100% {
187
- opacity: 1;
188
- transform: translateX(0);
189
- }
123
+ opacity: 1;
124
+ transform: translate(0, 0);
190
125
  }
191
126
 
192
127
  .bs-toast-actions:where([data-stacked]) {
package/dist/components/dropdown-options.css CHANGED
@@ -1,6 +1,8 @@
1
1
  /* Option list */
2
2
  .bs-dropdown-options {
3
3
  list-style: none;
4
+ max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
5
+ overflow-y: auto;
4
6
  padding: 0;
5
7
  }
6
8
 
@@ -22,10 +24,12 @@
22
24
  display: grid;
23
25
  margin-bottom: 0.5rem;
24
26
  padding-bottom: 0.25rem;
25
- padding-left: 0.5rem;
26
- padding-right: 0.75rem;
27
+ padding-left: 1.25rem;
28
+ padding-right: 1.375rem;
27
29
  padding-top: 0.25rem;
28
30
  row-gap: 0.125rem;
31
+ word-break: break-word;
32
+ word-wrap: break-word;
29
33
  }
30
34
 
31
35
  /* Variant: 2-col */
@@ -37,7 +41,7 @@
37
41
  .bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
38
42
  color: var(--bs-ink-light);
39
43
  font-size: var(--bs-text-xs);
40
- height: 1.125rem;
44
+ min-height: 1.125rem;
41
45
  line-height: 1.125rem;
42
46
  }
43
47
 
@@ -46,7 +50,7 @@
46
50
  color: var(--bs-ink-light);
47
51
  font-size: var(--bs-text-xs);
48
52
  grid-column-start: 2;
49
- height: 1.125rem;
53
+ min-height: 1.125rem;
50
54
  line-height: 1.125rem;
51
55
  }
52
56
 
@@ -113,3 +117,10 @@
113
117
  .bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
114
118
  --focus-border-color: var(--bs-red-200);
115
119
  }
120
+
121
+ @media (min-width: 752px) {
122
+ .bs-dropdown-options :where(li) {
123
+ padding-left: 0.5rem;
124
+ padding-right: 0.75rem;
125
+ }
126
+ }
package/dist/components/dropdown.css CHANGED
@@ -6,59 +6,125 @@
6
6
 
7
7
  /* Content */
8
8
  .bs-dropdown {
9
+ --dropdown-bottom: 0;
10
+ --dropdown-left: 0;
11
+ --dropdown-top: auto;
12
+ --dropdown-width: 100%;
9
13
  background-color: var(--bs-bg-base-elevated);
10
14
  border-radius: 4px;
11
- bottom: auto;
15
+ bottom: var(--dropdown-bottom);
12
16
  box-shadow: var(--bs-shadow-contentMedium);
17
+ left: var(--dropdown-left);
13
18
  line-height: 1.5rem;
14
19
  margin: 0;
15
- max-height: 0;
16
20
  opacity: 0;
17
21
  overflow-y: auto;
18
- position: absolute;
19
- top: calc(100% + 0.5rem);
22
+ position: fixed;
23
+ top: var(--dropdown-top);
24
+ transform: translateY(100%);
25
+ transform-origin: center bottom;
20
26
  transition-duration: 75ms;
21
- transition-property: opacity, max-height;
27
+ transition-property: opacity, transform;
22
28
  transition-timing-function: ease-in-out;
23
- z-index: 999;
29
+ width: var(--dropdown-width);
30
+ z-index: -1;
24
31
  }
25
32
 
26
- /* Sizing */
27
- .bs-dropdown:where([data-width="sm"]) {
28
- width: 10rem;
33
+ /* mobile header */
34
+ /* TODO: h3 may not be the right tag to use here... label, possibly? */
35
+ .bs-dropdown > :where(header) {
36
+ border-bottom: 1px solid var(--bs-border-base);
37
+ padding: 1.5rem;
29
38
  }
30
-
31
- .bs-dropdown:where([data-width="md"]),
32
- .bs-dropdown:where(:not([data-width])) {
33
- width: 20rem;
39
+ .bs-dropdown > :where(header) :where(h3) {
40
+ font-size: 1.25rem;
34
41
  }
35
-
36
- .bs-dropdown:where([data-width="lg"]) {
37
- width: 40rem;
42
+ .bs-dropdown > :where(header) :where(p) {
43
+ font-size: 1rem;
38
44
  }
39
45
 
40
- .bs-dropdown:where([data-width="content"]) {
41
- width: auto;
46
+ /* mobile search input */
47
+ .bs-dropdown :where(.bs-dropdown-search) {
48
+ padding: 1.5rem 1.5rem 0 1.5rem;
42
49
  }
43
-
44
- .bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
45
- width: 100%;
50
+ .bs-dropdown :where(.bs-dropdown-search bs-input-search) {
51
+ margin-bottom: 1rem;
52
+ margin-left: -0.75rem;
53
+ width: calc(100% + 1.5rem);
54
+ }
55
+ .bs-dropdown:where([data-search]) :where(.bs-dropdown-options) {
56
+ --options-height-max: 11.5rem;
46
57
  }
47
58
 
48
59
  /* data-shown */
49
60
  .bs-dropdown:where([data-shown]) {
50
- max-height: 20rem;
51
61
  opacity: 1;
62
+ transform: translateY(0);
63
+ z-index: 999;
52
64
  }
53
65
 
54
- /* data-top */
55
- .bs-dropdown:where([data-top]) {
56
- bottom: calc(100% + 0.5rem);
57
- top: auto;
58
- }
59
66
 
60
- /* data-justify="center" */
61
- .bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
62
- left: 50%;
63
- transform: translateX(-50%);
67
+ @media (min-width: 752px) {
68
+ .bs-dropdown {
69
+ --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
70
+ --dropdown-left: var(--dropdown-wscreen-left, initial);
71
+ --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
72
+ --dropdown-width: var(--dropdown-wscreen-width, initial);
73
+ position: absolute;
74
+ transform: initial;
75
+ }
76
+
77
+ /* Hide the header */
78
+ .bs-dropdown > :where(header) {
79
+ display: none;
80
+ }
81
+
82
+ /* Sizing */
83
+ .bs-dropdown:where([data-width="sm"]) {
84
+ --dropdown-wscreen-width: 10rem;
85
+ }
86
+
87
+ .bs-dropdown:where([data-width="md"]),
88
+ .bs-dropdown:where(:not([data-width])) {
89
+ --dropdown-wscreen-width: 20rem;
90
+ }
91
+
92
+ .bs-dropdown:where([data-width="lg"]) {
93
+ --dropdown-wscreen-width: 40rem;
94
+ }
95
+
96
+ .bs-dropdown:where([data-width="content"]) {
97
+ --dropdown-wscreen-width: auto;
98
+ }
99
+
100
+ .bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
101
+ --dropdown-wscreen-width: 100%;
102
+ }
103
+
104
+ /* data-shown */
105
+ .bs-dropdown:where([data-shown]) {
106
+ opacity: 1;
107
+ }
108
+
109
+ /* data-top */
110
+ .bs-dropdown:where([data-top]) {
111
+ --dropdown-wscreen-bottom: calc(100% + 0.5rem);
112
+ --dropdown-wscreen-top: auto;
113
+ }
114
+
115
+ /* data-justify="center" */
116
+ .bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
117
+ --dropdown-wscreen-left: 50%;
118
+ transform: translateX(-50%);
119
+ }
120
+
121
+ .bs-dropdown :where(.bs-dropdown-options) {
122
+ --options-height-max: 20rem;
123
+ }
124
+ .bs-dropdown:where([data-search]) :where(.bs-dropdown-options) {
125
+ --options-height-max: 17.25rem;
126
+ }
64
127
  }
128
+
129
+
130
+
package/dist/components/loader.css CHANGED
@@ -65,6 +65,9 @@
65
65
  .bs-loader:where([data-variant="black"]) {
66
66
  --loader-dot-bg: var(--bs-black);
67
67
  }
68
+ .bs-loader:where([data-variant="gray"]) {
69
+ --loader-dot-bg: var(--bs-gray-400);
70
+ }
68
71
  .bs-loader:where([data-variant="white"]) {
69
72
  --loader-dot-bg: var(--bs-white);
70
73
  }
package/dist/components/toast.css CHANGED
@@ -10,13 +10,16 @@
10
10
  opacity: 0;
11
11
  position: fixed;
12
12
  right: 0;
13
- transform: translateY(calc(100% + 1.5rem));
13
+ transform: translate(0, calc(100% + 1.5rem));
14
+ transition-duration: 200ms;
15
+ transition-property: transform, opacity;
16
+ transition-timing-function: ease;
14
17
  /* Clamp width for mobile -> full screen */
15
18
  width: clamp(17rem, calc(100vw - 3rem), 25rem);
16
19
  z-index: 999;
17
20
  }
18
21
 
19
- .bs-toast[data-stacked] {
22
+ .bs-toast:where([data-stacked]) {
20
23
  bottom: auto;
21
24
  left: auto;
22
25
  position: static;
@@ -25,42 +28,9 @@
25
28
  }
26
29
 
27
30
  /* Mobile - Toast comes up from bottom */
28
- @keyframes slideDown {
29
- 0% {
30
- opacity: 1;
31
- transform: translateY(0);
32
- }
33
- 100% {
34
- opacity: 0;
35
- transform: translateY(calc(100% + 1.5rem));
36
- }
37
- }
38
-
39
- @keyframes slideUp {
40
- 0% {
41
- opacity: 0;
42
- transform: translateY(calc(100% + 1.5rem));
43
- }
44
- 100% {
45
- opacity: 1;
46
- transform: translateY(0);
47
- }
48
- }
49
-
50
31
  .bs-toast:where([data-shown]) {
51
- /* Small delay on load to alow for HTML element to exist */
52
- animation-delay: 10ms;
53
- animation-duration: 200ms;
54
- animation-fill-mode: forwards;
55
- animation-name: slideUp;
56
- animation-timing-function: ease;
57
- }
58
-
59
- .bs-toast:where([data-dismissed]) {
60
- animation-duration: 200ms;
61
- animation-fill-mode: forwards;
62
- animation-name: slideDown;
63
- animation-timing-function: ease;
32
+ opacity: 1;
33
+ transform: translate(0, 0);
64
34
  }
65
35
 
66
36
  .bs-toast-header {
@@ -139,53 +109,18 @@
139
109
  }
140
110
 
141
111
  @media (min-width: 440px) {
142
-
143
112
  .bs-toast {
144
113
  left: auto;
145
114
  margin-left: 0;
146
115
  margin-right: 0;
147
116
  opacity: 0;
148
117
  right: 1.5rem;
149
- transform: translateX(calc(100% + 1.5rem));
118
+ transform: translate(calc(100% + 1.5rem), 0);
150
119
  }
151
120
 
152
121
  .bs-toast:where([data-shown]) {
153
- /* Small delay on load to alow for HTML element to exist */
154
- animation-delay: 10ms;
155
- animation-duration: 200ms;
156
- animation-fill-mode: forwards;
157
- animation-name: slideLeft;
158
- animation-timing-function: ease;
159
- }
160
-
161
- .bs-toast:where([data-dismissed]) {
162
- animation-duration: 200ms;
163
- animation-fill-mode: forwards;
164
- animation-name: slideRight;
165
- animation-timing-function: ease;
166
- }
167
-
168
- /* Non-mobile toasts come in from the right */
169
- @keyframes slideRight {
170
- 0% {
171
- opacity: 1;
172
- transform: translateX(0);
173
- }
174
- 100% {
175
- opacity: 0;
176
- transform: translateX(calc(100% + 1.5rem));
177
- }
178
- }
179
-
180
- @keyframes slideLeft {
181
- 0% {
182
- opacity: 0;
183
- transform: translateX(calc(100% + 1.5rem));
184
- }
185
- 100% {
186
- opacity: 1;
187
- transform: translateX(0);
188
- }
122
+ opacity: 1;
123
+ transform: translate(0, 0);
189
124
  }
190
125
 
191
126
  .bs-toast-actions:where([data-stacked]) {