@uqds/pane 0.0.8-alpha.0 → 0.0.12-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/README.md +2 -0
- package/package.json +3 -3
- package/src/scss/_component.scss +7 -7
- package/src/scss/_global.scss +42 -42
- package/src/scss/main.scss +1 -1
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/pane",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12-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": "^0.0.
|
|
43
|
+
"@uqds/core": "^0.0.12-alpha.0"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "125e487dfd2f7e46f2b29cc0e8646b92e61d6f2c"
|
|
46
46
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
1
|
+
@use "@uqds/core/src/scss/global" as core;
|
|
2
|
+
@use "global" as *;
|
|
3
3
|
|
|
4
4
|
// Panes: Blocks of colour with padding around content.
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
// Variants:
|
|
7
7
|
// .uq-pane--shaded - Adds grey background.
|
|
8
8
|
// .uq-pane--white - Adds white background.
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
// .uq-pane--vertical-spacing - Adds top and bottom margin to offset panes inline with other content.
|
|
12
12
|
// .uq-pane--dark-tint - Adds semi-transparent black background.
|
|
13
13
|
// .uq-pane--has-footer - Minor adjustments to markup allow a shaded footer to be added within pane.
|
|
14
|
-
|
|
14
|
+
|
|
15
15
|
// .uq-pane-grid--shaded - Adds grey background to all child panes.
|
|
16
16
|
// .uq-pane-grid--white - Adds white background to all child panes.
|
|
17
17
|
// .uq-pane-grid--outline - Adds thin border on all sides to all child panes.
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
|
|
22
22
|
%pane,
|
|
23
23
|
.uq-pane {
|
|
24
|
-
padding: core.$space-m; //1.8rem;
|
|
25
|
-
margin-bottom: core.$space-m; //1.5rem;
|
|
24
|
+
padding: core.$space-m; // 1.8rem;
|
|
25
|
+
margin-bottom: core.$space-m; // 1.5rem;
|
|
26
26
|
|
|
27
27
|
&--shaded {
|
|
28
28
|
@include pane-shaded;
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
|
|
129
129
|
.uq-pane__footer {
|
|
130
130
|
background-color: core.$uq-black;
|
|
131
|
-
background-color: rgba(core.$uq-black, .3);
|
|
131
|
+
background-color: rgba(core.$uq-black, 0.3);
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
}
|
package/src/scss/_global.scss
CHANGED
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use "@uqds/core/src/scss/_global" as core;
|
|
2
2
|
|
|
3
3
|
$pane-border: core.$uq-neutral-light60; //eee;
|
|
4
4
|
$pane-shaded-bg: core.$uq-neutral-light80; //f5f5f5;
|
|
5
5
|
$pane-title-color: core.$uq-purple;
|
|
6
6
|
|
|
7
7
|
@mixin pane-shaded {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
8
|
+
background: $pane-shaded-bg;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@mixin pane-white {
|
|
12
|
+
background: core.$uq-white;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@mixin pane-outline {
|
|
16
|
+
border: 2px solid $pane-border;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin pane-ruled {
|
|
20
|
+
border-bottom: 2px solid $pane-border;
|
|
21
|
+
border-top: 2px solid $pane-border;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@mixin pane-vertical-spacing {
|
|
25
|
+
margin: core.$space-l core.$space-none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@mixin pane-dark-tint {
|
|
29
|
+
@extend %light-palette;
|
|
30
|
+
background-color: core.$uq-black;
|
|
31
|
+
background-color: rgba(core.$uq-black, 0.65);
|
|
32
|
+
|
|
33
|
+
.uq-pane__title {
|
|
29
34
|
@extend %light-palette;
|
|
30
|
-
background-color: core.$uq-black;
|
|
31
|
-
background-color: rgba(core.$uq-black, .65);
|
|
32
|
-
|
|
33
|
-
.uq-pane__title {
|
|
34
|
-
@extend %light-palette;
|
|
35
|
-
}
|
|
36
35
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@mixin pane-has-footer {
|
|
39
|
+
padding: core.$space-none;
|
|
40
|
+
|
|
41
|
+
.uq-pane {
|
|
42
|
+
&__content {
|
|
43
|
+
padding: core.$space-m core.$space-m core.$space core.$space-m; //1.8rem 1.8rem 1rem 1.8rem
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&__footer {
|
|
47
|
+
background-color: $pane-shaded-bg;
|
|
48
|
+
padding: core.$space-m; //1.8rem;
|
|
50
49
|
}
|
|
51
|
-
}
|
|
50
|
+
}
|
|
51
|
+
}
|
package/src/scss/main.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use "component";
|