@uqds/hero 7.0.3-alpha.1 → 7.0.3

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.
Files changed (5) hide show
  1. package/dist/css/main.css +1 -1
  2. package/package.json +4 -4
  3. package/src/scss/_custom-properties.scss +6 -6
  4. package/src/scss/_hero-basic.scss +12 -12
  5. package/src/scss/_hero.scss +14 -14
package/dist/css/main.css CHANGED
@@ -1 +1 @@
1
- :root{--hero-font-size-ul: 3rem;--hero-font-size-xxxxl: 2.5rem;--hero-gap: 4rem;--hero-spacing: 4rem;--hero-basic-spacing: 5rem;--hero-aspect-ratio: 2.35 / 1;--hero-large-aspect-ratio: 3 / 2;--hero-min-height: 336px;--hero-large-min-height: 500px;--hero-image-max-width: 764px;--hero-title-max-line-length: 518px}@media(max-width: 63.9375rem){:root{--hero-font-size-ul: 30px;--hero-font-size-xxxxl: 30px;--hero-basic-spacing: 2rem}}.uq-hero{background:#4b2271;margin-bottom:var(--hero-gap)}@media(min-width: 64rem){.uq-hero{position:relative;padding:var(--hero-spacing) 0;min-height:var(--hero-min-height);display:flex;align-items:center}}@media(max-width: 63.9375rem){.uq-hero .uq-container{margin:0;padding:0}}.uq-hero__image{display:flex}@media(min-width: 64rem){.uq-hero__image{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%}}@media(min-width: 64rem){.uq-hero__image::before{content:"";width:calc(50% - 3rem);flex-shrink:1}}.uq-hero__image img,.uq-hero__image picture{object-fit:cover;aspect-ratio:var(--hero-aspect-ratio);width:100%}@media(min-width: 64rem){.uq-hero__image img,.uq-hero__image picture{width:auto;height:100%;flex-shrink:0;max-width:var(--hero-image-max-width)}}.uq-hero__content{position:relative;background:#51247a;box-shadow:0 3px 24px 0 rgba(24,24,24,.1);padding:var(--layout-gap);margin-bottom:8px}@media(min-width: 64rem){.uq-hero__content{z-index:2;width:586px}}.uq-hero__content *{margin:0}.uq-hero__content::after{position:absolute;top:100%;left:0;content:"";height:8px;width:100%;border-radius:0 0 4px 4px;background:#40205d}.uq-hero__title{color:#fff;font-size:var(--hero-font-size-xxxxl)}.uq-hero__description{margin-top:1rem;font-size:1.125rem;color:#fff}.uq-hero__description,.uq-hero__description *{color:#fff;font-size:1.125rem}.uq-hero__button{margin-top:1.5rem}.uq-hero--light{background:unset}.uq-hero--light .uq-hero__content{background:#fff}.uq-hero--light .uq-hero__content::after{background:linear-gradient(90deg, #51247a 0%, 87%, #962a8b 100%)}.uq-hero--light .uq-hero__title{color:#51247a}.uq-hero--light .uq-hero__description,.uq-hero--light .uq-hero__description *{color:unset}@media(min-width: 64rem){.uq-hero--large{min-height:var(--hero-large-min-height)}}.uq-hero--large .uq-hero__image img,.uq-hero--large .uq-hero__image picture{aspect-ratio:var(--hero-large-aspect-ratio)}.uq-hero--large .uq-hero__title{font-size:var(--hero-font-size-ul)}.uq-hero--no-margin{margin-bottom:0}.uq-hero-basic{background:#4b2271;margin-bottom:var(--hero-gap);position:relative}.uq-hero-basic__image{position:absolute;opacity:.2;width:100%;height:100%;top:0;left:0;z-index:1}.uq-hero-basic__image img,.uq-hero-basic__image picture{object-fit:cover;height:100%;width:100%;display:block}.uq-hero-basic__content{position:relative;z-index:2;color:#fff;padding:var(--hero-basic-spacing) 0}.uq-hero-basic__content a{color:#fff}.uq-hero-basic__eyebrow{font-weight:500;font-size:1rem;line-height:1.6;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;display:block}.uq-hero-basic__title{color:#fff;margin:0;max-width:var(--hero-title-max-line-length)}.uq-hero-basic__back{margin-top:.5rem}.uq-hero-basic__back a{text-decoration:none;display:inline-flex}.uq-hero-basic__back a .uq-hero-basic__back-text{text-decoration:underline}.uq-hero-basic__back a:hover .uq-hero-basic__back-text{background-color:#fff;color:#51247a}.uq-hero-basic__back .uq-icon::before{width:16px;height:19px}.uq-hero-basic__tabs{position:relative;z-index:2;padding-top:1rem}.uq-hero-basic--no-margin{margin-bottom:0}
1
+ :root{--hero-font-size-ul: var(--uq-font-size-ul);--hero-font-size-xxxxl: var(--uq-font-size-xxxxl);--hero-gap: var(--uq-space-ul);--hero-spacing: var(--uq-space-ul);--hero-basic-spacing: var(--uq-space-uuul);--hero-aspect-ratio: 2.35 / 1;--hero-large-aspect-ratio: 3 / 2;--hero-min-height: 336px;--hero-large-min-height: 500px;--hero-image-max-width: 764px;--hero-title-max-line-length: 518px}@media(max-width: 63.9375rem){:root{--hero-font-size-ul: 30px;--hero-font-size-xxxxl: 30px;--hero-basic-spacing: var(--uq-space-xl)}}.uq-hero{background:var(--uq-purple-600);margin-bottom:var(--hero-gap)}@media(min-width: 64rem){.uq-hero{position:relative;padding:var(--hero-spacing) 0;min-height:var(--hero-min-height);display:flex;align-items:center}}@media(max-width: 63.9375rem){.uq-hero .uq-container{margin:0;padding:0}}.uq-hero__image{display:flex}@media(min-width: 64rem){.uq-hero__image{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%}}@media(min-width: 64rem){.uq-hero__image::before{content:"";width:calc(50% - var(--uq-space-xxxl));flex-shrink:1}}.uq-hero__image img,.uq-hero__image picture{object-fit:cover;aspect-ratio:var(--hero-aspect-ratio);width:100%}@media(min-width: 64rem){.uq-hero__image img,.uq-hero__image picture{width:auto;height:100%;flex-shrink:0;max-width:var(--hero-image-max-width)}}.uq-hero__content{position:relative;background:var(--uq-purple-500);box-shadow:0 3px 24px 0 rgba(24,24,24,.1);padding:var(--layout-gap);margin-bottom:8px}@media(min-width: 64rem){.uq-hero__content{z-index:2;width:586px}}.uq-hero__content *{margin:0}.uq-hero__content::after{position:absolute;top:100%;left:0;content:"";height:8px;width:100%;border-radius:0 0 4px 4px;background:var(--uq-purple-650)}.uq-hero__title{color:var(--uq-white);font-size:var(--hero-font-size-xxxxl)}.uq-hero__description{margin-top:var(--uq-space-m);font-size:var(--uq-font-size-l);color:var(--uq-white)}.uq-hero__description,.uq-hero__description *{color:var(--uq-white);font-size:var(--uq-font-size-l)}.uq-hero__button{margin-top:var(--uq-space-l)}.uq-hero--light{background:unset}.uq-hero--light .uq-hero__content{background:var(--uq-white)}.uq-hero--light .uq-hero__content::after{background:var(--uq-purple-gradient)}.uq-hero--light .uq-hero__title{color:var(--uq-purple-500)}.uq-hero--light .uq-hero__description,.uq-hero--light .uq-hero__description *{color:unset}@media(min-width: 64rem){.uq-hero--large{min-height:var(--hero-large-min-height)}}.uq-hero--large .uq-hero__image img,.uq-hero--large .uq-hero__image picture{aspect-ratio:var(--hero-large-aspect-ratio)}.uq-hero--large .uq-hero__title{font-size:var(--hero-font-size-ul)}.uq-hero--no-margin{margin-bottom:0}.uq-hero-basic{background:var(--uq-purple-600);margin-bottom:var(--hero-gap);position:relative}.uq-hero-basic__image{position:absolute;opacity:.2;width:100%;height:100%;top:0;left:0;z-index:1}.uq-hero-basic__image img,.uq-hero-basic__image picture{object-fit:cover;height:100%;width:100%;display:block}.uq-hero-basic__content{position:relative;z-index:2;color:var(--uq-white);padding:var(--hero-basic-spacing) 0}.uq-hero-basic__content a{color:var(--uq-white)}.uq-hero-basic__eyebrow{font-weight:var(--uq-font-weight-medium);font-size:var(--uq-font-size-m);line-height:var(--uq-line-height-long);font-family:var(--uq-font);text-transform:uppercase;display:block}.uq-hero-basic__title{color:var(--uq-white);margin:0;max-width:var(--hero-title-max-line-length)}.uq-hero-basic__back{margin-top:var(--uq-space-xs)}.uq-hero-basic__back a{text-decoration:none;display:inline-flex}.uq-hero-basic__back a .uq-hero-basic__back-text{text-decoration:underline}.uq-hero-basic__back a:hover .uq-hero-basic__back-text{background-color:var(--uq-white);color:var(--uq-purple-500)}.uq-hero-basic__back .uq-icon::before{width:16px;height:19px}.uq-hero-basic__tabs{position:relative;z-index:2;padding-top:var(--uq-space-m)}.uq-hero-basic--no-margin{margin-bottom:0}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uqds/hero",
3
- "version": "7.0.3-alpha.1",
3
+ "version": "7.0.3",
4
4
  "description": "Hero component",
5
5
  "keywords": [
6
6
  "uqds",
@@ -44,8 +44,8 @@
44
44
  "url": "https://github.com/uq-its-ss/design-system/issues"
45
45
  },
46
46
  "dependencies": {
47
- "@uqds/button": "^4.0.3-alpha.0",
48
- "@uqds/core": "^5.0.2"
47
+ "@uqds/button": "^4.0.3",
48
+ "@uqds/core": "^5.0.3"
49
49
  },
50
- "gitHead": "4a7386eb54d74c7de8caafe5acc10e8515a621db"
50
+ "gitHead": "48ca7d774fdccf622c3dc6d32364c3e4a17a4bac"
51
51
  }
