Skip to content

Commit

Permalink
Fix linter errors in input scss
Browse files Browse the repository at this point in the history
  • Loading branch information
javivelasco committed Oct 12, 2015
1 parent d516ff2 commit 4e73906
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 5 deletions.
5 changes: 2 additions & 3 deletions components/input/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,12 @@ export default React.createClass({

render () {
let className = style.root;
let labelClassName = style.label;
if (this.props.error) className += ` ${style.errored}`;
if (this.props.disabled) className += ` ${style.disabled}`;
if (this.props.className) className += ` ${this.props.className}`;
if (this.props.type === 'hidden') className += ` ${style.hidden}`;
if (this.props.icon) className += ` ${style.with_icon}`;

let labelClassName = style.label;
if (this.props.icon) className += ` ${style['with-icon']}`;
if (!this.props.floating) labelClassName += ` ${style.fixed}`;

return (
Expand Down
17 changes: 15 additions & 2 deletions components/input/style.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "../variables";
@import "../mixins";

$input-padding: 2 * $unit;
$input-field-height: 1.6 * $unit;
$input-field-padding: .8 * $unit;
Expand All @@ -19,14 +20,15 @@ $input-icon-size: 2 * $input-icon-font-size;
.root {
position: relative;
padding: $input-padding 0;
&.with_icon {

&.with-icon {
margin-left: $input-icon-size;
}
}

.icon {
position: absolute;
top: $offset ;
top: $offset;
left: -$input-icon-size;
display: block;
width: $input-icon-size;
Expand All @@ -48,23 +50,28 @@ $input-icon-size: 2 * $input-icon-font-size;
border: 0;
border-bottom: 1px solid $input-text-bottom-border-color;
outline: none;

&:focus {
~ .bar:before, ~ .bar:after {
width: 50%;
}

~ .label:not(.fixed) {
color: $input-text-highlight-color;
}

~ .icon {
color: $input-text-highlight-color;
}
}

&:focus, &.filled {
~ .label:not(.fixed) {
top: $input-focus-label-top;
font-size: $input-label-font-size;
}
}

&.filled ~ .label.fixed {
display: none;
}
Expand All @@ -87,6 +94,7 @@ $input-icon-size: 2 * $input-icon-font-size;
position: relative;
display: block;
width: 100%;

&:before, &:after {
@include material-animation-default();
position: absolute;
Expand All @@ -97,9 +105,11 @@ $input-icon-size: 2 * $input-icon-font-size;
background-color: $input-text-highlight-color;
transition-property: width, background-color;
}

&:before {
left: 50%;
}

&:after {
right: 50%;
}
Expand All @@ -118,12 +128,15 @@ $input-icon-size: 2 * $input-icon-font-size;

.errored {
padding-bottom: 0;

> .input {
border-bottom-color: $input-text-error-color;

&:focus {
~ .label:not(.fixed) {
color: $input-text-error-color;
}

~ .bar:before, ~ .bar:after {
background-color: $input-text-error-color;
}
Expand Down

0 comments on commit 4e73906

Please sign in to comment.