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

ADDED: base styles for segmented buttons

Browse Source
This commit is contained in:
doryan
2024-02-08 12:49:46 +04:00
parent 0d1b643abf
commit e97411466d
13 changed files with 906 additions and 1892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc Normal file
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/generics.sassc
View File

Binary file not shown.

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

Binary file not shown.

4
src/styles/button-styles/segmented-button.css Normal file
View File

@@ -0,0 +1,4 @@
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
width: max-content; }
/*# sourceMappingURL=segmented-button.css.map */

7
src/styles/button-styles/segmented-button.css.map Normal file
View File

@@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AACI,yDAA+B;EAC3B,KAAK,EAAE,WAAW",
"sources": ["segmented-button.sass"],
"names": [],
"file": "segmented-button.css"
}

38
src/styles/button-styles/segmented-button.sass Normal file
View File

@@ -0,0 +1,38 @@
div.m3.m3-segmented-buttons
display: flex
flex-direction: row
outline-offset: -1px
width: min-content
border-radius: 20px
& > button.m3.m3-button-segment
width: max-content
border-radius: 0
box-sizing: border-box
height: 40px
&
border: 1px solid var(--md-sys-color-outline)
border-right: 0.5px
border-left: 0.5px
border-left-style: solid
border-right-style: solid
border-left-color: var(--md-sys-color-outline)
border-right-color: var(--md-sys-color-outline)
min-width: 107px
&:first-child
border: 1px solid var(--md-sys-color-outline)
border-right: 0.5px
border-right-style: solid
border-right-color: var(--md-sys-color-outline)
min-width: 108px - 0.5px
border-radius: 20px 0 0 20px
&:last-child
border: 1px solid var(--md-sys-color-outline)
border-left: 0.5px
border-left-style: solid
border-left-color: var(--md-sys-color-outline)
min-width: 108px - 0.5px
border-radius: 0 20px 20px 0

4
src/styles/card.sass
View File

@@ -3,7 +3,7 @@
$padding: 16px
@function padding-calculating($has-padding)
@if($has-padding == true)
@if $has-padding == true
@return $padding
@else
@return 0px
@@ -19,7 +19,7 @@ div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content
padding: padding-calculating(false)
border-radius: 12px !important
:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media).m3
div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3
padding: padding-calculating(true)
display: block
box-sizing: border-box

2614
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

7
src/styles/generics.sass
View File

@@ -11,15 +11,16 @@
@import "button-styles/fabs"
@import "button-styles/button"
@import "button-styles/icon-button"
@import "button-styles/segmented-button"
@import "input-styles/radio"
@import "input-styles/swtich"
@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)