doryan
/
material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

resolve conflicts

This commit is contained in:
doryan 2025-04-03 11:33:23 +04:00
parent cf89a4cd3b
commit b0baf42862
8 changed files with 60 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.idea/inspectionProfiles/Project_Default.xml
View File

@ -1,6 +1,22 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myCustomPropertiesEnabled" value="true" />
<option name="myIgnoreVendorSpecificProperties" value="false" />
<option name="myCustomPropertiesList">
<value>
<list size="6">
<item index="0" class="java.lang.String" itemvalue="cy" />
<item index="1" class="java.lang.String" itemvalue="cx" />
<item index="2" class="java.lang.String" itemvalue="r" />
<item index="3" class="java.lang.String" itemvalue="rx" />
<item index="4" class="java.lang.String" itemvalue="x" />
<item index="5" class="java.lang.String" itemvalue="y" />
</list>
</value>
</option>
</inspection_tool>
<inspection_tool class="ES6PreferShortImport" enabled="false" level="WARNING" enabled_by_default="false" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>

91
app/page.tsx
View File

@ -1,7 +1,11 @@
import React from 'react';
import testImage1 from './test-images/test-image-1.jpg';
import { Card } from '../src/primitive-components/card/card';
import { Checkbox } from '../src/primitive-components/components';
import {
Button,
Checkbox,
IconButton,
} from '../src/primitive-components/components';
import { CardBody } from '../src/primitive-components/card/card-body';
import { CardMedia } from '../src/primitive-components/card/card-media';
import { CardFooter } from '../src/primitive-components/card/card-footer';
@ -29,78 +33,23 @@ export default function Page() {
style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
>
<Card variant={'outlined'}>
<CardHeader>
<Typography role={'headline'} size={'large'}>
Welcome to Material You for Next.js!
</Typography>
<Typography role={'body'} size={'large'}>
{"It's UI kit for fast frontend development!"}
</Typography>
</CardHeader>
<CardActionArea>
<CardMedia src={testImage1.src} type={'img'} />
<CardBody>
<Typography role={'body'} size={'large'}>
Lorem ipsum dolor sit amet, consecrate
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</Typography>
</CardBody>
</CardActionArea>
<CardFooter>
<div className={'flex flex-row gap-3'}>
<Button icon={'add'}>Label 1</Button>
<Button icon={'add'} iconPlace={'right'}>
<SegmentedButtons toggled={true}>
<SegmentButton
fillIcon={1}
icon={'change_history'}
>
Label 1
</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
>
Label 2
</Button>
<SegmentedButtons toggled={true}>
<SegmentButton
fillIcon={1}
icon={'change_history'}
>
Label 1
</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
>
Label 2
</SegmentButton>
<SegmentButton disabled>
Label 3
</SegmentButton>
</SegmentedButtons>
<Checkbox />
<Slider
defaultValue={0}
max={100}
min={0}
options={[0, 10, 20, 100]}
/>
<Slider defaultValue={0} max={100} min={0} />
<div>
<input
list={'lol'}
max={100}
min={0}
type={'range'}
/>
<datalist id={'lol'}>
<option value={0} />
<option value={50} />
<option value={100} />
</datalist>
</div>
</div>
</SegmentButton>
<SegmentButton disabled>Label 3</SegmentButton>
</SegmentedButtons>
</CardFooter>
</Card>
</div>

14
src/styles/button-styles/segmented-button.sass
View File

@ -1,20 +1,18 @@
div.m3.m3-segmented-buttons
padding: 0
height: 40px
display: flex
flex-direction: row
display: inline-flex
border-radius: 20px
box-sizing: border-box
border-collapse: collapse
& > button.m3.m3-button-segment
width: auto
height: 40px
display: flex
padding: 10px
min-width: 108px
border-radius: 0
width: max-content
padding-inline: 10px
margin: 0 -0.5px 0 -0.5px
margin: 0 -0.5px
display: inline-flex
background-color: transparent
border: 1px solid var(--md-sys-color-outline)
@ -46,9 +44,9 @@ div.m3.m3-segmented-buttons
fill: var(--md-sys-color-on-secondary-container)
& > span.m3.m3-button-segment-state-layer
position: absolute
width: 100%
height: 100%
position: absolute
& > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
transition: .2s cubic-bezier(0.2, 0, 0, 1)

2
src/styles/fonts.sass
View File

@ -10,7 +10,7 @@ $weights: ("Thin": 100, "Light": 300, "Regular": 400, "Medium": 500, "Bold": 700
@each $name, $weight in $weights
@font-face
font-family: Roboto
font-family: Roboto, system-ui
font-face-name: #{$name}
font-weight: #{$weight}
src: url("./font/Roboto-#{$name}.ttf")

29
src/styles/generics.css
View File

@ -73,8 +73,9 @@ div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple {
}
svg.m3.m3-svg-icon > text {
alignment-baseline: central;
text-anchor: middle;
dominant-baseline: middle;
alignment-baseline: middle;
}
svg.m3.m3-svg-icon > text.m3-size-12px {
width: 12px;
@ -186,37 +187,37 @@ svg.m3.m3-badge > text {
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
}
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Thin;
font-weight: 100;
src: url("./font/Roboto-Thin.ttf");
}
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Light;
font-weight: 300;
src: url("./font/Roboto-Light.ttf");
}
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Regular;
font-weight: 400;
src: url("./font/Roboto-Regular.ttf");
}
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Medium;
font-weight: 500;
src: url("./font/Roboto-Medium.ttf");
}
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Bold;
font-weight: 700;
src: url("./font/Roboto-Bold.ttf");
}
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Black;
font-weight: 900;
src: url("./font/Roboto-Black.ttf");
@ -721,20 +722,18 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
div.m3.m3-segmented-buttons {
padding: 0;
height: 40px;
display: flex;
flex-direction: row;
display: inline-flex;
border-radius: 20px;
box-sizing: border-box;
border-collapse: collapse;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
width: auto;
height: 40px;
display: flex;
padding: 10px;
min-width: 108px;
border-radius: 0;
width: max-content;
padding-inline: 10px;
margin: 0 -0.5px 0 -0.5px;
margin: 0 -0.5px;
display: inline-flex;
background-color: transparent;
border: 1px solid var(--md-sys-color-outline);
}
@ -766,9 +765,9 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span > text
fill: var(--md-sys-color-on-secondary-container);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
position: absolute;
width: 100%;
height: 100%;
position: absolute;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer, div.m3.m3-segmented-buttons > button.m3.m3-button-segment span.m3.m3-ripple-domain {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);

2
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long

3
src/styles/icon.sass
View File

@ -3,8 +3,9 @@ svg.m3.m3-svg-icon
$types: ["Outlined", "Rounded", "Sharp"]
& > text
alignment-baseline: central
text-anchor: middle
dominant-baseline: middle
alignment-baseline: middle
@each $size in $sizes
& > text.m3-size-#{$size}

0
src/styles/typography.sass Normal file
View File