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

FIXED: Segmented-buttons sizes fixed, typography is done

This commit is contained in:
doryan 2024-02-22 12:22:32 +04:00
parent b421ac7e4c
commit 40a4d2277e
35 changed files with 1213 additions and 2260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/page.tsx
View File

@ -38,7 +38,7 @@ export default function Page() {
fillIcon={1}
icon={'change_history'}
>
Label 1
fin ita la comedia
</SegmentButton>
<SegmentButton
fillIcon={1}

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

@ -31,8 +31,6 @@ export const SegmentButton = forwardRef<
const classes =
`m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();
const _icon = selectedState && icon;
return (
<ButtonLayout
{...props}
@ -49,7 +47,7 @@ export const SegmentButton = forwardRef<
<IconWrapper
fillIcon={fillIcon}
grade={grade}
icon={_icon}
icon={icon}
iconPlace={iconPlace}
iconSize={iconSize}
opticalSize={opticalSize}

BIN
src/styles/.sass-cache/43436592c33f3be9e31b1b014d3a480962beb5e7/checkbox.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/43436592c33f3be9e31b1b014d3a480962beb5e7/radio.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/43436592c33f3be9e31b1b014d3a480962beb5e7/slider.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/43436592c33f3be9e31b1b014d3a480962beb5e7/swtich.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/8b8ae4cfe093f9b8cd4cfabc532cf27ca06131f7/m3-mixins.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/card.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/elevation.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/generics.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/icon.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/ripple.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/typography.sassc Normal file
View File

Binary file not shown.

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

@ -1,7 +1,7 @@
div.m3.m3-segmented-buttons
padding: 0
height: 40px
display: inline-flex
display: flex
border-radius: 20px
box-sizing: border-box
@ -25,9 +25,21 @@ div.m3.m3-segmented-buttons
& > span
color: var(--md-sys-color-on-surface)
& > svg > text
& > svg
opacity: 0
& > text
fill: var(--md-sys-color-on-surface)
&:not(.selected)
& > svg
display: none
&::after, &::before
content: ''
width: 6px
position: relative
& > span.m3.m3-ripple-domain > span.m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
@ -40,6 +52,9 @@ div.m3.m3-segmented-buttons
&.selected
background-color: var(--md-sys-color-secondary-container)
& > svg
opacity: 1
& > span
color: var(--md-sys-color-on-secondary-container)

42
src/styles/fonts.css
View File

@ -1,56 +1,44 @@
@font-face {
font-family: Material-Symbols-Rounded-Regular;
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
format("woff2");
}
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face {
font-family: Material-Symbols-Outlined-Regular;
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
format("woff2");
}
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face {
font-family: Material-Symbols-Sharp-Regular;
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2")
format("woff2");
}
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Thin;
font-weight: 100;
src: url("./font/Roboto-Thin.ttf");
}
src: url("./font/Roboto-Thin.ttf"); }
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Light;
font-weight: 300;
src: url("./font/Roboto-Light.ttf");
}
src: url("./font/Roboto-Light.ttf"); }
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Regular;
font-weight: 400;
src: url("./font/Roboto-Regular.ttf");
}
src: url("./font/Roboto-Regular.ttf"); }
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Medium;
font-weight: 500;
src: url("./font/Roboto-Medium.ttf");
}
src: url("./font/Roboto-Medium.ttf"); }
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Bold;
font-weight: 700;
src: url("./font/Roboto-Bold.ttf");
}
src: url("./font/Roboto-Bold.ttf"); }
@font-face {
font-family: Roboto;
font-family: Roboto, system-ui;
font-face-name: Black;
font-weight: 900;
src: url("./font/Roboto-Black.ttf");
}
src: url("./font/Roboto-Black.ttf"); }
/*# sourceMappingURL=fonts.css.map */

8
src/styles/fonts.css.map
View File

@ -1 +1,7 @@
{"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAGI;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","file":"fonts.css"}
{
"version": 3,
"mappings": ";EAIQ,WAAW,EAAE,gCAAwC;EACrD,GAAG,EAAE,6DAAqE;EAC1E,GAAG,EAAE,+EAAuF;;EAF5F,WAAW,EAAE,iCAAwC;EACrD,GAAG,EAAE,8DAAqE;EAC1E,GAAG,EAAE,gFAAuF;;EAF5F,WAAW,EAAE,8BAAwC;EACrD,GAAG,EAAE,2DAAqE;EAC1E,GAAG,EAAE,6EAAuF;;EAM5F,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,IAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,6BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,KAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,8BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,OAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,gCAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,MAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,+BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,IAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,6BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,KAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,8BAAiC",
"sources": ["fonts.sass"],
"names": [],
"file": "fonts.css"
}

2
src/styles/fonts.sass
View File

@ -10,7 +10,7 @@ $weights: ("Thin": 100, "Light": 300, "Regular": 400, "Medium": 500, "Bold": 700
@each $name, $weight in $weights
@font-face
font-family: Roboto, system-ui
font-family: Roboto
font-face-name: #{$name}
font-weight: #{$weight}
src: url("./font/Roboto-#{$name}.ttf")

2302
src/styles/generics.css
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

6
src/styles/generics.sass
View File

@ -20,9 +20,9 @@
@import "input-styles/checkbox"
@import "input-styles/text-field"
@import "./themes/tokens"
@import "./themes/colors.module"
@import "./themes/typography.module"
@import "./themes/tokens.css"
@import "./themes/colors.module.css"
@import "./themes/typography.module.css"
@import "./themes/theme.dark.css" (prefers-color-scheme: dark)
@import "./themes/theme.light.css" (prefers-color-scheme: light)

40
src/styles/icon.css
View File

@ -1,69 +1,57 @@
svg.m3.m3-svg-icon > text {
alignment-baseline: central;
text-anchor: middle;
}
dominant-baseline: middle;
alignment-baseline: middle; }
svg.m3.m3-svg-icon > text.m3-size-12px {
width: 12px;
aspect-ratio: 1;
line-height: 12px;
font-size: 12px;
}
line-height: 12px; }
svg.m3.m3-svg-icon > text.m3-size-16px {
width: 16px;
aspect-ratio: 1;
line-height: 16px;
font-size: 16px;
}
line-height: 16px; }
svg.m3.m3-svg-icon > text.m3-size-20px {
width: 20px;
aspect-ratio: 1;
line-height: 20px;
font-size: 20px;
}
line-height: 20px; }
svg.m3.m3-svg-icon > text.m3-size-24px {
width: 24px;
aspect-ratio: 1;
line-height: 24px;
font-size: 24px;
}
line-height: 24px; }
svg.m3.m3-svg-icon > text.m3-size-28px {
width: 28px;
aspect-ratio: 1;
line-height: 28px;
font-size: 28px;
}
line-height: 28px; }
svg.m3.m3-svg-icon > text.m3-size-32px {
width: 32px;
aspect-ratio: 1;
line-height: 32px;
font-size: 32px;
}
line-height: 32px; }
svg.m3.m3-svg-icon > text.m3-size-36px {
width: 36px;
aspect-ratio: 1;
line-height: 36px;
font-size: 36px;
}
line-height: 36px; }
svg.m3.m3-svg-icon > text.m3-size-40px {
width: 40px;
aspect-ratio: 1;
line-height: 40px;
font-size: 40px;
}
line-height: 40px; }
svg.m3.m3-svg-icon > text.m3-size-48px {
width: 48px;
aspect-ratio: 1;
line-height: 48px;
font-size: 48px;
}
line-height: 48px; }
svg.m3.m3-svg-icon > text.m3-Outlined {
font-family: Material-Symbols-Outlined-Regular;
}
font-family: Material-Symbols-Outlined-Regular; }
svg.m3.m3-svg-icon > text.m3-Rounded {
font-family: Material-Symbols-Rounded-Regular;
}
font-family: Material-Symbols-Rounded-Regular; }
svg.m3.m3-svg-icon > text.m3-Sharp {
font-family: Material-Symbols-Sharp-Regular;
}
font-family: Material-Symbols-Sharp-Regular; }
/*# sourceMappingURL=icon.css.map */

8
src/styles/icon.css.map
View File

@ -1 +1,7 @@
{"version":3,"sourceRoot":"","sources":["icon.sass"],"names":[],"mappings":"AAII;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","file":"icon.css"}
{
"version": 3,
"mappings": "AAII,yBAAQ;EACJ,WAAW,EAAE,MAAM;EACnB,iBAAiB,EAAE,MAAM;EACzB,kBAAkB,EAAE,MAAM;AAG1B,sCAAyB;EACrB,KAAK,EAVZ,IAAI;EAWG,YAAY,EAAE,CAAC;EACf,SAAS,EAZhB,IAAI;EAaG,WAAW,EAblB,IAAI;AASD,sCAAyB;EACrB,KAAK,EAVN,IAAI;EAWH,YAAY,EAAE,CAAC;EACf,SAAS,EAZV,IAAI;EAaH,WAAW,EAbZ,IAAI;AASP,sCAAyB;EACrB,KAAK,EAVA,IAAI;EAWT,YAAY,EAAE,CAAC;EACf,SAAS,EAZJ,IAAI;EAaT,WAAW,EAbN,IAAI;AASb,sCAAyB;EACrB,KAAK,EAVM,IAAI;EAWf,YAAY,EAAE,CAAC;EACf,SAAS,EAZE,IAAI;EAaf,WAAW,EAbA,IAAI;AASnB,sCAAyB;EACrB,KAAK,EAVY,IAAI;EAWrB,YAAY,EAAE,CAAC;EACf,SAAS,EAZQ,IAAI;EAarB,WAAW,EAbM,IAAI;AASzB,sCAAyB;EACrB,KAAK,EAVkB,IAAI;EAW3B,YAAY,EAAE,CAAC;EACf,SAAS,EAZc,IAAI;EAa3B,WAAW,EAbY,IAAI;AAS/B,sCAAyB;EACrB,KAAK,EAVwB,IAAI;EAWjC,YAAY,EAAE,CAAC;EACf,SAAS,EAZoB,IAAI;EAajC,WAAW,EAbkB,IAAI;AASrC,sCAAyB;EACrB,KAAK,EAV8B,IAAI;EAWvC,YAAY,EAAE,CAAC;EACf,SAAS,EAZ0B,IAAI;EAavC,WAAW,EAbwB,IAAI;AAS3C,sCAAyB;EACrB,KAAK,EAVoC,IAAI;EAW7C,YAAY,EAAE,CAAC;EACf,SAAS,EAZgC,IAAI;EAa7C,WAAW,EAb8B,IAAI;AAgBjD,qCAAoB;EAChB,WAAW,EAAE,iCAAiC;AADlD,oCAAoB;EAChB,WAAW,EAAE,gCAAiC;AADlD,kCAAoB;EAChB,WAAW,EAAE,8BAAiC",
"sources": ["icon.sass"],
"names": [],
"file": "icon.css"
}

BIN
src/styles/input-styles/.sass-cache/43436592c33f3be9e31b1b014d3a480962beb5e7/slider.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/input-styles/.sass-cache/43436592c33f3be9e31b1b014d3a480962beb5e7/swtich.sassc Normal file
View File

Binary file not shown.

79
src/styles/input-styles/slider.css
View File

@ -1,3 +1,80 @@
/*
Error: Undefined mixin 'input-range-thumb-mixin'.
on line 35 of slider.sass, in `input-range-thumb-mixin'
from line 35 of slider.sass
30: overflow: hidden
31: border-radius: 2px
32: background-color: var(--md-sys-color-primary)
33:
34: &::-moz-range-thumb
35: @include input-range-thumb-mixin
36:
37: border: none
38:
39: &::-webkit-slider-container
40: appearance: none
/*# sourceMappingURL=slider.css.map */
Backtrace:
slider.sass:35:in `input-range-thumb-mixin'
slider.sass:35
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:348:in `block in visit_mixin'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:98:in `block in with_mixin'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:98:in `with_mixin'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:346:in `visit_mixin'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block (2 levels) in visit_rule'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `map'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block in visit_rule'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:438:in `visit_rule'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block (2 levels) in visit_rule'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `map'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block in visit_rule'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:438:in `visit_rule'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `map'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:157:in `visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:10:in `visit'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:36:in `css_tree'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/engine.rb:389:in `_render_with_sourcemap'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/engine.rb:307:in `render_with_sourcemap'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:387:in `run'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:63:in `process_result'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/base.rb:50:in `parse'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/base.rb:18:in `parse!'
/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/bin/sass:13:in `<top (required)>'
/usr/bin/sass:23:in `load'
/usr/bin/sass:23:in `<main>'
*/
body:before {
white-space: pre;
font-family: monospace;
content: "Error: Undefined mixin 'input-range-thumb-mixin'.\A on line 35 of slider.sass, in `input-range-thumb-mixin'\A from line 35 of slider.sass\A \A 30: overflow: hidden\A 31: border-radius: 2px\A 32: background-color: var(--md-sys-color-primary)\A 33: \A 34: &::-moz-range-thumb\A 35: @include input-range-thumb-mixin\A 36: \A 37: border: none\A 38: \A 39: &::-webkit-slider-container\A 40: appearance: none"; }

264
src/styles/input-styles/swtich.css
View File

@ -1,225 +1,113 @@
div.m3.m3-switch {
gap: 20px;
margin: 4px;
box-sizing: content-box;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
justify-content: left;
box-sizing: content-box; }
div.m3.m3-switch > svg {
width: 52px;
height: 32px;
}
div.m3.m3-switch > svg {
overflow: visible;
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 52px;
height: 32px;
}
div.m3.m3-switch > svg > g {
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
div.m3.m3-switch > svg > g {
transform: translate(11.5%, 81%);
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.m3.m3-switch > svg > g > text {
font-family: Material-Symbols-Outlined-Regular;
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
div.m3.m3-switch > svg > g > text {
font-size: 20px;
}
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer,
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-family: Material-Symbols-Outlined-Regular, serif; }
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
cy: 50%;
cx: 16px;
}
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
r: 20px;
fill-opacity: 0;
}
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
r: 8px;
}
div.m3.m3-switch > svg > rect.m3.m3-switch-track {
fill-opacity: 0; }
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
r: 8px; }
div.m3.m3-switch > svg > rect.m3.m3-switch-track {
transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
stroke-width: 2px;
border-radius: 16px;
rx: 15px;
width: 50px;
height: 30px;
}
div.m3.m3-switch > input.m3 {
cursor: pointer;
appearance: none;
opacity: 0 !important;
height: 30px; }
div.m3.m3-switch > input.m3 {
margin: 0;
width: 52px;
height: 32px;
cursor: pointer;
appearance: none;
position: absolute;
}
div.m3.m3-switch > input.m3:disabled {
cursor: not-allowed;
}
div.m3.m3-switch
> input.m3:not(:checked, :disabled)
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-outline);
}
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
transform: translate(50%, 81%);
}
div.m3.m3-switch
> input.m3:checked:not(:disabled)
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch
> input.m3:not(:disabled)
+ svg
> g
> text.m3.m3-icon-unchecked {
fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch
> input.m3:not(:disabled)
+ svg
> g
> text.m3.m3-icon-checked {
fill: var(--md-sys-color-on-primary-container);
}
div.m3.m3-switch
> input.m3:checked:disabled
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-surface);
}
div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler,
div.m3.m3-switch
> input.m3
+ svg:has(text.m3.m3-icon-unchecked)
> circle.m3.m3-switch-handler {
r: 12px;
}
div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
opacity: 0;
}
div.m3.m3-switch
> input.m3:checked
+ svg
> circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
cx: calc(100% - 16px);
}
div.m3.m3-switch
> input.m3:not(:checked)
+ svg
> g
> text.m3.m3-icon-checked {
opacity: 0;
}
div.m3.m3-switch
> input.m3:is(
div.m3.m3-switch > input.m3:checked,
div.m3.m3-switch > input.m3
):not(:disabled):active
+ svg
> circle.m3.m3-switch-handler {
r: 14px;
}
div.m3.m3-switch
> input.m3:not(:checked):disabled
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-surface);
opacity: 0 !important; }
div.m3.m3-switch > input.m3:disabled {
cursor: not-allowed; }
div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-outline); }
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
transform: translate(50%, 81%); }
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-primary); }
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
fill: var(--md-sys-color-on-primary); }
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
fill: var(--md-sys-color-on-primary-container); }
div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-surface); }
div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
r: 12px; }
div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
opacity: 0; }
div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
cx: calc(100% - 16px); }
div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
opacity: 0; }
div.m3.m3-switch > input.m3:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler {
r: 14px; }
div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
fill-opacity: 38%;
}
div.m3.m3-switch
> input.m3:hover:not(:disabled):checked
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-primary-container);
}
div.m3.m3-switch
> input.m3:hover:not(:disabled):checked
+ svg
> circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-primary);
fill: var(--md-sys-color-on-surface); }
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-primary-container); }
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 8%;
}
div.m3.m3-switch
> input.m3:hover:not(:disabled):not(:checked)
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-switch
> input.m3:hover:not(:disabled):not(:checked)
+ svg
> circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-on-surface);
fill: var(--md-sys-color-primary); }
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-surface-variant); }
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 8%;
}
div.m3.m3-switch
> input.m3:active:not(:disabled):checked
+ svg
> circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-primary);
fill: var(--md-sys-color-on-surface); }
div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 12%;
}
div.m3.m3-switch
> input.m3:active:not(:disabled):not(:checked)
+ svg
> circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-on-surface);
fill: var(--md-sys-color-primary); }
div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 12%;
}
div.m3.m3-switch
> input.m3:is(:checked, :checked:disabled)
+ svg
> rect.m3.m3-switch-track {
fill: var(--md-sys-color-on-surface); }
div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
rx: 16px;
width: 52px;
height: 32px;
stroke-width: 0;
}
div.m3.m3-switch
> input.m3:is(
div.m3.m3-switch > input.m3:not(:checked),
div.m3.m3-switch > input.m3:not(:checked):disabled
)
+ svg
> rect.m3.m3-switch-track {
stroke-width: 0; }
div.m3.m3-switch > input.m3:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
x: 1px;
y: 1px;
}
div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
y: 1px; }
div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
stroke: var(--md-sys-color-outline);
fill: var(--md-sys-color-surface-container-highest);
}
div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
stroke: var(--md-sys-color-primary);
fill: var(--md-sys-color-surface-container-highest); }
div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
fill: var(--md-sys-color-primary);
}
div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
fill: color-mix(
in srgb,
var(--md-sys-color-surface-container-highest) 38%,
transparent
);
}
div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
stroke: var(--md-sys-color-primary); }
div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent); }
div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
fill: color-mix(
in srgb,
var(--md-sys-color-surface-variant) 12%,
transparent
);
}
div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent); }
div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
transform: translateX(38.5%);
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
div.m3.m3-switch
> input.m3:checked:disabled
+ svg
> rect.m3.m3-switch-track {
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent); }
/*# sourceMappingURL=swtich.css.map */

