@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
2 lines (1 loc) • 17.1 kB
CSS
.ds-select_root_1pc5m_1:has(.ds-select_hint_1pc5m_1) .ds-select_label-wrapper_1pc5m_1{margin-block-end:2px}.ds-select_wrapper_1pc5m_5{display:grid;grid-template-columns:max-content 1fr max-content max-content;align-items:center}.ds-select_affix_1pc5m_11{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-select_affix--small_1pc5m_32{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-select_affix_1pc5m_11.ds-select_prefix_1pc5m_45{margin-inline-start:1px;border-right:1px solid #B1B1B1;grid-area:1/1/2/2;order:1}.ds-select_affix_1pc5m_11.ds-select_suffix_1pc5m_51{margin-inline-end:1px;border-left:1px solid #B1B1B1;grid-area:1/3/2/4;order:1}.ds-select_affix--disabled_1pc5m_57{color:#00000080}@media screen and (forced-colors:active){.ds-select_affix--disabled_1pc5m_57{color:GrayText}}.ds-select_affix--disabled_1pc5m_57.ds-select_prefix_1pc5m_45,.ds-select_affix--disabled_1pc5m_57.ds-select_suffix_1pc5m_51{border-color:#0000001a}@media screen and (forced-colors:active){.ds-select_affix--disabled_1pc5m_57.ds-select_prefix_1pc5m_45,.ds-select_affix--disabled_1pc5m_57.ds-select_suffix_1pc5m_51{border-color:GrayText}}.ds-select_affix--readonly_1pc5m_73{background-color:#ededed;position:relative}.ds-select_affix--readonly_1pc5m_73.ds-select_prefix_1pc5m_45,.ds-select_affix--readonly_1pc5m_73.ds-select_suffix_1pc5m_51{border-color:transparent}.ds-select_affix--readonly_1pc5m_73.ds-select_prefix_1pc5m_45:after{content:"";position:absolute;right:-1px;top:-1px;bottom:-1px;width:1px;background-color:#b1b1b1}@media screen and (forced-colors:active){.ds-select_affix--readonly_1pc5m_73.ds-select_prefix_1pc5m_45:after{background-color:transparent}}.ds-select_affix--readonly_1pc5m_73.ds-select_suffix_1pc5m_51:before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:1px;background-color:#b1b1b1}@media screen and (forced-colors:active){.ds-select_affix--readonly_1pc5m_73.ds-select_suffix_1pc5m_51:before{background-color:transparent}}.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108{color:#b1b1b1;background-color:#252525}@media screen and (forced-colors:active){.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108{color:CanvasText;background-color:Canvas}}.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_prefix_1pc5m_45{border-right-color:#666}@media screen and (forced-colors:active){.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_prefix_1pc5m_45{border-right-color:CanvasText}}.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_suffix_1pc5m_51{border-left-color:#666}@media screen and (forced-colors:active){.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_suffix_1pc5m_51{border-left-color:CanvasText}}.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--disabled_1pc5m_57{color:#ffffff80}@media screen and (forced-colors:active){.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--disabled_1pc5m_57{color:GrayText}}.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--disabled_1pc5m_57.ds-select_prefix_1pc5m_45,.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--disabled_1pc5m_57.ds-select_suffix_1pc5m_51{border-color:#ffffff26}@media screen and (forced-colors:active){.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--disabled_1pc5m_57.ds-select_prefix_1pc5m_45,.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--disabled_1pc5m_57.ds-select_suffix_1pc5m_51{border-color:GrayText}}.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--readonly_1pc5m_73{background-color:#252525}.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--readonly_1pc5m_73.ds-select_prefix_1pc5m_45:after{background-color:#666}@media screen and (forced-colors:active){.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--readonly_1pc5m_73.ds-select_prefix_1pc5m_45:after{background-color:transparent}}.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--readonly_1pc5m_73.ds-select_suffix_1pc5m_51:before{background-color:#666}@media screen and (forced-colors:active){.ds-select_affix_1pc5m_11.ds-select_affix--dark_1pc5m_108.ds-select_affix--readonly_1pc5m_73.ds-select_suffix_1pc5m_51:before{background-color:transparent}}.ds-select_action-button_1pc5m_170{grid-area:1/4/2/5}.ds-select_label_1pc5m_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;display:block;max-width:fit-content;margin-block:2px}@media screen and (forced-colors:active){.ds-select_label--disabled_1pc5m_189{color:GrayText}}.ds-select_label--dark_1pc5m_193{color:#fff}@media screen and (forced-colors:active){.ds-select_label--dark_1pc5m_193.ds-select_label--disabled_1pc5m_189{color:GrayText}}.ds-select_label-wrapper_1pc5m_1{display:flex;align-items:center;gap:4px;margin-block-end:8px;min-height:1.5rem}.ds-select_label-wrapper--hidden_1pc5m_209{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-select_hint_1pc5m_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:.875rem;line-height:1.14;font-size-adjust:.414;font-weight:400;display:block;max-width:34em;margin-block-end:8px}.ds-select_hint--dark_1pc5m_236{color:#fff}.ds-select_feedback_1pc5m_240{margin-block-start:8px}.ds-select_select-wrapper_1pc5m_244{display:grid;grid-template-columns:1fr max-content;align-items:center}:where(.ds-select_select_1pc5m_244){display:block;padding-inline-start:15px;padding-inline-end:15px;min-height:3rem;height:3rem}:where(.ds-select_select--small_1pc5m_258){padding-inline-start:7px;padding-inline-end:7px}.ds-select_select_1pc5m_244{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-select_select_1pc5m_244:focus{outline:1px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors:active){.ds-select_select_1pc5m_244:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-select_select_1pc5m_244:focus{outline:revert;outline-offset:revert}.ds-select_select_1pc5m_244:focus-visible{outline:1px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors:active){.ds-select_select_1pc5m_244:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-select_select_1pc5m_244{transition:background-color var(--ds-animation-duration, .1s) linear,color var(--ds-animation-duration, .1s) linear}@media(prefers-reduced-motion:reduce){.ds-select_select_1pc5m_244{transition-duration:0ms}}@media(hover:hover){.ds-select_select_1pc5m_244:hover{background:#0000001a}}@media screen and (hover:hover)and (forced-colors:active){.ds-select_select_1pc5m_244:hover{border-color:Highlight}}.ds-select_select_1pc5m_244{background:transparent;border:1px solid #252525;border-radius:0;color:#252525;width:100%}.ds-select_select_1pc5m_244[readonly]{background-color:#ededed;border-color:transparent;color:#252525}.ds-select_select_1pc5m_244[readonly]:focus{outline:2px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors:active){.ds-select_select_1pc5m_244[readonly]:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-select_select_1pc5m_244[readonly]:focus{outline:revert;outline-offset:revert}.ds-select_select_1pc5m_244[readonly]:focus-visible{outline:2px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors:active){.ds-select_select_1pc5m_244[readonly]:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-select_select_1pc5m_244:disabled{background-color:transparent;border-color:#00000080;color:#00000080;cursor:not-allowed}@media screen and (forced-colors:active){.ds-select_select_1pc5m_244:disabled{border-color:GrayText;color:GrayText}}.ds-select_select_1pc5m_244::-webkit-placeholder,.ds-select_select_1pc5m_244::placeholder{color:#666;opacity:1}.ds-select_select--invalid_1pc5m_376{border-color:#d43b3b;outline-color:#d43b3b}.ds-select_select--invalid_1pc5m_376:active,.ds-select_select--invalid_1pc5m_376:focus,.ds-select_select--invalid_1pc5m_376:focus-visible{border-color:#252525}.ds-select_select--small_1pc5m_258{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-select_select--dark_1pc5m_394{border-color:#f8f8f8;color:#fff}.ds-select_select--dark_1pc5m_394:focus{outline:1px solid;outline-color:#fff;outline-offset:0}@media screen and (forced-colors:active){.ds-select_select--dark_1pc5m_394:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-select_select--dark_1pc5m_394:focus{outline:revert;outline-offset:revert}.ds-select_select--dark_1pc5m_394:focus-visible{outline:1px solid;outline-color:#fff;outline-offset:0}@media screen and (forced-colors:active){.ds-select_select--dark_1pc5m_394:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media(hover:hover){.ds-select_select--dark_1pc5m_394:hover{background:#ffffff26}}@media screen and (hover:hover)and (forced-colors:active){.ds-select_select--dark_1pc5m_394:hover{border-color:Highlight}}.ds-select_select--dark_1pc5m_394[readonly]{background-color:#252525;border-color:transparent;color:#fff}.ds-select_select--dark_1pc5m_394[readonly]:focus{outline:2px solid;outline-color:#fff;outline-offset:0}@media screen and (forced-colors:active){.ds-select_select--dark_1pc5m_394[readonly]:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-select_select--dark_1pc5m_394[readonly]:focus{outline:revert;outline-offset:revert}.ds-select_select--dark_1pc5m_394[readonly]:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:0}@media screen and (forced-colors:active){.ds-select_select--dark_1pc5m_394[readonly]:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-select_select--dark_1pc5m_394:disabled{background-color:transparent;border-color:#ffffff80;color:#ffffff80}@media screen and (forced-colors:active){.ds-select_select--dark_1pc5m_394:disabled{border-color:GrayText;color:GrayText}}.ds-select_select--dark_1pc5m_394::-webkit-placeholder,.ds-select_select--dark_1pc5m_394::placeholder{color:#b1b1b1}.ds-select_select--dark_1pc5m_394.ds-select_select--invalid_1pc5m_376{border-color:#d43b3b;outline-color:#d43b3b}.ds-select_select--dark_1pc5m_394.ds-select_select--invalid_1pc5m_376:active,.ds-select_select--dark_1pc5m_394.ds-select_select--invalid_1pc5m_376:focus,.ds-select_select--dark_1pc5m_394.ds-select_select--invalid_1pc5m_376:focus-visible{border-color:#f8f8f8}.ds-select_select--dark_1pc5m_394.ds-select_select--is-ready_1pc5m_490:not(:disabled){color:#fff}.ds-select_select--dark_1pc5m_394.ds-select_select--is-ready_1pc5m_490:not(:disabled)::placeholder{color:#b1b1b1}.ds-select_select--dark_1pc5m_394.ds-select_select--is-ready_1pc5m_490:disabled{color:#ffffff80}.ds-select_select--dark_1pc5m_394.ds-select_select--is-ready_1pc5m_490:disabled::placeholder{color:#b1b1b1}.ds-select_select_1pc5m_244{min-height:3rem;height:3rem;inline-size:100%;grid-area:1/1/2/5}.ds-select_select_1pc5m_244::-webkit-outer-spin-button,.ds-select_select_1pc5m_244::-webkit-inner-spin-button,.ds-select_select_1pc5m_244::-webkit-search-decoration,.ds-select_select_1pc5m_244::-webkit-search-cancel-button,.ds-select_select_1pc5m_244::-webkit-calendar-picker-indicator{display:none;appearance:none;-webkit-appearance:none}.ds-select_select_1pc5m_244::-webkit-date-and-time-value{text-align:left}.ds-select_select_1pc5m_244:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]){display:flex;align-items:center;min-width:-webkit-fill-available;appearance:none;-webkit-appearance:none}.ds-select_select_1pc5m_244[type=search]{appearance:none;-webkit-appearance:none}.ds-select_select_1pc5m_244[type=range]{accent-color:#E9640C}.ds-select_select_1pc5m_244[type=number]{-moz-appearance:textfield;appearance:textfield}.ds-select_select--small_1pc5m_258{min-height:2rem;height:2rem}.ds-select_select--small_1pc5m_258.ds-select_input--has-leading-icon_1pc5m_542{padding-inline-start:calc(16px + 1rem)}.ds-select_select--small_1pc5m_258.ds-select_input--has-action-button_1pc5m_545{padding-inline-end:calc(2rem + 8px)}.ds-select_select--small_1pc5m_258.ds-select_input--has-second-action-button_1pc5m_548{padding-inline-end:calc(4rem + 8px)}.ds-select_select--has-leading-icon_1pc5m_551{padding-inline-start:calc(32px + 1rem)}.ds-select_select--has-action-button_1pc5m_554{padding-inline-end:calc(3rem + 16px)}.ds-select_select--has-second-action-button_1pc5m_557{padding-inline-end:calc(6rem + 16px)}.ds-select_select--has-affix_1pc5m_560{color:#0000}.ds-select_select--has-affix_1pc5m_560::placeholder{color:#0000}.ds-select_select--has-affix_1pc5m_560::placeholder{transition:color var(--ds-animation-duration, .1s) linear}@media(prefers-reduced-motion:reduce){.ds-select_select--has-affix_1pc5m_560::placeholder{transition-duration:0ms}}.ds-select_select--is-ready_1pc5m_490:not(:disabled){color:#252525}.ds-select_select--is-ready_1pc5m_490:not(:disabled)::placeholder{color:#666}.ds-select_select--is-ready_1pc5m_490:disabled{color:#00000080}.ds-select_select--is-ready_1pc5m_490:disabled::placeholder{color:#666}.ds-select_select_1pc5m_244{appearance:none;padding-inline-end:48px;text-overflow:ellipsis}.ds-select_select--small_1pc5m_258{padding-inline-end:32px}.ds-select_select_1pc5m_244:disabled{opacity:1}.ds-select_select--placeholder_1pc5m_598{color:#666}@media screen and (forced-colors:active){.ds-select_select--placeholder_1pc5m_598{color:GrayText}}.ds-select_select--dark_1pc5m_394.ds-select_select--placeholder_1pc5m_598{color:#b1b1b1}@media screen and (forced-colors:active){.ds-select_select--dark_1pc5m_394.ds-select_select--placeholder_1pc5m_598{color:GrayText}}.ds-select_select_1pc5m_244 option{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-select_select_1pc5m_244 option,.ds-select_select_1pc5m_244 optgroup{background-color:#fff;color:#252525;font-style:normal}.ds-select_select_1pc5m_244 optgroup{font-family:STIHL Contraface Digital Text Bold,-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:.426;font-weight:700;font-synthesis-weight:none}.ds-select_select_1pc5m_244 option:disabled{color:#00000080}.ds-select_chevron_1pc5m_657{grid-area:1/2/2/2;margin-inline-end:16px}@media screen and (forced-colors:active){.ds-select_chevron_1pc5m_657{fill:CanvasText}}.ds-select_chevron--small_1pc5m_666{margin-inline-end:8px}.ds-select_chevron--disabled_1pc5m_669{fill:#00000080}@media screen and (forced-colors:active){.ds-select_chevron--disabled_1pc5m_669{fill:GrayText}}.ds-select_chevron--dark_1pc5m_677{fill:#b1b1b1}@media screen and (forced-colors:active){.ds-select_chevron--dark_1pc5m_677{fill:CanvasText}}.ds-select_chevron--dark_1pc5m_677.ds-select_chevron--disabled_1pc5m_669{fill:#ffffff80}@media screen and (forced-colors:active){.ds-select_chevron--dark_1pc5m_677.ds-select_chevron--disabled_1pc5m_669{fill:GrayText}}