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

package/assets/sass/components/tabs.component.scss

@@ -1,34 +1,34 @@
-@use '../_func' as *;
-@use '../elements/links';
-@use '../elements/buttons';
-@use '../components/tabs.config';
-
-
-:host {
-  background: transparent;
-}
-
-:host(.tabs--hidden) {
-
-  .tabs__links__wrapper{
-    display: none;
-  }
-}
-
-:host(.tabs--sm-hidden) {
-  @container (min-width: 36em) {
-
-    .tabs__links__wrapper{
-      display: none;
-    }
-  }
-}
-
-:host(.tabs--md-hidden) {
-  @container (min-width: 62em) {
-
-    .tabs__links__wrapper{
-      display: none;
-    }
-  }
-}
+@use '../_func' as *;
+@use '../elements/links';
+@use '../elements/buttons';
+@use '../components/tabs.config';
+
+
+:host {
+  background: transparent;
+}
+
+:host(.tabs--hidden) {
+
+  .tabs__links__wrapper{
+    display: none;
+  }
+}
+
+:host(.tabs--sm-hidden) {
+  @container (min-width: 36em) {
+
+    .tabs__links__wrapper{
+      display: none;
+    }
+  }
+}
+
+:host(.tabs--md-hidden) {
+  @container (min-width: 62em) {
+
+    .tabs__links__wrapper{
+      display: none;
+    }
+  }
+}

package/assets/sass/components/tabs.config.scss

