@tiddh/brave-vue 1.9.21 → 1.9.24

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/brave-vue.esm.js +166 -65
  2. package/dist/brave-vue.min.js +1 -1
  3. package/dist/brave-vue.ssr.js +183 -82
  4. package/package.json +1 -2
  5. package/src/components/Avatar/Avatar.vue +18 -0
  6. package/src/components/Avatar/elements/CustomizationPanel.vue +9 -0
  7. package/src/components/Avatar/elements/CustomizationView.vue +28 -0
  8. package/src/components/Modal/Modal.vue +388 -371
  9. package/src/components/Preview/Preview.vue +971 -933
  10. package/src/components/Preview/PreviewTools.vue +2148 -1164
  11. package/src/components/Preview/PreviewWithTools.vue +252 -248
package/src/components/Modal/Modal.vue CHANGED
@@ -1,378 +1,395 @@
1
1
  <template>
2
- <transition name="modal" v-bind="$attrs" v-on="$listeners">
3
- <div class="modal-container">
4
- <div class="modal">
5
- <div class="modal-dialog">
6
- <div class="modal-content">
7
- <div class="modal-header-items">
8
- <div class="modal-header-close">
9
- <div class="header-close" >
10
- <!-- <Icon name="close" fill="#DFDAE4" stroke="transparent" @click="closeModal"/> -->
11
- <span data-v-98f27cc4="" data-v-47db75aa="" class="icon icon-close size-lg" @click="closeModal">
12
- <svg fill="#DFDAE4" stroke="transparent" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
13
- <path d="M24.4803 7.53262C23.7875 6.8398 22.6673 6.83968 21.9743 7.53227L16.0004 13.494L10.026 7.5197C9.33311 6.82677 8.21263 6.82677 7.5197 7.5197C6.82677 8.21263 6.82677 9.33311 7.5197 10.026L13.4937 16L7.5197 21.974C6.82677 22.6669 6.82677 23.7874 7.5197 24.4803C8.21263 25.1732 9.33311 25.1732 10.026 24.4803L16 18.5063L21.974 24.4803C22.6669 25.1732 23.7874 25.1732 24.4803 24.4803C25.1732 23.7874 25.1732 22.6669 24.4803 21.974L18.5063 16L24.4803 10.026C25.1603 9.34603 25.1603 8.21264 24.4803 7.53262Z"></path>
14
- </svg>
15
- </span>
16
- </div>
17
- </div>
18
- <div class="modal-header-content">
19
- <Heading kind="h4" :size="headingSize" :color="headingColor">{{heading}}</Heading>
20
- <Paragraph v-if="paragraph" :size="paragraphSize" color="'#ccc'">{{paragraph}}</Paragraph>
21
- </div>
22
- <slot name="header"> </slot>
23
- </div>
24
- <div class="modal-body">
25
- <slot></slot>
26
- </div>
27
- <HR height="1px" color="#f0f0f0" />
28
- <div class="modal-footer-items">
29
- <slot name="footer"></slot>
30
- </div>
31
- </div>
32
- </div>
33
- </div>
34
- <div class="modal-backdrop" @click="closeModal"></div>
35
- </div>
36
- </transition>
2
+ <transition name="modal" v-bind="$attrs" v-on="$listeners">
3
+ <div class="modal-container">
4
+ <div class="modal">
5
+ <div class="modal-dialog">
6
+ <div class="modal-content">
7
+ <div class="modal-header-items">
8
+ <div class="modal-header-close">
9
+ <div class="header-close">
10
+ <!-- <Icon name="close" fill="#DFDAE4" stroke="transparent" @click="closeModal"/> -->
11
+ <span
12
+ class="icon icon-close size-lg"
13
+ v-if="haveClose"
14
+ @click="closeModal"
15
+ >
16
+ <svg
17
+ fill="#DFDAE4"
18
+ stroke="transparent"
19
+ viewBox="0 0 32 32"
20
+ xmlns="http://www.w3.org/2000/svg"
21
+ >
22
+ <path
23
+ d="M24.4803 7.53262C23.7875 6.8398 22.6673 6.83968 21.9743 7.53227L16.0004 13.494L10.026 7.5197C9.33311 6.82677 8.21263 6.82677 7.5197 7.5197C6.82677 8.21263 6.82677 9.33311 7.5197 10.026L13.4937 16L7.5197 21.974C6.82677 22.6669 6.82677 23.7874 7.5197 24.4803C8.21263 25.1732 9.33311 25.1732 10.026 24.4803L16 18.5063L21.974 24.4803C22.6669 25.1732 23.7874 25.1732 24.4803 24.4803C25.1732 23.7874 25.1732 22.6669 24.4803 21.974L18.5063 16L24.4803 10.026C25.1603 9.34603 25.1603 8.21264 24.4803 7.53262Z"
24
+ ></path>
25
+ </svg>
26
+ </span>
27
+ </div>
28
+ </div>
29
+ <div class="modal-header-content">
30
+ <Heading kind="h4" :size="headingSize" :color="headingColor">{{
31
+ heading
32
+ }}</Heading>
33
+ <Paragraph
34
+ v-if="paragraph"
35
+ :size="paragraphSize"
36
+ color="'#ccc'"
37
+ v-html="paragraph"
38
+ ></Paragraph>
39
+ </div>
40
+ <slot name="header"> </slot>
41
+ </div>
42
+ <div class="modal-body">
43
+ <slot></slot>
44
+ </div>
45
+ <HR height="1px" color="#f0f0f0" />
46
+ <div class="modal-footer-items">
47
+ <slot name="footer"></slot>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ <div class="modal-backdrop" @click="closeModal"></div>
53
+ </div>
54
+ </transition>
37
55
  </template>
