corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1762243 - component style revisions r=thecount

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D142859
This commit is contained in:
Gavin Suntop
2022-04-06 21:12:04 +00:00
parent 22fed04688
commit a96a5e7e04
10 changed files with 244 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,10 @@ hr {
margin: 12px 0 8px;
font-size: 1.15em;
line-height: 1.53em;
.stp_button {
margin: 0;
}
}
.header_medium {

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

@@ -410,6 +410,9 @@ hr {
font-size: 1.15em;
line-height: 1.53em;
}
.header_large .stp_button {
margin: 0;
}
.header_medium {
margin: 12px 0 8px;
@@ -2012,6 +2015,10 @@ body.theme_dark #stp_style_guide {
border-bottom: 1px solid #ccc;
margin: 20px 0;
}
#stp_style_guide .stp_styleguide_h5 {
font-size: 10px;
margin: 10px 0;
}
.stp_tag_picker .stp_tag_picker_tags {
display: flex;
@@ -2050,9 +2057,20 @@ body.theme_dark .stp_tag_picker .stp_tag_picker_tag {
color: #5B5B66;
font-weight: 400;
}
.stp_tag_picker .stp_tag_picker_tag_remove:hover {
color: #3E3E44;
}
.stp_tag_picker .stp_tag_picker_tag_remove:focus {
color: #3E3E44;
outline: 2px solid #0060df;
outline-offset: -4px;
}
body.theme_dark .stp_tag_picker .stp_tag_picker_tag_remove {
color: #8F8F9D;
}
body.theme_dark .stp_tag_picker .stp_tag_picker_tag_remove:focus {
outline: 2px solid #00DDFF;
}
.stp_tag_picker .stp_tag_picker_tag_duplicate {
background-color: #bbb;
@@ -2072,10 +2090,16 @@ body.theme_dark .stp_tag_picker .stp_tag_picker_tag_duplicate {
border-start-start-radius: 4px;
border-end-start-radius: 4px;
}
.stp_tag_picker .stp_tag_picker_input:focus {
outline: 2px solid #0060df;
}
body.theme_dark .stp_tag_picker .stp_tag_picker_input {
background: none;
color: #FBFBFB;
}
body.theme_dark .stp_tag_picker .stp_tag_picker_input:focus {
outline: 2px solid #00DDFF;
}
.stp_tag_picker .stp_tag_picker_input:focus {
border: 1px solid #0060DF;
@@ -2104,9 +2128,12 @@ body.theme_dark .stp_tag_picker .stp_tag_picker_input {
padding: 0;
}
.stp_popular_topics .stp_popular_topic {
display: inline-block;
}
.stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
display: inline-block;
background: #F0F0F4;
border-radius: 4px;
display: inline-block;
font-size: 0.77em;
font-style: normal;
font-weight: 600;
@@ -2114,21 +2141,31 @@ body.theme_dark .stp_tag_picker .stp_tag_picker_input {
margin-inline-end: 8px;
margin-bottom: 8px;
padding: 4px 8px;
}
body.theme_dark .stp_popular_topics .stp_popular_topic {
background: #2B2A33;
}
.stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
color: #000;
}
body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
color: #FBFBFE;
.stp_popular_topics .stp_popular_topic .stp_popular_topic_link:focus {
text-decoration: none;
background: #F0F0F4;
outline: 2px solid #0060df;
outline-offset: 2px;
}
.stp_popular_topics .stp_popular_topic .stp_popular_topic_link:hover {
background: #E0E0E6;
text-decoration: none;
}
.stp_popular_topics .stp_popular_topic .stp_popular_topic_link:active {
background: #CFCFD8;
}
.stp_popular_topics .stp_popular_topic .stp_popular_topic_link::after {
content: " >";
}
body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
background: #2B2A33;
color: #FBFBFE;
}
body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link:focus {
outline: 2px solid #00DDFF;
}
.stp_article_list {
padding: 0;
@@ -2140,11 +2177,11 @@ body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
border-radius: 4px;
padding: 8px;
}
.stp_article_list .stp_article_list_link:hover {
.stp_article_list .stp_article_list_link:hover, .stp_article_list .stp_article_list_link:focus {
text-decoration: none;
background-color: #ECECEE;
}
body.theme_dark .stp_article_list .stp_article_list_link:hover {
body.theme_dark .stp_article_list .stp_article_list_link:hover, body.theme_dark .stp_article_list .stp_article_list_link:focus {
background-color: #2B2A33;
}
@@ -2207,10 +2244,17 @@ body.theme_dark .stp_header .stp_header_logo {
background: url(../img/pocketlogo-dark.svg) bottom center no-repeat;
}
.stp_header .stp_button {
margin: 0;
}
.stp_button {
cursor: pointer;
display: inline-block;
margin: 0;
margin: 12px 0;
}
.stp_button:hover {
text-decoration: none;
}
.stp_button.stp_button_text {
color: #0060DF;
@@ -2219,6 +2263,16 @@ body.theme_dark .stp_header .stp_header_logo {
font-weight: 600;
line-height: 1.27em;
}
.stp_button.stp_button_text:focus {
text-decoration: underline;
}
.stp_button.stp_button_text:hover {
color: #0250BB;
text-decoration: none;
}
.stp_button.stp_button_text:active {
color: #054096;
}
body.theme_dark .stp_button.stp_button_text {
color: #F0F0F4;
}
@@ -2235,10 +2289,25 @@ body.theme_dark .stp_button.stp_button_text {
line-height: 1.27em;
padding: 6px 12px;
}
.stp_button.stp_button_primary:focus {
text-decoration: none;
background: #0060DF;
outline: 2px solid #0060df;
outline-offset: 2px;
}
.stp_button.stp_button_primary:hover {
background: #0250BB;
}
.stp_button.stp_button_primary:active {
background: #054096;
}
body.theme_dark .stp_button.stp_button_primary {
background: #00DDFF;
color: #15141A;
}
body.theme_dark .stp_button.stp_button_primary:focus {
outline: 2px solid #00DDFF;
}
.stp_button.stp_button_secondary {
align-items: center;
@@ -2251,10 +2320,25 @@ body.theme_dark .stp_button.stp_button_primary {
line-height: 1.27em;
padding: 6px 12px;
}
.stp_button.stp_button_secondary:focus {
text-decoration: none;
background: #F0F0F4;
outline: 2px solid #0060df;
outline-offset: 2px;
}
.stp_button.stp_button_secondary:hover {
background: #E0E0E6;
}
.stp_button.stp_button_secondary:active {
background: #CFCFD8;
}
body.theme_dark .stp_button.stp_button_secondary {
background: #2B2A33;
color: #FBFBFE;
}
body.theme_dark .stp_button.stp_button_secondary:focus {
outline: 2px solid #00DDFF;
}
.stp_button_wide .stp_button {
display: block;

5
browser/components/pocket/content/panels/css/styleguide.scss
View File

@@ -20,4 +20,9 @@
border-bottom: 1px solid #ccc;
margin: 20px 0;
}
.stp_styleguide_h5 {
font-size: 10px;
margin: 10px 0;
}
}

2
browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss
View File

@@ -10,7 +10,7 @@
}
.stp_article_list_link {
&:hover {
&:hover, &:focus {
text-decoration: none;
background-color: #ECECEE;

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

@@ -1,7 +1,11 @@
.stp_button {
cursor: pointer;
display: inline-block;
margin: 0;
margin: 12px 0;
&:hover {
text-decoration: none;
}
&.stp_button_text {
color: #0060DF;
@@ -10,6 +14,19 @@
font-weight: 600;
line-height: 1.27em;
&:focus {
text-decoration: underline;
}
&:hover {
color: #0250BB;
text-decoration: none;
}
&:active {
color: #054096;
}
@include theme_dark {
color: #F0F0F4;
}
@@ -27,9 +44,28 @@
line-height: 1.27em;
padding: 6px 12px;
&:focus {
text-decoration: none;
background: #0060DF;
outline: 2px solid #0060df;
outline-offset: 2px;
}
&:hover {
background: #0250BB;
}
&:active {
background: #054096;
}
@include theme_dark {
background: #00DDFF;
color: #15141A;
&:focus {
outline: 2px solid #00DDFF;
}
}
}
@@ -44,9 +80,28 @@
line-height: 1.27em;
padding: 6px 12px;
&:focus {
text-decoration: none;
background: #F0F0F4;
outline: 2px solid #0060df;
outline-offset: 2px;
}
&:hover {
background: #E0E0E6;
}
&:active {
background: #CFCFD8;
}
@include theme_dark {
background: #2B2A33;
color: #FBFBFE;
&:focus {
outline: 2px solid #00DDFF;
}
}
}
}

4
browser/components/pocket/content/panels/js/components/Header/Header.scss
View File

@@ -16,4 +16,8 @@
background: url(../img/pocketlogo-dark.svg) bottom center no-repeat;
}
}
.stp_button {
margin: 0;
}
}

49
browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss
View File

@@ -2,32 +2,49 @@
padding: 0;
.stp_popular_topic {
background: #F0F0F4;
border-radius: 4px;
display: inline-block;
font-size: 0.77em;
font-style: normal;
font-weight: 600;
line-height: 1.2em;
margin-inline-end: 8px;
margin-bottom: 8px;
padding: 4px 8px;
@include theme_dark {
background: #2B2A33;
}
.stp_popular_topic_link {
display: inline-block;
background: #F0F0F4;
border-radius: 4px;
font-size: 0.77em;
font-style: normal;
font-weight: 600;
line-height: 1.2em;
margin-inline-end: 8px;
margin-bottom: 8px;
padding: 4px 8px;
color: #000;
@include theme_dark {
color: #FBFBFE;
&:focus {
text-decoration: none;
background: #F0F0F4;
outline: 2px solid #0060df;
outline-offset: 2px;
}
&:hover {
background: #E0E0E6;
text-decoration: none;
}
&:active {
background: #CFCFD8;
}
&::after {
content: " >";
}
@include theme_dark {
background: #2B2A33;
color: #FBFBFE;
&:focus {
outline: 2px solid #00DDFF;
}
}
}
}
}

23
browser/components/pocket/content/panels/js/components/TagPicker/TagPicker.scss
View File

@@ -38,8 +38,22 @@
color: #5B5B66;
font-weight: 400;
&:hover {
color: #3E3E44;
}
&:focus {
color: #3E3E44;
outline: 2px solid #0060df;
outline-offset: -4px;
}
@include theme_dark {
color: #8F8F9D;
&:focus {
outline: 2px solid #00DDFF;
}
}
}
@@ -62,9 +76,18 @@
padding: 0 6px;
border-start-start-radius: 4px;
border-end-start-radius: 4px;
&:focus {
outline: 2px solid #0060df;
}
@include theme_dark {
background: none;
color: #FBFBFB;
&:focus {
outline: 2px solid #00DDFF;
}
}
&:focus {
border: 1px solid #0060DF;

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

@@ -1629,25 +1629,35 @@ StyleGuideOverlay.prototype = {
// TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling
react_dom.render( /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("h3", null, "JSX Components:"), /*#__PURE__*/react.createElement("h4", {
className: "stp_styleguide_h4"
}, "Button"), /*#__PURE__*/react.createElement(Button_Button, {
}, "Buttons"), /*#__PURE__*/react.createElement("h5", {
className: "stp_styleguide_h5"
}, "text"), /*#__PURE__*/react.createElement(Button_Button, {
style: "text",
url: "https://example.org",
source: "styleguide"
}, "Text Button"), /*#__PURE__*/react.createElement("br", null), /*#__PURE__*/react.createElement(Button_Button, {
}, "Text Button"), /*#__PURE__*/react.createElement("h5", {
className: "stp_styleguide_h5"
}, "primary"), /*#__PURE__*/react.createElement(Button_Button, {
style: "primary",
url: "https://example.org",
source: "styleguide"
}, "Primary Button"), /*#__PURE__*/react.createElement("br", null), /*#__PURE__*/react.createElement(Button_Button, {
}, "Primary Button"), /*#__PURE__*/react.createElement("h5", {
className: "stp_styleguide_h5"
}, "secondary"), /*#__PURE__*/react.createElement(Button_Button, {
style: "secondary",
url: "https://example.org",
source: "styleguide"
}, "Secondary Button"), /*#__PURE__*/react.createElement("span", {
}, "Secondary Button"), /*#__PURE__*/react.createElement("h5", {
className: "stp_styleguide_h5"
}, "primary wide"), /*#__PURE__*/react.createElement("span", {
className: "stp_button_wide"
}, /*#__PURE__*/react.createElement(Button_Button, {
style: "primary",
url: "https://example.org",
source: "styleguide"
}, "Primary Wide Button")), /*#__PURE__*/react.createElement("span", {
}, "Primary Wide Button")), /*#__PURE__*/react.createElement("h5", {
className: "stp_styleguide_h5"
}, "secondary wide"), /*#__PURE__*/react.createElement("span", {
className: "stp_button_wide"
}, /*#__PURE__*/react.createElement(Button_Button, {
style: "secondary",

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

@@ -14,23 +14,26 @@ StyleGuideOverlay.prototype = {
ReactDOM.render(
<div>
<h3>JSX Components:</h3>
<h4 className="stp_styleguide_h4">Button</h4>
<h4 className="stp_styleguide_h4">Buttons</h4>
<h5 className="stp_styleguide_h5">text</h5>
<Button style="text" url="https://example.org" source="styleguide">
Text Button
</Button>
<br />
<h5 className="stp_styleguide_h5">primary</h5>
<Button style="primary" url="https://example.org" source="styleguide">
Primary Button
</Button>
<br />
<h5 className="stp_styleguide_h5">secondary</h5>
<Button style="secondary" url="https://example.org" source="styleguide">
Secondary Button
</Button>
<h5 className="stp_styleguide_h5">primary wide</h5>
<span className="stp_button_wide">
<Button style="primary" url="https://example.org" source="styleguide">
Primary Wide Button
</Button>
</span>
<h5 className="stp_styleguide_h5">secondary wide</h5>
<span className="stp_button_wide">
<Button
style="secondary"