@iamproperty/components 2.0.1 → 2.1.0

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/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/foundations/reboot.scss

@@ -5,6 +5,7 @@ html {
   overflow: hidden;
   overflow-x: hidden;
   overflow-y: scroll;
+  height: 100%;
 
   font-size: vw($device-xs-width);
   
@@ -37,6 +38,17 @@ body {
   @include var(color,--colour-body);
   width: 100%;
   line-height: 1.5;
+  height: 100%;
+}
+
+#app {
+  min-height: 100%;
+}
+
+body > footer,
+body > #app > footer {
+  position: sticky;
+  top: 100vh;
 }
 
 address {