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

TODO: fix segmented and default buttons styles for firefox

This commit is contained in:
doryan04 2024-02-21 23:21:52 +04:00
parent cb04ae521a
commit b421ac7e4c
8 changed files with 61 additions and 101 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"> <component name="InspectionProjectProfileManager">
<profile version="1.0"> <profile version="1.0">
<option name="myName" value="Project Default" /> <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="ES6PreferShortImport" enabled="false" level="WARNING" enabled_by_default="false" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" /> <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile> </profile>

84
app/page.tsx
View File

@ -1,7 +1,11 @@
import React from 'react'; import React from 'react';
import testImage1 from './test-images/test-image-1.jpg'; import testImage1 from './test-images/test-image-1.jpg';
import { Card } from '../src/primitive-components/card/card'; import { Card } from '../src/primitive-components/card/card';
import { Checkbox, IconButton } from '../src/primitive-components/components'; import {
Button,
Checkbox,
IconButton,
} from '../src/primitive-components/components';
import { CardBody } from '../src/primitive-components/card/card-body'; import { CardBody } from '../src/primitive-components/card/card-body';
import { CardMedia } from '../src/primitive-components/card/card-media'; import { CardMedia } from '../src/primitive-components/card/card-media';
import { CardFooter } from '../src/primitive-components/card/card-footer'; import { CardFooter } from '../src/primitive-components/card/card-footer';
@ -28,69 +32,23 @@ export default function Page() {
style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }} style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
> >
<Card variant={'outlined'}> <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> <CardFooter>
<div className={'flex flex-row gap-3'}> <SegmentedButtons toggled={true}>
<IconButton <SegmentButton
icon={'add'} fillIcon={1}
toggled={{ icon={'change_history'}
selected: 'settings', >
unselected: 'add', Label 1
}} </SegmentButton>
variant={'filled'} <SegmentButton
/> fillIcon={1}
<SegmentedButtons toggled={true}> icon={'change_history'}
<SegmentButton iconPlace={'right'}
fillIcon={1} >
icon={'change_history'} Label 2
> </SegmentButton>
Label 1 <SegmentButton disabled>Label 3</SegmentButton>
</SegmentButton> </SegmentedButtons>
<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>
</CardFooter> </CardFooter>
</Card> </Card>
</div> </div>

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

@ -1,20 +1,18 @@
div.m3.m3-segmented-buttons div.m3.m3-segmented-buttons
padding: 0 padding: 0
height: 40px height: 40px
display: flex display: inline-flex
flex-direction: row
border-radius: 20px border-radius: 20px
box-sizing: border-box box-sizing: border-box
border-collapse: collapse
& > button.m3.m3-button-segment & > button.m3.m3-button-segment
width: auto
height: 40px height: 40px
display: flex padding: 10px
min-width: 108px min-width: 108px
border-radius: 0 border-radius: 0
width: max-content margin: 0 -0.5px
padding-inline: 10px display: inline-flex
margin: 0 -0.5px 0 -0.5px
background-color: transparent background-color: transparent
border: 1px solid var(--md-sys-color-outline) border: 1px solid var(--md-sys-color-outline)
@ -49,9 +47,9 @@ div.m3.m3-segmented-buttons
fill: var(--md-sys-color-on-secondary-container) fill: var(--md-sys-color-on-secondary-container)
& > span.m3.m3-button-segment-state-layer & > span.m3.m3-button-segment-state-layer
position: absolute
width: 100% width: 100%
height: 100% height: 100%
position: absolute
& > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain & > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
transition: .2s cubic-bezier(0.2, 0, 0, 1) 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 @each $name, $weight in $weights
@font-face @font-face
font-family: Roboto, sans-serif font-family: Roboto, system-ui
font-face-name: #{$name} font-face-name: #{$name}
font-weight: #{$weight} font-weight: #{$weight}
src: url("./font/Roboto-#{$name}.ttf") src: url("./font/Roboto-#{$name}.ttf")

36
src/styles/generics.css
View File