@@ -1,258 +1,258 @@
-@use '../_func' as *;
-
-
-
-
-
-*:not(main):has(> iam-tabs) {
-  container-type: inline-size;
-}
-
-iam-tabs {
-  --colour-tab-underline: var(--colour-info);
-
-  details[open] {
-    padding-top: 2rem;
-  }
-
-  details:not([open]) {
-    padding-bottom: 0;
-  }
-
-  .tabs__dropdown {
-    display: none;
-    width: fit-content;
-  }
-
-  &:is(.tabs--dropdown) {
-    .tabs__dropdown {
-      display: block;
-    }
-
-    &::part(wrapper) {
-      display: none;
-    }
-  }
-
-  @container (min-width: 62em) {
-    &:is(.tabs--dropdown) {
-      .tabs__dropdown {
-        display: none;
-      }
-
-      &::part(wrapper) {
-        display: block;
-      }
-    }
-  }
-}
-
-iam-tabs::part(next-button) {
-  display: none;
-}
-
-iam-tabs.tabs--guided::part(next-button) {
-  @container (width > 62em) {
-    position: absolute;
-    top: 9.375rem; /* 150*/ 
-    right: 0;
-    display: block;
-  }
-}
-
-iam-tabs.tabs--guided::part(next-button):not(:hover) {
-  background: var(--colour-success);
-}
-
-.tabs:not(.admin-panel) {
-  position: relative;
-
-  .tabs__links__wrapper {
-    position: relative;
-    margin: 0 auto;
-
-    &:after {
-      content: '';
-      left: 50%;
-      position: relative;
-      height: 1px;
-      width: 100vw;
-      background-color: var(--colour-border);
-      transform: translate(-50%, 0);
-      display: block;
-      clear: both;
-    }
-  }
-}
-
-.tabs.admin-panel {
-  .tabs__links__wrapper {
-    &:after {
-      display: none;
-    }
-  }
-}
-
-.tabs:not(.admin-panel) .tabs__links {
-  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
-  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
-}
-
-.tabs__links {
-  scroll-snap-type: x mandatory;
-  padding-bottom: 3px;
-  position: relative;
-  display: flex;
-  flex-wrap: nowrap;
-  width: auto;
-  margin: 0 -1.5rem;
-  overflow-y: clip;
-  overflow-x: auto;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .link {
-    white-space: nowrap;
-    scroll-snap-align: start;
-    scroll-margin-left: var(--container-padding);
-  }
-
-  .link:not(.text-decoration-none):not(.btn) {
-    --is-current: 0;
-    font-weight: bold;
-    font-family: var(--font-heading);
-    font-size: 1.125rem; /* 18/16 */
-    cursor: pointer;
-    margin: 0;
-    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
-    display: inline-block;
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-
-    &:last-child {
-      margin-inline-end: 0;
-    }
-
-    &:after {
-      position: absolute;
-      content: '';
-      bottom: 0;
-      left: 50%; /*  half way across */
-      height: 3px;
-      width: 100%;
-      transform: translate(-50%, 0) scale(0, 0); /*  translate pulls this left so it's centered */
-      background: var(--colour-tab-underline, var(--colour-info));
-      transition: transform 0.4s;
-    }
-
-    &:not(.disabled) {
-      &:hover:after,
-      &:focus:after,
-      &.focus:after {
-        transform: translate(-50%, 0) scale(0.6, 1);
-      }
-    }
-
-    &:not(.disabled) {
-      &:is([aria-pressed='true'], :active, .current, .active):after {
-        transform: translate(-50%, 0) scale(1, 1);
-      }
-    }
-
-    &:is([aria-pressed='true'], .current) {
-      pointer-events: none;
-      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme) !important;
-    }
-  }
-}
-
-@media (min-width: 576px) {
-  .tabs__links {
-    .link:not(.text-decoration-none):not(.btn) {
-      padding: 2rem 2rem 0.5rem 2rem;
-    }
-  }
-
-  .tabs__links__wrapper {
-    margin: 0 auto 2.5rem;
-  }
-}
-
-/* #region admin-panel links */
-.admin-panel :is(.admin-panel__links, .tabs__links) {
-  padding: 0;
-  margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
-
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  border-bottom: 1px solid var(--colour-border);
-  overflow: hidden;
-  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-
-  &:after {
-    display: none;
-  }
-
-  @media screen and (min-width: 36em) {
-    flex-direction: row;
-  }
-
-  .link:not(.text-decoration-none):not(.btn) {
-    margin: 0;
-    /* margin-left: calc(var(--wrapper-padding) * -1); */
-    padding: 1rem var(--padding-x);
-    width: 100%;
-    position: relative;
-    text-align: left;
-    flex-grow: 1;
-    --gradient-direction: -90deg;
-    background-color: var(--colour-success);
-
-    &:not([class*='bg-']) {
-      background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
-    }
-
-    &:is(.current, [aria-pressed='true']) {
-      color: var(--colour-primary-theme);
-    }
-
-    &:not(.current, [aria-pressed='true']) {
-      background: var(--colour-canvas-2) !important;
-    }
-
-    &:after {
-      display: none;
-    }
-
-    @media screen and (min-width: 36em) {
-      margin: 0;
-
-      &:not(:first-child) {
-        border-left: 1px solid var(--colour-border) !important;
-      }
-    }
-  }
-
-  .link:is(.current, [aria-pressed='true']) {
-    pointer-events: none;
-  }
-}
-
-/* #endregion */
-@media screen and (min-width: 36em) {
-  :host(.tabs--inline) .tabs__links {
-    margin: 0;
-    justify-content: center;
-  }
-
-  :host(.tabs--inline) .tabs__links__wrapper:after {
-    width: 100%;
-  }
-}
+@use '../_func' as *;
+
+
+
+
+
+*:not(main):has(> iam-tabs) {
+  container-type: inline-size;
+}
+
+iam-tabs {
+  --colour-tab-underline: var(--colour-info);
+
+  details[open] {
+    padding-top: 2rem;
+  }
+
+  details:not([open]) {
+    padding-bottom: 0;
+  }
+
+  .tabs__dropdown {
+    display: none;
+    width: fit-content;
+  }
+
+  &:is(.tabs--dropdown) {
+    .tabs__dropdown {
+      display: block;
+    }
+
+    &::part(wrapper) {
+      display: none;
+    }
+  }
+
+  @container (min-width: 62em) {
+    &:is(.tabs--dropdown) {
+      .tabs__dropdown {
+        display: none;
+      }
+
+      &::part(wrapper) {
+        display: block;
+      }
+    }
+  }
+}
+
+iam-tabs::part(next-button) {
+  display: none;
+}
+
+iam-tabs.tabs--guided::part(next-button) {
+  @container (width > 62em) {
+    position: absolute;
+    top: 9.375rem; /* 150*/ 
+    right: 0;
+    display: block;
+  }
+}
+
+iam-tabs.tabs--guided::part(next-button):not(:hover) {
+  background: var(--colour-success);
+}
+
+.tabs:not(.admin-panel) {
+  position: relative;
+
+  .tabs__links__wrapper {
+    position: relative;
+    margin: 0 auto;
+
+    &:after {
+      content: '';
+      left: 50%;
+      position: relative;
+      height: 1px;
+      width: 100vw;
+      background-color: var(--colour-border);
+      transform: translate(-50%, 0);
+      display: block;
+      clear: both;
+    }
+  }
+}
+
+.tabs.admin-panel {
+  .tabs__links__wrapper {
+    &:after {
+      display: none;
+    }
+  }
+}
+
+.tabs:not(.admin-panel) .tabs__links {
+  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+}
+
+.tabs__links {
+  scroll-snap-type: x mandatory;
+  padding-bottom: 3px;
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  width: auto;
+  margin: 0 -1.5rem;
+  overflow-y: clip;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .link {
+    white-space: nowrap;
+    scroll-snap-align: start;
+    scroll-margin-left: var(--container-padding);
+  }
+
+  .link:not(.text-decoration-none):not(.btn) {
+    --is-current: 0;
+    font-weight: bold;
+    font-family: var(--font-heading);
+    font-size: 1.125rem; /* 18/16 */
+    cursor: pointer;
+    margin: 0;
+    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
+    display: inline-block;
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:last-child {
+      margin-inline-end: 0;
+    }
+
+    &:after {
+      position: absolute;
+      content: '';
+      bottom: 0;
+      left: 50%; /*  half way across */
+      height: 3px;
+      width: 100%;
+      transform: translate(-50%, 0) scale(0, 0); /*  translate pulls this left so it's centered */
+      background: var(--colour-tab-underline, var(--colour-info));
+      transition: transform 0.4s;
+    }
+
+    &:not(.disabled) {
+      &:hover:after,
+      &:focus:after,
+      &.focus:after {
+        transform: translate(-50%, 0) scale(0.6, 1);
+      }
+    }
+
+    &:not(.disabled) {
+      &:is([aria-pressed='true'], :active, .current, .active):after {
+        transform: translate(-50%, 0) scale(1, 1);
+      }
+    }
+
+    &:is([aria-pressed='true'], .current) {
+      pointer-events: none;
+      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme) !important;
+    }
+  }
+}
+
+@media (min-width: 576px) {
+  .tabs__links {
+    .link:not(.text-decoration-none):not(.btn) {
+      padding: 2rem 2rem 0.5rem 2rem;
+    }
+  }
+
+  .tabs__links__wrapper {
+    margin: 0 auto 2.5rem;
+  }
+}
+
+/* #region admin-panel links */
+.admin-panel :is(.admin-panel__links, .tabs__links) {
+  padding: 0;
+  margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
+
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--colour-border);
+  overflow: hidden;
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+  &:after {
+    display: none;
+  }
+
+  @media screen and (min-width: 36em) {
+    flex-direction: row;
+  }
+
+  .link:not(.text-decoration-none):not(.btn) {
+    margin: 0;
+    /* margin-left: calc(var(--wrapper-padding) * -1); */
+    padding: 1rem var(--padding-x);
+    width: 100%;
+    position: relative;
+    text-align: left;
+    flex-grow: 1;
+    --gradient-direction: -90deg;
+    background-color: var(--colour-success);
+
+    &:not([class*='bg-']) {
+      background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
+    }
+
+    &:is(.current, [aria-pressed='true']) {
+      color: var(--colour-primary-theme);
+    }
+
+    &:not(.current, [aria-pressed='true']) {
+      background: var(--colour-canvas-2) !important;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    @media screen and (min-width: 36em) {
+      margin: 0;
+
+      &:not(:first-child) {
+        border-left: 1px solid var(--colour-border) !important;
+      }
+    }
+  }
+
+  .link:is(.current, [aria-pressed='true']) {
+    pointer-events: none;
+  }
+}
+
+/* #endregion */
+@media screen and (min-width: 36em) {
+  :host(.tabs--inline) .tabs__links {
+    margin: 0;
+    justify-content: center;
+  }
+
+  :host(.tabs--inline) .tabs__links__wrapper:after {
+    width: 100%;
+  }
+}