fix(ld-select): css component

emdgroup-liquid · Oct 4, 2021 · 1a3bcab · 1a3bcab
1 parent b84d631
commit 1a3bcab
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 231 deletions.
diff --git a/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.css b/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.css
@@ -1,10 +1,27 @@
 .ld-option-internal {
+  /* layout */
   --ld-option-padding-left-sm: 0.625rem;
   --ld-option-padding-left-lg: 0.875rem;
+
+  /* colors */
+  --ld-option-col: var(--ld-col-rblck-default);
+  --ld-option-col-disabled: var(--ld-col-disabled);
+  --ld-option-col-bg: var(--ld-col-wht);
+  --ld-option-col-border: var(--ld-col-rblck1);
+
+  /* themable colors */
+  --ld-option-thm-col: var(--ld-thm-ocean-bg-primary);
+  --ld-option-thm-col-hover: var(--ld-col-rb-hover);
+  --ld-option-thm-col-focus: var(--ld-col-rb-focus);
+  --ld-option-thm-col-active: var(--ld-col-rb-active);
+  --ld-option-thm-col-bg-hover: var(--ld-col-rb1);
+  --ld-option-thm-col-bg-focus: var(--ld-col-rb1);
+  --ld-option-thm-col-bg-active: var(--ld-col-rb1);
+
   display: flex;
   position: relative;
-  color: var(--ld-col-rblck-default);
-  background-color: var(--ld-col-wht);
+  color: var(--ld-option-col);
+  background-color: var(--ld-option-col-bg);
   padding: var(--ld-sp-8) var(--ld-sp-12);
   font: var(--ld-typo-label-m);
   min-height: 2.5rem;
@@ -14,7 +31,7 @@
   border: 0;
   outline: none;
   -webkit-touch-callout: none;
-  border-bottom: solid var(--ld-col-rblck1) var(--ld-sp-1);
+  border-bottom: solid var(--ld-option-col-border) var(--ld-sp-1);
   box-sizing: border-box;
 
   &--sm {
@@ -49,7 +66,7 @@
   }
 
   &[aria-disabled='true'] {
-    color: var(--ld-col-disabled);
+    color: var(--ld-option-col-disabled);
   }
 
   /* Pseudo element for focus outline */
@@ -63,154 +80,65 @@
     border-radius: var(--ld-br-m);
     pointer-events: none;
   }
-}
 
