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

package/assets/sass/components/multiselect.scss

@@ -1,239 +1,239 @@
-@use '../_func' as *;
-
-
-@use '../elements/forms' as *;
-@use '../elements/admin-panel' as *;
-@use '../elements/buttons' as *;
-@use '../elements/buttons--action' as *;
-@use '../elements/dropdown' as *;
-
-@use '../utilities/visually-hidden' as *;
-@use '../utilities/display' as *;
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-@layer components {
-  :host {
-
-    margin-bottom: 1.5rem;
-  }
-
-  .outer {
-    position: relative;
-    max-width: var(--input-max-width, 50rem);
-    display: block;
-  }
-
-  label {
-    margin-bottom: 0;
-    padding-bottom: 0.5rem;
-  }
-
-  .inner-label:empty {
-    display: none;
-  }
-
-  .wrapper {
-    max-width: var(--input-max-width, 50rem);
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-      height: 1rem;
-    }
-
-    input {
-      margin-bottom: 0.5rem;
-    }
-
-    .feedback {
-      position: absolute;
-      right: 0;
-      bottom: 100%;
-      padding: 0.85rem;
-      width: min-content;
-      white-space: nowrap;
-      margin-bottom: 0.5rem;
-      display: none;
-    }
-
-    &.was-validated .feedback {
-      display: block;
-    }
-  }
-
-  .wrapper {
-
-    input {
-
-      margin-top: unset;
-    }
-  }
-  .wrapper.filled {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
-    padding: 0.5rem 2rem 0 0.8125rem;
-    font-size: var(--input-fs, 1rem);
-    line-height: var(--input-lh, 1.25rem);
-    color: var(--colour-body);
-    background-color: var(--colour-canvas-2);
-    border: 2px solid var(--colour-primary);
-    border-radius: 0.5rem;
-
-    &:is(:focus-within, .focus-within):not(:disabled) {
-      border-color: var(--colour-info);
-      outline: 0;
-      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
-    }
-
-    input {
-      all: unset;
-      font-size: 1rem;
-      line-height: 1.625rem; /* 26 */
-      display: var(--search-display,inline-block);
-      width: 0;
-      flex-grow: 1;
-      padding: 0 0.5rem 0 0 !important;
-      margin-inline: 0.1875rem; /* 3 */
-      order: 999;
-      margin-bottom: 0.5rem;
-    }
-
-    .feedback {
-      display: none !important;
-    }
-
-    &:is(:focus, .focus):not(:disabled) {
-      border-color: var(--colour-info);
-      outline: 0;
-      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
-    }
-  }
-
-  button {
-    position: absolute;
-    right: 0.5rem;
-    border: none;
-    padding-inline: 0.5rem;
-    display: var(--display-button, none);
-
-    &:after {
-      content: '\2715';
-      font-weight: bold;
-    }
-  }
-
-  .wrapper:is(:focus-within) .dropdown {
-    display: var(--display-panel, none);
-  }
-
-  @media (hover: hover) {
-    .wrapper .dropdown:hover {
-      display: var(--display-panel, none);
-    }
-  }
-
-  @media (hover: none) {
-    :host(.hover) .wrapper .dropdown {
-      display: block;
-    }
-  }
-
-  // Inline edit
-  :host-context(:focus-within) {
-    input {
-      background-color: none !important;
-    }
-  }
-  :host-context(iam-inline-edit) {
-    display: block;
-    --display-btns: none;
-
-    label:hover + .outer:not(:focus-within) .wrapper:not([data-mousedown]),
-    .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover {
-      background-color: var(--colour-light);
-
-      input {
-        background-color: var(--colour-light);
-      }
-
-      .dropdown {
-        display: none;
-      }
-    }
-
-    .wrapper {
-      margin-bottom: 0;
-    }
-
-    .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
-      input {
-        border-color: transparent;
-        background: none;
-        margin-left: var(--input-ms,-1rem);
-        width: calc(100% + 1rem);
-        max-width: calc(100% + 1rem);
-        box-shadow: none;
-      }
-
-      .dropdown {
-        display: none;
-      }
-    }
-    .wrapper.filled:not(:focus-within):not([data-mousedown]) {
-      background: none;
-      border: none;
-      padding-left: 0;
-    }
-  }
-
-  :host([data-single]){
-
-    .wrapper.filled{
-      
-      slot[name='checked'] {
-        pointer-events: none;
-      }
-    }
-
-    #clear {
-      display: none;
-    }
-    ::slotted([slot='checked'])::after {
-      display: none;
-    }
-  }
-  :host-context(td){
-
-      input,
-      textarea,
-      select {
-        margin-left: 0!important;
-        width: 100%!important;
-        max-width: 100%!important;
-      }
-  }
-
-  ::slotted([slot='checked']) {
-    margin-bottom: 0.5rem;
-    order: var(--order, 1);
-    margin-inline: 0.1875rem; /* 3 */
-  }
-
-  ::slotted([slot='checked'])::after {
-    content: '\2715';
-    margin-left: 0.6em;
-    font-weight: bold;
-  }
+@use '../_func' as *;
+
+
+@use '../elements/forms' as *;
+@use '../elements/admin-panel' as *;
+@use '../elements/buttons' as *;
+@use '../elements/buttons--action' as *;
+@use '../elements/dropdown' as *;
+
+@use '../utilities/visually-hidden' as *;
+@use '../utilities/display' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@layer components {
+  :host {
+
+    margin-bottom: 1.5rem;
+  }
+
+  .outer {
+    position: relative;
+    max-width: var(--input-max-width, 50rem);
+    display: block;
+  }
+
+  label {
+    margin-bottom: 0;
+    padding-bottom: 0.5rem;
+  }
+
+  .inner-label:empty {
+    display: none;
+  }
+
+  .wrapper {
+    max-width: var(--input-max-width, 50rem);
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      height: 1rem;
+    }
+
+    input {
+      margin-bottom: 0.5rem;
+    }
+
+    .feedback {
+      position: absolute;
+      right: 0;
+      bottom: 100%;
+      padding: 0.85rem;
+      width: min-content;
+      white-space: nowrap;
+      margin-bottom: 0.5rem;
+      display: none;
+    }
+
+    &.was-validated .feedback {
+      display: block;
+    }
+  }
+
+  .wrapper {
+
+    input {
+
+      margin-top: unset;
+    }
+  }
+  .wrapper.filled {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
+    padding: 0.5rem 2rem 0 0.8125rem;
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
+    color: var(--colour-body);
+    background-color: var(--colour-canvas-2);
+    border: 2px solid var(--colour-primary);
+    border-radius: 0.5rem;
+
+    &:is(:focus-within, .focus-within):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
+
+    input {
+      all: unset;
+      font-size: 1rem;
+      line-height: 1.625rem; /* 26 */
+      display: var(--search-display,inline-block);
+      width: 0;
+      flex-grow: 1;
+      padding: 0 0.5rem 0 0 !important;
+      margin-inline: 0.1875rem; /* 3 */
+      order: 999;
+      margin-bottom: 0.5rem;
+    }
+
+    .feedback {
+      display: none !important;
+    }
+
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
+  }
+
+  button {
+    position: absolute;
+    right: 0.5rem;
+    border: none;
+    padding-inline: 0.5rem;
+    display: var(--display-button, none);
+
+    &:after {
+      content: '\2715';
+      font-weight: bold;
+    }
+  }
+
+  .wrapper:is(:focus-within) .dropdown {
+    display: var(--display-panel, none);
+  }
+
+  @media (hover: hover) {
+    .wrapper .dropdown:hover {
+      display: var(--display-panel, none);
+    }
+  }
+
+  @media (hover: none) {
+    :host(.hover) .wrapper .dropdown {
+      display: block;
+    }
+  }
+
+  /*  Inline edit */
+  :host-context(:focus-within) {
+    input {
+      background-color: none !important;
+    }
+  }
+  :host-context(iam-inline-edit) {
+    display: block;
+    --display-btns: none;
+
+    label:hover + .outer:not(:focus-within) .wrapper:not([data-mousedown]),
+    .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover {
+      background-color: var(--colour-light);
+
+      input {
+        background-color: var(--colour-light);
+      }
+
+      .dropdown {
+        display: none;
+      }
+    }
+
+    .wrapper {
+      margin-bottom: 0;
+    }
+
+    .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
+      input {
+        border-color: transparent;
+        background: none;
+        margin-left: var(--input-ms,-1rem);
+        width: calc(100% + 1rem);
+        max-width: calc(100% + 1rem);
+        box-shadow: none;
+      }
+
+      .dropdown {
+        display: none;
+      }
+    }
+    .wrapper.filled:not(:focus-within):not([data-mousedown]) {
+      background: none;
+      border: none;
+      padding-left: 0;
+    }
+  }
+
+  :host([data-single]){
+
+    .wrapper.filled{
+      
+      slot[name='checked'] {
+        pointer-events: none;
+      }
+    }
+
+    #clear {
+      display: none;
+    }
+    ::slotted([slot='checked'])::after {
+      display: none;
+    }
+  }
+  :host-context(td){
+
+      input,
+      textarea,
+      select {
+        margin-left: 0!important;
+        width: 100%!important;
+        max-width: 100%!important;
+      }
+  }
+
+  ::slotted([slot='checked']) {
+    margin-bottom: 0.5rem;
+    order: var(--order, 1);
+    margin-inline: 0.1875rem; /* 3 */
+  }
+
+  ::slotted([slot='checked'])::after {
+    content: '\2715';
+    margin-left: 0.6em;
+    font-weight: bold;
+  }
 }