@iamproperty/components 3.1.0 → 3.2.0

package/assets/sass/components/stepper.scss

@@ -1,165 +1,165 @@
-@use "../_func" as *;
-
-.stepper {
-  background: #f0f0f0;
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 2rem;
-  border: 1px solid var(--body-bg);
-  overflow: hidden;
-
-  @include media-breakpoint-up(md) {
-      
-    flex-wrap: nowrap;
-    overflow-x: auto;
-  }
-
-  ol {
-    margin: 0;
-    z-index: 1;
-    background: var(--body-bg);
-    counter-reset: section;
-    width: 100%;
-    overflow: auto;
-
-    @include media-breakpoint-up(sm) {
-
-      display: flex;
-      flex-grow: 1;
-      padding-right: calc(2rem + 1px);
-      margin-top: -1px;
-      margin-bottom: -1px;
-      margin-right: calc(-2rem + -2px);
-      clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
-    }
-
-    @include media-breakpoint-up(md) {
-      overflow: initial;
-    }
-
-    li {
-      width: 100%;
-      max-width: 100%;
-      background: var(--body-bg);
-      padding: 1px;
-
-      @include media-breakpoint-up(sm) {
-        &:first-child a{
-          padding-left: 1rem;
-          clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
-        }
-      }
-
-      @include media-breakpoint-up(md) {
-        &:first-child a{
-          padding-left: 2rem;
-        }
-      }
-      
-      a {
-        display: block;
-        padding: 1rem;
-        text-decoration: none;
-        position: relative;
-        background: var(--colour-muted);
-        line-height: 1;
-        position: relative;
-        color: var(--colour-primary);
-
-        @include media-breakpoint-up(sm) {
-
-          margin-right: -2rem;
-          padding: 2rem 3rem 2rem 3rem;
-          clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%, 2rem 50%);
-          display: flex;
-          height: 100%;
-          vertical-align: baseline;
-          justify-content: center;
-          align-items: center;
-        }
-        
-        span {
-          position: relative;
-          display: inline;
-          padding-left: 2.25rem;
-
-          &:before {
-            counter-increment: section; 
-            content: counter(section);
-            display: block;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            transform: translate(0,-50%);
-            margin-right: 0.5rem;
-            font-size: 0.75em;
-            border-radius: 50%;
-            border: 2px solid currentColor;
-            height: 1.5rem;
-            line-height: 1.3rem;
-            width: 1.5rem;
-            font-family: var(--font-heading);
-            text-align: center;
-          }
-        }
-
-        &.bg-warning span:before,
-        &.bg-danger span:before {
-          content: "!";
-        }
-
-        &.bg-success span:before {
-          content: "\2713";
-          text-indent: -0.1em;
-        }
-
-        &.current {
-          background: var(--colour-primary);
-          color: white;
-          pointer-events: none;
-        }
-
-        &:not([href]){
-          pointer-events: none;
-        }
-
-        &[href]:hover {
-          opacity: 0.6;
-        }
-        &[href]:active {
-
-          opacity: 0.8;
-        }
-
-      }
-    }
-  }
-
-
-  > span {
-
-    width: 100%;
-    display: flex;
-    padding: 1rem;
-    flex-shrink: 0;
-    margin: 0;
-    position: relative;
-    z-index: 0;
-    align-items: center;
-
-    &.stepper__end {
-      display: none;
-    }
-      
-    @include media-breakpoint-up(md) {
-        
-      width: max-content;
-      padding: 2rem 2rem;
-      
-      &.stepper__end {
-        padding-left: 3.5rem;
-        display: flex;
-      }
-    }
-  }
+@use "../_func" as *;
+
+.stepper {
+  background: #f0f0f0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+  border: 1px solid var(--body-bg);
+  overflow: hidden;
+
+  @include media-breakpoint-up(md) {
+      
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+
+  ol {
+    margin: 0;
+    z-index: 1;
+    background: var(--body-bg);
+    counter-reset: section;
+    width: 100%;
+    overflow: auto;
+
+    @include media-breakpoint-up(sm) {
+
+      display: flex;
+      flex-grow: 1;
+      padding-right: calc(2rem + 1px);
+      margin-top: -1px;
+      margin-bottom: -1px;
+      margin-right: calc(-2rem + -2px);
+      clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
+    }
+
+    @include media-breakpoint-up(md) {
+      overflow: initial;
+    }
+
+    li {
+      width: 100%;
+      max-width: 100%;
+      background: var(--body-bg);
+      padding: 1px;
+
+      @include media-breakpoint-up(sm) {
+        &:first-child a{
+          padding-left: 1rem;
+          clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
+        }
+      }
+
+      @include media-breakpoint-up(md) {
+        &:first-child a{
+          padding-left: 2rem;
+        }
+      }
+      
+      a {
+        display: block;
+        padding: 1rem;
+        text-decoration: none;
+        position: relative;
+        background: var(--colour-muted);
+        line-height: 1;
+        position: relative;
+        color: var(--colour-primary);
+
+        @include media-breakpoint-up(sm) {
+
+          margin-right: -2rem;
+          padding: 2rem 3rem 2rem 3rem;
+          clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%, 2rem 50%);
+          display: flex;
+          height: 100%;
+          vertical-align: baseline;
+          justify-content: center;
+          align-items: center;
+        }
+        
+        span {
+          position: relative;
+          display: inline;
+          padding-left: 2.25rem;
+
+          &:before {
+            counter-increment: section; 
+            content: counter(section);
+            display: block;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translate(0,-50%);
+            margin-right: 0.5rem;
+            font-size: 0.75em;
+            border-radius: 50%;
+            border: 2px solid currentColor;
+            height: 1.5rem;
+            line-height: 1.3rem;
+            width: 1.5rem;
+            font-family: var(--font-heading);
+            text-align: center;
+          }
+        }
+
+        &.bg-warning span:before,
+        &.bg-danger span:before {
+          content: "!";
+        }
+
+        &.bg-success span:before {
+          content: "\2713";
+          text-indent: -0.1em;
+        }
+
+        &.current {
+          background: var(--colour-primary);
+          color: white;
+          pointer-events: none;
+        }
+
+        &:not([href]){
+          pointer-events: none;
+        }
+
+        &[href]:hover {
+          opacity: 0.6;
+        }
+        &[href]:active {
+
+          opacity: 0.8;
+        }
+
+      }
+    }
+  }
+
+
+  > span {
+
+    width: 100%;
+    display: flex;
+    padding: 1rem;
+    flex-shrink: 0;
+    margin: 0;
+    position: relative;
+    z-index: 0;
+    align-items: center;
+
+    &.stepper__end {
+      display: none;
+    }
+      
+    @include media-breakpoint-up(md) {
+        
+      width: max-content;
+      padding: 2rem 2rem;
+      
+      &.stepper__end {
+        padding-left: 3.5rem;
+        display: flex;
+      }
+    }
+  }
 }

