@uqds/sections 0.0.7-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 +28 -26
- package/package.json +4 -4
- package/src/scss/_component.scss +85 -85
- package/src/scss/_global.scss +4 -4
- package/src/scss/main.scss +1 -1
package/README.md
CHANGED
|
@@ -1,26 +1,28 @@
|
|
|
1
|
-
# `@uqds/sections`
|
|
2
|
-
|
|
3
|
-
> Sections component
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
### Installation
|
|
8
|
-
|
|
9
|
-
With Yarn:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
1
|
+
# `@uqds/sections`
|
|
2
|
+
|
|
3
|
+
> Sections component
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
### Installation
|
|
8
|
+
|
|
9
|
+
With Yarn:
|
|
10
|
+
|
|
11
|
+
```shell
|
|
12
|
+
yarn add @uqds/sections
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
With NPM:
|
|
16
|
+
|
|
17
|
+
```shell
|
|
18
|
+
npm i @uqds/sections
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Dependency graph
|
|
24
|
+
|
|
25
|
+
```shell
|
|
26
|
+
@uqds/sections
|
|
27
|
+
└─ @uqds/core
|
|
28
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/sections",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12-alpha.0",
|
|
4
4
|
"description": "page sections",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"url": "https://github.com/uq-its-ss/design-system/issues"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@uqds/core": "^0.0.
|
|
44
|
-
"@uqds/grid": "^0.0.
|
|
43
|
+
"@uqds/core": "^0.0.12-alpha.0",
|
|
44
|
+
"@uqds/grid": "^0.0.12-alpha.0"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "125e487dfd2f7e46f2b29cc0e8646b92e61d6f2c"
|
|
47
47
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
// Main component stylesheet
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
5
|
-
|
|
6
|
-
// Section
|
|
7
|
-
// Used to contain content and provide padding, background, and width options.
|
|
8
|
-
//
|
|
9
|
-
// Variants:
|
|
10
|
-
// .uq-section--centered - centres content
|
|
11
|
-
// .uq-section--narrow - constrains content in a narrow container
|
|
12
|
-
// .uq-section--shaded - adds light-grey background
|
|
13
|
-
// .uq-section--padding-top-none - removes top padding
|
|
14
|
-
// .uq-section--padding-bottom-none - removes bottom padding
|
|
15
|
-
// .uq-section--padding-top-large - adds large top padding
|
|
16
|
-
// .uq-section--padding-bottom-large - adds large bottom padding
|
|
17
|
-
|
|
18
|
-
.uq-section {
|
|
19
|
-
padding-top: core.$space-xxxl; // 3.5rem
|
|
20
|
-
padding-bottom: core.$space-xxxl; // 3.5rem
|
|
21
|
-
overflow: hidden;
|
|
22
|
-
|
|
23
|
-
&__container {
|
|
24
|
-
@include grid.layout-containment;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&__header,
|
|
28
|
-
&__content {
|
|
29
|
-
@include grid.grid-col-padding;
|
|
30
|
-
@include grid.grid-col-width(6);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&__title {
|
|
34
|
-
margin-top: core.$space-none;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// Padding top large
|
|
38
|
-
&--padding-top-large {
|
|
39
|
-
padding-top: core.$space-uuul; // 5.5rem
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// Paddiing bottom large
|
|
43
|
-
&--padding-bottom-large {
|
|
44
|
-
padding-bottom: core.$space-uuul; // 5.5rem
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// Padding top none
|
|
48
|
-
&--padding-top-none {
|
|
49
|
-
padding-top: core.$space-none;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// Padding bottom none
|
|
53
|
-
&--padding-bottom-none {
|
|
54
|
-
padding-bottom: core.$space-none;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
// Shaded background
|
|
58
|
-
&--shaded {
|
|
59
|
-
background-color: $section-shaded-bg;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// Centers section header and content
|
|
63
|
-
&--centered {
|
|
64
|
-
.uq-section__header,
|
|
65
|
-
.uq-section__content{
|
|
66
|
-
text-align: center;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// Narrows the section header and content
|
|
71
|
-
&--narrow {
|
|
72
|
-
.uq-section__header,
|
|
73
|
-
.uq-section__content{
|
|
74
|
-
@media #{core.$screen-xl-up} {
|
|
75
|
-
@include grid.grid-col-padding;
|
|
76
|
-
@include grid.grid-col-offset(2.25, 12);
|
|
77
|
-
@include grid.grid-col-width(7.5, 12);
|
|
78
|
-
float: left;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
// .uq-section__container {
|
|
82
|
-
// max-width: (grid.$max-container-width - (grid.$max-container-width/3));
|
|
83
|
-
// }
|
|
84
|
-
}
|
|
85
|
-
}
|
|
1
|
+
// Main component stylesheet
|
|
2
|
+
@use "@uqds/core/src/scss/global" as core;
|
|
3
|
+
@use "@uqds/grid/src/scss/global" as grid;
|
|
4
|
+
@use "global" as *;
|
|
5
|
+
|
|
6
|
+
// Section
|
|
7
|
+
// Used to contain content and provide padding, background, and width options.
|
|
8
|
+
//
|
|
9
|
+
// Variants:
|
|
10
|
+
// .uq-section--centered - centres content
|
|
11
|
+
// .uq-section--narrow - constrains content in a narrow container
|
|
12
|
+
// .uq-section--shaded - adds light-grey background
|
|
13
|
+
// .uq-section--padding-top-none - removes top padding
|
|
14
|
+
// .uq-section--padding-bottom-none - removes bottom padding
|
|
15
|
+
// .uq-section--padding-top-large - adds large top padding
|
|
16
|
+
// .uq-section--padding-bottom-large - adds large bottom padding
|
|
17
|
+
|
|
18
|
+
.uq-section {
|
|
19
|
+
padding-top: core.$space-xxxl; // 3.5rem
|
|
20
|
+
padding-bottom: core.$space-xxxl; // 3.5rem
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
|
|
23
|
+
&__container {
|
|
24
|
+
@include grid.layout-containment;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&__header,
|
|
28
|
+
&__content {
|
|
29
|
+
@include grid.grid-col-padding;
|
|
30
|
+
@include grid.grid-col-width(6);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&__title {
|
|
34
|
+
margin-top: core.$space-none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Padding top large
|
|
38
|
+
&--padding-top-large {
|
|
39
|
+
padding-top: core.$space-uuul; // 5.5rem
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Paddiing bottom large
|
|
43
|
+
&--padding-bottom-large {
|
|
44
|
+
padding-bottom: core.$space-uuul; // 5.5rem
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Padding top none
|
|
48
|
+
&--padding-top-none {
|
|
49
|
+
padding-top: core.$space-none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Padding bottom none
|
|
53
|
+
&--padding-bottom-none {
|
|
54
|
+
padding-bottom: core.$space-none;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Shaded background
|
|
58
|
+
&--shaded {
|
|
59
|
+
background-color: $section-shaded-bg;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Centers section header and content
|
|
63
|
+
&--centered {
|
|
64
|
+
.uq-section__header,
|
|
65
|
+
.uq-section__content {
|
|
66
|
+
text-align: center;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// Narrows the section header and content
|
|
71
|
+
&--narrow {
|
|
72
|
+
.uq-section__header,
|
|
73
|
+
.uq-section__content {
|
|
74
|
+
@media #{core.$screen-xl-up} {
|
|
75
|
+
@include grid.grid-col-padding;
|
|
76
|
+
@include grid.grid-col-offset(2.25, 12);
|
|
77
|
+
@include grid.grid-col-width(7.5, 12);
|
|
78
|
+
float: left;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
// .uq-section__container {
|
|
82
|
+
// max-width: (grid.$max-container-width - (grid.$max-container-width/3));
|
|
83
|
+
// }
|
|
84
|
+
}
|
|
85
|
+
}
|
package/src/scss/_global.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Variables, functions, and mixins
|
|
2
|
-
@use
|
|
3
|
-
|
|
4
|
-
$section-shaded-bg: core.$uq-neutral-light80;
|
|
1
|
+
// Variables, functions, and mixins
|
|
2
|
+
@use "@uqds/core/src/scss/global" as core;
|
|
3
|
+
|
|
4
|
+
$section-shaded-bg: core.$uq-neutral-light80;
|
package/src/scss/main.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use "component";
|