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