@iamproperty/components 2.0.1 → 2.3.1

package/assets/sass/components/snapshot.scss

@@ -0,0 +1,69 @@
+.snapshot {
+
+  > .row {
+
+    padding-bottom: 1rem;
+
+  }
+
+  > .row > .col {
+
+    margin-bottom: 1rem;
+    min-width: rem(150);
+    position: relative;
+  }
+
+  @include media-breakpoint-up(sm) {
+    > .row > .col:nth-child(8) ~ .col {
+      max-width: 25%;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    > .row > .col:nth-child(8) ~ .col {
+      max-width: 12.5%;
+    }
+  }
+
+  &__item {
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    padding: 1rem;
+
+    &:not([class*="bg-"]){
+      border: 1px solid var(--colour-border);
+    }
+  }
+
+
+  a {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    z-index: 1;
+
+    &:hover + .snapshot__item {
+      opacity: 0.8;
+    }
+  }
+
+  &__title {
+    margin-bottom: 1rem;
+
+    &:after {
+      content: ":";
+    }
+  }
+
+  .stat {
+    text-decoration: none;
+    margin-bottom: 0;
+  }
+}

package/assets/sass/components/timeline.scss

@@ -0,0 +1,93 @@
+.timeline {
+
+  --breakpoint:(100% - #{rem(992)});
+  --pl: clamp(0rem, var(--breakpoint) * -1000, 4rem);
+  --line-pos: clamp(1rem, var(--breakpoint) * 1000, 50%);
+  --circle-pos: 1rem;
+  --line-length: 100%;
+  --img-order: 1;
+
+
+  position: relative;
+  padding-top: rem(4);
+  padding-left: var(--pl);
+  padding-bottom: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  .timeline__container:not(.timeline--simple) & {
+
+    align-items: center;
+
+    @include media-breakpoint-up(md) {
+      --img-order: 0;
+      --circle-pos: 50%;
+      --line-length: 50%;
+    }
+  }
+
+  &:before {
+    content: " ";
+    display: block;
+    background: black;
+    width: 4px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: var(--line-pos);
+  }
+
+  &:after {
+    content: " ";
+    display: block;
+    background: white;
+    width: 2rem;
+    height: 2rem;
+    margin-top: -1rem;
+    position: absolute;
+    top: var(--circle-pos);
+    left: var(--line-pos);
+    margin-left: calc(-1rem + 2px);
+    border: 4px solid black;
+    border-radius: 50%;
+  }
+
+  > * {
+    max-width: rem((1320 / 2) - 96);
+    order: 1;
+  }
+
+  > img {
+    max-width: min(100%, #{rem((1320 / 2) - 96)});
+    margin-bottom: 2rem;
+  }
+
+  &:nth-child(even) > img {
+    order: var(--img-order);
+  }
+
+  &:first-child {
+
+    &:before {
+      top: var(--circle-pos);
+      height: var(--line-length);
+    }
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+    margin-bottom: 2rem;
+
+    &:before {
+      height: var(--line-length);
+    }
+
+    > img {
+      margin-bottom: 0;
+    }
+  }
+}

package/assets/sass/elements/buttons.scss

@@ -28,7 +28,7 @@
   border-radius: rem(20);
   margin-bottom: rem(24);
   margin-right: rem(16);
-  transition: .5s;
+  transition: background-color .5s, color .5s;
   height: auto;
 
   a:hover &,

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/tooltips.scss

@@ -0,0 +1,71 @@
+abbr[title],
+.tooltip {
+
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  text-decoration-thickness: 2px;
+  text-decoration-style: dashed;
+  text-decoration-color: var(--colour-underline);
+  position: relative;
+  cursor: help;
+
+  &:hover,
+  &:focus,
+  &:active{
+
+    text-decoration: none;
+  }
+}
+
+@mixin tooltip(){
+
+  display: block;
+  z-index: 2;
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 50%;
+  min-width: max(120%, #{rem(100)});
+  transform: translate(-50%,0);
+  background: #eee;
+  padding: 0.5em;
+  border-radius: 3px;
+  box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);
+}
+
+.tooltip {
+
+  .tooltip__content {
+
+    opacity: 0;
+    position: absolute;
+    
+  }
+
+  &:hover,
+  &:focus,
+  &:active{
+
+    .tooltip__content {
+
+      opacity: 1;
+      @include tooltip();
+    }
+  }
+}
+
+@media (hover: none) {
+  
+  abbr[title],
+  .tooltip[title] {
+
+    &:hover,
+    &:focus,
+    &:active{
+      
+      &::after {
+        content: attr(title);
+        @include tooltip();
+      }
+    }
+  }
+}

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 {
@@ -57,10 +61,13 @@
     --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%);
+  // Add an image into a circle
+  > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 }

package/assets/sass/foundations/media.scss

@@ -0,0 +1,47 @@
+img {
+  max-width: 100%;
+}
+
+.ratio {
+  > img:first-child:last-child {
+    object-fit: cover;
+  }
+}
+
+// #region Youtube
+.youtube-embed {
+
+  a,
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  a:before,
+  a:after {
+    display: none;
+  }
+
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%,-50%);
+    object-fit: cover;
+    z-index: 1;
+  }
+
+  .btn-secondary {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    z-index: 2;
+  }
+}
+// #endregion

package/assets/sass/foundations/reboot.scss

@@ -2,10 +2,11 @@
 html {
 
   -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
+  height: 100%;
+  width: 100%;
   overflow: hidden;
-  overflow-x: hidden;
   overflow-y: scroll;
-
+  overflow-x: hidden;
   font-size: vw($device-xs-width);
   
   @include media-breakpoint-up(sm) {
@@ -37,6 +38,27 @@ body {
   @include var(color,--colour-body);
   width: 100%;
   line-height: 1.5;
+  height: 100%;
+  //overflow-y: scroll;
+  //overflow-x: hidden;
+}
+
+@media (hover: none) {
+  body {
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+}
+
+#app {
+  min-height: 100%;
+}
+
+body > footer,
+body > #app > footer {
+  position: sticky;
+  top: 100vh;
 }
 
 address {

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);