@uqds/pane 0.1.0-alpha.2 → 0.1.0-alpha.4
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 +1 -1
- package/dist/css/main.css +1 -1
- package/package.json +5 -3
- package/src/scss/_pane.scss +22 -0
package/README.md
CHANGED
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:#19151c}.uq-pane__description{margin-top:.5rem}.uq-pane__image{flex-shrink:0;aspect-ratio:1.5/1;margin-bottom:1.5rem;position:relative}.uq-pane__image img,.uq-pane__image picture{width:100%;height:100%;inset:0;position:absolute;object-fit:cover}.uq-pane__icon{margin-bottom:.5rem}.uq-pane__icon .uq-icon::before{height:56px;width:56px}.uq-pane__actions{padding-top:1.5rem;margin-top:auto;display:flex;flex-direction:column;align-items:start;gap:1rem}.uq-pane--text .uq-pane__image,.uq-pane--text .uq-pane__icon,.uq-pane--text-shaded .uq-pane__image,.uq-pane--text-shaded .uq-pane__icon{display:none}.uq-pane--image .uq-pane__icon{display:none}.uq-pane--icon .uq-pane__image,.uq-pane--icon-large .uq-pane__image,.uq-pane--icon-shaded .uq-pane__image{display:none}.uq-pane--icon-large .uq-pane__icon{width:128px;height:128px;border-radius:50%;background:#f3f3f4;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.uq-pane--icon-large .uq-pane__icon .uq-icon::before{width:72px;height:72px}.uq-pane--text-shaded,.uq-pane--icon-shaded{background:#f3f3f4;border-radius:4px}.uq-pane--text-shaded .uq-pane__content,.uq-pane--icon-shaded .uq-pane__content{padding:1.5rem}
|
|
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:#19151c}.uq-pane__description{margin-top:.5rem}.uq-pane__image{flex-shrink:0;aspect-ratio:1.5/1;margin-bottom:1.5rem;position:relative}.uq-pane__image img,.uq-pane__image picture{width:100%;height:100%;inset:0;position:absolute;object-fit:cover}.uq-pane__icon{margin-bottom:.5rem}.uq-pane__icon .uq-icon::before{height:56px;width:56px}.uq-pane__actions{padding-top:1.5rem;margin-top:auto;display:flex;flex-direction:column;align-items:start;gap:1rem}.uq-pane--text .uq-pane__image,.uq-pane--text .uq-pane__icon,.uq-pane--text-shaded .uq-pane__image,.uq-pane--text-shaded .uq-pane__icon{display:none}.uq-pane--image .uq-pane__icon{display:none}.uq-pane--icon .uq-pane__image,.uq-pane--icon-large .uq-pane__image,.uq-pane--icon-shaded .uq-pane__image{display:none}.uq-pane--icon-large .uq-pane__icon{width:128px;height:128px;border-radius:50%;background:#f3f3f4;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.uq-pane--icon-large .uq-pane__icon .uq-icon::before{width:72px;height:72px}.uq-pane--text-shaded,.uq-pane--icon-shaded{background:#f3f3f4;border-radius:4px}.uq-pane--text-shaded .uq-pane__content,.uq-pane--icon-shaded .uq-pane__content{padding:1.5rem}@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__content{width:50%}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/pane",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.4",
|
|
4
4
|
"description": "Pane component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
"src/*",
|
|
30
30
|
"dist/*"
|
|
31
31
|
],
|
|
32
|
+
"style": "dist/css/main.css",
|
|
32
33
|
"scripts": {
|
|
33
34
|
"prepare": "gulp -f ../../gulpfile.js --cwd=. prepare"
|
|
34
35
|
},
|
|
@@ -40,7 +41,8 @@
|
|
|
40
41
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
41
42
|
},
|
|
42
43
|
"dependencies": {
|
|
43
|
-
"@uqds/core": "^1.2.0-alpha.1"
|
|
44
|
+
"@uqds/core": "^1.2.0-alpha.1",
|
|
45
|
+
"@uqds/layout": "^1.0.0-alpha.9"
|
|
44
46
|
},
|
|
45
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "b5f64047cc1a68b74afccad2044299784c8bfa55"
|
|
46
48
|
}
|
package/src/scss/_pane.scss
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@use "@uqds/core/src/scss/global" as core;
|
|
2
|
+
@use "@uqds/layout/src/scss/global" as layout;
|
|
2
3
|
|
|
3
4
|
.uq-pane {
|
|
4
5
|
height: 100%;
|
|
@@ -104,3 +105,24 @@
|
|
|
104
105
|
padding: core.$space-l;
|
|
105
106
|
}
|
|
106
107
|
}
|
|
108
|
+
|
|
109
|
+
.uq-card-grid--target-1x {
|
|
110
|
+
@container (width > #{layout.$card-grid-container-md}) {
|
|
111
|
+
& .uq-pane {
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-direction: row-reverse;
|
|
114
|
+
gap: var(--layout-gap);
|
|
115
|
+
align-items: center;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
& .uq-pane__image {
|
|
119
|
+
width: 50%;
|
|
120
|
+
height: 100%;
|
|
121
|
+
margin: 0;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
& .uq-pane__content {
|
|
125
|
+
width: 50%;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|