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

ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc.

Browse Source 
CHANGED: For optimizing write styles added a few mixins
FIXED: Bug with width in segmented-buttons
This commit is contained in:
doryan04
2024-02-23 23:55:21 +04:00
committed by doryan
parent f5bf0f92d2
commit 5300c63827
28 changed files with 1628 additions and 3505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/styles/badge.sass
View File

@@ -3,23 +3,22 @@ svg.m3.m3-badge
background-color: var(--md-sys-color-error)
&.disable-value
padding: 0
height: 6px
width: 6px
height: 6px
border-radius: 3px
& > text
display: none
&
border-radius: 8px
height: 16px
border-radius: 8px
& > text
fill: var(--md-sys-color-on-error)
font-size: var(--md-sys-typescale-label-small-font-size)
font-weight: var(--md-sys-typescale-label-small-font-weight)
line-height: var(--md-sys-typescale-label-small-line-height)
font-optical-sizing: none
alignment-baseline: central
text-anchor: middle
@include m3-typography-mixin('label-small')
display: flex
align-items: center
text-anchor: middle
justify-content: center
font-optical-sizing: none
alignment-baseline: central
fill: var(--md-sys-color-on-error)

69
src/styles/button-styles/button.sass
View File

@@ -1,20 +1,11 @@
input[type="button"].test-button
color: white
&:not(:checked)
background-color: green
&:checked
background-color: blue
button:not(.m3-fab, .m3-icon-button)
width: min-content
height: min-content
@include m3-typography-mixin('label-large')
max-height: 40px
box-sizing: border-box
width: min-content
white-space: nowrap
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)
font-family: var(--md-sys-typescale-label-large-font-family-name)
height: min-content
box-sizing: border-box
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
&.m3
@@ -32,13 +23,14 @@ button:not(.m3-fab, .m3-icon-button)
&.filled
background-color: var(--md-sys-color-primary)
&, & > svg.m3-svg-icon
fill: var(--md-sys-color-on-primary)
color: var(--md-sys-color-on-primary)
&.outlined
outline-offset: -1px
background-color: #00000000
background-color: transparent
color: var(--md-sys-color-primary)
outline: 1px solid var(--md-sys-color-outline) !important
@@ -46,8 +38,7 @@ button:not(.m3-fab, .m3-icon-button)
fill: var(--md-sys-color-primary)
&.text
background-color: #00000000
padding: 10px 12px !important
background-color: transparent
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
@@ -55,6 +46,7 @@ button:not(.m3-fab, .m3-icon-button)
&.elevated
@include elevation-1(false)
color: var(--md-sys-color-primary)
background-color: var(--md-sys-color-surface-container-low)
@@ -68,17 +60,14 @@ button:not(.m3-fab, .m3-icon-button)
& > svg.m3-svg-icon
fill: var(--md-sys-color-on-secondary-container)
&::before
@include state-layer
&.filled > .m3.m3-ripple-domain > .m3.ripple
&.filled > span.m3.m3-ripple-domain > span.m3.ripple
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
&:is(.outlined, .text, .elevated)
& > .m3.m3-ripple-domain > .m3.ripple
& > span.m3.m3-ripple-domain > span.m3.ripple
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.tonal > .m3.m3-ripple-domain > .m3.ripple
&.tonal > span.m3.m3-ripple-domain > span.m3.ripple
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:active
@@ -88,21 +77,31 @@ button:not(.m3-fab, .m3-icon-button)
&.elevated
@include elevation-1(true)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:not(&:has(span.m3.m3-ripple-domain))
&.outlined
border-color: var(--md-sys-color-primary) !important
&.filled
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary))
&:is(.outlined, .text, .elevated)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
&.tonal
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container))
&:focus-visible
&.outlined
border-color: var(--md-sys-color-primary) !important
&.filled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
&.filled
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary))
&:is(.outlined, .text, .elevated)::before
&:is(.outlined, .text, .elevated)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&.tonal
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container))
&:hover
&:is(.filled, .tonal)
@@ -111,14 +110,14 @@ button:not(.m3-fab, .m3-icon-button)
&.elevated
@include elevation-2(false)
&.filled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
&.filled
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary))
&:is(.outlined, .text, .elevated)::before
&:is(.outlined, .text, .elevated)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&.tonal
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container))
&:disabled
pointer-events: none

44
src/styles/button-styles/fabs.sass
View File

