@asd20/ui 3.2.861 → 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 -75
- package/src/components/atoms/Asd20WidgetViewport/index.vue +156 -0
- package/src/components/molecules/Asd20Picker/index.vue +5 -1
- 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/Asd20WidgetList/index.vue +158 -0
package/package.json
CHANGED
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<div :class="classes" :style="styles" ref="viewport" @scroll="handleScroll">
|
|
4
|
-
<slot />
|
|
5
|
-
|
|
6
|
-
<!-- CSS-based down arrow (conditionally displayed) -->
|
|
7
|
-
</div>
|
|
8
|
-
<div class="arrow-wrapper">
|
|
9
|
-
<div v-if="showDownArrow" class="down-arrow"></div>
|
|
10
|
-
</div>
|
|
11
|
-
</div>
|
|
2
|
+
<div :class="classes" :style="styles"><slot /></div>
|
|
12
3
|
</template>
|
|
13
4
|
|
|
14
5
|
<script>
|
|
@@ -19,11 +10,6 @@ export default {
|
|
|
19
10
|
padded: { type: Boolean, default: false },
|
|
20
11
|
maxHeight: { type: String, default: '' },
|
|
21
12
|
},
|
|
22
|
-
data() {
|
|
23
|
-
return {
|
|
24
|
-
showDownArrow: false, // Track whether the down arrow should be shown
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
13
|
computed: {
|
|
28
14
|
classes() {
|
|
29
15
|
return {
|
|
@@ -38,59 +24,23 @@ export default {
|
|
|
38
24
|
}
|
|
39
25
|
},
|
|
40
26
|
},
|
|
41
|
-
mounted() {
|
|
42
|
-
this.checkForOverflow()
|
|
43
|
-
window.addEventListener('resize', this.checkForOverflow)
|
|
44
|
-
},
|
|
45
|
-
beforeDestroy() {
|
|
46
|
-
window.removeEventListener('resize', this.checkForOverflow)
|
|
47
|
-
},
|
|
48
|
-
methods: {
|
|
49
|
-
checkForOverflow() {
|
|
50
|
-
const viewport = this.$refs.viewport
|
|
51
|
-
// Check if content overflows the viewport
|
|
52
|
-
if (viewport.scrollHeight > viewport.clientHeight) {
|
|
53
|
-
this.showDownArrow = true
|
|
54
|
-
// console.log('Show Down Arrow:', this.showDownArrow)
|
|
55
|
-
} else {
|
|
56
|
-
this.showDownArrow = false
|
|
57
|
-
// console.log('Show Down Arrow:', this.showDownArrow)
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
handleScroll() {
|
|
61
|
-
const viewport = this.$refs.viewport
|
|
62
|
-
// Hide the down arrow if the user scrolls to the bottom
|
|
63
|
-
if (
|
|
64
|
-
viewport.scrollTop + viewport.clientHeight >=
|
|
65
|
-
viewport.scrollHeight - 5
|
|
66
|
-
) {
|
|
67
|
-
this.showDownArrow = false
|
|
68
|
-
} else {
|
|
69
|
-
this.showDownArrow = true
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
27
|
}
|
|
74
28
|
</script>
|
|
75
29
|
|
|
76
30
|
<style lang="scss" scoped>
|
|
77
31
|
@import '../../../design/_mixins.scss';
|
|
78
32
|
@import '../../../design/_variables.scss';
|
|
79
|
-
|
|
80
33
|
.asd20-viewport {
|
|
81
34
|
flex-grow: 1;
|
|
82
35
|
overflow: hidden;
|
|
83
36
|
position: relative;
|
|
84
|
-
|
|
85
37
|
&--scrollable {
|
|
86
38
|
overflow-y: auto;
|
|
87
39
|
-webkit-overflow-scrolling: touch;
|
|
88
40
|
}
|
|
89
|
-
|
|
90
41
|
&--padded {
|
|
91
42
|
padding: space(1);
|
|
92
43
|
}
|
|
93
|
-
|
|
94
44
|
&::-webkit-scrollbar {
|
|
95
45
|
-webkit-appearance: none;
|
|
96
46
|
width: 6px;
|
|
@@ -102,27 +52,4 @@ export default {
|
|
|
102
52
|
margin: 3px;
|
|
103
53
|
}
|
|
104
54
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
.arrow-wrapper {
|
|
108
|
-
position: relative; /* Ensure arrow-wrapper stays relative to the viewport */
|
|
109
|
-
width: 100%; /* Takes up full width of the viewport */
|
|
110
|
-
height: 0; /* No height is required here */
|
|
111
|
-
margin-bottom: space(1);
|
|
112
|
-
}
|
|
113
|
-
.down-arrow {
|
|
114
|
-
position: absolute;
|
|
115
|
-
bottom: -1.5rem;
|
|
116
|
-
left: 50%;
|
|
117
|
-
transform: translateX(-50%);
|
|
118
|
-
width: 0;
|
|
119
|
-
height: 0;
|
|
120
|
-
border-left: 10px solid transparent;
|
|
121
|
-
border-right: 10px solid transparent;
|
|
122
|
-
border-top: 10px solid rgba(0, 0, 0, 0.7); /* Arrow color */
|
|
123
|
-
cursor: pointer;
|
|
124
|
-
z-index: 10;
|
|
125
|
-
transition: opacity 0.3s ease;
|
|
126
|
-
opacity: 0.7;
|
|
127
|
-
}
|
|
128
|
-
</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>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
windowed
|
|
22
22
|
:icon="modalIcon"
|
|
23
23
|
>
|
|
24
|
-
<asd20-viewport scrollable>
|
|
24
|
+
<asd20-viewport scrollable outerScrollable>
|
|
25
25
|
<asd20-list-item
|
|
26
26
|
v-if="organization.title !== 'Academy District 20'"
|
|
27
27
|
class="district-link"
|
|
@@ -293,6 +293,7 @@ export default {
|
|
|
293
293
|
|
|
294
294
|
.asd20-picker__modal {
|
|
295
295
|
border-bottom: 2px solid rgba(235, 235, 235, 0.8);
|
|
296
|
+
|
|
296
297
|
.district-link {
|
|
297
298
|
margin-left: space(0.5) !important;
|
|
298
299
|
font-weight: bold;
|
|
@@ -305,6 +306,9 @@ export default {
|
|
|
305
306
|
}
|
|
306
307
|
}
|
|
307
308
|
height: min-content;
|
|
309
|
+
&::v-deep .arrow-wrapper {
|
|
310
|
+
display: none !important;
|
|
311
|
+
}
|
|
308
312
|
&::v-deep h2 {
|
|
309
313
|
font-size: 1.15rem;
|
|
310
314
|
margin: space(0.5) 0;
|
|
@@ -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'
|
|
@@ -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>
|