38
56
 
39
57
  <script>
40
- import Button from '../Buttons/Button.vue';
41
- import Heading from '../Typography/Heading.vue';
42
- import Paragraph from '../Typography/Paragraph.vue';
43
- import Icon from '../Icons/Icon.vue';
44
-
45
- export default {
46
- name: 'Modal',
47
- components: { Button, Heading, Paragraph, Icon },
48
- props: {
49
- kind: {
50
- type: String,
51
- default: 'primary'
52
- },
53
- size: {
54
- type: String,
55
- default: 'xl'
56
- },
57
- heading: {
58
- type: String,
59
- required: true,
60
- },
61
- headingSize: {
62
- type: String,
63
- default: 'sm'
64
- },
65
- headingColor: {
66
- type: String,
67
- default: '#68596E'
68
- },
69
- paragraph: {
70
- type: String,
71
- },
72
- paragraphSize: {
73
- type: String,
74
- default: 'lg'
75
- }
76
- },
77
-
78
- created() {
79
- document.getElementsByTagName('html')[0].style.overflow='hidden';
80
- document.getElementsByTagName('body')[0].style.overflow='hidden';
81
- if(document.getElementsByClassName('boxes') && document.getElementsByClassName('boxes').length > 0){
82
- document.getElementsByClassName('boxes')[0].style.overflow='hidden';
83
- }
84
-
85
- },
86
- beforeCreate() {
87
- document.getElementsByTagName('html')[0].style.overflow='hidden';
88
- document.getElementsByTagName('body')[0].style.overflow='hidden';
89
- if(document.getElementsByClassName('boxes') && document.getElementsByClassName('boxes').length > 0){
90
- document.getElementsByClassName('boxes')[0].style.overflow='hidden';
91
- }
92
- },
93
- mounted(){
94
- document.getElementsByTagName('html')[0].style.overflow='hidden';
95
- document.getElementsByTagName('body')[0].style.overflow='hidden';
96
- if(document.getElementsByClassName('boxes') && document.getElementsByClassName('boxes').length > 0){
97
- document.getElementsByClassName('boxes')[0].style.overflow='hidden';
98
- }
99
- },
100
-
101
- destroy(){
102
- document.getElementsByTagName('html')[0].removeAttribute("style");
103
- document.getElementsByTagName('body')[0].removeAttribute("style");
104
-
105
- if(document.getElementsByClassName('boxes') && document.getElementsByClassName('boxes').length > 0){
106
- document.getElementsByClassName('boxes')[0].removeAttribute("style");
107
- }
108
- },
109
- beforeDestroy(){
110
- document.getElementsByTagName('html')[0].removeAttribute("style");
111
- document.getElementsByTagName('body')[0].removeAttribute("style");
112
- if(document.getElementsByClassName('boxes') && document.getElementsByClassName('boxes').length > 0){
113
- document.getElementsByClassName('boxes')[0].removeAttribute("style");
114
- }
115
- },
116
- methods: {
117
- onClick() {
118
- this.$emit('click');
119
- },
120
- closeModal(){
121
- this.$emit("closeModal");
122
- document.getElementsByTagName('html')[0].removeAttribute("style");
123
- document.getElementsByTagName('body')[0].removeAttribute("style");
124
- if(document.getElementsByClassName('boxes') && document.getElementsByClassName('boxes').length > 0){
125
- document.getElementsByClassName('boxes')[0].removeAttribute("style");
126
- }
127
- }
128
- },
129
- computed: {
130
- shadowVar() {
131
- return {
132
- '--shadow-color': this.shadowColor,
133
- }
134
- }
135
- }
136
- };
58
+ import Button from "../Buttons/Button.vue";
59
+ import Heading from "../Typography/Heading.vue";
60
+ import Paragraph from "../Typography/Paragraph.vue";
61
+ import Icon from "../Icons/Icon.vue";
62
+
63
+ export default {
64
+ name: "Modal",
65
+ components: { Button, Heading, Paragraph, Icon },
66
+ props: {
67
+ kind: {
68
+ type: String,
69
+ default: "primary",
70
+ },
71
+ size: {
72
+ type: String,
73
+ default: "xl",
74
+ },
75
+ heading: {
76
+ type: String,
77
+ required: true,
78
+ },
79
+ headingSize: {
80
+ type: String,
81
+ default: "sm",
82
+ },
83
+ headingColor: {
84
+ type: String,
85
+ default: "#68596E",
86
+ },
87
+ paragraph: {
88
+ type: String,
89
+ },
90
+ paragraphSize: {
91
+ type: String,
92
+ default: "lg",
93
+ },
94
+ haveClose: {
95
+ type: Boolean,
96
+ default: true,
97
+ },
98
+ },
99
+
100
+ created() {
101
+ document.getElementsByTagName("html")[0].style.overflow = "hidden";
102
+ document.getElementsByTagName("body")[0].style.overflow = "hidden";
103
+ if (
104
+ document.getElementsByClassName("boxes") &&
105
+ document.getElementsByClassName("boxes").length > 0
106
+ ) {
107
+ document.getElementsByClassName("boxes")[0].style.overflow = "hidden";
108
+ }
109
+ },
110
+ beforeCreate() {
111
+ document.getElementsByTagName("html")[0].style.overflow = "hidden";
112
+ document.getElementsByTagName("body")[0].style.overflow = "hidden";
113
+ if (
114
+ document.getElementsByClassName("boxes") &&
115
+ document.getElementsByClassName("boxes").length > 0
116
+ ) {
117
+ document.getElementsByClassName("boxes")[0].style.overflow = "hidden";
118
+ }
119
+ },
120
+ mounted() {
121
+ document.getElementsByTagName("html")[0].style.overflow = "hidden";
122
+ document.getElementsByTagName("body")[0].style.overflow = "hidden";
123
+ if (
124
+ document.getElementsByClassName("boxes") &&
125
+ document.getElementsByClassName("boxes").length > 0
126
+ ) {
127
+ document.getElementsByClassName("boxes")[0].style.overflow = "hidden";
128
+ }
129
+ },
130
+
131
+ destroy() {
132
+ document.getElementsByTagName("html")[0].removeAttribute("style");
133
+ document.getElementsByTagName("body")[0].removeAttribute("style");
134
+
135
+ if (
136
+ document.getElementsByClassName("boxes") &&
137
+ document.getElementsByClassName("boxes").length > 0
138
+ ) {
139
+ document.getElementsByClassName("boxes")[0].removeAttribute("style");
140
+ }
141
+ },
142
+ beforeDestroy() {
143
+ document.getElementsByTagName("html")[0].removeAttribute("style");
144
+ document.getElementsByTagName("body")[0].removeAttribute("style");
145
+ if (
146
+ document.getElementsByClassName("boxes") &&
147
+ document.getElementsByClassName("boxes").length > 0
148
+ ) {
149
+ document.getElementsByClassName("boxes")[0].removeAttribute("style");
150
+ }
151
+ },
152
+ methods: {
153
+ onClick() {
154
+ this.$emit("click");
155
+ },
156
+ closeModal() {
157
+ this.$emit("closeModal");
158
+ document.getElementsByTagName("html")[0].removeAttribute("style");
159
+ document.getElementsByTagName("body")[0].removeAttribute("style");
160
+ if (
161
+ document.getElementsByClassName("boxes") &&
162
+ document.getElementsByClassName("boxes").length > 0
163
+ ) {
164
+ document.getElementsByClassName("boxes")[0].removeAttribute("style");
165
+ }
166
+ },
167
+ },
168
+ computed: {
169
+ shadowVar() {
170
+ return {
171
+ "--shadow-color": this.shadowColor,
172
+ };
173
+ },
174
+ },
175
+ };
137
176
  </script>
