@uqds/pane 0.0.15-alpha.0 → 0.1.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.
- package/dist/css/main.css +1 -1
- package/package.json +3 -3
- package/src/scss/_component.scss +5 -7
- package/src/scss/_global.scss +7 -12
package/dist/css/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.uq-pane--dark-tint,.uq-pane--dark-tint .uq-pane__title,.uq-pane-grid--dark-tint .uq-pane,.uq-pane-grid--dark-tint .uq-pane .uq-pane__title{border-color:#dcdcdd;color:#f3f3f4}.uq-pane--dark-tint a,.uq-pane--dark-tint .uq-pane__title a,.uq-pane-grid--dark-tint .uq-pane a,.uq-pane-grid--dark-tint .uq-pane .uq-pane__title a{color:#fff;font-weight:400}.uq-pane--dark-tint a:hover,.uq-pane-grid--dark-tint .uq-pane a:hover{color:#f3f3f4}.uq-pane{padding:1.5rem;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;margin-bottom:1.5rem}.uq-pane--shaded{background:#f3f3f4}.uq-pane--white{background:#fff}.uq-pane--outline{border:2px solid #dcdcdd}.uq-pane--ruled{border-bottom:2px solid #dcdcdd;border-top:2px solid #dcdcdd}.uq-pane--vertical-spacing{margin:2rem 0}.uq-pane--dark-tint{background-color:#5e5b60}.uq-pane--has-footer{padding:0}.uq-pane--has-footer .uq-pane__content{padding:1.5rem 1.5rem 1rem 1.5rem}.uq-pane--has-footer .uq-pane__footer{background-color:#f3f3f4;padding:1.5rem}.uq-pane--has-footer.uq-pane--shaded .uq-pane__footer{background-color:#dcdcdd}.uq-pane--has-footer.uq-pane--dark-tint .uq-pane__footer{background-color:#3b383e}.uq-pane__title{color:#51247a;font-size:1.275rem;font-weight:400}.uq-pane__title--hidden{display:none}.uq-pane__title+.uq-pane__sub-title{margin-top:-1rem}.uq-pane-grid.uq-grid{grid-gap:0}.uq-pane-grid--shaded .uq-pane{background:#f3f3f4}.uq-pane-grid--shaded .uq-pane__footer{background-color:#dcdcdd}.uq-pane-grid--white .uq-pane{background:#fff}.uq-pane-grid--outline .uq-pane{border:2px solid #dcdcdd}.uq-pane-grid--ruled .uq-pane{border-bottom:2px solid #dcdcdd;border-top:2px solid #dcdcdd}.uq-pane-grid--vertical-spacing .uq-pane{margin:2rem 0}.uq-pane-grid--dark-tint .uq-pane{background-color:#5e5b60}.uq-pane-grid--dark-tint .uq-pane__footer{background-color:#3b383e}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/pane",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0-alpha.0",
|
|
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.
|
|
43
|
+
"@uqds/core": "^1.2.0-alpha.0"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "78891f49ec037688e08f67f30a52691404325da7"
|
|
46
46
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -56,20 +56,19 @@
|
|
|
56
56
|
@include pane-has-footer;
|
|
57
57
|
&.uq-pane--shaded {
|
|
58
58
|
.uq-pane__footer {
|
|
59
|
-
background-color:
|
|
59
|
+
background-color: core.$grey-200;
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
&.uq-pane--dark-tint {
|
|
64
64
|
.uq-pane__footer {
|
|
65
|
-
background-color: core.$
|
|
66
|
-
background-color: rgba(core.$uq-black, 0.3);
|
|
65
|
+
background-color: core.$grey-900;
|
|
67
66
|
}
|
|
68
67
|
}
|
|
69
68
|
}
|
|
70
69
|
|
|
71
70
|
&__title {
|
|
72
|
-
color:
|
|
71
|
+
color: core.$purple-500;
|
|
73
72
|
font-size: 1.275rem;
|
|
74
73
|
font-weight: 400;
|
|
75
74
|
|
|
@@ -97,7 +96,7 @@
|
|
|
97
96
|
}
|
|
98
97
|
|
|
99
98
|
.uq-pane__footer {
|
|
100
|
-
background-color:
|
|
99
|
+
background-color: core.$grey-200;
|
|
101
100
|
}
|
|
102
101
|
}
|
|
103
102
|
|
|
@@ -131,8 +130,7 @@
|
|
|
131
130
|
}
|
|
132
131
|
|
|
133
132
|
.uq-pane__footer {
|
|
134
|
-
background-color: core.$
|
|
135
|
-
background-color: rgba(core.$uq-black, 0.3);
|
|
133
|
+
background-color: core.$grey-900;
|
|
136
134
|
}
|
|
137
135
|
}
|
|
138
136
|
}
|
package/src/scss/_global.scss
CHANGED
|
@@ -1,24 +1,20 @@
|
|
|
1
1
|
@use "@uqds/core/src/scss/_global" as core;
|
|
2
2
|
|
|
3
|
-
$pane-border: core.$uq-neutral-light60; //eee;
|
|
4
|
-
$pane-shaded-bg: core.$uq-neutral-light80; //f5f5f5;
|
|
5
|
-
$pane-title-color: core.$uq-purple;
|
|
6
|
-
|
|
7
3
|
@mixin pane-shaded {
|
|
8
|
-
background:
|
|
4
|
+
background: core.$grey-50;
|
|
9
5
|
}
|
|
10
6
|
|
|
11
7
|
@mixin pane-white {
|
|
12
|
-
background: core.$
|
|
8
|
+
background: core.$white;
|
|
13
9
|
}
|
|
14
10
|
|
|
15
11
|
@mixin pane-outline {
|
|
16
|
-
border: 2px solid
|
|
12
|
+
border: 2px solid core.$grey-200;
|
|
17
13
|
}
|
|
18
14
|
|
|
19
15
|
@mixin pane-ruled {
|
|
20
|
-
border-bottom: 2px solid
|
|
21
|
-
border-top: 2px solid
|
|
16
|
+
border-bottom: 2px solid core.$grey-200;
|
|
17
|
+
border-top: 2px solid core.$grey-200;
|
|
22
18
|
}
|
|
23
19
|
|
|
24
20
|
@mixin pane-vertical-spacing {
|
|
@@ -27,8 +23,7 @@ $pane-title-color: core.$uq-purple;
|
|
|
27
23
|
|
|
28
24
|
@mixin pane-dark-tint {
|
|
29
25
|
@extend %light-palette;
|
|
30
|
-
background-color: core.$
|
|
31
|
-
background-color: rgba(core.$uq-black, 0.65);
|
|
26
|
+
background-color: core.$grey-800;
|
|
32
27
|
|
|
33
28
|
.uq-pane__title {
|
|
34
29
|
@extend %light-palette;
|
|
@@ -44,7 +39,7 @@ $pane-title-color: core.$uq-purple;
|
|
|
44
39
|
}
|
|
45
40
|
|
|
46
41
|
&__footer {
|
|
47
|
-
background-color:
|
|
42
|
+
background-color: core.$grey-50;
|
|
48
43
|
padding: core.$space-l; //1.8rem;
|
|
49
44
|
}
|
|
50
45
|
}
|