mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-05 03:54:35 +00:00
Bug 1697665 - Update common.css checkbox/radio image & sizing to match photon spec. r=Itiel
Differential Revision: https://phabricator.services.mozilla.com/D107940
This commit is contained in:
parent
f05c58546c
commit
6bb5c3f20a
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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",
|
||||
},
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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),
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 559 B |
6
toolkit/themes/shared/icons/success.svg
Normal file
6
toolkit/themes/shared/icons/success.svg
Normal 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>
|
After Width: | Height: | Size: 518 B |
@ -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 */
|
||||
|
@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 394 B |
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user