-.ld-option-internal__checkbox-wrapper {
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
-.ld-option-internal__check,
-.ld-option-internal__checkbox {
-  align-self: center;
-  flex-shrink: 0;
-  transform: translateX(calc(-1 * var(--ld-sp-2)));
-}
-
-.ld-option-internal__check {
-  margin-right: var(--ld-sp-4);
-}
-
-.ld-option-internal__checkbox {
-  margin-left: var(--ld-sp-2);
-  margin-right: var(--ld-sp-6);
-}
-
-.ld-option-internal__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* .ld-theme-ocean -> default */
-.ld-option-internal,
-.ld-theme-ocean .ld-option-internal,
-[class*='ld-theme'] .ld-theme-ocean .ld-option-internal {
   &:where(:focus:focus-visible):before {
-    box-shadow: inset 0 0 0 0.1rem var(--ld-thm-ocean-bg-primary);
+    box-shadow: inset 0 0 0 0.1rem var(--ld-option-thm-col);
   }
 
   &:where(:not([disabled]):not([aria-disabled='true'])) {
     :where(.ld-option-internal__check) {
-      color: var(--ld-thm-ocean-bg-primary);
+      color: var(--ld-option-thm-col);
     }
 
     &:where(:focus:focus-visible) {
-      background-color: var(--ld-col-rb1);
+      background-color: var(--ld-option-thm-col-bg-focus);
 
       :where(.ld-option-internal__check) {
-        color: var(--ld-col-rb-focus);
+        color: var(--ld-option-thm-col-focus);
       }
     }
     @media (hover: hover) {
       &:where(:hover) {
-        background-color: var(--ld-col-rb1);
+        background-color: var(--ld-option-thm-col-bg-hover);
 
         :where(.ld-option-internal__check) {
-          color: var(--ld-col-rb-hover);
+          color: var(--ld-option-thm-col-hover);
         }
       }
     }
     &:where(:active),
     &:where(:active:focus-visible) {
-      background-color: var(--ld-col-rb1);
+      background-color: var(--ld-option-thm-col-bg-active);
 
       :where(.ld-option-internal__check) {
-        color: var(--ld-col-rb-active);
+        color: var(--ld-option-thm-col-active);
       }
     }
   }
 }
 
-.ld-theme-bubblegum,
-[class*='ld-theme'] .ld-theme-bubblegum,
-.ld-theme-shake,
-[class*='ld-theme'] .ld-theme-shake,
-.ld-theme-solvent,
-[class*='ld-theme'] .ld-theme-solvent {
-  :where(.ld-option-internal) {
-    &:where(:focus:focus-visible):before {
-      box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
-    }
-
-    &:where(:not([disabled]):not([aria-disabled='true'])) {
-      :where(.ld-option-internal__check) {
-        color: var(--ld-col-rp-default);
-      }
-
-      &:where(:focus:focus-visible) {
-        background-color: var(--ld-col-rp1);
-
-        :where(.ld-option-internal__check) {
-          color: var(--ld-col-rp-focus);
-        }
-      }
-      @media (hover: hover) {
-        &:where(:hover) {
-          background-color: var(--ld-col-rp1);
-
-          :where(.ld-option-internal__check) {
-            color: var(--ld-col-rp-hover);
-          }
-        }
-      }
-      &:where(:active),
-      &:where(:active:focus-visible) {
-        background-color: var(--ld-col-rp1);
-
-        :where(.ld-option-internal__check) {
-          color: var(--ld-col-rp-active);
-        }
-      }
-    }
-  }
+.ld-option-internal__checkbox-wrapper {
+  display: inline-flex;
+  flex-shrink: 0;
 }
 
-.ld-theme-tea,
-[class*='ld-theme'] .ld-theme-tea {
-  :where(.ld-option-internal) {
-    &:where(:focus:focus-visible):before {
-      box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary);
-    }
-
-    &:where(:not([disabled]):not([aria-disabled='true'])) {
-      :where(.ld-option-internal__check) {
-        color: var(--ld-thm-tea-bg-primary);
-      }
-
-      &:where(:focus:focus-visible) {
-        background-color: var(--ld-col-rg1);
+.ld-option-internal__check,
+.ld-option-internal__checkbox {
+  align-self: center;
+  flex-shrink: 0;
+  transform: translateX(calc(-1 * var(--ld-sp-2)));
+}
 
-        :where(.ld-option-internal__check) {
-          color: var(--ld-col-rg-focus);
-        }
-      }
-      @media (hover: hover) {
-        &:where(:hover) {
-          background-color: var(--ld-col-rg1);
+.ld-option-internal__check {
+  margin-right: var(--ld-sp-4);
+}
 
-          :where(.ld-option-internal__check) {
-            color: var(--ld-col-rg-hover);
-          }
-        }
-      }
-      &:where(:active),
-      &:where(:active:focus-visible) {
-        background-color: var(--ld-col-rg1);
+.ld-option-internal__checkbox {
+  margin-left: var(--ld-sp-2);
+  margin-right: var(--ld-sp-6);
+}
 
-        :where(.ld-option-internal__check) {
-          color: var(--ld-col-rg-active);
-        }
-      }
-    }
-  }
+.ld-option-internal__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
diff --git a/src/liquid/components/ld-select/ld-select-popper/ld-select-popper.css b/src/liquid/components/ld-select/ld-select-popper/ld-select-popper.css
@@ -1,6 +1,14 @@
 :host {
+  /* layout */
+  --ld-select-popper-min-width: 12.8125rem;
   --ld-select-popper-max-height: calc(100vh - 1.25rem);
 
+  /* colors */
+  --ld-select-popper-col-border: var(--ld-col-rblck1);
+  --ld-select-popper-col-bg: var(--ld-col-wht);
+
+  min-width: var(--ld-select-popper-min-width);
+
   ld-option-internal:last-of-type::part(option) {
     border-bottom: 0;
   }
@@ -21,7 +29,6 @@
     box-shadow: var(--ld-shadow-sticky);
     border-radius: var(--ld-br-m);
     pointer-events: none;
-    background-color: var(--ld-col-wht);
     z-index: -1;
   }
 }
@@ -31,7 +38,7 @@
   overflow-y: auto;
   border-bottom-left-radius: var(--ld-br-m);
   border-bottom-right-radius: var(--ld-br-m);
-  border-top: solid var(--ld-col-rblck1) var(--ld-sp-1);
+  border-top: solid var(--ld-select-popper-col-border) var(--ld-sp-1);
 
   .ld-select-popper--detached &,
   .ld-select-popper--pinned & {
@@ -47,7 +54,7 @@
   box-shadow: var(--ld-shadow-sticky);
   border-radius: var(--ld-br-m);
   pointer-events: none;
-  background-color: var(--ld-col-wht);
+  background-color: var(--ld-select-popper-col-bg);
   z-index: -1;
   bottom: 0;
 

diff --git a/src/liquid/components/ld-select/ld-select-popper/ld-select-popper.tsx b/src/liquid/components/ld-select/ld-select-popper/ld-select-popper.tsx
@@ -62,7 +62,12 @@ export class LdSelectPopper {
 
   render() {
     return (
-      <Host style={{ zIndex: this.isPinned ? '2147483647' : '2147483646' }}>
+      <Host
+        style={{
+          zIndex: this.isPinned ? '2147483647' : '2147483646',
+          display: this.expanded ? 'block' : 'none',
+        }}
+      >
         <div
           class={getClassNames([
             'ld-select-popper',