Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-26 14:22:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1326058 - icon and color should be in center of focus ring in container preferences dialog. r=jkt

Browse Source
This commit is contained in:
Sebastian Hengst 2016-12-30 11:21:24 +01:00
parent 963bd86937
commit a8ed5ef06d
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
browser/components/preferences/containers.js
View File

@ -89,7 +89,7 @@ let gContainersManager = {
createIconButtons(defaultIcon) {
let radiogroup = document.createElement("radiogroup");
radiogroup.setAttribute("id", "icon");
radiogroup.className = "icon-buttons";
radiogroup.className = "icon-buttons radio-buttons";
for (let icon of this.icons) {
let iconSwatch = document.createElement("radio");
@ -118,6 +118,7 @@ let gContainersManager = {
createColorSwatches(defaultColor) {
let radiogroup = document.createElement("radiogroup");
radiogroup.setAttribute("id", "color");
radiogroup.className = "radio-buttons";
for (let color of this.colors) {
let colorSwatch = document.createElement("radio");

14
browser/themes/shared/preferences/containers.css
View File

@ -10,12 +10,12 @@
--preference-active-color: #858585;
}
radiogroup {
.radio-buttons {
display: flex;
margin-inline-start: 0.35rem;
}
radio {
.radio-buttons > radio {
flex: auto;
display: flex;
align-items: center;
@ -35,19 +35,23 @@ radio {
fill: #4d4d4d;
}
.radio-buttons > radio {
padding-inline-start: 2px;
}
radio > [data-identity-icon] {
inline-size: 22px;
block-size: 22px;
}
radio[selected=true] {
.radio-buttons > radio[selected=true] {
outline-color: var(--preference-unselected-color);
}
radio[focused=true] {
.radio-buttons > radio[focused=true] {
outline-color: var(--preference-selected-color);
}
radio:hover:active {
.radio-buttons > radio:hover:active {
outline-color: var(--preference-active-color);
}