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

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