@ -73,8 +73,8 @@ div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span
svg.m3.m3-svg-icon > text { svg.m3.m3-svg-icon > text {
text-anchor: middle; text-anchor: middle;
dominant-baseline: central; dominant-baseline: middle;
alignment-baseline: central; alignment-baseline: middle;
} }
svg.m3.m3-svg-icon > text.m3-size-12px { svg.m3.m3-svg-icon > text.m3-size-12px {
width: 12px; width: 12px;
@ -186,37 +186,37 @@ svg.m3.m3-badge > text {
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
} }
@font-face { @font-face {
font-family: Roboto, sans-serif; font-family: Roboto, system-ui;
font-face-name: Thin; font-face-name: Thin;
font-weight: 100; font-weight: 100;
src: url("./font/Roboto-Thin.ttf"); src: url("./font/Roboto-Thin.ttf");
} }
@font-face { @font-face {
font-family: Roboto, sans-serif; font-family: Roboto, system-ui;
font-face-name: Light; font-face-name: Light;
font-weight: 300; font-weight: 300;
src: url("./font/Roboto-Light.ttf"); src: url("./font/Roboto-Light.ttf");
} }
@font-face { @font-face {
font-family: Roboto, sans-serif; font-family: Roboto, system-ui;
font-face-name: Regular; font-face-name: Regular;
font-weight: 400; font-weight: 400;
src: url("./font/Roboto-Regular.ttf"); src: url("./font/Roboto-Regular.ttf");
} }
@font-face { @font-face {
font-family: Roboto, sans-serif; font-family: Roboto, system-ui;
font-face-name: Medium; font-face-name: Medium;
font-weight: 500; font-weight: 500;
src: url("./font/Roboto-Medium.ttf"); src: url("./font/Roboto-Medium.ttf");
} }
@font-face { @font-face {
font-family: Roboto, sans-serif; font-family: Roboto, system-ui;
font-face-name: Bold; font-face-name: Bold;
font-weight: 700; font-weight: 700;
src: url("./font/Roboto-Bold.ttf"); src: url("./font/Roboto-Bold.ttf");
} }
@font-face { @font-face {
font-family: Roboto, sans-serif; font-family: Roboto, system-ui;
font-face-name: Black; font-face-name: Black;
font-weight: 900; font-weight: 900;
src: url("./font/Roboto-Black.ttf"); src: url("./font/Roboto-Black.ttf");
@ -305,12 +305,6 @@ div.m3.m3-container.m3-container-elevated {
background-color: var(--md-sys-color-surface-container-low); background-color: var(--md-sys-color-surface-container-low);
} }
label {
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
button.m3.m3-fab { button.m3.m3-fab {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
} }
@ -730,20 +724,18 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
div.m3.m3-segmented-buttons { div.m3.m3-segmented-buttons {
padding: 0; padding: 0;
height: 40px; height: 40px;
display: flex; display: inline-flex;
flex-direction: row;
border-radius: 20px; border-radius: 20px;
box-sizing: border-box; box-sizing: border-box;
border-collapse: collapse;
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment { div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
width: auto;
height: 40px; height: 40px;
display: flex; padding: 10px;
min-width: 108px; min-width: 108px;
border-radius: 0; border-radius: 0;
width: max-content; margin: 0 -0.5px;
padding-inline: 10px; display: inline-flex;
margin: 0 -0.5px 0 -0.5px;
background-color: transparent; background-color: transparent;
border: 1px solid var(--md-sys-color-outline); border: 1px solid var(--md-sys-color-outline);
} }
@ -778,9 +770,9 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span > text
fill: var(--md-sys-color-on-secondary-container); 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 { div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
position: absolute;
width: 100%; width: 100%;
height: 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 { 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); 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

4
src/styles/icon.sass
View File

@ -4,8 +4,8 @@ svg.m3.m3-svg-icon
& > text & > text
text-anchor: middle text-anchor: middle
dominant-baseline: central dominant-baseline: middle
alignment-baseline: central alignment-baseline: middle
@each $size in $sizes @each $size in $sizes
& > text.m3-size-#{$size} & > text.m3-size-#{$size}

4
src/styles/typography.sass
View File

@ -1,4 +0,0 @@
label
white-space: nowrap
display: inline-block
vertical-align: middle