mirror of
https://github.com/atom/atom.git
synced 2026-02-06 20:55:33 -05:00
c10e1114ea
This adds input-checkbox to the selector in each theme's `inputs.less` to apply the same border/box-shadow style to indicate focus to checkbox inputs when they are focused. Previously, there was no way of visually identifying whether a checkbox was focused or not.
89 lines
1.1 KiB
Plaintext
89 lines
1.1 KiB
Plaintext
|
|
//
|
|
// Checkbox
|
|
// -------------------------
|
|
|
|
.input-checkbox {
|
|
&:active {
|
|
background-color: @accent-color;
|
|
}
|
|
&:before,
|
|
&:after {
|
|
background-color: @accent-text-color;
|
|
}
|
|
&:checked {
|
|
background-color: @accent-color;
|
|
}
|
|
|
|
&:indeterminate {
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Radio
|
|
// -------------------------
|
|
|
|
.input-radio {
|
|
&:before {
|
|
background-color: @accent-text-color;
|
|
}
|
|
&:active {
|
|
background-color: @accent-color;
|
|
}
|
|
&:checked {
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Range (Slider)
|
|
// -------------------------
|
|
|
|
.input-range {
|
|
&::-webkit-slider-thumb {
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Toggle
|
|
// -------------------------
|
|
|
|
.input-toggle {
|
|
&:checked {
|
|
background-color: @accent-color;
|
|
}
|
|
&:before {
|
|
background-color: @accent-text-color;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// States -------------------------
|
|
|
|
.input-checkbox,
|
|
.input-text,
|
|
.input-search,
|
|
.input-number,
|
|
.input-textarea,
|
|
.input-select,
|
|
.input-color {
|
|
&:focus {
|
|
.focus();
|
|
}
|
|
}
|
|
|
|
.input-text,
|
|
.input-search,
|
|
.input-number,
|
|
.input-textarea {
|
|
&:invalid {
|
|
.invalid();
|
|
}
|
|
}
|