@iamproperty/components 3.0.0 → 3.2.0

package/assets/sass/elements/lists.scss

@@ -1,113 +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: currentColor;
-      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;
-    }
-  }
+@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;
+  }
 }

package/assets/sass/elements/panel.scss

@@ -1,162 +1,162 @@
-@use "../_func" as *;
-
-.admin-panel {
-  --panel-gutter: 1rem;
-  --panel-tab-colour: #fafafa;
-  background: var(--body-bg);
-
-  &.bg-secondary{
-
-    background-color: rgba(#b4e6a5,0.3) !important;
-  }
-
-  @media screen and (prefers-color-scheme: dark) {
-
-    --panel-tab-colour: transparent;
-  }
-
-  @include media-breakpoint-up(md) {
-
-    --panel-gutter: 1.5rem;
-  }
-
-  padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
-  border: 1px solid var(--colour-border-light);
-  border-top: 3px solid var(--colour-secondary);
-  margin-bottom: 2rem;
-
-  &:empty {
-    display: none;
-  }
-
-  > *:not(.note-feed):first-child {
-    margin-top: var(--panel-gutter);
-  }
-
-  > *:last-child {
-    margin-bottom: var(--panel-gutter);
-  }
-
-  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
-    border-bottom: 2px solid var(--colour-border-light);
-    font-size: var(--fs-4);
-    line-height: 1;
-    letter-spacing: 1;
-    padding: var(--panel-gutter) var(--panel-gutter) var(--panel-gutter) var(--panel-gutter);
-    margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
-    display: block;
-  }
-
-  > .table__wrapper,
-  > .note-feed > .table__wrapper,
-  > .tabs__container:first-child > .tabs > .tab > .table__wrapper {
-
-    margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
-    padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
-    min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
-    
-    table {
-
-      margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
-      min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
-      padding-right: 0;
-
-    }
-
-    tr {
-      :is(th, td) {
-        padding-left: var(--panel-gutter);
-        padding-right: var(--panel-gutter);
-      }
-    }
-
-    &:first-child {
-      margin-top: 0;
-
-      thead tr:first-child {
-
-        border-top: none;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-
-      tbody tr:last-child {
-
-        border-bottom: none;
-      }
-    }
-  }
-
-  // Table margin top override
-  :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .admin-panel__links, .tabs__links) + :is(.table__wrapper, table, .note-feed) {
-    margin-top: calc(var(--panel-gutter) * -1);
-
-    tr:first-child {
-
-      border-top: none;
-    }
-  }
-}
-
-[class*="col"] .admin-panel:first-child:last-child {
-
-  min-height: calc(100% - 2rem);
-}
-
-.admin-panel .admin-panel__links, 
-.admin-panel > .tabs__container:first-child > .tabs__links {
-
-  margin-top: -3px!important;
-  margin-left: calc(var(--panel-gutter) * -1);
-  margin-right: calc(var(--panel-gutter) * -1);
-  display: flex;
-  flex-direction: column;
-  background-color: var(--body-bg);
-  border-bottom: 2px solid var(--colour-border-light);
-  margin-bottom: var(--panel-gutter);
-
-  @include media-breakpoint-up(sm) {
-
-    flex-direction: row;
-    border-top: 1px solid var(--colour-border-light);
-  }
-
-  :is(a, label) {
-    padding: var(--panel-gutter);
-    margin: 0;
-    width: 100%;
-    background: var(--panel-tab-colour);
-    border-top: 1px solid var(--colour-border-light);
-    border-left: 3px solid var(--panel-tab-border, #fafafa);
-
-    &:before {
-      display: none;
-    }
-
-    @include media-breakpoint-up(sm) {
-
-      margin-right: 0!important;
-
-      &:first-child{
-        border-left: none!important;
-      }
-
-      &:not(:first-child){
-
-        border-left: 1px solid var(--colour-border-light)!important;
-      }
-
-      border-top: 3px solid var(--panel-tab-border, #fafafa);
-    }
-  }
-
-  .current {
-    
-    --is-current: 1;
-    --panel-tab-colour: var(--body-bg);;
-    --panel-tab-border: var(--colour-secondary);
-    pointer-events: none;
-  }
+@use "../_func" as *;
+
+.admin-panel {
+  --panel-gutter: 1rem;
+  --panel-tab-colour: #fafafa;
+  background: var(--body-bg);
+
+  &.bg-secondary{
+
+    background-color: rgba(#b4e6a5,0.3) !important;
+  }
+
+  @media screen and (prefers-color-scheme: dark) {
+
+    --panel-tab-colour: transparent;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    --panel-gutter: 1.5rem;
+  }
+
+  padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
+  border: 1px solid var(--colour-border-light);
+  border-top: 3px solid var(--colour-secondary);
+  margin-bottom: 2rem;
+
+  &:empty {
+    display: none;
+  }
+
+  > *:not(.note-feed):first-child {
+    margin-top: var(--panel-gutter);
+  }
+
+  > *:last-child {
+    margin-bottom: var(--panel-gutter);
+  }
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
+    border-bottom: 2px solid var(--colour-border-light);
+    font-size: var(--fs-4);
+    line-height: 1;
+    letter-spacing: 1;
+    padding: var(--panel-gutter) var(--panel-gutter) var(--panel-gutter) var(--panel-gutter);
+    margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
+    display: block;
+  }
+
+  > .table__wrapper,
+  > .note-feed > .table__wrapper,
+  > .tabs__container:first-child > .tabs > .tab > .table__wrapper {
+
+    margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
+    padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
+    min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
+    
+    table {
+
+      margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
+      min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
+      padding-right: 0;
+
+    }
+
+    tr {
+      :is(th, td) {
+        padding-left: var(--panel-gutter);
+        padding-right: var(--panel-gutter);
+      }
+    }
+
+    &:first-child {
+      margin-top: 0;
+
+      thead tr:first-child {
+
+        border-top: none;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+
+      tbody tr:last-child {
+
+        border-bottom: none;
+      }
+    }
+  }
+
+  // Table margin top override
+  :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .admin-panel__links, .tabs__links) + :is(.table__wrapper, table, .note-feed) {
+    margin-top: calc(var(--panel-gutter) * -1);
+
+    tr:first-child {
+
+      border-top: none;
+    }
+  }
+}
+
+[class*="col"] .admin-panel:first-child:last-child {
+
+  min-height: calc(100% - 2rem);
+}
+
+.admin-panel .admin-panel__links, 
+.admin-panel > .tabs__container:first-child > .tabs__links {
+
+  margin-top: -3px!important;
+  margin-left: calc(var(--panel-gutter) * -1);
+  margin-right: calc(var(--panel-gutter) * -1);
+  display: flex;
+  flex-direction: column;
+  background-color: var(--body-bg);
+  border-bottom: 2px solid var(--colour-border-light);
+  margin-bottom: var(--panel-gutter);
+
+  @include media-breakpoint-up(sm) {
+
+    flex-direction: row;
+    border-top: 1px solid var(--colour-border-light);
+  }
+
+  :is(a, label) {
+    padding: var(--panel-gutter);
+    margin: 0;
+    width: 100%;
+    background: var(--panel-tab-colour);
+    border-top: 1px solid var(--colour-border-light);
+    border-left: 3px solid var(--panel-tab-border, #fafafa);
+
+    &:before {
+      display: none;
+    }
+
+    @include media-breakpoint-up(sm) {
+
+      margin-right: 0!important;
+
+      &:first-child{
+        border-left: none!important;
+      }
+
+      &:not(:first-child){
+
+        border-left: 1px solid var(--colour-border-light)!important;
+      }
+
+      border-top: 3px solid var(--panel-tab-border, #fafafa);
+    }
+  }
+
+  .current {
+    
+    --is-current: 1;
+    --panel-tab-colour: var(--body-bg);;
+    --panel-tab-border: var(--colour-secondary);
+    pointer-events: none;
+  }
 }