@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
107 lines (106 loc) • 6.1 kB
CSS
.spectrum--dark .spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) {
border-color: rgb(38, 128, 235);
}
.spectrum--dark .spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) ~ .spectrum-FieldButton {
border-color: rgb(38, 128, 235);
}
.spectrum--dark .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) {
border-color: rgb(90, 90, 90);
}
.spectrum--dark .spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) ~ .spectrum-FieldButton {
border-color: rgb(90, 90, 90);
}
.spectrum--dark .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--dark .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--dark .spectrum-InputGroup-field:focus ~ .spectrum-FieldButton {
border-color: rgb(38, 128, 235);
}
.spectrum--dark .spectrum-InputGroup-field:focus.is-invalid ~ .spectrum-FieldButton,
.spectrum--dark .spectrum-InputGroup-field:focus:invalid ~ .spectrum-FieldButton {
border-color: rgb(236, 91, 98);
}
.spectrum--dark .spectrum-InputGroup-field.focus-ring ~ .spectrum-FieldButton {
box-shadow: 0 0 0 1px rgb(38, 128, 235);
}
.spectrum--dark .spectrum-InputGroup-field.focus-ring.is-invalid ~ .spectrum-FieldButton,
.spectrum--dark .spectrum-InputGroup-field.focus-ring:invalid ~ .spectrum-FieldButton {
box-shadow: 0 0 0 1px rgb(236, 91, 98);
}
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-FieldButton,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-FieldButton:hover,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-FieldButton:focus,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-FieldButton:active,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-FieldButton.is-selected,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-FieldButton:invalid,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-FieldButton.is-invalid,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-FieldButton:disabled,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-FieldButton:disabled:hover {
border-color: rgb(74, 74, 74);
}
.spectrum--dark .spectrum-InputGroup--quiet:hover:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):not(:focus) ~ .spectrum-FieldButton {
border-color: rgb(90, 90, 90);
}
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-InputGroup-field.is-invalid ~ .spectrum-FieldButton,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-InputGroup-field:invalid ~ .spectrum-FieldButton {
border-color: rgb(236, 91, 98);
}
.spectrum--dark .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--dark .spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus.is-invalid ~ .spectrum-FieldButton,
.spectrum--dark .spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus:invalid ~ .spectrum-FieldButton {
box-shadow: 0 1px 0 rgb(236, 91, 98);
border-color: rgb(236, 91, 98);
}
.spectrum--dark .spectrum-Datepicker--range .spectrum-InputGroup-field.focus-ring {
box-shadow: none ;
}
.spectrum--dark .spectrum-Datepicker--range .spectrum-InputGroup-field[disabled] ~ .spectrum-Datepicker--rangeDash {
color: rgb(110, 110, 110);
}
.spectrum--dark .spectrum-Datepicker--range .focus-ring ~ .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(38, 128, 235);
}
.spectrum--dark .spectrum-Datepicker--range .focus-ring:invalid ~ .spectrum-FieldButton,
.spectrum--dark .spectrum-Datepicker--range .focus-ring.is-invalid ~ .spectrum-FieldButton {
box-shadow: 0 0 0 1px rgb(236, 91, 98);
}
.spectrum--dark .spectrum-Datepicker--range .focus-ring:invalid ~ .spectrum-Datepicker-focusRing,
.spectrum--dark .spectrum-Datepicker--range .focus-ring.is-invalid ~ .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(236, 91, 98);
}
.spectrum--dark .spectrum-Datepicker--range.is-invalid .spectrum-InputGroup-field {
border-color: rgb(236, 91, 98) ;
}
.spectrum--dark .spectrum-Datepicker--range.is-invalid .focus-ring ~ .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(236, 91, 98);
}
.spectrum--dark .spectrum-Datepicker--range.is-invalid .focus-ring ~ .spectrum-FieldButton {
border-color: rgb(236, 91, 98);
box-shadow: 0 0 0 1px rgb(236, 91, 98);
}
.spectrum--dark .spectrum-Datepicker--range.is-invalid .spectrum-FieldButton {
border-color: rgb(236, 91, 98);
}
.spectrum--dark .spectrum-Datepicker--range.is-invalid .spectrum-FieldButton.is-invalid.focus-ring {
border-color: rgb(236, 91, 98);
box-shadow: 0 0 0 1px rgb(236, 91, 98);
}
.spectrum--dark .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(38, 128, 235);
}
.spectrum--dark .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-FieldButton {
box-shadow: none;
border-color: rgb(236, 91, 98);
}
.spectrum--dark .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-FieldButton.is-invalid.focus-ring {
box-shadow: 0 2px 0 0 rgb(236, 91, 98);
}
.spectrum--dark .spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-Datepicker-focusRing {
box-shadow: 0 0 0 1px rgb(236, 91, 98);
}