@iamproperty/components 3.1.0 → 3.4.4

package/assets/sass/{elements → components}/tooltips.scss

@@ -1,85 +1,85 @@
-@use "../_func.scss" as *;
-
-:is(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;
-
-  &:is(:hover, :focus, :active){
-
-    text-decoration: none;
-  }
-}
-
-@mixin tooltip(){
-
-  display: block;
-  z-index: var(--index-above);
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 50%;
-  min-width: max(120%, #{rem(100)});
-  transform: translate(-50%,0);
-  background: var(--body-bg);
-  color: inherit;
-  padding: 0.5em;
-  border-radius: 3px;
-  box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);
-}
-
-.tooltip {
-
-
-  &:after{
-
-    content: "";
-    display: inline-block;
-    margin-left: 0.1em;
-    margin-bottom: 0.1em;
-    width: 0.8em;
-    height: 0.9em;
-    vertical-align: text-bottom;
-    background: currentColor;
-    mask-image: var(--icon-question);
-    mask-size: 100%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon-question);
-    -webkit-mask-size: 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
-  }
-
-  .tooltip__content {
-
-    opacity: 0;
-    position: absolute;
-    
-  }
-
-  &:is(:hover, :focus, :active){
-
-    .tooltip__content {
-
-      opacity: 1;
-      @include tooltip();
-    }
-  }
-}
-
-@media (hover: none) {
-  
-  :is(abbr[title], .tooltip[title]) {
-
-    &:is(:hover, :focus, :active):before{
-      
-      content: attr(title);
-      @include tooltip();
-    }
-  }
+@use "../_func.scss" as *;
+
+:is(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;
+
+  &:is(:hover, :focus, :active){
+
+    text-decoration: none;
+  }
+}
+
+@mixin tooltip(){
+
+  display: block;
+  z-index: var(--index-above);
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 50%;
+  min-width: max(120%, #{rem(100)});
+  transform: translate(-50%,0);
+  background: var(--body-bg);
+  color: inherit;
+  padding: 0.5em;
+  border-radius: 3px;
+  box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);
+}
+
+.tooltip {
+
+
+  &:after{
+
+    content: "";
+    display: inline-block;
+    margin-left: 0.1em;
+    margin-bottom: 0.1em;
+    width: 0.8em;
+    height: 0.9em;
+    vertical-align: text-bottom;
+    background: currentColor;
+    mask-image: var(--icon-question);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-question);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+  }
+
+  .tooltip__content {
+
+    opacity: 0;
+    position: absolute;
+    
+  }
+
+  &:is(:hover, :focus, :active){
+
+    .tooltip__content {
+
+      opacity: 1;
+      @include tooltip();
+    }
+  }
+}
+
+@media (hover: none) {
+  
+  :is(abbr[title], .tooltip[title]) {
+
+    &:is(:hover, :focus, :active):before{
+      
+      content: attr(title);
+      @include tooltip();
+    }
+  }
 }

package/assets/sass/core.scss

@@ -1,6 +1,6 @@
-@charset "UTF-8";
-
-@use "_fonts";
-@use "_corefiles";
-@use "_forms";
-@use "_print";
+@charset "UTF-8";
+
+@use "_fonts";
+@use "_corefiles";
+@use "_forms";
+@use "_print";

package/assets/sass/email.scss

