Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-04 19:33:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1697665 - Update common.css checkbox/radio image & sizing to match photon spec. r=Itiel

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D107940
This commit is contained in:
Tim Nguyen 2021-03-11 21:15:05 +00:00
parent f05c58546c
commit 6bb5c3f20a
18 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/aboutlogins/content/components/login-item.css
View File

@ -281,7 +281,7 @@ input[type = "url"]:focus:-moz-ui-invalid:not(:placeholder-shown) ~ .tooltip-con
}
.copied-button-text {
background-image: url(chrome://global/skin/icons/check.svg);
background-image: url(chrome://global/skin/icons/success.svg);
background-repeat: no-repeat;
-moz-context-properties: fill;
fill: currentColor;

1
browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
View File

@ -129,7 +129,6 @@
fill: var(--customize-menu-check-fill);
background: url('chrome://global/skin/icons/check.svg') center no-repeat;
background-color: var(--newtab-primary-action-background);
background-size: 10px;
}
.sponsored-checkbox:active + .checkmark {

3
browser/components/newtab/css/activity-stream-linux.css
View File

@ -1772,8 +1772,7 @@ main {
-moz-context-properties: fill;
fill: var(--customize-menu-check-fill);
background: url("chrome://global/skin/icons/check.svg") center no-repeat;
background-color: var(--newtab-primary-action-background);
background-size: 10px; }
background-color: var(--newtab-primary-action-background); }
.home-section .section .sponsored-checkbox:active + .checkmark {
fill: rgba(0, 0, 0, 0.15); }
.home-section .section .selector {

3
browser/components/newtab/css/activity-stream-mac.css
View File

@ -1775,8 +1775,7 @@ main {
-moz-context-properties: fill;
fill: var(--customize-menu-check-fill);
background: url("chrome://global/skin/icons/check.svg") center no-repeat;
background-color: var(--newtab-primary-action-background);
background-size: 10px; }
background-color: var(--newtab-primary-action-background); }
.home-section .section .sponsored-checkbox:active + .checkmark {
fill: rgba(0, 0, 0, 0.15); }
.home-section .section .selector {

3
browser/components/newtab/css/activity-stream-windows.css
View File

@ -1772,8 +1772,7 @@ main {
-moz-context-properties: fill;
fill: var(--customize-menu-check-fill);
background: url("chrome://global/skin/icons/check.svg") center no-repeat;
background-color: var(--newtab-primary-action-background);
background-size: 10px; }
background-color: var(--newtab-primary-action-background); }
.home-section .section .sponsored-checkbox:active + .checkmark {
fill: rgba(0, 0, 0, 0.15); }
.home-section .section .selector {

2
browser/components/newtab/lib/PanelTestProvider.jsm
View File

@ -150,7 +150,7 @@ const MESSAGES = () => [
title: {
string_id: "cfr-whatsnew-search-shortcuts-header",
},
icon_url: "chrome://global/skin/icons/check.svg",
icon_url: "chrome://global/skin/icons/success.svg",
icon_alt: {
string_id: "cfr-whatsnew-searchbar-icon-alt-text",
},

2
devtools/client/aboutdebugging/src/components/shared/IconLabel.js
View File

@ -14,7 +14,7 @@ const {
const ICONS = {
[ICON_LABEL_LEVEL.INFO]: "chrome://global/skin/icons/info.svg",
[ICON_LABEL_LEVEL.OK]: "chrome://global/skin/icons/check.svg",
[ICON_LABEL_LEVEL.OK]: "chrome://global/skin/icons/success.svg",
};
/* This component displays an icon accompanied by some content. It's similar

2
devtools/client/themes/aboutprofiling.css
View File

@ -53,7 +53,7 @@ h2 {
}
.perf-toggle-text-label {
height: 26px; /* checkbox/radio height + their margin-block */
height: 24px; /* checkbox/radio height + their margin-block */
display: flex;
align-items: center;
}

3
devtools/client/themes/tooltips.css
View File

@ -507,8 +507,7 @@ strong {
-moz-context-properties: fill;
fill: currentColor;
background: url(chrome://global/skin/icons/check.svg) no-repeat transparent;
background-size: 11px 11px;
background-position: center left 7px;
background-position: 7px center;
}
.tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"]:-moz-locale-dir(rtl),

2
toolkit/components/aboutconfig/content/aboutconfig.css
View File

@ -231,7 +231,7 @@ td.cell-value > form > input[type="number"] {
}
.button-save {
background-image: url("chrome://global/skin/icons/check.svg");
background-image: url("chrome://global/skin/icons/success.svg");
}
.button-edit {

2
toolkit/mozapps/extensions/content/aboutaddons.css
View File

@ -343,7 +343,7 @@ addon-card[expanded] .update-postponed-bar + .addon-card-message {
.addon-badge-verified {
background-color: var(--green-70);
background-image: url("chrome://global/skin/icons/check.svg");
background-image: url("chrome://global/skin/icons/success.svg");
}
.theme-enable-button {

4
toolkit/mozapps/extensions/content/message-bar.css
View File

@ -5,7 +5,7 @@
:host {
--info-icon-url: url("chrome://global/skin/icons/info.svg");
--warn-icon-url: url("chrome://global/skin/icons/warning.svg");
--check-icon-url: url("chrome://global/skin/icons/check.svg");
--success-icon-url: url("chrome://global/skin/icons/success.svg");
--error-icon-url: url("chrome://global/skin/icons/error.svg");
--close-icon-url: url("chrome://global/skin/icons/close.svg");
--icon-size: 16px;
@ -45,7 +45,7 @@
background-color: var(--green-50);
color: var(--green-90);
--message-bar-icon-url: var(--check-icon-url);
--message-bar-icon-url: var(--success-icon-url);
--in-content-button-background: var(--green-60);
--in-content-button-background-hover: var(--green-70);
--in-content-button-background-active: var(--green-80);

8
toolkit/mozapps/extensions/content/panel-item.css
View File

@ -17,15 +17,11 @@
fill: currentColor;
}
:host([checked]) button {
background-size: 1em;
}
button {
background-color: transparent;
color: inherit;
background-image: var(--icon);
background-position: 16px center;
background-position: 14px center;
background-repeat: no-repeat;
background-size: 16px;
border: none;
@ -39,7 +35,7 @@ button {
}
button:dir(rtl) {
background-position-x: right 16px;
background-position-x: right 14px;
}
:host([badged]) button::after {

4
toolkit/themes/shared/icons/check.svg
View File

@ -1,6 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" fill-opacity="context-fill-opacity" stroke="context-stroke none" stroke-width="0.5" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
<path stroke="context-stroke none" stroke-width="0.5" d="M6.52,12.5a1,1,0,0,1-.705-.291l-3.52-3.5a1,1,0,1,1,1.41-1.418l2.812,2.8,5.774-5.793a1,1,0,0,1,1.416,1.412l-6.479,6.5A1,1,0,0,1,6.52,12.5Z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 566 B

After

Width:  |  Height:  |  Size: 559 B

6
toolkit/themes/shared/icons/success.svg Normal file
View File

@ -0,0 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 518 B

11
toolkit/themes/shared/in-content/common.inc.css
View File

@ -606,9 +606,9 @@ xul|checkbox {
xul|*.checkbox-check,
html|input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
padding: 1px;
width: 18px;
height: 18px;
padding: 0;
border: 1px solid var(--in-content-box-border-color);
border-radius: 2px;
margin-block: 3px; /* extend the vertical clicktarget */
@ -677,8 +677,9 @@ xul|radio {
html|input[type="radio"],
xul|*.radio-check {
appearance: none;
width: 20px;
height: 20px;
width: 18px;
height: 18px;
padding: 0;
border: 1px solid var(--in-content-box-border-color);
border-radius: 100%;
margin-block: 3px; /* extend the vertical clicktarget */

4
toolkit/themes/shared/in-content/radio.svg
View File

@ -1,7 +1,7 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
<circle fill="context-fill" cx="10.5" cy="10.5" r="6"/>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
<circle cx="8" cy="8" r="4.5"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 339 B

After

Width:  |  Height:  |  Size: 394 B

1
toolkit/themes/shared/jar.inc.mn
View File

@ -76,6 +76,7 @@ toolkit.jar:
skin/classic/global/icons/shortcut.svg (../../shared/icons/shortcut.svg)
skin/classic/global/icons/spinner-arrow-down.svg (../../shared/icons/spinner-arrow-down.svg)
skin/classic/global/icons/spinner-arrow-up.svg (../../shared/icons/spinner-arrow-up.svg)
skin/classic/global/icons/success.svg (../../shared/icons/success.svg)
skin/classic/global/icons/twisty-collapsed.svg (../../shared/icons/twisty-collapsed.svg)
skin/classic/global/icons/twisty-collapsed-rtl.svg (../../shared/icons/twisty-collapsed-rtl.svg)
skin/classic/global/icons/twisty-expanded.svg (../../shared/icons/twisty-expanded.svg)