184 lines
4.6 KiB
JavaScript
184 lines
4.6 KiB
JavaScript
import {
|
|
form_control_styles_default
|
|
} from "./chunk.2VV6AF6A.js";
|
|
import {
|
|
component_styles_default
|
|
} from "./chunk.K23QWHWK.js";
|
|
import {
|
|
i
|
|
} from "./chunk.CXZZ2LVK.js";
|
|
|
|
// src/components/textarea/textarea.styles.ts
|
|
var textarea_styles_default = i`
|
|
${component_styles_default}
|
|
${form_control_styles_default}
|
|
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.textarea {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 100%;
|
|
font-family: var(--sl-input-font-family);
|
|
font-weight: var(--sl-input-font-weight);
|
|
line-height: var(--sl-line-height-normal);
|
|
letter-spacing: var(--sl-input-letter-spacing);
|
|
vertical-align: middle;
|
|
transition:
|
|
var(--sl-transition-fast) color,
|
|
var(--sl-transition-fast) border,
|
|
var(--sl-transition-fast) box-shadow,
|
|
var(--sl-transition-fast) background-color;
|
|
cursor: text;
|
|
}
|
|
|
|
/* Standard textareas */
|
|
.textarea--standard {
|
|
background-color: var(--sl-input-background-color);
|
|
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
|
}
|
|
|
|
.textarea--standard:hover:not(.textarea--disabled) {
|
|
background-color: var(--sl-input-background-color-hover);
|
|
border-color: var(--sl-input-border-color-hover);
|
|
}
|
|
.textarea--standard:hover:not(.textarea--disabled) .textarea__control {
|
|
color: var(--sl-input-color-hover);
|
|
}
|
|
|
|
.textarea--standard.textarea--focused:not(.textarea--disabled) {
|
|
background-color: var(--sl-input-background-color-focus);
|
|
border-color: var(--sl-input-border-color-focus);
|
|
color: var(--sl-input-color-focus);
|
|
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
|
|
}
|
|
|
|
.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
|
|
color: var(--sl-input-color-focus);
|
|
}
|
|
|
|
.textarea--standard.textarea--disabled {
|
|
background-color: var(--sl-input-background-color-disabled);
|
|
border-color: var(--sl-input-border-color-disabled);
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.textarea--standard.textarea--disabled .textarea__control {
|
|
color: var(--sl-input-color-disabled);
|
|
}
|
|
|
|
.textarea--standard.textarea--disabled .textarea__control::placeholder {
|
|
color: var(--sl-input-placeholder-color-disabled);
|
|
}
|
|
|
|
/* Filled textareas */
|
|
.textarea--filled {
|
|
border: none;
|
|
background-color: var(--sl-input-filled-background-color);
|
|
color: var(--sl-input-color);
|
|
}
|
|
|
|
.textarea--filled:hover:not(.textarea--disabled) {
|
|
background-color: var(--sl-input-filled-background-color-hover);
|
|
}
|
|
|
|
.textarea--filled.textarea--focused:not(.textarea--disabled) {
|
|
background-color: var(--sl-input-filled-background-color-focus);
|
|
outline: var(--sl-focus-ring);
|
|
outline-offset: var(--sl-focus-ring-offset);
|
|
}
|
|
|
|
.textarea--filled.textarea--disabled {
|
|
background-color: var(--sl-input-filled-background-color-disabled);
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.textarea__control {
|
|
flex: 1 1 auto;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
line-height: 1.4;
|
|
color: var(--sl-input-color);
|
|
border: none;
|
|
background: none;
|
|
box-shadow: none;
|
|
cursor: inherit;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.textarea__control::-webkit-search-decoration,
|
|
.textarea__control::-webkit-search-cancel-button,
|
|
.textarea__control::-webkit-search-results-button,
|
|
.textarea__control::-webkit-search-results-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.textarea__control::placeholder {
|
|
color: var(--sl-input-placeholder-color);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.textarea__control:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/*
|
|
* Size modifiers
|
|
*/
|
|
|
|
.textarea--small {
|
|
border-radius: var(--sl-input-border-radius-small);
|
|
font-size: var(--sl-input-font-size-small);
|
|
}
|
|
|
|
.textarea--small .textarea__control {
|
|
padding: 0.5em var(--sl-input-spacing-small);
|
|
}
|
|
|
|
.textarea--medium {
|
|
border-radius: var(--sl-input-border-radius-medium);
|
|
font-size: var(--sl-input-font-size-medium);
|
|
}
|
|
|
|
.textarea--medium .textarea__control {
|
|
padding: 0.5em var(--sl-input-spacing-medium);
|
|
}
|
|
|
|
.textarea--large {
|
|
border-radius: var(--sl-input-border-radius-large);
|
|
font-size: var(--sl-input-font-size-large);
|
|
}
|
|
|
|
.textarea--large .textarea__control {
|
|
padding: 0.5em var(--sl-input-spacing-large);
|
|
}
|
|
|
|
/*
|
|
* Resize types
|
|
*/
|
|
|
|
.textarea--resize-none .textarea__control {
|
|
resize: none;
|
|
}
|
|
|
|
.textarea--resize-vertical .textarea__control {
|
|
resize: vertical;
|
|
}
|
|
|
|
.textarea--resize-auto .textarea__control {
|
|
height: auto;
|
|
resize: none;
|
|
overflow-y: hidden;
|
|
}
|
|
`;
|
|
|
|
export {
|
|
textarea_styles_default
|
|
};
|