@uqds/lists 0.0.5-alpha.0 → 0.0.8-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/dist/css/main.css +1 -0
- package/package.json +8 -4
- package/src/scss/_component.scss +108 -108
- package/src/scss/_global.scss +5 -5
- package/src/scss/main.scss +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.vertical-list{list-style-type:none;margin-bottom:1rem;padding:0}.vertical-list__title{font-size:1.5rem}.vertical-list__item{list-style:none;padding:.5rem 0}.vertical-list--large-spacing .vertical-list__item{padding:2rem 0}.vertical-list--large-spacing .vertical-list__item__date{font-size:90%}.vertical-list--ruled .vertical-list__title{border-top:2px solid #efedeb;padding-top:2rem}.vertical-list--ruled .vertical-list__item{border-bottom:1px solid #efedeb;padding-top:1rem}.vertical-list--ruled .vertical-list__item:first-child{padding-top:0}.vertical-list--ruled .vertical-list__item--first{border-top:1px solid #efedeb;padding-top:1rem}.vertical-list--ruled .vertical-list__item__date{font-size:90%}.vertical-list--shaded .vertical-list__item{background:#f7f6f5;margin-bottom:.5rem;padding:1.5rem}.vertical-list--shaded .vertical-list__item__date{font-size:90%}.horizontal-list{display:inline-block;list-style-type:none;padding:0;margin-bottom:1rem}.horizontal-list__title{font-size:1.5rem}.horizontal-list__item{float:left;list-style:none;padding:0 1rem;margin:0 0 1rem 0}.horizontal-list--ruled .horizontal-list__title{border-top:2px solid #efedeb;padding-top:2rem}.horizontal-list--ruled .horizontal-list__item{border-right:1px solid #efedeb;padding-right:1rem}.horizontal-list--ruled .horizontal-list__item:last-child{border:0}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/lists",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8-alpha.0",
|
|
4
4
|
"description": "The list component package",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -26,8 +26,12 @@
|
|
|
26
26
|
"lib": "src"
|
|
27
27
|
},
|
|
28
28
|
"files": [
|
|
29
|
-
"src/*"
|
|
29
|
+
"src/*",
|
|
30
|
+
"dist/*"
|
|
30
31
|
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"prepare": "gulp -f ../../gulpfile.js --cwd=. prepare"
|
|
34
|
+
},
|
|
31
35
|
"repository": {
|
|
32
36
|
"type": "git",
|
|
33
37
|
"url": "git+https://github.com/uq-its-ss/design-system.git"
|
|
@@ -36,7 +40,7 @@
|
|
|
36
40
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
37
41
|
},
|
|
38
42
|
"dependencies": {
|
|
39
|
-
"@uqds/core": "^0.0.
|
|
43
|
+
"@uqds/core": "^0.0.8-alpha.0"
|
|
40
44
|
},
|
|
41
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "ec1e27ff2c58ae9bdcd0eef7516ad5d57a00bafb"
|
|
42
46
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -1,108 +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
|
-
}
|
|
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
|
+
}
|
package/src/scss/_global.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@use '@uqds/core/src/scss/global' as core;
|
|
2
|
-
|
|
3
|
-
$h3-font-size: core.$font-size-xl;
|
|
4
|
-
$pane-shaded-bg: core.$uq-neutral-light80;
|
|
5
|
-
$border-color: core.$uq-neutral-light60;
|
|
1
|
+
@use '@uqds/core/src/scss/global' as core;
|
|
2
|
+
|
|
3
|
+
$h3-font-size: core.$font-size-xl;
|
|
4
|
+
$pane-shaded-bg: core.$uq-neutral-light80;
|
|
5
|
+
$border-color: core.$uq-neutral-light60;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@use 'component';
|