Archived
Template
1
Fork 0
This repository has been archived on 2024-09-04. You can view files and clone it, but cannot push or open issues or pull requests.
Contour/public/@shoelace-style/shoelace/cdn/chunks/chunk.5EPKBUIZ.js

185 lines
4.6 KiB
JavaScript
Raw Permalink Normal View History

2024-01-30 10:59:28 -05:00
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
};