138
177
 
139
-
140
- <style lang='scss' scoped>
141
- @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
142
-
143
- .modal {
144
- display: block;
145
- position: fixed;
146
- top: 0;
147
- left: 0;
148
- z-index: 1050;
149
- width: 100%;
150
- height: 100%;
151
- overflow-y: scroll;
152
- outline: 0;
153
- font-family: $font-family-01, sans-serif;
154
-
155
- display: flex;
156
- align-items: center;
157
- justify-content: center;
158
-
159
- }
160
-
161
- .modal-dialog {
162
- transition: all 0.5s ease;
163
- }
164
- .modal-backdrop {
165
- transition: opacity 0.5s ease, backdrop-filter 0.5s ease;
166
- }
167
-
168
- .modal-backdrop {
169
- position: fixed;
170
- top: 0;
171
- left: 0;
172
- z-index: 1040;
173
- width: 100vw;
174
- height: 100vh;
175
- background: rgba(104, 89, 110, 0.8);
176
- backdrop-filter: blur(4px);
177
- -webkit-backdrop-filter: blur(4px);
178
-
179
- }
180
-
181
- .modal-content {
182
- position: relative;
183
- display: flex;
184
- flex-direction: column;
185
- width: 100%;
186
- pointer-events: auto;
187
- background-color: #fff;
188
- background-clip: padding-box;
189
- border: 0 solid rgba(0, 0, 0, 0.2);
190
- border-radius: 0;
191
- outline: 0;
192
- @include media-breakpoint-down('sm') {
193
- min-height: 100vh;
194
- top: px-size('sm', 55px);
195
- border-top-left-radius: 24px;
196
- border-top-right-radius: 24px;
197
- position: fixed;
198
- bottom:0px;
199
- left: 0;
200
- }
201
- }
202
-
203
- .modal-dialog {
204
- max-width: px-size('lg', 578px);
205
- // box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
206
- border-radius: px-size("lg", $border-radius-lg) !important;
207
- overflow: hidden !important;
208
- position: relative;
209
- width: auto;
210
- pointer-events: none;
211
- margin: 5% auto;
212
- box-shadow: #bbbbbb;
213
- @include media-breakpoint-down('sm') {
214
- max-width: 100% !important;
215
- margin-top: 0 !important;
216
- margin-bottom: 0 !important;
217
- }
218
- }
219
-
220
- .modal-header-items {
221
- align-items: center;
222
- color: #68596e;
223
- padding-top: $spacing-stack-sm 0px;
224
-
225
- .modal-header-close{
226
- padding: 0px $spacing-inline-sm;
227
- padding-top: $spacing-stack-sm;
228
- text-align: right;
229
- @include media-breakpoint-down('sm') {
230
- padding: 0;
231
- position: absolute;
232
- top: px-size('sm', -37px);
233
- right: px-size('sm', $spacing-inline-sm);
234
- width:100%;
235
- }
236
-
237
- .header-close{
238
- display: flex;
239
- justify-content: flex-end;
240
-
241
- cursor: pointer;
242
- &:hover {
243
- span{
244
-
245
- ::v-deep svg {
246
- path{
247
- fill: $color-brand-primary-medium;
248
- }
249
- }
250
- // svg {
251
- // background-color:#1ad3d9;
252
- // fill: #1ad3d9 !important;
253
- // path {
254
- // fill: #1ad3d9 !important;
255
- // }
256
-
257
- // }
258
-
259
- // path {
260
- // fill: #1ad3d9 !important;
261
- // }
262
-
263
- }
264
-
265
-
266
-
267
- }
268
-
269
- span{
270
- max-width: px-size("lg", 24px);
271
- max-height: px-size("lg", 24px);
272
- width:100%;
273
-
274
-
275
- @include media-breakpoint-down('sm') {
276
- max-width: px-size("sm", 24px);
277
- max-height: px-size("sm", 24px);
278
- width:100%;
279
- }
280
-
281
- // &:hover {
282
- // svg, path {
283
- // fill: #1ad3d9 !important;
284
- // }
285
- // }
286
-
287
-
288
- }
289
- // svg, path {
290
-
291
- // fill: #DFDAE4;
292
- // width:100%;
293
-
294
- // }
295
- }
296
- }
297
-
298
-
299
- .modal-header-content{
300
- padding: 0 px-size("lg", $spacing-inline-xl);
301
- @include media-breakpoint-down('sm') {
302
- padding: px-size('sm', $spacing-stack-lg) columns('sm', 1) 0;
303
- }
304
- .heading{
305
- width: 100%;
306
- margin:0px;
307
- }
308
-
309
- .paragraph{
310
- width: 100%;
311
- margin:0px;
312
- }
313
-
314
- }
315
-
316
- }
317
-
318
- hr{
319
- margin:0;
320
- height:1px;
321
- background-color: $color-neutral-medium;
322
- border:0px;
323
- @include media-breakpoint-down('sm') {
324
- display: none;
325
- }
326
- }
327
-
328
- .modal-body{
329
- padding: px-size("lg", $spacing-stack-sm) px-size("lg", $spacing-inline-xl);
330
- @include media-breakpoint-down('sm') {
331
- padding: px-size('sm', $spacing-stack-sm) columns('sm', 1) $spacing-stack-sm;
332
- }
333
- }
334
-
335
- .modal-footer-items{
336
- display: flex;
337
- justify-content: flex-start;
338
- flex-direction: row;
339
- padding: px-size("lg", $spacing-stack-sm) px-size("lg", $spacing-inline-xl);
340
- @include media-breakpoint-down('sm') {
341
- background: white;
342
- padding: px-size('sm', 15px) px-size('sm', 10px);
343
- position: fixed;
344
- width: 100%;
345
- bottom: 0;
346
- border-top: solid 1px rgba(223, 218, 228, 0.64);
347
- }
348
- &::v-deep {
349
- div {
350
- display: flex;
351
- justify-content: flex-start;
352
- flex-direction: row;
353
- width: 100%;
354
- .btn-ghost {
355
- margin-left: px-size("lg", $spacing-inline-xs);
356
- @include media-breakpoint-down('sm') {
357
- width: 50%;
358
- margin-left: px-size("sm", $spacing-inline-xs);
359
- }
360
- }
361
- .btn-secondary {
362
- @include media-breakpoint-down('sm') {
363
- width: 50%;
364
- }
365
- }
366
- }
367
- }
368
-
369
- }
370
-
371
-
372
-
373
-
374
-
375
-
376
-
377
-
178
+ <style lang="scss" scoped>
179
+ @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
180
+
181
+ .modal {
182
+ display: block;
183
+ position: fixed;
184
+ top: 0;
185
+ left: 0;
186
+ z-index: 1050;
187
+ width: 100%;
188
+ height: 100%;
189
+ overflow-y: scroll;
190
+ outline: 0;
191
+ font-family: $font-family-01, sans-serif;
192
+
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ }
197
+
198
+ .modal-dialog {
199
+ transition: all 0.5s ease;
200
+ }
201
+ .modal-backdrop {
202
+ transition: opacity 0.5s ease, backdrop-filter 0.5s ease;
203
+ }
204
+
205
+ .modal-backdrop {
206
+ position: fixed;
207
+ top: 0;
208
+ left: 0;
209
+ z-index: 1040;
210
+ width: 100vw;
211
+ height: 100vh;
212
+ background: rgba(104, 89, 110, 0.8);
213
+ backdrop-filter: blur(4px);
214
+ -webkit-backdrop-filter: blur(4px);
215
+ }
216
+
217
+ .modal-content {
218
+ position: relative;
219
+ display: flex;
220
+ flex-direction: column;
221
+ width: 100%;
222
+ pointer-events: auto;
223
+ background-color: #fff;
224
+ background-clip: padding-box;
225
+ border: 0 solid rgba(0, 0, 0, 0.2);
226
+ border-radius: 0;
227
+ outline: 0;
228
+ @include media-breakpoint-down("sm") {
229
+ min-height: 100vh;
230
+ top: px-size("sm", 55px);
231
+ border-top-left-radius: 24px;
232
+ border-top-right-radius: 24px;
233
+ position: fixed;
234
+ bottom: 0px;
235
+ left: 0;
236
+ }
237
+ }
238
+
239
+ .modal-dialog {
240
+ max-width: px-size("lg", 578px);
241
+ // box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
242
+ border-radius: px-size("lg", $border-radius-lg) !important;
243
+ overflow: hidden !important;
244
+ position: relative;
245
+ width: auto;
246
+ pointer-events: none;
247
+ margin: 5% auto;
248
+ box-shadow: #bbbbbb;
249
+ @include media-breakpoint-down("sm") {
250
+ max-width: 100% !important;
251
+ margin-top: 0 !important;
252
+ margin-bottom: 0 !important;
253
+ }
254
+ }
255
+
256
+ .modal-header-items {
257
+ align-items: center;
258
+ color: #68596e;
259
+ padding-top: $spacing-stack-sm 0px;
260
+
261
+ .modal-header-close {
262
+ padding: 0px $spacing-inline-sm;
263
+ padding-top: $spacing-stack-sm;
264
+ text-align: right;
265
+ @include media-breakpoint-down("sm") {
266
+ padding: 0;
267
+ position: absolute;
268
+ top: px-size("sm", -37px);
269
+ right: px-size("sm", $spacing-inline-sm);
270
+ width: 100%;
271
+ }
272
+
273
+ .header-close {
274
+ display: flex;
275
+ justify-content: flex-end;
276
+
277
+ cursor: pointer;
278
+ &:hover {
279
+ span {
280
+ ::v-deep svg {
281
+ path {
282
+ fill: $color-brand-primary-medium;
283
+ }
284
+ }
285
+ // svg {
286
+ // background-color:#1ad3d9;
287
+ // fill: #1ad3d9 !important;
288
+ // path {
289
+ // fill: #1ad3d9 !important;
290
+ // }
291
+
292
+ // }
293
+
294
+ // path {
295
+ // fill: #1ad3d9 !important;
296
+ // }
297
+ }
298
+ }
299
+
300
+ span {
301
+ max-width: px-size("lg", 24px);
302
+ max-height: px-size("lg", 24px);
303
+ width: 100%;
304
+
305
+ @include media-breakpoint-down("sm") {
306
+ max-width: px-size("sm", 24px);
307
+ max-height: px-size("sm", 24px);
308
+ width: 100%;
309
+ }
310
+
311
+ // &:hover {
312
+ // svg, path {
313
+ // fill: #1ad3d9 !important;
314
+ // }
315
+ // }
316
+ }
317
+ // svg, path {
318
+
319
+ // fill: #DFDAE4;
320
+ // width:100%;
321
+
322
+ // }
323
+ }
324
+ }
325
+
326
+ .modal-header-content {
327
+ padding: 0 px-size("lg", $spacing-inline-xl);
328
+ @include media-breakpoint-down("sm") {
329
+ padding: px-size("sm", $spacing-stack-lg) columns("sm", 1) 0;
330
+ }
331
+ .heading {
332
+ width: 100%;
333
+ margin: 0px;
334
+ }
335
+
336
+ .paragraph {
337
+ width: 100%;
338
+ margin: 0px;
339
+ }
340
+ }
341
+ }
342
+
343
+ hr {
344
+ margin: 0;
345
+ height: 1px;
346
+ background-color: $color-neutral-medium;
347
+ border: 0px;
348
+ @include media-breakpoint-down("sm") {
349
+ display: none;
350
+ }
351
+ }
352
+
353
+ .modal-body {
354
+ padding: px-size("lg", $spacing-stack-sm) px-size("lg", $spacing-inline-xl);
355
+ @include media-breakpoint-down("sm") {
356
+ padding: px-size("sm", $spacing-stack-sm) columns("sm", 1)
357
+ $spacing-stack-sm;
358
+ }
359
+ }
360
+
361
+ .modal-footer-items {
362
+ display: flex;
363
+ justify-content: flex-start;
364
+ flex-direction: row;
365
+ padding: px-size("lg", $spacing-stack-sm) px-size("lg", $spacing-inline-xl);
366
+ @include media-breakpoint-down("sm") {
367
+ background: white;
368
+ padding: px-size("sm", 15px) px-size("sm", 10px);
369
+ position: fixed;
370
+ width: 100%;
371
+ bottom: 0;
372
+ border-top: solid 1px rgba(223, 218, 228, 0.64);
373
+ }
374
+ &::v-deep {
375
+ div {
376
+ display: flex;
377
+ justify-content: flex-start;
378
+ flex-direction: row;
379
+ width: 100%;
380
+ .btn-ghost {
381
+ margin-left: px-size("lg", $spacing-inline-xs);
382
+ @include media-breakpoint-down("sm") {
383
+ width: 50%;
384
+ margin-left: px-size("sm", $spacing-inline-xs);
385
+ }
386
+ }
387
+ .btn-secondary {
388
+ @include media-breakpoint-down("sm") {
389
+ width: 50%;
390
+ }
391
+ }
392
+ }
393
+ }
394
+ }
378
395
  </style>