diff --git a/src/docs/components/docs-search/assets/magnifier.svg b/src/docs/components/docs-search/assets/magnifier.svg
new file mode 100644
index 0000000000..df34d4ee3c
--- /dev/null
+++ b/src/docs/components/docs-search/assets/magnifier.svg
@@ -0,0 +1 @@
+
diff --git a/src/docs/components/docs-search/docs-search.css b/src/docs/components/docs-search/docs-search.css
index 80ecea4199..adcff262f2 100644
--- a/src/docs/components/docs-search/docs-search.css
+++ b/src/docs/components/docs-search/docs-search.css
@@ -45,6 +45,24 @@
.docs-search__input {
width: 100%;
pointer-events: all;
+
+ &::before {
+ box-shadow: none !important;
+ }
+
+ &[aria-expanded='true'] {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ .docs-search__input-icon {
+ margin-left: var(--ld-sp-16);
+ }
+}
+
+.docs-search__input-icon {
+ width: var(--ld-sp-16);
+ height: var(--ld-sp-16);
}
.docs-search__results {
@@ -57,6 +75,17 @@
border-bottom-right-radius: var(--ld-br-m);
}
+.docs-search__results--expanded {
+ &::before {
+ content: '';
+ display: block;
+ height: var(--ld-sp-1);
+ background-color: var(--ld-col-rblck1);
+ margin: 0 auto;
+ width: calc(100% - var(--ld-sp-32));
+ }
+}
+
.docs-search__result {
font: var(--ld-typo-body-m);
diff --git a/src/docs/components/docs-search/docs-search.tsx b/src/docs/components/docs-search/docs-search.tsx
index a1a5d2cc7c..f1de85f7fb 100644
--- a/src/docs/components/docs-search/docs-search.tsx
+++ b/src/docs/components/docs-search/docs-search.tsx
@@ -1,6 +1,6 @@
import '../../../components' // type definitions for type checking and intelliSense
import 'wicg-inert'
-import { Component, h, Listen, State, Host } from '@stencil/core'
+import { Component, h, Listen, State, Host, getAssetPath } from '@stencil/core'
import Fuse from 'fuse.js'
import eventBus from '../../utils/eventBus'
import { SearchEventType } from '../../utils/eventTypes'
@@ -18,6 +18,7 @@ interface SearchResult {
tag: 'docs-search',
styleUrl: 'docs-search.css',
shadow: false,
+ assetsDirs: ['assets'],
})
export class DocsSearch {
private searchInput!: HTMLLdInputElement
@@ -103,6 +104,7 @@ export class DocsSearch {
{this.results.length
diff --git a/src/liquid/components/ld-button/ld-button.css b/src/liquid/components/ld-button/ld-button.css
index 9dc5443072..759e7783e2 100644
--- a/src/liquid/components/ld-button/ld-button.css
+++ b/src/liquid/components/ld-button/ld-button.css
@@ -7,24 +7,24 @@ ld-button {
}
.ld-button {
- --ld-icon-size-sm: 1rem;
- --ld-icon-size-md: 1.25rem;
- --ld-icon-size-lg: 1.5rem;
- --ld-padding-sm-x: 0.625rem;
- --ld-padding-sm-y: 0.5rem;
- --ld-padding-md-x: 0.875rem;
- --ld-padding-md-y: 0.625rem;
- --ld-padding-lg-x: 1.3125rem;
- --ld-padding-lg-y: 0.75rem;
- --ld-gap-sm: 0.625rem;
- --ld-gap-md: 0.875rem;
- --ld-gap-lg: 1.1875rem;
- --ld-icon-margin-x-sm: -0.125rem;
- --ld-icon-margin-x-md: -0.25rem;
- --ld-icon-margin-x-lg: -0.5rem;
+ --ld-button-icon-size-sm: 1rem;
+ --ld-button-icon-size-md: 1.25rem;
+ --ld-button-icon-size-lg: 1.5rem;
+ --ld-button-icon-margin-x-sm: -0.125rem;
+ --ld-button-icon-margin-x-md: -0.25rem;
+ --ld-button-icon-margin-x-lg: -0.5rem;
+ --ld-button-padding-sm-x: 0.625rem;
+ --ld-button-padding-sm-y: 0.5rem;
+ --ld-button-padding-md-x: 0.875rem;
+ --ld-button-padding-md-y: 0.625rem;
+ --ld-button-padding-lg-x: 1.3125rem;
+ --ld-button-padding-lg-y: 0.75rem;
+ --ld-button-gap-sm: 0.625rem;
+ --ld-button-gap-md: 0.875rem;
+ --ld-button-gap-lg: 1.1875rem;
font: var(--ld-typo-body-m);
border: 0;
- padding: var(--ld-padding-md-y) var(--ld-padding-md-x);
+ padding: var(--ld-button-padding-md-y) var(--ld-button-padding-md-x);
border-radius: var(--ld-br-m);
min-height: 2.5rem;
min-width: 2.5rem;
@@ -34,7 +34,7 @@ ld-button {
color: var(--ld-col-wht);
display: grid;
grid-auto-flow: column;
- gap: var(--ld-gap-md);
+ gap: var(--ld-button-gap-md);
align-items: center;
text-align: center;
justify-content: center;
@@ -55,53 +55,59 @@ ld-button {
line-height: 0;
}
+ ld-icon,
:where(.ld-icon),
:where(.ld-icon svg) {
- width: var(--ld-icon-size-md);
- height: var(--ld-icon-size-md);
+ width: var(--ld-button-icon-size-md);
+ height: var(--ld-button-icon-size-md);
}
- :where(.ld-icon) {
- margin: auto var(--ld-icon-margin-x-md);
+ > ld-icon,
+ > .ld-icon {
+ margin: auto var(--ld-button-icon-margin-x-md);
}
&:where(.ld-button--sm) {
min-height: 2rem;
min-width: 2rem;
- padding: var(--ld-padding-sm-y) var(--ld-padding-sm-x);
+ padding: var(--ld-button-padding-sm-y) var(--ld-button-padding-sm-x);
font: var(--ld-typo-body-s);
font-weight: 700;
line-height: 1;
- gap: var(--ld-gap-sm);
+ gap: var(--ld-button-gap-sm);
- :where(.ld-icon) {
- margin: auto var(--ld-icon-margin-x-sm);
+ > ld-icon,
+ > .ld-icon {
+ margin: auto var(--ld-button-icon-margin-x-sm);
}
+ ld-icon,
.ld-icon,
.ld-icon :where(svg) {
- width: var(--ld-icon-size-sm);
- height: var(--ld-icon-size-sm);
+ width: var(--ld-button-icon-size-sm);
+ height: var(--ld-button-icon-size-sm);
}
}
&:where(.ld-button--lg) {
min-height: 3.125rem;
min-width: 3.125rem;
- padding: var(--ld-padding-lg-y) var(--ld-padding-lg-x);
+ padding: var(--ld-button-padding-lg-y) var(--ld-button-padding-lg-x);
font: var(--ld-typo-body-l);
font-weight: 700;
line-height: 1;
- gap: var(--ld-gap-lg);
+ gap: var(--ld-button-gap-lg);
- :where(.ld-icon) {
- margin: auto var(--ld-icon-margin-x-lg);
+ > ld-icon,
+ > .ld-icon {
+ margin: auto var(--ld-button-icon-margin-x-lg);
}
+ ld-icon,
.ld-icon,
.ld-icon :where(svg) {
- width: var(--ld-icon-size-lg);
- height: var(--ld-icon-size-lg);
+ width: var(--ld-button-icon-size-lg);
+ height: var(--ld-button-icon-size-lg);
}
}
diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md
index 82ea001a82..3564bfc1c5 100644
--- a/src/liquid/components/ld-button/readme.md
+++ b/src/liquid/components/ld-button/readme.md
@@ -150,7 +150,7 @@ Although `aria-disabled="true"` is not necessary on a `button` element (or any o
Text
{% endexample %}
-### Sizes
+### Size
{% example %}
Text
diff --git a/src/liquid/components/ld-icon/ld-icon.css b/src/liquid/components/ld-icon/ld-icon.css
index 1399051433..7f1b906096 100644
--- a/src/liquid/components/ld-icon/ld-icon.css
+++ b/src/liquid/components/ld-icon/ld-icon.css
@@ -4,29 +4,29 @@
}
:where(.ld-icon) {
- --ld-size-sm: 1rem;
- --ld-size-md: 1.25rem;
- --ld-size-lg: 1.5rem;
+ --ld-icon-size-sm: 1rem;
+ --ld-icon-size-md: 1.25rem;
+ --ld-icon-size-lg: 1.5rem;
display: inline-flex;
justify-content: center;
align-items: center;
- width: var(--ld-size-md);
- height: var(--ld-size-md);
+ width: var(--ld-icon-size-md);
+ height: var(--ld-icon-size-md);
:where(svg) {
- width: var(--ld-size-md);
- height: var(--ld-size-md);
+ width: var(--ld-icon-size-md);
+ height: var(--ld-icon-size-md);
flex-shrink: 0;
}
}
:where(.ld-icon--sm),
:where(.ld-icon--sm svg) {
- width: var(--ld-size-sm);
- height: var(--ld-size-sm);
+ width: var(--ld-icon-size-sm);
+ height: var(--ld-icon-size-sm);
}
:where(.ld-icon--lg),
:where(.ld-icon--lg svg) {
- width: var(--ld-size-lg);
- height: var(--ld-size-lg);
+ width: var(--ld-icon-size-lg);
+ height: var(--ld-icon-size-lg);
}
diff --git a/src/liquid/components/ld-input/ld-input.css b/src/liquid/components/ld-input/ld-input.css
index 98d17757aa..9d1636ef9c 100644
--- a/src/liquid/components/ld-input/ld-input.css
+++ b/src/liquid/components/ld-input/ld-input.css
@@ -13,36 +13,65 @@ ld-input {
}
.ld-input {
- --ld-input-padding-x: 0.625rem;
- --ld-input-padding-top: 0.625rem;
- --ld-input-padding-bottom: 0.6875rem;
- --ld-input-max-height: 2.5rem;
+ --ld-input-padding-x-sm: 0.5rem;
+ --ld-input-padding-x-md: 0.625rem;
+ --ld-input-padding-x-lg: 0.875rem;
+ --ld-input-padding-top-sm: 0.25rem;
+ --ld-input-padding-top-md: 0.625rem;
+ --ld-input-padding-top-lg: 0.625rem;
+ --ld-input-padding-bottom-sm: 0.25rem;
+ --ld-input-padding-bottom-md: 0.6875rem;
+ --ld-input-padding-bottom-lg: 0.6875rem;
+ --ld-input-min-height-sm: 2rem;
+ --ld-input-min-height-md: 2.5rem;
+ --ld-input-min-height-lg: 3.125rem;
+ --ld-input-max-height-sm: 2rem;
+ --ld-input-max-height-md: 2.5rem;
+ --ld-input-max-height-lg: 3.125rem;
+ --ld-input-icon-size-sm: 1rem;
+ --ld-input-icon-size-md: 1.25rem;
+ --ld-input-icon-size-lg: 1.5rem;
+ --ld-input-time-min-width-sm: 5.125rem;
+ --ld-input-time-min-width-md: 6.25rem;
+ --ld-input-time-min-width-lg: 7.5rem;
--ld-input-transparent: rgba(255, 255, 255, 0);
position: relative;
display: inline-flex;
align-items: center;
background-color: var(--ld-col-wht);
color: var(--ld-col-rblck-default);
- box-shadow: inset 0 0 0 0.1rem var(--ld-col-rblck1);
max-width: 100%;
border-radius: var(--ld-br-m);
line-height: 1;
- min-height: var(--ld-sp-40);
+ min-height: var(--ld-input-min-height-md);
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ border-radius: var(--ld-br-m);
+ display: block;
+ pointer-events: none;
+ box-shadow: inset 0 0 0 0.1rem var(--ld-col-rblck1);
+ }
> :where(:not(input):not(textarea)) {
user-select: none;
}
> :where(:not(input):not(textarea):first-child) {
- margin-left: var(--ld-input-padding-x);
+ margin-left: var(--ld-input-padding-x-md);
}
> :where(:not(input):not(textarea):last-child) {
- margin-right: var(--ld-input-padding-x);
+ margin-right: var(--ld-input-padding-x-md);
}
> input {
- max-height: var(--ld-input-max-height);
+ max-height: var(--ld-input-max-height-md);
&[type='file'] {
opacity: 0;
@@ -82,16 +111,20 @@ ld-input {
&[type='date']::-webkit-calendar-picker-indicator {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+CjxwYXRoIGZpbGw9IiMwRjY5QUYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTIgNnY5LjY5YzAgLjY1LjI4LjkzLjQ4IDEuMDFDMy44IDE3LjI2IDYuMjQgMTggMTAgMThzNi4yLS43NCA3LjUyLTEuM2MuMi0uMDguNDgtLjM2LjQ4LTEuMDFWNkgyek0zLjA4LjUzQTMuNjggMy42OCAwIDAwMCA0LjI0VjE1LjdjMCAxLjIyLjU3IDIuMzcgMS43IDIuODVDMy4yNSAxOS4yIDUuOTYgMjAgMTAgMjBjNC4wMyAwIDYuNzQtLjggOC4zLTEuNDYgMS4xMy0uNDggMS43LTEuNjMgMS43LTIuODVWNC4yNGEzLjY4IDMuNjggMCAwMC0zLjA4LTMuN0MxNS4xMi4yNSAxMi42OCAwIDEwIDAgNy4zMiAwIDQuODguMjYgMy4wOC41M3pNOC4yNSA4LjVjMC0uMjguMjItLjUuNS0uNWgyLjVjLjI4IDAgLjUuMjIuNS41djJhLjUuNSAwIDAxLS41LjVoLTIuNWEuNS41IDAgMDEtLjUtLjV2LTJ6bTUuNS0uNWEuNS41IDAgMDAtLjUuNXYyYzAgLjI4LjIyLjUuNS41aDIuNWEuNS41IDAgMDAuNS0uNXYtMmEuNS41IDAgMDAtLjUtLjVoLTIuNXptLTEwLjUuNWMwLS4yOC4yMi0uNS41LS41aDIuNWMuMjggMCAuNS4yMi41LjV2MmEuNS41IDAgMDEtLjUuNWgtMi41YS41LjUgMCAwMS0uNS0uNXYtMnptNS41IDMuNzVhLjUuNSAwIDAwLS41LjV2MmMwIC4yOC4yMi41LjUuNWgyLjVhLjUuNSAwIDAwLjUtLjV2LTJhLjUuNSAwIDAwLS41LS41aC0yLjV6bS01LjUuNWMwLS4yOC4yMi0uNS41LS41aDIuNWMuMjggMCAuNS4yMi41LjV2MmEuNS41IDAgMDEtLjUuNWgtMi41YS41LjUgMCAwMS0uNS0uNXYtMnoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4=');
}
- &[type='time']::-webkit-calendar-picker-indicator {
- background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxwYXRoIHN0cm9rZT0iIzBGNjlBRiIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMyA2LjI0YzAtMS4zOS45NC0yLjUzIDIuMjMtMi43MkM2Ljk5IDMuMjYgOS4zOCAzIDEyIDNjMi42MiAwIDUgLjI2IDYuNzcuNTJBMi42OCAyLjY4IDAgMDEyMSA2LjI0VjE3LjdjMCAuOTMtLjQzIDEuNjUtMS4wOCAxLjkzQzE4LjQ3IDIwLjI0IDE1LjkgMjEgMTIgMjFjLTMuOSAwLTYuNDctLjc2LTcuOTItMS4zOC0uNjUtLjI4LTEuMDgtMS0xLjA4LTEuOTNWNi4yNHoiLz48cGF0aCBmaWxsPSIjMEY2OUFGIiBkPSJNMTEgMy41YzAtLjI4LjIyLS41LjUtLjVoMWMuMjggMCAuNS4yMi41LjV2MmEuNS41IDAgMDEtLjUuNWgtMWEuNS41IDAgMDEtLjUtLjV2LTJ6TTExIDE4LjVjMC0uMjguMjItLjUuNS0uNWgxYy4yOCAwIC41LjIyLjUuNXYyYS41LjUgMCAwMS0uNS41aC0xYS41LjUgMCAwMS0uNS0uNXYtMnpNNS41IDExYy4yOCAwIC41LjIyLjUuNXYxYS41LjUgMCAwMS0uNS41aC0yYS41LjUgMCAwMS0uNS0uNXYtMWMwLS4yOC4yMi0uNS41LS41aDJ6TTIwLjUgMTFjLjI4IDAgLjUuMjIuNS41djFhLjUuNSAwIDAxLS41LjVoLTJhLjUuNSAwIDAxLS41LS41di0xYzAtLjI4LjIyLS41LjUtLjVoMnoiLz48cGF0aCBmaWxsPSIjMEY2OUFGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjY4IDEwLjI0YS41LjUgMCAwMS42MS0uMzRsMy44NiAxLjFjLjI1LjA3LjQ3LjIuNjUuMzhsNC4yNiA0LjI3Yy4yLjIuMi41IDAgLjdsLS43LjcxYS41LjUgMCAwMS0uNzEgMGwtNC4wOC00LjA4YS41LjUgMCAwMC0uMjItLjEzbC0zLjYtMS4wM2EuNS41IDAgMDEtLjM1LS42MWwuMjgtLjk3eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+Cjwvc3ZnPg==');
- background-size: 135%;
+ &[type='time'] {
+ min-width: var(--ld-input-time-min-width-md);
+
+ &::-webkit-calendar-picker-indicator {
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxwYXRoIHN0cm9rZT0iIzBGNjlBRiIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMyA2LjI0YzAtMS4zOS45NC0yLjUzIDIuMjMtMi43MkM2Ljk5IDMuMjYgOS4zOCAzIDEyIDNjMi42MiAwIDUgLjI2IDYuNzcuNTJBMi42OCAyLjY4IDAgMDEyMSA2LjI0VjE3LjdjMCAuOTMtLjQzIDEuNjUtMS4wOCAxLjkzQzE4LjQ3IDIwLjI0IDE1LjkgMjEgMTIgMjFjLTMuOSAwLTYuNDctLjc2LTcuOTItMS4zOC0uNjUtLjI4LTEuMDgtMS0xLjA4LTEuOTNWNi4yNHoiLz48cGF0aCBmaWxsPSIjMEY2OUFGIiBkPSJNMTEgMy41YzAtLjI4LjIyLS41LjUtLjVoMWMuMjggMCAuNS4yMi41LjV2MmEuNS41IDAgMDEtLjUuNWgtMWEuNS41IDAgMDEtLjUtLjV2LTJ6TTExIDE4LjVjMC0uMjguMjItLjUuNS0uNWgxYy4yOCAwIC41LjIyLjUuNXYyYS41LjUgMCAwMS0uNS41aC0xYS41LjUgMCAwMS0uNS0uNXYtMnpNNS41IDExYy4yOCAwIC41LjIyLjUuNXYxYS41LjUgMCAwMS0uNS41aC0yYS41LjUgMCAwMS0uNS0uNXYtMWMwLS4yOC4yMi0uNS41LS41aDJ6TTIwLjUgMTFjLjI4IDAgLjUuMjIuNS41djFhLjUuNSAwIDAxLS41LjVoLTJhLjUuNSAwIDAxLS41LS41di0xYzAtLjI4LjIyLS41LjUtLjVoMnoiLz48cGF0aCBmaWxsPSIjMEY2OUFGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjY4IDEwLjI0YS41LjUgMCAwMS42MS0uMzRsMy44NiAxLjFjLjI1LjA3LjQ3LjIuNjUuMzhsNC4yNiA0LjI3Yy4yLjIuMi41IDAgLjdsLS43LjcxYS41LjUgMCAwMS0uNzEgMGwtNC4wOC00LjA4YS41LjUgMCAwMC0uMjItLjEzbC0zLjYtMS4wM2EuNS41IDAgMDEtLjM1LS42MWwuMjgtLjk3eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+Cjwvc3ZnPg==');
+ background-size: 135%;
+ }
}
}
> input,
> textarea {
- padding: var(--ld-input-padding-top) var(--ld-input-padding-x)
- var(--ld-input-padding-bottom);
+ padding: var(--ld-input-padding-top-md) var(--ld-input-padding-x-md)
+ var(--ld-input-padding-bottom-md);
font: var(--ld-typo-body-m);
line-height: 1;
background-color: rgba(255, 255, 255, 0);
@@ -114,6 +147,7 @@ ld-input {
> .ld-button {
background-color: var(--ld-input-transparent);
flex-shrink: 0;
+ z-index: 0;
&:first-child,
&:first-child > button {
@@ -148,11 +182,165 @@ ld-input {
&[mode='ghost'],
&.ld-button--ghost {
&:first-child {
- margin-right: calc(-1 * var(--ld-input-padding-x));
+ margin-right: calc(-1 * var(--ld-input-padding-x-md));
}
&:last-child {
- margin-left: calc(-1 * var(--ld-input-padding-x));
+ margin-left: calc(-1 * var(--ld-input-padding-x-md));
+ }
+ }
+ }
+
+ &.ld-input--sm {
+ min-height: var(--ld-input-min-height-sm);
+
+ > :where(:not(input):not(textarea):first-child) {
+ margin-left: var(--ld-input-padding-x-sm);
+ }
+
+ > :where(:not(input):not(textarea):last-child) {
+ margin-right: var(--ld-input-padding-x-sm);
+ }
+
+ > input {
+ max-height: var(--ld-input-max-height-sm);
+
+ &[type='date']::-webkit-calendar-picker-indicator {
+ background-size: 90%;
+ }
+ &[type='time'] {
+ min-width: var(--ld-input-time-min-width-sm);
+
+ &::-webkit-calendar-picker-indicator {
+ background-size: 120%;
+ }
+ }
+ }
+
+ > input,
+ > textarea {
+ padding: var(--ld-input-padding-top-sm) var(--ld-input-padding-x-sm)
+ var(--ld-input-padding-bottom-sm);
+ font: var(--ld-typo-body-s);
+ }
+
+ ld-button,
+ .ld-button {
+ min-height: var(--ld-input-min-height-sm);
+ }
+
+ .ld-button,
+ .ld-button.ld-button--sm,
+ .ld-button.ld-button--lg {
+ min-width: var(--ld-input-min-height-sm);
+ margin: 0;
+ }
+
+ > ld-button,
+ > .ld-button {
+ &[mode='ghost'],
+ &.ld-button--ghost {
+ &:first-child {
+ margin-right: calc(-1 * var(--ld-input-padding-x-sm));
+ }
+
+ &:last-child {
+ margin-left: calc(-1 * var(--ld-input-padding-x-sm));
+ }
+ }
+ }
+
+ > ld-button:not([mode='ghost']),
+ > .ld-button:not(.ld-button--ghost) {
+ &.ld-button:last-child,
+ &:last-child > .ld-button {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ }
+
+ .ld-icon,
+ .ld-icon :where(svg) {
+ width: var(--ld-input-icon-size-sm);
+ height: var(--ld-input-icon-size-sm);
+ }
+ }
+
+ &.ld-input--lg {
+ min-height: var(--ld-input-min-height-lg);
+
+ > :where(:not(input):not(textarea):first-child) {
+ margin-left: var(--ld-input-padding-x-lg);
+ }
+
+ > :where(:not(input):not(textarea):last-child) {
+ margin-right: var(--ld-input-padding-x-lg);
+ }
+
+ > input {
+ max-height: var(--ld-input-max-height-lg);
+
+ &[type='date']::-webkit-calendar-picker-indicator {
+ background-size: 120%;
+ }
+ &[type='time'] {
+ min-width: var(--ld-input-time-min-width-lg);
+
+ &::-webkit-calendar-picker-indicator {
+ background-size: 150%;
+ }
+ }
+ }
+
+ > input,
+ > textarea {
+ padding-top: var(--ld-input-padding-top-lg);
+ padding-right: var(--ld-input-padding-x-lg);
+ padding-bottom: var(--ld-input-padding-bottom-lg);
+ padding-left: var(--ld-input-padding-x-lg);
+ font: var(--ld-typo-body-l);
+ }
+
+ .ld-icon,
+ .ld-icon :where(svg) {
+ width: var(--ld-input-icon-size-lg);
+ height: var(--ld-input-icon-size-lg);
+ }
+
+ > ld-button,
+ > .ld-button {
+ &[mode='ghost'],
+ &.ld-button--ghost {
+ &:first-child {
+ margin-right: calc(-1 * var(--ld-input-padding-x-lg));
+ }
+
+ &:last-child {
+ margin-left: calc(-1 * var(--ld-input-padding-x-lg));
+ }
+ }
+
+ &:not([size='lg']):not(.ld-button--lg) {
+ &:first-child,
+ &:first-child > button,
+ &:last-child,
+ &:last-child > button {
+ border-radius: var(--ld-br-m);
+ }
+
+ &:first-child {
+ margin-left: 0.3125rem;
+ }
+
+ &:last-child {
+ margin-right: 0.3125rem;
+ }
+
+ .ld-icon,
+ .ld-icon :where(svg) {
+ width: var(--ld-input-icon-size-md);
+ height: var(--ld-input-icon-size-md);
+ }
}
}
}
@@ -225,7 +413,9 @@ ld-input {
&:focus-within {
.ld-theme-ocean &,
[class*='ld-theme'] .ld-theme-ocean & {
- box-shadow: inset 0 0 0 0.1rem var(--ld-col-rb-default);
+ &::before {
+ box-shadow: inset 0 0 0 0.1rem var(--ld-col-rb-default);
+ }
}
.ld-theme-solvent &,
.ld-theme-bubblegum &,
@@ -233,11 +423,15 @@ ld-input {
[class*='ld-theme'] .ld-theme-solvent &,
[class*='ld-theme'] .ld-theme-bubblegum &,
[class*='ld-theme'] .ld-theme-shake & {
- box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
+ &::before {
+ box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
+ }
}
.ld-theme-tea &,
[class*='ld-theme'] .ld-theme-tea & {
- box-shadow: inset 0 0 0 0.1rem var(--ld-col-rg-default);
+ &::before {
+ box-shadow: inset 0 0 0 0.1rem var(--ld-col-rg-default);
+ }
}
&.ld-input--dark {
@@ -255,7 +449,9 @@ ld-input {
> .ld-input:not(.ld-input--invalid):not([aria-disabled='true']):not([disabled]) {
@media (hover: hover) {
&:hover:not(:focus-within) {
- box-shadow: inset 0 0 0 0.1rem var(--ld-col-rblck2);
+ &::before {
+ box-shadow: inset 0 0 0 0.1rem var(--ld-col-rblck2);
+ }
}
}
}
@@ -268,9 +464,12 @@ ld-input,
&[aria-disabled='true'] {
&.ld-input,
.ld-input {
- box-shadow: inset 0 0 0 0.1rem var(--ld-col-rblck1);
color: var(--ld-col-rblck2);
background-color: var(--ld-input-transparent);
+
+ &::before {
+ box-shadow: inset 0 0 0 0.1rem var(--ld-col-rblck1);
+ }
}
input,
@@ -315,7 +514,9 @@ ld-input,
[class*='ld-theme']
:not([disabled]):not([aria-disabled='true']) {
> .ld-input--invalid:not([disabled]):not([aria-disabled='true']) {
- box-shadow: inset 0 0 0 0.1rem var(--ld-col-rr-default);
+ &::before {
+ box-shadow: inset 0 0 0 0.1rem var(--ld-col-rr-default);
+ }
> input,
> textarea {
@@ -335,7 +536,9 @@ ld-input,
/*@media (hover: hover) {
&:hover:not(:focus-within) {
- box-shadow: inset 0 0 0 0.1rem var(--ld-col-rr-hover);
+ &::before {
+ box-shadow: inset 0 0 0 0.1rem var(--ld-col-rr-hover);
+ }
}
}*/
@@ -371,8 +574,8 @@ ld-input,
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- right: var(--ld-input-padding-x);
- left: var(--ld-input-padding-x);
+ right: var(--ld-input-padding-x-md);
+ left: var(--ld-input-padding-x-md);
margin-right: 0;
[disabled] & {
diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
index 9f1bf8a4f5..59e903d96d 100644
--- a/src/liquid/components/ld-input/ld-input.tsx
+++ b/src/liquid/components/ld-input/ld-input.tsx
@@ -46,6 +46,9 @@ export class LdInput {
/** The input type. */
@Prop() type: string
+ /** Size of the input. */
+ @Prop() size?: 'sm' | 'lg'
+
/**
* Uses textarea instead of input internally. Setting this attribute to true
* disables the attribute type and both slots.
@@ -80,6 +83,7 @@ export class LdInput {
render() {
let cl = 'ld-input'
+ if (this.size) cl += ` ld-input--${this.size}`
if (this.tone) cl += ` ld-input--${this.tone}`
if (this.invalid) cl += ' ld-input--invalid'
diff --git a/src/liquid/components/ld-input/readme.md b/src/liquid/components/ld-input/readme.md
index 50988056da..df94d40bce 100644
--- a/src/liquid/components/ld-input/readme.md
+++ b/src/liquid/components/ld-input/readme.md
@@ -128,13 +128,25 @@ By default, the `ld-input` component is of [type `text`](https://developer.mozil
### Type date
{% example %}
+
+
+
+
+
+
+
+
+
+
+
+
{% endexample %}
### Type email
@@ -210,13 +222,25 @@ Triggers a telephone keypad in some devices with dynamic keypads.
### Type time
{% example %}
+
+
+
+
+
+
+
+
+
+
+
+
{% endexample %}
### Type url
@@ -247,6 +271,30 @@ The `multiline` attribute transforms the component to a textarea element instead
{% endexample %}
+### Size
+
+{% example %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endexample %}
+
### With label
{% example %}
@@ -382,6 +430,19 @@ You can use [slots](#slots) in order to add static or interactive elements, such
#### With icon
{% example %}
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -395,12 +456,61 @@ You can use [slots](#slots) in order to add static or interactive elements, such
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text
+
+
+
+
+
+
+
+
+
+ Text
+
+
+
+
+
+
+
+
+
+
+ Text
+
+
+
+
+
+
+
+ Text
+
+
+
+
+
+
@@ -441,8 +551,37 @@ You can use [slots](#slots) in order to add static or interactive elements, such
-