@asd20/ui 3.2.862 → 3.2.863
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/package.json +1 -1
- package/src/components/atoms/Asd20Viewport/index.vue +2 -103
- package/src/components/atoms/Asd20WidgetViewport/index.vue +156 -0
- package/src/components/organisms/Asd20FileList/index.vue +1 -1
- package/src/components/organisms/Asd20LinkList/index.vue +1 -1
- package/src/components/organisms/Asd20List/index.vue +3 -8
- package/src/components/organisms/Asd20PeopleList/index.vue +1 -1
- package/src/components/organisms/Asd20SiteSearch/index.vue +1 -5
- package/src/components/organisms/Asd20WidgetList/index.vue +158 -0
package/package.json
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
<div
|
|
4
|
-
v-if="outerScrollable"
|
|
5
|
-
:class="outerClasses"
|
|
6
|
-
:style="outerStyles"
|
|
7
|
-
ref="viewport"
|
|
8
|
-
@scroll="handleScroll"
|
|
9
|
-
>
|
|
10
|
-
<div>
|
|
11
|
-
<slot />
|
|
12
|
-
</div>
|
|
13
|
-
<div class="arrow-wrapper">
|
|
14
|
-
<div v-if="showDownArrow" class="down-arrow"></div>
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
|
-
<!-- If outerScrollable is false, the inner div gets the scrollable attributes -->
|
|
18
|
-
<div v-else>
|
|
19
|
-
<div :class="classes" :style="styles" ref="viewport" @scroll="handleScroll">
|
|
20
|
-
<slot />
|
|
21
|
-
</div>
|
|
22
|
-
<div class="arrow-wrapper">
|
|
23
|
-
<div v-if="showDownArrow" class="down-arrow"></div>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
2
|
+
<div :class="classes" :style="styles"><slot /></div>
|
|
26
3
|
</template>
|
|
27
4
|
|
|
28
5
|
<script>
|
|
@@ -32,12 +9,6 @@ export default {
|
|
|
32
9
|
scrollable: { type: Boolean, default: false },
|
|
33
10
|
padded: { type: Boolean, default: false },
|
|
34
11
|
maxHeight: { type: String, default: '' },
|
|
35
|
-
outerScrollable: { type: Boolean, default: false }, // Prop to control which div is scrollable
|
|
36
|
-
},
|
|
37
|
-
data() {
|
|
38
|
-
return {
|
|
39
|
-
showDownArrow: false, // Track whether the down arrow should be shown
|
|
40
|
-
}
|
|
41
12
|
},
|
|
42
13
|
computed: {
|
|
43
14
|
classes() {
|
|
@@ -52,51 +23,6 @@ export default {
|
|
|
52
23
|
'max-height': this.maxHeight ? this.maxHeight : 'auto',
|
|
53
24
|
}
|
|
54
25
|
},
|
|
55
|
-
outerClasses() {
|
|
56
|
-
return {
|
|
57
|
-
'asd20-viewport': true,
|
|
58
|
-
'asd20-viewport--scrollable': this.outerScrollable || this.scrollable,
|
|
59
|
-
'asd20-viewport--padded': this.padded,
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
outerStyles() {
|
|
63
|
-
return {
|
|
64
|
-
'max-height': this.maxHeight ? this.maxHeight : 'auto',
|
|
65
|
-
'overflow-y': this.outerScrollable ? 'auto' : 'hidden', // Outer div becomes scrollable when enabled
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
},
|
|
69
|
-
mounted() {
|
|
70
|
-
this.checkForOverflow()
|
|
71
|
-
window.addEventListener('resize', this.checkForOverflow)
|
|
72
|
-
},
|
|
73
|
-
beforeDestroy() {
|
|
74
|
-
window.removeEventListener('resize', this.checkForOverflow)
|
|
75
|
-
},
|
|
76
|
-
methods: {
|
|
77
|
-
checkForOverflow() {
|
|
78
|
-
const viewport = this.$refs.viewport
|
|
79
|
-
// Check if content overflows the viewport
|
|
80
|
-
if (viewport.scrollHeight > viewport.clientHeight) {
|
|
81
|
-
this.showDownArrow = true
|
|
82
|
-
// console.log('Show Down Arrow:', this.showDownArrow)
|
|
83
|
-
} else {
|
|
84
|
-
this.showDownArrow = false
|
|
85
|
-
// console.log('Show Down Arrow:', this.showDownArrow)
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
|
-
handleScroll() {
|
|
89
|
-
const viewport = this.$refs.viewport
|
|
90
|
-
// Hide the down arrow if the user scrolls to the bottom
|
|
91
|
-
if (
|
|
92
|
-
viewport.scrollTop + viewport.clientHeight >=
|
|
93
|
-
viewport.scrollHeight - 5
|
|
94
|
-
) {
|
|
95
|
-
this.showDownArrow = false
|
|
96
|
-
} else {
|
|
97
|
-
this.showDownArrow = true
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
26
|
},
|
|
101
27
|
}
|
|
102
28
|
</script>
|
|
@@ -104,21 +30,17 @@ export default {
|
|
|
104
30
|
<style lang="scss" scoped>
|
|
105
31
|
@import '../../../design/_mixins.scss';
|
|
106
32
|
@import '../../../design/_variables.scss';
|
|
107
|
-
|
|
108
33
|
.asd20-viewport {
|
|
109
34
|
flex-grow: 1;
|
|
110
35
|
overflow: hidden;
|
|
111
36
|
position: relative;
|
|
112
|
-
|
|
113
37
|
&--scrollable {
|
|
114
38
|
overflow-y: auto;
|
|
115
39
|
-webkit-overflow-scrolling: touch;
|
|
116
40
|
}
|
|
117
|
-
|
|
118
41
|
&--padded {
|
|
119
42
|
padding: space(1);
|
|
120
43
|
}
|
|
121
|
-
|
|
122
44
|
&::-webkit-scrollbar {
|
|
123
45
|
-webkit-appearance: none;
|
|
124
46
|
width: 6px;
|
|
@@ -130,27 +52,4 @@ export default {
|
|
|
130
52
|
margin: 3px;
|
|
131
53
|
}
|
|
132
54
|
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
.arrow-wrapper {
|
|
136
|
-
position: relative; /* Ensure arrow-wrapper stays relative to the viewport */
|
|
137
|
-
width: 100%; /* Takes up full width of the viewport */
|
|
138
|
-
height: 0; /* No height is required here */
|
|
139
|
-
margin-bottom: space(1);
|
|
140
|
-
}
|
|
141
|
-
.down-arrow {
|
|
142
|
-
position: absolute;
|
|
143
|
-
bottom: -1.5rem;
|
|
144
|
-
left: 50%;
|
|
145
|
-
transform: translateX(-50%);
|
|
146
|
-
width: 0;
|
|
147
|
-
height: 0;
|
|
148
|
-
border-left: 10px solid transparent;
|
|
149
|
-
border-right: 10px solid transparent;
|
|
150
|
-
border-top: 10px solid rgba(0, 0, 0, 0.7); /* Arrow color */
|
|
151
|
-
cursor: pointer;
|
|
152
|
-
z-index: 10;
|
|
153
|
-
transition: opacity 0.3s ease;
|
|
154
|
-
opacity: 0.7;
|
|
155
|
-
}
|
|
156
|
-
</style>
|
|
55
|
+
</style>
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- If outerScrollable is true, the outermost div gets the scrollable attributes -->
|
|
3
|
+
<div
|
|
4
|
+
v-if="outerScrollable"
|
|
5
|
+
:class="outerClasses"
|
|
6
|
+
:style="outerStyles"
|
|
7
|
+
ref="viewport"
|
|
8
|
+
@scroll="handleScroll"
|
|
9
|
+
>
|
|
10
|
+
<div>
|
|
11
|
+
<slot />
|
|
12
|
+
</div>
|
|
13
|
+
<div class="arrow-wrapper">
|
|
14
|
+
<div v-if="showDownArrow" class="down-arrow"></div>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
<!-- If outerScrollable is false, the inner div gets the scrollable attributes -->
|
|
18
|
+
<div v-else>
|
|
19
|
+
<div :class="classes" :style="styles" ref="viewport" @scroll="handleScroll">
|
|
20
|
+
<slot />
|
|
21
|
+
</div>
|
|
22
|
+
<div class="arrow-wrapper">
|
|
23
|
+
<div v-if="showDownArrow" class="down-arrow"></div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</template>
|
|
27
|
+
|
|
28
|
+
<script>
|
|
29
|
+
export default {
|
|
30
|
+
name: 'Asd20Viewport',
|
|
31
|
+
props: {
|
|
32
|
+
scrollable: { type: Boolean, default: false },
|
|
33
|
+
padded: { type: Boolean, default: false },
|
|
34
|
+
maxHeight: { type: String, default: '' },
|
|
35
|
+
outerScrollable: { type: Boolean, default: false }, // Prop to control which div is scrollable
|
|
36
|
+
},
|
|
37
|
+
data() {
|
|
38
|
+
return {
|
|
39
|
+
showDownArrow: false, // Track whether the down arrow should be shown
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
computed: {
|
|
43
|
+
classes() {
|
|
44
|
+
return {
|
|
45
|
+
'asd20-viewport': true,
|
|
46
|
+
'asd20-viewport--scrollable': this.scrollable,
|
|
47
|
+
'asd20-viewport--padded': this.padded,
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
styles() {
|
|
51
|
+
return {
|
|
52
|
+
'max-height': this.maxHeight ? this.maxHeight : 'auto',
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
outerClasses() {
|
|
56
|
+
return {
|
|
57
|
+
'asd20-viewport': true,
|
|
58
|
+
'asd20-viewport--scrollable': this.outerScrollable || this.scrollable,
|
|
59
|
+
'asd20-viewport--padded': this.padded,
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
outerStyles() {
|
|
63
|
+
return {
|
|
64
|
+
'max-height': this.maxHeight ? this.maxHeight : 'auto',
|
|
65
|
+
'overflow-y': this.outerScrollable ? 'auto' : 'hidden', // Outer div becomes scrollable when enabled
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
mounted() {
|
|
70
|
+
this.checkForOverflow()
|
|
71
|
+
window.addEventListener('resize', this.checkForOverflow)
|
|
72
|
+
},
|
|
73
|
+
beforeDestroy() {
|
|
74
|
+
window.removeEventListener('resize', this.checkForOverflow)
|
|
75
|
+
},
|
|
76
|
+
methods: {
|
|
77
|
+
checkForOverflow() {
|
|
78
|
+
const viewport = this.$refs.viewport
|
|
79
|
+
// Check if content overflows the viewport
|
|
80
|
+
if (viewport.scrollHeight > viewport.clientHeight) {
|
|
81
|
+
this.showDownArrow = true
|
|
82
|
+
// console.log('Show Down Arrow:', this.showDownArrow)
|
|
83
|
+
} else {
|
|
84
|
+
this.showDownArrow = false
|
|
85
|
+
// console.log('Show Down Arrow:', this.showDownArrow)
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
handleScroll() {
|
|
89
|
+
const viewport = this.$refs.viewport
|
|
90
|
+
// Hide the down arrow if the user scrolls to the bottom
|
|
91
|
+
if (
|
|
92
|
+
viewport.scrollTop + viewport.clientHeight >=
|
|
93
|
+
viewport.scrollHeight - 5
|
|
94
|
+
) {
|
|
95
|
+
this.showDownArrow = false
|
|
96
|
+
} else {
|
|
97
|
+
this.showDownArrow = true
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
}
|
|
102
|
+
</script>
|
|
103
|
+
|
|
104
|
+
<style lang="scss" scoped>
|
|
105
|
+
@import '../../../design/_mixins.scss';
|
|
106
|
+
@import '../../../design/_variables.scss';
|
|
107
|
+
|
|
108
|
+
.asd20-viewport {
|
|
109
|
+
flex-grow: 1;
|
|
110
|
+
overflow: hidden;
|
|
111
|
+
position: relative;
|
|
112
|
+
|
|
113
|
+
&--scrollable {
|
|
114
|
+
overflow-y: auto;
|
|
115
|
+
-webkit-overflow-scrolling: touch;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&--padded {
|
|
119
|
+
padding: space(1);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
&::-webkit-scrollbar {
|
|
123
|
+
-webkit-appearance: none;
|
|
124
|
+
width: 6px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&::-webkit-scrollbar-thumb {
|
|
128
|
+
background-color: var(--website-page__alternate-background-color);
|
|
129
|
+
border-radius: 4px;
|
|
130
|
+
margin: 3px;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
/* CSS-based down arrow */
|
|
134
|
+
|
|
135
|
+
.arrow-wrapper {
|
|
136
|
+
position: relative; /* Ensure arrow-wrapper stays relative to the viewport */
|
|
137
|
+
width: 100%; /* Takes up full width of the viewport */
|
|
138
|
+
height: 0; /* No height is required here */
|
|
139
|
+
margin-bottom: space(1);
|
|
140
|
+
}
|
|
141
|
+
.down-arrow {
|
|
142
|
+
position: absolute;
|
|
143
|
+
bottom: -1.5rem;
|
|
144
|
+
left: 50%;
|
|
145
|
+
transform: translateX(-50%);
|
|
146
|
+
width: 0;
|
|
147
|
+
height: 0;
|
|
148
|
+
border-left: 10px solid transparent;
|
|
149
|
+
border-right: 10px solid transparent;
|
|
150
|
+
border-top: 10px solid rgba(0, 0, 0, 0.7); /* Arrow color */
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
z-index: 10;
|
|
153
|
+
transition: opacity 0.3s ease;
|
|
154
|
+
opacity: 0.7;
|
|
155
|
+
}
|
|
156
|
+
</style>
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
</template>
|
|
23
23
|
|
|
24
24
|
<script>
|
|
25
|
-
import Asd20List from '../../../components/organisms/
|
|
25
|
+
import Asd20List from '../../../components/organisms/Asd20WidgetList'
|
|
26
26
|
import mapFilesToListItems from '../../../helpers/mapFilesToListItems'
|
|
27
27
|
import Asd20ListItem from '../../../components/molecules/Asd20ListItem'
|
|
28
28
|
import Asd20ListCategory from '../../../components/molecules/Asd20ListCategory'
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
</template>
|
|
26
26
|
|
|
27
27
|
<script>
|
|
28
|
-
import Asd20List from '../../../components/organisms/
|
|
28
|
+
import Asd20List from '../../../components/organisms/Asd20WidgetList'
|
|
29
29
|
import mapLinksToListItems from '../../../helpers/mapLinksToListItems'
|
|
30
30
|
import Asd20ListItem from '../../../components/molecules/Asd20ListItem'
|
|
31
31
|
import Asd20ListCategory from '../../../components/molecules/Asd20ListCategory'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="asd20-list" :class="classes"
|
|
2
|
+
<div class="asd20-list" :class="classes">
|
|
3
3
|
<div class="asd20-list__header" v-if="$slots.header || headline">
|
|
4
4
|
<asd20-icon v-if="icon" :name="icon" :size="iconSize" />
|
|
5
5
|
<component
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
></component>
|
|
10
10
|
<slot name="header" />
|
|
11
11
|
</div>
|
|
12
|
-
<asd20-viewport
|
|
12
|
+
<asd20-viewport scrollable :max-height="maxHeight">
|
|
13
13
|
<div class="asd20-list__items" :style="styles">
|
|
14
14
|
<template v-for="(item, index) in items">
|
|
15
15
|
<asd20-list-category
|
|
@@ -91,11 +91,6 @@ export default {
|
|
|
91
91
|
this.columns = Math.round(this.$el.offsetWidth / this.columnWidth)
|
|
92
92
|
// console.log(this.$el.offsetWidth, this.columnWidth, this.columns)
|
|
93
93
|
},
|
|
94
|
-
checkForOverflow() {
|
|
95
|
-
if (this.$refs.viewport) {
|
|
96
|
-
this.$refs.viewport.checkForOverflow()
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
94
|
},
|
|
100
95
|
}
|
|
101
96
|
</script>
|
|
@@ -155,4 +150,4 @@ export default {
|
|
|
155
150
|
// }
|
|
156
151
|
// }
|
|
157
152
|
// }
|
|
158
|
-
</style>
|
|
153
|
+
</style>
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
<script>
|
|
30
30
|
// import axios from 'axios'
|
|
31
|
-
import Asd20List from '../../../components/organisms/
|
|
31
|
+
import Asd20List from '../../../components/organisms/Asd20WidgetList'
|
|
32
32
|
import Asd20ListItem from '../../../components/molecules/Asd20ListItem'
|
|
33
33
|
import Asd20PersonModal from '../../../components/organisms/Asd20PersonModal'
|
|
34
34
|
import mapPeopleToListItems from '../../../helpers/mapPeopleToListItems'
|
|
@@ -24,11 +24,7 @@
|
|
|
24
24
|
/>
|
|
25
25
|
</div>
|
|
26
26
|
<asd20-tab-bar :tabs="tabs" @tabClick="onTabClick" />
|
|
27
|
-
<asd20-viewport
|
|
28
|
-
class="asd20-site-search__results"
|
|
29
|
-
scrollable
|
|
30
|
-
outerScrollable
|
|
31
|
-
>
|
|
27
|
+
<asd20-viewport class="asd20-site-search__results" scrollable>
|
|
32
28
|
<asd20-notification
|
|
33
29
|
v-if="!keywords && !searchingFiles && !searchingPages"
|
|
34
30
|
title="Search by Keyword"
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="asd20-list" :class="classes" ref="listComponent">
|
|
3
|
+
<div class="asd20-list__header" v-if="$slots.header || headline">
|
|
4
|
+
<asd20-icon v-if="icon" :name="icon" :size="iconSize" />
|
|
5
|
+
<component
|
|
6
|
+
:is="headlineTag"
|
|
7
|
+
class="asd20-list__headline"
|
|
8
|
+
v-html="headline"
|
|
9
|
+
></component>
|
|
10
|
+
<slot name="header" />
|
|
11
|
+
</div>
|
|
12
|
+
<asd20-viewport ref="viewport" scrollable :max-height="maxHeight">
|
|
13
|
+
<div class="asd20-list__items" :style="styles">
|
|
14
|
+
<template v-for="(item, index) in items">
|
|
15
|
+
<asd20-list-category
|
|
16
|
+
v-if="item.type === 'category'"
|
|
17
|
+
v-bind="type"
|
|
18
|
+
:key="index"
|
|
19
|
+
/>
|
|
20
|
+
<asd20-list-item v-else v-bind="item" :key="index" />
|
|
21
|
+
</template>
|
|
22
|
+
<slot />
|
|
23
|
+
</div>
|
|
24
|
+
</asd20-viewport>
|
|
25
|
+
<div class="asd20-list__footer" v-if="$slots.footer">
|
|
26
|
+
<slot name="footer" />
|
|
27
|
+
</div>
|
|
28
|
+
<!-- <resize-observer @notify="handleResize" /> -->
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script>
|
|
33
|
+
// import { ResizeObserver } from 'vue-resize'
|
|
34
|
+
import Asd20Viewport from '../../../components/atoms/Asd20WidgetViewport'
|
|
35
|
+
import Asd20Icon from '../../../components/atoms/Asd20Icon'
|
|
36
|
+
import Asd20ListItem from '../../../components/molecules/Asd20ListItem'
|
|
37
|
+
import Asd20ListCategory from '../../../components/molecules/Asd20ListCategory'
|
|
38
|
+
|
|
39
|
+
export default {
|
|
40
|
+
name: 'Asd20List',
|
|
41
|
+
|
|
42
|
+
data: () => ({
|
|
43
|
+
columns: 1,
|
|
44
|
+
}),
|
|
45
|
+
|
|
46
|
+
components: {
|
|
47
|
+
Asd20Viewport,
|
|
48
|
+
Asd20Icon,
|
|
49
|
+
Asd20ListItem,
|
|
50
|
+
Asd20ListCategory,
|
|
51
|
+
// ResizeObserver,
|
|
52
|
+
},
|
|
53
|
+
|
|
54
|
+
props: {
|
|
55
|
+
headline: { type: String, default: '' },
|
|
56
|
+
headlineTag: { type: String, default: 'h2' },
|
|
57
|
+
/**
|
|
58
|
+
* This is long form field
|
|
59
|
+
*/
|
|
60
|
+
description: { type: String, default: '' },
|
|
61
|
+
/**
|
|
62
|
+
* to automap Asd20ListItem map your object for its props: label, thumbnail, textAvatar, description, badge, link, etc.
|
|
63
|
+
*/
|
|
64
|
+
items: { type: Array, default: () => [] },
|
|
65
|
+
icon: { type: String, default: '' },
|
|
66
|
+
iconSize: { type: String, default: 'lg' },
|
|
67
|
+
callToAction: { type: Object, default: null },
|
|
68
|
+
multiColumn: { type: Boolean, default: false },
|
|
69
|
+
columnWidth: { type: Number, default: 320 },
|
|
70
|
+
maxHeight: { type: String, default: 'none' },
|
|
71
|
+
},
|
|
72
|
+
|
|
73
|
+
computed: {
|
|
74
|
+
classes() {
|
|
75
|
+
return {
|
|
76
|
+
'asd20-list--multi-column': this.multiColumn && this.columns > 1,
|
|
77
|
+
'asd20-list--label': this.label,
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
styles() {
|
|
81
|
+
return `--columns: ${this.columns}`
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
mounted() {
|
|
85
|
+
this.handleResize()
|
|
86
|
+
window.addEventListener('resize', this.handleResize)
|
|
87
|
+
},
|
|
88
|
+
|
|
89
|
+
methods: {
|
|
90
|
+
handleResize() {
|
|
91
|
+
this.columns = Math.round(this.$el.offsetWidth / this.columnWidth)
|
|
92
|
+
// console.log(this.$el.offsetWidth, this.columnWidth, this.columns)
|
|
93
|
+
},
|
|
94
|
+
checkForOverflow() {
|
|
95
|
+
if (this.$refs.viewport) {
|
|
96
|
+
this.$refs.viewport.checkForOverflow()
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
}
|
|
101
|
+
</script>
|
|
102
|
+
|
|
103
|
+
<style lang="scss" scoped>
|
|
104
|
+
@import '../../../design/_mixins.scss';
|
|
105
|
+
@import '../../../design/_variables.scss';
|
|
106
|
+
|
|
107
|
+
.asd20-list__header {
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
align-items: center;
|
|
111
|
+
margin-bottom: space(0.5);
|
|
112
|
+
.asd20-icon {
|
|
113
|
+
margin-right: space(0.5);
|
|
114
|
+
--line-color: var(--website-icon__line-color);
|
|
115
|
+
--fill-color: var(--website-icon__fill-color);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.asd20-list__headline {
|
|
120
|
+
font-size: 1.25rem !important;
|
|
121
|
+
color: var(--color__primary);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.asd20-list--multi-column {
|
|
125
|
+
.asd20-list__items {
|
|
126
|
+
list-style: none;
|
|
127
|
+
padding: 0;
|
|
128
|
+
display: flex;
|
|
129
|
+
flex-wrap: wrap;
|
|
130
|
+
width: 100%;
|
|
131
|
+
}
|
|
132
|
+
&::v-deep .asd20-list-item {
|
|
133
|
+
width: calc(100% / var(--columns));
|
|
134
|
+
position: relative;
|
|
135
|
+
word-break: normal;
|
|
136
|
+
|
|
137
|
+
&--bordered {
|
|
138
|
+
box-shadow: none !important;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// @media (min-width: 767px) {
|
|
144
|
+
// .asd20-list--multi-column {
|
|
145
|
+
// &::v-deep .asd20-list-item {
|
|
146
|
+
// width: calc(100% / 2);
|
|
147
|
+
// }
|
|
148
|
+
// }
|
|
149
|
+
// }
|
|
150
|
+
|
|
151
|
+
// @media (min-width: 1024px) {
|
|
152
|
+
// .asd20-list--multi-column {
|
|
153
|
+
// &::v-deep .asd20-list-item {
|
|
154
|
+
// width: calc(100% / 3);
|
|
155
|
+
// }
|
|
156
|
+
// }
|
|
157
|
+
// }
|
|
158
|
+
</style>
|