From eefafd3d0212c270112af2d23b53d660dbc10a21 Mon Sep 17 00:00:00 2001 From: doryan04 Date: Tue, 13 Feb 2024 23:31:16 +0400 Subject: [PATCH] ADDED: Base slider styles and disable state of segment-button --- app/page.tsx | 7 ++-- .../segmented-buttons/segment-button.tsx | 17 ++++----- .../input-layout/input-layout.tsx | 8 ++--- .../input-components/slider/slider.tsx | 9 ++++- .../button-styles/segmented-button.sass | 6 ++++ src/styles/generics.css | 35 +++++++++++++++++++ src/styles/generics.css.map | 2 +- src/styles/generics.sass | 1 + src/styles/input-styles/slider.css | 3 ++ src/styles/input-styles/slider.css.map | 1 + src/styles/input-styles/slider.sass | 32 +++++++++++++++++ 11 files changed, 101 insertions(+), 20 deletions(-) create mode 100644 src/styles/input-styles/slider.css create mode 100644 src/styles/input-styles/slider.css.map create mode 100644 src/styles/input-styles/slider.sass diff --git a/app/page.tsx b/app/page.tsx index 208d801..416b4ae 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -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 - Label 3 + + Label 3 + - diff --git a/src/primitive-components/button-components/segmented-buttons/segment-button.tsx b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx index 8913e93..ed084b6 100644 --- a/src/primitive-components/button-components/segmented-buttons/segment-button.tsx +++ b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx @@ -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(false); const classes = `m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd(); diff --git a/src/primitive-components/input-components/input-layout/input-layout.tsx b/src/primitive-components/input-components/input-layout/input-layout.tsx index 81d0880..5a7deab 100644 --- a/src/primitive-components/input-components/input-layout/input-layout.tsx +++ b/src/primitive-components/input-components/input-layout/input-layout.tsx @@ -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( ({ indeterminate, typeInput, type, ...props }, ref) => { const checkboxRef = useRef(null); - useEffect(() => { + useLayoutEffect(() => { checkboxRef.current.indeterminate = indeterminate === true; }, []); @@ -22,9 +22,7 @@ export const InputLayout = forwardRef( const classesType = typeInput || type; const extraClassStyles = - props.className !== undefined - ? `m3 m3-${type} ${props.className}` - : `m3 m3-${classesType}`; + `m3 m3-${classesType} ${props.className ?? ''}`.trimEnd(); return ( >((props, ref) => { - return ; + return ( + + ); }); diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass index cfb56fd..a23ddfb 100644 --- a/src/styles/button-styles/segmented-button.sass +++ b/src/styles/button-styles/segmented-button.sass @@ -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) diff --git a/src/styles/generics.css b/src/styles/generics.css index e215312..8605435 100644 --- a/src/styles/generics.css +++ b/src/styles/generics.css @@ -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; diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map index 5e2e015..206d085 100644 --- a/src/styles/generics.css.map +++ b/src/styles/generics.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAoBQ;AACA;AACA;AACA;AACA;ACbJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECzBA;;AD4BA;ECtBA;;AD0BA;ECxCA;;AD2CA;ECrCA;;ADyCI;EACI;;AAER;EACI;;;AE/ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACjBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IAC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A;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC7JhB;EbCI;EACA;EACA;EACA;EACA;EaHA;EACA;;AACA;EbIA;EACA;EACA;EACA;EACA;;;AaLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACpGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AhB7LhB;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAqBQ;AACA;AACA;AACA;AACA;ACdJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECzBA;;AD4BA;ECtBA;;AD0BA;ECxCA;;AD2CA;ECrCA;;ADyCI;EACI;;AAER;EACI;;;AE/ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACjBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;;ACvBZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;ENuBI;EMrBA;;;ACnBR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EPkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOtDA;EPGA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOLJ;EPAA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOFJ;EPHA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOCJ;EPNA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOIJ;EPjBA,OOkBkC;EPjBlC,QOiBwC;EPhBxC,eOgB4B;EPf5B,SOe8C;EAC1C;;AAEJ;EPrBA,OOsBkC;EPrBlC,QOqBwC;EPpBxC,eOoB4B;EPnB5B,SOmB8C;EAC1C;;AAEJ;EPzBA,OO0BkC;EPzBlC,QOyBwC;EPxBxC,eOwB4B;EPvB5B,SOuB8C;EAC1C;;AAEJ;EP7BA,OO8BkC;EP7BlC,QO6BwC;EP5BxC,eO4B4B;EP3B5B,SO2B8C;EAC1C;;AAEJ;EPUI;;AOPJ;EPDI;;AOKA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9EZ;EACI;;AACA;EACI;;AACJ;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ERfI;EQiBA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ERHA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AQDA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ERpDA;;AQuDA;ERjDA;;AQoDA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ERnEA;;AQsEA;ERhEA;;AQmEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACvIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;ACrIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEA;EACI;;AAER;EACI;;AAEA;EACI;;AAEA;EACI;;AAEZ;EACI;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EACI;;;ACjEhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EZ8BI;EYlBA;EACA;EACA;EACA;EACA;EACA;EACA;;AAfA;EACI;EACA;EACA;;AAGA;EACI;;;ACpBhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC7JhB;EdCI;EACA;EACA;EACA;EACA;EcHA;EACA;;AACA;EdIA;EACA;EACA;EACA;EACA;;;AcLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACpGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AjB5LhB;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file diff --git a/src/styles/generics.sass b/src/styles/generics.sass index 82bcb63..ad09c77 100644 --- a/src/styles/generics.sass +++ b/src/styles/generics.sass @@ -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" diff --git a/src/styles/input-styles/slider.css b/src/styles/input-styles/slider.css new file mode 100644 index 0000000..c6dcbc3 --- /dev/null +++ b/src/styles/input-styles/slider.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=slider.css.map */ diff --git a/src/styles/input-styles/slider.css.map b/src/styles/input-styles/slider.css.map new file mode 100644 index 0000000..2fd51b7 --- /dev/null +++ b/src/styles/input-styles/slider.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"slider.css"} \ No newline at end of file diff --git a/src/styles/input-styles/slider.sass b/src/styles/input-styles/slider.sass new file mode 100644 index 0000000..2036fd4 --- /dev/null +++ b/src/styles/input-styles/slider.sass @@ -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) + + +