@uqds/pane 0.1.4-alpha.0 → 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 +29 -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}.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.0",
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": "24bcd44af1c5622d310d0742adce42f160e786f6"
47
+ "gitHead": "63ecc577f4c2cd3cecc99ba7990d6aec117eeaad"
48
48
  }
package/src/scss/_pane.scss CHANGED
@@ -16,10 +16,19 @@
16
16
  .uq-pane__title {
17
17
  margin: 0;
18
18
  color: core.$black;
19
+ font-size: 24px;
19
20
  }
20
21
 
21
22
  .uq-pane__description {
22
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
+ }
23
32
  }
24
33
 
25
34
  .uq-pane__image {
@@ -38,6 +47,21 @@
38
47
  }
39
48
  }
40
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
+
41
65
  .uq-pane__icon {
42
66
  margin-bottom: core.$space-s;
43
67
 
@@ -121,6 +145,11 @@
121
145
  margin: 0;
122
146
  }
123
147
 
148
+ .uq-pane__video {
149
+ width: 50%;
150
+ margin: 0;
151
+ }
152
+
124
153
  & .uq-pane__content {
125
154
  width: 50%;
126
155
  }