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">
<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>

54
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, 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 { CardMedia } from '../src/primitive-components/card/card-media';
import { CardFooter } from '../src/primitive-components/card/card-footer';
@ -28,42 +32,7 @@ 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'}>
<IconButton
icon={'add'}
toggled={{
selected: 'settings',
unselected: 'add',
}}
variant={'filled'}
/>
<SegmentedButtons toggled={true}>
<SegmentButton
fillIcon={1}
@ -78,19 +47,8 @@ export default function Page() {
>
Label 2
</SegmentButton>
<SegmentButton disabled>
Label 3
</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>
</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)
@ -49,9 +47,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, sans-serif
font-family: Roboto, system-ui
font-face-name: #{$name}
font-weight: #{$weight}
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 {
text-anchor: middle;
dominant-baseline: central;
alignment-baseline: central;
dominant-baseline: middle;
alignment-baseline: middle;
}
svg.m3.m3-svg-icon > text.m3-size-12px {
width: 12px;
@ -186,37 +186,37 @@ svg.m3.m3-badge > text {
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
}
@font-face {
font-family: Roboto, sans-serif;
font-family: Roboto, system-ui;
font-face-name: Thin;
font-weight: 100;
src: url("./font/Roboto-Thin.ttf");
}
@font-face {
font-family: Roboto, sans-serif;
font-family: Roboto, system-ui;
font-face-name: Light;
font-weight: 300;
src: url("./font/Roboto-Light.ttf");
}
@font-face {
font-family: Roboto, sans-serif;
font-family: Roboto, system-ui;
font-face-name: Regular;
font-weight: 400;
src: url("./font/Roboto-Regular.ttf");
}
@font-face {
font-family: Roboto, sans-serif;
font-family: Roboto, system-ui;
font-face-name: Medium;
font-weight: 500;
src: url("./font/Roboto-Medium.ttf");
}
@font-face {
font-family: Roboto, sans-serif;
font-family: Roboto, system-ui;
font-face-name: Bold;
font-weight: 700;
src: url("./font/Roboto-Bold.ttf");
}
@font-face {
font-family: Roboto, sans-serif;
font-family: Roboto, system-ui;
font-face-name: Black;
font-weight: 900;
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);
}
label {
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
button.m3.m3-fab {
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 {
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);
}
@ -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);
}
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

4
src/styles/icon.sass
View File

@ -4,8 +4,8 @@ svg.m3.m3-svg-icon
& > text
text-anchor: middle
dominant-baseline: central
alignment-baseline: central
dominant-baseline: middle
alignment-baseline: middle
@each $size in $sizes
& > 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