@uqds/lists 0.0.5-alpha.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.
- package/package.json +42 -0
- package/src/scss/_component.scss +108 -0
- package/src/scss/_global.scss +5 -0
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@uqds/lists",
|
|
3
|
+
"version": "0.0.5-alpha.0",
|
|
4
|
+
"description": "The list component package",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"uqds",
|
|
7
|
+
"uq",
|
|
8
|
+
"University of Queensland",
|
|
9
|
+
"design system",
|
|
10
|
+
"scss",
|
|
11
|
+
"sass",
|
|
12
|
+
"css",
|
|
13
|
+
"lists"
|
|
14
|
+
],
|
|
15
|
+
"publishConfig": {
|
|
16
|
+
"access": "public"
|
|
17
|
+
},
|
|
18
|
+
"author": {
|
|
19
|
+
"name": "University of Queensland",
|
|
20
|
+
"email": "webservices@uq.edu.au",
|
|
21
|
+
"url": "https://uq.edu.au"
|
|
22
|
+
},
|
|
23
|
+
"homepage": "https://github.com/uq-its-ss/design-system#readme",
|
|
24
|
+
"license": "ISC",
|
|
25
|
+
"directories": {
|
|
26
|
+
"lib": "src"
|
|
27
|
+
},
|
|
28
|
+
"files": [
|
|
29
|
+
"src/*"
|
|
30
|
+
],
|
|
31
|
+
"repository": {
|
|
32
|
+
"type": "git",
|
|
33
|
+
"url": "git+https://github.com/uq-its-ss/design-system.git"
|
|
34
|
+
},
|
|
35
|
+
"bugs": {
|
|
36
|
+
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
37
|
+
},
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"@uqds/core": "^0.0.5-alpha.0"
|
|
40
|
+
},
|
|
41
|
+
"gitHead": "0d2250c3ff44460d2902ea08102e6423b3fcc3aa"
|
|
42
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
@use '@uqds/core/src/scss/global' as core;
|
|
2
|
+
@use 'global' as *;
|
|
3
|
+
|
|
4
|
+
// Lists
|
|
5
|
+
// For listing of content such as node teasers. It can be applied to <ul> and <div> elements alike.
|
|
6
|
+
//
|
|
7
|
+
// Variants:
|
|
8
|
+
// .vertical-list
|
|
9
|
+
// .vertical-list--ruled - Adds a bottom border on each list item to separate them.
|
|
10
|
+
// .vertical-list--shaded - Adds light grey background to each item and separates them with a small gap.
|
|
11
|
+
// .horizontal-list
|
|
12
|
+
// .horizontal-list--ruled - Adds a right border on each list item to separate them.
|
|
13
|
+
|
|
14
|
+
%vertical-list,
|
|
15
|
+
.vertical-list {
|
|
16
|
+
list-style-type: none;
|
|
17
|
+
margin-bottom: core.$space;
|
|
18
|
+
padding: core.$space-none;
|
|
19
|
+
|
|
20
|
+
&__title {
|
|
21
|
+
font-size: $h3-font-size;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&__item {
|
|
25
|
+
list-style: none;
|
|
26
|
+
padding: core.$space-s core.$space-none; //.75rem 0rem
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&--large-spacing {
|
|
30
|
+
.vertical-list__item {
|
|
31
|
+
padding: core.$space-l core.$space-none;
|
|
32
|
+
|
|
33
|
+
&__date {
|
|
34
|
+
font-size: 90%;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&--ruled {
|
|
40
|
+
.vertical-list__title {
|
|
41
|
+
border-top: 2px solid $border-color;
|
|
42
|
+
padding-top: core.$space-l;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.vertical-list__item {
|
|
46
|
+
border-bottom: 1px solid $border-color;
|
|
47
|
+
padding-top: core.$space; //.75rem
|
|
48
|
+
|
|
49
|
+
&:first-child {
|
|
50
|
+
padding-top: core.$space-none;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&--first {
|
|
54
|
+
border-top: 1px solid $border-color;
|
|
55
|
+
padding-top: core.$space; //.75rem
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&__date {
|
|
59
|
+
font-size: 90%;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
&--shaded {
|
|
64
|
+
.vertical-list__item {
|
|
65
|
+
background: $pane-shaded-bg;
|
|
66
|
+
margin-bottom: core.$space-s;
|
|
67
|
+
padding: core.$space-m;
|
|
68
|
+
|
|
69
|
+
&__date {
|
|
70
|
+
font-size: 90%;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.horizontal-list {
|
|
77
|
+
display: inline-block;
|
|
78
|
+
list-style-type: none;
|
|
79
|
+
padding: core.$space-none;
|
|
80
|
+
margin-bottom: core.$space;
|
|
81
|
+
|
|
82
|
+
&__title {
|
|
83
|
+
font-size: $h3-font-size;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&__item {
|
|
87
|
+
float: left;
|
|
88
|
+
list-style: none;
|
|
89
|
+
padding: core.$space-none core.$space;//0 .75rem;
|
|
90
|
+
margin: core.$space-none core.$space-none core.$space core.$space-none; //0 0 .75rem 0
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&--ruled {
|
|
94
|
+
.horizontal-list__title {
|
|
95
|
+
border-top: 2px solid $border-color;
|
|
96
|
+
padding-top: core.$space-l;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.horizontal-list__item {
|
|
100
|
+
border-right: 1px solid $border-color;
|
|
101
|
+
padding-right: core.$space; //.75rem;
|
|
102
|
+
|
|
103
|
+
&:last-child {
|
|
104
|
+
border: 0;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|