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

ESLINT is holy crap

Browse Source
This commit is contained in:
doryan04
2024-02-01 01:58:19 +04:00
parent 7cdc259fb3
commit 26584d5482
151 changed files with 26811 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/styles/fabs.css Normal file
View File

@@ -0,0 +1,211 @@
button.m3.m3-fab {
transition:
background-color,
box-shadow,
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button.m3.m3-fab > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
}
button.m3.m3-fab.m3 {
contain: content;
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
border: none;
gap: 12px;
}
button.m3.m3-fab::before {
transition:
background-color,
box-shadow,
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
background: rgba(0, 0, 0, 0);
}
button.m3.m3-fab.surface {
background-color: var(--md-sys-color-surface-container-high);
color: var(--md-sys-color-primary);
}
button.m3.m3-fab.surface:not(.without-elevation) {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.surface > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-fab.primary {
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
}
button.m3.m3-fab.primary:not(.without-elevation) {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.primary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-primary-container);
}
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(
in srgb,
var(--md-sys-color-on-primary-container) 12%,
transparent
);
}
button.m3.m3-fab.secondary {
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
}
button.m3.m3-fab.secondary:not(.without-elevation) {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.secondary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-secondary-container);
}
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 12%,
transparent
);
}
button.m3.m3-fab.tertiary {
background-color: var(--md-sys-color-tertiary-container);
color: var(--md-sys-color-on-tertiary-container);
}
button.m3.m3-fab.tertiary:not(.without-elevation) {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.tertiary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-tertiary-container);
}
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(
in srgb,
var(--md-sys-color-on-tertiary-container) 12%,
transparent
);
}
button.m3.m3-fab.m3-small-fab {
width: 40px;
height: 40px;
border-radius: 12px;
padding: 11px;
font-size: 24px;
}
button.m3.m3-fab.m3-default-fab {
width: 56px;
height: 56px;
border-radius: 16px;
padding: 19px;
font-size: 24px;
}
button.m3.m3-fab.m3-large-fab {
width: 96px;
height: 96px;
border-radius: 28px;
padding: 34.5px;
font-size: 36px;
}
button.m3.m3-fab.m3-extended-fab {
width: auto;
height: 56px;
border-radius: 16px;
padding: 19px;
font-size: 24px;
}
button.m3.m3-fab:not(.without-elevation):is(
.surface,
.primary,
.secondary,
.tertiary
):hover {
box-shadow:
0 2px 3px 0 rgba(0, 0, 0, 0.3),
0 6px 10px 4px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab:not(.without-elevation):is(
.surface,
.primary,
.secondary,
.tertiary
):active {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
}
button.m3.m3-fab:hover.surface::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 8%,
transparent
);
}
button.m3.m3-fab:hover.primary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-primary-container) 8%,
transparent
);
}
button.m3.m3-fab:hover.secondary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 8%,
transparent
);
}
button.m3.m3-fab:hover.tertiary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-tertiary-container) 8%,
transparent
);
}
button.m3.m3-fab:focus-visible.surface::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 12%,
transparent
);
}
button.m3.m3-fab:focus-visible.primary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-primary-container) 12%,
transparent
);
}
button.m3.m3-fab:focus-visible.secondary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 12%,
transparent
);
}
button.m3.m3-fab:focus-visible.tertiary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-tertiary-container) 12%,
transparent
);
}
/*# sourceMappingURL=fabs.css.map */