@uqds/sections 0.1.0-alpha.0 → 0.1.0-alpha.1
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 -4
- package/src/scss/_component.scss +11 -79
- package/src/scss/_global.scss +1 -1
package/dist/css/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.uq-
|
|
1
|
+
.uq-section__header{margin-bottom:1.5rem}.uq-section__title{margin:0 0 1rem;color:#19151c;font-size:2rem}.uq-section--shaded{background:#f3f3f4;padding:var(--layout-gap)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/sections",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.1",
|
|
4
4
|
"description": "page sections",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -40,8 +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.0"
|
|
44
|
-
"@uqds/grid": "^0.0.15-alpha.2"
|
|
43
|
+
"@uqds/core": "^1.2.0-alpha.0"
|
|
45
44
|
},
|
|
46
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "3c5b2893b8418ecbebc76def90d766482b00f1d2"
|
|
47
46
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -1,85 +1,17 @@
|
|
|
1
|
-
// Main component stylesheet
|
|
2
1
|
@use "@uqds/core/src/scss/global" as core;
|
|
3
|
-
@use "@uqds/grid/src/scss/global" as grid;
|
|
4
2
|
@use "global" as *;
|
|
5
3
|
|
|
6
|
-
|
|
7
|
-
|
|
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-xxxxl; // 3.5rem
|
|
20
|
-
padding-bottom: core.$space-xxxxl; // 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-uuuul; // 5.5rem
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// Paddiing bottom large
|
|
43
|
-
&--padding-bottom-large {
|
|
44
|
-
padding-bottom: core.$space-uuuul; // 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: core.$grey-50;
|
|
60
|
-
}
|
|
4
|
+
.uq-section__header {
|
|
5
|
+
margin-bottom: core.$space-l;
|
|
6
|
+
}
|
|
61
7
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
}
|
|
8
|
+
.uq-section__title {
|
|
9
|
+
margin: 0 0 core.$space-m;
|
|
10
|
+
color: core.$black;
|
|
11
|
+
font-size: core.$font-size-xxxl;
|
|
12
|
+
}
|
|
69
13
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
}
|
|
14
|
+
.uq-section--shaded {
|
|
15
|
+
background: core.$grey-50;
|
|
16
|
+
padding: var(--layout-gap);
|
|
85
17
|
}
|
package/src/scss/_global.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@use "@uqds/core/src/scss/global" as core;
|