8
src/styles/input-styles/swtich.css.map
View File

@ -1 +1,7 @@
{"version":3,"sourceRoot":"","sources":["swtich.sass"],"names":[],"mappings":"AAAA;EACI;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","file":"swtich.css"}
{
"version": 3,
"mappings": "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",
"sources": ["swtich.sass"],
"names": [],
"file": "swtich.css"
}

BIN
src/styles/mixins/.sass-cache/8b8ae4cfe093f9b8cd4cfabc532cf27ca06131f7/m3-mixins.sassc
View File

Binary file not shown.

2
src/styles/mixins/m3-mixins.css
View File

@ -1 +1,3 @@
/*# sourceMappingURL=m3-mixins.css.map */

8
src/styles/mixins/m3-mixins.css.map
View File

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

27
src/styles/ripple.css
View File

@ -3,8 +3,7 @@
width: 100%;
height: 100%;
z-index: 20;
pointer-events: none;
}
pointer-events: none; }
.m3.ripple {
position: absolute;
@ -15,26 +14,20 @@
z-index: 20;
aspect-ratio: 1;
border-radius: 50%;
animation-duration: 0.55s;
animation-iteration-count: 1;
animation-name: rippleAppearanceAnimation;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-duration: 0.55s;
transition:
opacity,
background,
background-color,
0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.m3.ripple.visible {
opacity: 1 !important;
}
transition-duration: 0.55s;
transition-property: opacity, background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.m3.ripple.visible {
opacity: 1 !important; }
@keyframes rippleAppearanceAnimation {
0% {
transform: scale3d(0, 0, 0);
}
transform: scale3d(0, 0, 0); }
100% {
transform: scale3d(1, 1, 1);
}
}
transform: scale3d(1, 1, 1); } }
/*# sourceMappingURL=ripple.css.map */

