Skip to content

Instantly share code, notes, and snippets.

@abhiomkar
Created March 19, 2021 18:08
Show Gist options
  • Save abhiomkar/c3edc929841fa28ebdc6ecd720258680 to your computer and use it in GitHub Desktop.
Save abhiomkar/c3edc929841fa28ebdc6ecd720258680 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@mixin focus() {
&.mdc-ripple-upgraded--background-focused,
&:not(.mdc-ripple-upgraded):focus {
@content;
}
}
@mixin active() {
&:active:active {
@content;
}
}
@mixin states-selector-before() {
&:hover,
&:active,
&:not(.mdc-ripple-upgraded):focus,
&.mdc-ripple-upgraded--background-focused {
@content;
}
}
@mixin states-selector-after() {
&:hover {
@content;
}
@include focus {
@content;
}
@include active {
@content;
}
}
.mdc-foo-before {
@include states-selector-before() {
color: red;
border: 1px solid red;
}
}
.mdc-foo-after {
@include states-selector-after() {
color: red;
border: 1px solid red;
}
}
.mdc-foo-before:hover, .mdc-foo-before:active, .mdc-foo-before:not(.mdc-ripple-upgraded):focus, .mdc-foo-before.mdc-ripple-upgraded--background-focused {
color: red;
border: 1px solid red;
}
.mdc-foo-after:hover {
color: red;
border: 1px solid red;
}
.mdc-foo-after.mdc-ripple-upgraded--background-focused, .mdc-foo-after:not(.mdc-ripple-upgraded):focus {
color: red;
border: 1px solid red;
}
.mdc-foo-after:active:active {
color: red;
border: 1px solid red;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment