ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-01-16 00:23:10 +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}> <h2 className={popupStyles.headerTitle}>
<Message {...messages.title} /> <Message {...messages.title} />
</h2> </h2>
<span className={classNames(icons.close, styles.close)} onClick={onClose} /> <span className={classNames(icons.close, popupStyles.close)} onClick={onClose} />
</div> </div>
<Form form={form} onSubmit={this.onSubmit}> <Form form={form} onSubmit={this.onSubmit}>

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

@ -5,23 +5,6 @@
.contactForm { .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 { .philosophicalThought {
font-family: $font-family-title; font-family: $font-family-title;
font-size: 19px; font-size: 19px;

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

@ -60,6 +60,7 @@ $popupPadding: 20px;
} }
.header { .header {
position: relative;
background: $light; background: $light;
padding: 15px $popupPadding; padding: 15px $popupPadding;
border-bottom: 1px solid #dedede; border-bottom: 1px solid #dedede;
@ -74,3 +75,27 @@ $popupPadding: 20px;
.body { .body {
padding: $popupPadding; 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;
}
}