fix: flexboxes containers
This commit is contained in:
parent
d970f5a5b3
commit
627e33c4b7
.idea
app
src
primitive-components
styles
.sass-cache
8b8ae4cfe093f9b8cd4cfabc532cf27ca06131f7
dea5f55dc4d726c922f4841b8139fc62e62f2286
|
|
@ -0,0 +1,25 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectTasksOptions">
|
||||
<TaskOptions isEnabled="true">
|
||||
<option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
|
||||
<option name="checkSyntaxErrors" value="true" />
|
||||
<option name="description" />
|
||||
<option name="exitCodeBehavior" value="ERROR" />
|
||||
<option name="fileExtension" value="sass" />
|
||||
<option name="immediateSync" value="true" />
|
||||
<option name="name" value="Sass" />
|
||||
<option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
|
||||
<option name="outputFilters">
|
||||
<array />
|
||||
</option>
|
||||
<option name="outputFromStdout" value="false" />
|
||||
<option name="program" value="sass" />
|
||||
<option name="runOnExternalChanges" value="true" />
|
||||
<option name="scopeName" value="Project Files" />
|
||||
<option name="trackOnlyRoot" value="true" />
|
||||
<option name="workingDir" value="$FileDir$" />
|
||||
<envs />
|
||||
</TaskOptions>
|
||||
</component>
|
||||
</project>
|
||||
121
app/page.tsx
121
app/page.tsx
|
|
@ -1,113 +1,24 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import Fabs from './components/fabs';
|
||||
import Badges from './components/badges';
|
||||
import Radios from './components/radios';
|
||||
import Buttons from './components/buttons';
|
||||
import Switches from './components/switches';
|
||||
import Checkboxes from './components/checkboxes';
|
||||
import IconButtons from './components/icon-buttons';
|
||||
import { TextFields } from './components/text-fields';
|
||||
import {
|
||||
ButtonLayout,
|
||||
Divider,
|
||||
SegmentedButtons,
|
||||
} from '../src/primitive-components/components';
|
||||
import { Button, Divider } from '../src/primitive-components/components';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Fragment>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
overflowX: 'auto',
|
||||
gap: '0em',
|
||||
}}
|
||||
>
|
||||
<h1>Google Material You UI kit</h1>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.5em',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className={'m3 m3-wrapper'}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
padding: '25px',
|
||||
}}
|
||||
>
|
||||
<SegmentedButtons>
|
||||
<ButtonLayout>Segment 1</ButtonLayout>
|
||||
<ButtonLayout>Segment 2</ButtonLayout>
|
||||
</SegmentedButtons>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={'m3 m3-wrapper'}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0.5em',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
padding: '25px',
|
||||
}}
|
||||
>
|
||||
<Buttons />
|
||||
</div>
|
||||
<Divider
|
||||
orientation={'vertical'}
|
||||
variant={'middle-inset'}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
padding: '25px',
|
||||
}}
|
||||
>
|
||||
<IconButtons />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={'m3 m3-wrapper'}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0.5em',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Checkboxes />
|
||||
<Divider
|
||||
orientation={'vertical'}
|
||||
variant={'middle-inset'}
|
||||
/>
|
||||
<Radios />
|
||||
<Divider
|
||||
orientation={'vertical'}
|
||||
variant={'middle-inset'}
|
||||
/>
|
||||
<Badges />
|
||||
</div>
|
||||
<Switches />
|
||||
<TextFields />
|
||||
<Fabs />
|
||||
<div className={'m3 m3-wrapper'}>
|
||||
<div>
|
||||
<Button>Label</Button>
|
||||
</div>
|
||||
<Divider orientation={'vertical'} variant={'full-width'} />
|
||||
<div>
|
||||
<Button>Label</Button>
|
||||
</div>
|
||||
<Divider orientation={'vertical'} variant={'inset'} />
|
||||
<div>
|
||||
<Button>Label</Button>
|
||||
</div>
|
||||
<Divider orientation={'vertical'} variant={'middle-inset'} />
|
||||
<div>
|
||||
<Button disabled>Label</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const Badge = forwardRef<SVGSVGElement, BadgeProps>(
|
|||
>
|
||||
{children && (
|
||||
<text x={'50%'} y={'50%'}>
|
||||
{children}
|
||||
{parseInt(children) > 999 ? '999+' : children}
|
||||
</text>
|
||||
)}
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import React, { forwardRef, HTMLAttributes } from 'react';
|
||||
|
||||
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
variant?: 'outlined' | 'filled' | 'elevated';
|
||||
}
|
||||
|
||||
const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
({ variant = 'filled', ...props }, ref) => {
|
||||
const classes =
|
||||
`m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
|
||||
|
||||
return (
|
||||
<div {...props} className={classes} ref={ref}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default Card;
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,26 +1,26 @@
|
|||
hr.m3.m3-divider
|
||||
border: none
|
||||
outline: 0.5px solid var(--md-sys-color-outline-variant)
|
||||
margin-inline: 4px
|
||||
position: relative
|
||||
margin: 0
|
||||
|
||||
&.vertical
|
||||
height: 100%
|
||||
height: auto
|
||||
writing-mode: vertical-lr
|
||||
|
||||
&.inset
|
||||
margin-top: 16px
|
||||
margin-inline-start: 16px
|
||||
|
||||
&.middle-inset
|
||||
margin-bottom: 16px
|
||||
margin-top: 16px
|
||||
margin-inline: 16px
|
||||
|
||||
|
||||
&.horizontal
|
||||
width: 100%
|
||||
width: auto
|
||||
writing-mode: horizontal-tb
|
||||
|
||||
&.inset
|
||||
margin-left: 16px
|
||||
margin-inline-start: 16px
|
||||
|
||||
&.middle-inset
|
||||
margin-left: 16px
|
||||
margin-right: 16px
|
||||
margin-inline: 16px
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -25,7 +25,6 @@ html
|
|||
user-select: none
|
||||
|
||||
.m3.m3-wrapper
|
||||
width: 100%
|
||||
position: relative
|
||||
display: block
|
||||
background-color: var(--md-sys-color-surface)
|
||||
|
|
|
|||
Loading…
Reference in New Issue