Skip to content

Commit

Permalink
fix(*): fix lint errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@reme3d2y
reme3d2y committed Mar 4, 2020
1 parent aa3db2c commit 86fa366
Show file tree
Hide file tree
Showing 6 changed files with 325 additions and 333 deletions.
155 changes: 75 additions & 80 deletions packages/base-input/src/Component.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,149 +1,144 @@
@import '../../themes/default.css';

:root {
--base-input-font-family: var(--font-family);

--base-input-color: var(--color-dark-indigo);
--base-input-disabled-color: var(--color-dark-indigo-60-flat);
--base-input-disabled-bg-color: var(--color-dark-indigo-15);
--base-input-bg-color: var(--color-dark-indigo-07);
--base-input-hover-bg-color: var(--color-dark-indigo-15);
--base-input-placeholder-color: var(--color-dark-indigo-60-flat);
--base-input-border-color: var(--color-dark-indigo-30-flat);
--base-input-focus-border-color: var(--color-dark-indigo);
--base-input-disabled-border-color: var(--color-dark-indigo-30-flat);
--base-input-border-radius: 4px 4px 0 0;

--base-input-side-paddings: 12px;
--base-input-font-family: var(--font-family);
--base-input-color: var(--color-dark-indigo);
--base-input-disabled-color: var(--color-dark-indigo-60-flat);
--base-input-disabled-bg-color: var(--color-dark-indigo-15);
--base-input-bg-color: var(--color-dark-indigo-07);
--base-input-hover-bg-color: var(--color-dark-indigo-15);
--base-input-placeholder-color: var(--color-dark-indigo-60-flat);
--base-input-border-color: var(--color-dark-indigo-30-flat);
--base-input-focus-border-color: var(--color-dark-indigo);
--base-input-disabled-border-color: var(--color-dark-indigo-30-flat);
--base-input-border-radius: 4px 4px 0 0;
--base-input-side-paddings: 12px;
}

.component {
max-width: 310px;
font-family: var(--base-input-font-family);
box-sizing: border-box;
max-width: 310px;
font-family: var(--base-input-font-family);
box-sizing: border-box;
}

.component:not(.disabled) .inner:hover {
background-color: var(--base-input-hover-bg-color);
background-color: var(--base-input-hover-bg-color);
}

.disabled.focused .inner {
border-bottom-color: var(--base-input-focus-border-color);
box-shadow: inset 0 -1px var(--base-input-focus-border-color);
border-bottom-color: var(--base-input-focus-border-color);
box-shadow: inset 0 -1px var(--base-input-focus-border-color);
}

.disabled .inner {
border-bottom: 1px dashed var(--base-input-disabled-border-color);
background-color: var(--base-input-disabled-bg-color);
border-bottom: 1px dashed var(--base-input-disabled-border-color);
background-color: var(--base-input-disabled-bg-color);
}

.disabled .input {
color: var(--base-input-disabled-color);
color: var(--base-input-disabled-color);
}

.inner {
display: flex;
position: relative;
background-color: var(--base-input-bg-color);
border-radius: var(--base-input-border-radius);
border-bottom: 1px solid var(--base-input-border-color);
transition: background 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
display: flex;
position: relative;
background-color: var(--base-input-bg-color);
border-radius: var(--base-input-border-radius);
border-bottom: 1px solid var(--base-input-border-color);
transition: background 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}

