Skip to content

Instantly share code, notes, and snippets.

@abhiomkar
Created March 19, 2021 18:22
Show Gist options
  • Save abhiomkar/5f53639975c413cd13c5189ad3a0f1a9 to your computer and use it in GitHub Desktop.
Save abhiomkar/5f53639975c413cd13c5189ad3a0f1a9 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@use 'sass:selector';
$hover-selector: '&:hover';
$focus-selector: '&.mdc-ripple-upgraded--background-focused, &:not(.mdc-ripple-upgraded):focus';
$active-selector: '&:active:active';
@mixin focus() {
#{$focus-selector} {
@content;
}
}
@mixin active() {
#{$active-selector} {
@content;
}
}
@mixin states-selector-before() {
&:hover {
@content;
}
@include focus {
@content;
}
@include active {
@content;
}
}
@mixin states-selector-after() {
#{$hover-selector},
#{$focus-selector},
#{$hover-selector} {
@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 {
color: red;
border: 1px solid red;
}
.mdc-foo-before.mdc-ripple-upgraded--background-focused, .mdc-foo-before:not(.mdc-ripple-upgraded):focus {
color: red;
border: 1px solid red;
}
.mdc-foo-before:active:active {
color: red;
border: 1px solid red;
}
.mdc-foo-after:hover, .mdc-foo-after.mdc-ripple-upgraded--background-focused, .mdc-foo-after:not(.mdc-ripple-upgraded):focus, .mdc-foo-after:hover {
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