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

Bug 1754510 - Adding a few new elements to the save to Pocket style guide r=gvn

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D138337
This commit is contained in:
Scott 2022-02-10 01:37:01 +00:00
parent 878bb38005
commit 94c48a7a00
6 changed files with 114 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
browser/components/pocket/content/panels/css/global.scss
View File

@ -4,5 +4,25 @@ body {
hr {
margin: 12px -8px;
color: #F0F0F4;
background-color: #F0F0F4;
height: 1px;
border: none;
}
.header_large {
margin: 12px 0 8px;
font-size: 1.15em;
line-height: 1.53em;
}
.header_medium {
margin: 12px 0 8px;
font-size: 1em;
line-height: 1.23em;
}
p {
margin: 8px 0;
font-size: 0.84em;
line-height: 1.07em;
}

45
browser/components/pocket/content/panels/css/main.compiled.css
View File

@ -397,7 +397,27 @@ body {
hr {
margin: 12px -8px;
color: #F0F0F4;
background-color: #F0F0F4;
height: 1px;
border: none;
}
.header_large {
margin: 12px 0 8px;
font-size: 1.15em;
line-height: 1.53em;
}
.header_medium {
margin: 12px 0 8px;
font-size: 1em;
line-height: 1.23em;
}
p {
margin: 8px 0;
font-size: 0.84em;
line-height: 1.07em;
}
.stp_panel_container {
@ -2043,7 +2063,7 @@ button {
.stp_button {
cursor: pointer;
display: inline-block;
margin: 8px 0px;
margin: 0;
}
.stp_button.stp_button_text {
color: #0060DF;
@ -2057,11 +2077,11 @@ button {
background: #0060DF;
border-radius: 4px;
color: #FBFBFE;
font-size: 0.77em;
font-size: 0.85em;
font-style: normal;
font-weight: 600;
justify-content: center;
line-height: 1.2em;
line-height: 1.27em;
padding: 6px 12px;
}
.stp_button.stp_button_secondary {
@ -2073,7 +2093,22 @@ button {
font-style: normal;
font-weight: 600;
line-height: 1.27em;
padding: 7px 14px;
padding: 6px 12px;
}
.stp_button_wide .stp_button {
display: block;
margin: 12px 0;
text-align: center;
padding: 8px 12px;
}
.stp_button_wide .stp_button.stp_button_primary {
font-size: 1em;
line-height: 1.22em;
}
.stp_button_wide .stp_button.stp_button_secondary {
font-size: 0.85em;
line-height: 1.07em;
}
/*# sourceMappingURL=main.compiled.css.map */

27
browser/components/pocket/content/panels/js/components/Button/Button.scss
View File

@ -1,7 +1,7 @@
.stp_button {
cursor: pointer;
display: inline-block;
margin: 8px 0px;
margin: 0;
&.stp_button_text {
color: #0060DF;
@ -16,11 +16,11 @@
background: #0060DF;
border-radius: 4px;
color: #FBFBFE;
font-size: 0.77em;
font-size: 0.85em;
font-style: normal;
font-weight: 600;
justify-content: center;
line-height: 1.2em;
line-height: 1.27em;
padding: 6px 12px;
}
@ -33,6 +33,25 @@
font-style: normal;
font-weight: 600;
line-height: 1.27em;
padding: 7px 14px;
padding: 6px 12px;
}
}
.stp_button_wide {
.stp_button {
display: block;
margin: 12px 0;
text-align: center;
padding: 8px 12px;
&.stp_button_primary {
font-size: 1em;
line-height: 1.22em;
}
&.stp_button_secondary {
font-size: 0.85em;
line-height: 1.07em;
}
}
}

18
browser/components/pocket/content/panels/js/main.bundle.js
View File

@ -1080,7 +1080,15 @@ StyleGuideOverlay.prototype = {
style: "primary"
}, "Primary Button"), /*#__PURE__*/react.createElement("br", null), /*#__PURE__*/react.createElement(Button_Button, {
style: "secondary"
}, "Secondary Button"), /*#__PURE__*/react.createElement("h4", {
}, "Secondary Button"), /*#__PURE__*/react.createElement("span", {
className: "stp_button_wide"
}, /*#__PURE__*/react.createElement(Button_Button, {
style: "primary"
}, "Primary Wide Button")), /*#__PURE__*/react.createElement("span", {
className: "stp_button_wide"
}, /*#__PURE__*/react.createElement(Button_Button, {
style: "secondary"
}, "Secondary Wide Button")), /*#__PURE__*/react.createElement("h4", {
className: "stp_styleguide_h4"
}, "Header"), /*#__PURE__*/react.createElement(Header_Header, null, /*#__PURE__*/react.createElement(Button_Button, {
style: "primary"
@ -1124,7 +1132,13 @@ StyleGuideOverlay.prototype = {
url: "https://example.org",
alt: "Alt Text"
}]
})), document.querySelector(`#stp_style_guide_components`));
}), /*#__PURE__*/react.createElement("h3", null, "Typography:"), /*#__PURE__*/react.createElement("h2", {
className: "header_large"
}, ".header_large"), /*#__PURE__*/react.createElement("h3", {
className: "header_medium"
}, ".header_medium"), /*#__PURE__*/react.createElement("p", null, "paragraph"), /*#__PURE__*/react.createElement("h3", null, "Native Elements:"), /*#__PURE__*/react.createElement("h4", {
className: "stp_styleguide_h4"
}, "Horizontal Rule"), /*#__PURE__*/react.createElement("hr", null)), document.querySelector(`#stp_style_guide_components`));
}
};

13
browser/components/pocket/content/panels/js/style-guide/overlay.js
View File

@ -21,6 +21,12 @@ StyleGuideOverlay.prototype = {
<Button style="primary">Primary Button</Button>
<br />
<Button style="secondary">Secondary Button</Button>
<span className="stp_button_wide">
<Button style="primary">Primary Wide Button</Button>
</span>
<span className="stp_button_wide">
<Button style="secondary">Secondary Wide Button</Button>
</span>
<h4 className="stp_styleguide_h4">Header</h4>
<Header>
<Button style="primary">View My List</Button>
@ -65,6 +71,13 @@ StyleGuideOverlay.prototype = {
},
]}
/>
<h3>Typography:</h3>
<h2 className="header_large">.header_large</h2>
<h3 className="header_medium">.header_medium</h3>
<p>paragraph</p>
<h3>Native Elements:</h3>
<h4 className="stp_styleguide_h4">Horizontal Rule</h4>
<hr />
</div>,
document.querySelector(`#stp_style_guide_components`)
);

2
browser/components/pocket/content/panels/style-guide.html
View File

@ -9,7 +9,7 @@
<title>Pocket: Style Guide</title>
<link rel="stylesheet" href="css/main.compiled.css">
</head>
<body class="pkt_ext_containerhome">
<body class="pkt_ext_container_style_guide">
<script src="js/vendor/jquery-2.1.1.min.js"></script>
<script src="js/vendor/handlebars.runtime.js"></script>
<script src="js/tmpl.js"></script>