ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-12-28 07:50:32 +05:30
Code Issues Packages Projects Releases Wiki Activity

#136: responsive popup close button

Browse Source
This commit is contained in:
SleepWalker 2016-06-02 21:30:46 +03:00
parent 1ff6a05414
commit 16d3b8a928
3 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/contact/ContactForm.jsx
View File

@ -32,7 +32,7 @@ export default class ContactForm extends Component {
<h2 className={popupStyles.headerTitle}>
<Message {...messages.title} />
</h2>
<span className={classNames(icons.close, styles.close)} onClick={onClose} />
<span className={classNames(icons.close, popupStyles.close)} onClick={onClose} />
</div>
<Form form={form} onSubmit={this.onSubmit}>

17
src/components/contact/contactForm.scss
View File

@ -5,23 +5,6 @@
.contactForm {
}
.close {
position: fixed;
right: 0;
top: 0;
padding: 35px;
cursor: pointer;
font-size: 20px;
color: rgba(#000, 0.4);
background: rgba(#000, 0);
transition: 0.25s;
&:hover {
color: rgba(#000, 0.6);
background: rgba(#fff, 0.75);
}
}
.philosophicalThought {
font-family: $font-family-title;
font-size: 19px;

25
src/components/ui/popup/popup.scss
View File

@ -60,6 +60,7 @@ $popupPadding: 20px;
}
.header {
position: relative;
background: $light;
padding: 15px $popupPadding;
border-bottom: 1px solid #dedede;
@ -74,3 +75,27 @@ $popupPadding: 20px;
.body {
padding: $popupPadding;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 15px;
cursor: pointer;
font-size: 20px;
color: rgba(#000, 0.4);
background: rgba(#000, 0);
transition: 0.25s;
&:hover {
color: rgba(#000, 0.6);
background: rgba(#fff, 0.75);
}
}
@media (min-width: 655px) {
.close {
position: fixed;
padding: 35px;
}
}