@uqds/pane 4.0.3-alpha.0 → 4.0.3
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 +4 -4
- package/src/scss/_global.scss +12 -11
- package/src/scss/_pane.scss +12 -12
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
|
|
3
|
+
"version": "4.0.3",
|
|
4
4
|
"description": "Pane component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@uqds/core": "^5.0.
|
|
48
|
-
"@uqds/layout": "^7.0.3
|
|
47
|
+
"@uqds/core": "^5.0.3",
|
|
48
|
+
"@uqds/layout": "^7.0.3"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "48ca7d774fdccf622c3dc6d32364c3e4a17a4bac"
|
|
51
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,25 +15,25 @@
|
|
|
15
15
|
|
|
16
16
|
.uq-pane__title {
|
|
17
17
|
margin: 0;
|
|
18
|
-
color:
|
|
18
|
+
color: var(--uq-black);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.uq-pane__description {
|
|
22
|
-
margin-top:
|
|
22
|
+
margin-top: var(--uq-space-xs);
|
|
23
23
|
|
|
24
24
|
& :last-child {
|
|
25
25
|
margin-bottom: 0;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
& li {
|
|
29
|
-
margin-bottom:
|
|
29
|
+
margin-bottom: var(--uq-space-xs);
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
.uq-pane__image {
|
|
34
34
|
flex-shrink: 0;
|
|
35
35
|
aspect-ratio: 1.5 / 1;
|
|
36
|
-
margin-bottom:
|
|
36
|
+
margin-bottom: var(--uq-space-l);
|
|
37
37
|
position: relative;
|
|
38
38
|
|
|
39
39
|
& img,
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
.uq-pane__video {
|
|
50
50
|
flex-shrink: 0;
|
|
51
51
|
aspect-ratio: 16 / 9;
|
|
52
|
-
margin-bottom:
|
|
52
|
+
margin-bottom: var(--uq-space-l);
|
|
53
53
|
position: relative;
|
|
54
54
|
|
|
55
55
|
& iframe {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
.uq-pane__icon {
|
|
65
|
-
margin-bottom:
|
|
65
|
+
margin-bottom: var(--uq-space-xs);
|
|
66
66
|
|
|
67
67
|
& .uq-icon::before {
|
|
68
68
|
height: 56px;
|
|
@@ -71,12 +71,12 @@
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.uq-pane__actions {
|
|
74
|
-
padding-top:
|
|
74
|
+
padding-top: var(--uq-space-l);
|
|
75
75
|
margin-top: auto;
|
|
76
76
|
display: flex;
|
|
77
77
|
flex-direction: column;
|
|
78
78
|
align-items: start;
|
|
79
|
-
gap:
|
|
79
|
+
gap: var(--uq-space-m);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.uq-pane--text,
|
|
@@ -116,11 +116,11 @@
|
|
|
116
116
|
width: 128px;
|
|
117
117
|
height: 128px;
|
|
118
118
|
border-radius: 50%;
|
|
119
|
-
background:
|
|
119
|
+
background: var(--uq-grey-50);
|
|
120
120
|
display: flex;
|
|
121
121
|
align-items: center;
|
|
122
122
|
justify-content: center;
|
|
123
|
-
margin-bottom:
|
|
123
|
+
margin-bottom: var(--uq-space-m);
|
|
124
124
|
|
|
125
125
|
& .uq-icon::before {
|
|
126
126
|
width: 72px;
|
|
@@ -131,11 +131,11 @@
|
|
|
131
131
|
|
|
132
132
|
.uq-pane--text-shaded,
|
|
133
133
|
.uq-pane--icon-shaded {
|
|
134
|
-
background:
|
|
134
|
+
background: var(--uq-grey-50);
|
|
135
135
|
border-radius: 4px;
|
|
136
136
|
|
|
137
137
|
& .uq-pane__content {
|
|
138
|
-
padding:
|
|
138
|
+
padding: var(--uq-space-l);
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
|