mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
149 lines
4.0 KiB
SCSS
149 lines
4.0 KiB
SCSS
@import 'component';
|
|
@import 'form-control-label';
|
|
@import 'form-control-help-text';
|
|
|
|
: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);
|
|
background-color: var(--sl-input-background-color);
|
|
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
|
vertical-align: middle;
|
|
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
|
|
cursor: text;
|
|
|
|
&:hover:not(.textarea--disabled) {
|
|
background-color: var(--sl-input-background-color-hover);
|
|
border-color: var(--sl-input-border-color-hover);
|
|
color: var(--sl-input-color-hover);
|
|
}
|
|
|
|
&.textarea--focused:not(.textarea--disabled) {
|
|
background-color: var(--sl-input-background-color-focus);
|
|
border-color: var(--sl-input-border-color-focus);
|
|
box-shadow: var(--sl-focus-ring-box-shadow);
|
|
color: var(--sl-input-color-focus);
|
|
}
|
|
|
|
&.textarea--disabled {
|
|
background-color: var(--sl-input-background-color-disabled);
|
|
border-color: var(--sl-input-border-color-disabled);
|
|
color: var(--sl-input-color-disabled);
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
|
|
.textarea__control {
|
|
&::placeholder {
|
|
color: var(--sl-input-placeholder-color-disabled);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.textarea--valid:not(.textarea--disabled) {
|
|
color: var(--sl-input-color-valid);
|
|
border-color: var(--sl-input-border-color-valid);
|
|
|
|
&.textarea--focused {
|
|
box-shadow: 0 0 0 var(--sl-focus-ring-width)
|
|
hsla(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%, var(--sl-focus-ring-alpha));
|
|
border-color: var(--sl-input-border-color-valid);
|
|
}
|
|
}
|
|
|
|
&.textarea--invalid:not(.textarea--disabled) {
|
|
border-color: var(--sl-color-danger-50);
|
|
|
|
&.textarea--focused {
|
|
box-shadow: 0 0 0 var(--sl-focus-ring-width)
|
|
hsla(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%, var(--sl-focus-ring-alpha));
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
&::-webkit-search-decoration,
|
|
&::-webkit-search-cancel-button,
|
|
&::-webkit-search-results-button,
|
|
&::-webkit-search-results-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--sl-input-placeholder-color);
|
|
user-select: none;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
// Size modifiers
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
.textarea--small {
|
|
border-radius: var(--sl-input-border-radius-small);
|
|
font-size: var(--sl-input-font-size-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__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__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;
|
|
}
|