@@ -1,3 +1,27 @@
@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
width: $width
height: $height
padding: $padding
border-radius: $b-radius
@mixin m3-fab-colors-palette($bg-color, $color)
&:not(.without-elevation)
@include elevation-3(false)
color: var($color)
background-color: var($bg-color)
& > svg.m3-svg-icon
fill: var($color)
& > span.m3.m3-ripple-domain > span.m3.ripple
background: color-mix(in srgb, var($color) 12%, transparent)
&:not(&:has(span.m3.m3-ripple-domain)):active
& > span.m3.m3-fab-state-layer
background: color-mix(in srgb, var($color) 20%, transparent)
button.m3.m3-fab
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
@@ -15,8 +39,8 @@ button.m3.m3-fab
border: none
gap: 12px
&::before
@include state-layer
& > span.m3.m3-fab-state-layer
@include m3-buttons-state-layer-mixin
&.surface
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
@@ -53,27 +77,27 @@ button.m3.m3-fab
@include elevation-3(true)
&:hover
&.surface::before
&.surface > span.m3.m3-fab-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&.primary::before
&.primary > span.m3.m3-fab-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
&.secondary::before
&.secondary > span.m3.m3-fab-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&.tertiary::before
&.tertiary > span.m3.m3-fab-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
&:focus-visible
&.surface::before
&.surface > span.m3.m3-fab-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.primary::before
&.primary > span.m3.m3-fab-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
&.secondary::before
&.secondary > span.m3.m3-fab-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&.tertiary::before
&.tertiary > span.m3.m3-fab-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)

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

@@ -1,44 +1,88 @@
$densities: [0, -1, -2, -3]
@each $density in $densities
.m3.m3-density-#{$density}
$height: 40px + ($density * 2px)
& > button.m3.m3-button-segment
height: $height
&:first-child
border-radius: ($height / 2) 0 0 ($height / 2)
&:last-child
border-radius: 0 ($height / 2) ($height / 2) 0
& > span.m3.m3-button-segment-state-layer
padding-top: 10px + ($density * 1px)
padding-bottom: 10px + ($density * 1px)
@mixin m3-segmented-button-content-color-mixin($color)
& > svg.m3.m3-svg-icon > text
fill: var($color)
& > label.m3.m3-typography
color: var($color)
div.m3.m3-segmented-buttons
padding: 0
height: 40px
display: flex
padding: 4px 0
border-radius: 20px
box-sizing: border-box
& > button.m3.m3-button-segment
width: auto
height: 40px
padding: 10px
min-width: 108px
flex: 1 1
padding: 0
width: 100%
min-width: 48px
border-radius: 0
margin: 0 -0.5px
display: inline-flex
background-color: transparent
border: 1px solid var(--md-sys-color-outline)
&:first-child
border-radius: 20px 0 0 20px
& > span.m3.m3-ripple-domain
transition: .2s cubic-bezier(0.2, 0, 0, 1)
&:last-child
border-radius: 0 20px 20px 0
& > span.m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
& > span
color: var(--md-sys-color-on-surface)
& > span.m3.m3-button-segment-state-layer
@include m3-buttons-state-layer-mixin
& > svg
opacity: 0
box-sizing: border-box
& > text
fill: var(--md-sys-color-on-surface)
& > *
visibility: hidden
&:not(.selected)
& > svg
& > span.m3.m3-button-segment-content-layer
@include center(inline-flex)
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface)
gap: 8px
position: absolute
max-height: inherit
& > svg.m3.m3-svg-icon
display: none
&::after, &::before
content: ''
width: 6px
position: relative
&.selected
background-color: var(--md-sys-color-secondary-container)
& > span.m3.m3-button-segment-content-layer
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-secondary-container)
& > svg.m3.m3-svg-icon
display: initial
&:hover
& > span.m3.m3-button-segment-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible)
& > span.m3.m3-button-segment-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
@@ -46,33 +90,6 @@ div.m3.m3-segmented-buttons
& > *
opacity: 38%
&.selected
background-color: var(--md-sys-color-secondary-container)
& > svg
opacity: 1
& > span
color: var(--md-sys-color-on-secondary-container)
& > text
fill: var(--md-sys-color-on-secondary-container)
& > span.m3.m3-button-segment-state-layer
width: 100%
height: 100%
position: absolute
& > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
transition: .2s cubic-bezier(0.2, 0, 0, 1)
&:hover
& > span.m3.m3-button-segment-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&:is(&:active, &:focus-visible)
& > span.m3.m3-button-segment-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:active
& > span.m3.m3-ripple-domain > span.m3.ripple

2233
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

24
src/styles/input-styles/slider.sass
View File

@@ -1,3 +1,26 @@
@mixin input-range-thumb-mixin
@include elevation-1(false)
&:hover
&::after
content: '1'
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&:is(:active, :focus-visible)
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
width: 20px
height: 20px
appearance: none
border-radius: 50%
box-sizing: border-box
outline: 10px solid transparent
background: var(--md-sys-color-primary)
transition: .2s cubic-bezier(0.2, 0, 0, 1)
div.m3.m3-slider-container
height: 20px
display: flex
@@ -6,7 +29,6 @@ div.m3.m3-slider-container
& > datalist
display: none
input[type="range"].m3.m3-slider
margin: 0
appearance: none

60
src/styles/input-styles/text-field.sass
View File

