mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-29 08:20:21 +05:30
#14: improve reCaptcha styles
This commit is contained in:
parent
a8d72787b2
commit
b2e6276b96
@ -1,5 +1,7 @@
|
|||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import captcha from 'services/captcha';
|
import captcha from 'services/captcha';
|
||||||
import { skins, SKIN_DARK } from 'components/ui';
|
import { skins, SKIN_DARK } from 'components/ui';
|
||||||
|
|
||||||
@ -25,9 +27,14 @@ export default class Captcha extends FormInputComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const {skin} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div ref={this.setEl} className={styles.captcha} />
|
<div ref={this.setEl} className={classNames(
|
||||||
|
styles.captcha,
|
||||||
|
styles[`${skin}Captcha`]
|
||||||
|
)} />
|
||||||
{this.renderError()}
|
{this.renderError()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -296,12 +296,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.captcha {
|
.captcha {
|
||||||
width: 302px;
|
box-sizing: border-box;
|
||||||
height: 76px;
|
width: 100%;
|
||||||
|
max-width: 302px;
|
||||||
|
height: 77px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
border: 2px solid;
|
||||||
|
transition: border-color .25s;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
margin: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
// minimum captcha width is 302px, which can not be changed
|
// minimum captcha width is 302px, which can not be changed
|
||||||
// using transform to scale down to 296px
|
// using transform to scale down to 296px
|
||||||
transform-origin: 0;
|
// transform-origin: 0;
|
||||||
transform: scaleX(0.98);
|
// transform: scaleX(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkCaptcha {
|
||||||
|
border-color: lighter($black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightCaptcha {
|
||||||
|
border-color: #dcd8cd;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
Reference in New Issue
Block a user