зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1684859 - Connect titles and toggles, fix padding and font weight. r=prathiksha
Differential Revision: https://phabricator.services.mozilla.com/D101409
This commit is contained in:
Родитель
898fb17519
Коммит
26101454bb
|
@ -156,6 +156,7 @@ main {
|
|||
|
||||
.personalize-button {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background-color: var(--newtab-background-button-color);
|
||||
|
|
|
@ -52,6 +52,7 @@ export class ContentSection extends React.PureComponent {
|
|||
<div id="shortcuts-section" className="section">
|
||||
<label className="switch">
|
||||
<input
|
||||
id="shortcuts-toggle"
|
||||
checked={topSitesEnabled}
|
||||
type="checkbox"
|
||||
onChange={this.onPreferenceSelect}
|
||||
|
@ -62,11 +63,12 @@ export class ContentSection extends React.PureComponent {
|
|||
<span className="slider" role="presentation"></span>
|
||||
</label>
|
||||
<div>
|
||||
<h2
|
||||
id="custom-shortcuts-title"
|
||||
className="title"
|
||||
data-l10n-id="newtab-custom-shortcuts-title"
|
||||
/>
|
||||
<h2 id="custom-shortcuts-title" className="title">
|
||||
<label
|
||||
htmlFor="shortcuts-toggle"
|
||||
data-l10n-id="newtab-custom-shortcuts-title"
|
||||
></label>
|
||||
</h2>
|
||||
<p
|
||||
id="custom-shortcuts-subtitle"
|
||||
className="subtitle"
|
||||
|
@ -140,6 +142,7 @@ export class ContentSection extends React.PureComponent {
|
|||
<div id="pocket-section" className="section">
|
||||
<label className="switch">
|
||||
<input
|
||||
id="pocket-toggle"
|
||||
checked={pocketEnabled}
|
||||
type="checkbox"
|
||||
onChange={this.onPreferenceSelect}
|
||||
|
@ -150,11 +153,12 @@ export class ContentSection extends React.PureComponent {
|
|||
<span className="slider" role="presentation"></span>
|
||||
</label>
|
||||
<div>
|
||||
<h2
|
||||
id="custom-pocket-title"
|
||||
className="title"
|
||||
data-l10n-id="newtab-custom-pocket-title"
|
||||
/>
|
||||
<h2 id="custom-pocket-title" className="title">
|
||||
<label
|
||||
htmlFor="pocket-toggle"
|
||||
data-l10n-id="newtab-custom-pocket-title"
|
||||
></label>
|
||||
</h2>
|
||||
<p
|
||||
id="custom-pocket-subtitle"
|
||||
className="subtitle"
|
||||
|
@ -198,6 +202,7 @@ export class ContentSection extends React.PureComponent {
|
|||
<div id="recent-section" className="section">
|
||||
<label className="switch">
|
||||
<input
|
||||
id="highlights-toggle"
|
||||
checked={highlightsEnabled}
|
||||
type="checkbox"
|
||||
onChange={this.onPreferenceSelect}
|
||||
|
@ -209,11 +214,13 @@ export class ContentSection extends React.PureComponent {
|
|||
<span className="slider" role="presentation"></span>
|
||||
</label>
|
||||
<div>
|
||||
<h2
|
||||
id="custom-recent-title"
|
||||
className="title"
|
||||
data-l10n-id="newtab-custom-recent-title"
|
||||
/>
|
||||
<h2 id="custom-recent-title" className="title">
|
||||
<label
|
||||
htmlFor="highlights-toggle"
|
||||
data-l10n-id="newtab-custom-recent-title"
|
||||
></label>
|
||||
</h2>
|
||||
|
||||
<p
|
||||
id="custom-recent-subtitle"
|
||||
className="subtitle"
|
||||
|
@ -225,6 +232,7 @@ export class ContentSection extends React.PureComponent {
|
|||
<div id="snippets-section" className="section">
|
||||
<label className="switch">
|
||||
<input
|
||||
id="snippets-toggle"
|
||||
checked={snippetsEnabled}
|
||||
type="checkbox"
|
||||
onChange={this.onPreferenceSelect}
|
||||
|
@ -235,11 +243,12 @@ export class ContentSection extends React.PureComponent {
|
|||
<span className="slider" role="presentation"></span>
|
||||
</label>
|
||||
<div>
|
||||
<h2
|
||||
id="custom-snippets-title"
|
||||
className="title"
|
||||
data-l10n-id="newtab-custom-snippets-title"
|
||||
/>
|
||||
<h2 id="custom-snippets-title" className="title">
|
||||
<label
|
||||
htmlFor="snippets-toggle"
|
||||
data-l10n-id="newtab-custom-snippets-title"
|
||||
></label>
|
||||
</h2>
|
||||
<p
|
||||
id="custom-snippets-subtitle"
|
||||
className="subtitle"
|
||||
|
|
|
@ -85,6 +85,10 @@
|
|||
grid-template-rows: auto;
|
||||
grid-template-columns: auto 26px;
|
||||
|
||||
& > div {
|
||||
grid-area: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
|
@ -140,7 +144,6 @@
|
|||
appearance: none;
|
||||
padding-block: 7px;
|
||||
padding-inline: 10px 13px;
|
||||
margin-bottom: 10px;
|
||||
margin-inline-start: 2px;
|
||||
-moz-context-properties: fill;
|
||||
fill: var(--customize-menu-primary-text-color);
|
||||
|
@ -240,6 +243,10 @@
|
|||
.more-information {
|
||||
top: -77px;
|
||||
}
|
||||
|
||||
.check-wrapper {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.more-info-pocket-wrapper {
|
||||
|
|
|
@ -512,6 +512,7 @@ main {
|
|||
|
||||
.personalize-button {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background-color: var(--newtab-background-button-color);
|
||||
|
@ -1667,6 +1668,8 @@ main {
|
|||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto 26px; }
|
||||
.home-section .section > div {
|
||||
grid-area: 1; }
|
||||
.home-section .section .title {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
|
@ -1708,7 +1711,6 @@ main {
|
|||
appearance: none;
|
||||
padding-block: 7px;
|
||||
padding-inline: 10px 13px;
|
||||
margin-bottom: 10px;
|
||||
margin-inline-start: 2px;
|
||||
-moz-context-properties: fill;
|
||||
fill: var(--customize-menu-primary-text-color);
|
||||
|
@ -1779,6 +1781,8 @@ main {
|
|||
max-height: 78px; }
|
||||
.home-section .section .more-info-top-wrapper .more-information {
|
||||
top: -77px; }
|
||||
.home-section .section .more-info-top-wrapper .check-wrapper {
|
||||
margin-top: 10px; }
|
||||
.home-section .section .more-info-pocket-wrapper {
|
||||
max-height: 35px; }
|
||||
.home-section .section .more-info-pocket-wrapper .more-information {
|
||||
|
|
|
@ -515,6 +515,7 @@ main {
|
|||
|
||||
.personalize-button {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background-color: var(--newtab-background-button-color);
|
||||
|
@ -1670,6 +1671,8 @@ main {
|
|||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto 26px; }
|
||||
.home-section .section > div {
|
||||
grid-area: 1; }
|
||||
.home-section .section .title {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
|
@ -1711,7 +1714,6 @@ main {
|
|||
appearance: none;
|
||||
padding-block: 7px;
|
||||
padding-inline: 10px 13px;
|
||||
margin-bottom: 10px;
|
||||
margin-inline-start: 2px;
|
||||
-moz-context-properties: fill;
|
||||
fill: var(--customize-menu-primary-text-color);
|
||||
|
@ -1782,6 +1784,8 @@ main {
|
|||
max-height: 78px; }
|
||||
.home-section .section .more-info-top-wrapper .more-information {
|
||||
top: -77px; }
|
||||
.home-section .section .more-info-top-wrapper .check-wrapper {
|
||||
margin-top: 10px; }
|
||||
.home-section .section .more-info-pocket-wrapper {
|
||||
max-height: 35px; }
|
||||
.home-section .section .more-info-pocket-wrapper .more-information {
|
||||
|
|
|
@ -512,6 +512,7 @@ main {
|
|||
|
||||
.personalize-button {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background-color: var(--newtab-background-button-color);
|
||||
|
@ -1667,6 +1668,8 @@ main {
|
|||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto 26px; }
|
||||
.home-section .section > div {
|
||||
grid-area: 1; }
|
||||
.home-section .section .title {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
|
@ -1708,7 +1711,6 @@ main {
|
|||
appearance: none;
|
||||
padding-block: 7px;
|
||||
padding-inline: 10px 13px;
|
||||
margin-bottom: 10px;
|
||||
margin-inline-start: 2px;
|
||||
-moz-context-properties: fill;
|
||||
fill: var(--customize-menu-primary-text-color);
|
||||
|
@ -1779,6 +1781,8 @@ main {
|
|||
max-height: 78px; }
|
||||
.home-section .section .more-info-top-wrapper .more-information {
|
||||
top: -77px; }
|
||||
.home-section .section .more-info-top-wrapper .check-wrapper {
|
||||
margin-top: 10px; }
|
||||
.home-section .section .more-info-pocket-wrapper {
|
||||
max-height: 35px; }
|
||||
.home-section .section .more-info-pocket-wrapper .more-information {
|
||||
|
|
|
@ -14330,6 +14330,7 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
|
|||
}, external_React_default.a.createElement("label", {
|
||||
className: "switch"
|
||||
}, external_React_default.a.createElement("input", {
|
||||
id: "shortcuts-toggle",
|
||||
checked: topSitesEnabled,
|
||||
type: "checkbox",
|
||||
onChange: this.onPreferenceSelect,
|
||||
|
@ -14341,9 +14342,11 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
|
|||
role: "presentation"
|
||||
})), external_React_default.a.createElement("div", null, external_React_default.a.createElement("h2", {
|
||||
id: "custom-shortcuts-title",
|
||||
className: "title",
|
||||
className: "title"
|
||||
}, external_React_default.a.createElement("label", {
|
||||
htmlFor: "shortcuts-toggle",
|
||||
"data-l10n-id": "newtab-custom-shortcuts-title"
|
||||
}), external_React_default.a.createElement("p", {
|
||||
})), external_React_default.a.createElement("p", {
|
||||
id: "custom-shortcuts-subtitle",
|
||||
className: "subtitle",
|
||||
"data-l10n-id": "newtab-custom-shortcuts-subtitle"
|
||||
|
@ -14397,6 +14400,7 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
|
|||
}, external_React_default.a.createElement("label", {
|
||||
className: "switch"
|
||||
}, external_React_default.a.createElement("input", {
|
||||
id: "pocket-toggle",
|
||||
checked: pocketEnabled,
|
||||
type: "checkbox",
|
||||
onChange: this.onPreferenceSelect,
|
||||
|
@ -14408,9 +14412,11 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
|
|||
role: "presentation"
|
||||
})), external_React_default.a.createElement("div", null, external_React_default.a.createElement("h2", {
|
||||
id: "custom-pocket-title",
|
||||
className: "title",
|
||||
className: "title"
|
||||
}, external_React_default.a.createElement("label", {
|
||||
htmlFor: "pocket-toggle",
|
||||
"data-l10n-id": "newtab-custom-pocket-title"
|
||||
}), external_React_default.a.createElement("p", {
|
||||
})), external_React_default.a.createElement("p", {
|
||||
id: "custom-pocket-subtitle",
|
||||
className: "subtitle",
|
||||
"data-l10n-id": "newtab-custom-pocket-subtitle"
|
||||
|
@ -14440,6 +14446,7 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
|
|||
}, external_React_default.a.createElement("label", {
|
||||
className: "switch"
|
||||
}, external_React_default.a.createElement("input", {
|
||||
id: "highlights-toggle",
|
||||
checked: highlightsEnabled,
|
||||
type: "checkbox",
|
||||
onChange: this.onPreferenceSelect,
|
||||
|
@ -14452,9 +14459,11 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
|
|||
role: "presentation"
|
||||
})), external_React_default.a.createElement("div", null, external_React_default.a.createElement("h2", {
|
||||
id: "custom-recent-title",
|
||||
className: "title",
|
||||
className: "title"
|
||||
}, external_React_default.a.createElement("label", {
|
||||
htmlFor: "highlights-toggle",
|
||||
"data-l10n-id": "newtab-custom-recent-title"
|
||||
}), external_React_default.a.createElement("p", {
|
||||
})), external_React_default.a.createElement("p", {
|
||||
id: "custom-recent-subtitle",
|
||||
className: "subtitle",
|
||||
"data-l10n-id": "newtab-custom-recent-subtitle"
|
||||
|
@ -14464,6 +14473,7 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
|
|||
}, external_React_default.a.createElement("label", {
|
||||
className: "switch"
|
||||
}, external_React_default.a.createElement("input", {
|
||||
id: "snippets-toggle",
|
||||
checked: snippetsEnabled,
|
||||
type: "checkbox",
|
||||
onChange: this.onPreferenceSelect,
|
||||
|
@ -14475,9 +14485,11 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
|
|||
role: "presentation"
|
||||
})), external_React_default.a.createElement("div", null, external_React_default.a.createElement("h2", {
|
||||
id: "custom-snippets-title",
|
||||
className: "title",
|
||||
className: "title"
|
||||
}, external_React_default.a.createElement("label", {
|
||||
htmlFor: "snippets-toggle",
|
||||
"data-l10n-id": "newtab-custom-snippets-title"
|
||||
}), external_React_default.a.createElement("p", {
|
||||
})), external_React_default.a.createElement("p", {
|
||||
id: "custom-snippets-subtitle",
|
||||
className: "subtitle",
|
||||
"data-l10n-id": "newtab-custom-snippets-subtitle"
|
||||
|
|
Загрузка…
Ссылка в новой задаче