@iamproperty/components 2.1.0 → 2.2.0

package/assets/sass/_functions/utilities.scss

@@ -72,7 +72,7 @@ $utilities: map-merge(
     "float": null
   )
 );
-// #region
+// #endregion
 
 // #region Remove the responsive classes for the spacing utilities
 /*
@@ -196,3 +196,43 @@ $utilities: map-merge(
   )
 );
 //  #endregion
+
+// #region Gradient colours 
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "gradient-color": (
+      property: background-image,
+      class: gradient,
+      local-vars: (
+        "gradient-direction": 180deg
+      ),
+      values:
+      (
+        "secondary": linear-gradient(var(--bs-gradient-direction), var(--colour-secondary) 0, transparent 100%),
+        "primary": linear-gradient(var(--bs-gradient-direction), var(--colour-primary) 0, transparent 100%),
+        "info": linear-gradient(var(--bs-gradient-direction), var(--colour-info) 0, transparent 100%)
+      )
+    )
+  )
+);
+$utilities: map-merge(
+  $utilities,
+  (
+    "gradient-direction": (
+      css-var: true,
+      class: gradient-direction,
+      values:
+      (
+        "left": 90deg,
+        "right": -90deg,
+        "up": 360deg
+      )
+    )
+  )
+);
+
+
+
+// #endregion

package/assets/sass/_functions/variables.scss

@@ -1,7 +1,8 @@
 // Declare global vars variable
 $vars: ();
+$varsMD: ();
 
-// #region Grid Breakpoints 
+// #region Grid Breakpoints, layouts
 $grid-breakpoints: (
   xs: 0,
   sm: 36em, /* 576 */
