Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-04-03 04:52:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1491609 - Update common.inc.css checkbox and radio styling. r=jaws,k88hudson

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D5983

--HG--
rename : toolkit/themes/shared/in-content/check-partial.svg => toolkit/themes/shared/icons/check-partial.svg
rename : browser/themes/shared/icons/check.svg => toolkit/themes/shared/icons/check.svg
extra : moz-landing-system : lando
This commit is contained in:
Tim Nguyen 2018-09-21 10:23:21 +00:00
parent 9dff99cb01
commit 3d54c50b09
18 changed files with 43 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
browser/components/newtab/content-src/components/TopSites/_TopSites.scss
View File

@ -567,16 +567,15 @@ $hover-transition-duration: 150ms;
// checkmark
[type='checkbox']:not(:checked) + label::after,
[type='checkbox']:checked + label::after {
background: url('chrome://global/skin/in-content/check.svg') no-repeat center center; // sass-lint:disable-line no-url-domains
background: url('chrome://global/skin/icons/check.svg') no-repeat center center; // sass-lint:disable-line no-url-domains
content: '';
height: 21px;
left: $checkbox-offset;
position: absolute;
top: $checkbox-offset;
width: 21px;
-moz-context-properties: fill, stroke;
-moz-context-properties: fill;
fill: var(--newtab-link-primary-color);
stroke: none;
z-index: 2;
[dir='rtl'] & {

2
browser/components/newtab/content-src/styles/_icons.scss
View File

@ -119,7 +119,7 @@
}
&.icon-check {
background-image: url('chrome://browser/skin/check.svg');
background-image: url('chrome://global/skin/icons/check.svg');
}
&.icon-download {

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

@ -185,7 +185,7 @@ body {
.icon.icon-pin-small:dir(rtl) {
transform: scaleX(-1); }
.icon.icon-check {
background-image: url("chrome://browser/skin/check.svg"); }
background-image: url("chrome://global/skin/icons/check.svg"); }
.icon.icon-download {
background-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar"); }
.icon.icon-copy {
@ -814,7 +814,7 @@ main {
.topsite-form [type='checkbox']:not(:checked) + label::after,
.topsite-form [type='checkbox']:checked + label::after {
background: url("chrome://global/skin/in-content/check.svg") no-repeat center center;
background: url("chrome://global/skin/icons/check.svg") no-repeat center center;
content: '';
height: 21px;
left: -8px;
@ -823,7 +823,6 @@ main {
width: 21px;
-moz-context-properties: fill, stroke;
fill: var(--newtab-link-primary-color);
stroke: none;
z-index: 2; }
[dir='rtl'] .topsite-form [type='checkbox']:not(:checked) + label::after, [dir='rtl']
.topsite-form [type='checkbox']:checked + label::after {
@ -2159,4 +2158,4 @@ a.firstrun-link {
.onboardingMessage:last-child::before {
content: none; }
/*# sourceMappingURL=activity-stream-linux.css.map */
/*# sourceMappingURL=activity-stream-linux.css.map */

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

@ -188,7 +188,7 @@ body {
.icon.icon-pin-small:dir(rtl) {
transform: scaleX(-1); }
.icon.icon-check {
background-image: url("chrome://browser/skin/check.svg"); }
background-image: url("chrome://global/skin/icons/check.svg"); }
.icon.icon-download {
background-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar"); }
.icon.icon-copy {
@ -817,16 +817,15 @@ main {
.topsite-form [type='checkbox']:not(:checked) + label::after,
.topsite-form [type='checkbox']:checked + label::after {
background: url("chrome://global/skin/in-content/check.svg") no-repeat center center;
background: url("chrome://global/skin/icons/check.svg") no-repeat center center;
content: '';
height: 21px;
left: -8px;
position: absolute;
top: -8px;
width: 21px;
-moz-context-properties: fill, stroke;
-moz-context-properties: fill;
fill: var(--newtab-link-primary-color);
stroke: none;
z-index: 2; }
[dir='rtl'] .topsite-form [type='checkbox']:not(:checked) + label::after, [dir='rtl']
.topsite-form [type='checkbox']:checked + label::after {
@ -2162,4 +2161,4 @@ a.firstrun-link {
.onboardingMessage:last-child::before {
content: none; }
/*# sourceMappingURL=activity-stream-mac.css.map */
/*# sourceMappingURL=activity-stream-mac.css.map */

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

@ -185,7 +185,7 @@ body {
.icon.icon-pin-small:dir(rtl) {
transform: scaleX(-1); }
.icon.icon-check {
background-image: url("chrome://browser/skin/check.svg"); }
background-image: url("chrome://global/skin/icons/check.svg"); }
.icon.icon-download {
background-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar"); }
.icon.icon-copy {
@ -814,16 +814,15 @@ main {
.topsite-form [type='checkbox']:not(:checked) + label::after,
.topsite-form [type='checkbox']:checked + label::after {
background: url("chrome://global/skin/in-content/check.svg") no-repeat center center;
background: url("chrome://global/skin/icons/check.svg") no-repeat center center;
content: '';
height: 21px;
left: -8px;
position: absolute;
top: -8px;
width: 21px;
-moz-context-properties: fill, stroke;
-moz-context-properties: fill;
fill: var(--newtab-link-primary-color);
stroke: none;
z-index: 2; }
[dir='rtl'] .topsite-form [type='checkbox']:not(:checked) + label::after, [dir='rtl']
.topsite-form [type='checkbox']:checked + label::after {
@ -2159,4 +2158,4 @@ a.firstrun-link {
.onboardingMessage:last-child::before {
content: none; }
/*# sourceMappingURL=activity-stream-windows.css.map */
/*# sourceMappingURL=activity-stream-windows.css.map */

6
browser/themes/shared/aboutSessionRestore.css
View File

@ -89,10 +89,9 @@ treechildren::-moz-tree-image(container, noicon) {
}
treechildren::-moz-tree-image(checked) {
list-style-image: url("chrome://global/skin/in-content/check.svg");
list-style-image: url("chrome://global/skin/icons/check.svg");
-moz-context-properties: fill, stroke;
fill: #2292d0;
stroke: none;
}
treechildren::-moz-tree-image(checked, selected) {
fill: white;
@ -100,10 +99,9 @@ treechildren::-moz-tree-image(checked, selected) {
}
treechildren::-moz-tree-image(partial) {
list-style-image: url("chrome://global/skin/in-content/check-partial.svg");
list-style-image: url("chrome://global/skin/icons/check-partial.svg");
-moz-context-properties: fill, stroke;
fill: #2292d0;
stroke: none;
}
treechildren::-moz-tree-image(partial, selected) {
fill: white;

6
browser/themes/shared/aboutWelcomeBack.css
View File

@ -35,10 +35,9 @@ treechildren::-moz-tree-image(container, noicon) {
}
treechildren::-moz-tree-image(checked) {
list-style-image: url("chrome://global/skin/in-content/check.svg");
list-style-image: url("chrome://global/skin/icons/check.svg");
-moz-context-properties: fill, stroke;
fill: #2292d0;
stroke: none;
}
treechildren::-moz-tree-image(checked, selected) {
fill: white;
@ -46,10 +45,9 @@ treechildren::-moz-tree-image(checked, selected) {
}
treechildren::-moz-tree-image(partial) {
list-style-image: url("chrome://global/skin/in-content/check-partial.svg");
list-style-image: url("chrome://global/skin/icons/check-partial.svg");
-moz-context-properties: fill, stroke;
fill: #2292d0;
stroke: none;
}
treechildren::-moz-tree-image(partial, selected) {
fill: white;

2
browser/themes/shared/customizableui/panelUI.inc.css
View File

@ -1004,7 +1004,7 @@ panelview .toolbarbutton-1,
}
.subviewbutton[checked="true"] {
list-style-image: url(chrome://browser/skin/check.svg);
list-style-image: url(chrome://global/skin/icons/check.svg);
-moz-context-properties: fill;
fill: currentColor;
color: inherit;

7
browser/themes/shared/incontentprefs/preferences.inc.css
View File

@ -72,8 +72,6 @@ button > hbox > label {
.checkbox-check {
margin-inline-end: 8px;
width: 20px;
height: 20px;
}
.tail-with-learn-more {
@ -354,12 +352,9 @@ button > hbox > label {
#engineList > treechildren::-moz-tree-image(engineShown, checked),
#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
list-style-image: url("chrome://global/skin/in-content/check.svg");
list-style-image: url("chrome://global/skin/icons/check.svg");
-moz-context-properties: fill, stroke;
fill: #2292d0;
stroke: none;
width: 21px;
height: 21px;
}
#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),

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

@ -138,7 +138,6 @@
skin/classic/browser/characterEncoding.svg (../shared/icons/characterEncoding.svg)
skin/classic/browser/chevron.svg (../shared/icons/chevron.svg)
skin/classic/browser/chevron-animation.svg (../shared/icons/chevron-animation.svg)
skin/classic/browser/check.svg (../shared/icons/check.svg)
skin/classic/browser/check-animation.svg (../shared/icons/check-animation.svg)
skin/classic/browser/customize.svg (../shared/icons/customize.svg)
skin/classic/browser/developer.svg (../shared/icons/developer.svg)

2
browser/themes/shared/sidebar.inc.css
View File

@ -110,7 +110,7 @@ toolbarseparator + #sidebar-extensions-separator {
#sidebarMenu-popup > .subviewbutton[checked="true"] {
list-style-image: none;
background: url(chrome://browser/skin/check.svg) no-repeat transparent;
background: url(chrome://global/skin/icons/check.svg) no-repeat transparent;
background-size: 11px 11px;
}

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

@ -400,7 +400,7 @@
list-style-image: none;
-moz-context-properties: fill;
fill: currentColor;
background: url(chrome://browser/skin/check.svg) no-repeat transparent;
background: url(chrome://global/skin/icons/check.svg) no-repeat transparent;
background-size: 11px 11px;
background-position: center left 7px;
}

16
toolkit/themes/linux/global/in-content/common.css
View File

@ -43,20 +43,10 @@ xul|*.menulist-dropmarker {
margin-bottom: 6px;
}
xul|*.checkbox-check,
xul|*.radio-check {
background-image: none;
}
xul|*.checkbox-check[checked] {
fill: -moz-dialogText;
stroke: none;
background-color: -moz-dialog;
}
xul|*.checkbox-check[checked],
xul|*.radio-check[selected] {
background-color: -moz-dialog;
fill: -moz-dialogText;
background-color: -moz-field;
fill: -moz-fieldText;
}
xul|*.radio-label-box {

6
toolkit/themes/shared/in-content/check-partial.svg → toolkit/themes/shared/icons/check-partial.svg
View File

@ -1,8 +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="21" height="21" viewBox="0 0 21 21">
<rect fill="context-fill" stroke="context-stroke" stroke-width="0.5" x="3" y="9" width="15" height="3"/>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" stroke="context-stroke none" stroke-width="0.5">
<rect x="2" y="7" width="12" height="2" rx="1"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 416 B

After

Width:  |  Height:  |  Size: 438 B

2
browser/themes/shared/icons/check.svg → toolkit/themes/shared/icons/check.svg Executable file → Normal file
View File

@ -2,5 +2,5 @@
- 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"/>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 518 B

After

Width:  |  Height:  |  Size: 566 B

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

@ -489,17 +489,16 @@ xul|checkbox {
xul|*.checkbox-check,
html|input[type="checkbox"] {
-moz-appearance: none;
width: 23px;
height: 23px;
width: 20px;
height: 20px;
padding: 1px;
border: 1px solid var(--in-content-box-border-color);
border-radius: 2px;
margin: 0;
margin-inline-end: 10px;
background-color: #f1f1f1;
background-image: linear-gradient(#fff, rgba(255,255,255,0.8));
background-position: center center;
background-color: var(--in-content-box-background);
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
}
xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check,
@ -508,17 +507,15 @@ html|input[type="checkbox"]:not(:disabled):hover {
}
xul|*.checkbox-check[checked] {
list-style-image: url("chrome://global/skin/in-content/check.svg");
-moz-context-properties: fill, stroke;
list-style-image: url("chrome://global/skin/icons/check.svg");
-moz-context-properties: fill;
fill: #2292d0;
stroke: none;
}
html|input[type="checkbox"]:checked {
background-image: url("chrome://global/skin/in-content/check.svg"), linear-gradient(#fff, rgba(255,255,255,0.8));
-moz-context-properties: fill, stroke;
background-image: url("chrome://global/skin/icons/check.svg");
-moz-context-properties: fill;
fill: #2292d0;
stroke: none;
}
xul|checkbox[disabled="true"] > xul|*.checkbox-check,
@ -548,9 +545,7 @@ xul|*.radio-check {
border-radius: 50%;
margin: 0;
margin-inline-end: 10px;
background-color: #f1f1f1;
background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
background-color: var(--in-content-box-background);
}
xul|radio:not([disabled="true"]):hover > xul|*.radio-check {

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

@ -29,6 +29,8 @@ toolkit.jar:
skin/classic/global/icons/autoscroll-vertical.svg (../../shared/icons/autoscroll-vertical.svg)
skin/classic/global/icons/calendar-arrow-left.svg (../../shared/icons/calendar-arrow-left.svg)
skin/classic/global/icons/calendar-arrow-right.svg (../../shared/icons/calendar-arrow-right.svg)
skin/classic/global/icons/check.svg (../../shared/icons/check.svg)
skin/classic/global/icons/check-partial.svg (../../shared/icons/check-partial.svg)
skin/classic/global/icons/close.svg (../../shared/icons/close.svg)
skin/classic/global/icons/error.svg (../../shared/icons/error.svg)
skin/classic/global/icons/find-previous-arrow.svg (../../shared/icons/find-previous-arrow.svg)
@ -58,8 +60,6 @@ toolkit.jar:
skin/classic/global/narrate/start.svg (../../shared/narrate/start.svg)
skin/classic/global/narrate/stop.svg (../../shared/narrate/stop.svg)
skin/classic/global/narrate/waveform.svg (../../shared/narrate/waveform.svg)
skin/classic/global/in-content/check.svg (../../shared/in-content/check.svg)
skin/classic/global/in-content/check-partial.svg (../../shared/in-content/check-partial.svg)
skin/classic/global/in-content/dropdown.svg (../../shared/in-content/dropdown.svg)
skin/classic/global/in-content/radio.svg (../../shared/in-content/radio.svg)
skin/classic/global/reader/RM-Close-24x24.svg (../../shared/reader/RM-Close-24x24.svg)

16
toolkit/themes/windows/global/in-content/common.css
View File

@ -23,20 +23,10 @@ xul|radio {
}
@media (-moz-windows-default-theme: 0) {
xul|*.checkbox-check,
xul|*.radio-check {
background-image: none;
}
xul|*.checkbox-check[checked] {
fill: -moz-dialogText;
stroke: none;
background-color: -moz-dialog;
}
xul|*.checkbox-check[checked],
xul|*.radio-check[selected] {
background-color: -moz-dialog;
fill: -moz-dialogText;
fill: -moz-fieldText;
background-color: -moz-field;
}
}