diff --git a/src/components/auth/SignIn.jsx b/src/components/auth/SignIn.jsx index 2c68b62..3bb1392 100644 --- a/src/components/auth/SignIn.jsx +++ b/src/components/auth/SignIn.jsx @@ -149,15 +149,15 @@ export default class SignIn extends Component { }> {/* TODO: E-mail i18n*/} - + {/* TODO: E-mail i18n*/} - + {/* TODO: Account password i18n*/} - + {/* TODO: Account password i18n*/} - + - @@ -194,7 +194,7 @@ export default class SignIn extends Component { {/* TODO: E-mail i18n*/} - + diff --git a/src/components/ui/Form.jsx b/src/components/ui/Form.jsx index da93a35..0f5c3e7 100644 --- a/src/components/ui/Form.jsx +++ b/src/components/ui/Form.jsx @@ -6,23 +6,24 @@ import icons from './icons.scss'; import styles from './form.scss'; export function Input(props) { + var { icon, color = 'green' } = props; + props = { type: 'text', ...props }; var baseClass = styles.formRow; - var icon; - if (props.icon) { + if (icon) { baseClass = styles.formIconRow; icon = ( - + ); } return ( - + {icon} ); @@ -32,10 +33,10 @@ export class Checkbox extends Component { displayName = 'Checkbox'; render() { - var { label } = this.props; + var { label, color = 'green' } = this.props; return ( - + diff --git a/src/components/ui/buttons.scss b/src/components/ui/buttons.scss index 8d143d4..96b65ce 100644 --- a/src/components/ui/buttons.scss +++ b/src/components/ui/buttons.scss @@ -1,8 +1,8 @@ @import './colors.scss'; @import './fonts.scss'; -@mixin button-color($colorName, $backgroundColor, $textColor : $defaultButtonTextColor) { - .#{$colorName} { +@mixin button-theme($themeName, $backgroundColor, $textColor : $defaultButtonTextColor) { + .#{$themeName} { composes: button; @if ($textColor != $defaultButtonTextColor) { @@ -56,5 +56,5 @@ } } -@include button-color('blue', $blue); -@include button-color('green', $green); +@include button-theme('blue', $blue); +@include button-theme('green', $green); diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss index 60c1447..7062dec 100644 --- a/src/components/ui/form.scss +++ b/src/components/ui/form.scss @@ -10,6 +10,21 @@ /** * Input */ +@mixin input-theme($themeName, $color) { + .#{$themeName}TextField { + composes: textField; + + &:focus { + border-color: $color; + + ~ .formFieldIcon { + background: $color; + border-color: $color; + } + } + } +} + .formRow { position: relative; height: 50px; @@ -59,13 +74,10 @@ } &:focus { - border-color: $green; color: #fff; outline: none; ~ .formFieldIcon { - background: $green; - border-color: $green; color: #fff; } } @@ -87,10 +99,36 @@ @include form-transition(); } +@include input-theme('green', $green); +@include input-theme('blue', $blue); + /** * Checkbox */ +@mixin checkbox-theme($themeName, $color) { + .#{$themeName}CheckboxRow { + composes: checkboxRow; + + .checkboxContainer { + &:hover { + .checkbox { + border-color: $color; + } + } + } + + .checkboxInput { + &:checked { + + .checkbox { + background: $color; + border-color: $color; + } + } + } + } +} + .checkboxRow { height: 22px; margin-top: 15px; @@ -107,12 +145,6 @@ color: #fff; cursor: pointer; - - &:hover { - .checkbox { - border-color: $green; - } - } } .checkboxPosition { @@ -132,9 +164,6 @@ &:checked { + .checkbox { - background: $green; - border-color: $green; - &:before { opacity: 1; } @@ -158,3 +187,6 @@ transition: opacity 0.3s; } } + +@include checkbox-theme('green', $green); +@include checkbox-theme('blue', $blue);