@@ -1,56 +1,55 @@
div.m3.m3-text-field
position: relative
margin: 0
display: flex
justify-content: center
position: relative
flex-direction: column
box-sizing: border-box
margin: 0
justify-content: center
span.m3-icon.icon-before
align-self: start
&:is(.filled, .outlined) > input::placeholder, & > input, & > label
line-height: var(--md-sys-typescale-body-large-line-height)
font-size: var(--md-sys-typescale-body-large-font-size)
@include m3-typography-mixin('body-large')
& + span.m3-text-field-supporting-text
@include m3-typography-mixin('body-small')
display: flex
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
color: var(--md-sys-color-on-surface-variant)
margin: 4px 16px 2px 16px
color: var(--md-sys-color-on-surface-variant)
& > label
position: absolute
padding-inline: 4px
pointer-events: none
transform: translate(16px, 0)
transition: .2s cubic-bezier(0.2, 0, 0, 1)
position: absolute
& > input
transition: .2s cubic-bezier(0.2, 0, 0, 1)
background-color: transparent
border: none
background-color: transparent
transition: .2s cubic-bezier(0.2, 0, 0, 1)
& > span.m3-icon
position: absolute
align-self: end
margin: 12px
width: 24px
line-height: 24px
margin: 12px
font-size: 24px
align-self: end
cursor: pointer
display: inherit
line-height: 24px
position: absolute
align-items: center
justify-content: inherit
cursor: pointer
color: var(--md-sys-color-on-surface-variant)
font-family: Material-Symbols-Outlined-Regular, serif
& > span.m3-text-field-state-layer
width: 100%
height: 100%
pointer-events: none
position: absolute
pointer-events: none
& > input, & > label
color: var(--md-sys-color-on-surface)
@@ -86,17 +85,17 @@ div.m3.m3-text-field
&.with-after-icon.with-before-icon
padding: 24px 48px 8px 48px
display: inline-flex
align-items: center
display: inline-flex
box-sizing: border-box
border-radius: 4px 4px 0 0
background-color: var(--md-sys-color-surface-container-highest)
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant)
& > label.raised
@include m3-typography-mixin('body-small')
transform: translate(12px, -12px)
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
& > input:required:user-invalid
caret-color: var(--md-sys-color-error)
@@ -129,27 +128,27 @@ div.m3.m3-text-field
border-radius: 4px
pointer-events: none
padding-inline: 12px
border: 1px solid var(--md-sys-color-outline)
inset: -7.5px 0px 0px 0px
border: 1px solid var(--md-sys-color-outline)
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& > legend > span
width: 100%
& > legend
opacity: 0
width: 0
opacity: 0
padding: 0
pointer-events: none
border: 0 solid transparent
transition: .05s cubic-bezier(0.2, 0, 0, 1)
& > legend.raised
border-inline-width: 6px
border-style: solid
border-color: transparent
width: auto
visibility: visible
border-style: solid
border-inline-width: 6px
border-color: transparent
& > input
&.with-after-icon
@@ -175,24 +174,23 @@ div.m3.m3-text-field
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
border-top-width: 0
border-bottom-width: 0
border-inline-width: 5.5px
border-style: solid
border-bottom-width: 0
border-color: transparent
border-inline-width: 5.5px
&:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
border-top-width: 0
border-bottom-width: 0
border-inline-width: 7.5px
border-style: solid
border-bottom-width: 0
border-color: transparent
border-inline-width: 7.5px
& > input:focus-visible + label
color: var(--md-sys-color-primary)
& > label.raised, & > fieldset > *
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
@include m3-typography-mixin('body-small')
& > label.raised
transform: translate(16px, -27px) !important

40
src/styles/mixins/m3-mixins.sass
View File

@@ -1,3 +1,8 @@
@mixin center($display)
display: $display
align-items: center
justify-content: center
@mixin m3-checkbox-container-mixin
gap: 16px
height: 40px
@@ -7,6 +12,13 @@
align-items: center
justify-content: center
@mixin m3-typography-mixin($type)
font-size: var(--md-sys-typescale-#{$type}-font-size)
font-weight: var(--md-sys-typescale-#{$type}-font-weight)
line-height: var(--md-sys-typescale-#{$type}-line-height)
font-family: var(--md-sys-typescale-#{$type}-font-family-name)
letter-spacing: var(--md-sys-typescale-#{$type}-letter-spacing)
@mixin m3-state-layer-mixin
width: 40px
aspect-ratio: 1
@@ -14,22 +26,6 @@
position: absolute
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
width: $width
height: $height
border-radius: $b-radius
padding: $padding
@mixin m3-fab-colors-palette($bg-color, $color)
&:not(.without-elevation)
@include elevation-3(false)
background-color: var($bg-color)
color: var($color)
& > svg.m3-svg-icon
fill: var($color)
& > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var($color) 12%, transparent)
@mixin elevation-0($important)
@if $important == true
box-shadow: none !important
@@ -66,12 +62,8 @@
@else
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
@mixin state-layer
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
content: ""
top: 0
bottom: 0
left: 0
right: 0
@mixin m3-buttons-state-layer-mixin
width: 100%
height: 100%
position: absolute
background: #00000000
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important

2
src/styles/typography.sass
View File

@@ -0,0 +1,2 @@
.m3.m3-typography
position: relative