CHANGED: style and components directories, removed redundant imports from styles
ADDED: container and card component, card-subcomponents WIP
This commit is contained in:
134
src/styles/button-styles/button.css
Normal file
134
src/styles/button-styles/button.css
Normal file
@@ -0,0 +1,134 @@
|
||||
button:not(.m3-fab, .m3-icon-button) {
|
||||
width: min-content;
|
||||
height: min-content;
|
||||
box-sizing: border-box;
|
||||
font-size: var(--md-sys-typescale-label-large-font-size);
|
||||
font-weight: var(--md-sys-typescale-label-large-font-weight);
|
||||
line-height: var(--md-sys-typescale-label-large-line-height);
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).m3 {
|
||||
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);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined {
|
||||
outline-offset: -1px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: var(--md-sys-color-primary);
|
||||
outline: 1px solid var(--md-sys-color-outline) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).text {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
padding: 10px 12px !important;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).elevated {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
color: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button)::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:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.elevated {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
|
||||
border-color: var(--md-sys-color-primary) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.elevated {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
|
||||
box-shadow: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
|
||||
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=button.css.map */
|
||||
1
src/styles/button-styles/button.css.map
Normal file
1
src/styles/button-styles/button.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["button.sass","../mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ECRI;EDUA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADRA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC7CA;;ADgDA;EC1CA;;AD6CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC5DA;;AD+DA;ECzDA;;AD4DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
|
||||
127
src/styles/button-styles/button.sass
Normal file
127
src/styles/button-styles/button.sass
Normal file
@@ -0,0 +1,127 @@
|
||||
button:not(.m3-fab, .m3-icon-button)
|
||||
width: min-content
|
||||
height: min-content
|
||||
box-sizing: border-box
|
||||
font-size: var(--md-sys-typescale-label-large-font-size)
|
||||
font-weight: var(--md-sys-typescale-label-large-font-weight)
|
||||
line-height: var(--md-sys-typescale-label-large-line-height)
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name)
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
|
||||
&.m3
|
||||
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
|
||||
|
||||
&.filled
|
||||
background-color: var(--md-sys-color-primary)
|
||||
&, & > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-on-primary)
|
||||
color: var(--md-sys-color-on-primary)
|
||||
|
||||
&.outlined
|
||||
outline-offset: -1px
|
||||
background-color: #00000000
|
||||
color: var(--md-sys-color-primary)
|
||||
outline: 1px solid var(--md-sys-color-outline) !important
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&.text
|
||||
background-color: #00000000
|
||||
padding: 10px 12px !important
|
||||
color: var(--md-sys-color-primary)
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&.elevated
|
||||
@include elevation-1(false)
|
||||
color: var(--md-sys-color-primary)
|
||||
background-color: var(--md-sys-color-surface-container-low)
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&.tonal
|
||||
color: var(--md-sys-color-on-secondary-container)
|
||||
background-color: var(--md-sys-color-secondary-container)
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
fill: var(--md-sys-color-on-secondary-container)
|
||||
|
||||
&::before
|
||||
@include state-layer
|
||||
|
||||
&.filled > .m3.m3-ripple-domain > .m3.ripple
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||
|
||||
&:is(.outlined, .text, .elevated)
|
||||
& > .m3.m3-ripple-domain > .m3.ripple
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.tonal > .m3.m3-ripple-domain > .m3.ripple
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&:active
|
||||
&:is(.filled, .tonal)
|
||||
@include elevation-0(true)
|
||||
|
||||
&.elevated
|
||||
@include elevation-1(true)
|
||||
|
||||
&.tonal::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&:focus-visible
|
||||
&.outlined
|
||||
border-color: var(--md-sys-color-primary) !important
|
||||
|
||||
&.filled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||
|
||||
&:is(.outlined, .text, .elevated)::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.tonal::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&:hover
|
||||
&:is(.filled, .tonal)
|
||||
@include elevation-1(false)
|
||||
|
||||
&.elevated
|
||||
@include elevation-2(false)
|
||||
|
||||
&.filled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
|
||||
|
||||
&:is(.outlined, .text, .elevated)::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&.tonal::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||
|
||||
&:disabled
|
||||
pointer-events: none
|
||||
|
||||
&:is(.filled, .elevated, .tonal, .outlined, .text)
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||||
|
||||
&:is(.filled, .elevated, .tonal)
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
|
||||
&.elevated
|
||||
box-shadow: none
|
||||
|
||||
&.outlined
|
||||
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
|
||||
17
src/styles/button-styles/fabs.css
Normal file
17
src/styles/button-styles/fabs.css
Normal file
@@ -0,0 +1,17 @@
|
||||
/* Error: Undefined mixin.
|
||||
* ,
|
||||
* 21 | @include state-layer
|
||||
* | ^^^^^^^^^^^^^^^^^^^^
|
||||
* '
|
||||
* fabs.sass 21:9 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 21 \2502 @include state-layer\a \2502 ^^^^^^^^^^^^^^^^^^^^\a \2575 \a fabs.sass 21:9 root stylesheet";
|
||||
}
|
||||
1
src/styles/button-styles/fabs.css.map
Normal file
1
src/styles/button-styles/fabs.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"fabs.css"}
|
||||
79
src/styles/button-styles/fabs.sass
Normal file
79
src/styles/button-styles/fabs.sass
Normal file
@@ -0,0 +1,79 @@
|
||||
button.m3.m3-fab
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
|
||||
& > span.m3-icon
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||
|
||||
&.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
|
||||
|
||||
&::before
|
||||
@include state-layer
|
||||
|
||||
&.surface
|
||||
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
|
||||
|
||||
&.primary
|
||||
@include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container)
|
||||
|
||||
&.secondary
|
||||
@include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container)
|
||||
|
||||
&.tertiary
|
||||
@include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container)
|
||||
|
||||
&.m3-small-fab
|
||||
@include m3-fab-default(12px, 40px, 40px, 11px)
|
||||
font-size: 24px
|
||||
|
||||
&.m3-default-fab
|
||||
@include m3-fab-default(16px, 56px, 56px, 19px)
|
||||
font-size: 24px
|
||||
|
||||
&.m3-large-fab
|
||||
@include m3-fab-default(28px, 96px, 96px, 34.5px)
|
||||
font-size: 36px
|
||||
|
||||
&.m3-extended-fab
|
||||
@include m3-fab-default(16px, auto, 56px, 19px)
|
||||
font-size: 24px
|
||||
|
||||
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover
|
||||
@include elevation-4(false)
|
||||
|
||||
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active
|
||||
@include elevation-3(true)
|
||||
|
||||
&:hover
|
||||
&.surface::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&.primary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
|
||||
|
||||
&.secondary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||
|
||||
&.tertiary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
|
||||
|
||||
&:focus-visible
|
||||
&.surface::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.primary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
|
||||
|
||||
&.secondary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&.tertiary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)
|
||||
134
src/styles/button-styles/icon-button.css
Normal file
134
src/styles/button-styles/icon-button.css
Normal file
@@ -0,0 +1,134 @@
|
||||
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;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
button.m3.m3-icon-button::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
button.m3.m3-icon-button > span.m3-icon {
|
||||
z-index: 25;
|
||||
font-size: 2em;
|
||||
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
|
||||
}
|
||||
button.m3.m3-icon-button.default {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default.selected.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.selected.toggled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.toggled {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
||||
fill: 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);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined {
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined:disabled {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
||||
fill: 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);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
fill: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
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-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
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-on-surface-variant) 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: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-inverse-on-surface) 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 {
|
||||
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 {
|
||||
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 */
|
||||
1
src/styles/button-styles/icon-button.css.map
Normal file
1
src/styles/button-styles/icon-button.css.map
Normal file
@@ -0,0 +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;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"}
|
||||
134
src/styles/button-styles/icon-button.sass
Normal file
134
src/styles/button-styles/icon-button.sass
Normal file
@@ -0,0 +1,134 @@
|
||||
button.m3.m3-icon-button
|
||||
transition: background-color, box-shadow, .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
|
||||
width: 40px
|
||||
height: 40px
|
||||
border: none
|
||||
padding: 0
|
||||
|
||||
&::before
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
content: ""
|
||||
width: 100%
|
||||
height: 100%
|
||||
position: absolute
|
||||
|
||||
& > span.m3-icon
|
||||
z-index: 25
|
||||
font-size: 2em
|
||||
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48
|
||||
|
||||
&.default
|
||||
&
|
||||
fill: var(--md-sys-color-on-surface-variant)
|
||||
background-color: #00000000
|
||||
|
||||
&:disabled, &.selected:disabled, &.selected.toggled:disabled
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
|
||||
background-color: #00000000
|
||||
|
||||
&.selected.toggled
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&.filled
|
||||
&
|
||||
fill: var(--md-sys-color-on-primary)
|
||||
background-color: var(--md-sys-color-primary)
|
||||
|
||||
&.toggled
|
||||
fill: var(--md-sys-color-primary)
|
||||
background-color: var(--md-sys-color-surface-container-highest)
|
||||
|
||||
&.selected.toggled
|
||||
fill: var(--md-sys-color-on-primary)
|
||||
background-color: var(--md-sys-color-primary)
|
||||
|
||||
&.tonal
|
||||
&.toggled
|
||||
fill: var(--md-sys-color-on-surface-variant)
|
||||
background-color: var(--md-sys-color-surface-container-highest)
|
||||
|
||||
&.selected.toggled, &
|
||||
fill: var(--md-sys-color-on-secondary-container)
|
||||
background-color: var(--md-sys-color-secondary-container)
|
||||
|
||||
&:is(.tonal, .filled, .toggled.selected):disabled
|
||||
fill: 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)
|
||||
|
||||
&.outlined
|
||||
&
|
||||
border: 1px solid var(--md-sys-color-outline)
|
||||
fill: var(--md-sys-color-on-surface-variant)
|
||||
background-color: #00000000
|
||||
|
||||
&:disabled
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
|
||||
background-color: #00000000
|
||||
|
||||
&.toggled.selected:disabled
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent)
|
||||
fill: 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)
|
||||
|
||||
&.selected.toggled
|
||||
border: 1px solid #00000000
|
||||
background-color: var(--md-sys-color-inverse-surface)
|
||||
fill: var(--md-sys-color-inverse-on-surface)
|
||||
|
||||
&.filled:not(:disabled)
|
||||
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||
&.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&:is(.outlined, .default):not(:disabled)
|
||||
& > .m3.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||||
|
||||
&:not(.outlined).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&:not(.default).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
|
||||
|
||||
&.tonal:not(:disabled)
|
||||
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
&.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||||
|
||||
&:hover:not(:disabled)
|
||||
&:is(.default, .outlined)::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)
|
||||
|
||||
&.filled::before, &.filled.toggled.selected::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
|
||||
&.filled.toggled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&.tonal::before, &.tonal.toggled.selected::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||
&.tonal.toggled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)
|
||||
|
||||
&:focus-visible:not(:disabled)
|
||||
&:is(.default, .outlined)::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||||
|
||||
&.filled::before, &.filled.toggled.selected::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||
&.filled.toggled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.tonal::before, &.tonal.toggled.selected::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
&.tonal.toggled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||||
Reference in New Issue
Block a user