From 530f2aaabbc77e51de44783148746b4949c42605 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Mon, 12 Jul 2021 21:29:56 +0200 Subject: [PATCH] feat(ld-input): size prop --- .../docs-search/assets/magnifier.svg | 1 + .../components/docs-search/docs-search.css | 29 ++ .../components/docs-search/docs-search.tsx | 18 +- src/liquid/components/ld-button/ld-button.css | 72 +-- src/liquid/components/ld-button/readme.md | 2 +- src/liquid/components/ld-icon/ld-icon.css | 22 +- src/liquid/components/ld-input/ld-input.css | 253 +++++++++- src/liquid/components/ld-input/ld-input.tsx | 4 + src/liquid/components/ld-input/readme.md | 456 ++++++++++++++++-- 9 files changed, 734 insertions(+), 123 deletions(-) create mode 100644 src/docs/components/docs-search/assets/magnifier.svg 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.searchInput = el as HTMLLdInputElement)} type="search" spellcheck={false} - > + > + +
    {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 {% 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
-
- +
+ + + + Text + + + + +
+ +
+ + + Text + + + + + +
+ +
+ + + Text + + + + + Text @@ -458,62 +597,253 @@ You can use [slots](#slots) in order to add static or interactive elements, such #### With button {% example %} + + + + + + + + + Submit + + + - - + + - - + + Submit + + + + + + + + + + + + Submit + + + + + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+{% endexample %} + +#### With inset button + +{% example %} + + + Submit - + + + + + + + + Submit + + + + + +
+ + +
+ +
+ + +
+ +
+ + +
+{% endexample %} + +#### With ghost button + +{% example %} + + - + + + + - - + + + + + - - Submit + + - - Submit + + - - + + + + + - - - Submit + + + + + + + + + + + + + + + + + + -
+
-
-
-
-
- -
- - +
+ -
-
- -
-
- - + +
+ +
+ + +