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 @@ ...@@ -8,10 +8,16 @@
&:active { &:active {
outline: none; outline: none;
} }
&::placeholder {
color: $black;
font-weight: $light;
}
} }
.shadedInput { .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; border: none;
padding: 4px; padding: 4px 15px;
height: 30px;
} }
@import 'src/styles/common';
.wrapper { .wrapper {
max-width: 500px; max-width: 500px;
} }
.greyWrapper {
background-color: $light-grey;
}
.customizedInput { .customizedInput {
color: rosybrown; color: rosybrown;
font-size: 36px; font-size: 36px;
......
...@@ -66,7 +66,26 @@ export const FocusAndBlurStory = (args: DefaultArgs) => ( ...@@ -66,7 +66,26 @@ export const FocusAndBlurStory = (args: DefaultArgs) => (
FocusAndBlurStory.storyName = 'handling focus and blur'; FocusAndBlurStory.storyName = 'handling focus and blur';
export const ShadedInputStory = (args: DefaultArgs) => ( 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'; 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