@iamproperty/components 7.7.1--beta14 → 7.7.1--beta16

package/assets/sass/elements/dropdown.css

@@ -1,16 +1,87 @@
 @layer elements {
   
+  /* #region dropdown wrapper - used for components */
+  .dropdown__wrapper {
+    position: relative;
+    display: block;
+
+    label {
+      position: relative;
+    }
+
+    input {
+      padding-right: 3rem;
+    }
+
+    label:after,
+    .hint-text {
+      position: absolute;
+      top: 100%;
+    }
+
+    label[for="use"]:after {
+      top: var(--checkbox-inner-top, 0.5rem);
+    }
+  }
+
+  .was-validated .dropdown__wrapper label:has(:is(input:not([type='radio']):not([type='checkbox']), select)),
+  .dropdown__wrapper.was-validated label:has(:is(input:not([type='radio']):not([type='checkbox']), select)) {
+    /*margin-bottom: 2.5rem;*/
+
+    input {
+      background: none !important;
+    }
+
+    &:has(:invalid, .is-invalid) .hint-text {
+      display: none;
+    }
+  }
+
+
+  .dark-theme .dropdown__wrapper datalist {
+
+    color-scheme: dark;
+  }
+
+  .dropdown__wrapper:is(:focus-within,:has(*:active),:active) datalist {
+
+    display: block;
+
+    &:empty {
+      display: block !important;
+    }
+  }
+
+  /* #endregion */
+
   /* #region Dropdown */
-  .dropdown {
-    position: absolute;
-    top: calc(100% + 0.5rem);
-    padding: 0;
-    left: 0;
+  :is(.dropdown, datalist, [popover]),
+  select::picker(select)  {
+
+    border-top: none;
+    border: none !important;
+
+    font-size: 1rem;
+    background: var(--dropdown-bg);
+    margin-block: var(--dropdown-margin-block);
+    padding: var(--dropdown-padding);
+    border-radius: var(--dropdown-border-radius);
+    box-shadow: var(--dropdown-box-shadow);
+  }
+  
+  :is(.dropdown, datalist):empty,
+  select::picker(select):empty {
+    
+    display: none !important;
+  }
+
+  :is(.dropdown, datalist){
+    
+    overflow-y: auto;
     width: 100%;
-    margin: 0;
-    z-index: 99;
-    display: none;
-    max-height: 15.25rem !important;
+    max-width: var(--input-max-width, 50rem);
+    z-index: 100;
+    max-height: 25rem;
     overflow: auto;
 
     &:before {
@@ -18,8 +89,116 @@
     }
   }
 
+  datalist {
+    
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    
+    &:empty {
+      display: block !important;
+    }
+
+    &:empty:before {
+      content: "No results found"; /* TODO Allow for text to be overwritten */
+      background-color: white;
+      padding: 1rem 0.5rem;
+      color: var(--colour-primary) !important;
+      font-weight: inherit !important;
+      font-family: inherit !important;
+      font-size: 1rem !important;
+      line-height: 1.1875rem !important;
+      padding-block: var(--menu-item-padding, 1rem) !important;
+      display: block;
+    }
+  }
+
+  [popover] {
+    top: calc(anchor(top) + anchor-size(height));
+    left: anchor(left);
+  }
+
   /* #endregion */
+
+  /* #region Dropdown Option */
+  :is(.dropdown, datalist, select) option,
+  .dropdown__option:not([slot='checked']) {
+    
+    background: var(--dropdown-bg);
+    cursor: pointer;
+    background: unset !important;
+    border: unset !important;
+    color: var(--option-color) !important;
+    font-weight: inherit !important;
+    font-family: inherit !important;
+    font-size: 1rem !important;
+    line-height: 1.5rem !important;
+    margin: 0;
+    padding: var(--option-padding) !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    text-align: left !important;
+
+    border-radius: var(--option-border-radius)!important;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    text-overflow: ellipsis;
+    overflow: clip;
+
+    &:not(:last-child){
+      margin: 0 0 0.25rem 0 !important;
+    }
+
+    &:is(:hover, :focus) {
+      background: var(--option-bg-hover)!important;
+      color: var(--option-color-hover) !important;
+    }
+
+    &:is(:active,.active,:checked) {
+      border-left: var(--option-border-left-active) !important;
+      background: var(--option-bg-active) !important;
+    }
+
+    &:after {
+      content: attr(data-after);
+    }
+  }
   
+
+
+  :is(.dropdown, datalist, select, [popover]) hr {
+      height: 1px !important;
+      background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
+      width: 100%;
+      margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
+      padding: 0 !important;
+  }
+
+  :is(.dropdown, datalist, select, [popover]) *:last-child {
+    margin-bottom: 0;
+  }
+
+  :is(.dropdown, datalist, select, [popover]) :is(p):last-child {
+    padding-bottom: 0;
+  }
+
+  /* #endregion */
+
+  /* #region Dropdown headings */
+
+  :is(.dropdown, datalist, [popover]) :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
+    font-size: 1rem !important;
+    line-height: 1.1875rem !important;
+    padding-bottom: 0.5rem;
+    font-weight: 700;
+  }
+
+  /* #endregion */
+
   /* #region Needed for the component files */
   :is(iam-tag,iam-multiselect):has(label:not([slot='checked'])) {
     --display-panel: block;
@@ -46,40 +225,5 @@
     order: var(--order, 1);
   }
 
-  .dropdown__option:not([slot='checked']) {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    margin: 0;
-    text-align: left;
-    border-radius: 0;
-    padding-inline: 1rem;
-    outline: none;
-    padding-block: 0.5rem;
-
-    padding-bottom: 0.25em;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    &:not(:hover, :focus, :active, :focus-within) {
-      background: none !important;
-    }
-
-    &::after {
-      display: none;
-    }
-
-    &[data-email] {
-
-      &::after {
-        content: attr(data-email);
-        display: block;
-        line-height: 1;
-        padding-bottom: 0.25em;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
   /* #endregion */
 }