CHANGED: style and components directories, removed redundant imports from styles
ADDED: container and card component, card-subcomponents WIP
This commit is contained in:
17
src/styles/input-styles/checkbox.css
Normal file
17
src/styles/input-styles/checkbox.css
Normal file
@@ -0,0 +1,17 @@
|
||||
/* Error: Undefined mixin.
|
||||
* ,
|
||||
* 4 | @include m3-label-mixin
|
||||
* | ^^^^^^^^^^^^^^^^^^^^^^^
|
||||
* '
|
||||
* checkbox.sass 4:5 root stylesheet */
|
||||
|
||||
body::before {
|
||||
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
|
||||
"Droid Sans Mono", monospace, monospace;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 2px solid black;
|
||||
content: "Error: Undefined mixin.\a \2577 \a 4 \2502 @include m3-label-mixin\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a checkbox.sass 4:5 root stylesheet";
|
||||
}
|
||||
1
src/styles/input-styles/checkbox.css.map
Normal file
1
src/styles/input-styles/checkbox.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["checkbox.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"checkbox.css"}
|
||||
102
src/styles/input-styles/checkbox.sass
Normal file
102
src/styles/input-styles/checkbox.sass
Normal file
@@ -0,0 +1,102 @@
|
||||
label.m3.m3-checkbox-label
|
||||
@include m3-label-mixin
|
||||
width: 18px
|
||||
height: 18px
|
||||
& > span.m3.m3-checkbox-state-layer
|
||||
@include m3-state-layer-mixin
|
||||
|
||||
span.m3.m3-checkbox-ripple-layer
|
||||
z-index: 20
|
||||
width: 2.5rem
|
||||
height: 2.5rem
|
||||
contain: content
|
||||
border-radius: 50%
|
||||
position: absolute
|
||||
|
||||
input[type="checkbox"].m3.m3-checkbox
|
||||
margin: 0
|
||||
z-index: 10
|
||||
display: flex
|
||||
width: 1.125rem
|
||||
height: 1.125rem
|
||||
appearance: none
|
||||
position: absolute
|
||||
align-items: center
|
||||
border-radius: .14rem
|
||||
box-sizing: content-box
|
||||
justify-content: center
|
||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
& ~ span.m3-checkbox-state
|
||||
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
color: var(--md-sys-color-on-surface-variant)
|
||||
|
||||
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
|
||||
& ~ span.m3-checkbox-state
|
||||
color: var(--md-sys-color-error)
|
||||
background: var(--md-sys-color-on-error)
|
||||
|
||||
&:is(:user-invalid, .m3.m3-error):not(:checked)
|
||||
& ~ span.m3-checkbox-state
|
||||
color: var(--md-sys-color-error)
|
||||
|
||||
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
|
||||
& ~ span.m3-checkbox-state
|
||||
color: var(--md-sys-color-primary)
|
||||
background: var(--md-sys-color-on-primary)
|
||||
|
||||
&:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
|
||||
color: var(--md-sys-color-on-surface)
|
||||
|
||||
&:disabled ~ *
|
||||
&:is(:hover, &, :checked)
|
||||
opacity: 38%
|
||||
|
||||
& ~ span.m3-checkbox-state
|
||||
pointer-events: none
|
||||
z-index: 10
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
line-height: 24px
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||
font-weight: 700
|
||||
font-size: 24px
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
|
||||
|
||||
&:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
|
||||
content: "check_box_outline_blank"
|
||||
|
||||
&:indeterminate ~ span.m3-checkbox-state::before
|
||||
content: "indeterminate_check_box"
|
||||
|
||||
&:checked ~ span.m3-checkbox-state::before
|
||||
content: "check_box"
|
||||
|
||||
&:not(:disabled)
|
||||
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
|
||||
& ~ span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)
|
||||
|
||||
&:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)
|
||||
& ~ span.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
|
||||
|
||||
&:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
& ~ span.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
|
||||
|
||||
&:hover
|
||||
& ~ span.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||
|
||||
&:active ~ span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
& ~ span.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
|
||||
|
||||
91
src/styles/input-styles/radio.css
Normal file
91
src/styles/input-styles/radio.css
Normal file
@@ -0,0 +1,91 @@
|
||||
@import "../mixins/m3-mixins.css";
|
||||
div.m3.m3-radio {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
|
||||
z-index: 5;
|
||||
}
|
||||
div.m3.m3-radio > span.m3.m3-radio-state-layer {
|
||||
width: 40px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
|
||||
stroke-opacity: 38%;
|
||||
stroke: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 38%;
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
|
||||
stroke: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 0;
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
|
||||
stroke: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 1;
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio svg {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
z-index: 10;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
aspect-ratio: inherit;
|
||||
}
|
||||
div.m3.m3-radio svg > circle {
|
||||
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-radio svg > circle.m3-radio-outline {
|
||||
r: 9px;
|
||||
fill: black;
|
||||
fill-opacity: 0;
|
||||
stroke-width: 2px;
|
||||
stroke: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-radio svg > circle.m3-radio-state {
|
||||
r: 5px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=radio.css.map */
|
||||
1
src/styles/input-styles/radio.css.map
Normal file
1
src/styles/input-styles/radio.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["radio.sass"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI","file":"radio.css"}
|
||||
91
src/styles/input-styles/radio.sass
Normal file
91
src/styles/input-styles/radio.sass
Normal file
@@ -0,0 +1,91 @@
|
||||
div.m3.m3-radio
|
||||
width: 20px
|
||||
height: 20px
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
|
||||
& > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
|
||||
z-index: 5
|
||||
|
||||
& > span.m3.m3-radio-state-layer
|
||||
width: 40px
|
||||
aspect-ratio: 1
|
||||
border-radius: 50%
|
||||
position: absolute
|
||||
pointer-events: none
|
||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
& > input[type="radio"].m3.m3-radio
|
||||
margin: 0
|
||||
width: 20px
|
||||
height: 20px
|
||||
aspect-ratio: 1
|
||||
cursor: pointer
|
||||
appearance: none
|
||||
position: absolute
|
||||
|
||||
&:not(:disabled)
|
||||
&:checked:hover + span.m3.m3-radio-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
& ~ span.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
|
||||
|
||||
&:hover
|
||||
& + span.m3.m3-radio-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||
|
||||
&:active + span.m3.m3-radio-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
& ~ span.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
|
||||
|
||||
&:disabled
|
||||
&:is(:not(:checked), &:checked) ~ svg
|
||||
& > circle.m3-radio-outline
|
||||
stroke-opacity: 38%
|
||||
stroke: var(--md-sys-color-on-surface)
|
||||
|
||||
&:checked ~ svg > circle.m3-radio-state
|
||||
fill-opacity: 38%
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
|
||||
&:not(:checked) ~ svg
|
||||
& > circle.m3-radio-outline
|
||||
stroke: var(--md-sys-color-on-surface-variant)
|
||||
|
||||
& > circle.m3-radio-state
|
||||
fill-opacity: 0
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&:checked ~ svg
|
||||
& > circle.m3-radio-outline
|
||||
stroke: var(--md-sys-color-primary)
|
||||
|
||||
& > circle.m3-radio-state
|
||||
fill-opacity: 1
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
svg
|
||||
margin: 0
|
||||
width: 20px
|
||||
z-index: 10
|
||||
border-radius: 50%
|
||||
pointer-events: none
|
||||
aspect-ratio: inherit
|
||||
|
||||
& > circle
|
||||
transition: fill, stroke, .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
&.m3-radio-outline
|
||||
r: 9px
|
||||
fill: black
|
||||
fill-opacity: 0
|
||||
stroke-width: 2px
|
||||
stroke: var(--md-sys-color-on-surface-variant)
|
||||
|
||||
&.m3-radio-state
|
||||
r: 5px
|
||||
225
src/styles/input-styles/swtich.css
Normal file
225
src/styles/input-styles/swtich.css
Normal file
@@ -0,0 +1,225 @@
|
||||
div.m3.m3-switch {
|
||||
margin: 4px;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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 {
|
||||
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;
|
||||
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);
|
||||
cy: 50%;
|
||||
cx: 16px;
|
||||
}
|
||||
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 {
|
||||
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;
|
||||
margin: 0;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
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);
|
||||
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-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-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-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-opacity: 12%;
|
||||
}
|
||||
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 {
|
||||
x: 1px;
|
||||
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-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 {
|
||||
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) 12%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=swtich.css.map */
|
||||
1
src/styles/input-styles/swtich.css.map
Normal file
1
src/styles/input-styles/swtich.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"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"}
|
||||
158
src/styles/input-styles/swtich.sass
Normal file
158
src/styles/input-styles/swtich.sass
Normal file
@@ -0,0 +1,158 @@
|
||||
div.m3.m3-switch
|
||||
margin: 4px
|
||||
gap: 20px
|
||||
box-sizing: content-box
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
width: 52px
|
||||
height: 32px
|
||||
|
||||
& > svg
|
||||
overflow: visible
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
width: 52px
|
||||
height: 32px
|
||||
|
||||
& > g
|
||||
transform: translate(11.5%, 81%)
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
& > text
|
||||
font-family: Material-Symbols-Outlined-Regular
|
||||
font-size: 20px
|
||||
|
||||
& > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
cy: 50%
|
||||
cx: 16px
|
||||
|
||||
& > circle.m3.m3-switch-handler-state-layer
|
||||
r: 20px
|
||||
fill-opacity: 0
|
||||
|
||||
& > circle.m3.m3-switch-handler
|
||||
r: 8px
|
||||
|
||||
& > rect.m3.m3-switch-track
|
||||
transition: fill .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
stroke-width: 2px
|
||||
border-radius: 16px
|
||||
rx: 15px
|
||||
width: 50px
|
||||
height: 30px
|
||||
|
||||
& > input.m3
|
||||
cursor: pointer
|
||||
appearance: none
|
||||
opacity: 0 !important
|
||||
margin: 0
|
||||
width: 52px
|
||||
height: 32px
|
||||
position: absolute
|
||||
|
||||
&:disabled
|
||||
cursor: not-allowed
|
||||
|
||||
&:not(:checked, :disabled) + svg
|
||||
& > circle.m3.m3-switch-handler
|
||||
fill: var(--md-sys-color-outline)
|
||||
|
||||
&:checked:not(:disabled) + svg
|
||||
& > g
|
||||
transform: translate(50%, 81%)
|
||||
|
||||
& > circle.m3.m3-switch-handler
|
||||
fill: var(--md-sys-color-on-primary)
|
||||
|
||||
&:not(:disabled) + svg
|
||||
& > g > text.m3.m3-icon-unchecked
|
||||
fill: var(--md-sys-color-on-primary)
|
||||
|
||||
& > g > text.m3.m3-icon-checked
|
||||
fill: var(--md-sys-color-on-primary-container)
|
||||
|
||||
&:checked:disabled + svg > circle.m3.m3-switch-handler
|
||||
fill: var(--md-sys-color-surface)
|
||||
|
||||
&:checked + svg > circle.m3.m3-switch-handler,
|
||||
& + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
|
||||
r: 12px
|
||||
|
||||
&:checked + svg
|
||||
& > g > text.m3.m3-icon-unchecked
|
||||
opacity: 0
|
||||
|
||||
& > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer)
|
||||
cx: calc(100% - 16px)
|
||||
|
||||
&:not(:checked) + svg
|
||||
& > g > text.m3.m3-icon-checked
|
||||
opacity: 0
|
||||
|
||||
&:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler
|
||||
r: 14px
|
||||
|
||||
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
fill-opacity: 38%
|
||||
|
||||
&:hover:not(:disabled)
|
||||
&:checked + svg
|
||||
& > circle.m3.m3-switch-handler
|
||||
fill: var(--md-sys-color-primary-container)
|
||||
|
||||
& > circle.m3.m3-switch-handler-state-layer
|
||||
fill: var(--md-sys-color-primary)
|
||||
fill-opacity: 8%
|
||||
|
||||
&:not(:checked) + svg
|
||||
& > circle.m3.m3-switch-handler
|
||||
fill: var(--md-sys-color-on-surface-variant)
|
||||
|
||||
& > circle.m3.m3-switch-handler-state-layer
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
fill-opacity: 8%
|
||||
|
||||
&:active:not(:disabled)
|
||||
&:checked + svg > circle.m3.m3-switch-handler-state-layer
|
||||
fill: var(--md-sys-color-primary)
|
||||
fill-opacity: 12%
|
||||
|
||||
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
fill-opacity: 12%
|
||||
|
||||
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
|
||||
rx: 16px
|
||||
width: 52px
|
||||
height: 32px
|
||||
stroke-width: 0
|
||||
|
||||
&:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track
|
||||
x: 1px
|
||||
y: 1px
|
||||
|
||||
&:not(:checked) + svg > rect.m3.m3-switch-track
|
||||
stroke: var(--md-sys-color-outline)
|
||||
fill: var(--md-sys-color-surface-container-highest)
|
||||
|
||||
&:checked + svg > rect.m3.m3-switch-track
|
||||
stroke: var(--md-sys-color-primary)
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&:disabled + svg
|
||||
& > g > text.m3
|
||||
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent)
|
||||
|
||||
& > 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)
|
||||
|
||||
&:checked:disabled + svg
|
||||
& > g > text.m3
|
||||
transform: translateX(38.5%)
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||||
|
||||
& > 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) 12%, transparent)
|
||||
251
src/styles/input-styles/text-field.css
Normal file
251
src/styles/input-styles/text-field.css
Normal file
@@ -0,0 +1,251 @@
|
||||
div.m3.m3-text-field {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
div.m3.m3-text-field span.m3-icon.icon-before {
|
||||
align-self: start;
|
||||
}
|
||||
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder,
|
||||
div.m3.m3-text-field > input,
|
||||
div.m3.m3-text-field > label {
|
||||
line-height: var(--md-sys-typescale-body-large-line-height);
|
||||
font-size: var(--md-sys-typescale-body-large-font-size);
|
||||
}
|
||||
div.m3.m3-text-field + 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;
|
||||
}
|
||||
div.m3.m3-text-field > label {
|
||||
padding-inline: 4px;
|
||||
pointer-events: none;
|
||||
transform: translate(16px, 0);
|
||||
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-text-field > input {
|
||||
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
div.m3.m3-text-field > 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;
|
||||
}
|
||||
div.m3.m3-text-field > span.m3-text-field-state-layer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-text-field > input,
|
||||
div.m3.m3-text-field > label {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
|
||||
outline: none;
|
||||
caret-color: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *,
|
||||
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled)
|
||||
+ span.m3-text-field-supporting-text {
|
||||
opacity: 38%;
|
||||
}
|
||||
div.m3.m3-text-field.filled {
|
||||
contain: content;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
div.m3.m3-text-field.filled > input {
|
||||
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);
|
||||
}
|
||||
div.m3.m3-text-field.filled > input.with-after-icon {
|
||||
padding: 24px 48px 8px 16px;
|
||||
}
|
||||
div.m3.m3-text-field.filled > input.with-before-icon {
|
||||
padding: 24px 16px 8px 48px;
|
||||
}
|
||||
div.m3.m3-text-field.filled > input.with-before-icon + label {
|
||||
margin-left: 32px;
|
||||
}
|
||||
div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
|
||||
padding: 24px 16px 8px;
|
||||
}
|
||||
div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
|
||||
padding: 24px 48px 8px 48px;
|
||||
}
|
||||
div.m3.m3-text-field.filled > 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);
|
||||
}
|
||||
div.m3.m3-text-field.filled > input:required:user-invalid {
|
||||
caret-color: var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
|
||||
box-shadow: inset 0 -3px 0 var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.filled > input:required:user-invalid {
|
||||
box-shadow: inset 0 -1px 0 var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.filled:has(input:required:user-invalid)
|
||||
> *:not(input):nth-last-child(-n + 3),
|
||||
div.m3.m3-text-field.filled:has(input:required:user-invalid)
|
||||
+ span.m3-text-field-supporting-text {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.filled > input:focus-visible {
|
||||
outline-offset: 3px;
|
||||
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-text-field.filled > input:focus-visible + label {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-text-field.filled:hover
|
||||
> input:not(:disabled)
|
||||
~ span.m3-text-field-state-layer {
|
||||
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
div.m3.m3-text-field.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 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-text-field.outlined > fieldset > legend > span {
|
||||
width: 100%;
|
||||
}
|
||||
div.m3.m3-text-field.outlined > fieldset > legend {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
border: 0 solid transparent;
|
||||
transition: 0.05s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-text-field.outlined > fieldset > legend.raised {
|
||||
border-inline-width: 6px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
width: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
div.m3.m3-text-field.outlined > input {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
div.m3.m3-text-field.outlined > input.with-after-icon {
|
||||
padding: 16px 48px 16px 16px;
|
||||
}
|
||||
div.m3.m3-text-field.outlined > input.with-before-icon {
|
||||
padding: 16px 16px 16px 48px;
|
||||
}
|
||||
div.m3.m3-text-field.outlined > input.with-before-icon + label {
|
||||
transform: translate(48px, 0);
|
||||
}
|
||||
div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
|
||||
padding: 16px;
|
||||
}
|
||||
div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
|
||||
padding: 16px 48px;
|
||||
}
|
||||
div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
|
||||
border: 3px solid var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:not(
|
||||
div.m3.m3-text-field.outlined: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;
|
||||
}
|
||||
div.m3.m3-text-field.outlined:not(
|
||||
div.m3.m3-text-field.outlined: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;
|
||||
}
|
||||
div.m3.m3-text-field.outlined > input:focus-visible + label {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-text-field.outlined > label.raised,
|
||||
div.m3.m3-text-field.outlined > fieldset > * {
|
||||
line-height: var(--md-sys-typescale-body-small-line-height);
|
||||
font-size: var(--md-sys-typescale-body-small-font-size);
|
||||
}
|
||||
div.m3.m3-text-field.outlined > label.raised {
|
||||
transform: translate(16px, -27px) !important;
|
||||
}
|
||||
div.m3.m3-text-field.outlined > input:required:user-invalid {
|
||||
caret-color: var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
|
||||
> *:not(input):nth-last-child(-n + 3),
|
||||
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
|
||||
+ span.m3-text-field-supporting-text {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
|
||||
border: 3px solid var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:has(
|
||||
input:required:user-invalid:not(:focus-visible)
|
||||
)
|
||||
> fieldset {
|
||||
border: 1px solid var(--md-sys-color-error);
|
||||
}
|
||||
div.m3.m3-text-field.outlined:hover:not(
|
||||
div.m3.m3-text-field.outlined:hover:has(
|
||||
input:disabled,
|
||||
input:focus-visible,
|
||||
label.raised,
|
||||
input:required:user-invalid
|
||||
)
|
||||
)
|
||||
> fieldset {
|
||||
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
border-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=text-field.css.map */
|
||||
1
src/styles/input-styles/text-field.css.map
Normal file
1
src/styles/input-styles/text-field.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["text-field.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA","file":"text-field.css"}
|
||||
216
src/styles/input-styles/text-field.sass
Normal file
216
src/styles/input-styles/text-field.sass
Normal file
@@ -0,0 +1,216 @@
|
||||
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)
|
||||
Reference in New Issue
Block a user