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

package/assets/sass/elements/badge-tag.css

@@ -1,101 +1,101 @@
-@layer elements {
-  :is(.badge, .tag) {
-    font-size: 1rem;
-    line-height: 1.625rem; /* 26 */
-    border: none !important;
-    margin: 0;
-    display: inline-block;
-    text-align: center;
-    white-space: nowrap;
-    max-width: fit-content;
-    color: #262626;
-    position: relative;
-    background: var(--wider-colour, var(--wider-colour-1));
-    margin-bottom: 0.5rem;
-
-    &:has(+ :is(.badge, .tag)) {
-      margin-right: 0.375rem; /* 6 */
-    }
-
-    &:empty {
-      display: none;
-    }
-
-    &:is(.bg-primary, .bg-dark, .bg-danger) {
-      color: #fcfcfc !important;
-    }
-  }
-
-  .badge {
-    border-radius: 0.375rem; /* 6 */
-    padding: 0 0.5rem;
-  }
-
-  .badge--rounded {
-    border-radius: 1rem;
-    min-width: 1.625rem;
-    padding: 0;
-  }
-
-  .tag {
-    border-radius: 1rem;
-    padding: 0 1rem;
-
-    i {
-      margin-left: 0.5rem;
-    }
-
-    &:is(:hover, :focus, .hover, :focus-within, :focus-visible) {
-      background: color-mix(in oklab, var(--colour), #000000 5%);
-    }
-
-    &:is(:active, .active) {
-      background: color-mix(in oklab, var(--colour), #000000 10%);
-    }
-
-    &:has(input:disabled),
-    &:disabled {
-      background: var(--wider-colour-1) !important;
-      color: #99adb1 !important;
-    }
-
-    &:has([readonly]) {
-      pointer-events: none;
-    }
-    &:has([readonly]):after {
-      display: none!important;
-    }
-  }
-
-  iam-multiselect:not(:defined) .tag,
-  .tag.tag--toggle {
-    background: var(--colour-canvas);
-    outline: 1px solid var(--colour-border);
-  }
-
-  .tag.tag--toggle {
-    &:after {
-      display: none;
-    }
-
-    &:is(:hover, :focus) {
-      background: #eeeeee;
-    }
-
-    &:is(:active) {
-      background: #e0e0e0;
-    }
-
-    &:has(input:checked),
-    &.selected {
-      background: #e9f9fd;
-      outline: 1px solid #1ebee6;
-    }
-  }
-
-  /* Quick fix for badges in buttons */
-  .btn :is(.badge, .tag) {
-    position: relative;
-    top: -1px;
-  }
-}
+@layer elements {
+  :is(.badge, .tag) {
+    font-size: 1rem;
+    line-height: 1.625rem; /* 26 */
+    border: none !important;
+    margin: 0;
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    max-width: fit-content;
+    color: #262626;
+    position: relative;
+    background: var(--wider-colour, var(--wider-colour-1));
+    margin-bottom: 0.5rem;
+
+    &:has(+ :is(.badge, .tag)) {
+      margin-right: 0.375rem; /* 6 */
+    }
+
+    &:empty {
+      display: none;
+    }
+
+    &:is(.bg-primary, .bg-dark, .bg-danger) {
+      color: #fcfcfc !important;
+    }
+  }
+
+  .badge {
+    border-radius: 0.375rem; /* 6 */
+    padding: 0 0.5rem;
+  }
+
+  .badge--rounded {
+    border-radius: 1rem;
+    min-width: 1.625rem;
+    padding: 0;
+  }
+
+  .tag {
+    border-radius: 1rem;
+    padding: 0 1rem;
+
+    i {
+      margin-left: 0.5rem;
+    }
+
+    &:is(:hover, :focus, .hover, :focus-within, :focus-visible) {
+      background: color-mix(in oklab, var(--colour), #000000 5%);
+    }
+
+    &:is(:active, .active) {
+      background: color-mix(in oklab, var(--colour), #000000 10%);
+    }
+
+    &:has(input:disabled),
+    &:disabled {
+      background: var(--wider-colour-1) !important;
+      color: #99adb1 !important;
+    }
+
+    &:has([readonly]) {
+      pointer-events: none;
+    }
+    &:has([readonly]):after {
+      display: none!important;
+    }
+  }
+
+  iam-multiselect:not(:defined) .tag,
+  .tag.tag--toggle {
+    background: var(--colour-canvas);
+    outline: 1px solid var(--colour-border);
+  }
+
+  .tag.tag--toggle {
+    &:after {
+      display: none;
+    }
+
+    &:is(:hover, :focus) {
+      background: #eeeeee;
+    }
+
+    &:is(:active) {
+      background: #e0e0e0;
+    }
+
+    &:has(input:checked),
+    &.selected {
+      background: #e9f9fd;
+      outline: 1px solid #1ebee6;
+    }
+  }
+
+  /* Quick fix for badges in buttons */
+  .btn :is(.badge, .tag) {
+    position: relative;
+    top: -1px;
+  }
+}

package/assets/sass/elements/brand.css

@@ -1,80 +1,80 @@
-@layer elements {
-  :is(.brand, .logo) {
-    --svg-width: 2.923076923076923em; /* 380/130 */
-
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    padding-right: 1rem;
-    padding-bottom: 1rem;
-    min-width: 100%;
-    min-width: min(100%, var(--svg-width));
-    font-size: 4rem;
-    color: var(--colour-brand);
-
-    /* Restrict the logo colours so that only text-secondary can be defined */
-    &[class*='text-']:not(.text-secondary) {
-      color: inherit !important;
-    }
-
-    svg {
-      fill: currentColor;
-      height: 1em;
-      width: 100%;
-      max-width: var(--svg-width);
-    }
-
-    & span {
-      white-space: nowrap;
-      font-size: 1rem;
-      padding-left: 1rem;
-      line-height: 1;
-      font-weight: bold;
-      display: inline-block;
-      text-decoration: none;
-    }
-  }
-
-  .brand--sold {
-    --svg-width: 1.9em; /* 247/130 */
-  }
-
-  .brand--key {
-    --svg-width: 1.753846153846154em; /* 228/130 */
-  }
-
-  :is(.brand--compliance,.brand--movebutler) {
-    --svg-width: 5.692307692307692em; /* 740/130 */
-  }
-
-  .brand--medwaylaw {
-    --svg-width: 3.576923076923077em; /* 465/130*/
-  }
-
-  .brand--openview {
-    --svg-width: 5.337078651685393em; /* 475/89 */
-  }
-
-  .brand--crm {
-    --svg-width: 2.808988764044944em; /* 250/89 */
-  }
-
-  a.brand:not(:hover, :focus, :active) {
-    color: var(--colour-brand);
-  }
-
-  a:not(:hover, :focus, :active) .brand {
-    color: var(--colour-brand);
-  }
-
-  :is(a.brand:hover, a.brand:focus, a.brand:active) {
-    
-    color: currentColor !important;
-  }
-  
-  :is(a:hover, a:focus, a:active) .brand {
-    color: currentColor !important;
-  }
-}
-
+@layer elements {
+  :is(.brand, .logo) {
+    --svg-width: 2.923076923076923em; /* 380/130 */
+
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    min-width: 100%;
+    min-width: min(100%, var(--svg-width));
+    font-size: 4rem;
+    color: var(--colour-brand);
+
+    /* Restrict the logo colours so that only text-secondary can be defined */
+    &[class*='text-']:not(.text-secondary) {
+      color: inherit !important;
+    }
+
+    svg {
+      fill: currentColor;
+      height: 1em;
+      width: 100%;
+      max-width: var(--svg-width);
+    }
+
+    & span {
+      white-space: nowrap;
+      font-size: 1rem;
+      padding-left: 1rem;
+      line-height: 1;
+      font-weight: bold;
+      display: inline-block;
+      text-decoration: none;
+    }
+  }
+
+  .brand--sold {
+    --svg-width: 1.9em; /* 247/130 */
+  }
+
+  .brand--key {
+    --svg-width: 1.753846153846154em; /* 228/130 */
+  }
+
+  :is(.brand--compliance,.brand--movebutler) {
+    --svg-width: 5.692307692307692em; /* 740/130 */
+  }
+
+  .brand--medwaylaw {
+    --svg-width: 3.576923076923077em; /* 465/130*/
+  }
+
+  .brand--openview {
+    --svg-width: 5.337078651685393em; /* 475/89 */
+  }
+
+  .brand--crm {
+    --svg-width: 2.808988764044944em; /* 250/89 */
+  }
+
+  a.brand:not(:hover, :focus, :active) {
+    color: var(--colour-brand);
+  }
+
+  a:not(:hover, :focus, :active) .brand {
+    color: var(--colour-brand);
+  }
+
+  :is(a.brand:hover, a.brand:focus, a.brand:active) {
+    
+    color: currentColor !important;
+  }
+  
+  :is(a:hover, a:focus, a:active) .brand {
+    color: currentColor !important;
+  }
+}
+

package/assets/sass/elements/button__group.css

@@ -1,135 +1,135 @@
-@layer elements {
-
-  .btn__group {
-
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--gap);
-    reading-flow: source-order;
-    margin-bottom: 1.5rem;
-
-    .btn-compact {
-
-      max-width: fit-content;
-      margin-inline: auto;
-    }
-
-  }
-  :where(.btn__group, iam-modal) {
-    
-    reading-flow: source-order;
-    
-    .btn {
-      margin-inline-end: 0;
-      width: 100%;
-      max-width: 100%;
-      text-align: center;
-      white-space: normal;
-      margin: 0;
-
-      &:not(:last-child) {
-        margin-right: 0;
-      }
-    }
-
-    .btn-tertiary {
-      max-width: fit-content;
-      margin-block: 0!important;
-      margin-inline: auto!important;
-      order: 3;
-      reading-order: 3;
-    }
-    .btn-secondary {
-      order: 2;
-      reading-order: 2;
-    }
-    .btn-primary {
-      order: 1;
-      reading-order: 1;
-      margin: 0;
-
-      &:not(:last-child) {
-        
-        margin: 0;
-      }
-    }
-  }
-
-  :is(iam-form,form) .btn__group{
-    padding-top: 1rem;
-  }
-  @container (min-width: 36em) {
-    .btn__group {
-      flex-direction: row;
-      row-gap: 0;
-      gap: var(--gap);
-      flex-wrap: wrap;
-
-      .btn-tertiary {
-        max-width: fit-content;
-        margin-inline: 0!important;
-        margin-block: auto;
-        order: 1;
-      }
-      .btn-secondary {
-        order: 2;
-      }
-      .btn-primary {
-        order: 3;
-      }
-
-      .btn-compact {
-        
-        margin-inline: 0;
-        margin-block: auto;
-      }
-    }
-    :where(iam-modal, .btn__group) {
-
-      .btn {
-        max-width: fit-content;
-        white-space: nowrap;
-        margin-block: auto;
-      }
-    }
-    .btn__group {
-      
-      .btn-tertiary {
-        reading-order: 1;
-      }
-      .btn-secondary {
-        reading-order: 2;
-      }
-      .btn-primary {
-        reading-order: 3;
-      }
-    }
-    iam-modal {
-      
-      .btn-tertiary {
-        reading-order: 3;
-        order: 1;
-      }
-      .btn-secondary {
-        order: 2;
-        reading-order: 2;
-      }
-      .btn-primary {
-        order: 3;
-        reading-order: 1;
-      }
-    }
-    .btn__group.text-end {
-      justify-content: flex-end;
-    }
-    :is(iam-form,form) .btn__group{
-      justify-content: flex-end;
-      padding-top: 3rem;
-    }
-    iam-modal .btn__group:last-child .btn,
-    dialog .btn__group:last-child .btn {
-      margin-bottom: 0;
-    }
-  }
-}
-
+@layer elements {
+
+  .btn__group {
+
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--gap);
+    reading-flow: source-order;
+    margin-bottom: 1.5rem;
+
+    .btn-compact {
+
+      max-width: fit-content;
+      margin-inline: auto;
+    }
+
+  }
+  :where(.btn__group, iam-modal) {
+    
+    reading-flow: source-order;
+    
+    .btn {
+      margin-inline-end: 0;
+      width: 100%;
+      max-width: 100%;
+      text-align: center;
+      white-space: normal;
+      margin: 0;
+
+      &:not(:last-child) {
+        margin-right: 0;
+      }
+    }
+
+    .btn-tertiary {
+      max-width: fit-content;
+      margin-block: 0!important;
+      margin-inline: auto!important;
+      order: 3;
+      reading-order: 3;
+    }
+    .btn-secondary {
+      order: 2;
+      reading-order: 2;
+    }
+    .btn-primary {
+      order: 1;
+      reading-order: 1;
+      margin: 0;
+
+      &:not(:last-child) {
+        
+        margin: 0;
+      }
+    }
+  }
+
+  :is(iam-form,form) .btn__group{
+    padding-top: 1rem;
+  }
+  @container (min-width: 36em) {
+    .btn__group {
+      flex-direction: row;
+      row-gap: 0;
+      gap: var(--gap);
+      flex-wrap: wrap;
+
+      .btn-tertiary {
+        max-width: fit-content;
+        margin-inline: 0!important;
+        margin-block: auto;
+        order: 1;
+      }
+      .btn-secondary {
+        order: 2;
+      }
+      .btn-primary {
+        order: 3;
+      }
+
+      .btn-compact {
+        
+        margin-inline: 0;
+        margin-block: auto;
+      }
+    }
+    :where(iam-modal, .btn__group) {
+
+      .btn {
+        max-width: fit-content;
+        white-space: nowrap;
+        margin-block: auto;
+      }
+    }
+    .btn__group {
+      
+      .btn-tertiary {
+        reading-order: 1;
+      }
+      .btn-secondary {
+        reading-order: 2;
+      }
+      .btn-primary {
+        reading-order: 3;
+      }
+    }
+    iam-modal {
+      
+      .btn-tertiary {
+        reading-order: 3;
+        order: 1;
+      }
+      .btn-secondary {
+        order: 2;
+        reading-order: 2;
+      }
+      .btn-primary {
+        order: 3;
+        reading-order: 1;
+      }
+    }
+    .btn__group.text-end {
+      justify-content: flex-end;
+    }
+    :is(iam-form,form) .btn__group{
+      justify-content: flex-end;
+      padding-top: 3rem;
+    }
+    iam-modal .btn__group:last-child .btn,
+    dialog .btn__group:last-child .btn {
+      margin-bottom: 0;
+    }
+  }
+}
+