Browse Source

Add another styled story

Demonstrate scaling of detail in styled key set.
master
TheoryOfNekomata 4 years ago
parent
commit
4be84388d0
2 changed files with 40 additions and 2 deletions
  1. +38
    -0
      src/components/Keyboard/Keyboard.stories.tsx
  2. +2
    -2
      src/components/StyledAccidentalKey/StyledAccidentalKey.tsx

+ 38
- 0
src/components/Keyboard/Keyboard.stories.tsx View File

@@ -106,3 +106,41 @@ export const Styled = (props?: Partial<Props>) => (
/>
</Wrapper>
)

export const AnotherStyled = (props?: Partial<Props>) => (
<div
style={{
// @ts-ignore
'--size-scale-factor': 2,
}}
>
<Wrapper>
<Keyboard
{...props}
startKey={21}
endKey={108}
keyChannels={[
{
channel: 0,
key: 60,
velocity: 1,
},
{
channel: 0,
key: 63,
velocity: 1,
},
{
channel: 0,
key: 67,
velocity: 1,
},
]}
keyComponents={{
natural: StyledNaturalKey,
accidental: StyledAccidentalKey,
}}
/>
</Wrapper>
</div>
)

+ 2
- 2
src/components/StyledAccidentalKey/StyledAccidentalKey.tsx View File

@@ -104,7 +104,7 @@ const B12 = styled('div')({
width: '100%',
height: '100%',
padding:
'calc(3px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1)) calc(7px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
'calc(3px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1)) calc(7px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1))',
boxSizing: 'border-box',
position: 'absolute',
top: 0,
@@ -123,7 +123,7 @@ const B14 = styled('div')({
width: '100%',
height: 'calc(6px * var(--size-scale-factor, 1))',
padding:
'0 calc(1px * var(--size-scale-factor, 1)) calc(5px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
'0 calc(1px * var(--size-scale-factor, 1)) calc(5px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
boxSizing: 'border-box',
position: 'absolute',
bottom: 0,


Loading…
Cancel
Save