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

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

@@ -1,102 +1,102 @@
-@use '../func' as *;
-@use '../elements/prefix' as *;
-@use '../utilities/font-awesome-iso-fallbacks';
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-.wrapper {
-  display: flex;
-  margin-top: 0.5rem;
-}
-
-:host {
-  display: block;
-  max-width: var(--input-max-width, 50rem);
-}
-
-:host(:not(.mb-0)) {
-  //margin-bottom: 1.5rem;
-}
-
-::slotted(input) {
-  margin: 0!important;
-}
-
-::slotted(input.has-prefix) {
-  margin: 0!important;
-  border-start-start-radius: 0!important;
-  border-end-start-radius: 0!important;
-}
-
-::slotted(input.has-suffix) {
-  border-start-end-radius: 0!important;
-  border-end-end-radius: 0!important;
-}
-
-// #region colors
-::slotted(input[type='color']) {
-  width: 3rem !important;
-  flex-shrink: 0 !important;
-  flex-grow: 0 !important;
-  border-start-end-radius: 0 !important;
-  border-end-end-radius: 0 !important;
-  padding: 0 !important;
-  overflow: hidden;
-}
-
-::slotted(input[type='color'])::-webkit-color-swatch{
-  border-radius: 0;
-  border: none;
-}
-
-::slotted(output) {
-  border-left: none !important;
-  border-end-start-radius: 0 !important;
-  border-start-start-radius: 0 !important;
-  margin: 0 !important;
-}
-// #endregion
-
-// #region 
-@layer elements {
-::slotted(select:is([slot="prefix"],[slot="suffix"])){
-
-  --option-colour: red;
-
-  //--input-padding-block: 0;
-
-  margin: 0!important;
-
-  padding-top: 0!important;
-  padding-left: 0.25rem!important;
-  padding-bottom: 0!important;
-  padding-right: 2rem!important;
-  
-  margin-right: 0rem !important;
-  border: none !important;
-  //color: white;
-  height: 100%!important;
-  max-height: 100%!important;
-  min-height: 100%!important;
-
-  
-  background: var(--icon-select)!important;
-  background-position: center right!important;
-  background-size: 1.25rem!important;
-  background-repeat: no-repeat!important;
-  background-color: var(--colour-primary)!important;
-  color: var(--colour-white)!important;
-
-  field-sizing: content!important;
-}
-}
-// #endregion
-
-
-.suffix[role="button"] {
-  cursor: pointer;
+@use '../func' as *;
+@use '../elements/prefix' as *;
+@use '../utilities/font-awesome-iso-fallbacks';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  display: flex;
+  margin-top: 0.5rem;
+}
+
+:host {
+  display: block;
+  max-width: var(--input-max-width, 50rem);
+}
+
+:host(:not(.mb-0)) {
+  /* margin-bottom: 1.5rem; */
+}
+
+::slotted(input) {
+  margin: 0!important;
+}
+
+::slotted(input.has-prefix) {
+  margin: 0!important;
+  border-start-start-radius: 0!important;
+  border-end-start-radius: 0!important;
+}
+
+::slotted(input.has-suffix) {
+  border-start-end-radius: 0!important;
+  border-end-end-radius: 0!important;
+}
+
+/* #region colors */
+::slotted(input[type='color']) {
+  width: 3rem !important;
+  flex-shrink: 0 !important;
+  flex-grow: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  padding: 0 !important;
+  overflow: hidden;
+}
+
+::slotted(input[type='color'])::-webkit-color-swatch{
+  border-radius: 0;
+  border: none;
+}
+
+::slotted(output) {
+  border-left: none !important;
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  margin: 0 !important;
+}
+/* #endregion */
+
+/* #region  */
+@layer elements {
+::slotted(select:is([slot="prefix"],[slot="suffix"])){
+
+  --option-colour: red;
+
+  /* --input-padding-block: 0; */
+
+  margin: 0!important;
+
+  padding-top: 0!important;
+  padding-left: 0.25rem!important;
+  padding-bottom: 0!important;
+  padding-right: 2rem!important;
+  
+  margin-right: 0rem !important;
+  border: none !important;
+  /* color: white; */
+  height: 100%!important;
+  max-height: 100%!important;
+  min-height: 100%!important;
+
+  
+  background: var(--icon-select)!important;
+  background-position: center right!important;
+  background-size: 1.25rem!important;
+  background-repeat: no-repeat!important;
+  background-color: var(--colour-primary)!important;
+  color: var(--colour-white)!important;
+
+  field-sizing: content!important;
+}
+}
+/* #endregion */
+
+
+.suffix[role="button"] {
+  cursor: pointer;
 }

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

