fix: flexboxes containers
This commit is contained in:
25
.idea/watcherTasks.xml
generated
Normal file
25
.idea/watcherTasks.xml
generated
Normal file
@@ -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>
|
||||
|
||||
20
src/primitive-components/card/card.tsx
Normal file
20
src/primitive-components/card/card.tsx
Normal file
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user