package/src/scss/_custom-properties.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  @use "@uqds/core/src/scss/global" as core;
2
2
 
3
3
  :root {
4
- --hero-font-size-ul: #{core.$font-size-ul};
5
- --hero-font-size-xxxxl: #{core.$font-size-xxxxl};
4
+ --hero-font-size-ul: #{var(--uq-font-size-ul)};
5
+ --hero-font-size-xxxxl: #{var(--uq-font-size-xxxxl)};
6
6
 
7
- --hero-gap: #{core.$space-ul};
8
- --hero-spacing: #{core.$space-ul};
9
- --hero-basic-spacing: #{core.$space-uuul};
7
+ --hero-gap: #{var(--uq-space-ul)};
8
+ --hero-spacing: #{var(--uq-space-ul)};
9
+ --hero-basic-spacing: #{var(--uq-space-uuul)};
10
10
 
11
11
  --hero-aspect-ratio: 2.35 / 1;
12
12
  --hero-large-aspect-ratio: 3 / 2;
@@ -25,6 +25,6 @@
25
25
  --hero-font-size-ul: 30px;
26
26
  --hero-font-size-xxxxl: 30px;
27
27
 
28
- --hero-basic-spacing: #{core.$space-xl};
28
+ --hero-basic-spacing: #{var(--uq-space-xl)};
29
29
  }
