@iamproperty/components 3.1.0 → 3.2.0

package/assets/sass/elements/links.scss

@@ -1,98 +1,98 @@
-@use "../_func.scss" as *;
-
-a,
-.link {
-  @include var (color, --colour-link);
-  display: inline-block;
-  min-height: em(28);
-  margin-bottom: rem(16);
-  position: relative;
-  text-decoration: none;
-  
-  &:not(.text-decoration-none):not(.btn):before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    width: 100%;
-    height: 2px;
-    @include var(background-color,--colour-underline);
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    -webkit-transition: .3s ease-in;
-    transition: .3s ease-in;
-  }
-
-  &:not(.text-decoration-none):not(.btn):hover:before,
-  .card:hover &:before,
-  details[open] &:not(.text-decoration-none):not(.btn):before {
-    width: 0%;
-  }
-
-  &:hover,
-  &:focus,
-  .card:hover &,
-  .card:focus &  {
-    @include var (color, --colour-hover);
-  }
-
-  &:active,
-  &.active,
-  .card:active & {
-    @include var (color, --colour-active);
-  }
-
-  &[target="_blank"]:not(.card):after,
-  &.card[target="_blank"] .btn:after {
-    
-    content: "";
-    height: 1em;    
-    width: 1em;
-    margin-left: 0.5em;
-    margin-right: -0.2em;
-    display: inline-block;
-    vertical-align: baseline;
-    margin-bottom: -0.15em;
-
-    mask-image: var(--icon-blank);
-    mask-size: 100% 100%;
-    mask-repeat: no-repeat;
-    mask-position: 0 0;
-  
-    -webkit-mask-image: var(--icon-blank);
-    -webkit-mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 0 0;
-    background-color: currentColor;
-  }
-  
-}
-@include inline-text(){
-  a {
-    min-height: none;
-    display: inline;
-    margin-bottom: 0;
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
-    text-decoration-thickness: 2px;
-    text-decoration-color: var(--colour-underline);
-
-    &:hover,
-    &:focus,
-    &:active{
-
-      text-decoration: none;
-    }
-  
-    &:before {
-
-      display: none;
-    }
-
-    &[target="_blank"]:after {
-      margin-left: 0.25em;
-      margin-right: 0.2em;
-    }
-  }
+@use "../_func.scss" as *;
+
+a,
+.link {
+  @include var (color, --colour-link);
+  display: inline-block;
+  min-height: em(28);
+  margin-bottom: rem(16);
+  position: relative;
+  text-decoration: none;
+  
+  &:not(.text-decoration-none):not(.btn):before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    @include var(background-color,--colour-underline);
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+    -webkit-transition: .3s ease-in;
+    transition: .3s ease-in;
+  }
+
+  &:not(.text-decoration-none):not(.btn):hover:before,
+  .card:hover &:before,
+  details[open] &:not(.text-decoration-none):not(.btn):before {
+    width: 0%;
+  }
+
+  &:hover,
+  &:focus,
+  .card:hover &,
+  .card:focus &  {
+    @include var (color, --colour-hover);
+  }
+
+  &:active,
+  &.active,
+  .card:active & {
+    @include var (color, --colour-active);
+  }
+
+  &[target="_blank"]:not(.card):after,
+  &.card[target="_blank"] .btn:after {
+    
+    content: "";
+    height: 1em;    
+    width: 1em;
+    margin-left: 0.5em;
+    margin-right: -0.2em;
+    display: inline-block;
+    vertical-align: baseline;
+    margin-bottom: -0.15em;
+
+    mask-image: var(--icon-blank);
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+    mask-position: 0 0;
+  
+    -webkit-mask-image: var(--icon-blank);
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 0 0;
+    background-color: currentColor;
+  }
+  
+}
+@include inline-text(){
+  a {
+    min-height: none;
+    display: inline;
+    margin-bottom: 0;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--colour-underline);
+
+    &:hover,
+    &:focus,
+    &:active{
+
+      text-decoration: none;
+    }
+  
+    &:before {
+
+      display: none;
+    }
+
+    &[target="_blank"]:after {
+      margin-left: 0.25em;
+      margin-right: 0.2em;
+    }
+  }
 }

package/assets/sass/elements/lists.scss

@@ -1,160 +1,160 @@
-@use "../_func.scss" as *;
-
-@include is('ol, ul','','li'){
-  max-width: $content-max-width;
-}
-
-.tick-list {
-
-  padding-left: 0;
-
-  li {
-    position: relative;
-    list-style: none;
-    padding-bottom: 1rem;
-    padding-left: 2.5rem;
-    
-    &:before {
-      
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 1.5em;
-      height: 1.5em;
-      
-      background: var(--colour-secondary);
-      mask-image: var(--icon-tick);
-      mask-size: 100%;
-      mask-repeat: no-repeat;
-      mask-position: 50% 50%;
-      -webkit-mask-image: var(--icon-tick);
-      -webkit-mask-size: 100%;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: 50% 50%;
-    }
-
-    &.tick--warning:before {
-
-      background: var(--colour-warning);
-      mask-image: var(--icon-warning);
-      -webkit-mask-image: var(--icon-warning);
-    }
-
-    &.tick--danger:before {
-
-      background: var(--colour-danger);
-      mask-image: var(--icon-warning);
-      -webkit-mask-image: var(--icon-warning);
-    }
-
-    &.tick--incomplete:before {
-
-      background: var(--colour-admin);
-      mask-image: none;
-      -webkit-mask-image: none;
-      border-radius: 50%;
-      transform: scale(0.8);
-    }
-
-    &[class*="bg-"] {
-      padding: 1rem;
-      padding-left: 4rem;
-      margin-bottom: 1rem;
-      border-radius: 0.5rem;
-      z-index: 0;
-
-      &:before,
-      &:after {
-      
-        top: 50%;
-        left: 1rem;
-        width: 2rem;
-        height: 2rem;
-        margin-top: -1rem;
-      }
-
-      &:after {
-      
-        content: "";
-        position: absolute;
-        z-index: -1;
-        background-color: white;
-        border-radius: 50%;
-        transform-origin: 50% 50%;
-        transform: scale(0.9);
-      }
-
-    }
-  }
-}
-
-
-.breadcrumb {
-
-  font-size: rem(14);
-  padding-left: 0;
-  list-style: none;
-
-  li {
-    display: inline-block;
-
-    &:not(:first-child):before {
-      content: "\00A0/\00A0";
-      font-weight: bold;
-      color: var(--colour-link);
-    }
-
-    a {
-      text-decoration: none;
-      text-transform: uppercase;
-    }
-  }
-}
-
-.orderable-list {
-
-  margin-left: 3.5rem;
-  counter-reset: countItem; 
-  padding-left: 0;
-
-  li {
-    position: relative;
-    list-style: none;
-    --spread: 0.75rem;
-    box-shadow: 0 2px var(--spread) 0 rgba(154, 154, 154, 0.25);
-    padding: 1rem;
-    margin-bottom: 1rem;
-    border-radius: 0.5rem;
-    cursor: grab;
-  }
-
-  li:before {
-    content: "";
-    --gradient-direction: 180deg;
-    background-color: var(--colour-info);
-    background-image: linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%) !important;
-    height: 100%;
-    width: 2.5rem;
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: calc(100% + 1rem);
-    border-radius: 0.5rem;
-  }
-
-  li:after {
-    counter-increment: countItem; /* Increment the value of section counter by 1 */
-    content: counter(countItem);
-    height: 2rem;
-    width: 2.5rem;
-    line-height: 2rem;
-    font-size: rem(20);
-    font-weight: bold;
-    display: inline-block;
-    position: absolute;
-    top: calc(50% - 1rem);
-    right: calc(100% + 1rem);
-    text-align: center;
-  }
+@use "../_func.scss" as *;
+
+@include is('ol, ul','','li'){
+  max-width: $content-max-width;
+}
+
+.tick-list {
+
+  padding-left: 0;
+
+  li {
+    position: relative;
+    list-style: none;
+    padding-bottom: 1rem;
+    padding-left: 2.5rem;
+    
+    &:before {
+      
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1.5em;
+      height: 1.5em;
+      
+      background: var(--colour-secondary);
+      mask-image: var(--icon-tick);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-tick);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+    }
+
+    &.tick--warning:before {
+
+      background: var(--colour-warning);
+      mask-image: var(--icon-warning);
+      -webkit-mask-image: var(--icon-warning);
+    }
+
+    &.tick--danger:before {
+
+      background: var(--colour-danger);
+      mask-image: var(--icon-warning);
+      -webkit-mask-image: var(--icon-warning);
+    }
+
+    &.tick--incomplete:before {
+
+      background: var(--colour-admin);
+      mask-image: none;
+      -webkit-mask-image: none;
+      border-radius: 50%;
+      transform: scale(0.8);
+    }
+
+    &[class*="bg-"] {
+      padding: 1rem;
+      padding-left: 4rem;
+      margin-bottom: 1rem;
+      border-radius: 0.5rem;
+      z-index: 0;
+
+      &:before,
+      &:after {
+      
+        top: 50%;
+        left: 1rem;
+        width: 2rem;
+        height: 2rem;
+        margin-top: -1rem;
+      }
+
+      &:after {
+      
+        content: "";
+        position: absolute;
+        z-index: -1;
+        background-color: white;
+        border-radius: 50%;
+        transform-origin: 50% 50%;
+        transform: scale(0.9);
+      }
+
+    }
+  }
+}
+
+
+.breadcrumb {
+
+  font-size: rem(14);
+  padding-left: 0;
+  list-style: none;
+
+  li {
+    display: inline-block;
+
+    &:not(:first-child):before {
+      content: "\00A0/\00A0";
+      font-weight: bold;
+      color: var(--colour-link);
+    }
+
+    a {
+      text-decoration: none;
+      text-transform: uppercase;
+    }
+  }
+}
+
+.orderable-list {
+
+  margin-left: 3.5rem;
+  counter-reset: countItem; 
+  padding-left: 0;
+
+  li {
+    position: relative;
+    list-style: none;
+    --spread: 0.75rem;
+    box-shadow: 0 2px var(--spread) 0 rgba(154, 154, 154, 0.25);
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.5rem;
+    cursor: grab;
+  }
+
+  li:before {
+    content: "";
+    --gradient-direction: 180deg;
+    background-color: var(--colour-info);
+    background-image: linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%) !important;
+    height: 100%;
+    width: 2.5rem;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    right: calc(100% + 1rem);
+    border-radius: 0.5rem;
+  }
+
+  li:after {
+    counter-increment: countItem; /* Increment the value of section counter by 1 */
+    content: counter(countItem);
+    height: 2rem;
+    width: 2.5rem;
+    line-height: 2rem;
+    font-size: rem(20);
+    font-weight: bold;
+    display: inline-block;
+    position: absolute;
+    top: calc(50% - 1rem);
+    right: calc(100% + 1rem);
+    text-align: center;
+  }
 }