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

View File

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

View File

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

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 transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
&.m3 &.m3
@include center(inline-flex)
gap: 8px gap: 8px
border: none border: none
contain: content contain: content
text-align: center text-align: center
padding: 10px 24px padding: 10px 24px
align-items: center
flex-direction: row flex-direction: row
display: inline-flex
border-radius: 100px border-radius: 100px
box-sizing: border-box box-sizing: border-box
justify-content: center
&.filled &.filled
background-color: var(--md-sys-color-primary) background-color: var(--md-sys-color-primary)

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

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