@uqds/hero 1.0.1 → 1.0.2-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.
Files changed (5) hide show
  1. package/dist/css/main.css +1 -1
  2. package/package.json +5 -5
  3. package/src/scss/_custom-properties.scss +1 -0
  4. package/src/scss/_hero-basic.scss +5 -0
  5. package/src/scss/_hero.scss +5 -0
package/dist/css/main.css CHANGED
@@ -1 +1 @@
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.6;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}
1
+ :root{--hero-font-size-ul: 3rem;--hero-font-size-xxxxl: 2.5rem;--hero-gap: 4rem;--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;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{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}.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": "1.0.1",
3
+ "version": "1.0.2-alpha.1",
4
4
  "description": "Hero component",
5
5
  "keywords": [
6
6
  "uqds",
@@ -41,9 +41,9 @@
41
41
  "url": "https://github.com/uq-its-ss/design-system/issues"
42
42
  },
43
43
  "dependencies": {
44
- "@uqds/button": "^0.1.1",
45
- "@uqds/core": "^1.2.1",
46
- "@uqds/grid": "^0.0.16"
44
+ "@uqds/button": "^0.1.2-alpha.0",
45
+ "@uqds/core": "^1.2.2-alpha.0",
46
+ "@uqds/grid": "^0.0.17-alpha.0"
47
47
  },
48
- "gitHead": "3fc61f80d24466d29e86b296587faf15e19f71ea"
48
+ "gitHead": "dddd9b6d43739ec904cdb291cb441e3215e7168a"
49
49
  }
package/src/scss/_custom-properties.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  --hero-font-size-ul: #{core.$font-size-ul};
5
5
  --hero-font-size-xxxxl: #{core.$font-size-xxxxl};
6
6
 
7
+ --hero-gap: #{core.$space-ul};
7
8
  --hero-spacing: #{core.$space-uul};
8
9
  --hero-basic-spacing: #{core.$space-uuul};
9
10
 
package/src/scss/_hero-basic.scss CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  .uq-hero-basic {
5
5
  background: core.$purple-600;
6
+ margin-bottom: var(--hero-gap);
6
7
  position: relative;
7
8
  }
8
9
 
@@ -67,3 +68,7 @@
67
68
  z-index: 2;
68
69
  padding-top: core.$space-m;
69
70
  }
71
+
72
+ .uq-hero-basic--no-margin {
73
+ margin-bottom: 0;
74
+ }
package/src/scss/_hero.scss CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  .uq-hero {
5
5
  background: core.$purple-600;
6
+ margin-bottom: var(--hero-gap);
6
7
 
7
8
  @media #{core.$screen-lg-up} {
8
9
  position: relative;
@@ -151,3 +152,7 @@
151
152
  font-size: var(--hero-font-size-ul);
152
153
  }
153
154
  }
155
+
156
+ .uq-hero--no-margin {
157
+ margin-bottom: 0;
158
+ }