@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/).
63 lines (61 loc) • 1.93 kB
CSS
.mt-textarea[data-v-59f3eb48] {
display: grid;
grid-template-areas:
"label help-text"
"textarea textarea"
"error error"
"hint max-length";
grid-template-columns: auto auto;
justify-content: space-between;
}
.mt-textarea__textarea {
&[data-v-59f3eb48] {
resize: vertical;
width: 100%;
border: 1px solid var(--color-border-primary-default);
line-height: var(--font-line-height-xs);
font-family: var(--font-family-body);
font-size: var(--font-size-xs);
color: var(--color-text-primary-default);
min-height: 125px;
max-height: 300px;
border-radius: var(--border-radius-xs);
padding: var(--scale-size-12) var(--scale-size-16);
grid-area: textarea;
background-color: var(--color-background-primary-default);
outline: none;
}
&[data-v-59f3eb48]:focus-visible:not(.mt-textarea__textarea--error) {
outline: var(--scale-size-2) solid var(--color-border-brand-default);
outline-offset: var(--scale-size-2);
}
&[data-v-59f3eb48]::placeholder {
color: var(--color-text-secondary-default);
}
&[data-v-59f3eb48]:disabled {
color: var(--color-text-primary-disabled);
background-color: var(--color-background-tertiary-default);
cursor: not-allowed;
}
}
.mt-textarea__textarea--error[data-v-59f3eb48] {
border-color: var(--color-border-critical-default);
background-color: var(--color-background-critical-default);
}
.mt-textarea__hint[data-v-59f3eb48] {
grid-area: hint;
font-family: var(--font-family-body);
font-size: var(--font-size-xs);
line-height: var(--font-line-height-xs);
color: var(--color-text-secondary-default);
margin-top: var(--scale-size-4);
}
.mt-textarea__max-length[data-v-59f3eb48] {
grid-area: max-length;
justify-self: end;
font-family: var(--font-family-body);
font-size: var(--font-size-xs);
line-height: var(--font-line-height-xs);
color: var(--color-text-secondary-default);
margin-top: var(--scale-size-4);
}