217 lines
6.9 KiB
Sass
217 lines
6.9 KiB
Sass
div.m3.m3-text-field
|
|
position: relative
|
|
display: flex
|
|
justify-content: center
|
|
flex-direction: column
|
|
box-sizing: border-box
|
|
margin: 0
|
|
|
|
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)
|
|
|
|
& + span.m3-text-field-supporting-text
|
|
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
|
|
|
|
& > label
|
|
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
|
|
|
|
& > span.m3-icon
|
|
position: absolute
|
|
align-self: end
|
|
margin: 12px
|
|
width: 24px
|
|
line-height: 24px
|
|
font-size: 24px
|
|
display: inherit
|
|
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
|
|
|
|
& > input, & > label
|
|
color: var(--md-sys-color-on-surface)
|
|
|
|
&:is(.filled, .outlined) > input::placeholder
|
|
color: var(--md-sys-color-on-surface-variant)
|
|
|
|
&:is(.filled, .outlined) > input:focus-visible
|
|
outline: none
|
|
caret-color: var(--md-sys-color-primary)
|
|
|
|
&:is(.filled, .outlined):has(input:disabled)
|
|
& > *, & + span.m3-text-field-supporting-text
|
|
opacity: 38%
|
|
|
|
&.filled
|
|
contain: content
|
|
border-radius: 4px 4px 0 0
|
|
|
|
& > input
|
|
&.with-after-icon
|
|
padding: 24px 48px 8px 16px
|
|
|
|
&.with-before-icon
|
|
padding: 24px 16px 8px 48px
|
|
|
|
&.with-before-icon + label
|
|
margin-left: 32px
|
|
|
|
&:not(.with-after-icon, .with-before-icon)
|
|
padding: 24px 16px 8px
|
|
|
|
&.with-after-icon.with-before-icon
|
|
padding: 24px 48px 8px 48px
|
|
|
|
display: inline-flex
|
|
align-items: center
|
|
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
|
|
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)
|
|
|
|
&:focus-visible
|
|
box-shadow: inset 0 -3px 0 var(--md-sys-color-error)
|
|
&
|
|
box-shadow: inset 0 -1px 0 var(--md-sys-color-error)
|
|
|
|
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
|
|
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
|
|
color: var(--md-sys-color-error)
|
|
|
|
& > input:focus-visible
|
|
outline-offset: 3px
|
|
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary)
|
|
|
|
& > input:focus-visible + label
|
|
color: var(--md-sys-color-primary)
|
|
|
|
&:hover
|
|
& > input:not(:disabled) ~ span.m3-text-field-state-layer
|
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
|
|
|
&.outlined
|
|
& > fieldset
|
|
margin: 0
|
|
position: absolute
|
|
border-radius: 4px
|
|
pointer-events: none
|
|
padding-inline: 12px
|
|
border: 1px solid var(--md-sys-color-outline)
|
|
inset: -7.5px 0px 0px 0px
|
|
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
|
|
|
& > legend > span
|
|
width: 100%
|
|
|
|
& > legend
|
|
opacity: 0
|
|
width: 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
|
|
|
|
& > input
|
|
&.with-after-icon
|
|
padding: 16px 48px 16px 16px
|
|
|
|
&.with-before-icon
|
|
padding: 16px 16px 16px 48px
|
|
|
|
&.with-before-icon + label
|
|
transform: translate(48px, 0)
|
|
|
|
&:not(.with-after-icon, .with-before-icon)
|
|
padding: 16px
|
|
|
|
&.with-after-icon.with-before-icon
|
|
padding: 16px 48px
|
|
|
|
box-sizing: border-box
|
|
border-radius: 4px
|
|
|
|
&:has(input:focus-visible) > fieldset
|
|
border: 3px solid var(--md-sys-color-primary)
|
|
|
|
&: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-color: transparent
|
|
|
|
&: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-color: transparent
|
|
|
|
& > 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)
|
|
|
|
& > label.raised
|
|
transform: translate(16px, -27px) !important
|
|
|
|
& > input:required:user-invalid
|
|
caret-color: var(--md-sys-color-error)
|
|
|
|
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
|
|
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
|
|
color: var(--md-sys-color-error)
|
|
|
|
&:has(input:required:user-invalid) > fieldset
|
|
border: 3px solid var(--md-sys-color-error)
|
|
|
|
&:has(input:required:user-invalid:not(:focus-visible)) > fieldset
|
|
border: 1px solid var(--md-sys-color-error)
|
|
|
|
&:hover
|
|
&:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset
|
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
|
border-color: var(--md-sys-color-on-surface)
|