package/assets/sass/components/tabs.scss

@@ -1,87 +1,87 @@
-@use "../_func" as *;
-
-.tabs__container {
-
-  position: relative;
-
-  .tab__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-  }
-
-  > .tabs__links {
-    margin-bottom: 1.5rem;
-    overflow: hidden;
-
-    .link:not(.text-decoration-none):not(.btn) {
-      --is-current: 0;
-      font-weight: bold;
-      font-family: var(--font-heading);
-      font-size: rem(18);
-      cursor: pointer;
-      margin: 0 0 0.5rem 0;
-      float: left;
-      clear: both;
-
-      @include media-breakpoint-up(sm) {
-        clear: none;
-        margin-bottom: 0;
-        margin-right: 2rem;
-      }
-
-      &:before {
-        width: 0;
-        width: calc(var(--is-current) * 100%);
-      }
-
-      &:hover:before,
-      &:focus:before {
-        width: 100%;
-      }
-    }
-  }
-
-  .tab {
-    display: none;
-  }
-
-  input:focus-visible ~ .tabs__links {
-    outline: blue outset 1px;
-  }
-
-  @for $i from 1 through 10 {
-    input:checked:nth-child(#{$i}) ~ .tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(#{$i}) {
-      
-      --is-current: 1;
-      --panel-tab-colour: white;
-      --panel-tab-border: var(--colour-secondary)
-    }
-    input:checked:nth-child(#{$i}) ~ .tabs > .tab:nth-child(#{$i}){
-      display: block;
-      display: contents;
-    }
-  }
-}
-
-// #region admin panel
-.admin-panel > .tabs__container:first-child {
-
-  display: contents;
-
-  > .tabs {
-    display: contents;
-  }
-
-  > .tabs__links {
-
-    padding-bottom: 0;
-
-    .link:not(.text-decoration-none):not(.btn) {
-
-      margin-bottom: 0;
-    }
-  }
-}
-// #endregion
+@use "../_func" as *;
+
+.tabs__container {
+
+  position: relative;
+
+  .tab__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  > .tabs__links {
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+
+    .link:not(.text-decoration-none):not(.btn) {
+      --is-current: 0;
+      font-weight: bold;
+      font-family: var(--font-heading);
+      font-size: rem(18);
+      cursor: pointer;
+      margin: 0 0 0.5rem 0;
+      float: left;
+      clear: both;
+
+      @include media-breakpoint-up(sm) {
+        clear: none;
+        margin-bottom: 0;
+        margin-right: 2rem;
+      }
+
+      &:before {
+        width: 0;
+        width: calc(var(--is-current) * 100%);
+      }
+
+      &:hover:before,
+      &:focus:before {
+        width: 100%;
+      }
+    }
+  }
+
+  .tab {
+    display: none;
+  }
+
+  input:focus-visible ~ .tabs__links {
+    outline: blue outset 1px;
+  }
+
+  @for $i from 1 through 10 {
+    input:checked:nth-child(#{$i}) ~ .tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(#{$i}) {
+      
+      --is-current: 1;
+      --panel-tab-colour: white;
+      --panel-tab-border: var(--colour-secondary)
+    }
+    input:checked:nth-child(#{$i}) ~ .tabs > .tab:nth-child(#{$i}){
+      display: block;
+      display: contents;
+    }
+  }
+}
+
+// #region admin panel
+.admin-panel > .tabs__container:first-child {
+
+  display: contents;
+
+  > .tabs {
+    display: contents;
+  }
+
+  > .tabs__links {
+
+    padding-bottom: 0;
+
+    .link:not(.text-decoration-none):not(.btn) {
+
+      margin-bottom: 0;
+    }
+  }
+}
+// #endregion