fix(label): gap between label and input

emdgroup-liquid · May 20, 2021 · b1f01be · b1f01be
1 parent 17861c8
commit b1f01be
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 5 deletions.
diff --git a/src/docs/components/docs-btn-search/docs-btn-search.css b/src/docs/components/docs-btn-search/docs-btn-search.css
@@ -31,13 +31,14 @@
   display: flex;
   align-items: center;
   appearance: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background-color: transparent;
   cursor: pointer;
   border: 0;
   padding: 0;
   color: inherit;
   width: 100%;
+  font: var(--ld-typo-body-s);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .docs-btn-search__magnifier {

diff --git a/src/docs/components/docs-nav/docs-nav.css b/src/docs/components/docs-nav/docs-nav.css
@@ -63,6 +63,15 @@
     font-weight: 900;
     display: inline-block;
     margin: var(--ld-sp-24) 0 var(--ld-sp-6);
+
+    @media (hover: none) {
+      outline: none;
+    }
+
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
 
   .docs-switch-dark-light {

diff --git a/src/docs/components/docs-search/docs-search.tsx b/src/docs/components/docs-search/docs-search.tsx
@@ -84,7 +84,7 @@ export class DocsSearch {
     this.isActive = true
     this.searchInput.value = ''
     setTimeout(() => {
-      this.searchInput.focus()
+      this.searchInput.querySelector('input').focus()
     })
   }
 

diff --git a/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.css b/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.css
@@ -35,12 +35,13 @@
   display: flex;
   align-items: center;
   appearance: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background-color: transparent;
   cursor: pointer;
   border: 0;
   padding: 0;
   color: inherit;
+  font: var(--ld-typo-body-s);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   svg {
     margin-right: var(--ld-sp-6);

diff --git a/src/docs/layouts/docs-layout/docs-layout.css b/src/docs/layouts/docs-layout/docs-layout.css
@@ -1,5 +1,6 @@
 body {
   overscroll-behavior-x: none;
+  -webkit-text-size-adjust: none;
 }
 
 .docs-main {

diff --git a/src/liquid/components/ld-input/readme.md b/src/liquid/components/ld-input/readme.md
@@ -243,7 +243,7 @@ The `ld-input` component does not provide any properties or methods for validati
       } else {
         window.alert('Form is invalid.')
       }
-    })
+    }, 10)
   })
 </script>
 {% endexample %}

diff --git a/src/liquid/components/ld-label/ld-label.css b/src/liquid/components/ld-label/ld-label.css
@@ -1,6 +1,6 @@
 .ld-label {
   font: var(--ld-typo-label-s);
-  display: inline-flex;
+  display: inline-grid;
   flex-direction: column;
   gap: var(--ld-sp-6);
   max-width: 100%;