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

package/assets/sass/components/rating.component.css

@@ -1,212 +1,212 @@
-@layer components {
-
-  :host {
-    padding-bottom: 0!important;
-    display: block!important;
-
-    --fill-colour: var(--colour, var(--colour-success));
-    --star-size: 2.5rem; /* control the size*/
-    --outline-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M320.1 32C329.1 32 337.4 37.1 341.5 45.1L415 189.3L574.9 214.7C583.8 216.1 591.2 222.4 594 231C596.8 239.6 594.5 249 588.2 255.4L473.7 369.9L499 529.8C500.4 538.7 496.7 547.7 489.4 553C482.1 558.3 472.4 559.1 464.4 555L320.1 481.6L175.8 555C167.8 559.1 158.1 558.3 150.8 553C143.5 547.7 139.8 538.8 141.2 529.8L166.4 369.9L52 255.4C45.6 249 43.4 239.6 46.2 231C49 222.4 56.3 216.1 65.3 214.7L225.2 189.3L298.8 45.1C302.9 37.1 311.2 32 320.2 32zM320.1 108.8L262.3 222C258.8 228.8 252.3 233.6 244.7 234.8L119.2 254.8L209 344.7C214.4 350.1 216.9 357.8 215.7 365.4L195.9 490.9L309.2 433.3C316 429.8 324.1 429.8 331 433.3L444.3 490.9L424.5 365.4C423.3 357.8 425.8 350.1 431.2 344.7L521 254.8L395.5 234.8C387.9 233.6 381.4 228.8 377.9 222L320.1 108.8z'/></svg>");
-    
-    --mask-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z'/></svg>");
-
-  }
-
-  :host(.rating--sm){
-    --star-size: 1.5rem; /* control the size*/
-  }
-  :host(.rating--lg){
-    --star-size: 4rem; /* control the size*/
-  }
-
-  .wrapper:not(.show) {
-    display: none!important;
-  }
-  .wrapper:has(input[type="range"][max="2"]) {
-    --steps: 2;
-  }
-  .wrapper:has(input[type="range"][max="3"]) {
-    --steps: 3;
-  }
-  .wrapper:has(input[type="range"][max="4"]) {
-    --steps: 4;
-  }
-  .wrapper:has(input[type="range"][max="5"]) {
-    --steps: 5;
-  }
-  .wrapper:has(input[type="range"][max="6"]) {
-    --steps: 6;
-  }
-  .wrapper:has(input[type="range"][max="7"]) {
-    --steps: 7;
-  }
-  .wrapper:has(input[type="range"][max="8"]) {
-    --steps: 8;
-  }
-  .wrapper:has(input[type="range"][max="9"]) {
-    --steps: 9;
-  }
-  .wrapper:has(input[type="range"][max="10"]) {
-    --steps: 10;
-  }
-  
-  .wrapper:has(input[type="range"]) {
-
-    padding: 0!important;
-    margin: 0!important;
-    height: var(--star-size);
-    width: calc(var(--star-size)*var(--steps));
-    position: relative;
-    display: inline-flex;
-
-    &:after {
-      content: "";
-      position: absolute;
-      inset: 0;
-
-      background-color: var(--fill-colour);
-      mask-image:var(--outline, var(--outline-default));
-    
-      mask-size: var(--star-size);
-      pointer-events: none;
-    }
-
-    &:before {
-      content: "";
-      
-      width: 100%;
-      height: calc(var(--star-size));
-      background-color: var(--fill-colour);
-      mask-image: var(--mask,var(--mask-default));
-      mask-size: var(--star-size);
-
-      flex-grow: 1;
-      flex-shrink: 1;
-    }
-  }
-
-  @supports not (d:attr(d type(*))) {
-    .wrapper input[type="range"] {
-
-      &[min="1"]{
-        --offset: 1;
-      }
-      &[min="2"]{
-        --offset: 2;
-      }
-      &[min="3"]{
-        --offset: 3;
-      }
-      &[min="4"]{
-        --offset: 4;
-      }
-      &[min="5"]{
-        --offset: 5;
-      }
-      &[min="6"]{
-        --offset: 6;
-      }
-      &[min="7"]{
-        --offset: 7;
-      }
-      &[min="8"]{
-        --offset: 8;
-      }
-      &[min="9"]{
-        --offset: 9;
-      }
-    }
-  }
-  @supports (d:attr(d type(*))) {
-    .wrapper input[type="range"] {
-      --offset: attr(min type(<number>),0);
-    }
-  }
-
-  .wrapper input[type="range"] {
-
-    position: static;
-    flex-grow: 0;
-    flex-shrink: 0;
-    height: var(--star-size);
-    box-sizing: border-box;
-    appearance: none;
-    mask-image: var(--mask,var(--mask-default));
-    mask-size: var(--star-size);
-    mask-position: calc(var(--star-size)*var(--offset,0)) 0;
-    border-radius: 0;
-    background-color: transparent;
-    padding: 0;
-    margin: 0;
-    width: calc(var(--star-size)*calc(var(--steps) - var(--offset,0)));
-
-    &:not([disabled]){
-      cursor: pointer;
-    }
-  }
-
-
-  .wrapper input[type=range]::-webkit-slider-runnable-track {
-    background: transparent;
-    height: initial;
-    border-radius: 0;
-  }
-
-  .wrapper input[type='range']::-moz-range-track {
-
-    background: transparent;
-    height: initial;
-    border-radius: 0;
-  }
-
-  .wrapper input[type="range"]::-webkit-slider-thumb{
-    
-    outline: none!important;
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-    background-color: var(--colour, var(--colour-success));
-    border-radius: 0%;
-    position: relative;
-    z-index: 99;
-    pointer-events: all;
-    overflow: visible;
-    width: 1px;
-    height: var(--star-size);
-    border-image-source: linear-gradient(90deg, var(--fill-colour) 50%, var(--colour-canvas) 0px);
-    border-image-slice: 0 fill;
-    border-image-width: 1px;
-    border-image-outset: 0 50rem;
-    border-image-repeat: stretch;
-  }
-
-  .wrapper input[type="range"]::-moz-range-thumb {
-    outline: none!important;
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-    background-color: var(--colour, var(--colour-success));
-    border-radius: 0%;
-    position: relative;
-    z-index: 99;
-    pointer-events: all;
-    overflow: visible;
-    width: 1px;
-    height: var(--star-size);
-    border-image-source: linear-gradient(90deg, var(--colour, var(--colour-success)) 50%, var(--colour-canvas) 0px);
-    border-image-slice: 0 fill;
-    border-image-width: 1px;
-    border-image-outset: 0 50rem;
-    border-image-repeat: stretch;
-  }
-
-  .wrapper:has(input[type="range"]:not([disabled])):is(:hover,:active,:focus,:focus-within) {
-    --fill-colour:  oklch(from var(--colour, var(--colour-success)) calc(l - 0.05) c h);
-  }
-
-  .wrapper:has(input[type="range"]:focus-visible) {
-    outline: 1px solid var(--colour-info);
-    border-radius: 0.25rem;
-  }
-
+@layer components {
+
+  :host {
+    padding-bottom: 0!important;
+    display: block!important;
+
+    --fill-colour: var(--colour, var(--colour-success));
+    --star-size: 2.5rem; /* control the size*/
+    --outline-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M320.1 32C329.1 32 337.4 37.1 341.5 45.1L415 189.3L574.9 214.7C583.8 216.1 591.2 222.4 594 231C596.8 239.6 594.5 249 588.2 255.4L473.7 369.9L499 529.8C500.4 538.7 496.7 547.7 489.4 553C482.1 558.3 472.4 559.1 464.4 555L320.1 481.6L175.8 555C167.8 559.1 158.1 558.3 150.8 553C143.5 547.7 139.8 538.8 141.2 529.8L166.4 369.9L52 255.4C45.6 249 43.4 239.6 46.2 231C49 222.4 56.3 216.1 65.3 214.7L225.2 189.3L298.8 45.1C302.9 37.1 311.2 32 320.2 32zM320.1 108.8L262.3 222C258.8 228.8 252.3 233.6 244.7 234.8L119.2 254.8L209 344.7C214.4 350.1 216.9 357.8 215.7 365.4L195.9 490.9L309.2 433.3C316 429.8 324.1 429.8 331 433.3L444.3 490.9L424.5 365.4C423.3 357.8 425.8 350.1 431.2 344.7L521 254.8L395.5 234.8C387.9 233.6 381.4 228.8 377.9 222L320.1 108.8z'/></svg>");
+    
+    --mask-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z'/></svg>");
+
+  }
+
+  :host(.rating--sm){
+    --star-size: 1.5rem; /* control the size*/
+  }
+  :host(.rating--lg){
+    --star-size: 4rem; /* control the size*/
+  }
+
+  .wrapper:not(.show) {
+    display: none!important;
+  }
+  .wrapper:has(input[type="range"][max="2"]) {
+    --steps: 2;
+  }
+  .wrapper:has(input[type="range"][max="3"]) {
+    --steps: 3;
+  }
+  .wrapper:has(input[type="range"][max="4"]) {
+    --steps: 4;
+  }
+  .wrapper:has(input[type="range"][max="5"]) {
+    --steps: 5;
+  }
+  .wrapper:has(input[type="range"][max="6"]) {
+    --steps: 6;
+  }
+  .wrapper:has(input[type="range"][max="7"]) {
+    --steps: 7;
+  }
+  .wrapper:has(input[type="range"][max="8"]) {
+    --steps: 8;
+  }
+  .wrapper:has(input[type="range"][max="9"]) {
+    --steps: 9;
+  }
+  .wrapper:has(input[type="range"][max="10"]) {
+    --steps: 10;
+  }
+  
+  .wrapper:has(input[type="range"]) {
+
+    padding: 0!important;
+    margin: 0!important;
+    height: var(--star-size);
+    width: calc(var(--star-size)*var(--steps));
+    position: relative;
+    display: inline-flex;
+
+    &:after {
+      content: "";
+      position: absolute;
+      inset: 0;
+
+      background-color: var(--fill-colour);
+      mask-image:var(--outline, var(--outline-default));
+    
+      mask-size: var(--star-size);
+      pointer-events: none;
+    }
+
+    &:before {
+      content: "";
+      
+      width: 100%;
+      height: calc(var(--star-size));
+      background-color: var(--fill-colour);
+      mask-image: var(--mask,var(--mask-default));
+      mask-size: var(--star-size);
+
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+
+  @supports not (d:attr(d type(*))) {
+    .wrapper input[type="range"] {
+
+      &[min="1"]{
+        --offset: 1;
+      }
+      &[min="2"]{
+        --offset: 2;
+      }
+      &[min="3"]{
+        --offset: 3;
+      }
+      &[min="4"]{
+        --offset: 4;
+      }
+      &[min="5"]{
+        --offset: 5;
+      }
+      &[min="6"]{
+        --offset: 6;
+      }
+      &[min="7"]{
+        --offset: 7;
+      }
+      &[min="8"]{
+        --offset: 8;
+      }
+      &[min="9"]{
+        --offset: 9;
+      }
+    }
+  }
+  @supports (d:attr(d type(*))) {
+    .wrapper input[type="range"] {
+      --offset: attr(min type(<number>),0);
+    }
+  }
+
+  .wrapper input[type="range"] {
+
+    position: static;
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: var(--star-size);
+    box-sizing: border-box;
+    appearance: none;
+    mask-image: var(--mask,var(--mask-default));
+    mask-size: var(--star-size);
+    mask-position: calc(var(--star-size)*var(--offset,0)) 0;
+    border-radius: 0;
+    background-color: transparent;
+    padding: 0;
+    margin: 0;
+    width: calc(var(--star-size)*calc(var(--steps) - var(--offset,0)));
+
+    &:not([disabled]){
+      cursor: pointer;
+    }
+  }
+
+
+  .wrapper input[type=range]::-webkit-slider-runnable-track {
+    background: transparent;
+    height: initial;
+    border-radius: 0;
+  }
+
+  .wrapper input[type='range']::-moz-range-track {
+
+    background: transparent;
+    height: initial;
+    border-radius: 0;
+  }
+
+  .wrapper input[type="range"]::-webkit-slider-thumb{
+    
+    outline: none!important;
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    background-color: var(--colour, var(--colour-success));
+    border-radius: 0%;
+    position: relative;
+    z-index: 99;
+    pointer-events: all;
+    overflow: visible;
+    width: 1px;
+    height: var(--star-size);
+    border-image-source: linear-gradient(90deg, var(--fill-colour) 50%, var(--colour-canvas) 0px);
+    border-image-slice: 0 fill;
+    border-image-width: 1px;
+    border-image-outset: 0 50rem;
+    border-image-repeat: stretch;
+  }
+
+  .wrapper input[type="range"]::-moz-range-thumb {
+    outline: none!important;
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    background-color: var(--colour, var(--colour-success));
+    border-radius: 0%;
+    position: relative;
+    z-index: 99;
+    pointer-events: all;
+    overflow: visible;
+    width: 1px;
+    height: var(--star-size);
+    border-image-source: linear-gradient(90deg, var(--colour, var(--colour-success)) 50%, var(--colour-canvas) 0px);
+    border-image-slice: 0 fill;
+    border-image-width: 1px;
+    border-image-outset: 0 50rem;
+    border-image-repeat: stretch;
+  }
+
+  .wrapper:has(input[type="range"]:not([disabled])):is(:hover,:active,:focus,:focus-within) {
+    --fill-colour:  oklch(from var(--colour, var(--colour-success)) calc(l - 0.05) c h);
+  }
+
+  .wrapper:has(input[type="range"]:focus-visible) {
+    outline: 1px solid var(--colour-info);
+    border-radius: 0.25rem;
+  }
+
 }