@@ -1,65 +1,65 @@
-@use '../_func' as *;
-
-$isComponent: 'true' !default;
-
-:host {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  position: relative;
-  overflow: hidden;
-  margin-bottom: 2rem;
-  min-width: 100%;
-  padding: 2rem;
-  border-radius: 0.5rem;
-  text-align: center;
-  align-items: flex-end;
-  padding-top: 33%;
-}
-
-figure {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  margin: 0;
-
-  &:after {
-    content: '';
-
-    inset: 0;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    background-image: linear-gradient(
-      15deg,
-      #00313c 0%,
-      #03404f 28.7%,
-      #03404f 31.5%,
-      #044353 60.099999999999994%,
-      #1bb1dc 83.2%,
-      rgba(28, 182, 226, 0.486) 100%
-    );
-    opacity: 0.85;
-    z-index: 1;
-  }
-}
-
-img {
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  max-height: auto;
-  z-index: 2;
-  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
-  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-  mix-blend-mode: multiply;
-}
-
-::slotted {
-  position: relative;
-  z-index: 2;
-  text-align: center;
-}
+@use '../_func' as *;
+
+$isComponent: 'true' !default;
+
+:host {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 2rem;
+  min-width: 100%;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  text-align: center;
+  align-items: flex-end;
+  padding-top: 33%;
+}
+
+figure {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  margin: 0;
+
+  &:after {
+    content: '';
+
+    inset: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-image: linear-gradient(
+      15deg,
+      #00313c 0%,
+      #03404f 28.7%,
+      #03404f 31.5%,
+      #044353 60.099999999999994%,
+      #1bb1dc 83.2%,
+      rgba(28, 182, 226, 0.486) 100%
+    );
+    opacity: 0.85;
+    z-index: 1;
+  }
+}
+
+img {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  max-height: auto;
+  z-index: 2;
+  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+  mix-blend-mode: multiply;
+}
+
+::slotted {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+}

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