@@ -26,6 +27,25 @@ $container-max-widths: (
 
 $grid-columns: 12;
 $grid-gutter-width: 1rem; // 15px
+
+$container-padding-x: 20;
+$container-padding-x-md: 60;
+$container-padding: var(--container-padding-top) rem($container-padding-x) var(--container-padding-bottom) rem($container-padding-x);
+$container-padding-md: var(--container-padding-top) rem($container-padding-x-md) var(--container-padding-bottom) rem($container-padding-x-md);
+
+$vars: map-merge((
+  "--container-padding-top": 0,
+  "--container-padding-bottom": #{rem(16)},
+  "--container-padding-x": #{rem($container-padding-x)},
+  "--container-padding-x-md": #{rem($container-padding-x-md)},
+  "--container-padding": $container-padding,
+  "--container-padding-md": $container-padding-md
+), $vars);
+
+$varsMD: map-merge((
+  "--container-padding": var(--container-padding-md),
+  "--container-padding-x": var(--container-padding-x-md)
+), $varsMD);
 // #endregion
 
 // #region Colours
@@ -154,23 +174,34 @@ $fonts: map-merge((
 // #endregion
 
 // #region Type
-$h1-font-size:                $font-size-base * 2;
-$h2-font-size:                $font-size-base * 1.5;
-$h3-font-size:                $font-size-base * 1.5;
-$h4-font-size:                $font-size-base * 1.25;
-$h5-font-size:                $font-size-base * 1.125;
-$h6-font-size:                $font-size-base * 1.125;
-// scss-docs-end font-variables
-
-// scss-docs-start font-sizes
+
+$type-scale-1: #{rem(100)};
+$type-scale-2: #{rem(60)};
+$type-scale-3: #{rem(40)};
+$type-scale-4: #{rem(32)};
+$type-scale-5: #{rem(28)};
+$type-scale-6: #{rem(16)};
+$type-scale-7: #{rem(14)};
+
+
+$h1-font-size: var(--fs-1);
+$h2-font-size: var(--fs-2);
+$h3-font-size: var(--fs-3);
+$h4-font-size: var(--fs-4);
+$h5-font-size: var(--fs-5);
+$h6-font-size: var(--fs-6);
+
 $font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  6: $h6-font-size,
-  'badge': $badge-font-size
+  'display': $type-scale-3,
+  1: $type-scale-3,
+  2: $type-scale-4,
+  3: $type-scale-5,
+  4: $type-scale-6,
+  5: $type-scale-6,
+  6: $type-scale-6,
+  'badge': $badge-font-size,
+  'small': $type-scale-7,
+  'strapline': $type-scale-6
 );
 
 @each $size, $value in $font-sizes {
@@ -180,10 +211,10 @@ $font-sizes: (
   ), $vars);
 }
 
-$headings-margin-bottom: 0.5em;
+$headings-margin-bottom: clamp(1rem,0.5em,0.5em);
 $headings-font-style: normal;
-$headings-line-height: 1.2;
-
+$headings-line-height: clamp(1em,2.5rem,clamp(1.5em,1rem,1.2em));
+$display-line-height: $headings-line-height;
 
 @if $compatible == 'true' {
   $headings-font-family: $font-heading;
@@ -196,6 +227,21 @@ $headings-line-height: 1.2;
   $headings-color: var(--colour-primary);
 }
 
+$font-md-sizes: (
+  'display': $type-scale-1,
+  1: $type-scale-2,
+  2: $type-scale-3,
+  3: $type-scale-4,
+  4: $type-scale-5,
+  'strapline': $type-scale-5
+);
+
+@each $size, $value in $font-md-sizes {
+
+  $varsMD: map-merge((
+    --fs-#{$size}: #{$value}
+  ), $varsMD);
+}
 
 $vars: map-merge((
   --heading-weight: 700

package/assets/sass/components/accordion.scss

@@ -32,6 +32,7 @@
     vertical-align: bottom;
     margin-left: 0.5em;
     margin-right: 0.5em;
+    margin-bottom: 0.1em;
   }
 
 

package/assets/sass/components/header.scss

@@ -1,4 +1,4 @@
-.header {
+.header-banner {
   background: linear-gradient(180deg,var(--colour-secondary) 0, var(--colour-info) 100%);
   margin-bottom: rem(32);
   position: relative;

package/assets/sass/elements/container.scss

@@ -3,9 +3,12 @@
 
   margin-left: auto;
   margin-right: auto;
-  padding: 0 rem(20) rem(16) rem(20);
+  padding: var(--container-padding-top) var(--container-padding-x) var(--container-padding-bottom) var(--container-padding-x);
   width: 100%;
-  max-width: rem(1440);
+
+  &:not(.container-fluid) {
+    max-width: rem(1440);
+  }
   
   .container {
     padding-left: 0;
@@ -16,23 +19,15 @@
   }
 
   &[class*="bg-"] {
-    padding-top: rem(48);
-    padding-bottom: rem(32);
+    --container-padding-top: #{rem(48)};
+    --container-padding-bottom: #{rem(32)};
   }
 
   &[class*="bg-"] + .container:not([class*="bg-"]) {
 
-    padding-top: rem(32);
+    --container-padding-top: #{rem(32)};
   }
 
-  @include media-breakpoint-up(md) {
-    padding: 0 rem(60) rem(16) rem(60);
-
-    &[class*="bg-"] {
-      padding-top: rem(48);
-      padding-bottom: rem(32);
-    }
-  }
 
   // Fix the clearing for containers
   &:before {
@@ -54,8 +49,8 @@
   z-index: 1;
 
 
-  &[class*="circle-pattern-"] {
-    overflow: hidden;
+  &[class*="circle-pattern"] {
+    //overflow: hidden;
   }
 
   > .circle {
@@ -131,4 +126,97 @@
     }
   }
 }
-// #endregion
+// #endregion
+
+
+// #region Curve
+@mixin curve($start: 10, $point-1: 20, $point-2: 95, $end: 70, $padding-top:16)
+{
+  // Constant rules
+  position: relative;
+  
+  // Let vars
+  $height: 100;
+  $width: 576;
+  $middle-x: $width/2;
+  $edge: 2;
+  $modify: 1;
+
+  // Rules that will change
+  width: #{$width}px;
+  padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
+  margin-top: -#{($height*$modify)}px;
+  margin-left: calc(-#{($width/2)}px + 50vw);
+  clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end * $modify)+' L'+$width+',5000 L0,5000 Z'}');
+
+  @include media-breakpoint-up(sm) {
+
+    // Tablet vars
+    $width: 992;
+    $middle-x: $width/2;
+    $modify: 1.5;
+
+    // Tablet CSS rules
+    width: #{$width}px;
+    padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
+    margin-top: -#{($height*$modify)}px;
+    margin-left: calc(-#{($width/2)}px + 50vw);
+    clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end*$modify)+' L'+$width+',5000 L0,5000 Z'}');
+  }
+
+  @include media-breakpoint-up(md) {
+
+    // Desktop vars
+    $width: 1440;
+    $middle-x: $width/2;
+    $modify: 2;
+
+    // Desktop CSS rules
+    width: #{$width}px;
+    max-width: #{$width}px!important;
+    padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
+    margin-top: -#{($height*$modify)}px;
+    margin-left: calc(-#{($width/2)}px + 50vw);
+    clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end*$modify)+' L'+$width+',5000 L0,5000 Z'}');
+  }
+}
+
+.container--curve-below {
+
+  padding-bottom: calc(100px + #{rem(16)});
+
+  @include media-breakpoint-up(sm) {
+    padding-bottom: calc(150px + #{rem(16)});
+  }
+  @include media-breakpoint-up(md) {
+    padding-bottom: calc(200px + #{rem(16)});
+  }
+}
+
+
+.container--curve {
+
+  @include curve();
+}
+.container--curve--right {
+
+  @include curve(70, 95, 20, 10);
+}
+.container--curve--up {
+
+  @include curve(90,0,0,90,-16);
+}
+.container--curve--down {
+
+  @include curve(0,90,90,0,16);
+}
+
+[class*="container--curve"] {
+
+  position: relative;
+
+  @media (min-width: #{em(1440)}) {
+    margin-left: auto;
+  }
+}
+// #endregion

package/assets/sass/elements/lists.scss

@@ -1,3 +1,8 @@
+ol li,
+ul li{
+  max-width: $content-max-width;
+}
+
 .breadcrumb {
 
   font-size: rem(14);

package/assets/sass/elements/type.scss

@@ -6,7 +6,10 @@
   @include var(color,--colour-heading);
   color: var(--colour-heading,var(--colour-primary));
   display: block;
-  margin-bottom: 1rem;
+  //margin-bottom: clamp(1rem,0.5em,0.5em);
+  //line-height: clamp(2.5rem,1em,1.2em);
+  text-indent: -0.04em;
+  letter-spacing: -0.01em;
 }
 
 h1,
@@ -18,8 +21,6 @@ h2,
 h3,
 .h3 {
   @extend %heading;
-  @include var(font-family, --font-body);
-  font-weight: normal;
 }
 h4,
 .h4,
@@ -31,6 +32,15 @@ h6,
   @extend %heading;
 }
 
+.display-1,
+.display-2,
+.display-3,
+.display-4 {
+
+  @extend %heading;
+  font-size: var(--fs-display);
+}
+
 // #endregion
 
 p {
@@ -42,10 +52,13 @@ p + p {
 }
 
 .strapline {
-  @include var(font-size,--fs-4);
+  @include var(font-size,--fs-strapline);
   @include var(font-family, --font-heading);
   @include var(color,--colour-secondary);
-  font-weight: 600;
+  line-height: 1.2;
+  font-weight: 700;
+  margin-bottom: clamp(1rem,0.5em,0.5em);
+  //text-shadow: ;
 
   h1 + &,
   .h1 + & {
@@ -55,7 +68,9 @@ p + p {
 }
 
 .lead {
-  @include var(font-size,--fs-3);
+  @include var(font-size,--fs-strapline);
+  @include var(font-family, --font-heading);
+  font-weight: 700;
   line-height: 1.2;
   margin-bottom: 3rem;
   @include var(color,--colour-primary);
@@ -67,7 +82,7 @@ blockquote {
   margin-bottom: 1rem;
 
   p {
-    @include var(font-size,--fs-3);
+    @include var(font-size,--fs-4);
     @include var(color,--colour-heading);
     margin-top: 0;
     margin-bottom: 1rem;

package/assets/sass/foundations/brand.scss

@@ -24,11 +24,21 @@
   flex-wrap: nowrap;
   align-items: center;
   padding-right: rem(16);
+  padding-bottom: rem(16);
   min-width: 100%;
   min-width: Min(100%, var(--svg-width));
   font-size: rem(64);
   @include var(color,--colour-primary);
 
+  /* Restrict the logo colours so that only text-secondary can be defined */
+  &[class*="text-"]:not(.text-secondary){
+    color: inherit!important;
+  }
+
+  &[class*="text-"].text-secondary{
+    color: var(--colour-secondary-theme)!important;
+  }
+
   svg {
     fill: currentColor;
     height: 1em;

package/assets/sass/foundations/circles.scss

@@ -1,6 +1,5 @@
 .circle {
   position: relative;
-  border: 2px solid currentColor;
   border-radius: 50%;
   height: 1em;
   width: 1em;
@@ -9,12 +8,17 @@
   overflow: hidden;
   @include var(color,--colour-secondary);
 
+  &:not([class*="gradient-"]){
+
+    border: 2px solid currentColor;
+  }
+
   &:not([class*="border-"]):before{
 
     background-color: currentColor;
   }
 
-  &:before {
+  &:not([class*="gradient-"]):before {
     content: "";
     display: block;
     position: absolute;
@@ -23,13 +27,13 @@
     width: 100%;
     height: 100%;
     mask-image: var(--icon-bg);
-    mask-size: 17%;
+    mask-size: rem(34);
     mask-repeat: repeat;
     mask-position: 50% 50%;
     -webkit-mask-image: var(--icon-bg);
-    -webkit-mask-size: 17%;
+    -webkit-mask-size: rem(34);
     -webkit-mask-repeat: repeat;
-    -webkit-mask-position: 50% 50%;
+    -webkit-mask-position: 50% 51%;
   }
 
   &--cross:before,
@@ -41,7 +45,7 @@
 
   &--plus:before {
 
-    transform: rotate(45deg);
+    transform: rotate(46deg);
   }
   
   &--stripe:before {
@@ -56,11 +60,4 @@
     background-color: currentColor;
     --icon-bg: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17' r='3' /%3E%3Ccircle cy='17' r='3' /%3E%3Ccircle cx='34' cy='17' r='3' /%3E%3Ccircle cx='17' cy='34' r='3' /%3E%3C/svg%3E");
   }
-
-  &--gradient {
-    border: none!important;
-  }
-  &--gradient:before {
-    background: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);
-  }
 }

package/assets/sass/foundations/reboot.scss

@@ -2,11 +2,11 @@
 html {
 
   -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
+  height: 100%;
+  width: 100%;
   overflow: hidden;
-  overflow-x: hidden;
   overflow-y: scroll;
-  height: 100%;
-
+  overflow-x: hidden;
   font-size: vw($device-xs-width);
   
   @include media-breakpoint-up(sm) {
@@ -38,7 +38,17 @@ body {
   @include var(color,--colour-body);
   width: 100%;
   line-height: 1.5;
-  height: 100%;
+  //height: 100%;
+  //overflow-y: scroll;
+  //overflow-x: hidden;
+}
+
+@media (hover: none) {
+  body {
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
 }
 
 #app {

package/assets/sass/foundations/root.scss

@@ -5,7 +5,10 @@
   }
 
   @include media-breakpoint-up(md) {
-    --fs-1: 2.5rem;
+    
+    @each $var, $value in $varsMD {
+      #{$var}: #{$value};
+    }
   }
   --colour-underline: var(--colour-secondary);
   --colour-heading: var(--colour-primary);