Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-1967 Themes Panel Update #510

Merged
merged 7 commits into from Apr 14, 2020
+234 −46
Merged

GH-1967 Themes Panel Update #510

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
317ab64
Replace themes toggle with radio buttons
benstrumeyer Mar 11, 2020
f050b83
Center inner circle in radio buttons
benstrumeyer Mar 11, 2020
e8d7f92
Merge branch 'develop' into GH-1967/themes-panel-update
benstrumeyer Mar 12, 2020
f9b1546
Remove console error
benstrumeyer Mar 12, 2020
2a8bce2
Clean up radio button code
benstrumeyer Mar 31, 2020
d0ec9be
Merge branch 'develop' into GH-1967/themes-panel-update
benstrumeyer Mar 31, 2020
c90b51a
Merge branch 'develop' into GH-1967/themes-panel-update
christophertino Apr 14, 2020
File filter
Filter file types
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next
Loading status checks…

Center inner circle in radio buttons

  • Loading branch information
@benstrumeyer
benstrumeyer committed Mar 11, 2020
commit f050b8391b14338fff2f3f79c636ad4dff5d31c1
2 app/panel/components/BuildingBlocks/RadioButtonGroup.jsx
View file
Open in desktop
@@ -50,7 +50,7 @@ class RadioButtonGroup extends React.Component {
const { buttons } = this.state;
return (
this.props.items.map((item, index) => (
<div className="flex-container align-middle align-justify RadioButtonGroup__container">
<div className="flex-container align-justify RadioButtonGroup__container">
<span className="RadioButtonGroup__label">
{t(item.text)}
</span>
24 app/scss/partials/_radio_button.scss
View file
Open in desktop
@@ -19,25 +19,25 @@
margin: 16px 0;
width: 138px;
}
.RadioButton__innerCircle {
&.checked {
height: 8px;
width: 8px;
background-color: #2092bf;
border-radius: 50%;
border: 1px solid #2092bf;
}
}
.RadioButton__outerCircle {
position: relative;
border: 1px solid #4a4a4a;
height: 14px;
width: 14px;
height: 16px;
width: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
&.checked {
border: 2px solid #2092bf;
}
}
.RadioButton__innerCircle {
&.checked {
height: 8px;
width: 8px;
background-color: #2092bf;
border-radius: 50%;
border: 1px solid #2092bf;
This conversation was marked as resolved by Eden12345

This comment has been minimized.

Sign in to view
@Eden12345

Eden12345 Mar 23, 2020 •
edited
Contributor

Does this element need a border? I believe you could achieve the same effect by removing the border property and setting the width and height to 10px.

This comment has been minimized.

Sign in to view
@benstrumeyer

benstrumeyer Mar 31, 2020
Author Contributor

Deleted the border--I think it looks ok as 8px width and height on windows? Totally up to you

This comment has been minimized.

Sign in to view
@Eden12345

Eden12345 Mar 31, 2020
Contributor

Ah word, yeah the size of this element won't change when you remove the border because it's inheriting the box-sizing: border-box property from RadioButton__outerCircle.
}
}
ProTip! Use n and p to navigate between commits in a pull request.