@iamproperty/components 3.0.0 → 3.2.0

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;
+  }
 }

package/assets/sass/foundations/icons.scss

@@ -1,73 +1,81 @@
-@use "../_func" as *;
-
-.icon {
-  fill: currentColor;
-  stroke: currentColor;
-  stroke-width: 0;
-  @include var(color,--colour-brand);
-  width: rem(64);
-  height: rem(64);
-  display: inline-block;
-
-  button > &,
-  a > & {
-    width: 1.5em;
-    height: 1.5em;
-    vertical-align: text-top;
-    margin-top: -0.15em;
-    margin-inline: 0.25em;
-    color: inherit;
-  }
-
-  &[class*="text-"]{
-    fill: currentColor;
-  }
-
-  & + .icon {
-    margin-inline-start: 1rem;
-  }
-}
-
-@include inline-text(){
-  .icon {
-    width: 1em;
-    height: 1em;
-    vertical-align: text-top;
-    margin-top: 0.15em;
-    margin-inline: 0.25em;
-  }
-}
-
-// Font awesome support
-.icon[class*="fa-"]:not(.far) {
-  font-size: rem(64 - 16);
-  height: rem(64);
-  padding: 0.5rem;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  text-rendering: auto;
-  line-height: 1;
-  font-family: "Font Awesome 6 Pro";
-  font-weight: 300;
-  width: auto;
-
-  button &,
-  a & {
-    font-size: 1em;
-    height: 1em;
-    padding: 0;
-    vertical-align: text-top;
-    margin-top: 0.15em;
-    margin-inline: 0.25em;
-  }
-}
-
-@include inline-text(){
-  .icon[class*="fa-"] {
-    font-size: 1em;
-    color: inherit;
-  }
+@use "../_func" as *;
+
+.icon {
+  fill: currentColor;
+  stroke: currentColor;
+  stroke-width: 0;
+  @include var(color,--colour-brand);
+  width: rem(64);
+  height: rem(64);
+  display: inline-block;
+
+  button > &,
+  a > & {
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: text-top;
+    margin-top: -0.15em;
+    margin-inline: 0.25em;
+    color: inherit;
+  }
+
+  &[class*="text-"]{
+    fill: currentColor;
+  }
+
+  & + .icon {
+    margin-inline-start: 1rem;
+  }
+
+  &[class*="fs-"] {
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: text-top;
+    margin-top: -0.15em;
+    margin-inline: 0.25em;
+  }
+}
+
+@include inline-text(){
+  .icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: text-top;
+    margin-top: 0.15em;
+    margin-inline: 0.25em;
+  }
+}
+
+// Font awesome support
+.icon[class*="fa-"]:not(.far) {
+  font-size: rem(64 - 16);
+  height: rem(64);
+  padding: 0.5rem;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+  font-family: "Font Awesome 6 Pro";
+  font-weight: 300;
+  width: auto;
+
+  button &,
+  a & {
+    font-size: 1em;
+    height: 1em;
+    padding: 0;
+    vertical-align: text-top;
+    margin-top: 0.15em;
+    margin-inline: 0.25em;
+  }
+}
+
+@include inline-text(){
+  .icon[class*="fa-"] {
+    font-size: 1em;
+    color: inherit;
+  }
 }

package/assets/sass/foundations/media.scss

@@ -1,51 +1,51 @@
-@use "../_func" as *;
-
-@import "../../../node_modules/bootstrap/scss/_images.scss";
-
-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!important;
-  }
-
-  img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    transform: translate(-50%,-50%);
-    object-fit: cover;
-    z-index: var(--index-base);
-  }
-
-  .btn-secondary {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    z-index: var(--index-focus);
-  }
-}
+@use "../_func" as *;
+
+@import "../../../node_modules/bootstrap/scss/_images.scss";
+
+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!important;
+  }
+
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%,-50%);
+    object-fit: cover;
+    z-index: var(--index-base);
+  }
+
+  .btn-secondary {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    z-index: var(--index-focus);
+  }
+}
 // #endregion