8
src/styles/ripple.css.map
View File

@ -1 +1,7 @@
{"version":3,"sourceRoot":"","sources":["ripple.sass"],"names":[],"mappings":"AAAA;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","file":"ripple.css"}
{
"version": 3,
"mappings": "AAAA,oBAAoB;EAClB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,cAAc,EAAE,IAAI;;AAEtB,UAAU;EACR,QAAQ,EAAE,QAAQ;EAClB,QAAQ,EAAE,MAAM;EAChB,cAAc,EAAE,IAAI;EACpB,gBAAgB,EAAE,MAAM;EACxB,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,EAAE;EACX,YAAY,EAAE,CAAC;EACf,aAAa,EAAE,GAAG;EAElB,kBAAkB,EAAE,KAAI;EACxB,yBAAyB,EAAE,CAAC;EAC5B,cAAc,EAAE,yBAAyB;EACzC,yBAAyB,EAAE,4BAA4B;EAEvD,mBAAmB,EAAE,KAAI;EACzB,mBAAmB,EAAE,yBAAyB;EAC9C,0BAA0B,EAAE,4BAA4B;EAExD,kBAAS;IACP,OAAO,EAAE,YAAY;;;;IAIrB,SAAS,EAAE,gBAAgB;;IAE3B,SAAS,EAAE,gBAAgB",
"sources": ["ripple.sass"],
"names": [],
"file": "ripple.css"
}

4
src/styles/typography.css
View File

@ -1,5 +1,3 @@
:is(h1, h2, h3, h4, h5, h6, code, p, span, pre, label).m3.m3-typography {
vertical-align: center;
}
/*# sourceMappingURL=typography.css.map */

8
src/styles/typography.css.map
View File

@ -1 +1,7 @@
{"version":3,"sourceRoot":"","sources":["typography.sass"],"names":[],"mappings":"AAAA;EACI","file":"typography.css"}
{
"version": 3,
"mappings": "",
"sources": [],
"names": [],
"file": "typography.css"
}