CHANGED: style and components directories, removed redundant imports from styles
ADDED: container and card component, card-subcomponents WIP
This commit is contained in:
parent
fe273c2759
commit
bea06db606
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import { TextField } from '../../src/primitive-components/text-field/text-field';
|
||||
import { Button } from '../../src/primitive-components/button/button';
|
||||
import { TextField } from '../../src/primitive-components/input-components/text-field/text-field';
|
||||
import { Button } from '../../src/primitive-components/button-components/button/button';
|
||||
|
||||
export function TextFields() {
|
||||
return (
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import '../src/styles/main.css';
|
||||
import '../src/styles/generics.css';
|
||||
import { Metadata, Viewport } from 'next';
|
||||
|
||||
|
|
43
app/page.tsx
43
app/page.tsx
|
@ -1,26 +1,35 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import { Button, Divider } from '../src/primitive-components/components';
|
||||
import React from 'react';
|
||||
import { Card } from '../src/primitive-components/card/card';
|
||||
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
|
||||
import { Button } from '../src/primitive-components/button-components/button/button';
|
||||
|
||||
const cardStyles = { width: '256px', aspectRatio: 1 };
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={'m3 m3-wrapper'}>
|
||||
<main>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<Card style={cardStyles} variant={'filled'}>
|
||||
<CardActionArea>
|
||||
<h1>Header</h1>
|
||||
</CardActionArea>
|
||||
<div>
|
||||
<Button>Label</Button>
|
||||
<Button>label</Button>
|
||||
</div>
|
||||
<Divider orientation={'vertical'} variant={'full-width'} />
|
||||
<div>
|
||||
<Button>Label</Button>
|
||||
</div>
|
||||
<Divider orientation={'vertical'} variant={'inset'} />
|
||||
<div>
|
||||
<Button>Label</Button>
|
||||
</div>
|
||||
<Divider orientation={'vertical'} variant={'middle-inset'} />
|
||||
<div>
|
||||
<Button disabled>Label</Button>
|
||||
</Card>
|
||||
<Card style={cardStyles} variant={'outlined'} />
|
||||
<Card style={cardStyles} variant={'elevated'} />
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -24,6 +24,7 @@
|
|||
"@types/react": "18.2.33",
|
||||
"@types/react-dom": "18.2.14",
|
||||
"@typescript-eslint/eslint-plugin": "^6.20.0",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-next": "^14.1.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
|
@ -35,7 +36,9 @@
|
|||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"i": "^0.3.7",
|
||||
"npm": "^10.4.0",
|
||||
"postcss": "^8.4.33",
|
||||
"prettier": "3.2.4",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "~5.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
|
@ -1,9 +1,9 @@
|
|||
'use client';
|
||||
|
||||
import { bool, string } from 'prop-types';
|
||||
import { RippleArea } from '../ripple/ripple-area';
|
||||
import { RippleArea } from '../../ripple/ripple-area';
|
||||
import { ButtonLayoutProps } from './button-layout.types';
|
||||
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
|
||||
import React, { forwardRef, useId, useRef, useState } from 'react';
|
||||
|
||||
export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
|
|
@ -1,5 +1,5 @@
|
|||
import { ButtonHTMLAttributes } from 'react';
|
||||
import { RipplePropsForComponents } from '../ripple/ripple.types';
|
||||
import { RipplePropsForComponents } from '../../ripple/ripple.types';
|
||||
|
||||
export type ButtonLayoutProps = RipplePropsForComponents<HTMLButtonElement> &
|
||||
ButtonHTMLAttributes<HTMLButtonElement>;
|
|
@ -1,10 +1,10 @@
|
|||
'use client';
|
||||
|
||||
import { forwardRef } from 'react';
|
||||
import { Icon } from '../components';
|
||||
import { Icon } from '../../components';
|
||||
import { ButtonProps } from './button.types';
|
||||
import { ButtonLayout } from '../button-layout/button-layout';
|
||||
import { bool, oneOf, string } from 'prop-types';
|
||||
import { ButtonLayout } from '../button-layout/button-layout';
|
||||
|
||||
/**
|
||||
* Button component
|
|
@ -1,4 +1,4 @@
|
|||
import { RipplePropsForComponents } from '../ripple/ripple.types';
|
||||
import { RipplePropsForComponents } from '../../ripple/ripple.types';
|
||||
import { ButtonHTMLAttributes } from 'react';
|
||||
|
||||
export interface ButtonMainProps {
|
|
@ -1,7 +1,7 @@
|
|||
'use client';
|
||||
|
||||
import { forwardRef } from 'react';
|
||||
import { Icon } from '../components';
|
||||
import { Icon } from '../../components';
|
||||
import { FABProps } from './fab.types';
|
||||
import { bool, oneOf, string } from 'prop-types';
|
||||
import { ButtonLayout } from '../button-layout/button-layout';
|
||||
|
@ -54,7 +54,6 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
|
|||
FAB.propTypes = {
|
||||
icon: string,
|
||||
elevated: bool,
|
||||
children: string,
|
||||
size: oneOf(['small', 'default', 'large', 'extended']),
|
||||
variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
|
||||
};
|
|
@ -1,9 +1,8 @@
|
|||
import { ButtonHTMLAttributes } from 'react';
|
||||
import { RipplePropsForComponents } from '../ripple/ripple.types';
|
||||
import { RipplePropsForComponents } from '../../ripple/ripple.types';
|
||||
|
||||
export interface FABMainProps {
|
||||
icon: string;
|
||||
children?: string;
|
||||
disabled?: boolean;
|
||||
elevated?: boolean;
|
||||
size?: 'small' | 'default' | 'large' | 'extended';
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { Icon } from '../components';
|
||||
import { Icon } from '../../components';
|
||||
import { bool, oneOf, string } from 'prop-types';
|
||||
import { ButtonLayout } from '../button-layout/button-layout';
|
||||
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
|
@ -1,5 +1,5 @@
|
|||
import { ButtonHTMLAttributes } from 'react';
|
||||
import { RipplePropsForComponents } from '../ripple/ripple.types';
|
||||
import { RipplePropsForComponents } from '../../ripple/ripple.types';
|
||||
|
||||
export interface IconButtonMainProps {
|
||||
icon: string;
|
|
@ -0,0 +1,41 @@
|
|||
'use client';
|
||||
|
||||
import { RippleArea } from '../ripple/ripple-area';
|
||||
import { CardActionAreaProps } from './card.types';
|
||||
import { forwardRef, useRef, useState } from 'react';
|
||||
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||
|
||||
export const CardActionArea = forwardRef<HTMLDivElement, CardActionAreaProps>(
|
||||
({ centralRipple = false, ripples = true, ...props }, ref) => {
|
||||
const [isActive, setIsActive] = useState<boolean>(false);
|
||||
const ripplesRef = useRef(null);
|
||||
const CardActionAreaEvents = useRippleEffect(
|
||||
ripplesRef,
|
||||
setIsActive,
|
||||
ripples,
|
||||
);
|
||||
const classes =
|
||||
`m3 m3-card-action-area${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
|
||||
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
{...CardActionAreaEvents}
|
||||
className={classes}
|
||||
ref={ref}
|
||||
>
|
||||
<div className={'m3 m3-card-action-area-content'}>
|
||||
{props.children}
|
||||
</div>
|
||||
<span className={'m3 m3-card-state-layer'} />
|
||||
{ripples && (
|
||||
<RippleArea
|
||||
callback={setIsActive}
|
||||
central={centralRipple}
|
||||
ref={ripplesRef}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
export function CardActions(props) {
|
||||
return (
|
||||
<div></div>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
export function CardContent(props) {
|
||||
return (
|
||||
<div></div>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
export function CardHeader(props) {
|
||||
return (
|
||||
<div></div>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
// import { forwardRef } from 'react';
|
||||
// import { CardMediaProps, CardMedia } from "./card.types";
|
||||
|
||||
// export const CardMedia = forwardRef<CardMedia, CardMediaProps>(
|
||||
// ({rounded = true, preview = true, type, ...props}, ref) => {
|
||||
// const classes = `m3 m3-card-media${rounded ? ' media-rounded' : ''}${preview ? ' media-preview' : ''} ${props.className ?? ''}`.trimEnd();
|
||||
// switch (type){
|
||||
// case "audio":
|
||||
// break;
|
||||
// case "iframe":
|
||||
// break;
|
||||
// case "img":
|
||||
// break;
|
||||
// case "picture":
|
||||
// break;
|
||||
// case "video":
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// }
|
|
@ -1,20 +1,20 @@
|
|||
import React, { forwardRef, HTMLAttributes } from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
import { CardProps } from './card.types';
|
||||
import { Container } from '../container/container';
|
||||
|
||||
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
variant?: 'outlined' | 'filled' | 'elevated';
|
||||
}
|
||||
|
||||
const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
export const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
({ variant = 'filled', ...props }, ref) => {
|
||||
const classes =
|
||||
`m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
|
||||
const classes = `m3-card m3-card-${variant} ${props.className ?? ''}`;
|
||||
|
||||
return (
|
||||
<div {...props} className={classes} ref={ref}>
|
||||
<Container
|
||||
{...props}
|
||||
className={classes}
|
||||
ref={ref}
|
||||
variant={variant}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default Card;
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
import { HTMLAttributes } from 'react';
|
||||
import { ContainerProps } from '../container/container.types';
|
||||
import { RipplePropsForComponents } from '../ripple/ripple.types';
|
||||
|
||||
export interface CardActionAreaProps
|
||||
extends RipplePropsForComponents<HTMLDivElement> {
|
||||
ripples?: boolean;
|
||||
}
|
||||
|
||||
export interface CardProps extends ContainerProps {}
|
||||
|
||||
export interface CardMediaProps extends HTMLAttributes<CardMedia> {
|
||||
type: 'img' | 'video' | 'picture' | 'iframe' | 'audio';
|
||||
rounded?: boolean;
|
||||
preview?: boolean;
|
||||
}
|
||||
|
||||
export type CardMedia = HTMLImageElement &
|
||||
HTMLVideoElement &
|
||||
HTMLPictureElement &
|
||||
HTMLMediaElement &
|
||||
HTMLIFrameElement &
|
||||
HTMLAudioElement;
|
|
@ -1,14 +1,16 @@
|
|||
export { FAB } from './fab/fab';
|
||||
export { Card } from './card/card';
|
||||
export { Icon } from './icon/icon';
|
||||
export { Radio } from './radio/radio';
|
||||
export { Badge } from './badge/badge';
|
||||
export { Switch } from './switch/switch';
|
||||
export { Button } from './button/button';
|
||||
export { Divider } from './divider/divider';
|
||||
export { Checkbox } from './checkbox/checkbox';
|
||||
export { Container } from './container/container';
|
||||
export { RippleArea } from './ripple/ripple-area';
|
||||
export { Ripples, Ripple } from './ripple/ripple';
|
||||
export { TextField } from './text-field/text-field';
|
||||
export { IconButton } from './icon-button/icon-button';
|
||||
export { ButtonLayout } from './button-layout/button-layout';
|
||||
export { SegmentedButtons } from './segmented-buttons/segmented-buttons';
|
||||
export { FAB } from './button-components/fab/fab';
|
||||
export { Radio } from './input-components/radio/radio';
|
||||
export { Switch } from './input-components/switch/switch';
|
||||
export { Button } from './button-components/button/button';
|
||||
export { Checkbox } from './input-components/checkbox/checkbox';
|
||||
export { TextField } from './input-components/text-field/text-field';
|
||||
export { IconButton } from './button-components/icon-button/icon-button';
|
||||
export { ButtonLayout } from './button-components/button-layout/button-layout';
|
||||
export { SegmentedButtons } from './button-components/segmented-buttons/segmented-buttons';
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { ContainerProps } from './container.types';
|
||||
|
||||
export const Container = forwardRef<HTMLDivElement, ContainerProps>(
|
||||
({ variant = 'filled', ...props }, ref) => {
|
||||
const classes =
|
||||
`m3 m3-container m3-container-${variant} ${props.className ?? ''}`.trimEnd();
|
||||
|
||||
return (
|
||||
<div {...props} className={classes} ref={ref}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
|
@ -0,0 +1,5 @@
|
|||
import { HTMLAttributes } from 'react';
|
||||
|
||||
export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
|
||||
variant?: 'outlined' | 'filled' | 'elevated';
|
||||
}
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
import { bool } from 'prop-types';
|
||||
import { CheckboxProps } from './checkbox.types';
|
||||
import { RippleArea } from '../ripple/ripple-area';
|
||||
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||
import { RippleArea } from '../../ripple/ripple-area';
|
||||
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
|
||||
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
|
||||
import {
|
||||
forwardRef,
|
|
@ -1,5 +1,5 @@
|
|||
import { InputHTMLAttributes } from 'react';
|
||||
import { RipplePropsForComponents } from '../ripple/ripple.types';
|
||||
import { RipplePropsForComponents } from '../../ripple/ripple.types';
|
||||
|
||||
export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> &
|
||||
RipplePropsForComponents<HTMLInputElement> & {
|
|
@ -2,9 +2,9 @@
|
|||
|
||||
import { bool, string } from 'prop-types';
|
||||
import { RadioProps } from './radio.types';
|
||||
import { RippleArea } from '../ripple/ripple-area';
|
||||
import { RippleArea } from '../../ripple/ripple-area';
|
||||
import { forwardRef, useRef, useState } from 'react';
|
||||
import useRippleEffect from '../ripple/hooks/useRippleEffect';
|
||||
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
|
||||
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
|
||||
|
||||
/**
|
|
@ -1,5 +1,5 @@
|
|||
import { InputHTMLAttributes } from 'react';
|
||||
import { RipplePropsForComponents } from '../ripple/ripple.types';
|
||||
import { RipplePropsForComponents } from '../../ripple/ripple.types';
|
||||
|
||||
export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
|
||||
RipplePropsForComponents<HTMLInputElement> & {
|
|
@ -24,7 +24,11 @@ export type InteractionEventsType = MouseEvent &
|
|||
DragEvent &
|
||||
FocusEvent;
|
||||
|
||||
const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
|
||||
const UseRippleEffect = (
|
||||
ref,
|
||||
callback,
|
||||
enabled = true,
|
||||
): undefined | RippleEventHandlers => {
|
||||
const [mounted, setMounted] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -37,6 +41,10 @@ const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
|
|||
return;
|
||||
}
|
||||
|
||||
if (!enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { start, stop } = ref.current;
|
||||
|
||||
return {
|
||||
|
|
|
@ -1,74 +1,67 @@
|
|||
button:not(.m3-fab, .m3-icon-button) {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
||||
width: min-content;
|
||||
height: min-content;
|
||||
box-sizing: border-box;
|
||||
font-size: var(--md-sys-typescale-label-large-font-size);
|
||||
font-weight: var(--md-sys-typescale-label-large-font-weight);
|
||||
line-height: var(--md-sys-typescale-label-large-line-height);
|
||||
box-sizing: border-box;
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).m3 {
|
||||
gap: 8px;
|
||||
border: none;
|
||||
contain: content;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
gap: 8px;
|
||||
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);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled,
|
||||
button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined {
|
||||
outline-offset: -1px;
|
||||
outline: 1px solid var(--md-sys-color-outline) !important;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: var(--md-sys-color-primary);
|
||||
outline: 1px solid var(--md-sys-color-outline) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).text {
|
||||
padding: 10px 12px !important;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
padding: 10px 12px !important;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).elevated {
|
||||
box-shadow:
|
||||
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
color: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
button:not(.m3-fab, .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;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
@ -77,130 +70,65 @@ button:not(.m3-fab, .m3-icon-button)::before {
|
|||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.elevated {
|
||||
box-shadow:
|
||||
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
|
||||
border-color: var(--md-sys-color-primary) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible:is(
|
||||
.outlined,
|
||||
.text,
|
||||
.elevated
|
||||
)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
|
||||
box-shadow:
|
||||
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.elevated {
|
||||
box-shadow:
|
||||
0 2px 6px 2px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(
|
||||
.outlined,
|
||||
.text,
|
||||
.elevated
|
||||
)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(
|
||||
.filled,
|
||||
.elevated,
|
||||
.tonal,
|
||||
.outlined,
|
||||
.text
|
||||
) {
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
|
||||
box-shadow: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
|
||||
outline: 1px solid
|
||||
color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=button.css.map */
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["button.sass","../mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;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;ECRI;EDUA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADRA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC7CA;;ADgDA;EC1CA;;AD6CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC5DA;;AD+DA;ECzDA;;AD4DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
|
|
@ -1,44 +1,44 @@
|
|||
@import "mixins/m3-mixins"
|
||||
|
||||
button:not(.m3-fab, .m3-icon-button)
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name)
|
||||
width: min-content
|
||||
height: min-content
|
||||
box-sizing: border-box
|
||||
font-size: var(--md-sys-typescale-label-large-font-size)
|
||||
font-weight: var(--md-sys-typescale-label-large-font-weight)
|
||||
line-height: var(--md-sys-typescale-label-large-line-height)
|
||||
box-sizing: border-box
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name)
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
|
||||
&.m3
|
||||
gap: 8px
|
||||
border: none
|
||||
contain: content
|
||||
box-sizing: border-box
|
||||
border-radius: 100px
|
||||
display: inline-flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
text-align: center
|
||||
padding: 10px 24px
|
||||
border: none
|
||||
gap: 8px
|
||||
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)
|
||||
&, & > svg.m3-svg-icon
|
||||
color: var(--md-sys-color-on-primary)
|
||||
fill: var(--md-sys-color-on-primary)
|
||||
color: var(--md-sys-color-on-primary)
|
||||
|
||||
&.outlined
|
||||
outline-offset: -1px
|
||||
outline: 1px solid var(--md-sys-color-outline) !important
|
||||
background-color: #00000000
|
||||
color: var(--md-sys-color-primary)
|
||||
outline: 1px solid var(--md-sys-color-outline) !important
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&.text
|
||||
padding: 10px 12px !important
|
||||
background-color: #00000000
|
||||
padding: 10px 12px !important
|
||||
color: var(--md-sys-color-primary)
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
|
@ -46,15 +46,15 @@ button:not(.m3-fab, .m3-icon-button)
|
|||
|
||||
&.elevated
|
||||
@include elevation-1(false)
|
||||
background-color: var(--md-sys-color-surface-container-low)
|
||||
color: var(--md-sys-color-primary)
|
||||
background-color: var(--md-sys-color-surface-container-low)
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&.tonal
|
||||
background-color: var(--md-sys-color-secondary-container)
|
||||
color: var(--md-sys-color-on-secondary-container)
|
||||
background-color: var(--md-sys-color-secondary-container)
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-on-secondary-container)
|
|
@ -0,0 +1,17 @@
|
|||
/* Error: Undefined mixin.
|
||||
* ,
|
||||
* 21 | @include state-layer
|
||||
* | ^^^^^^^^^^^^^^^^^^^^
|
||||
* '
|
||||
* fabs.sass 21:9 root stylesheet */
|
||||
|
||||
body::before {
|
||||
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
|
||||
"Droid Sans Mono", monospace, monospace;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 2px solid black;
|
||||
content: "Error: Undefined mixin.\a \2577 \a 21 \2502 @include state-layer\a \2502 ^^^^^^^^^^^^^^^^^^^^\a \2575 \a fabs.sass 21:9 root stylesheet";
|
||||
}
|
|
@ -1,5 +1,3 @@
|
|||
@import "mixins/m3-mixins"
|
||||
|
||||
button.m3.m3-fab
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
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;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
button.m3.m3-icon-button::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
button.m3.m3-icon-button > span.m3-icon {
|
||||
z-index: 25;
|
||||
font-size: 2em;
|
||||
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
|
||||
}
|
||||
button.m3.m3-icon-button.default {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default.selected.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.selected.toggled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.toggled {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined {
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined:disabled {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
fill: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):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);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=icon-button.css.map */
|
|
@ -1,5 +1,3 @@
|
|||
@import "mixins/m3-mixins"
|
||||
|
||||
button.m3.m3-icon-button
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
contain: content
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;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;ECNI;EDQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC3CA;;AD8CA;ECxCA;;AD2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC1DA;;AD6DA;ECvDA;;AD0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
|
|
@ -0,0 +1,8 @@
|
|||
div.m3.m3-card {
|
||||
min-width: 160px;
|
||||
min-height: 64px;
|
||||
display: flex;
|
||||
border: 2px dashed green;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=card.css.map */
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["card.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA","file":"card.css"}
|
|
@ -0,0 +1,51 @@
|
|||
@import 'mixins/m3-mixins'
|
||||
|
||||
div.m3.m3-card-action-area
|
||||
width: 100%
|
||||
height: 100%
|
||||
cursor: pointer
|
||||
contain: content
|
||||
position: relative
|
||||
border-radius: inherit
|
||||
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
& > div.m3.m3-card-action-area-content
|
||||
position: absolute
|
||||
|
||||
& > span.m3.m3-card-state-layer
|
||||
width: 100%
|
||||
height: 100%
|
||||
position: absolute
|
||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
&:hover
|
||||
& > span.m3.m3-card-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||
|
||||
&:is(&:focus, &:focus-visible, &:focus-within)
|
||||
& > span.m3.m3-card-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
|
||||
&:is(&:focus, &:focus-visible, &:focus-within, &:hover)
|
||||
&:is(.m3-card-outlined, .m3-card-filled)
|
||||
@include elevation-1(false)
|
||||
|
||||
&.m3-card-elevated
|
||||
@include elevation-2(false)
|
||||
|
||||
&:active
|
||||
&:is(.m3-card-outlined, .m3-card-filled)
|
||||
@include elevation-0(true)
|
||||
|
||||
&.m3-card-elevated
|
||||
@include elevation-1(true)
|
||||
|
||||
&:not(&:has(span.m3.m3-ripple-domain))
|
||||
& > span.m3.m3-card-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
|
||||
& > span.m3.m3-card-state-layer
|
||||
background-color: transparent
|
||||
|
||||
& > span.m3.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
|
@ -1,190 +0,0 @@
|
|||
label.m3.m3-checkbox-label {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
span.m3.m3-checkbox-ripple-layer {
|
||||
z-index: 20;
|
||||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"].m3.m3-checkbox {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: content-box;
|
||||
z-index: 10;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
margin: 0;
|
||||
outline-offset: -0.14rem;
|
||||
border-radius: 0.14rem;
|
||||
outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:is(
|
||||
:user-invalid:is(:checked, :indeterminate),
|
||||
.m3.m3-error:is(:checked, :indeterminate)
|
||||
) {
|
||||
outline-color: var(--md-sys-color-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
|
||||
outline-color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:is(
|
||||
:checked:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
|
||||
.m3.m3-error,
|
||||
:disabled
|
||||
),
|
||||
:indeterminate:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
|
||||
.m3.m3-error,
|
||||
:disabled
|
||||
)
|
||||
) {
|
||||
outline-color: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled:is(
|
||||
:hover,
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled
|
||||
) {
|
||||
opacity: 38%;
|
||||
border: 2px solid var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(
|
||||
:hover,
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled
|
||||
) {
|
||||
opacity: 38%;
|
||||
background-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox::after {
|
||||
line-height: 1.125rem;
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:checked::after {
|
||||
content: "done";
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
|
||||
content: "check_indeterminate_small";
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:hover {
|
||||
outline-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:user-invalid:is(:hover, :indeterminate:hover),
|
||||
.m3.m3-error:hover
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-error) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:user-invalid:is(:active, :indeterminate:active),
|
||||
.m3.m3-error:active
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-error) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:user-invalid:is(:active, :indeterminate:active),
|
||||
.m3.m3-error:active
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-error) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:checked:hover,
|
||||
:indeterminate:hover
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover
|
||||
+ span.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
|
||||
+ span.m3.m3-checkbox-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=checkbox.css.map */
|
|
@ -0,0 +1,17 @@
|
|||
/* Error: Undefined mixin.
|
||||
* ,
|
||||
* 21 | @include elevation-1(false)
|
||||
* | ^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
* '
|
||||
* container.sass 21:9 root stylesheet */
|
||||
|
||||
body::before {
|
||||
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
|
||||
"Droid Sans Mono", monospace, monospace;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 2px solid black;
|
||||
content: "Error: Undefined mixin.\a \2577 \a 21 \2502 @include elevation-1(false)\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a container.sass 21:9 root stylesheet";
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"container.css"}
|
|
@ -0,0 +1,20 @@
|
|||
@import "mixins/m3-mixins"
|
||||
|
||||
div.m3.m3-container
|
||||
display: block
|
||||
border-radius: 12px
|
||||
position: relative
|
||||
contain: content
|
||||
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
&.m3-container-filled
|
||||
background-color: var(--md-sys-color-surface-container-highest)
|
||||
|
||||
&.m3-container-outlined
|
||||
background-color: var(--md-sys-color-surface)
|
||||
outline-offset: -1px
|
||||
outline: 1px solid var(--md-sys-color-outline-variant)
|
||||
|
||||
&.m3-container-elevated
|
||||
@include elevation-1(false)
|
||||
background-color: var(--md-sys-color-surface-container-low)
|
|
@ -1,211 +0,0 @@
|
|||
button.m3.m3-fab {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button.m3.m3-fab > span.m3-icon {
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
}
|
||||
button.m3.m3-fab.m3 {
|
||||
contain: content;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: none;
|
||||
gap: 12px;
|
||||
}
|
||||
button.m3.m3-fab::before {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-fab.surface {
|
||||
background-color: var(--md-sys-color-surface-container-high);
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-fab.surface:not(.without-elevation) {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab.surface > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab.primary {
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
button.m3.m3-fab.primary:not(.without-elevation) {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab.primary > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab.secondary {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
button.m3.m3-fab.secondary:not(.without-elevation) {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab.secondary > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab.tertiary {
|
||||
background-color: var(--md-sys-color-tertiary-container);
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
}
|
||||
button.m3.m3-fab.tertiary:not(.without-elevation) {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab.tertiary > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-tertiary-container);
|
||||
}
|
||||
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-tertiary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab.m3-small-fab {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
padding: 11px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab.m3-default-fab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab.m3-large-fab {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 28px;
|
||||
padding: 34.5px;
|
||||
font-size: 36px;
|
||||
}
|
||||
button.m3.m3-fab.m3-extended-fab {
|
||||
width: auto;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab:not(.without-elevation):is(
|
||||
.surface,
|
||||
.primary,
|
||||
.secondary,
|
||||
.tertiary
|
||||
):hover {
|
||||
box-shadow:
|
||||
0 2px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab:not(.without-elevation):is(
|
||||
.surface,
|
||||
.primary,
|
||||
.secondary,
|
||||
.tertiary
|
||||
):active {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
button.m3.m3-fab:hover.surface::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:hover.primary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:hover.secondary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:hover.tertiary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-tertiary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.surface::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.primary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.secondary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.tertiary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-tertiary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=fabs.css.map */
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -1,15 +1,22 @@
|
|||
@import "fabs"
|
||||
@import "card"
|
||||
@import "icon"
|
||||
@import "radio"
|
||||
@import "badge"
|
||||
@import "fonts"
|
||||
@import "button"
|
||||
@import "ripple"
|
||||
@import "swtich"
|
||||
@import "divider"
|
||||
@import "checkbox"
|
||||
@import "text-field"
|
||||
@import "icon-button"
|
||||
@import "container"
|
||||
|
||||
@import "mixins/m3-mixins"
|
||||
|
||||
@import "button-styles/fabs"
|
||||
@import "button-styles/button"
|
||||
@import "button-styles/icon-button"
|
||||
|
||||
@import "input-styles/radio"
|
||||
@import "input-styles/swtich"
|
||||
@import "input-styles/checkbox"
|
||||
@import "input-styles/text-field"
|
||||
|
||||
@import "./themes/tokens.css"
|
||||
@import "./themes/colors.module.css"
|
||||
@import "./themes/typography.module.css"
|
||||
|
|
|
@ -1,268 +0,0 @@
|
|||
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;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
button.m3.m3-icon-button::before {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
button.m3.m3-icon-button > span.m3-icon {
|
||||
z-index: 25;
|
||||
font-size: 2em;
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 500,
|
||||
"GRAD" 0,
|
||||
"opsz" 48;
|
||||
}
|
||||
button.m3.m3-icon-button.default {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default:disabled,
|
||||
button.m3.m3-icon-button.default.selected:disabled,
|
||||
button.m3.m3-icon-button.default.selected.toggled:disabled {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 38%,
|
||||
transparent
|
||||
);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default.selected.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.selected.toggled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.toggled {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.selected.toggled,
|
||||
button.m3.m3-icon-button.tonal {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined {
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined:disabled {
|
||||
border: 1px solid
|
||||
color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 38%,
|
||||
transparent
|
||||
);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
|
||||
border: 1px solid
|
||||
color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
fill: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple,
|
||||
button.m3.m3-icon-button.filled:not(:disabled).selected.toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled).toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
|
||||
.outlined
|
||||
).toggled.selected
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):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
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple,
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled::before,
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal::before,
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled):is(
|
||||
.default,
|
||||
.outlined
|
||||
)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before,
|
||||
button.m3.m3-icon-button:focus-visible:not(
|
||||
:disabled
|
||||
).filled.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before,
|
||||
button.m3.m3-icon-button:focus-visible:not(
|
||||
:disabled
|
||||
).tonal.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=icon-button.css.map */
|
|
@ -0,0 +1,17 @@
|
|||
/* Error: Undefined mixin.
|
||||
* ,
|
||||
* 4 | @include m3-label-mixin
|
||||
* | ^^^^^^^^^^^^^^^^^^^^^^^
|
||||
* '
|
||||
* checkbox.sass 4:5 root stylesheet */
|
||||
|
||||
body::before {
|
||||
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
|
||||
"Droid Sans Mono", monospace, monospace;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 2px solid black;
|
||||
content: "Error: Undefined mixin.\a \2577 \a 4 \2502 @include m3-label-mixin\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a checkbox.sass 4:5 root stylesheet";
|
||||
}
|
|
@ -1,5 +1,3 @@
|
|||
@import "mixins/m3-mixins"
|
||||
|
||||
label.m3.m3-checkbox-label
|
||||
@include m3-label-mixin
|
||||
width: 18px
|
|
@ -0,0 +1,91 @@
|
|||
@import "../mixins/m3-mixins.css";
|
||||
div.m3.m3-radio {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
|
||||
z-index: 5;
|
||||
}
|
||||
div.m3.m3-radio > span.m3.m3-radio-state-layer {
|
||||
width: 40px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
|
||||
stroke-opacity: 38%;
|
||||
stroke: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 38%;
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
|
||||
stroke: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 0;
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
|
||||
stroke: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 1;
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio svg {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
z-index: 10;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
aspect-ratio: inherit;
|
||||
}
|
||||
div.m3.m3-radio svg > circle {
|
||||
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-radio svg > circle.m3-radio-outline {
|
||||
r: 9px;
|
||||
fill: black;
|
||||
fill-opacity: 0;
|
||||
stroke-width: 2px;
|
||||
stroke: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-radio svg > circle.m3-radio-state {
|
||||
r: 5px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=radio.css.map */
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["radio.sass"],"names":[],"mappings":"AAAQ;AAER;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","file":"radio.css"}
|
|
@ -1,5 +1,3 @@
|
|||
@import "mixins/m3-mixins"
|
||||
|
||||
div.m3.m3-radio
|
||||
width: 20px
|
||||
height: 20px
|
|
@ -0,0 +1,3 @@
|
|||
|
||||
@tailwind utilities;
|
||||
@tailwind components;
|
|
@ -1,115 +0,0 @@
|
|||
label.m3.m3-radio-label {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
input[type="radio"].m3.m3-radio {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
width: 20px;
|
||||
margin: 0;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--md-sys-color-on-surface-variant);
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio::after {
|
||||
content: "";
|
||||
width: 10px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:disabled {
|
||||
border: 2px solid
|
||||
color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked {
|
||||
border: 2px solid var(--md-sys-color-primary);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked::after {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked:disabled {
|
||||
border: 2px solid
|
||||
color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked:disabled::after {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 38%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):checked:hover
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-radio-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):hover
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):active
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):active
|
||||
+ span.m3.m3-radio-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=radio.css.map */
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["radio.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"radio.css"}
|
|
@ -0,0 +1,17 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
|
||||
// Or if using `src` directory:
|
||||
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/primitive-components/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/primitive-components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
Loading…
Reference in New Issue