@uqds/pane 0.0.5-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 +26 -0
- package/package.json +42 -0
- package/src/scss/_component.scss +134 -0
- package/src/scss/_global.scss +51 -0
package/README.md
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# `@uqds/pane`
|
|
2
|
+
|
|
3
|
+
> Pane component
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
### Installation
|
|
8
|
+
|
|
9
|
+
With Yarn:
|
|
10
|
+
```shell
|
|
11
|
+
yarn add @uqds/pane
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
With NPM:
|
|
15
|
+
```shell
|
|
16
|
+
npm i @uqds/pane
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Dependency graph
|
|
22
|
+
|
|
23
|
+
```shell
|
|
24
|
+
@uqds/pane
|
|
25
|
+
└─ @uqds/core
|
|
26
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@uqds/pane",
|
|
3
|
+
"version": "0.0.5-alpha.0",
|
|
4
|
+
"description": "Pane component",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"uqds",
|
|
7
|
+
"uq",
|
|
8
|
+
"University of Queensland",
|
|
9
|
+
"design system",
|
|
10
|
+
"scss",
|
|
11
|
+
"sass",
|
|
12
|
+
"css",
|
|
13
|
+
"pane"
|
|
14
|
+
],
|
|
15
|
+
"publishConfig": {
|
|
16
|
+
"access": "public"
|
|
17
|
+
},
|
|
18
|
+
"author": {
|
|
19
|
+
"name": "University of Queensland",
|
|
20
|
+
"email": "webservices@uq.edu.au",
|
|
21
|
+
"url": "https://uq.edu.au"
|
|
22
|
+
},
|
|
23
|
+
"homepage": "https://github.com/uq-its-ss/design-system#readme",
|
|
24
|
+
"license": "ISC",
|
|
25
|
+
"directories": {
|
|
26
|
+
"lib": "src"
|
|
27
|
+
},
|
|
28
|
+
"files": [
|
|
29
|
+
"src/*"
|
|
30
|
+
],
|
|
31
|
+
"repository": {
|
|
32
|
+
"type": "git",
|
|
33
|
+
"url": "git+https://github.com/uq-its-ss/design-system.git"
|
|
34
|
+
},
|
|
35
|
+
"bugs": {
|
|
36
|
+
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
37
|
+
},
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"@uqds/core": "^0.0.5-alpha.0"
|
|
40
|
+
},
|
|
41
|
+
"gitHead": "0d2250c3ff44460d2902ea08102e6423b3fcc3aa"
|
|
42
|
+
}
|
|
@@ -0,0 +1,134 @@
|
|
|
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-m; //1.8rem;
|
|
25
|
+
margin-bottom: core.$space-m; //1.5rem;
|
|
26
|
+
|
|
27
|
+
&--shaded {
|
|
28
|
+
@include pane-shaded;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&--white {
|
|
32
|
+
@include pane-white;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&--outline {
|
|
36
|
+
@include pane-outline;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&--ruled {
|
|
40
|
+
@include pane-ruled;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&--vertical-spacing {
|
|
44
|
+
@include pane-vertical-spacing;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&--dark-tint {
|
|
48
|
+
@include pane-dark-tint;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&--has-footer {
|
|
52
|
+
@include pane-has-footer;
|
|
53
|
+
&.uq-pane--shaded {
|
|
54
|
+
.uq-pane__footer {
|
|
55
|
+
background-color: darken($pane-shaded-bg, 5%);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&.uq-pane--dark-tint {
|
|
60
|
+
.uq-pane__footer {
|
|
61
|
+
background-color: core.$uq-black;
|
|
62
|
+
background-color: rgba(core.$uq-black, 0.3);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&__title {
|
|
68
|
+
color: $pane-title-color;
|
|
69
|
+
font-size: 1.275rem;
|
|
70
|
+
font-weight: 400;
|
|
71
|
+
|
|
72
|
+
// Used for no title pane style
|
|
73
|
+
&--hidden {
|
|
74
|
+
display: none;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// if sub-title exists reduce margin to pull it close to title
|
|
79
|
+
&__title + &__sub-title {
|
|
80
|
+
margin-top: -(core.$space);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Pane grid
|
|
85
|
+
.uq-pane-grid {
|
|
86
|
+
&.uq-grid {
|
|
87
|
+
grid-gap: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&--shaded {
|
|
91
|
+
.uq-pane {
|
|
92
|
+
@include pane-shaded;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.uq-pane__footer {
|
|
96
|
+
background-color: darken($pane-shaded-bg, 5%);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&--white {
|
|
101
|
+
.uq-pane {
|
|
102
|
+
@include pane-white;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&--outline {
|
|
107
|
+
.uq-pane {
|
|
108
|
+
@include pane-outline;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&--ruled {
|
|
113
|
+
.uq-pane {
|
|
114
|
+
@include pane-ruled;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&--vertical-spacing {
|
|
119
|
+
.uq-pane {
|
|
120
|
+
@include pane-vertical-spacing;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&--dark-tint {
|
|
125
|
+
.uq-pane {
|
|
126
|
+
@include pane-dark-tint;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.uq-pane__footer {
|
|
130
|
+
background-color: core.$uq-black;
|
|
131
|
+
background-color: rgba(core.$uq-black, .3);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@use '@uqds/core/src/scss/_global' as core;
|
|
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
|
+
@mixin pane-shaded {
|
|
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, .65);
|
|
32
|
+
|
|
33
|
+
.uq-pane__title {
|
|
34
|
+
@extend %light-palette;
|
|
35
|
+
}
|
|
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;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|