Clean: Proton - Radio, Checkbox order

This commit is contained in:
alstjr7375 2022-05-31 09:27:02 +09:00
parent 5b7634a36b
commit a2d5227b8a
2 changed files with 55 additions and 58 deletions

View file

@ -1613,14 +1613,6 @@
/* avoid shrinking inside flex container */
}
xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
}
xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
background-color: var(--in-content-button-background-active) !important;
}
xul|*.radio-check[selected] {
-moz-context-properties: fill !important;
fill: currentColor !important;
@ -1632,6 +1624,14 @@
color-adjust: exact !important;
}
xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
}
xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
background-color: var(--in-content-button-background-active) !important;
}
xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
background-color: var(--in-content-primary-button-background-hover) !important;
color: var(--in-content-primary-button-text-color-hover) !important;
@ -1661,18 +1661,6 @@
margin: 4px 2px !important;
}
.checkbox-icon[src] {
margin-inline-end: 2px !important;
}
.checkbox-label {
margin: 1px 0 !important;
}
checkbox[disabled="true"] {
opacity: 0.4 !important;
}
.checkbox-check {
appearance: none !important;
width: 16px !important;
@ -1687,19 +1675,6 @@
/* From common.css */
}
checkbox:not([disabled="true"]):hover > .checkbox-check > .checkbox-check {
background-color: var(
--checkbox-unchecked-hover-bgcolor,
color-mix(in srgb, -moz-accent-color 4%, Field)
) !important;
}
checkbox:not([disabled="true"]):hover > .checkbox-check:active > .checkbox-check {
background-color: var(
--checkbox-unchecked-active-bgcolor,
color-mix(in srgb, -moz-accent-color 8%, Field)
) !important;
}
.checkbox-check[checked] {
-moz-context-properties: fill !important;
fill: currentColor !important;
@ -1713,6 +1688,18 @@
color-adjust: exact !important;
}
checkbox:not([disabled="true"]):hover > .checkbox-check {
background-color: var(
--checkbox-unchecked-hover-bgcolor,
color-mix(in srgb, -moz-accent-color 4%, Field)
) !important;
}
checkbox:not([disabled="true"]):hover:active > .checkbox-check {
background-color: var(
--checkbox-unchecked-active-bgcolor,
color-mix(in srgb, -moz-accent-color 8%, Field)
) !important;
}
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
background-color: var(
--checkbox-checked-hover-bgcolor,
@ -1742,12 +1729,24 @@
fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
}
checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] > .checkbox-check[checked],
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] > .checkbox-check[checked] {
color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
}
}
.checkbox-icon[src] {
margin-inline-end: 2px !important;
}
.checkbox-label {
margin: 1px 0 !important;
}
checkbox[disabled="true"] {
opacity: 0.4 !important;
}
/* From common.css */
xul|richlistitem > xul|*.checkbox-check {
margin: 3px 6px !important;

View file

@ -143,6 +143,9 @@
xul|*.radio-check {
@include Proton.RadioIcon;
}
xul|*.radio-check[selected] {
@include Proton.RadioCheckedIcon;
}
xul|radio:not([disabled="true"]):hover {
> xul|*.radio-check {
@ -153,10 +156,6 @@
}
}
xul|*.radio-check[selected] {
@include Proton.RadioCheckedIcon;
}
xul|radio:not([disabled="true"])[selected]:hover {
> xul|*.radio-check {
@include Proton.RadioCheckedIconHover;
@ -183,35 +182,21 @@
@include Proton.CheckboxGlobal;
}
.checkbox-icon[src] {
margin-inline-end: 2px !important;
}
.checkbox-label {
@include Proton.ChexboxLabel;
}
checkbox[disabled="true"] {
@include Proton.DisabledChexbox;
}
.checkbox-check {
@include Proton.CheckboxIcon;
}
.checkbox-check[checked] {
@include Proton.CheckboxCheckedIcon;
}
checkbox:not([disabled="true"]):hover > .checkbox-check {
checkbox:not([disabled="true"]):hover {
> .checkbox-check {
@include Proton.CheckboxIconHover;
}
&:active > .checkbox-check {
@include Proton.CheckboxIconActive;
}
}
.checkbox-check[checked] {
@include Proton.CheckboxCheckedIcon;
}
checkbox:not([disabled="true"]):hover {
> .checkbox-check[checked] {
@include Proton.CheckboxCheckedIconHover;
}
@ -235,10 +220,23 @@
checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
@include Proton.CheckboxCheckedIconHoverContrast;
> .checkbox-check[checked] {
@include Proton.CheckboxCheckedIconHoverContrast;
}
}
}
.checkbox-icon[src] {
margin-inline-end: 2px !important;
}
.checkbox-label {
@include Proton.ChexboxLabel;
}
checkbox[disabled="true"] {
@include Proton.DisabledChexbox;
}
/* From common.css */
xul|richlistitem > xul|*.checkbox-check {
margin: 3px 6px !important;