@uqds/pane 4.0.2 → 4.0.3-alpha.1
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 -1
- package/package.json +9 -6
- package/src/scss/_global.scss +12 -11
- package/src/scss/_pane.scss +12 -13
package/dist/css/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.uq-pane{height:100%;display:flex;flex-direction:column}.uq-pane__content{flex:1;display:flex;flex-direction:column}.uq-pane__title{margin:0;color
|
|
1
|
+
.uq-pane{height:100%;display:flex;flex-direction:column}.uq-pane__content{flex:1;display:flex;flex-direction:column}.uq-pane__title{margin:0;color:var(--uq-black)}.uq-pane__description{margin-top:var(--uq-space-xs)}.uq-pane__description :last-child{margin-bottom:0}.uq-pane__description li{margin-bottom:var(--uq-space-xs)}.uq-pane__image{flex-shrink:0;aspect-ratio:1.5/1;margin-bottom:var(--uq-space-l);position:relative}.uq-pane__image img,.uq-pane__image picture{width:100%;height:100%;inset:0;position:absolute;object-fit:cover}.uq-pane__video{flex-shrink:0;aspect-ratio:16/9;margin-bottom:var(--uq-space-l);position:relative}.uq-pane__video iframe{width:100%;height:100%;inset:0;position:absolute;border:0}.uq-pane__icon{margin-bottom:var(--uq-space-xs)}.uq-pane__icon .uq-icon::before{height:56px;width:56px}.uq-pane__actions{padding-top:var(--uq-space-l);margin-top:auto;display:flex;flex-direction:column;align-items:start;gap:var(--uq-space-m)}.uq-pane--text .uq-pane__image,.uq-pane--text .uq-pane__icon,.uq-pane--text .uq-pane__video,.uq-pane--text-shaded .uq-pane__image,.uq-pane--text-shaded .uq-pane__icon,.uq-pane--text-shaded .uq-pane__video{display:none}.uq-pane--image .uq-pane__icon,.uq-pane--image .uq-pane__video{display:none}.uq-pane--video .uq-pane__image,.uq-pane--video .uq-pane__icon{display:none}.uq-pane--icon .uq-pane__image,.uq-pane--icon .uq-pane__video,.uq-pane--icon-large .uq-pane__image,.uq-pane--icon-large .uq-pane__video,.uq-pane--icon-shaded .uq-pane__image,.uq-pane--icon-shaded .uq-pane__video{display:none}.uq-pane--icon-large .uq-pane__icon{width:128px;height:128px;border-radius:50%;background:var(--uq-grey-50);display:flex;align-items:center;justify-content:center;margin-bottom:var(--uq-space-m)}.uq-pane--icon-large .uq-pane__icon .uq-icon::before{width:72px;height:72px}.uq-pane--text-shaded,.uq-pane--icon-shaded{background:var(--uq-grey-50);border-radius:4px}.uq-pane--text-shaded .uq-pane__content,.uq-pane--icon-shaded .uq-pane__content{padding:var(--uq-space-l)}@container (width > 667px){.uq-card-grid--target-1x .uq-pane{display:flex;flex-direction:row-reverse;gap:var(--layout-gap);align-items:center}.uq-card-grid--target-1x .uq-pane__image{width:50%;height:100%;margin:0}.uq-card-grid--target-1x .uq-pane__video{width:50%;margin:0}.uq-card-grid--target-1x .uq-pane__content{width:50%}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/pane",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.3-alpha.1",
|
|
4
4
|
"description": "Pane component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
"author": {
|
|
19
19
|
"name": "University of Queensland",
|
|
20
|
-
"
|
|
21
|
-
"url": "https://uq.edu.au"
|
|
20
|
+
"url": "https://about.uq.edu.au/web-feedback?r=https://design-system.uq.edu.au"
|
|
22
21
|
},
|
|
23
22
|
"homepage": "https://github.com/uq-its-ss/design-system#readme",
|
|
24
23
|
"license": "ISC",
|
|
@@ -29,6 +28,10 @@
|
|
|
29
28
|
"src/*",
|
|
30
29
|
"dist/*"
|
|
31
30
|
],
|
|
31
|
+
"exports": {
|
|
32
|
+
"./dist/css/main.css": "./dist/css/main.css",
|
|
33
|
+
"./src/scss/*": "./src/scss/*"
|
|
34
|
+
},
|
|
32
35
|
"style": "dist/css/main.css",
|
|
33
36
|
"scripts": {
|
|
34
37
|
"prepare": "gulp -f ../../gulpfile.js --cwd=. prepare"
|
|
@@ -41,8 +44,8 @@
|
|
|
41
44
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
42
45
|
},
|
|
43
46
|
"dependencies": {
|
|
44
|
-
"@uqds/core": "^5.0.
|
|
45
|
-
"@uqds/layout": "^7.0.
|
|
47
|
+
"@uqds/core": "^5.0.3-alpha.0",
|
|
48
|
+
"@uqds/layout": "^7.0.3-alpha.1"
|
|
46
49
|
},
|
|
47
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "999347ce02f23d7425d7c9af225531a43e01f4e9"
|
|
48
51
|
}
|
package/src/scss/_global.scss
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
@use "@uqds/core/src/scss/_global" as core;
|
|
2
2
|
|
|
3
3
|
@mixin pane-shaded {
|
|
4
|
-
background:
|
|
4
|
+
background: var(--uq-grey-50);
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
@mixin pane-white {
|
|
8
|
-
background:
|
|
8
|
+
background: var(--uq-white);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@mixin pane-outline {
|
|
12
|
-
border: 2px solid
|
|
12
|
+
border: 2px solid var(--uq-grey-200);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
@mixin pane-ruled {
|
|
16
|
-
border-bottom: 2px solid
|
|
17
|
-
border-top: 2px solid
|
|
16
|
+
border-bottom: 2px solid var(--uq-grey-200);
|
|
17
|
+
border-top: 2px solid var(--uq-grey-200);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
@mixin pane-vertical-spacing {
|
|
21
|
-
margin:
|
|
21
|
+
margin: var(--uq-space-xl) var(--uq-space-none);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@mixin pane-dark-tint {
|
|
25
25
|
@extend %light-palette;
|
|
26
|
-
background-color:
|
|
26
|
+
background-color: var(--uq-grey-800);
|
|
27
27
|
|
|
28
28
|
.uq-pane__title {
|
|
29
29
|
@extend %light-palette;
|
|
@@ -31,16 +31,17 @@
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
@mixin pane-has-footer {
|
|
34
|
-
padding:
|
|
34
|
+
padding: var(--uq-space-none);
|
|
35
35
|
|
|
36
36
|
.uq-pane {
|
|
37
37
|
&__content {
|
|
38
|
-
padding:
|
|
38
|
+
padding: var(--uq-space-l) var(--uq-space-l) var(--uq-space-m)
|
|
39
|
+
var(--uq-space-l); //1.8rem 1.8rem 1rem 1.8rem
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
&__footer {
|
|
42
|
-
background-color:
|
|
43
|
-
padding:
|
|
43
|
+
background-color: var(--uq-grey-50);
|
|
44
|
+
padding: var(--uq-space-l); //1.8rem;
|
|
44
45
|
}
|
|
45
46
|
}
|
|
46
47
|
}
|
package/src/scss/_pane.scss
CHANGED
|
@@ -15,26 +15,25 @@
|
|
|
15
15
|
|
|
16
16
|
.uq-pane__title {
|
|
17
17
|
margin: 0;
|
|
18
|
-
color:
|
|
19
|
-
font-size: 24px;
|
|
18
|
+
color: var(--uq-black);
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
.uq-pane__description {
|
|
23
|
-
margin-top:
|
|
22
|
+
margin-top: var(--uq-space-xs);
|
|
24
23
|
|
|
25
24
|
& :last-child {
|
|
26
25
|
margin-bottom: 0;
|
|
27
26
|
}
|
|
28
27
|
|
|
29
28
|
& li {
|
|
30
|
-
margin-bottom:
|
|
29
|
+
margin-bottom: var(--uq-space-xs);
|
|
31
30
|
}
|
|
32
31
|
}
|
|
33
32
|
|
|
34
33
|
.uq-pane__image {
|
|
35
34
|
flex-shrink: 0;
|
|
36
35
|
aspect-ratio: 1.5 / 1;
|
|
37
|
-
margin-bottom:
|
|
36
|
+
margin-bottom: var(--uq-space-l);
|
|
38
37
|
position: relative;
|
|
39
38
|
|
|
40
39
|
& img,
|
|
@@ -50,7 +49,7 @@
|
|
|
50
49
|
.uq-pane__video {
|
|
51
50
|
flex-shrink: 0;
|
|
52
51
|
aspect-ratio: 16 / 9;
|
|
53
|
-
margin-bottom:
|
|
52
|
+
margin-bottom: var(--uq-space-l);
|
|
54
53
|
position: relative;
|
|
55
54
|
|
|
56
55
|
& iframe {
|
|
@@ -63,7 +62,7 @@
|
|
|
63
62
|
}
|
|
64
63
|
|
|
65
64
|
.uq-pane__icon {
|
|
66
|
-
margin-bottom:
|
|
65
|
+
margin-bottom: var(--uq-space-xs);
|
|
67
66
|
|
|
68
67
|
& .uq-icon::before {
|
|
69
68
|
height: 56px;
|
|
@@ -72,12 +71,12 @@
|
|
|
72
71
|
}
|
|
73
72
|
|
|
74
73
|
.uq-pane__actions {
|
|
75
|
-
padding-top:
|
|
74
|
+
padding-top: var(--uq-space-l);
|
|
76
75
|
margin-top: auto;
|
|
77
76
|
display: flex;
|
|
78
77
|
flex-direction: column;
|
|
79
78
|
align-items: start;
|
|
80
|
-
gap:
|
|
79
|
+
gap: var(--uq-space-m);
|
|
81
80
|
}
|
|
82
81
|
|
|
83
82
|
.uq-pane--text,
|
|
@@ -117,11 +116,11 @@
|
|
|
117
116
|
width: 128px;
|
|
118
117
|
height: 128px;
|
|
119
118
|
border-radius: 50%;
|
|
120
|
-
background:
|
|
119
|
+
background: var(--uq-grey-50);
|
|
121
120
|
display: flex;
|
|
122
121
|
align-items: center;
|
|
123
122
|
justify-content: center;
|
|
124
|
-
margin-bottom:
|
|
123
|
+
margin-bottom: var(--uq-space-m);
|
|
125
124
|
|
|
126
125
|
& .uq-icon::before {
|
|
127
126
|
width: 72px;
|
|
@@ -132,11 +131,11 @@
|
|
|
132
131
|
|
|
133
132
|
.uq-pane--text-shaded,
|
|
134
133
|
.uq-pane--icon-shaded {
|
|
135
|
-
background:
|
|
134
|
+
background: var(--uq-grey-50);
|
|
136
135
|
border-radius: 4px;
|
|
137
136
|
|
|
138
137
|
& .uq-pane__content {
|
|
139
|
-
padding:
|
|
138
|
+
padding: var(--uq-space-l);
|
|
140
139
|
}
|
|
141
140
|
}
|
|
142
141
|
|