UNPKG

@shopware-ag/meteor-component-library

Version:

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

62 lines (60 loc) 1.73 kB
.mt-search { &[data-v-7a3a41ec] { background: var(--color-background-primary-default); border: 1px solid var(--color-border-primary-default); border-radius: var(--border-radius-xs); color: var(--color-text-primary-default); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: var(--font-line-height-xs); overflow: hidden; display: flex; align-items: center; } &[data-v-7a3a41ec]:focus-within { outline: var(--scale-size-2) solid var(--color-border-brand-default); outline-offset: var(--scale-size-2); } } .mt-search--size-default[data-v-7a3a41ec] { padding: var(--scale-size-12) var(--scale-size-16); } .mt-search--size-small[data-v-7a3a41ec] { padding: var(--scale-size-4) var(--scale-size-16); } .mt-search__input { &[data-v-7a3a41ec] { display: block; width: 100%; border: none; background: transparent; font-size: var(--font-size-xs); font-family: var(--font-size-body); line-height: var(--font-line-height-xs); color: var(--color-text-primary-default); outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; } &[data-v-7a3a41ec]::-webkit-search-cancel-button, &[data-v-7a3a41ec]::-webkit-search-decoration, &[data-v-7a3a41ec]::-webkit-search-results-button, &[data-v-7a3a41ec]::-webkit-search-results-decoration { display: none; } &[data-v-7a3a41ec]::placeholder { color: var(--color-text-secondary-default); } &:disabled { &[data-v-7a3a41ec] { color: var(--color-text-primary-disabled); } &[data-v-7a3a41ec]::placeholder { color: var(--color-text-secondary-default); } } } .mt-search--disabled[data-v-7a3a41ec] { background-color: var(--color-background-tertiary-default); }