@@ -1,66 +1,66 @@
-@charset "UTF-8";
-
-// Set mobile only variable so that the media query mixin doesn't print out non mobile rules
-
-@use "_func" as *;
-
-$mobileOnly: "true";
-$compatible: "true";
-
-// Update the breakpoints to just one to remove some utility classes
-$grid-breakpoints: (
-  xs: 0
-);
-
-// Simplify the grid
-$grid-columns: 4;
-
-$device-xs-width: 600;
-$device-md-width: 600;
-$container-padding-x: 32;
-$default-curve-width: 600;
-
-@import "_corefiles";
-
-:root {
-
-  --container-padding-x: #{rem(66)};
-}
-
-html {
-
-  @media (min-width: #{em(600)}) {
-    font-size: 100%;
-  }
-}
-
-.content-wrapper > * {
-  max-width: 600px;
-  margin-inline: auto;
-}
-
-.container:not(.container-fluid) {
-  max-width: 600px;
-  padding-left: #{rem(48)};
-  padding-right: #{rem(48)};
-}
-
-.table--email,
-.table--email tr,
-.table--email td {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-.table--email td + td {
-  padding-left: 1rem;
-}
-
-/* card */
-.card {
-  min-height: auto;
-}
-/* utilities */
-.text-white {
-  color: white;;
+@charset "UTF-8";
+
+// Set mobile only variable so that the media query mixin doesn't print out non mobile rules
+
+@use "_func" as *;
+
+$mobileOnly: "true";
+$compatible: "true";
+
+// Update the breakpoints to just one to remove some utility classes
+$grid-breakpoints: (
+  xs: 0
+);
+
+// Simplify the grid
+$grid-columns: 4;
+
+$device-xs-width: 600;
+$device-md-width: 600;
+$container-padding-x: 32;
+$default-curve-width: 600;
+
+@import "_corefiles";
+
+:root {
+
+  --container-padding-x: #{rem(66)};
+}
+
+html {
+
+  @media (min-width: #{em(600)}) {
+    font-size: 100%;
+  }
+}
+
+.content-wrapper > * {
+  max-width: 600px;
+  margin-inline: auto;
+}
+
+.container:not(.container-fluid) {
+  max-width: 600px;
+  padding-left: #{rem(48)};
+  padding-right: #{rem(48)};
+}
+
+.table--email,
+.table--email tr,
+.table--email td {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+.table--email td + td {
+  padding-left: 1rem;
+}
+
+/* card */
+.card {
+  min-height: auto;
+}
+/* utilities */
+.text-white {
+  color: white;;
 }

package/assets/sass/error.scss

@@ -1,5 +1,5 @@
-@charset "UTF-8";
-
-// Set mobile only variable so that the media query mixin doesn't print out non mobile rules
-@use "_func" as *;
+@charset "UTF-8";
+
+// Set mobile only variable so that the media query mixin doesn't print out non mobile rules
+@use "_func" as *;
 @import "_corefiles";

package/assets/sass/foundations/brand.scss

@@ -1,72 +1,76 @@
-@use "../_func" as *;
-
-.brand {
-
-  --svg-width: #{em(380,130)};
-
-  &--sold {
-    --svg-width: #{em(247,130)};
-  }
-
-  &--key {
-    --svg-width: #{em(228,130)};
-  }
-
-  &--compliance,
-  &--movebutler {
-    --svg-width: #{em(740,130)};
-  }
-
-  &--medwaylaw {
-    --svg-width: #{em(465,130)};
-  }
-
-  display: inline-flex;
-  flex-direction: row;
-  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-brand);
-
-  /* Restrict the logo colours so that only text-secondary can be defined */
-  &[class*="text-"]:not(.text-secondary){
-    color: inherit!important;
-  }
-
-  svg {
-    fill: currentColor;
-    height: 1em;
-    width: 100%;
-    max-width: var(--svg-width);
-  }
-
-  span {
-    white-space: nowrap;
-    font-size: 1rem;
-    padding-left: rem(16);
-    line-height: 1;
-    font-weight: bold;
-    display: inline-block;
-    text-decoration: none;
-  }
-}
-
-a.brand:not(:hover):not(:focus):not(:active),
-a:not(:hover):not(:focus):not(:active) .brand {
-
-  @include var(color,--colour-brand);
-}
-
-a.brand:hover,
-a.brand:focus,
-a.brand:active,
-a:hover .brand,
-a:focus .brand,
-a:active .brand {
-  
-  color: currentColor!important;
-}
+@use "../_func" as *;
+
+.brand {
+
+  --svg-width: #{em(380,130)};
+
+  &--sold {
+    --svg-width: #{em(247,130)};
+  }
+
+  &--key {
+    --svg-width: #{em(228,130)};
+  }
+
+  &--compliance,
+  &--movebutler {
+    --svg-width: #{em(740,130)};
+  }
+
+  &--medwaylaw {
+    --svg-width: #{em(465,130)};
+  }
+
+  &--openview {
+    --svg-width: #{em(475,89)};
+  }
+
+  display: inline-flex;
+  flex-direction: row;
+  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-brand);
+
+  /* Restrict the logo colours so that only text-secondary can be defined */
+  &[class*="text-"]:not(.text-secondary){
+    color: inherit!important;
+  }
+
+  svg {
+    fill: currentColor;
+    height: 1em;
+    width: 100%;
+    max-width: var(--svg-width);
+  }
+
+  span {
+    white-space: nowrap;
+    font-size: 1rem;
+    padding-left: rem(16);
+    line-height: 1;
+    font-weight: bold;
+    display: inline-block;
+    text-decoration: none;
+  }
+}
+
+a.brand:not(:hover):not(:focus):not(:active),
+a:not(:hover):not(:focus):not(:active) .brand {
+
+  @include var(color,--colour-brand);
+}
+
+a.brand:hover,
+a.brand:focus,
+a.brand:active,
+a:hover .brand,
+a:focus .brand,
+a:active .brand {
+  
+  color: currentColor!important;
+}

package/assets/sass/foundations/circles.scss

@@ -1,75 +1,75 @@
-@use "../_func" as *;
-
-.circle {
-  position: relative;
-  border-radius: 50%;
-  height: 1em;
-  width: 1em;
-  display: inline-block;
-  font-size: rem(200);
-  overflow: hidden;
-  @include var(color,--colour-secondary);
-
-  &:not([class*="gradient-"]){
-
-    border: 2px solid currentColor;
-  }
-
-  &:not([class*="border-"]):before{
-
-    background-color: currentColor;
-  }
-
-  &:not([class*="gradient-"]):before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    mask-image: var(--icon-bg);
-    mask-size: rem(34);
-    mask-repeat: repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon-bg);
-    -webkit-mask-size: rem(34);
-    -webkit-mask-repeat: repeat;
-    -webkit-mask-position: 50% 51%;
-  }
-
-  &--cross:before,
-  &--plus:before {
-
-    background-color: currentColor;
-    --icon-bg: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' style='stroke-width: 1.25px; stroke: black;' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-3.3,20.41l6.6-6.82m.11,6.71-6.82-6.6M13.7,37.41l6.6-6.82m.11,6.71-6.82-6.6M13.7,3.41l6.6-6.82m.11,6.71L13.59-3.3M30.7,20.41l6.6-6.82m.11,6.71-6.82-6.6'/%3E%3C/svg%3E");
-  }
-
-  &--plus:before {
-
-    transform: rotate(46deg);
-  }
-  
-  &--stripe:before {
-
-    background-color: currentColor;
-    --icon-bg: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' style='stroke-width: 2px; stroke: black;' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='8.5' x2='34' y2='8.5' /%3E%3Cline y1='25.5' x2='34' y2='25.5' /%3E%3C/svg%3E");
-    transform: rotate(45deg);
-  }
-
-  &--dots:before {
-
-    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");
-  }
-
-  // Add an image into a circle
-  > img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+@use "../_func" as *;
+
+.circle {
+  position: relative;
+  border-radius: 50%;
+  height: 1em;
+  width: 1em;
+  display: inline-block;
+  font-size: rem(200);
+  overflow: hidden;
+  @include var(color,--colour-secondary);
+
+  &:not([class*="gradient-"]){
+
+    border: 2px solid currentColor;
+  }
+
+  &:not([class*="border-"]):before{
+
+    background-color: currentColor;
+  }
+
+  &:not([class*="gradient-"]):before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    mask-image: var(--icon-bg);
+    mask-size: rem(34);
+    mask-repeat: repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-bg);
+    -webkit-mask-size: rem(34);
+    -webkit-mask-repeat: repeat;
+    -webkit-mask-position: 50% 51%;
+  }
+
+  &--cross:before,
+  &--plus:before {
+
+    background-color: currentColor;
+    --icon-bg: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' style='stroke-width: 1.25px; stroke: black;' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-3.3,20.41l6.6-6.82m.11,6.71-6.82-6.6M13.7,37.41l6.6-6.82m.11,6.71-6.82-6.6M13.7,3.41l6.6-6.82m.11,6.71L13.59-3.3M30.7,20.41l6.6-6.82m.11,6.71-6.82-6.6'/%3E%3C/svg%3E");
+  }
+
+  &--plus:before {
+
+    transform: rotate(46deg);
+  }
+  
+  &--stripe:before {
+
+    background-color: currentColor;
+    --icon-bg: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' style='stroke-width: 2px; stroke: black;' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='8.5' x2='34' y2='8.5' /%3E%3Cline y1='25.5' x2='34' y2='25.5' /%3E%3C/svg%3E");
+    transform: rotate(45deg);
+  }
+
+  &--dots:before {
+
+    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");
+  }
+
+  // Add an image into a circle
+  > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }