@iamproperty/components 7.7.1--beta6 → 7.7.1--beta8

package/assets/sass/elements/lists--tick-list.scss

@@ -1,112 +1,112 @@
-@use '../_func' as *;
-
-
-@layer elements {
-  
-  /* region tick list*/
-  .tick-list {
-    padding-left: 0;
-
-    li {
-      --fa-family: var(--fa-family-duotone);
-      position: relative;
-      list-style: none;
-      padding-bottom: 1rem;
-      padding-left: 1.5em;
-
-      &:before  {
-        content: var(--fa,'\f058');
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1em;
-        height: 1em;
-        font-size: 1em;
-        /* color: var(--tick-colour, var(--colour-complete)); */
-        font-family: var(--fa-family,'Font Awesome 7 Pro');
-        font-weight: var(--icon-weight, 900);
-        color: var(--colour-white);
-      }
-
-      &:after {
-        content: var(--fa,'\f058');
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1em;
-        height: 1em;
-        font-size: 1em;
-        color: var(--tick-colour, var(--colour-success));
-        font-family: var(--fa-family,'Font Awesome 7 Pro');
-        font-weight: var(--icon-weight, 900);
-        font-feature-settings: "ss01";
-      }
-    }
-
-    .tick--warning {
-      --fa: '\f071';
-      --tick-colour: var(--colour-warning);
-    }
-    
-    .tick--danger {
-      --fa: '\f06a';
-      --tick-colour: var(--colour-danger);
-    }
-
-    .tick--incomplete:before {
-      font-family: 'Font Awesome 7 Pro';
-      background: var(--colour-admin);
-      mask-image: none;
-      -webkit-mask-image: none;
-      border-radius: 50%;
-      transform: scale(0.8);
-    }
-    .tick--incomplete:after {
-      display: none;
-    }
-    .tick--loading:before {
-      font-family: 'Font Awesome 7 Pro';
-      content: '\f3f4';
-      font-weight: var(--icon-weight, 900);
-      color: var(--colour-heading);
-      animation: spin 1.5s infinite steps(10);
-      font-size: 1em;
-    }
-    .tick--loading:after {
-      display: none;
-    }
-
-    li[class*='bg-'] {
-      padding: 1rem;
-      padding-left: 4rem;
-      margin-bottom: 1rem;
-      border-radius: 0.5rem;
-      z-index: 0;
-
-      &:is(: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);
-      }
-    }
-  }
-
-  .bg-primary .tick-list {
-    
-    --icon-weight: 900;
-  }
-  /* #endregion */
-
-}
+@use '../_func' as *;
+
+
+@layer elements {
+  
+  /* region tick list*/
+  .tick-list {
+    padding-left: 0;
+
+    li {
+      --fa-family: var(--fa-family-duotone);
+      position: relative;
+      list-style: none;
+      padding-bottom: 1rem;
+      padding-left: 1.5em;
+
+      &:before  {
+        content: var(--fa,'\f058');
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1em;
+        height: 1em;
+        font-size: 1em;
+        /* color: var(--tick-colour, var(--colour-complete)); */
+        font-family: var(--fa-family,'Font Awesome 7 Pro');
+        font-weight: var(--icon-weight, 900);
+        color: var(--colour-white);
+      }
+
+      &:after {
+        content: var(--fa,'\f058');
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1em;
+        height: 1em;
+        font-size: 1em;
+        color: var(--tick-colour, var(--colour-success));
+        font-family: var(--fa-family,'Font Awesome 7 Pro');
+        font-weight: var(--icon-weight, 900);
+        font-feature-settings: "ss01";
+      }
+    }
+
+    .tick--warning {
+      --fa: '\f071';
+      --tick-colour: var(--colour-warning);
+    }
+    
+    .tick--danger {
+      --fa: '\f06a';
+      --tick-colour: var(--colour-danger);
+    }
+
+    .tick--incomplete:before {
+      font-family: 'Font Awesome 7 Pro';
+      background: var(--colour-admin);
+      mask-image: none;
+      -webkit-mask-image: none;
+      border-radius: 50%;
+      transform: scale(0.8);
+    }
+    .tick--incomplete:after {
+      display: none;
+    }
+    .tick--loading:before {
+      font-family: 'Font Awesome 7 Pro';
+      content: '\f3f4';
+      font-weight: var(--icon-weight, 900);
+      color: var(--colour-heading);
+      animation: spin 1.5s infinite steps(10);
+      font-size: 1em;
+    }
+    .tick--loading:after {
+      display: none;
+    }
+
+    li[class*='bg-'] {
+      padding: 1rem;
+      padding-left: 4rem;
+      margin-bottom: 1rem;
+      border-radius: 0.5rem;
+      z-index: 0;
+
+      &:is(: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);
+      }
+    }
+  }
+
+  .bg-primary .tick-list {
+    
+    --icon-weight: 900;
+  }
+  /* #endregion */
+
+}