@@ -1,190 +1,161 @@
-@use '../_func' as *;
-
-:host {
-  //all: unset;
-  inset: auto;
-  top: anchor(bottom);
-  left: anchor(left);
-  position: fixed;
-  position-try-fallbacks: flip-block, flip-inline;
-  width: max-content!important;
-  min-width: max-content!important;
-  max-width: max-content!important;
-
-  height: min-content;
-  max-height: var(--menu-max-height, min(100vh - 6rem));
-  background: var(--menu-bg, canvas);
-  margin: var(--menu-margin, 0);
-  padding: var(--menu-padding, 0.5rem)!important;
-  border: var(--menu-border, 2px solid grey);
-  overflow: auto;
-
-  border: none !important;
-  border-radius: 0.5rem;
-  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
-}
-
-:host(.menu--fill) {
-  width: anchor-size(width)!important;
-  min-width: anchor-size(width)!important;
-  max-width: anchor-size(width)!important;
-}
-
-:host(:popover-open),
-:host([popover-open]) {
-  display: block;
-}
-
-:host(:not([popover])) {
-  position: static;
-  display: block;
-}
-
-:host(.menu--sm) {
-  width: 10rem;
-}
-:host(.menu--md) {
-  width: 15rem; /* 240 */
-}
-:host(.menu--lg) {
-  width: 20rem; /* 320 */
-}
-
-:host(.menu--height-sm) {
-  max-height: 12.5rem; /* 200 */
-}
-:host(.menu--height-lg) {
-  max-height: 25rem; /* 400 */
-}
-
-::slotted(*:is(button, a, label, span)) {
-  //all: unset !important;
-  background: unset !important;
-  border: unset !important;
-  color: var(--colour-primary) !important;
-  font-weight: inherit !important;
-  font-family: inherit !important;
-  font-size: 1rem !important;
-  line-height: 1.1875rem !important;
-  display: block !important;
-  margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
-  padding-block: var(--menu-item-padding, 0.5rem) !important;
-  width: var(--menu-item-width, 100%) !important;
-  max-width: var(--menu-item-width, 100%) !important;
-  text-align: var(--menu-item-text-align, left) !important;
-}
-
-::slotted(*:is(button, a, label)) {
-  padding-inline: var(--menu-item-padding, 0.5rem);
-  cursor: var(--menu-item-cursor, pointer) !important;
-}
-
-::slotted(*:is(span):first-child) {
-  padding-top: 0 !important;
-  font-weight: 700 !important;
-}
-
-::slotted(*:is(button, a, label, span):last-child) {
-  margin-bottom: 0 !important;
-}
-
-// Radio buttons
-
-::slotted(*:is(label)) {
-  --radio-size: 1.25rem;
-  --radio-inner-size: 0.75rem;
-  --radio-inner-top: 0.75rem;
-  --radio-inner-left: 0.75rem;
-
-  --checkbox-tick-size: 0.75rem;
-  --checkbox-inner-size: #{0.625rem};
-  --checkbox-inner-top: 0.375rem; /* 6 */
-  --checkbox-inner-left: 0.5rem;
-  padding-left: 2.25rem; /* 36 */
-}
-
-// States
-
-::slotted(*:is(button, a, label):is(.selected)) {
-  background: #e9f8fc !important;
-  border-left: 4px solid var(--colour-info) !important;
-  border-radius: 0.25rem !important;
-
-  padding-left: calc(var(--menu-item-padding, 0.5rem) - 4px) !important;
-}
-
-@media (prefers-color-scheme: dark) {
-  ::slotted(*:is(button, a, label):is(.selected):not(:hover, .hover)) {
-    color: black !important;
-  }
-}
-
-::slotted(*:is(button, a, label):is(:hover, .hover, :focus, .focus)) {
-  //all: unset !important;
-  background: var(--colour-light) !important;
-  border-radius: 0.25rem !important;
-}
-
-::slotted(*:is(button, a, label):is(:active, .active)) {
-  background: rgba(224, 224, 224, 1) !important;
-  border-radius: 0.25rem !important;
-}
-
-@media (prefers-color-scheme: dark) {
-  ::slotted(*:is(button, a, label):is(:active, .active)) {
-    color: black !important;
-  }
-}
-
-::slotted(hr) {
-  height: 1px !important;
-  background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
-  width: 100%;
-  margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
-  padding: 0 !important;
-}
-
-// #region sub menu
-::slotted(iam-menu:not([popover])) {
-  border: none !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  padding: 0;
-  margin: 0;
-  width: auto;
-}
-
-::slotted(iam-menu[popover]) {
-  top: anchor(top);
-  left: calc(anchor(right) + 1rem);
-}
-// #endregion
-
-/*
-
-::slotted([popovertarget]):before {
-  text-align: center;
-  display: inline-block !important;
-  vertical-align: bottom;
-  float: right;
-  color: inherit;
-  height: 1em;
-  width: 1em;
-}
-::slotted([popovertarget]:not([class*='fa-'])):before {
-  content: '' !important;
-  height: 1.2em;
-  width: 1.2em;
-  --icon-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e");
-  background: var(--menu-after-bg, currentColor) !important;
-  mask-image: var(--menu-down-icon, var(--icon-arrow));
-  mask-size: 50%;
-  mask-repeat: no-repeat;
-  mask-position: 50% 50%;
-  -webkit-mask-image: var(--menu-down-icon, var(--icon-arrow));
-  -webkit-mask-size: 50%;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: 50% 50%;
-  z-index: 2;
-}
-*/
+@use '../_func' as *;
+
+:host {
+  /* all: unset; */
+  inset: auto;
+  top: anchor(bottom);
+  left: anchor(left);
+  position: fixed;
+  position-try-fallbacks: flip-block, flip-inline;
+  width: max-content!important;
+  min-width: max-content!important;
+  max-width: max-content!important;
+
+  height: min-content;
+  max-height: var(--menu-max-height, min(100vh - 6rem));
+  background: var(--menu-bg, canvas);
+  margin: var(--menu-margin, 0);
+  padding: var(--menu-padding, 0.5rem)!important;
+  border: var(--menu-border, 2px solid grey);
+  overflow: auto;
+
+  border: none !important;
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+}
+
+:host(.menu--fill) {
+  width: anchor-size(width)!important;
+  min-width: anchor-size(width)!important;
+  max-width: anchor-size(width)!important;
+}
+
+:host(:popover-open),
+:host([popover-open]) {
+  display: block;
+}
+
+:host(:not([popover])) {
+  position: static;
+  display: block;
+}
+
+:host(.menu--sm) {
+  width: 10rem;
+}
+:host(.menu--md) {
+  width: 15rem; /* 240 */
+}
+:host(.menu--lg) {
+  width: 20rem; /* 320 */
+}
+
+:host(.menu--height-sm) {
+  max-height: 12.5rem; /* 200 */
+}
+:host(.menu--height-lg) {
+  max-height: 25rem; /* 400 */
+}
+
+::slotted(*:is(button, a, label, span)) {
+  /* all: unset !important; */
+  background: unset !important;
+  border: unset !important;
+  color: var(--colour-primary) !important;
+  font-weight: inherit !important;
+  font-family: inherit !important;
+  font-size: 1rem !important;
+  line-height: 1.1875rem !important;
+  display: block !important;
+  margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
+  padding-block: var(--menu-item-padding, 0.5rem) !important;
+  width: var(--menu-item-width, 100%) !important;
+  max-width: var(--menu-item-width, 100%) !important;
+  text-align: var(--menu-item-text-align, left) !important;
+}
+
+::slotted(*:is(button, a, label)) {
+  padding-inline: var(--menu-item-padding, 0.5rem);
+  cursor: var(--menu-item-cursor, pointer) !important;
+}
+
+::slotted(*:is(span):first-child) {
+  padding-top: 0 !important;
+  font-weight: 700 !important;
+}
+
+::slotted(*:is(button, a, label, span):last-child) {
+  margin-bottom: 0 !important;
+}
+
+/*  Radio buttons */
+
+::slotted(*:is(label)) {
+  --radio-size: 1.25rem;
+  --radio-inner-size: 0.75rem;
+  --radio-inner-top: 0.75rem;
+  --radio-inner-left: 0.75rem;
+
+  --checkbox-tick-size: 0.75rem;
+  --checkbox-inner-size: #{0.625rem};
+  --checkbox-inner-top: 0.375rem; /* 6 */
+  --checkbox-inner-left: 0.5rem;
+  padding-left: 2.25rem; /* 36 */
+}
+
+/*  States */
+
+::slotted(*:is(button, a, label):is(.selected)) {
+  background: #e9f8fc !important;
+  border-left: 4px solid var(--colour-info) !important;
+  border-radius: 0.25rem !important;
+
+  padding-left: calc(var(--menu-item-padding, 0.5rem) - 4px) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  ::slotted(*:is(button, a, label):is(.selected):not(:hover, .hover)) {
+    color: black !important;
+  }
+}
+
+::slotted(*:is(button, a, label):is(:hover, .hover, :focus, .focus)) {
+  /* all: unset !important; */
+  background: var(--colour-light) !important;
+  border-radius: 0.25rem !important;
+}
+
+::slotted(*:is(button, a, label):is(:active, .active)) {
+  background: rgba(224, 224, 224, 1) !important;
+  border-radius: 0.25rem !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  ::slotted(*:is(button, a, label):is(:active, .active)) {
+    color: black !important;
+  }
+}
+
+::slotted(hr) {
+  height: 1px !important;
+  background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
+  width: 100%;
+  margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
+  padding: 0 !important;
+}
+
+/* #region sub menu */
+::slotted(iam-menu:not([popover])) {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 0;
+  margin: 0;
+  width: auto;
+}
+
+::slotted(iam-menu[popover]) {
+  top: anchor(top);
+  left: calc(anchor(right) + 1rem);
+}
+/* #endregion */