@uqds/pane 0.1.4-alpha.1 → 0.2.0-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 (3) hide show
  1. package/dist/css/main.css +1 -1
  2. package/package.json +3 -3
  3. package/src/scss/_pane.scss +28 -0
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;font-size:24px}.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%}}
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;font-size:24px}.uq-pane__description{margin-top:.5rem}.uq-pane__description :last-child{margin-bottom:0}.uq-pane__description li{margin-bottom:.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__video{flex-shrink:0;aspect-ratio:16/9;margin-bottom:1.5rem;position:relative}.uq-pane__video iframe{width:100%;height:100%;inset:0;position:absolute;border:0}.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__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": "0.1.4-alpha.1",
3
+ "version": "0.2.0-alpha.0",
4
4
  "description": "Pane component",
5
5
  "keywords": [
6
6
  "uqds",
@@ -42,7 +42,7 @@
42
42
  },
43
43
  "dependencies": {
44
44
  "@uqds/core": "^1.2.4-alpha.0",
45
- "@uqds/layout": "^1.0.4-alpha.0"
45
+ "@uqds/layout": "^1.1.0-alpha.0"
46
46
  },
47
- "gitHead": "4e00ad3e7802ba3f00f107f8945a7699fd3f8d6a"
47
+ "gitHead": "63ecc577f4c2cd3cecc99ba7990d6aec117eeaad"
48
48
  }
package/src/scss/_pane.scss CHANGED
@@ -21,6 +21,14 @@
21
21
 
22
22
  .uq-pane__description {
23
23
  margin-top: core.$space-s;
24
+
25
+ & :last-child {
26
+ margin-bottom: 0;
27
+ }
28
+
29
+ & li {
30
+ margin-bottom: core.$space-s;
31
+ }
24
32
  }
25
33
 
26
34
  .uq-pane__image {
@@ -39,6 +47,21 @@
39
47
  }
40
48
  }
41
49
 
50
+ .uq-pane__video {
51
+ flex-shrink: 0;
52
+ aspect-ratio: 16 / 9;
53
+ margin-bottom: core.$space-l;
54
+ position: relative;
55
+
56
+ & iframe {
57
+ width: 100%;
58
+ height: 100%;
59
+ inset: 0;
60
+ position: absolute;
61
+ border: 0;
62
+ }
63
+ }
64
+
42
65
  .uq-pane__icon {
43
66
  margin-bottom: core.$space-s;
44
67
 
@@ -122,6 +145,11 @@
122
145
  margin: 0;
123
146
  }
124
147
 
148
+ .uq-pane__video {
149
+ width: 50%;
150
+ margin: 0;
151
+ }
152
+
125
153
  & .uq-pane__content {
126
154
  width: 50%;
127
155
  }