30
30
  }
package/src/scss/_hero-basic.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use "@uqds/core/src/scss/global" as core;
2
2
 
3
3
  .uq-hero-basic {
4
- background: core.$purple-600;
4
+ background: var(--uq-purple-600);
5
5
  margin-bottom: var(--hero-gap);
6
6
  position: relative;
7
7
  }
@@ -27,31 +27,31 @@
27
27
  .uq-hero-basic__content {
28
28
  position: relative;
29
29
  z-index: 2;
30
- color: core.$white;
30
+ color: var(--uq-white);
31
31
  padding: var(--hero-basic-spacing) 0;
32
32
 
33
33
  & a {
34
- color: core.$white;
34
+ color: var(--uq-white);
35
35
  }
36
36
  }
37
37
 
38
38
  .uq-hero-basic__eyebrow {
39
- font-weight: core.$font-weight-medium;
40
- font-size: core.$font-size-m;
41
- line-height: core.$line-height;
42
- font-family: core.$font-body;
39
+ font-weight: var(--uq-font-weight-medium);
40
+ font-size: var(--uq-font-size-m);
41
+ line-height: var(--uq-line-height-long);
42
+ font-family: var(--uq-font);
43
43
  text-transform: uppercase;
44
44
  display: block;
45
45
  }
46
46
 
