Commit 0e425b2d authored by Andrey Azov's avatar Andrey Azov
Browse files

Update styles for Input

parent 686ae912
Pipeline #178140 passed with stage
in 3 minutes and 2 seconds
......@@ -8,10 +8,16 @@
&:active {
outline: none;
}
&::placeholder {
color: $black;
font-weight: $light;
}
}
.shadedInput {
box-shadow: inset 2px 2px 4px -2px $dark-grey;
box-shadow: inset 2px 2px 4px -2px $medium-dark-grey, inset -2px -2px 1px -2px $dark-grey;
border: none;
padding: 4px;
padding: 4px 15px;
height: 30px;
}
@import 'src/styles/common';
.wrapper {
max-width: 500px;
}
.greyWrapper {
background-color: $light-grey;
}
.customizedInput {
color: rosybrown;
font-size: 36px;
......
......@@ -66,7 +66,26 @@ export const FocusAndBlurStory = (args: DefaultArgs) => (
FocusAndBlurStory.storyName = 'handling focus and blur';
export const ShadedInputStory = (args: DefaultArgs) => (
<Wrapper input={ShadedInput} placeholder="Enter something..." {...args} />
<div>
<Wrapper
input={ShadedInput}
placeholder="Placeholder for dev..."
{...args}
/>
<div
style={{
marginTop: '100px',
backgroundColor: '#f1f2f4',
padding: '50px'
}}
>
<Wrapper
input={ShadedInput}
placeholder="Placeholder for dev..."
{...args}
/>
</div>
</div>
);
ShadedInputStory.storyName = 'shaded input';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment