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

ADDED: Base slider styles and disable state of segment-button

This commit is contained in:
doryan04 2024-02-13 23:31:16 +04:00
parent 6493687fdf
commit eefafd3d02
11 changed files with 101 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/page.tsx
View File

@ -8,10 +8,10 @@ import { CardFooter } from '../src/primitive-components/card/card-footer';
import { CardHeader } from '../src/primitive-components/card/card-header';
import { Typography } from '../src/primitive-components/typography/typography';
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Slider } from '../src/primitive-components/input-components/slider/slider';
import { Button } from '../src/primitive-components/button-components/button/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 {Slider} from "../src/primitive-components/input-components/slider/slider";
export default function Page() {
return (
@ -68,10 +68,11 @@ export default function Page() {
>
Label 2
</SegmentButton>
<SegmentButton>Label 3</SegmentButton>
<SegmentButton disabled>
Label 3
</SegmentButton>
</SegmentedButtons>
<Slider />
<Checkbox />
</div>
</CardFooter>
</Card>

17
src/primitive-components/button-components/segmented-buttons/segment-button.tsx
View File

@ -13,7 +13,14 @@ export const SegmentButton = forwardRef<
>(
(
{
type,
icon,
grade,
weight,
svgSize,
fillIcon,
iconSize,
opticalSize,
toggled = false,
iconPlace = 'left',
centralRipple = false,
@ -21,16 +28,6 @@ export const SegmentButton = forwardRef<
},
ref,
) => {
const {
fillIcon,
grade,
svgSize,
iconSize,
opticalSize,
type,
weight,
} = props;
const [selectedState, setSelectedState] = useState<boolean>(false);
const classes =
`m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();

8
src/primitive-components/input-components/input-layout/input-layout.tsx
View File

@ -2,8 +2,8 @@
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useLayoutEffect,
useRef,
} from 'react';
import { bool, string } from 'prop-types';
@ -13,7 +13,7 @@ export const InputLayout = forwardRef<HTMLInputElement, InputLayoutProps>(
({ indeterminate, typeInput, type, ...props }, ref) => {
const checkboxRef = useRef<HTMLInputElement>(null);
useEffect(() => {
useLayoutEffect(() => {
checkboxRef.current.indeterminate = indeterminate === true;
}, []);
@ -22,9 +22,7 @@ export const InputLayout = forwardRef<HTMLInputElement, InputLayoutProps>(
const classesType = typeInput || type;
const extraClassStyles =
props.className !== undefined
? `m3 m3-${type} ${props.className}`
: `m3 m3-${classesType}`;
`m3 m3-${classesType} ${props.className ?? ''}`.trimEnd();
return (
<input

9
src/primitive-components/input-components/slider/slider.tsx
View File

@ -5,5 +5,12 @@ export const Slider = forwardRef<
HTMLInputElement,
HTMLAttributes<HTMLInputElement>
>((props, ref) => {
return <InputLayout ref={ref} type={'range'} />;
return (
<InputLayout
className={props.className}
ref={ref}
type={'range'}
typeInput={'slider'}
/>
);
});

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

@ -30,6 +30,12 @@ div.m3.m3-segmented-buttons
& > svg > text
fill: var(--md-sys-color-on-surface)
&:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
& > *
opacity: 38%
&.selected
background-color: var(--md-sys-color-secondary-container)

35
src/styles/generics.css
View File

@ -753,6 +753,12 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text {
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
opacity: 38%;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
background-color: var(--md-sys-color-secondary-container);
}
@ -869,6 +875,35 @@ div.m3.m3-radio svg > circle.m3-radio-state {
r: 5px;
}
input[type=range].m3.m3-slider {
height: 4px;
appearance: none;
border-radius: 2px;
background-color: var(--md-sys-color-surface-container-highest);
overflow: visible;
}
input[type=range].m3.m3-slider::-webkit-slider-container {
margin-inline: -8px;
}
input[type=range].m3.m3-slider::-webkit-slider-thumb {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
width: 20px;
aspect-ratio: 1;
appearance: none;
overflow: visible;
border-radius: 50%;
box-sizing: border-box;
background: var(--md-sys-color-primary);
}
input[type=range].m3.m3-slider::-webkit-slider-thumb::after {
width: 40px;
aspect-ratio: 1;
background-color: transparent;
}
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover::after {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
div.m3.m3-switch {
margin: 4px;
gap: 20px;

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

File diff suppressed because one or more lines are too long

1
src/styles/generics.sass
View File

@ -14,6 +14,7 @@
@import "button-styles/segmented-button"
@import "input-styles/radio"
@import "input-styles/slider"
@import "input-styles/swtich"
@import "input-styles/checkbox"
@import "input-styles/text-field"

3
src/styles/input-styles/slider.css Normal file
View File

@ -0,0 +1,3 @@
/*# sourceMappingURL=slider.css.map */

1
src/styles/input-styles/slider.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"slider.css"}

32
src/styles/input-styles/slider.sass Normal file
View File

@ -0,0 +1,32 @@
input[type="range"].m3.m3-slider
height: 4px
appearance: none
border-radius: 2px
background-color: var(--md-sys-color-surface-container-highest)
overflow: visible
&::-webkit-slider-container
margin-inline: -8px
&::-webkit-slider-thumb
@include elevation-1(false)
&::after
width: 40px
aspect-ratio: 1
background-color: transparent
&:hover
&::after
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
width: 20px
aspect-ratio: 1
appearance: none
overflow: visible
border-radius: 50%
box-sizing: border-box
background: var(--md-sys-color-primary)