@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
107 lines (106 loc) • 6.15 kB
CSS
.spectrum--light .spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) {
border-color: rgb(38, 128, 235);
}
.spectrum--light .spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) ~ .spectrum-FieldButton {
border-color: rgb(38, 128, 235);
}
.spectrum--light .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) {
border-color: rgb(202, 202, 202);
}
.spectrum--light .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) ~ .spectrum-FieldButton {
border-color: rgb(202, 202, 202);
}
.spectrum--light .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):focus {
border-color: rgb(38, 128, 235);
}
.spectrum--light .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):focus ~ .spectrum-FieldButton {
border-color: rgb(38, 128, 235);
}
.spectrum--light .spectrum-InputGroup-field:focus ~ .spectrum-FieldButton {
border-color: rgb(38, 128, 235);
}
.spectrum--light .spectrum-InputGroup-field:focus.is-invalid ~ .spectrum-FieldButton,
.spectrum--light .spectrum-InputGroup-field:focus:invalid ~ .spectrum-FieldButton {
border-color: rgb(215, 55, 63);
}
.spectrum--light .spectrum-InputGroup-field.focus-ring ~ .spectrum-FieldButton {
box-shadow: 0 0 0 1px rgb(38, 128, 235);
}
.spectrum--light .spectrum-InputGroup-field.focus-ring.is-invalid ~ .spectrum-FieldButton,
.spectrum--light .spectrum-InputGroup-field.focus-ring:invalid ~ .spectrum-FieldButton {
box-shadow: 0 0 0 1px rgb(215, 55, 63);
}
.spectrum--light .spectrum-InputGroup--quiet .spectrum-FieldButton,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-FieldButton:hover,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-FieldButton:focus,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-FieldButton:active,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-FieldButton.is-selected,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-FieldButton:invalid,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-FieldButton.is-invalid,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-FieldButton:disabled,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-FieldButton:disabled:hover {
border-color: rgb(225, 225, 225);
}
.spectrum--light .spectrum-InputGroup--quiet:hover:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):not(:focus) ~ .spectrum-FieldButton {
border-color: rgb(202, 202, 202);
}
.spectrum--light .spectrum-InputGroup--quiet .spectrum-InputGroup-field.is-invalid ~ .spectrum-FieldButton,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-InputGroup-field:invalid ~ .spectrum-FieldButton {
border-color: rgb(215, 55, 63);
}
.spectrum--light .spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus ~ .spectrum-FieldButton {
box-shadow: 0 1px 0 rgb(38, 128, 235);
border-color: rgb(38, 128, 235);
}
.spectrum--light .spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus.is-invalid ~ .spectrum-FieldButton,
.spectrum--light .spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus:invalid ~ .spectrum-FieldButton {
box-shadow: 0 1px 0 rgb(215, 55, 63);
border-color: rgb(215, 55, 63);
}
.spectrum--light .spectrum-Datepicker--range .spectrum-InputGroup-field.focus-ring {
box-shadow: none ;
}
.spectrum--light .spectrum-Datepicker--range .spectrum-InputGroup-field[disabled] ~ .spectrum-Datepicker--rangeDash {
color: rgb(179, 179, 179);
}
.spectrum--light .spectrum-Datepicker--range .focus-ring ~ .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(38, 128, 235);
}
.spectrum--light .spectrum-Datepicker--range .focus-ring:invalid ~ .spectrum-FieldButton,
.spectrum--light .spectrum-Datepicker--range .focus-ring.is-invalid ~ .spectrum-FieldButton {
box-shadow: 0 0 0 1px rgb(215, 55, 63);
}
.spectrum--light .spectrum-Datepicker--range .focus-ring:invalid ~ .spectrum-Datepicker-focusRing,
.spectrum--light .spectrum-Datepicker--range .focus-ring.is-invalid ~ .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(215, 55, 63);
}
.spectrum--light .spectrum-Datepicker--range.is-invalid .spectrum-InputGroup-field {
border-color: rgb(215, 55, 63) ;
}
.spectrum--light .spectrum-Datepicker--range.is-invalid .focus-ring ~ .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(215, 55, 63);
}
.spectrum--light .spectrum-Datepicker--range.is-invalid .focus-ring ~ .spectrum-FieldButton {
border-color: rgb(215, 55, 63);
box-shadow: 0 0 0 1px rgb(215, 55, 63);
}
.spectrum--light .spectrum-Datepicker--range.is-invalid .spectrum-FieldButton {
border-color: rgb(215, 55, 63);
}
.spectrum--light .spectrum-Datepicker--range.is-invalid .spectrum-FieldButton.is-invalid.focus-ring {
border-color: rgb(215, 55, 63);
box-shadow: 0 0 0 1px rgb(215, 55, 63);
}
.spectrum--light .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(38, 128, 235);
}
.spectrum--light .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-FieldButton {
box-shadow: none;
border-color: rgb(215, 55, 63);
}
.spectrum--light .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-FieldButton.is-invalid.focus-ring {
box-shadow: 0 2px 0 0 rgb(215, 55, 63);
}
.spectrum--light .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(215, 55, 63);
}