@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
2 lines (1 loc) • 14.9 kB
CSS
:where(.ds-textarea_textarea_1mper_1){display:block;padding-inline-start:15px;padding-inline-end:15px;min-height:3rem;height:3rem}:where(.ds-textarea_textarea--small_1mper_9){padding-inline-start:7px;padding-inline-end:7px}.ds-textarea_textarea_1mper_1{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-size:1rem;line-height:1.25;font-size-adjust:.414;font-weight:400}.ds-textarea_textarea_1mper_1:focus{outline:1px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors:active){.ds-textarea_textarea_1mper_1:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-textarea_textarea_1mper_1:focus{outline:revert;outline-offset:revert}.ds-textarea_textarea_1mper_1:focus-visible{outline:1px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors:active){.ds-textarea_textarea_1mper_1:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-textarea_textarea_1mper_1{transition:background-color var(--ds-animation-duration, .1s) linear,color var(--ds-animation-duration, .1s) linear}@media(prefers-reduced-motion:reduce){.ds-textarea_textarea_1mper_1{transition-duration:0ms}}@media(hover:hover){.ds-textarea_textarea_1mper_1:hover{background:#0000001a}}@media screen and (hover:hover)and (forced-colors:active){.ds-textarea_textarea_1mper_1:hover{border-color:Highlight}}.ds-textarea_textarea_1mper_1{background:transparent;border:1px solid #252525;border-radius:0;color:#252525;width:100%}.ds-textarea_textarea_1mper_1[readonly]{background-color:#ededed;border-color:transparent;color:#252525}.ds-textarea_textarea_1mper_1[readonly]:focus{outline:2px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors:active){.ds-textarea_textarea_1mper_1[readonly]:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-textarea_textarea_1mper_1[readonly]:focus{outline:revert;outline-offset:revert}.ds-textarea_textarea_1mper_1[readonly]:focus-visible{outline:2px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors:active){.ds-textarea_textarea_1mper_1[readonly]:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-textarea_textarea_1mper_1:disabled{background-color:transparent;border-color:#00000080;color:#00000080;cursor:not-allowed}@media screen and (forced-colors:active){.ds-textarea_textarea_1mper_1:disabled{border-color:GrayText;color:GrayText}}.ds-textarea_textarea_1mper_1::-webkit-placeholder,.ds-textarea_textarea_1mper_1::placeholder{color:#666;opacity:1}.ds-textarea_textarea--invalid_1mper_127{border-color:#d43b3b;outline-color:#d43b3b}.ds-textarea_textarea--invalid_1mper_127:active,.ds-textarea_textarea--invalid_1mper_127:focus,.ds-textarea_textarea--invalid_1mper_127:focus-visible{border-color:#252525}.ds-textarea_textarea--small_1mper_9{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-size:.875rem;line-height:1.14;font-size-adjust:.414;font-weight:400}.ds-textarea_textarea--dark_1mper_145{border-color:#f8f8f8;color:#fff}.ds-textarea_textarea--dark_1mper_145:focus{outline:1px solid;outline-color:#fff;outline-offset:0}@media screen and (forced-colors:active){.ds-textarea_textarea--dark_1mper_145:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-textarea_textarea--dark_1mper_145:focus{outline:revert;outline-offset:revert}.ds-textarea_textarea--dark_1mper_145:focus-visible{outline:1px solid;outline-color:#fff;outline-offset:0}@media screen and (forced-colors:active){.ds-textarea_textarea--dark_1mper_145:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media(hover:hover){.ds-textarea_textarea--dark_1mper_145:hover{background:#ffffff26}}@media screen and (hover:hover)and (forced-colors:active){.ds-textarea_textarea--dark_1mper_145:hover{border-color:Highlight}}.ds-textarea_textarea--dark_1mper_145[readonly]{background-color:#252525;border-color:transparent;color:#fff}.ds-textarea_textarea--dark_1mper_145[readonly]:focus{outline:2px solid;outline-color:#fff;outline-offset:0}@media screen and (forced-colors:active){.ds-textarea_textarea--dark_1mper_145[readonly]:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-textarea_textarea--dark_1mper_145[readonly]:focus{outline:revert;outline-offset:revert}.ds-textarea_textarea--dark_1mper_145[readonly]:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:0}@media screen and (forced-colors:active){.ds-textarea_textarea--dark_1mper_145[readonly]:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-textarea_textarea--dark_1mper_145:disabled{background-color:transparent;border-color:#ffffff80;color:#ffffff80}@media screen and (forced-colors:active){.ds-textarea_textarea--dark_1mper_145:disabled{border-color:GrayText;color:GrayText}}.ds-textarea_textarea--dark_1mper_145::-webkit-placeholder,.ds-textarea_textarea--dark_1mper_145::placeholder{color:#b1b1b1}.ds-textarea_textarea--dark_1mper_145.ds-textarea_textarea--invalid_1mper_127{border-color:#d43b3b;outline-color:#d43b3b}.ds-textarea_textarea--dark_1mper_145.ds-textarea_textarea--invalid_1mper_127:active,.ds-textarea_textarea--dark_1mper_145.ds-textarea_textarea--invalid_1mper_127:focus,.ds-textarea_textarea--dark_1mper_145.ds-textarea_textarea--invalid_1mper_127:focus-visible{border-color:#f8f8f8}.ds-textarea_textarea--dark_1mper_145.ds-textarea_textarea--is-ready_1mper_241:not(:disabled){color:#fff}.ds-textarea_textarea--dark_1mper_145.ds-textarea_textarea--is-ready_1mper_241:not(:disabled)::placeholder{color:#b1b1b1}.ds-textarea_textarea--dark_1mper_145.ds-textarea_textarea--is-ready_1mper_241:disabled{color:#ffffff80}.ds-textarea_textarea--dark_1mper_145.ds-textarea_textarea--is-ready_1mper_241:disabled::placeholder{color:#b1b1b1}.ds-textarea_textarea_1mper_1{padding-block-start:15px;padding-block-end:15px;min-height:5.875rem;resize:vertical}.ds-textarea_textarea--resize-auto_1mper_259{resize:none;overflow-y:hidden}.ds-textarea_textarea--small_1mper_9{padding-block-start:8px;padding-block-end:8px;min-height:4.875rem}.ds-textarea_root_1mper_269:has(.ds-textarea_hint_1mper_269) .ds-textarea_label-wrapper_1mper_269{margin-block-end:2px}.ds-textarea_affix_1mper_273{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-size:1rem;line-height:1.25;font-size-adjust:.414;font-weight:400;display:flex;align-items:center;padding-inline-start:15px;padding-inline-end:15px;pointer-events:none;color:#666;background-color:#f8f8f8;z-index:1;height:calc(100% - 2px);width:calc(100% - 1px)}.ds-textarea_affix--small_1mper_294{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-size:.875rem;line-height:1.14;font-size-adjust:.414;font-weight:400;padding-inline-start:7px;padding-inline-end:7px}.ds-textarea_affix_1mper_273.ds-textarea_prefix_1mper_307{margin-inline-start:1px;border-right:1px solid #B1B1B1;grid-area:1/1/2/2;order:1}.ds-textarea_affix_1mper_273.ds-textarea_suffix_1mper_313{margin-inline-end:1px;border-left:1px solid #B1B1B1;grid-area:1/3/2/4;order:1}.ds-textarea_affix--disabled_1mper_319{color:#00000080}@media screen and (forced-colors:active){.ds-textarea_affix--disabled_1mper_319{color:GrayText}}.ds-textarea_affix--disabled_1mper_319.ds-textarea_prefix_1mper_307,.ds-textarea_affix--disabled_1mper_319.ds-textarea_suffix_1mper_313{border-color:#0000001a}@media screen and (forced-colors:active){.ds-textarea_affix--disabled_1mper_319.ds-textarea_prefix_1mper_307,.ds-textarea_affix--disabled_1mper_319.ds-textarea_suffix_1mper_313{border-color:GrayText}}.ds-textarea_affix--readonly_1mper_335{background-color:#ededed;position:relative}.ds-textarea_affix--readonly_1mper_335.ds-textarea_prefix_1mper_307,.ds-textarea_affix--readonly_1mper_335.ds-textarea_suffix_1mper_313{border-color:transparent}.ds-textarea_affix--readonly_1mper_335.ds-textarea_prefix_1mper_307:after{content:"";position:absolute;right:-1px;top:-1px;bottom:-1px;width:1px;background-color:#b1b1b1}@media screen and (forced-colors:active){.ds-textarea_affix--readonly_1mper_335.ds-textarea_prefix_1mper_307:after{background-color:transparent}}.ds-textarea_affix--readonly_1mper_335.ds-textarea_suffix_1mper_313:before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:1px;background-color:#b1b1b1}@media screen and (forced-colors:active){.ds-textarea_affix--readonly_1mper_335.ds-textarea_suffix_1mper_313:before{background-color:transparent}}.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370{color:#b1b1b1;background-color:#252525}@media screen and (forced-colors:active){.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370{color:CanvasText;background-color:Canvas}}.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_prefix_1mper_307{border-right-color:#666}@media screen and (forced-colors:active){.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_prefix_1mper_307{border-right-color:CanvasText}}.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_suffix_1mper_313{border-left-color:#666}@media screen and (forced-colors:active){.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_suffix_1mper_313{border-left-color:CanvasText}}.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--disabled_1mper_319{color:#ffffff80}@media screen and (forced-colors:active){.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--disabled_1mper_319{color:GrayText}}.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--disabled_1mper_319.ds-textarea_prefix_1mper_307,.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--disabled_1mper_319.ds-textarea_suffix_1mper_313{border-color:#ffffff26}@media screen and (forced-colors:active){.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--disabled_1mper_319.ds-textarea_prefix_1mper_307,.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--disabled_1mper_319.ds-textarea_suffix_1mper_313{border-color:GrayText}}.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--readonly_1mper_335{background-color:#252525}.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--readonly_1mper_335.ds-textarea_prefix_1mper_307:after{background-color:#666}@media screen and (forced-colors:active){.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--readonly_1mper_335.ds-textarea_prefix_1mper_307:after{background-color:transparent}}.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--readonly_1mper_335.ds-textarea_suffix_1mper_313:before{background-color:#666}@media screen and (forced-colors:active){.ds-textarea_affix_1mper_273.ds-textarea_affix--dark_1mper_370.ds-textarea_affix--readonly_1mper_335.ds-textarea_suffix_1mper_313:before{background-color:transparent}}.ds-textarea_leading-icon_1mper_432{grid-area:1/1/2/2;order:1;margin-inline-start:16px;fill:#666}@media screen and (forced-colors:active){.ds-textarea_leading-icon_1mper_432{background-color:Canvas;fill:CanvasText}}.ds-textarea_leading-icon--small_1mper_444{margin-inline-start:8px}.ds-textarea_leading-icon--disabled_1mper_447{fill:#00000080}@media screen and (forced-colors:active){.ds-textarea_leading-icon--disabled_1mper_447{fill:GrayText}}.ds-textarea_leading-icon--dark_1mper_455{fill:#b1b1b1}@media screen and (forced-colors:active){.ds-textarea_leading-icon--dark_1mper_455{fill:CanvasText}}.ds-textarea_leading-icon--dark_1mper_455.ds-textarea_leading-icon--disabled_1mper_447{fill:#ffffff80}@media screen and (forced-colors:active){.ds-textarea_leading-icon--dark_1mper_455.ds-textarea_leading-icon--disabled_1mper_447{fill:GrayText}}.ds-textarea_action-button_1mper_472{grid-area:1/4/2/5}.ds-textarea_label_1mper_269{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-size:1rem;line-height:1.25;font-size-adjust:.414;font-weight:400;display:block;max-width:fit-content;margin-block:2px}@media screen and (forced-colors:active){.ds-textarea_label--disabled_1mper_491{color:GrayText}}.ds-textarea_label--dark_1mper_495{color:#fff}@media screen and (forced-colors:active){.ds-textarea_label--dark_1mper_495.ds-textarea_label--disabled_1mper_491{color:GrayText}}.ds-textarea_label-wrapper_1mper_269{display:flex;align-items:center;gap:4px;margin-block-end:8px;min-height:1.5rem}.ds-textarea_label-wrapper--hidden_1mper_511{border:0;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;text-indent:-999999px;white-space:nowrap}.ds-textarea_hint_1mper_269{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-size:.875rem;line-height:1.14;font-size-adjust:.414;font-weight:400;display:block;max-width:34em;margin-block-end:8px}.ds-textarea_hint--dark_1mper_538{color:#fff}.ds-textarea_feedback_1mper_542{margin-block-start:8px}.ds-textarea_footer_1mper_546{display:flex;justify-content:flex-end;margin-block-start:8px}.ds-textarea_footer--has-system-feedback_1mper_551{gap:24px;justify-content:space-between}.ds-textarea_feedback_1mper_542{margin-block-start:0}.ds-textarea_char-count_1mper_560{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-size:.875rem;line-height:1.14;font-size-adjust:.414;font-weight:400;color:#252525}.ds-textarea_char-count--dark_1mper_572{color:#fff}.ds-textarea_char-count-announcer_1mper_576{border:0;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;text-indent:-999999px;white-space:nowrap}