@uqds/card 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/README.md +26 -0
- package/package.json +42 -0
- package/src/scss/_component.scss +209 -0
- package/src/scss/_global.scss +70 -0
package/README.md
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# @uqds/card
|
|
2
|
+
|
|
3
|
+
> Card components
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
### Installation
|
|
8
|
+
|
|
9
|
+
With Yarn:
|
|
10
|
+
```shell
|
|
11
|
+
yarn add @uqds/card
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
With NPM:
|
|
15
|
+
```shell
|
|
16
|
+
npm i @uqds/card
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Dependency graph
|
|
22
|
+
|
|
23
|
+
```shell
|
|
24
|
+
@uqds/card
|
|
25
|
+
└─ @uqds/core
|
|
26
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@uqds/card",
|
|
3
|
+
"version": "0.0.5-alpha.0",
|
|
4
|
+
"description": "Card components",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"uqds",
|
|
7
|
+
"uq",
|
|
8
|
+
"University of Queensland",
|
|
9
|
+
"design system",
|
|
10
|
+
"scss",
|
|
11
|
+
"sass",
|
|
12
|
+
"css",
|
|
13
|
+
"card"
|
|
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,209 @@
|
|
|
1
|
+
@use '@uqds/core/src/scss/global' as core;
|
|
2
|
+
@use 'global' as *;
|
|
3
|
+
|
|
4
|
+
// Card Default
|
|
5
|
+
.uq-card {
|
|
6
|
+
position: relative;
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
height: 100%;
|
|
10
|
+
background-color: core.$uq-white;
|
|
11
|
+
border: 1px solid core.$uq-neutral-light60;
|
|
12
|
+
border-radius: core.$space-xs;
|
|
13
|
+
color: core.$uq-neutral-dark60;
|
|
14
|
+
line-height: core.$space-m;
|
|
15
|
+
overflow-wrap: break-word;
|
|
16
|
+
word-wrap: break-word;
|
|
17
|
+
|
|
18
|
+
// Link that wraps the whole card
|
|
19
|
+
&__link {
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 0;
|
|
22
|
+
right: 0;
|
|
23
|
+
bottom: 0;
|
|
24
|
+
left: 0;
|
|
25
|
+
text-indent: -1000%;
|
|
26
|
+
box-shadow: 0 core.$space-xs core.$space-xs rgba(core.$uq-neutral-dark80, 0.05);
|
|
27
|
+
transition: all ease .25s;
|
|
28
|
+
z-index: 10;
|
|
29
|
+
|
|
30
|
+
&:hover,
|
|
31
|
+
&:focus {
|
|
32
|
+
box-shadow: 0 core.$space-s core.$space rgba(core.$uq-neutral-dark80, 0.15);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&__image-wrapper {
|
|
37
|
+
max-height: 190px;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
|
|
40
|
+
@media #{core.$screen-md-up} {
|
|
41
|
+
max-height: 15rem;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
&__image {
|
|
45
|
+
position: relative;
|
|
46
|
+
padding-bottom: 70%;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
|
|
49
|
+
img {
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: 50%;
|
|
52
|
+
left: 50%;
|
|
53
|
+
width: 100%;
|
|
54
|
+
transform: translate(-50%, -50%);
|
|
55
|
+
-o-object-fit: cover;
|
|
56
|
+
object-fit: cover;
|
|
57
|
+
z-index: 0;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&__content-wrapper {
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
flex-grow: 1;
|
|
65
|
+
}
|
|
66
|
+
&__content {
|
|
67
|
+
flex-grow: 1;
|
|
68
|
+
padding: core.$space-m;
|
|
69
|
+
|
|
70
|
+
:last-child .uq-card__title {
|
|
71
|
+
margin-bottom: core.$space-none;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&__header {
|
|
76
|
+
:last-child {
|
|
77
|
+
margin: core.$space-none core.$space-none core.$space-s;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&__body {
|
|
82
|
+
p:last-child {
|
|
83
|
+
margin-bottom: core.$space-none;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&__actions {
|
|
88
|
+
padding: core.$space-none core.$space-m core.$space-m;
|
|
89
|
+
|
|
90
|
+
p:last-child {
|
|
91
|
+
margin-bottom: core.$space-none;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&__title {
|
|
96
|
+
font-size: core.$font-size-l;
|
|
97
|
+
color: core.$uq-neutral-dark80;
|
|
98
|
+
margin: core.$space-none core.$space-none core.$space-s;
|
|
99
|
+
|
|
100
|
+
@media #{core.$screen-md-up} {
|
|
101
|
+
font-size: core.$font-size-xl;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&-super {
|
|
105
|
+
font-size: core.$font-size-s;
|
|
106
|
+
font-weight: 500;
|
|
107
|
+
color: core.$uq-purple-light;
|
|
108
|
+
text-transform: uppercase;
|
|
109
|
+
margin: core.$space-none core.$space-none core.$space-s;
|
|
110
|
+
|
|
111
|
+
@media #{core.$screen-md-up} {
|
|
112
|
+
font-size: core.$font-size;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&--grey {
|
|
116
|
+
font-weight: 400;
|
|
117
|
+
color: core.$uq-neutral-dark60;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// Shaded
|
|
123
|
+
&--shaded {
|
|
124
|
+
background-color: $card-shaded-bg;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* Additional style rules */
|
|
129
|
+
.uq-grid {
|
|
130
|
+
|
|
131
|
+
// On smaller viewports, Story & Event cards when > 3 renders as lists
|
|
132
|
+
@media #{core.$screen-md-down} {
|
|
133
|
+
|
|
134
|
+
&__col {
|
|
135
|
+
|
|
136
|
+
// When there are 3 items
|
|
137
|
+
@include with-count(3) {
|
|
138
|
+
@include card-list-style();
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// When there are 4 items
|
|
142
|
+
@include with-count(4) {
|
|
143
|
+
@include card-list-style();
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Full width cards
|
|
149
|
+
&__col--md-8,
|
|
150
|
+
&__col--xl-12 {
|
|
151
|
+
|
|
152
|
+
.uq-card {
|
|
153
|
+
|
|
154
|
+
@media #{core.$screen-md-up} {
|
|
155
|
+
flex-direction: row;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
&__image-wrapper {
|
|
159
|
+
min-width: 100%;
|
|
160
|
+
overflow: hidden;
|
|
161
|
+
|
|
162
|
+
@media #{core.$screen-md-up} {
|
|
163
|
+
min-width: 50%;
|
|
164
|
+
max-height: 100%;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
&__image {
|
|
168
|
+
padding-bottom: 70%;
|
|
169
|
+
|
|
170
|
+
@media #{core.$screen-md-up} {
|
|
171
|
+
min-height: 100%;
|
|
172
|
+
padding-bottom: 0%;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
&__content-wrapper {
|
|
176
|
+
min-width: 100%;
|
|
177
|
+
|
|
178
|
+
@media #{core.$screen-md-up} {
|
|
179
|
+
min-width: 50%;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
&__content {
|
|
183
|
+
padding: core.$space-m;
|
|
184
|
+
|
|
185
|
+
@media #{core.$screen-md-up} {
|
|
186
|
+
padding: core.$space-xxxl core.$space-xxxl core.$space-m;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
&__body {
|
|
190
|
+
p {
|
|
191
|
+
@include truncate-card-1col-body-text;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
&__actions {
|
|
196
|
+
padding: core.$space-none core.$space-m core.$space-m;
|
|
197
|
+
|
|
198
|
+
@media #{core.$screen-md-up} {
|
|
199
|
+
padding: core.$space-none core.$space-xxxl core.$space-xxxl;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
// Set height of card to not equalise
|
|
207
|
+
.height-non-equalised .uq-card {
|
|
208
|
+
height: auto;
|
|
209
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
@use '@uqds/core/src/scss/global' as core;
|
|
2
|
+
|
|
3
|
+
$card-shaded-bg: core.$uq-neutral-light80;
|
|
4
|
+
|
|
5
|
+
// Truncate card body text
|
|
6
|
+
@mixin truncate-card-1col-body-text {
|
|
7
|
+
white-space: normal;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
max-height: 75px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// Find number of child items in a parent container and apply style based on it
|
|
13
|
+
@mixin with-count($n) {
|
|
14
|
+
@if $n == 1 {
|
|
15
|
+
&:first-child:nth-last-child(1) {
|
|
16
|
+
@content;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
@else {
|
|
20
|
+
&:first-child:nth-last-child(#{$n}),
|
|
21
|
+
&:first-child:nth-last-child(#{$n}) ~ & {
|
|
22
|
+
@content;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Card list styles for story/event cards when more than 2 in the grid on small viewports.
|
|
28
|
+
@mixin card-list-style() {
|
|
29
|
+
.uq-card {
|
|
30
|
+
|
|
31
|
+
&--story,
|
|
32
|
+
&--event {
|
|
33
|
+
|
|
34
|
+
flex-direction: row;
|
|
35
|
+
padding-bottom: 1rem;
|
|
36
|
+
border: none;
|
|
37
|
+
border-bottom: 1px solid core.$uq-neutral-light60;
|
|
38
|
+
box-shadow: 0 core.$space-xs core.$space-xs rgba(core.$uq-neutral-dark80, 0);
|
|
39
|
+
|
|
40
|
+
&:hover,
|
|
41
|
+
&:focus {
|
|
42
|
+
box-shadow: 0 core.$space-s core.$space-s rgba(core.$uq-neutral-dark80, 0.1);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.uq-card__image__wrapper {
|
|
46
|
+
min-width: 98px;
|
|
47
|
+
min-height: 100%;
|
|
48
|
+
}
|
|
49
|
+
.uq-card__image {
|
|
50
|
+
min-height: 100%;
|
|
51
|
+
padding-bottom: 0%;
|
|
52
|
+
}
|
|
53
|
+
.uq-card__content__wrapper {
|
|
54
|
+
min-width: 50%;
|
|
55
|
+
}
|
|
56
|
+
.uq-card__content {
|
|
57
|
+
padding: core.$space-none core.$space;
|
|
58
|
+
}
|
|
59
|
+
.uq-card__title {
|
|
60
|
+
margin: core.$space-none core.$space-none core.$space-s;
|
|
61
|
+
}
|
|
62
|
+
.uq-card__body {
|
|
63
|
+
display: none;
|
|
64
|
+
}
|
|
65
|
+
.uq-card__actions {
|
|
66
|
+
padding: core.$space-none core.$space core.$space-none;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|