package/assets/sass/elements/lists.scss

@@ -1,99 +1,99 @@
-@use '../_func' as *;
-
-
-@layer elements {
-  :is(ol, ul) {
-    padding-left: 2rem;
-  }
-
-  :is(ol, ul, dl) {
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-
-  :is(ol, ul) :is(ol, ul) {
-    margin-bottom: 0;
-  }
-
-  li {
-    max-width: var(--content-max-width);
-  }
-
-  dt {
-    font-weight: bold;
-  }
-
-  dd {
-    margin-bottom: 0.5rem;
-    margin-left: 0; 
-  }
-
-  /* #region basic list modifiers */
-  .list-unstyled {
-    padding-left: 0;
-    list-style: none;
-  }
-  .list-inline {
-    padding-left: 0;
-    list-style: none;
-  }
-  .list-inline-item {
-    display: inline-block;
-
-    &:not(:last-child) {
-      margin-right: 0.5rem;
-    }
-  }
-  
-  .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: 1.25rem;
-      font-weight: bold;
-      display: inline-block;
-      position: absolute;
-      top: calc(50% - 1rem);
-      right: calc(100% + 1rem);
-      text-align: center;
-    }
-  }
-  /* #endregion */
-
-}
+@use '../_func' as *;
+
+
+@layer elements {
+  :is(ol, ul) {
+    padding-left: 2rem;
+  }
+
+  :is(ol, ul, dl) {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  :is(ol, ul) :is(ol, ul) {
+    margin-bottom: 0;
+  }
+
+  li {
+    max-width: var(--content-max-width);
+  }
+
+  dt {
+    font-weight: bold;
+  }
+
+  dd {
+    margin-bottom: 0.5rem;
+    margin-left: 0; 
+  }
+
+  /* #region basic list modifiers */
+  .list-unstyled {
+    padding-left: 0;
+    list-style: none;
+  }
+  .list-inline {
+    padding-left: 0;
+    list-style: none;
+  }
+  .list-inline-item {
+    display: inline-block;
+
+    &:not(:last-child) {
+      margin-right: 0.5rem;
+    }
+  }
+  
+  .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: 1.25rem;
+      font-weight: bold;
+      display: inline-block;
+      position: absolute;
+      top: calc(50% - 1rem);
+      right: calc(100% + 1rem);
+      text-align: center;
+    }
+  }
+  /* #endregion */
+
+}

package/assets/sass/elements/media.css

@@ -1,20 +1,20 @@
-@layer elements {
-  figure {
-    margin: 0 0 1rem;
-  }
-
-  img,
-  svg {
-    vertical-align: middle;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  .ratio {
-    & > img:first-child:last-child {
-      object-fit: cover;
-    }
-  }
-}
+@layer elements {
+  figure {
+    margin: 0 0 1rem;
+  }
+
+  img,
+  svg {
+    vertical-align: middle;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  .ratio {
+    & > img:first-child:last-child {
+      object-fit: cover;
+    }
+  }
+}