From a3cf38e458e64d449d6dbd986177b19f99bb54cf Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Sat, 9 Jan 2016 15:51:55 +0200 Subject: [PATCH] =?UTF-8?q?=D0=92=D1=82=D0=BE=D1=80=D0=BE=D0=B9=20=D1=81?= =?UTF-8?q?=D0=BB=D0=B0=D0=B9=D0=B4=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20?= =?UTF-8?q?=D0=B0=D0=B2=D1=82=D0=BE=D1=80=D0=B8=D0=B7=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/SignIn.jsx | 89 +++++++++++++-------------------- src/components/auth/signIn.scss | 23 +++++++++ src/components/ui/Form.jsx | 20 +++++++- src/components/ui/Panel.jsx | 11 ++++ src/components/ui/form.scss | 87 ++++++++++++++++++++++++++++++-- src/components/ui/panel.scss | 28 ++++++++++- webpack.config.js | 11 ++-- 7 files changed, 208 insertions(+), 61 deletions(-) diff --git a/src/components/auth/SignIn.jsx b/src/components/auth/SignIn.jsx index f3cb3e2..2c68b62 100644 --- a/src/components/auth/SignIn.jsx +++ b/src/components/auth/SignIn.jsx @@ -5,15 +5,13 @@ import classNames from 'classnames'; import buttons from 'components/ui/buttons.scss'; import icons from 'components/ui/icons.scss'; -import { Panel, PanelBody, PanelFooter } from 'components/ui/Panel'; -import { Input } from 'components/ui/Form'; +import { Panel, PanelBody, PanelFooter, PanelError } from 'components/ui/Panel'; +import { Input, Checkbox } from 'components/ui/Form'; import styles from './signIn.scss'; import messages from './SignIn.messages'; -import panel from 'components/ui/panel.scss'; - // 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) /** @@ -58,35 +56,31 @@ export default class SignIn extends Component {
}> -
- -
- - - - ) - }} /> -
+ + +
+ + + + ) + }} /> + + } />
- + {/**/} +
erickskrauch@yandex.ru
-
- -
+ -
- -
+ } />
); } + +export class Checkbox extends Component { + displayName = 'Checkbox'; + + render() { + var { label } = this.props; + + return ( +
+
); } + +export function PanelError(props) { + var { message } = props; + + return ( +
+ + {message} +
+ ); +} diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss index 3f664ed..60c1447 100644 --- a/src/components/ui/form.scss +++ b/src/components/ui/form.scss @@ -1,6 +1,15 @@ @import '~components/ui/colors.scss'; @import '~components/ui/fonts.scss'; +@mixin form-transition() { + // Анимация фона должна быть быстрее анимации рамки, т.к. визуально фон заполняется медленнее + transition: border-color .25s, + background-color .20s; +} + +/** + * Input + */ .formRow { position: relative; height: 50px; @@ -66,6 +75,8 @@ .formFieldIcon { box-sizing: border-box; position: absolute; + left: 0; + top: 0; height: 50px; width: 50px; line-height: 46px; @@ -73,7 +84,77 @@ border: 2px solid lighter($black); color: #444; - // Анимация фона должна быть быстрее анимации рамки, т.к. визуально фон заполняется медленнее - transition: border-color .25s, - background-color .20s; + @include form-transition(); +} + + +/** + * Checkbox + */ +.checkboxRow { + height: 22px; + margin-top: 15px; +} + +.checkboxContainer { + display: inline-block; + position: relative; + padding-left: 27px; + + font-family: $font-family-title; + font-size: 16px; + line-height: 24px; + color: #fff; + + cursor: pointer; + + &:hover { + .checkbox { + border-color: $green; + } + } +} + +.checkboxPosition { + position: absolute; + box-sizing: border-box; + left: 0; + top: 0; + margin: 0; + + width: 22px; + height: 22px; +} + +.checkboxInput { + composes: checkboxPosition; + opacity: 0; + + &:checked { + + .checkbox { + background: $green; + border-color: $green; + + &:before { + opacity: 1; + } + } + } +} + +.checkbox { + composes: checkboxPosition; + composes: checkmark from './icons.scss'; + + border: 2px #fff solid; + + font-size: 10px; + line-height: 18px; + + @include form-transition(); + + &:before { + opacity: 0; + transition: opacity 0.3s; + } } diff --git a/src/components/ui/panel.scss b/src/components/ui/panel.scss index 88d833c..1a7e48d 100644 --- a/src/components/ui/panel.scss +++ b/src/components/ui/panel.scss @@ -12,7 +12,7 @@ font-family: $font-family-title; text-align: center; - line-height: 48px; + line-height: 50px; font-size: 20px; color: #fff; } @@ -60,3 +60,29 @@ flex-grow: 1; } } + +.error { + position: relative; + padding: 10px; + margin: -15px; + margin-bottom: 15px; + + background: #e66c69; + border: 1px #e15457 solid; + + font-size: 14px; + line-height: 1.3; + color: #fff; +} + +.close { + composes: close from './icons.scss'; + + position: absolute; + right: 5px; + top: 5px; + + font-size: 10px; + + cursor: pointer; +} diff --git a/webpack.config.js b/webpack.config.js index 3cd8222..37a29a7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -27,7 +27,7 @@ var isTest = process.argv.some(function(arg) { }); const API_HOST = 'http://account.l'; -const CSS_CLASS_TEMPLATE = isProduction ? '[hash:base64]' : '[path][name]-[local]'; +const CSS_CLASS_TEMPLATE = isProduction ? '[hash:base64:5]' : '[path][name]-[local]'; var webpackConfig = { entry: { @@ -131,7 +131,7 @@ var webpackConfig = { postcss: [ cssnano({ - sourcemap: !isProduction, + // sourcemap: !isProduction, autoprefixer: { add: true, remove: true, @@ -153,7 +153,12 @@ if (isProduction) { webpackConfig.module.loaders.forEach((loader) => { if (loader.extractInProduction) { var parts = loader.loader.split('!'); - loader.loader = ExtractTextPlugin.extract(parts[0], parts.slice(1).join('!')); + loader.loader = ExtractTextPlugin.extract( + parts[0], + parts.slice(1) + .join('!') + .replace(/[&?]sourcemap/, '') + ); } });