@uqds/pane 0.1.0-alpha.0 → 0.1.0-alpha.2
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 +3 -3
- package/src/scss/_custom-properties.scss +0 -0
- package/src/scss/_pane.scss +106 -0
- package/src/scss/main.scss +2 -1
- package/src/scss/_component.scss +0 -136
package/dist/css/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.uq-pane
|
|
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}
|
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.2",
|
|
4
4
|
"description": "Pane component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@uqds/core": "^1.2.0-alpha.
|
|
43
|
+
"@uqds/core": "^1.2.0-alpha.1"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "3b41c2842c6e11853d433f37392e5dae72566555"
|
|
46
46
|
}
|
|
File without changes
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
@use "@uqds/core/src/scss/global" as core;
|
|
2
|
+
|
|
3
|
+
.uq-pane {
|
|
4
|
+
height: 100%;
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.uq-pane__content {
|
|
10
|
+
flex: 1;
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.uq-pane__title {
|
|
16
|
+
margin: 0;
|
|
17
|
+
color: core.$black;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.uq-pane__description {
|
|
21
|
+
margin-top: core.$space-s;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.uq-pane__image {
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
aspect-ratio: 1.5 / 1;
|
|
27
|
+
margin-bottom: core.$space-l;
|
|
28
|
+
position: relative;
|
|
29
|
+
|
|
30
|
+
& img,
|
|
31
|
+
& picture {
|
|
32
|
+
width: 100%;
|
|
33
|
+
height: 100%;
|
|
34
|
+
inset: 0;
|
|
35
|
+
position: absolute;
|
|
36
|
+
object-fit: cover;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.uq-pane__icon {
|
|
41
|
+
margin-bottom: core.$space-s;
|
|
42
|
+
|
|
43
|
+
& .uq-icon::before {
|
|
44
|
+
height: 56px;
|
|
45
|
+
width: 56px;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.uq-pane__actions {
|
|
50
|
+
padding-top: core.$space-l;
|
|
51
|
+
margin-top: auto;
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
align-items: start;
|
|
55
|
+
gap: core.$space-m;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.uq-pane--text,
|
|
59
|
+
.uq-pane--text-shaded {
|
|
60
|
+
& .uq-pane__image,
|
|
61
|
+
& .uq-pane__icon {
|
|
62
|
+
display: none;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.uq-pane--image {
|
|
67
|
+
& .uq-pane__icon {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.uq-pane--icon,
|
|
73
|
+
.uq-pane--icon-large,
|
|
74
|
+
.uq-pane--icon-shaded {
|
|
75
|
+
& .uq-pane__image {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.uq-pane--icon-large {
|
|
81
|
+
& .uq-pane__icon {
|
|
82
|
+
width: 128px;
|
|
83
|
+
height: 128px;
|
|
84
|
+
border-radius: 50%;
|
|
85
|
+
background: core.$grey-50;
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
margin-bottom: core.$space-m;
|
|
90
|
+
|
|
91
|
+
& .uq-icon::before {
|
|
92
|
+
width: 72px;
|
|
93
|
+
height: 72px;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.uq-pane--text-shaded,
|
|
99
|
+
.uq-pane--icon-shaded {
|
|
100
|
+
background: core.$grey-50;
|
|
101
|
+
border-radius: 4px;
|
|
102
|
+
|
|
103
|
+
& .uq-pane__content {
|
|
104
|
+
padding: core.$space-l;
|
|
105
|
+
}
|
|
106
|
+
}
|
package/src/scss/main.scss
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
@use "
|
|
1
|
+
@use "custom-properties";
|
|
2
|
+
@use "pane";
|
package/src/scss/_component.scss
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
@use "@uqds/core/src/scss/global" as core;
|
|
2
|
-
@use "global" as *;
|
|
3
|
-
|
|
4
|
-
// Panes: Blocks of colour with padding around content.
|
|
5
|
-
|
|
6
|
-
// Variants:
|
|
7
|
-
// .uq-pane--shaded - Adds grey background.
|
|
8
|
-
// .uq-pane--white - Adds white background.
|
|
9
|
-
// .uq-pane--outline - Adds thin border on all sides.
|
|
10
|
-
// .uq-pane--ruled - Adds thin top and bottom border.
|
|
11
|
-
// .uq-pane--vertical-spacing - Adds top and bottom margin to offset panes inline with other content.
|
|
12
|
-
// .uq-pane--dark-tint - Adds semi-transparent black background.
|
|
13
|
-
// .uq-pane--has-footer - Minor adjustments to markup allow a shaded footer to be added within pane.
|
|
14
|
-
|
|
15
|
-
// .uq-pane-grid--shaded - Adds grey background to all child panes.
|
|
16
|
-
// .uq-pane-grid--white - Adds white background to all child panes.
|
|
17
|
-
// .uq-pane-grid--outline - Adds thin border on all sides to all child panes.
|
|
18
|
-
// .uq-pane-grid--ruled - Adds thin top and bottom border to all child panes.
|
|
19
|
-
// .uq-pane-grid--vertical-spacing - Adds top and bottom margin to all child panes to offset panes inline with other content.
|
|
20
|
-
// .uq-pane-grid--dark-tint - Adds semi-transparent black background to all child panes.
|
|
21
|
-
|
|
22
|
-
%pane,
|
|
23
|
-
.uq-pane {
|
|
24
|
-
padding: core.$space-l; // 1.8rem;
|
|
25
|
-
font-family: core.$font-body;
|
|
26
|
-
font-size: core.$font-size-m;
|
|
27
|
-
font-weight: core.$font-weight-normal;
|
|
28
|
-
line-height: core.$line-height;
|
|
29
|
-
margin-bottom: core.$space-l; // 1.5rem;
|
|
30
|
-
|
|
31
|
-
&--shaded {
|
|
32
|
-
@include pane-shaded;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
&--white {
|
|
36
|
-
@include pane-white;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&--outline {
|
|
40
|
-
@include pane-outline;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
&--ruled {
|
|
44
|
-
@include pane-ruled;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&--vertical-spacing {
|
|
48
|
-
@include pane-vertical-spacing;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&--dark-tint {
|
|
52
|
-
@include pane-dark-tint;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&--has-footer {
|
|
56
|
-
@include pane-has-footer;
|
|
57
|
-
&.uq-pane--shaded {
|
|
58
|
-
.uq-pane__footer {
|
|
59
|
-
background-color: core.$grey-200;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
&.uq-pane--dark-tint {
|
|
64
|
-
.uq-pane__footer {
|
|
65
|
-
background-color: core.$grey-900;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
&__title {
|
|
71
|
-
color: core.$purple-500;
|
|
72
|
-
font-size: 1.275rem;
|
|
73
|
-
font-weight: 400;
|
|
74
|
-
|
|
75
|
-
// Used for no title pane style
|
|
76
|
-
&--hidden {
|
|
77
|
-
display: none;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
// if sub-title exists reduce margin to pull it close to title
|
|
82
|
-
&__title + &__sub-title {
|
|
83
|
-
margin-top: -(core.$space-m);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
// Pane grid
|
|
88
|
-
.uq-pane-grid {
|
|
89
|
-
&.uq-grid {
|
|
90
|
-
grid-gap: 0;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
&--shaded {
|
|
94
|
-
.uq-pane {
|
|
95
|
-
@include pane-shaded;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.uq-pane__footer {
|
|
99
|
-
background-color: core.$grey-200;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
&--white {
|
|
104
|
-
.uq-pane {
|
|
105
|
-
@include pane-white;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
&--outline {
|
|
110
|
-
.uq-pane {
|
|
111
|
-
@include pane-outline;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
&--ruled {
|
|
116
|
-
.uq-pane {
|
|
117
|
-
@include pane-ruled;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
&--vertical-spacing {
|
|
122
|
-
.uq-pane {
|
|
123
|
-
@include pane-vertical-spacing;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
&--dark-tint {
|
|
128
|
-
.uq-pane {
|
|
129
|
-
@include pane-dark-tint;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.uq-pane__footer {
|
|
133
|
-
background-color: core.$grey-900;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}
|