@iamproperty/components 7.2.2--beta2 → 7.3.0

package/assets/sass/elements/forms.scss

@@ -326,8 +326,8 @@ $optionalText: 'true' !default;
     clear: both;
     display: block;
     float: none;
-    font-size: rem(map.get($heading-sizes, 'h4_fs'));
-    line-height: rem(map.get($heading-sizes, 'h4_lh'));
+    font-size: map.get($heading-sizes, 'h4_fs');
+    line-height: map.get($heading-sizes, 'h4_lh');
     padding-bottom: 0.5rem;
     max-width: var(--content-max-width);
     min-width: 100%;
@@ -762,8 +762,8 @@ $optionalText: 'true' !default;
         border: 2px solid var(--colour-check-border, var(--colour-primary));
         background: var(--colour-check-bg, transparent);
         border-radius: var(--border-radius);
-        height: rem(24);
-        width: rem(24);
+        height: var(--radio-size, #{rem(24)});
+        width: var(--radio-size, #{rem(24)});
         display: inline-block;
         position: absolute;
         top: rem(10 - 2);
@@ -783,10 +783,14 @@ $optionalText: 'true' !default;
         border-radius: var(--border-radius);
         height: rem(14);
         width: rem(14);
+
+        height: var(--radio-inner-size, #{rem(14)});
+        width: var(--radio-inner-size, #{rem(14)});
+
         display: none;
         position: absolute;
-        top: rem(15 - 2);
-        left: calc(#{rem(5)} + var(--outline-width));
+        top: var(--radio-inner-top, #{rem(15 - 2)});
+        left: var(--radio-inner-left, calc(#{rem(5)} + var(--outline-width)));
       }
 
       &.radio--tick {
@@ -854,19 +858,19 @@ $optionalText: 'true' !default;
       &:after {
         content: '\f00c';
         position: absolute;
-        font-size: 1em;
+        font-size: var(--checkbox-tick-size, 1em);
         line-height: 1;
         color: var(--colour-primary-theme);
         font-family: 'Font Awesome 6 Pro';
         font-weight: bold;
-        height: rem(24);
-        width: rem(24);
+        height: var(--checkbox-inner-size, #{rem(24)});
+        width: var(--checkbox-inner-size, #{rem(24)});
         line-height: rem(26);
         background: none !important;
         border: none !important;
         outline: none !important;
-        top: rem(10 - 2);
-        left: var(--outline-width);
+        top: var(--checkbox-inner-top, #{rem(10 - 2)});
+        left: var(--checkbox-inner-left, var(--outline-width));
         text-align: center;
       }
     }
@@ -881,19 +885,19 @@ $optionalText: 'true' !default;
       &:after {
         content: '\f068';
         position: absolute;
-        font-size: 1em;
+        font-size: var(--checkbox-tick-size, 1em);
         line-height: 1;
         color: var(--colour-primary-theme);
         font-family: 'Font Awesome 6 Pro';
         font-weight: bold;
-        height: rem(24);
-        width: rem(24);
+        height: var(--checkbox-inner-size, #{rem(24)});
+        width: var(--checkbox-inner-size, #{rem(24)});
         line-height: rem(26);
         background: none !important;
         border: none !important;
         outline: none !important;
-        top: rem(10 - 2);
-        left: var(--outline-width);
+        top: var(--checkbox-inner-top, #{rem(10 - 2)});
+        left: var(--checkbox-inner-left, var(--outline-width));
         text-align: center;
       }
     }
@@ -964,7 +968,8 @@ $optionalText: 'true' !default;
   }
 
   input:checked + .conditional,
-  input:checked + label + .conditional {
+  input:checked + label + .conditional,
+  label:has(:checked) + .conditional {
     display: block;
     clear: both;
   }
@@ -978,7 +983,12 @@ $optionalText: 'true' !default;
   input.conditional-input-2:checked ~ .conditional-2,
   input.conditional-input-3:checked ~ .conditional-3,
   input.conditional-input-4:checked ~ .conditional-4,
-  input.conditional-input-5:checked ~ .conditional-5 {
+  input.conditional-input-5:checked ~ .conditional-5,
+  label:has(input.conditional-input-1:checked) ~ .conditional-1,
+  label:has(input.conditional-input-2:checked) ~ .conditional-2,
+  label:has(input.conditional-input-3:checked) ~ .conditional-3,
+  label:has(input.conditional-input-4:checked) ~ .conditional-4,
+  label:has(input.conditional-input-5:checked) ~ .conditional-5 {
     display: block;
     clear: both;
   }

package/assets/sass/elements/links.scss

@@ -58,7 +58,7 @@ $darkMode: 'true' !default;
     position: relative;
     font-weight: bold;
 
-    &:not(.text-decoration-none) {
+    &:not(.text-decoration-none)  {
       &:after {
         position: absolute;
         content: '';
@@ -159,3 +159,51 @@ $darkMode: 'true' !default;
 
   // #endregion
 }
+
+:is(.youtube-link[data-youtube], .vimeo-link[data-vimeo]){
+
+  position: relative;
+
+  &:before {
+    content: '';
+    display: block;
+    background-color: var(--video-btn-colour, var(--colour-success));
+    height: 3rem;
+    width: 3rem;
+    position: absolute;
+    top: calc(50% - 1.5rem);
+    left: calc(50% - 1.5rem);
+    z-index: 2;
+    border-radius: 1.5rem;
+  }
+
+  &:after {
+    $icon-play: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");
+    --icon: #{$icon-play};
+
+    content: '';
+    display: block;
+    height: 1rem;
+    width: 1rem;
+    position: absolute;
+    top: calc(50% - 0.5rem);
+    left: calc(50% - 0.4rem);
+    z-index: 5;
+    background: var(--colour-primary-theme);
+    mask-image: var(--icon);
+    mask-size: 80%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon);
+    -webkit-mask-size: 80%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+  }
+
+  &:is(:hover, :focus) {
+    --video-btn-colour: var(--colour-canvas);
+  }
+  &:is(:active) {
+    --video-btn-colour: color-mix(in oklab, var(--colour-success), #000000 20%) !important;
+  }
+}

package/assets/sass/elements/toggle-button.scss

@@ -0,0 +1,55 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+
+// #region toggle
+  .toggle {
+    --outline-width: 0.25rem!important;
+    padding-left: 3.25rem !important;
+  }
+
+  .toggle:before {
+    border-radius: 2rem !important;
+    background-color: var(--colour-canvas) !important;
+    border: 2px solid var(--colour-heading) !important;
+    transition: 0.4s !important;
+    width: 2.5rem !important;
+    left: 0.25rem !important;
+  }
+
+  label.toggle:has(:is(input[type='checkbox'],input[type="radio"]):not([disabled]):checked):before {
+    background: var(--colour-primary-theme) !important;
+  }
+
+  .toggle:after {
+    position: absolute !important;
+    content: '' !important;
+    display: block!important;
+    top: 0.5rem !important;
+    height: 1em !important;
+    width: 1em !important;
+    left: 0.25em !important;
+    background-color: var(--colour-heading) !important;
+    -webkit-transition: 0.4s !important;
+    transition: 0.4s !important;
+    margin: 0.25em !important;
+    border-radius: 0.5em;
+  }
+
+  label.toggle:has(:is(input[type='checkbox'],input[type='radio']):not([disabled]):not([disabled]):checked):after {
+    background: var(--colour-primary-theme) !important;
+    background-color: white !important;
+    -webkit-transform: translateX(1rem) !important;
+    -ms-transform: translateX(1rem) !important;
+    transform: translateX(1rem) !important;
+  }
+  // #endregion
+
+  label.toggle:has(+ label.toggle) {
+    margin-bottom: 0!important;
+  }
+}

package/assets/sass/elements/type.scss

@@ -17,19 +17,18 @@ $darkMode: 'true' !default;
   // #region headings
 
   %heading {
-    --line-height: #{$headings-line-height};
-    // From bootstrap reboot
+
     margin-top: 0; // 1
-    margin-bottom: $headings-margin-bottom;
+    margin-bottom: 0;
     font-family: $headings-font-family;
     font-style: $headings-font-style;
     font-weight: bold;
-    line-height: var(--line-height);
+
+    line-height: round(calc(1em * var(--type-scale)),0.25rem);
+    padding-bottom: round(calc(1em * var(--type-scale)),0.25rem);
     color: $headings-color;
-    // END:Bootstap reboot
     clear: both;
     display: block;
-    padding-bottom: 2rem;
 
     [class*='fa-'] {
       margin-right: 0.5rem;
@@ -41,60 +40,31 @@ $darkMode: 'true' !default;
   }
 
   :is(.h1, h1) {
-    --line-height: #{rem(map.get($heading-sizes, 'h1_lh'))};
 
-    font-size: rem(map.get($heading-sizes, 'h1_fs'));
-    padding-bottom: rem(map.get($heading-sizes, 'h1_pb'));
+    font-size: map.get($heading-sizes, 'h1_fs');
     font-weight: 900;
-
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: rem(map.get($heading-sizes, 'h1_fs_sm'));
-      --line-height: #{rem(map.get($heading-sizes, 'h1_lh_sm'))};
-      padding-bottom: rem(map.get($heading-sizes, 'h1_pb_sm'));
-    }
   }
 
+
   :is(h2, .h2) {
-    font-size: rem(map.get($heading-sizes, 'h2_fs'));
-    --line-height: #{rem(map.get($heading-sizes, 'h2_lh'))};
-    padding-bottom: rem(map.get($heading-sizes, 'h1_pb'));
+    font-size: map.get($heading-sizes, 'h2_fs');
     font-weight: 900;
-
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: rem(map.get($heading-sizes, 'h2_fs_sm'));
-      --line-height: #{rem(map.get($heading-sizes, 'h2_lh_sm'))};
-      padding-bottom: rem(map.get($heading-sizes, 'h2_pb_sm'));
-    }
   }
 
   :is(h3, .h3) {
-    font-size: rem(map.get($heading-sizes, 'h3_fs'));
-    --line-height: #{rem(map.get($heading-sizes, 'h3_lh'))};
-    padding-bottom: rem(map.get($heading-sizes, 'h3_pb'));
+    font-size: map.get($heading-sizes, 'h3_fs');
     max-width: var(--content-max-width);
-    font-weight: 900;
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: rem(map.get($heading-sizes, 'h3_fs_sm'));
-      --line-height: #{rem(map.get($heading-sizes, 'h3_lh_sm'))};
-      padding-bottom: rem(map.get($heading-sizes, 'h3_pb_sm'));
-    }
+    line-height: round(calc(1em * var(--type-scale)),0.25rem);
+    padding-bottom: round(calc(1em * var(--type-scale)),0.25rem);
   }
 
   :is(.h4, h4, .h5, h5, .h6, h6) {
-    font-size: rem(map.get($heading-sizes, 'h4_fs'));
-    --line-height: #{rem(map.get($heading-sizes, 'h4_lh'))};
-    padding-bottom: rem(map.get($heading-sizes, 'h4_pb'));
+    font-size: map.get($heading-sizes, 'h4_fs');
     max-width: var(--content-max-width);
-
-    /* The values for mobile and tablet are exactly the same, but if that changes this block needs to be re-instated 
-  @include media-breakpoint-up(sm,$mobileOnly) {
-
-    font-size: rem(map.get($heading-sizes,"h4_fs_sm"));
-    line-height: rem(map.get($heading-sizes,"h4_lh_sm"));
-    padding-bottom: rem(map.get($heading-sizes,"h4_pb_sm"));
-  }
-  */
+    
+    line-height: round(calc(1em * var(--type-scale)),0.25rem);
+    padding-bottom: round(calc(1em * var(--type-scale)),0.25rem);
   }
   // #endregion
 
@@ -125,7 +95,6 @@ $darkMode: 'true' !default;
     line-height: rem(map.get($heading-sizes, 'small_lh'));
     padding-bottom: rem(map.get($heading-sizes, 'small_pb'));
     max-width: var(--content-max-width);
-    font-family: arial, sans-serif;
     font-weight: normal;
   }
 

package/assets/sass/error.scss

@@ -20,17 +20,11 @@
 
 @include layer('elements') {
   .h1 {
-    --line-height: #{rem(map.get($heading-sizes, 'h1_lh'))};
+    --line-height: #{map.get($heading-sizes, 'h1_lh')};
 
-    font-size: rem(map.get($heading-sizes, 'h1_fs'));
-    padding-bottom: rem(map.get($heading-sizes, 'h1_pb'));
+    font-size: map.get($heading-sizes, 'h1_fs');
+    padding-bottom: map.get($heading-sizes, 'h1_pb');
     font-weight: 900;
-
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: rem(map.get($heading-sizes, 'h1_fs_sm'));
-      --line-height: #{rem(map.get($heading-sizes, 'h1_lh_sm'))};
-      padding-bottom: rem(map.get($heading-sizes, 'h1_pb_sm'));
-    }
   }
 }
 

package/assets/sass/foundations/reboot.scss

@@ -126,18 +126,18 @@ $darkMode: 'true' !default;
   }
 
   // #region scrollbars
-  :is(div, form, fieldset, textarea, details)::-webkit-scrollbar {
+  :is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar {
     width: 10px;
     height: 10px;
   }
 
-  :is(div, form, fieldset, textarea, details)::-webkit-scrollbar-track {
+  :is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar-track {
     background-color: #f1f1f1;
     border-top: 4px solid var(--colour-canvas-2);
     border-left: 4px solid var(--colour-canvas-2);
   }
 
-  :is(div, form, fieldset, textarea, details)::-webkit-scrollbar-thumb {
+  :is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar-thumb {
     background-color: #c1c1c1;
     width: 6px;
     border-top: 4px solid var(--colour-canvas-2);

package/assets/sass/templates/form.scss

@@ -31,16 +31,12 @@ $darkMode: 'true' !default;
 
     // Make H2's look like H3's
     :is(h2, .h2) {
-      font-size: rem(map.get($heading-sizes, 'h3_fs'));
-      line-height: rem(map.get($heading-sizes, 'h3_lh'));
-      padding-bottom: rem(map.get($heading-sizes, 'h3_pb'));
+      font-size: map.get($heading-sizes, 'h3_fs');
+      line-height: map.get($heading-sizes, 'h3_lh');
+      padding-bottom: map.get($heading-sizes, 'h3_pb');
       max-width: var(--content-max-width);
 
-      @include media-breakpoint-up(sm, $mobileOnly) {
-        font-size: rem(map.get($heading-sizes, 'h3_fs_sm'));
-        line-height: rem(map.get($heading-sizes, 'h3_lh_sm'));
-        padding-bottom: rem(map.get($heading-sizes, 'h3_pb_sm'));
-      }
+
     }
 
     @include light-mode($darkMode) {