@iamproperty/components 7.7.1--beta6 → 7.7.1--beta8

package/assets/sass/components/{header.scss → header.component.scss}

@@ -1,251 +1,249 @@
-@use '../_func' as *;
-@use '../elements/container' as *;
-@use '../elements/admin-panel' as *;
-
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-.container {
-  box-sizing: border-box;
-  position: relative;
-  z-index: 4;
-}
-
-:host {
-  padding-top: 0 !important;
-  margin-bottom: 2rem;
-  display: block !important;
-}
-
-.header-banner {
-  padding-top: 2.75rem; /* 44*/
-  max-width: 120rem; /* 1920 */
-  margin-inline: auto;
-  display: block;
-
-  position: relative;
-  height: auto;
-
-  > .picture-overflow {
-    overflow: hidden;
-    position: absolute;
-    inset: 0;
-    z-index: 3;
-  }
-      
-  > .picture-overflow picture {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-    overflow: hidden;
-    min-height: 25rem; /* 400 */
-    max-height: 25rem; /* 400 */
-
-    img {
-      display: block;
-      position: absolute;
-      z-index: 1;
-      inset: 0;
-      object-fit: cover;
-      object-position: 50% 50%;
-      width: 100%;
-      height: 100%;
-    }
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      z-index: 2;
-      inset: 0;
-      background: linear-gradient(300deg, rgba(30, 190, 230, 1) 0%, rgba(0, 49, 60, 1) 100%);
-      opacity: 0.85;
-    }
-  }
-
-}
-
-:host(.header--contain) {
-  .header-banner {
-    padding-bottom: 2rem;
-  }
-  .header-banner > picture {
-    max-height: 100%;
-  }
-}
-
-/*  Web component CSS */
-::slotted(.breadcrumb) {
-  margin-top: 1.5rem !important;
-  margin-bottom: -0.5rem !important;
-
-  @media screen and (min-width: 62em) {
-    position: absolute !important;
-    top: 0 !important;
-    left: 5.25rem !important;
-  }
-}
-
-::slotted(*:not(.btn__group):last-child) {
-  /* padding-bottom: 0 !important; */
-  /* margin-bottom: 0 !important; */
-}
-
-/* #region Breadcrumbs */
-:host(.has-breadcrumbs) {
-
-  .header-banner {
-    padding-top: 1rem;
-  }
-
-  ::slotted(.breadcrumbs) {
-    margin-bottom: 2rem!important;
-  }
-}
-/* #endregion */
-
-/* #region badge */
-
-slot[name="badge"] {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-/* #endregion */
-
-/* #region panel  */
-:host(.has-panel) [name="panel"]{
-
-  display: block;
-  text-align: center;
-  margin-bottom: 1rem;
-  max-height: fit-content;
-}
-
-::slotted([slot="panel"]) {
-  
-  color-scheme: light !important;
-  --colour-heading: var(--colour-primary-theme);
-  --colour-body: var(--colour-primary-theme);
-  --colour-underline: var(--colour-secondary-theme);
-  color: var(--colour-primary-theme);
-}
-
-::slotted(img[slot="panel"]) {
-  
-  max-width: 4.75rem!important; /* TODO: magic number 1 column */
-}
-
-:host(.has-panel) slot[name="panel"]{
-  container-type: inline-size;
-    anchor-name: --anchor;
-}
-
-:host(.has-panel) slot[name="badge"] {
-  
-  position-anchor: --anchor;
-  top: calc(anchor(top) + 1rem);
-  left: calc(anchor(left) + 1rem);
-  z-index: 999;
-}
-
-@media screen and (min-width: 62em) {
-      
-  :host(.has-panel) {
-    .container {
-      display: grid;
-      column-gap: var(--gap);
-      grid-template-columns: repeat(12, 1fr);
-    }
-  }
-  :host(.has-panel) slot:not([name]){
-
-    display: block;
-    grid-column-start: 1;
-    grid-column-end: 7;
-  }
-
-  :host(.has-panel) slot[name="before"]{
-
-    display: block;
-    grid-column-start: 1;
-    grid-column-end: 13;
-  }
-  :host(.has-panel) slot[name="panel"]{
-
-    display: block;
-    grid-column-start: 8;
-    grid-column-end: 13;
-  }
-
-  :host(.has-panel) .admin-panel{
-
-    text-align: center;
-  }
-}
-/* #endregion */
-
-
-/* #region toolbox  */
-:host(.has-toolbox) {
-
-  margin-bottom: 4rem;
-}
-:host(.has-toolbox) [name="toolbox"]{
-
-  display: flex;
-  flex-wrap: wrap;
-  text-align: center;
-  margin-bottom: -3rem;
-  width: fit-content;
-  margin-inline: auto;
-
-  gap: 0.5rem;
-}
-
-::slotted([slot="toolbox"]) {
-
-  margin: 0!important;
-  
-  color-scheme: light !important;
-  --colour-heading: var(--colour-primary-theme);
-  --colour-body: var(--colour-primary-theme);
-  --colour-underline: var(--colour-secondary-theme);
-  color: var(--colour-primary-theme);
-}
-
-::slotted(hr[slot="toolbox"]) {
-
-  display: inline-block;
-  vertical-align: top !important;
-  margin-top: -0.25rem !important;
-  margin-bottom: -0.25rem !important;
-  background-color: var(--colour-muted) !important;
-  width: 1px !important;
-  height: 2.5rem !important;
-}
-
-/* #endregion */
-
-/* #region gradient background */
-.gradient-overflow {
-  overflow: hidden;
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-}
-.gradient-background {
-  position: absolute;
-  left: 75%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 54rem; /* 874px */
-  aspect-ratio: 1 / 1;
-}
-/* #endregion */
+@use '../_func' as *;
+@use '../elements/container' as *;
+@use '../elements/admin-panel' as *;
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+.container {
+  box-sizing: border-box;
+  position: relative;
+  z-index: 4;
+}
+
+:host {
+  padding-top: 0 !important;
+  display: block !important;
+
+  .container {
+    padding-bottom: var(--padding-bottom)!important;
+  }
+}
+
+.header-banner {
+  padding-top: var(--padding-top);
+  max-width: 120rem; /* 1920 */
+  margin-inline: auto;
+  display: block;
+
+  position: relative;
+  height: auto;
+
+  > .picture-overflow {
+    overflow: hidden;
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+  }
+      
+  > .picture-overflow picture {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    min-height: 25rem; /* 400 */
+    max-height: 25rem; /* 400 */
+
+    img {
+      display: block;
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+      object-fit: cover;
+      object-position: 50% 50%;
+      width: 100%;
+      height: 100%;
+    }
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      z-index: 2;
+      inset: 0;
+      background: linear-gradient(300deg, rgba(30, 190, 230, 1) 0%, rgba(0, 49, 60, 1) 100%);
+      opacity: 0.85;
+    }
+  }
+
+}
+
+:host(.header--contain) {
+  .header-banner {
+    padding-bottom: 2rem;
+  }
+  .header-banner > picture {
+    max-height: 100%;
+  }
+}
+
+/*  Web component CSS */
+::slotted(.breadcrumb) {
+  margin-top: 1.5rem !important;
+  margin-bottom: -0.5rem !important;
+
+  @media screen and (min-width: 62em) {
+    position: absolute !important;
+    top: 0 !important;
+    left: 5.25rem !important;
+  }
+}
+
+/* #region Breadcrumbs */
+:host(.has-breadcrumbs) {
+
+  .header-banner {
+    padding-top: 1rem;
+  }
+
+  ::slotted(.breadcrumbs) {
+    margin-bottom: 2rem!important;
+  }
+}
+/* #endregion */
+
+/* #region badge */
+
+slot[name="badge"] {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+/* #endregion */
+
+/* #region panel  */
+:host(.has-panel) [name="panel"]{
+
+  display: block;
+  text-align: center;
+  margin-bottom: 1rem;
+  max-height: fit-content;
+}
+
+::slotted([slot="panel"]) {
+  
+  color-scheme: light !important;
+  --colour-heading: var(--colour-primary-theme);
+  --colour-body: var(--colour-primary-theme);
+  --colour-underline: var(--colour-secondary-theme);
+  color: var(--colour-primary-theme);
+}
+
+::slotted(img[slot="panel"]) {
+  
+  max-width: 4.75rem!important; /* TODO: magic number 1 column */
+}
+
+:host(.has-panel) slot[name="panel"]{
+  container-type: inline-size;
+    anchor-name: --anchor;
+}
+
+:host(.has-panel) slot[name="badge"] {
+  
+  position-anchor: --anchor;
+  top: calc(anchor(top) + 1rem);
+  left: calc(anchor(left) + 1rem);
+  z-index: 999;
+}
+
+@media screen and (min-width: 62em) {
+      
+  :host(.has-panel) {
+    .container {
+      display: grid;
+      column-gap: var(--gap);
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+  :host(.has-panel) slot:not([name]){
+
+    display: block;
+    grid-column-start: 1;
+    grid-column-end: 7;
+  }
+
+  :host(.has-panel) slot[name="before"]{
+
+    display: block;
+    grid-column-start: 1;
+    grid-column-end: 13;
+  }
+  :host(.has-panel) slot[name="panel"]{
+
+    display: block;
+    grid-column-start: 8;
+    grid-column-end: 13;
+  }
+
+  :host(.has-panel) .admin-panel{
+
+    text-align: center;
+  }
+}
+/* #endregion */
+
+
+/* #region toolbox  */
+:host(.has-toolbox) {
+
+  --padding-bottom: 1rem!important;
+  margin-bottom: 4rem!important;
+}
+:host(.has-toolbox) [name="toolbox"]{
+
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  margin-bottom: -3rem;
+  width: fit-content;
+  margin-inline: auto;
+  gap: 0.5rem;
+}
+
+::slotted([slot="toolbox"]) {
+
+  margin: 0!important;
+  
+  color-scheme: light !important;
+  --colour-heading: var(--colour-primary-theme);
+  --colour-body: var(--colour-primary-theme);
+  --colour-underline: var(--colour-secondary-theme);
+  color: var(--colour-primary-theme);
+}
+
+::slotted(hr[slot="toolbox"]) {
+
+  display: inline-block;
+  vertical-align: top !important;
+  margin-top: -0.25rem !important;
+  margin-bottom: -0.25rem !important;
+  background-color: var(--colour-muted) !important;
+  width: 1px !important;
+  height: 2.5rem !important;
+}
+
+/* #endregion */
+
+/* #region gradient background */
+.gradient-overflow {
+  overflow: hidden;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.gradient-background {
+  position: absolute;
+  left: 75%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 54rem; /* 874px */
+  aspect-ratio: 1 / 1;
+}
+/* #endregion */

package/assets/sass/components/header.preload.scss

@@ -0,0 +1,26 @@
+iam-header {
+  --padding-top: 2.75rem;
+  --padding-bottom: 2rem;
+  display: block;
+  margin-bottom: 2rem;
+}
+
+iam-header:not(:defined) {
+  
+  --colour-heading: var(--colour-white);
+  --colour-body: var(--colour-white);
+  --colour-underline: var(--colour-white);
+  color-scheme: dark;
+  color: var(--colour-white);
+  margin-left: auto;
+  margin-right: auto;
+  grid-column: full-width !important;
+  padding: var(--padding-top) var(--container-padding-x) var(--padding-bottom) var(--container-padding-x);
+  width: 100%;
+  max-width: var(--max-width);
+  background-color: var(--colour-primary-theme);
+
+  hr[slot="toolbox"] {
+    display: none!important;
+  }
+}