47
47
  .uq-hero-basic__title {
48
- color: core.$white;
48
+ color: var(--uq-white);
49
49
  margin: 0;
50
50
  max-width: var(--hero-title-max-line-length);
51
51
  }
52
52
 
53
53
  .uq-hero-basic__back {
54
- margin-top: core.$space-s;
54
+ margin-top: var(--uq-space-xs);
55
55
 
56
56
  & a {
57
57
  text-decoration: none;
@@ -63,8 +63,8 @@
63
63
 
64
64
  &:hover {
65
65
  & .uq-hero-basic__back-text {
66
- background-color: core.$white;
67
- color: core.$purple-500;
66
+ background-color: var(--uq-white);
67
+ color: var(--uq-purple-500);
68
68
  }
69
69
  }
70
70
  }
@@ -82,7 +82,7 @@
82
82
  .uq-hero-basic__tabs {
83
83
  position: relative;
84
84
  z-index: 2;
85
- padding-top: core.$space-m;
85
+ padding-top: var(--uq-space-m);
86
86
  }
87
87
 
88
88
  .uq-hero-basic--no-margin {
package/src/scss/_hero.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use "@uqds/core/src/scss/global" as core;
2
2
 
3
3
  .uq-hero {
4
- background: core.$purple-600;
4
+ background: var(--uq-purple-600);
5
5
  margin-bottom: var(--hero-gap);
6
6
 
7
7
  @media #{core.$screen-lg-up} {
@@ -39,7 +39,7 @@
39
39
  &::before {
40
40
  @media #{core.$screen-lg-up} {
41
41
  content: "";
42
- width: calc(50% - #{core.$space-xxxl});
42
+ width: calc(50% - #{var(--uq-space-xxxl)});
43
43
  flex-shrink: 1;
44
44
  }
45
45
  }
@@ -67,7 +67,7 @@
67
67
 
68
68
  .uq-hero__content {
69
69
  position: relative;
70
- background: core.$purple-500;
70
+ background: var(--uq-purple-500);
71
71
  box-shadow: 0 3px 24px 0 rgba(#181818, 0.1);
72
72
  padding: var(--layout-gap);
73
73
  margin-bottom: 8px;
@@ -89,44 +89,44 @@
89
89
  height: 8px;
90
90
  width: 100%;
91
91
  border-radius: 0 0 4px 4px;
92
- background: core.$purple-650;
92
+ background: var(--uq-purple-650);
93
93
  }
94
94
  }
95
95
 
96
96
  .uq-hero__title {
97
- color: core.$white;
97
+ color: var(--uq-white);
98
98
  font-size: var(--hero-font-size-xxxxl);
99
99
  }
100
100
 
101
101
  .uq-hero__description {
102
- margin-top: core.$space-m;
103
- font-size: core.$font-size-l;
104
- color: core.$white;
102
+ margin-top: var(--uq-space-m);
103
+ font-size: var(--uq-font-size-l);
104
+ color: var(--uq-white);
105
105
  }
106
106
 
107
107
  .uq-hero__description,
108
108
  .uq-hero__description * {
109
- color: core.$white;
110
- font-size: core.$font-size-l;
109
+ color: var(--uq-white);
110
+ font-size: var(--uq-font-size-l);
111
111
  }
112
112
 
113
113
  .uq-hero__button {
114
- margin-top: core.$space-l;
114
+ margin-top: var(--uq-space-l);
115
115
  }
116
116
 
117
117
  .uq-hero--light {
118
118
  background: unset;
119
119
 
120
120
  & .uq-hero__content {
121
- background: core.$white;
121
+ background: var(--uq-white);
122
122
 
123
123
  &::after {
124
- background: core.$purple-gradient;
124
+ background: var(--uq-purple-gradient);
125
125
  }
126
126
  }
127
127
 
128
128
  & .uq-hero__title {
129
- color: core.$purple-500;
129
+ color: var(--uq-purple-500);
130
130
  }
131
131
 
132
132
  & .uq-hero__description,