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

ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc. 

CHANGED: For optimizing write styles added a few mixins
FIXED: Bug with width in segmented-buttons
This commit is contained in:
doryan04 2024-02-24 00:15:35 +04:00
parent cd0e3e3f85
commit 0219596ed1
11 changed files with 58 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/page.tsx
View File

@ -1,10 +1,6 @@
import React from 'react';
import { Card } from '../src/primitive-components/card/card';
import {
Button,
FAB,
IconButton,
} from '../src/primitive-components/components';
import { IconButton } from '../src/primitive-components/components';
import { CardFooter } from '../src/primitive-components/card/card-footer';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
@ -52,25 +48,7 @@ export default function Page() {
</SegmentButton>
<SegmentButton disabled>Label 4</SegmentButton>
</SegmentedButtons>
<Button ripple={false}>Filled button</Button>
<Button ripple={false} variant={'outlined'}>
Outlined button
</Button>
<Button ripple={false} variant={'elevated'}>
Elevated button
</Button>
<Button ripple={false} variant={'text'}>
Text button
</Button>
<Button ripple={false} variant={'tonal'}>
Tonal button
</Button>
<FAB icon={'edit'} ripple={false}></FAB>
<FAB icon={'edit'}></FAB>
<IconButton
icon={'settings'}
variant={'filled'}
></IconButton>
<IconButton icon={'settings'} variant={'filled'} />
</CardFooter>
</Card>
</div>

4
src/styles/badge.sass
View File

@ -13,12 +13,10 @@ svg.m3.m3-badge
border-radius: 8px
& > text
@include center(flex)
@include m3-typography-mixin('label-small')
display: flex
align-items: center
text-anchor: middle
justify-content: center
font-optical-sizing: none
alignment-baseline: central
fill: var(--md-sys-color-on-error)

5
src/styles/button-styles/button.sass
View File

@ -9,17 +9,16 @@ button:not(.m3-fab, .m3-icon-button)
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
&.m3
@include center(inline-flex)
gap: 8px
border: none
contain: content
text-align: center
padding: 10px 24px
align-items: center
flex-direction: row
display: inline-flex
border-radius: 100px
box-sizing: border-box
justify-content: center
&.filled
background-color: var(--md-sys-color-primary)

21
src/styles/button-styles/icon-button.sass
View File

@ -1,16 +1,15 @@
button.m3.m3-icon-button
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
contain: content
border-radius: 50%
position: relative
display: inline-flex
flex-direction: row
justify-content: center
align-items: center
@include center(inline-flex)
padding: 0
width: 40px
height: 40px
border: none
padding: 0
contain: content
border-radius: 50%
position: relative
flex-direction: row
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
&::before
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
@ -93,10 +92,10 @@ button.m3.m3-icon-button
& > .m3.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
&:not(.outlined).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
&:not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&:not(.default).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
&:not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
&.tonal:not(:disabled)

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

@ -34,7 +34,7 @@ div.m3.m3-segmented-buttons
flex: 1 1
padding: 0
width: 100%
min-width: 48px
min-width: 108px
border-radius: 0
margin: 0 -0.5px
display: inline-flex

48
src/styles/generics.css
View File

@ -161,15 +161,15 @@ svg.m3.m3-badge {
border-radius: 8px;
}
svg.m3.m3-badge > text {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--md-sys-typescale-label-small-font-size);
font-weight: var(--md-sys-typescale-label-small-font-weight);
line-height: var(--md-sys-typescale-label-small-line-height);
font-family: var(--md-sys-typescale-label-small-font-family-name);
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
display: flex;
align-items: center;
text-anchor: middle;
justify-content: center;
font-optical-sizing: none;
alignment-baseline: central;
fill: var(--md-sys-color-on-error);
@ -474,17 +474,17 @@ button:not(.m3-fab, .m3-icon-button) {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button:not(.m3-fab, .m3-icon-button).m3 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
contain: content;
text-align: center;
padding: 10px 24px;
align-items: center;
flex-direction: row;
display: inline-flex;
border-radius: 100px;
box-sizing: border-box;
justify-content: center;
}
button:not(.m3-fab, .m3-icon-button).filled {
background-color: var(--md-sys-color-primary);
@ -595,18 +595,18 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
}
button.m3.m3-icon-button {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
contain: content;
border-radius: 50%;
position: relative;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
justify-content: center;
padding: 0;
width: 40px;
height: 40px;
border: none;
padding: 0;
contain: content;
border-radius: 50%;
position: relative;
flex-direction: row;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button.m3.m3-icon-button::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
@ -793,7 +793,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
flex: 1 1;
padding: 0;
width: 100%;
min-width: 48px;
min-width: 108px;
border-radius: 0;
margin: 0 -0.5px;
display: inline-flex;
@ -859,11 +859,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
}
div.m3.m3-radio-container {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
align-items: center;
display: inline-flex;
justify-content: center;
}
div.m3.m3-radio-container + label.m3.m3-radio-label {
margin-inline: 3px;
@ -1006,11 +1006,11 @@ input[type=range].m3.m3-slider::-moz-range-thumb:is(:active, :focus-visible) {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
input[type=range].m3.m3-slider::-webkit-slider-container {
height: 4px;
appearance: none;
box-shadow: none;
border-radius: 2px;
min-block-size: 4px;
height: 4px;
}
input[type=range].m3.m3-slider::-webkit-slider-runnable-track {
height: 20px;
@ -1210,16 +1210,16 @@ div.m3.m3-checkbox-container > span.m3.m3-checkbox-ripple-layer {
}
input[type=checkbox].m3.m3-checkbox {
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
width: 1.125rem;
height: 1.125rem;
appearance: none;
position: absolute;
align-items: center;
border-radius: 0.14rem;
box-sizing: content-box;
justify-content: center;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
@ -1249,14 +1249,14 @@ input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox]
opacity: 38%;
}
input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
font-size: 24px;
font-weight: 700;
line-height: 24px;
align-items: center;
pointer-events: none;
justify-content: center;
font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

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

File diff suppressed because one or more lines are too long

10
src/styles/input-styles/checkbox.sass
View File

@ -13,16 +13,15 @@ div.m3.m3-checkbox-container
position: absolute
input[type="checkbox"].m3.m3-checkbox
@include center(flex)
z-index: 10
display: flex
width: 1.125rem
height: 1.125rem
appearance: none
position: absolute
align-items: center
border-radius: .14rem
box-sizing: content-box
justify-content: center
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& ~ span.m3-checkbox-state
@ -54,14 +53,13 @@ input[type="checkbox"].m3.m3-checkbox
opacity: 38%
& ~ span.m3-checkbox-state
@include center(flex)
z-index: 10
display: flex
font-size: 24px
font-weight: 700
line-height: 24px
align-items: center
pointer-events: none
justify-content: center
font-family: Material-Symbols-Outlined-Regular, sans-serif
font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24

5
src/styles/input-styles/radio.sass
View File

@ -1,9 +1,8 @@
div.m3.m3-radio-container
@include center(inline-flex)
width: 20px
height: 20px
align-items: center
display: inline-flex
justify-content: center
& + label.m3.m3-radio-label
margin-inline: 3px

2
src/styles/input-styles/slider.sass
View File

@ -59,11 +59,11 @@ input[type="range"].m3.m3-slider
border: none
&::-webkit-slider-container
height: 4px
appearance: none
box-shadow: none
border-radius: 2px
min-block-size: 4px
height: 4px
&::-webkit-slider-runnable-track
height: 20px

18
src/styles/input-styles/text-field.sass
View File

@ -1,3 +1,9 @@
@mixin m3-text-field-fieldset-legend
border-top-width: 0
border-style: solid
border-bottom-width: 0
border-color: transparent
div.m3.m3-text-field
margin: 0
display: flex
@ -173,17 +179,13 @@ div.m3.m3-text-field
border: 3px solid var(--md-sys-color-primary)
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
border-top-width: 0
border-style: solid
border-bottom-width: 0
border-color: transparent
@include m3-text-field-fieldset-legend
border-inline-width: 5.5px
&:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
border-top-width: 0
border-style: solid
border-bottom-width: 0
border-color: transparent
@include m3-text-field-fieldset-legend
border-inline-width: 7.5px
& > input:focus-visible + label