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

ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc.

Browse Source 
CHANGED: For optimizing write styles added a few mixins
FIXED: Bug with width in segmented-buttons
This commit is contained in:
doryan04
2024-02-24 00:15:35 +04:00
committed by doryan
parent 5300c63827
commit 964534c780
11 changed files with 58 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/styles/generics.css
View File

@@ -162,15 +162,15 @@ svg.m3.m3-badge {
border-radius: 8px;
}
svg.m3.m3-badge > text {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--md-sys-typescale-label-small-font-size);
font-weight: var(--md-sys-typescale-label-small-font-weight);
line-height: var(--md-sys-typescale-label-small-line-height);
font-family: var(--md-sys-typescale-label-small-font-family-name);
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
display: flex;
align-items: center;
text-anchor: middle;
justify-content: center;
font-optical-sizing: none;
alignment-baseline: central;
fill: var(--md-sys-color-on-error);
@@ -473,17 +473,17 @@ button:not(.m3-fab, .m3-icon-button) {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button:not(.m3-fab, .m3-icon-button).m3 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
contain: content;
text-align: center;
padding: 10px 24px;
align-items: center;
flex-direction: row;
display: inline-flex;
border-radius: 100px;
box-sizing: border-box;
justify-content: center;
}
button:not(.m3-fab, .m3-icon-button).filled {
background-color: var(--md-sys-color-primary);
@@ -594,18 +594,18 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
}
button.m3.m3-icon-button {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
contain: content;
border-radius: 50%;
position: relative;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
justify-content: center;
padding: 0;
width: 40px;
height: 40px;
border: none;
padding: 0;
contain: content;
border-radius: 50%;
position: relative;
flex-direction: row;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button.m3.m3-icon-button::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
@@ -792,7 +792,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
flex: 1 1;
padding: 0;
width: 100%;
min-width: 48px;
min-width: 108px;
border-radius: 0;
margin: 0 -0.5px;
display: inline-flex;
@@ -858,11 +858,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
}
div.m3.m3-radio-container {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
align-items: center;
display: inline-flex;
justify-content: center;
}
div.m3.m3-radio-container + label.m3.m3-radio-label {
margin-inline: 3px;
@@ -1005,11 +1005,11 @@ input[type=range].m3.m3-slider::-moz-range-thumb:is(:active, :focus-visible) {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
input[type=range].m3.m3-slider::-webkit-slider-container {
height: 4px;
appearance: none;
box-shadow: none;
border-radius: 2px;
min-block-size: 4px;
height: 4px;
}
input[type=range].m3.m3-slider::-webkit-slider-runnable-track {
height: 20px;
@@ -1209,16 +1209,16 @@ div.m3.m3-checkbox-container > span.m3.m3-checkbox-ripple-layer {
}
input[type=checkbox].m3.m3-checkbox {
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
width: 1.125rem;
height: 1.125rem;
appearance: none;
position: absolute;
align-items: center;
border-radius: 0.14rem;
box-sizing: content-box;
justify-content: center;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
@@ -1248,14 +1248,14 @@ input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox]
opacity: 38%;
}
input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
font-size: 24px;
font-weight: 700;
line-height: 24px;
align-items: center;
pointer-events: none;
justify-content: center;
font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}