.input {
position: relative;
width: 100%;
color: var(--base-input-color);
background: none;
border: none;
margin: 0;
outline: none;
transition: background 0.2s ease;
font-size: 16px;
line-height: 20px;

-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
width: 100%;
color: var(--base-input-color);
background: none;
border: none;
margin: 0;
outline: none;
transition: background 0.2s ease;
font-size: 16px;
line-height: 20px;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.input::placeholder,
.input[placeholder] {
text-overflow: ellipsis;
transition: opacity .2s ease-in-out, color .2s ease-in-out;
.input::placeholder, .input[placeholder] {
text-overflow: ellipsis;
transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

.input::placeholder {
color: var(--base-input-placeholder-color);
color: var(--base-input-placeholder-color);
}

.input-wrapper {
flex-grow: 1;
position: relative;
flex-grow: 1;
position: relative;
}

.label {
overflow: hidden;
position: absolute;
display: flex;
align-items: center;
height: 100%;
left: var(--base-input-side-paddings);
color: var(--base-input-placeholder-color);
font-size: 16px;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
transform: scale(1) translateY(0);
transform-origin: 0 100%;
transition-duration: 200ms;
transition-property: color, transform, font-size;
transition-timing-function: cubic-bezier(.25, .1, .25, 1);
overflow: hidden;
position: absolute;
display: flex;
align-items: center;
height: 100%;
left: var(--base-input-side-paddings);
color: var(--base-input-placeholder-color);
font-size: 16px;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
transform: scale(1) translateY(0);
transform-origin: 0 100%;
transition-duration: 200ms;
transition-property: color, transform, font-size;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.addons {
display: flex;
flex-shrink: 0;
align-items: center;
display: flex;
flex-shrink: 0;
align-items: center;
}

.left-addons {}

.right-addos {}

.s {
padding: 14px var(--base-input-side-paddings) 13px var(--base-input-side-paddings);
padding: 14px var(--base-input-side-paddings) 13px var(--base-input-side-paddings);
}

.m {
padding: 18px var(--base-input-side-paddings) 17px var(--base-input-side-paddings);
padding: 18px var(--base-input-side-paddings) 17px var(--base-input-side-paddings);
}

.l {
padding: 24px var(--base-input-side-paddings) 23px var(--base-input-side-paddings);
padding: 24px var(--base-input-side-paddings) 23px var(--base-input-side-paddings);
}

.has-label .input::placeholder {
opacity: 0;
opacity: 0;
}

.has-label.focused .input::placeholder {
opacity: 1;;
opacity: 1;
}

.focused .label, .filled .label {
font-size: 14px;
line-height: 18px;
transform: scale(1) translateY(-10px);
font-size: 14px;
line-height: 18px;
transform: scale(1) translateY(-10px);
}

.has-label .s {
padding: 23px var(--base-input-side-paddings) 4px var(--base-input-side-paddings);
padding: 23px var(--base-input-side-paddings) 4px var(--base-input-side-paddings);
}

.has-label .m {
padding: 28px var(--base-input-side-paddings) 7px var(--base-input-side-paddings);
padding: 28px var(--base-input-side-paddings) 7px var(--base-input-side-paddings);
}

.has-label .l {
padding: 34px var(--base-input-side-paddings) 13px var(--base-input-side-paddings);
padding: 34px var(--base-input-side-paddings) 13px var(--base-input-side-paddings);
}
46 changes: 23 additions & 23 deletions packages/base-input/src/Component.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/

import {
withKnobs, select, text, boolean
withKnobs, select, text, boolean
} from '@storybook/addon-knobs';
import React, { useState } from 'react';
import { withDesign } from 'storybook-addon-designs';
Expand All @@ -13,34 +13,34 @@ import { withDesign } from 'storybook-addon-designs';
import { BaseInput } from './Component';

export default {
title: 'Common',
component: BaseInput,
decorators: [withDesign, withKnobs]
title: 'Common',
component: BaseInput,
decorators: [withDesign, withKnobs]
};

export const BaseInputStory = () => {
const [value, setValue] = useState('value');
const [value, setValue] = useState('value');

return (
<BaseInput
type={ select('type', ['text', 'number', 'card', 'email', 'file', 'hidden', 'money', 'password', 'tel', 'text'], 'text') }
size={ select('size', ['s', 'm', 'l'], 's') }
disabled={ boolean('Disabled', false) }
placeholder={ text('placeholder', '') }
label={ text('label', '') }
value={ value }
onChange={ (e: any) => setValue(e.target.value) }
/>
);
return (
<BaseInput
type={ select('type', ['text', 'number', 'card', 'email', 'file', 'hidden', 'money', 'password', 'tel', 'text'], 'text') }
size={ select('size', ['s', 'm', 'l'], 's') }
disabled={ boolean('Disabled', false) }
placeholder={ text('placeholder', '') }
label={ text('label', '') }
value={ value }
onChange={ (e: any) => setValue(e.target.value) }
/>
);
};

BaseInputStory.story = {
name: 'BaseInput',
parameters: {
design: {
type: 'figma',
// public link for testing
url: ''
}
name: 'BaseInput',
parameters: {
design: {
type: 'figma',
// public link for testing
url: ''
}
}
};

0 comments on commit 86fa366

Please sign in to comment.