UNPKG

@adobe/spectrum-css

Version:

The Spectrum CSS top-level backwards compatible package

101 lines (100 loc) 5.44 kB
.spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) { border-color: rgb(20, 115, 230); } .spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) ~ .spectrum-FieldButton { border-color: rgb(20, 115, 230); } .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) { border-color: rgb(73, 73, 73); } .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) ~ .spectrum-FieldButton { border-color: rgb(73, 73, 73); } .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):focus { border-color: rgb(20, 115, 230); } .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):focus ~ .spectrum-FieldButton { border-color: rgb(20, 115, 230); } .spectrum-InputGroup-field:focus ~ .spectrum-FieldButton { border-color: rgb(20, 115, 230); } .spectrum-InputGroup-field:focus.is-invalid ~ .spectrum-FieldButton, .spectrum-InputGroup-field:focus:invalid ~ .spectrum-FieldButton { border-color: rgb(227, 72, 80); } .spectrum-InputGroup-field.focus-ring ~ .spectrum-FieldButton { box-shadow: 0 0 0 1px rgb(20, 115, 230); } .spectrum-InputGroup-field.focus-ring.is-invalid ~ .spectrum-FieldButton, .spectrum-InputGroup-field.focus-ring:invalid ~ .spectrum-FieldButton { box-shadow: 0 0 0 1px rgb(227, 72, 80); } .spectrum-InputGroup--quiet .spectrum-FieldButton, .spectrum-InputGroup--quiet .spectrum-FieldButton:hover, .spectrum-InputGroup--quiet .spectrum-FieldButton:focus, .spectrum-InputGroup--quiet .spectrum-FieldButton:active, .spectrum-InputGroup--quiet .spectrum-FieldButton.is-selected, .spectrum-InputGroup--quiet .spectrum-FieldButton:invalid, .spectrum-InputGroup--quiet .spectrum-FieldButton.is-invalid, .spectrum-InputGroup--quiet .spectrum-FieldButton:disabled, .spectrum-InputGroup--quiet .spectrum-FieldButton:disabled:hover { border-color: rgb(57, 57, 57); } .spectrum-InputGroup--quiet:hover:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):not(:focus) ~ .spectrum-FieldButton { border-color: rgb(73, 73, 73); } .spectrum-InputGroup--quiet .spectrum-InputGroup-field.is-invalid ~ .spectrum-FieldButton, .spectrum-InputGroup--quiet .spectrum-InputGroup-field:invalid ~ .spectrum-FieldButton { border-color: rgb(227, 72, 80); } .spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus ~ .spectrum-FieldButton { box-shadow: 0 1px 0 rgb(20, 115, 230); border-color: rgb(20, 115, 230); } .spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus.is-invalid ~ .spectrum-FieldButton, .spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus:invalid ~ .spectrum-FieldButton { box-shadow: 0 1px 0 rgb(227, 72, 80); border-color: rgb(227, 72, 80); } .spectrum-Datepicker--range .spectrum-InputGroup-field.focus-ring { box-shadow: none !important; } .spectrum-Datepicker--range .spectrum-InputGroup-field[disabled] ~ .spectrum-Datepicker--rangeDash { color: rgb(92, 92, 92); } .spectrum-Datepicker--range .focus-ring ~ .spectrum-Datepicker-focusRing { box-shadow: 0 0 0 1px rgb(20, 115, 230); } .spectrum-Datepicker--range .focus-ring:invalid ~ .spectrum-FieldButton, .spectrum-Datepicker--range .focus-ring.is-invalid ~ .spectrum-FieldButton { box-shadow: 0 0 0 1px rgb(227, 72, 80); } .spectrum-Datepicker--range .focus-ring:invalid ~ .spectrum-Datepicker-focusRing, .spectrum-Datepicker--range .focus-ring.is-invalid ~ .spectrum-Datepicker-focusRing { box-shadow: 0 0 0 1px rgb(227, 72, 80); } .spectrum-Datepicker--range.is-invalid .spectrum-InputGroup-field { border-color: rgb(227, 72, 80) !important; } .spectrum-Datepicker--range.is-invalid .focus-ring ~ .spectrum-Datepicker-focusRing { box-shadow: 0 0 0 1px rgb(227, 72, 80); } .spectrum-Datepicker--range.is-invalid .focus-ring ~ .spectrum-FieldButton { border-color: rgb(227, 72, 80); box-shadow: 0 0 0 1px rgb(227, 72, 80); } .spectrum-Datepicker--range.is-invalid .spectrum-FieldButton { border-color: rgb(227, 72, 80); } .spectrum-Datepicker--range.is-invalid .spectrum-FieldButton.is-invalid.focus-ring { border-color: rgb(227, 72, 80); box-shadow: 0 0 0 1px rgb(227, 72, 80); } .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused .spectrum-Datepicker-focusRing { box-shadow: 0 0 0 1px rgb(20, 115, 230); } .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-FieldButton { box-shadow: none; border-color: rgb(227, 72, 80); } .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-FieldButton.is-invalid.focus-ring { box-shadow: 0 2px 0 0 rgb(227, 72, 80); } .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-Datepicker-focusRing { box-shadow: 0 0 0 1px rgb(227, 72, 80); }