@uqds/hero 1.0.0-alpha.0 → 1.0.0-alpha.2

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 -3
  3. package/src/scss/_custom-properties.scss +6 -2
  4. package/src/scss/_hero-basic.scss +2 -1
  5. package/src/scss/_hero.scss +2 -1
package/dist/css/main.css CHANGED
@@ -1 +1 @@
1
- :root{--font-size-ul: 3rem;--hero-spacing: 4.5rem;--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: 790px}@media(max-width: 63.9375rem){:root{--font-size-ul: 30px;--hero-basic-spacing: 2rem}}.uq-hero{background:#4b2271}@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}.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(--font-size-ul)}.uq-hero-basic{background:#4b2271;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.5;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;display:block}.uq-hero-basic__title{font-size:var(--font-size-ul);color:#fff;margin:0}.uq-hero-basic__back{margin-top:.5rem}.uq-hero-basic__back .uq-icon::before{width:16px;height:19px}.uq-hero-basic__tabs{position:relative;z-index:2;padding-top:1rem}
1
+ :root{--hero-font-size-ul: 3rem;--hero-font-size-xxxxl: 2.5rem;--hero-spacing: 4.5rem;--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: 790px;--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}@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-basic{background:#4b2271;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.5;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;display:block}.uq-hero-basic__title{font-size:var(--hero-font-size-xxxxl);color:#fff;margin:0;max-width:var(--hero-title-max-line-length)}.uq-hero-basic__back{margin-top:.5rem}.uq-hero-basic__back .uq-icon::before{width:16px;height:19px}.uq-hero-basic__tabs{position:relative;z-index:2;padding-top:1rem}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uqds/hero",
3
- "version": "1.0.0-alpha.0",
3
+ "version": "1.0.0-alpha.2",
4
4
  "description": "Hero component",
5
5
  "keywords": [
6
6
  "uqds",
@@ -29,6 +29,7 @@
29
29
  "src/*",
30
30
  "dist/*"
31
31
  ],
32
+ "style": "dist/css/main.css",
32
33
  "scripts": {
33
34
  "prepare": "gulp -f ../../gulpfile.js --cwd=. prepare"
34
35
  },
@@ -40,9 +41,9 @@
40
41
  "url": "https://github.com/uq-its-ss/design-system/issues"
41
42
  },
42
43
  "dependencies": {
43
- "@uqds/button": "^0.1.0-alpha.0",
44
+ "@uqds/button": "^0.1.0-alpha.1",
44
45
  "@uqds/core": "^1.2.0-alpha.0",
45
46
  "@uqds/grid": "^0.0.15-alpha.2"
46
47
  },
47
- "gitHead": "f2f4a0823e08482e73c1496dd17f00d4c971b4ca"
48
+ "gitHead": "5a418a27d88d3e25d84e177120d8de8f6d1a0c4d"
48
49
  }
package/src/scss/_custom-properties.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  @use "@uqds/core/src/scss/global" as core;
2
2
 
3
3
  :root {
4
- --font-size-ul: #{core.$font-size-ul};
4
+ --hero-font-size-ul: #{core.$font-size-ul};
5
+ --hero-font-size-xxxxl: #{core.$font-size-xxxxl};
5
6
 
6
7
  --hero-spacing: #{core.$space-uul};
7
8
  --hero-basic-spacing: #{core.$space-uuul};
@@ -13,12 +14,15 @@
13
14
  --hero-large-min-height: 500px;
14
15
 
15
16
  --hero-image-max-width: 790px;
17
+
18
+ --hero-title-max-line-length: 518px;
16
19
  }
17
20
 
18
21
  // Resize custom properties for tablet/mobile.
19
22
  @media #{core.$screen-lg-down} {
20
23
  :root {
21
- --font-size-ul: 30px;
24
+ --hero-font-size-ul: 30px;
25
+ --hero-font-size-xxxxl: 30px;
22
26
 
23
27
  --hero-basic-spacing: #{core.$space-xl};
24
28
  }
package/src/scss/_hero-basic.scss CHANGED
@@ -45,9 +45,10 @@
45
45
  }
46
46
 
47
47
  .uq-hero-basic__title {
48
- font-size: var(--font-size-ul);
48
+ font-size: var(--hero-font-size-xxxxl);
49
49
  color: core.$white;
50
50
  margin: 0;
51
+ max-width: var(--hero-title-max-line-length);
51
52
  }
52
53
 
53
54
  .uq-hero-basic__back {
package/src/scss/_hero.scss CHANGED
@@ -95,6 +95,7 @@
95
95
 
96
96
  .uq-hero__title {
97
97
  color: core.$white;
98
+ font-size: var(--hero-font-size-xxxxl);
98
99
  }
99
100
 
100
101
  .uq-hero__description {
@@ -147,6 +148,6 @@
147
148
  }
148
149
 
149
150
  & .uq-hero__title {
150
- font-size: var(--font-size-ul);
151
+ font-size: var(--hero-font-size-ul);
151
152
  }
152
153
  }