DONE: I forget, what I do
This commit is contained in:
parent
387027cab9
commit
7f7e2dc762
|
|
@ -6,28 +6,15 @@
|
||||||
<component name="ChangeListManager">
|
<component name="ChangeListManager">
|
||||||
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="TODO: placeholder ADDED: supported text, animation move for label, and etc">
|
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="TODO: placeholder ADDED: supported text, animation move for label, and etc">
|
||||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/app/components/text-fields.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/text-fields.tsx" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css.map" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css.map" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/fabs.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/fabs.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css.map" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css.map" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css.map" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.css.map" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.sass" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/radio.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/radio.css" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/radio.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/radio.css.map" afterDir="false" />
|
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/text-field.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/text-field.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/text-field.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css.map" afterDir="false" />
|
<change beforePath="$PROJECT_DIR$/src/styles/text-field.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css.map" afterDir="false" />
|
||||||
<change beforePath="$PROJECT_DIR$/src/styles/text-field.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.sass" afterDir="false" />
|
|
||||||
</list>
|
</list>
|
||||||
<option name="SHOW_DIALOG" value="false" />
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
|
@ -75,7 +62,7 @@
|
||||||
"node.js.selected.package.tslint": "(autodetect)",
|
"node.js.selected.package.tslint": "(autodetect)",
|
||||||
"nodejs_package_manager_path": "npm",
|
"nodejs_package_manager_path": "npm",
|
||||||
"settings.editor.selected.configurable": "watcher.settings",
|
"settings.editor.selected.configurable": "watcher.settings",
|
||||||
"ts.external.directory.path": "/home/drn04/material-you-react/node_modules/typescript/lib",
|
"ts.external.directory.path": "/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/node_modules/typescript/lib",
|
||||||
"vue.rearranger.settings.migration": "true"
|
"vue.rearranger.settings.migration": "true"
|
||||||
}
|
}
|
||||||
}]]></component>
|
}]]></component>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ export default function Page() {
|
||||||
flexDirection:"column",
|
flexDirection:"column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
width: "100%",
|
overflowX: "auto",
|
||||||
gap: "0em"
|
gap: "0em"
|
||||||
}}>
|
}}>
|
||||||
<h1>Google Material You UI kit</h1>
|
<h1>Google Material You UI kit</h1>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,7 @@
|
||||||
@import "ripple"
|
@import "ripple"
|
||||||
@import "swtich"
|
@import "swtich"
|
||||||
@import "checkbox"
|
@import "checkbox"
|
||||||
|
@import "text-field"
|
||||||
@import "icon-button"
|
@import "icon-button"
|
||||||
@import "./themes/tokens.css"
|
@import "./themes/tokens.css"
|
||||||
@import "./themes/colors.module.css"
|
@import "./themes/colors.module.css"
|
||||||
|
|
@ -15,6 +16,10 @@
|
||||||
html
|
html
|
||||||
font-family: Roboto, serif
|
font-family: Roboto, serif
|
||||||
color: var(--md-sys-color-on-surface)
|
color: var(--md-sys-color-on-surface)
|
||||||
|
@media (prefers-color-scheme: light)
|
||||||
|
background-color: white
|
||||||
|
@media (prefers-color-scheme: dark)
|
||||||
|
background-color: black
|
||||||
|
|
||||||
.m3
|
.m3
|
||||||
user-select: none
|
user-select: none
|
||||||
|
|
|
||||||
|
|
@ -10,104 +10,133 @@ button.m3.m3-icon-button {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0; }
|
padding: 0;
|
||||||
button.m3.m3-icon-button::before {
|
}
|
||||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
button.m3.m3-icon-button::before {
|
||||||
content: "";
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||||
width: 100%;
|
content: "";
|
||||||
height: 100%;
|
width: 100%;
|
||||||
position: absolute; }
|
height: 100%;
|
||||||
button.m3.m3-icon-button > span.m3-icon {
|
position: absolute;
|
||||||
z-index: 25;
|
}
|
||||||
font-size: 2em;
|
button.m3.m3-icon-button > span.m3-icon {
|
||||||
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; }
|
z-index: 25;
|
||||||
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
|
font-size: 2em;
|
||||||
font-family: Material-Symbols-Round-Regular, serif; }
|
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
|
||||||
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
|
}
|
||||||
font-size: 13.49px;
|
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
|
||||||
font-family: Material-Icons-Regular, serif;
|
font-family: Material-Symbols-Round-Regular, serif;
|
||||||
font-weight: 500; }
|
}
|
||||||
button.m3.m3-icon-button.default {
|
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
|
||||||
color: var(--md-sys-color-on-surface-variant);
|
font-size: 13.49px;
|
||||||
background-color: #00000000; }
|
font-family: Material-Icons-Regular, serif;
|
||||||
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
|
font-weight: 500;
|
||||||
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
}
|
||||||
background-color: #00000000; }
|
button.m3.m3-icon-button.default {
|
||||||
button.m3.m3-icon-button.default.selected.toggled {
|
color: var(--md-sys-color-on-surface-variant);
|
||||||
color: var(--md-sys-color-primary); }
|
background-color: rgba(0, 0, 0, 0);
|
||||||
button.m3.m3-icon-button.filled {
|
}
|
||||||
color: var(--md-sys-color-on-primary);
|
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
|
||||||
background-color: var(--md-sys-color-primary); }
|
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||||
button.m3.m3-icon-button.filled.toggled {
|
background-color: rgba(0, 0, 0, 0);
|
||||||
color: var(--md-sys-color-primary);
|
}
|
||||||
background-color: var(--md-sys-color-surface-container-highest); }
|
button.m3.m3-icon-button.default.selected.toggled {
|
||||||
button.m3.m3-icon-button.filled.selected.toggled {
|
color: var(--md-sys-color-primary);
|
||||||
color: var(--md-sys-color-on-primary);
|
}
|
||||||
background-color: var(--md-sys-color-primary); }
|
button.m3.m3-icon-button.filled {
|
||||||
button.m3.m3-icon-button.tonal.toggled {
|
color: var(--md-sys-color-on-primary);
|
||||||
color: var(--md-sys-color-on-surface-variant);
|
background-color: var(--md-sys-color-primary);
|
||||||
background-color: var(--md-sys-color-surface-container-highest); }
|
}
|
||||||
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
|
button.m3.m3-icon-button.filled.toggled {
|
||||||
color: var(--md-sys-color-on-secondary-container);
|
color: var(--md-sys-color-primary);
|
||||||
background-color: var(--md-sys-color-secondary-container); }
|
background-color: var(--md-sys-color-surface-container-highest);
|
||||||
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
}
|
||||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
button.m3.m3-icon-button.filled.selected.toggled {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
|
color: var(--md-sys-color-on-primary);
|
||||||
button.m3.m3-icon-button.outlined {
|
background-color: var(--md-sys-color-primary);
|
||||||
border: 1px solid var(--md-sys-color-outline);
|
}
|
||||||
color: var(--md-sys-color-on-surface-variant);
|
button.m3.m3-icon-button.tonal.toggled {
|
||||||
background-color: #00000000; }
|
color: var(--md-sys-color-on-surface-variant);
|
||||||
button.m3.m3-icon-button.outlined:disabled {
|
background-color: var(--md-sys-color-surface-container-highest);
|
||||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
}
|
||||||
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
|
||||||
background-color: #00000000; }
|
color: var(--md-sys-color-on-secondary-container);
|
||||||
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
|
background-color: var(--md-sys-color-secondary-container);
|
||||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
}
|
||||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||||
@media (prefers-color-scheme: light) {
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
}
|
||||||
border: 1px solid #00000000;
|
button.m3.m3-icon-button.outlined {
|
||||||
background-color: var(--md-sys-color-inverse-surface-light);
|
border: 1px solid var(--md-sys-color-outline);
|
||||||
color: var(--md-sys-color-inverse-on-surface); } }
|
color: var(--md-sys-color-on-surface-variant);
|
||||||
@media (prefers-color-scheme: dark) {
|
background-color: rgba(0, 0, 0, 0);
|
||||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
}
|
||||||
border: 1px solid #00000000;
|
button.m3.m3-icon-button.outlined:disabled {
|
||||||
background-color: var(--md-sys-color-inverse-surface);
|
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||||
color: var(--md-sys-color-inverse-on-surface); } }
|
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||||
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
background-color: rgba(0, 0, 0, 0);
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
|
}
|
||||||
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
|
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
||||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
}
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
|
button.m3.m3-icon-button.outlined.selected.toggled {
|
||||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
border: 1px solid rgba(0, 0, 0, 0);
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); }
|
background-color: var(--md-sys-color-inverse-surface);
|
||||||
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
color: var(--md-sys-color-inverse-on-surface);
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
|
}
|
||||||
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||||
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
}
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
|
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
|
}
|
||||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||||
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
}
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
|
}
|
||||||
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
|
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
|
||||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
|
}
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
|
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
|
}
|
||||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
|
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
}
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
|
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||||
|
}
|
||||||
|
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
||||||
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=icon-button.css.map */
|
/*# sourceMappingURL=icon-button.css.map */
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1 @@
|
||||||
{
|
{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI","file":"icon-button.css"}
|
||||||
"version": 3,
|
|
||||||
"mappings": "AAEA,wBAAwB;EACpB,UAAU,EAAE,wEAAuE;EACnF,OAAO,EAAE,OAAO;EAChB,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,GAAG;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,CAAC;EAEV,gCAAS;IACL,UAAU,EAAE,wEAAuE;IACnF,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,QAAQ;EAEtB,uCAAgB;IACZ,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,GAAG;IACd,uBAAuB,EAAE,yCAAyC;EAGlE,iEAAC;IACG,WAAW,EAAE,qCAAqC;EAEtD,kFAAkB;IACd,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,6BAA6B;IAC1C,WAAW,EAAE,GAAG;EAGpB,gCAAC;IACG,KAAK,EAAE,sCAAsC;IAC7C,gBAAgB,EAAE,SAAS;EAE/B,yJAA4D;IACxD,KAAK,EAAE,2EAA2E;IAClF,gBAAgB,EAAE,SAAS;EAE/B,iDAAkB;IACd,KAAK,EAAE,2BAA2B;EAGtC,+BAAC;IACG,KAAK,EAAE,8BAA8B;IACrC,gBAAgB,EAAE,2BAA2B;EAEjD,uCAAS;IACL,KAAK,EAAE,2BAA2B;IAClC,gBAAgB,EAAE,6CAA6C;EAEnE,gDAAkB;IACd,KAAK,EAAE,8BAA8B;IACrC,gBAAgB,EAAE,2BAA2B;EAGjD,sCAAS;IACL,KAAK,EAAE,sCAAsC;IAC7C,gBAAgB,EAAE,6CAA6C;EAEnE,+EAAqB;IACjB,KAAK,EAAE,0CAA0C;IACjD,gBAAgB,EAAE,uCAAuC;EAEjE,wEAAiD;IAC7C,KAAK,EAAE,mEAAmE;IAC1E,gBAAgB,EAAE,mEAAmE;EAGrF,iCAAC;IACG,MAAM,EAAE,qCAAqC;IAC7C,KAAK,EAAE,sCAAsC;IAC7C,gBAAgB,EAAE,SAAS;EAE/B,0CAAU;IACN,MAAM,EAAE,0EAA0E;IAClF,KAAK,EAAE,2EAA2E;IAClF,gBAAgB,EAAE,SAAS;EAE/B,2DAA2B;IACvB,MAAM,EAAE,yEAAyE;IACjF,KAAK,EAAE,mEAAmE;IAC1E,gBAAgB,EAAE,mEAAmE;EAEzF,oCAAoC;IAChC,kDAAkB;MACd,MAAM,EAAE,mBAAmB;MAC3B,gBAAgB,EAAE,yCAAyC;MAC3D,KAAK,EAAE,sCAAsC;EAErD,mCAAmC;IAC/B,kDAAkB;MACd,MAAM,EAAE,mBAAmB;MAC3B,gBAAgB,EAAE,mCAAmC;MACrD,KAAK,EAAE,sCAAsC;EAGrD,uLAA6F;IACzF,gBAAgB,EAAE,mEAAmE;EACzF,0FAA6C;IACzC,gBAAgB,EAAE,gEAAgE;EAGtF,mGAAqC;IACjC,gBAAgB,EAAE,2EAA2E;EAEjG,mIAAoE;IAChE,gBAAgB,EAAE,gEAAgE;EAEtF,kIAAmE;IAC/D,gBAAgB,EAAE,2EAA2E;EAGjG,qLAA6F;IACzF,gBAAgB,EAAE,+EAA+E;EACrG,yFAA6C;IACzC,gBAAgB,EAAE,2EAA2E;EAGjG,6EAAiC;IAC7B,gBAAgB,EAAE,0EAA0E;EAEhG,2IAAmD;IAC/C,gBAAgB,EAAE,kEAAkE;EACxF,oEAAwB;IACpB,gBAAgB,EAAE,+DAA+D;EAErF,yIAAiD;IAC7C,gBAAgB,EAAE,8EAA8E;EACpG,mEAAuB;IACnB,gBAAgB,EAAE,0EAA0E;EAGhG,qFAAiC;IAC7B,gBAAgB,EAAE,2EAA2E;EAEjG,2JAAmD;IAC/C,gBAAgB,EAAE,mEAAmE;EACzF,4EAAwB;IACpB,gBAAgB,EAAE,gEAAgE;EAEtF,yJAAiD;IAC7C,gBAAgB,EAAE,+EAA+E;EACrG,2EAAuB;IACnB,gBAAgB,EAAE,2EAA2E",
|
|
||||||
"sources": ["icon-button.sass"],
|
|
||||||
"names": [],
|
|
||||||
"file": "icon-button.css"
|
|
||||||
}
|
|
||||||
|
|
@ -89,17 +89,10 @@ button.m3.m3-icon-button
|
||||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||||
|
|
||||||
@media (prefers-color-scheme: light)
|
&.selected.toggled
|
||||||
&.selected.toggled
|
border: 1px solid #00000000
|
||||||
border: 1px solid #00000000
|
background-color: var(--md-sys-color-inverse-surface)
|
||||||
background-color: var(--md-sys-color-inverse-surface-light)
|
color: var(--md-sys-color-inverse-on-surface)
|
||||||
color: var(--md-sys-color-inverse-on-surface)
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark)
|
|
||||||
&.selected.toggled
|
|
||||||
border: 1px solid #00000000
|
|
||||||
background-color: var(--md-sys-color-inverse-surface)
|
|
||||||
color: var(--md-sys-color-inverse-on-surface)
|
|
||||||
|
|
||||||
&.filled:not(:disabled)
|
&.filled:not(:disabled)
|
||||||
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
|
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||||||
|
|
|
||||||
|
|
@ -4,163 +4,211 @@ div.m3.m3-text-field {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0; }
|
margin: 0;
|
||||||
div.m3.m3-text-field span.m3-icon.icon-before {
|
}
|
||||||
align-self: start; }
|
div.m3.m3-text-field span.m3-icon.icon-before {
|
||||||
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
|
align-self: start;
|
||||||
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:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
|
||||||
div.m3.m3-text-field + span.m3-text-field-supporting-text {
|
line-height: var(--md-sys-typescale-body-large-line-height);
|
||||||
display: flex;
|
font-size: var(--md-sys-typescale-body-large-font-size);
|
||||||
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 + span.m3-text-field-supporting-text {
|
||||||
color: var(--md-sys-color-on-surface-variant);
|
display: flex;
|
||||||
margin: 4px 16px 2px 16px; }
|
line-height: var(--md-sys-typescale-body-small-line-height);
|
||||||
div.m3.m3-text-field > label {
|
font-size: var(--md-sys-typescale-body-small-font-size);
|
||||||
padding-inline: 4px;
|
color: var(--md-sys-color-on-surface-variant);
|
||||||
pointer-events: none;
|
margin: 4px 16px 2px 16px;
|
||||||
transform: translate(16px, 0);
|
}
|
||||||
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
div.m3.m3-text-field > label {
|
||||||
position: absolute; }
|
padding-inline: 4px;
|
||||||
div.m3.m3-text-field > input {
|
pointer-events: none;
|
||||||
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
transform: translate(16px, 0);
|
||||||
background-color: transparent;
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||||
border: none; }
|
position: absolute;
|
||||||
div.m3.m3-text-field > span.m3-icon {
|
}
|
||||||
position: absolute;
|
div.m3.m3-text-field > input {
|
||||||
align-self: end;
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||||
margin: 12px;
|
background-color: transparent;
|
||||||
width: 24px;
|
border: none;
|
||||||
line-height: 24px;
|
}
|
||||||
font-size: 24px;
|
div.m3.m3-text-field > span.m3-icon {
|
||||||
display: inherit;
|
position: absolute;
|
||||||
align-items: center;
|
align-self: end;
|
||||||
justify-content: inherit;
|
margin: 12px;
|
||||||
cursor: pointer;
|
width: 24px;
|
||||||
color: var(--md-sys-color-on-surface-variant);
|
line-height: 24px;
|
||||||
font-family: Material-Symbols-Outlined-Regular, serif; }
|
font-size: 24px;
|
||||||
div.m3.m3-text-field > span.m3-text-field-state-layer {
|
display: inherit;
|
||||||
width: 100%;
|
align-items: center;
|
||||||
height: 100%;
|
justify-content: inherit;
|
||||||
pointer-events: none;
|
cursor: pointer;
|
||||||
position: absolute; }
|
color: var(--md-sys-color-on-surface-variant);
|
||||||
div.m3.m3-text-field > input, div.m3.m3-text-field > label {
|
font-family: Material-Symbols-Outlined-Regular, serif;
|
||||||
color: var(--md-sys-color-on-surface); }
|
}
|
||||||
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
|
div.m3.m3-text-field > span.m3-text-field-state-layer {
|
||||||
color: var(--md-sys-color-on-surface-variant); }
|
width: 100%;
|
||||||
div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
|
height: 100%;
|
||||||
outline: none;
|
pointer-events: none;
|
||||||
caret-color: var(--md-sys-color-primary); }
|
position: absolute;
|
||||||
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 > input, div.m3.m3-text-field > label {
|
||||||
div.m3.m3-text-field.filled {
|
color: var(--md-sys-color-on-surface);
|
||||||
contain: content;
|
}
|
||||||
border-radius: 4px 4px 0 0; }
|
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
|
||||||
div.m3.m3-text-field.filled > input {
|
color: var(--md-sys-color-on-surface-variant);
|
||||||
display: inline-flex;
|
}
|
||||||
align-items: center;
|
div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
|
||||||
box-sizing: border-box;
|
outline: none;
|
||||||
border-radius: 4px 4px 0 0;
|
caret-color: var(--md-sys-color-primary);
|
||||||
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:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text {
|
||||||
div.m3.m3-text-field.filled > input.with-after-icon {
|
opacity: 38%;
|
||||||
padding: 24px 48px 8px 16px; }
|
}
|
||||||
div.m3.m3-text-field.filled > input.with-before-icon {
|
div.m3.m3-text-field.filled {
|
||||||
padding: 24px 16px 8px 48px; }
|
contain: content;
|
||||||
div.m3.m3-text-field.filled > input.with-before-icon + label {
|
border-radius: 4px 4px 0 0;
|
||||||
margin-left: 32px; }
|
}
|
||||||
div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
|
div.m3.m3-text-field.filled > input {
|
||||||
padding: 24px 16px 8px; }
|
display: inline-flex;
|
||||||
div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
|
align-items: center;
|
||||||
padding: 24px 48px 8px 48px; }
|
box-sizing: border-box;
|
||||||
div.m3.m3-text-field.filled > label.raised {
|
border-radius: 4px 4px 0 0;
|
||||||
transform: translate(12px, -12px);
|
background-color: var(--md-sys-color-surface-container-highest);
|
||||||
line-height: var(--md-sys-typescale-body-small-line-height);
|
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);
|
||||||
font-size: var(--md-sys-typescale-body-small-font-size); }
|
}
|
||||||
div.m3.m3-text-field.filled > input:required:user-invalid {
|
div.m3.m3-text-field.filled > input.with-after-icon {
|
||||||
caret-color: var(--md-sys-color-error); }
|
padding: 24px 48px 8px 16px;
|
||||||
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.with-before-icon {
|
||||||
div.m3.m3-text-field.filled > input:required:user-invalid {
|
padding: 24px 16px 8px 48px;
|
||||||
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 {
|
div.m3.m3-text-field.filled > input.with-before-icon + label {
|
||||||
color: var(--md-sys-color-error); }
|
margin-left: 32px;
|
||||||
div.m3.m3-text-field.filled > input:focus-visible {
|
}
|
||||||
outline-offset: 3px;
|
div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
|
||||||
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); }
|
padding: 24px 16px 8px;
|
||||||
div.m3.m3-text-field.filled > input:focus-visible + label {
|
}
|
||||||
color: var(--md-sys-color-primary); }
|
div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
|
||||||
div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
|
padding: 24px 48px 8px 48px;
|
||||||
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.filled > label.raised {
|
||||||
div.m3.m3-text-field.outlined > fieldset {
|
transform: translate(12px, -12px);
|
||||||
margin: 0;
|
line-height: var(--md-sys-typescale-body-small-line-height);
|
||||||
position: absolute;
|
font-size: var(--md-sys-typescale-body-small-font-size);
|
||||||
border-radius: 4px;
|
}
|
||||||
pointer-events: none;
|
div.m3.m3-text-field.filled > input:required:user-invalid {
|
||||||
padding-inline: 12px;
|
caret-color: var(--md-sys-color-error);
|
||||||
border: 1px solid var(--md-sys-color-outline);
|
}
|
||||||
inset: -7.5px 0px 0px 0px;
|
div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
|
||||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
|
box-shadow: inset 0 -3px 0 var(--md-sys-color-error);
|
||||||
div.m3.m3-text-field.outlined > fieldset > legend > span {
|
}
|
||||||
width: 100%; }
|
div.m3.m3-text-field.filled > input:required:user-invalid {
|
||||||
div.m3.m3-text-field.outlined > fieldset > legend {
|
box-shadow: inset 0 -1px 0 var(--md-sys-color-error);
|
||||||
opacity: 0;
|
}
|
||||||
width: 0;
|
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 {
|
||||||
padding: 0;
|
color: var(--md-sys-color-error);
|
||||||
pointer-events: none;
|
}
|
||||||
border: 0 solid transparent;
|
div.m3.m3-text-field.filled > input:focus-visible {
|
||||||
transition: 0.05s cubic-bezier(0.2, 0, 0, 1); }
|
outline-offset: 3px;
|
||||||
div.m3.m3-text-field.outlined > fieldset > legend.raised {
|
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary);
|
||||||
border-inline-width: 6px;
|
}
|
||||||
border-style: solid;
|
div.m3.m3-text-field.filled > input:focus-visible + label {
|
||||||
border-color: transparent;
|
color: var(--md-sys-color-primary);
|
||||||
width: auto;
|
}
|
||||||
visibility: visible; }
|
div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
|
||||||
div.m3.m3-text-field.outlined > input {
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||||
box-sizing: border-box;
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||||
border-radius: 4px; }
|
}
|
||||||
div.m3.m3-text-field.outlined > input.with-after-icon {
|
div.m3.m3-text-field.outlined > fieldset {
|
||||||
padding: 16px 48px 16px 16px; }
|
margin: 0;
|
||||||
div.m3.m3-text-field.outlined > input.with-before-icon {
|
position: absolute;
|
||||||
padding: 16px 16px 16px 48px; }
|
border-radius: 4px;
|
||||||
div.m3.m3-text-field.outlined > input.with-before-icon + label {
|
pointer-events: none;
|
||||||
transform: translate(48px, 0); }
|
padding-inline: 12px;
|
||||||
div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
|
border: 1px solid var(--md-sys-color-outline);
|
||||||
padding: 16px; }
|
inset: -7.5px 0px 0px 0px;
|
||||||
div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
|
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||||
padding: 16px 48px; }
|
}
|
||||||
div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
|
div.m3.m3-text-field.outlined > fieldset > legend > span {
|
||||||
border: 3px solid var(--md-sys-color-primary); }
|
width: 100%;
|
||||||
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;
|
div.m3.m3-text-field.outlined > fieldset > legend {
|
||||||
border-bottom-width: 0;
|
opacity: 0;
|
||||||
border-inline-width: 5.5px;
|
width: 0;
|
||||||
border-style: solid;
|
padding: 0;
|
||||||
border-color: transparent; }
|
pointer-events: none;
|
||||||
div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend {
|
border: 0 solid transparent;
|
||||||
border-top-width: 0;
|
transition: 0.05s cubic-bezier(0.2, 0, 0, 1);
|
||||||
border-bottom-width: 0;
|
}
|
||||||
border-inline-width: 7.5px;
|
div.m3.m3-text-field.outlined > fieldset > legend.raised {
|
||||||
border-style: solid;
|
border-inline-width: 6px;
|
||||||
border-color: transparent; }
|
border-style: solid;
|
||||||
div.m3.m3-text-field.outlined > input:focus-visible + label {
|
border-color: transparent;
|
||||||
color: var(--md-sys-color-primary); }
|
width: auto;
|
||||||
div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * {
|
visibility: visible;
|
||||||
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 > input {
|
||||||
div.m3.m3-text-field.outlined > label.raised {
|
box-sizing: border-box;
|
||||||
transform: translate(16px, -27px) !important; }
|
border-radius: 4px;
|
||||||
div.m3.m3-text-field.outlined > input:required:user-invalid {
|
}
|
||||||
caret-color: var(--md-sys-color-error); }
|
div.m3.m3-text-field.outlined > input.with-after-icon {
|
||||||
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 {
|
padding: 16px 48px 16px 16px;
|
||||||
color: var(--md-sys-color-error); }
|
}
|
||||||
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
|
div.m3.m3-text-field.outlined > input.with-before-icon {
|
||||||
border: 3px solid var(--md-sys-color-error); }
|
padding: 16px 16px 16px 48px;
|
||||||
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 > input.with-before-icon + label {
|
||||||
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 {
|
transform: translate(48px, 0);
|
||||||
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
}
|
||||||
border-color: var(--md-sys-color-on-surface); }
|
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 */
|
/*# sourceMappingURL=text-field.css.map */
|
||||||
|
|
|
||||||
|
|
@ -1,7 +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"}
|
||||||
"version": 3,
|
|
||||||
"mappings": "AAAA,oBAAoB;EAChB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,cAAc,EAAE,MAAM;EACtB,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,CAAC;EAET,6CAAwB;IACpB,UAAU,EAAE,KAAK;EAErB,4HAAmE;IAC/D,WAAW,EAAE,8CAA8C;IAC3D,SAAS,EAAE,4CAA4C;EAE3D,yDAAsC;IAClC,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,8CAA8C;IAC3D,SAAS,EAAE,4CAA4C;IACvD,KAAK,EAAE,sCAAsC;IAC7C,MAAM,EAAE,iBAAiB;EAE7B,4BAAS;IACL,cAAc,EAAE,GAAG;IACnB,cAAc,EAAE,IAAI;IACpB,SAAS,EAAE,kBAAkB;IAC7B,UAAU,EAAE,+BAA8B;IAC1C,QAAQ,EAAE,QAAQ;EAEtB,4BAAS;IACL,UAAU,EAAE,+BAA8B;IAC1C,gBAAgB,EAAE,WAAW;IAC7B,MAAM,EAAE,IAAI;EAEhB,mCAAgB;IACZ,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,GAAG;IACf,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,OAAO;IAChB,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,OAAO;IACxB,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,sCAAsC;IAC7C,WAAW,EAAE,wCAAwC;EAEzD,qDAAkC;IAC9B,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,cAAc,EAAE,IAAI;IACpB,QAAQ,EAAE,QAAQ;EAEtB,0DAAoB;IAChB,KAAK,EAAE,8BAA8B;EAEzC,gEAA6C;IACzC,KAAK,EAAE,sCAAsC;EAEjD,iEAA8C;IAC1C,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,2BAA2B;EAGxC,yKAA6C;IACzC,OAAO,EAAE,GAAG;EAEpB,2BAAQ;IACJ,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,WAAW;IAE1B,mCAAS;MAgBL,OAAO,EAAE,WAAW;MACpB,WAAW,EAAE,MAAM;MACnB,UAAU,EAAE,UAAU;MACtB,aAAa,EAAE,WAAW;MAC1B,gBAAgB,EAAE,6CAA6C;MAC/D,UAAU,EAAE,qDAAqD;MApBjE,mDAAiB;QACb,OAAO,EAAE,kBAAkB;MAE/B,oDAAkB;QACd,OAAO,EAAE,kBAAkB;MAE/B,4DAA0B;QACtB,WAAW,EAAE,IAAI;MAErB,4EAA0C;QACtC,OAAO,EAAE,aAAa;MAE1B,oEAAkC;QAC9B,OAAO,EAAE,kBAAkB;IASnC,0CAAgB;MACZ,SAAS,EAAE,sBAAsB;MACjC,WAAW,EAAE,8CAA8C;MAC3D,SAAS,EAAE,4CAA4C;IAE3D,yDAA+B;MAC3B,WAAW,EAAE,yBAAyB;MAEtC,uEAAe;QACX,UAAU,EAAE,wCAAwC;MACxD,yDAAC;QACG,UAAU,EAAE,wCAAwC;IAE5D,qMAAyE;MAErE,KAAK,EAAE,yBAAyB;IAEpC,iDAAuB;MACnB,cAAc,EAAE,GAAG;MACnB,UAAU,EAAE,0CAA0C;IAE1D,yDAA+B;MAC3B,KAAK,EAAE,2BAA2B;IAGlC,yFAAyD;MACrD,UAAU,EAAE,+BAA8B;MAC1C,gBAAgB,EAAE,kEAAkE;EAG5F,wCAAY;IACR,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,QAAQ;IAClB,aAAa,EAAE,GAAG;IAClB,cAAc,EAAE,IAAI;IACpB,cAAc,EAAE,IAAI;IACpB,MAAM,EAAE,qCAAqC;IAC7C,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,gDAA+C;IAE3D,wDAAiB;MACb,KAAK,EAAE,IAAI;IAEf,iDAAU;MACN,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,CAAC;MACR,OAAO,EAAE,CAAC;MACV,cAAc,EAAE,IAAI;MACpB,MAAM,EAAE,mBAAmB;MAC3B,UAAU,EAAE,gCAA+B;IAE/C,wDAAiB;MACb,mBAAmB,EAAE,GAAG;MACxB,YAAY,EAAE,KAAK;MACnB,YAAY,EAAE,WAAW;MACzB,KAAK,EAAE,IAAI;MACX,UAAU,EAAE,OAAO;EAE3B,qCAAS;IAgBL,UAAU,EAAE,UAAU;IACtB,aAAa,EAAE,GAAG;IAhBlB,qDAAiB;MACb,OAAO,EAAE,mBAAmB;IAEhC,sDAAkB;MACd,OAAO,EAAE,mBAAmB;IAEhC,8DAA0B;MACtB,SAAS,EAAE,kBAAkB;IAEjC,8EAA0C;MACtC,OAAO,EAAE,IAAI;IAEjB,sEAAkC;MAC9B,OAAO,EAAE,SAAS;EAK1B,iEAAqC;IACjC,MAAM,EAAE,qCAAqC;EAEjD,+HAAuE;IACnE,gBAAgB,EAAE,CAAC;IACnB,mBAAmB,EAAE,CAAC;IACtB,mBAAmB,EAAE,KAAK;IAC1B,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,WAAW;EAE7B,+HAAuE;IACnE,gBAAgB,EAAE,CAAC;IACnB,mBAAmB,EAAE,CAAC;IACtB,mBAAmB,EAAE,KAAK;IAC1B,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,WAAW;EAE7B,2DAA+B;IAC3B,KAAK,EAAE,2BAA2B;EAEtC,0FAAkC;IAC9B,WAAW,EAAE,8CAA8C;IAC3D,SAAS,EAAE,4CAA4C;EAE3D,4CAAgB;IACZ,SAAS,EAAE,iCAAiC;EAEhD,2DAA+B;IAC3B,WAAW,EAAE,yBAAyB;EAE1C,yMAAyE;IAErE,KAAK,EAAE,yBAAyB;EAEpC,yEAA6C;IACzC,MAAM,EAAE,mCAAmC;EAE/C,6FAAiE;IAC7D,MAAM,EAAE,mCAAmC;EAG3C,2KAAuG;IACnG,UAAU,EAAE,+BAA8B;IAC1C,YAAY,EAAE,8BAA8B",
|
|
||||||
"sources": ["text-field.sass"],
|
|
||||||
"names": [],
|
|
||||||
"file": "text-field.css"
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue