Skip to content

Instantly share code, notes, and snippets.

@diarcastro

diarcastro/input.scss

Created April 7, 2022 13:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save diarcastro/b760762058eb27135bb1bf8bf55002e3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save diarcastro/b760762058eb27135bb1bf8bf55002e3 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
/* Colors for testing */
$violet: violet;
$white: #FFF;
/* End Colors for testing */
@mixin theme-selectors ($primary_color: $violet, $secondary_color: $white) {
a:not(.button),
button.button--unstyled,
&.cp-hero-banner__container .button-secondary,
.button--background-white {
color: $primary_color;
}
.button {
color: $secondary_color;
}
.button-secondary {
border-color: $primary_color;
color: $primary_color;
}
}
%light-theme {
h1,
h2,
h3,
h4,
h5,
h6,
p,
div,
legend,
label,
ul li,
ol li,
blockquote {
color:$violet;
}
blockquote {
margin-left: 0px;
&:before {
border-color:$violet;
}
}
@include theme-selectors($violet, $white);
}
%dark-theme {
h1,
h2,
h3,
h4,
h5,
h6,
p,
div,
legend,
label,
ul li,
ol li,
blockquote {
color:$white;
}
blockquote:before {
border-color: $white;
color: $white;
}
@include theme-selectors($white, $violet);
}
.is-theme--light,
.is-theme--dark .is-theme--light,
.is-theme-hover--light:hover,
.is-theme-hover--light:focus {
@extend %light-theme;
.theme--dark {
@extend %dark-theme;
}
}
.is-theme--dark .is-theme--light {
@include theme-selectors($violet, $white);
.theme--dark {
@include theme-selectors($white, $violet);
}
}
.is-theme--dark,
.is-theme--light .is-theme--dark,
.is-theme-hover--dark:hover,
.is-theme-hover--dark:focus {
@extend %dark-theme;
.theme--light {
@extend %light-theme;
}
}
.is-theme--light .is-theme--dark {
@include theme-selectors($white, $violet);
.theme--light {
@include theme-selectors($violet, $white);
}
}
Raw
output.css
/* Colors for testing */
/* End Colors for testing */
.is-theme--dark .theme--light h1,
.is-theme--light .is-theme--dark .theme--light h1,
.is-theme-hover--dark:hover .theme--light h1,
.is-theme-hover--dark:focus .theme--light h1, .is-theme--light h1,
.is-theme--dark .is-theme--light h1,
.is-theme-hover--light:hover h1,
.is-theme-hover--light:focus h1,
.is-theme--dark .theme--light h2,
.is-theme--light .is-theme--dark .theme--light h2,
.is-theme-hover--dark:hover .theme--light h2,
.is-theme-hover--dark:focus .theme--light h2,
.is-theme--light h2,
.is-theme--dark .is-theme--light h2,
.is-theme-hover--light:hover h2,
.is-theme-hover--light:focus h2,
.is-theme--dark .theme--light h3,
.is-theme--light .is-theme--dark .theme--light h3,
.is-theme-hover--dark:hover .theme--light h3,
.is-theme-hover--dark:focus .theme--light h3,
.is-theme--light h3,
.is-theme--dark .is-theme--light h3,
.is-theme-hover--light:hover h3,
.is-theme-hover--light:focus h3,
.is-theme--dark .theme--light h4,
.is-theme--light .is-theme--dark .theme--light h4,
.is-theme-hover--dark:hover .theme--light h4,
.is-theme-hover--dark:focus .theme--light h4,
.is-theme--light h4,
.is-theme--dark .is-theme--light h4,
.is-theme-hover--light:hover h4,
.is-theme-hover--light:focus h4,
.is-theme--dark .theme--light h5,
.is-theme--light .is-theme--dark .theme--light h5,
.is-theme-hover--dark:hover .theme--light h5,
.is-theme-hover--dark:focus .theme--light h5,
.is-theme--light h5,
.is-theme--dark .is-theme--light h5,
.is-theme-hover--light:hover h5,
.is-theme-hover--light:focus h5,
.is-theme--dark .theme--light h6,
.is-theme--light .is-theme--dark .theme--light h6,
.is-theme-hover--dark:hover .theme--light h6,
.is-theme-hover--dark:focus .theme--light h6,
.is-theme--light h6,
.is-theme--dark .is-theme--light h6,
.is-theme-hover--light:hover h6,
.is-theme-hover--light:focus h6,
.is-theme--dark .theme--light p,
.is-theme--light .is-theme--dark .theme--light p,
.is-theme-hover--dark:hover .theme--light p,
.is-theme-hover--dark:focus .theme--light p,
.is-theme--light p,
.is-theme--dark .is-theme--light p,
.is-theme-hover--light:hover p,
.is-theme-hover--light:focus p,
.is-theme--dark .theme--light div,
.is-theme--light .is-theme--dark .theme--light div,
.is-theme-hover--dark:hover .theme--light div,
.is-theme-hover--dark:focus .theme--light div,
.is-theme--light div,
.is-theme--dark .is-theme--light div,
.is-theme-hover--light:hover div,
.is-theme-hover--light:focus div,
.is-theme--dark .theme--light legend,
.is-theme--light .is-theme--dark .theme--light legend,
.is-theme-hover--dark:hover .theme--light legend,
.is-theme-hover--dark:focus .theme--light legend,
.is-theme--light legend,
.is-theme--dark .is-theme--light legend,
.is-theme-hover--light:hover legend,
.is-theme-hover--light:focus legend,
.is-theme--dark .theme--light label,
.is-theme--light .is-theme--dark .theme--light label,
.is-theme-hover--dark:hover .theme--light label,
.is-theme-hover--dark:focus .theme--light label,
.is-theme--light label,
.is-theme--dark .is-theme--light label,
.is-theme-hover--light:hover label,
.is-theme-hover--light:focus label,
.is-theme--dark .theme--light ul li,
.is-theme--light .is-theme--dark .theme--light ul li,
.is-theme-hover--dark:hover .theme--light ul li,
.is-theme-hover--dark:focus .theme--light ul li,
.is-theme--light ul li,
.is-theme--dark .is-theme--light ul li,
.is-theme-hover--light:hover ul li,
.is-theme-hover--light:focus ul li,
.is-theme--dark .theme--light ol li,
.is-theme--light .is-theme--dark .theme--light ol li,
.is-theme-hover--dark:hover .theme--light ol li,
.is-theme-hover--dark:focus .theme--light ol li,
.is-theme--light ol li,
.is-theme--dark .is-theme--light ol li,
.is-theme-hover--light:hover ol li,
.is-theme-hover--light:focus ol li,
.is-theme--dark .theme--light blockquote,
.is-theme--light .is-theme--dark .theme--light blockquote,
.is-theme-hover--dark:hover .theme--light blockquote,
.is-theme-hover--dark:focus .theme--light blockquote,
.is-theme--light blockquote,
.is-theme--dark .is-theme--light blockquote,
.is-theme-hover--light:hover blockquote,
.is-theme-hover--light:focus blockquote {
color: violet;
}
.is-theme--dark .theme--light blockquote,
.is-theme-hover--dark:hover .theme--light blockquote,
.is-theme-hover--dark:focus .theme--light blockquote, .is-theme--light blockquote,
.is-theme--dark .is-theme--light blockquote,
.is-theme-hover--light:hover blockquote,
.is-theme-hover--light:focus blockquote {
margin-left: 0px;
}
.is-theme--dark .theme--light blockquote:before,
.is-theme-hover--dark:hover .theme--light blockquote:before,
.is-theme-hover--dark:focus .theme--light blockquote:before, .is-theme--light blockquote:before,
.is-theme--dark .is-theme--light blockquote:before,
.is-theme-hover--light:hover blockquote:before,
.is-theme-hover--light:focus blockquote:before {
border-color: violet;
}
.is-theme--dark .theme--light a:not(.button),
.is-theme-hover--dark:hover .theme--light a:not(.button),
.is-theme-hover--dark:focus .theme--light a:not(.button), .is-theme--light a:not(.button),
.is-theme-hover--light:hover a:not(.button),
.is-theme-hover--light:focus a:not(.button),
.is-theme--dark .theme--light button.button--unstyled,
.is-theme-hover--dark:hover .theme--light button.button--unstyled,
.is-theme-hover--dark:focus .theme--light button.button--unstyled,
.is-theme--light button.button--unstyled,
.is-theme-hover--light:hover button.button--unstyled,
.is-theme-hover--light:focus button.button--unstyled, .is-theme--dark .cp-hero-banner__container.theme--light .button-secondary,
.is-theme-hover--dark:hover .cp-hero-banner__container.theme--light .button-secondary,
.is-theme-hover--dark:focus .cp-hero-banner__container.theme--light .button-secondary, .cp-hero-banner__container.is-theme--light .button-secondary,
.cp-hero-banner__container.is-theme-hover--light:hover .button-secondary,
.cp-hero-banner__container.is-theme-hover--light:focus .button-secondary,
.is-theme--dark .theme--light .button--background-white,
.is-theme-hover--dark:hover .theme--light .button--background-white,
.is-theme-hover--dark:focus .theme--light .button--background-white,
.is-theme--light .button--background-white,
.is-theme-hover--light:hover .button--background-white,
.is-theme-hover--light:focus .button--background-white {
color: violet;
}
.is-theme--dark .theme--light .button,
.is-theme-hover--dark:hover .theme--light .button,
.is-theme-hover--dark:focus .theme--light .button, .is-theme--light .button,
.is-theme-hover--light:hover .button,
.is-theme-hover--light:focus .button {
color: #FFF;
}
.is-theme--dark .theme--light .button-secondary,
.is-theme-hover--dark:hover .theme--light .button-secondary,
.is-theme-hover--dark:focus .theme--light .button-secondary, .is-theme--light .button-secondary,
.is-theme-hover--light:hover .button-secondary,
.is-theme-hover--light:focus .button-secondary {
border-color: violet;
color: violet;
}
.is-theme--dark h1,
.is-theme--light .is-theme--dark h1,
.is-theme-hover--dark:hover h1,
.is-theme-hover--dark:focus h1, .is-theme--light .theme--dark h1,
.is-theme-hover--light:hover .theme--dark h1,
.is-theme-hover--light:focus .theme--dark h1,
.is-theme--dark h2,
.is-theme--light .is-theme--dark h2,
.is-theme-hover--dark:hover h2,
.is-theme-hover--dark:focus h2,
.is-theme--light .theme--dark h2,
.is-theme-hover--light:hover .theme--dark h2,
.is-theme-hover--light:focus .theme--dark h2,
.is-theme--dark h3,
.is-theme--light .is-theme--dark h3,
.is-theme-hover--dark:hover h3,
.is-theme-hover--dark:focus h3,
.is-theme--light .theme--dark h3,
.is-theme-hover--light:hover .theme--dark h3,
.is-theme-hover--light:focus .theme--dark h3,
.is-theme--dark h4,
.is-theme--light .is-theme--dark h4,
.is-theme-hover--dark:hover h4,
.is-theme-hover--dark:focus h4,
.is-theme--light .theme--dark h4,
.is-theme-hover--light:hover .theme--dark h4,
.is-theme-hover--light:focus .theme--dark h4,
.is-theme--dark h5,
.is-theme--light .is-theme--dark h5,
.is-theme-hover--dark:hover h5,
.is-theme-hover--dark:focus h5,
.is-theme--light .theme--dark h5,
.is-theme-hover--light:hover .theme--dark h5,
.is-theme-hover--light:focus .theme--dark h5,
.is-theme--dark h6,
.is-theme--light .is-theme--dark h6,
.is-theme-hover--dark:hover h6,
.is-theme-hover--dark:focus h6,
.is-theme--light .theme--dark h6,
.is-theme-hover--light:hover .theme--dark h6,
.is-theme-hover--light:focus .theme--dark h6,
.is-theme--dark p,
.is-theme--light .is-theme--dark p,
.is-theme-hover--dark:hover p,
.is-theme-hover--dark:focus p,
.is-theme--light .theme--dark p,
.is-theme-hover--light:hover .theme--dark p,
.is-theme-hover--light:focus .theme--dark p,
.is-theme--dark div,
.is-theme--light .is-theme--dark div,
.is-theme-hover--dark:hover div,
.is-theme-hover--dark:focus div,
.is-theme--light .theme--dark div,
.is-theme-hover--light:hover .theme--dark div,
.is-theme-hover--light:focus .theme--dark div,
.is-theme--dark legend,
.is-theme--light .is-theme--dark legend,
.is-theme-hover--dark:hover legend,
.is-theme-hover--dark:focus legend,
.is-theme--light .theme--dark legend,
.is-theme-hover--light:hover .theme--dark legend,
.is-theme-hover--light:focus .theme--dark legend,
.is-theme--dark label,
.is-theme--light .is-theme--dark label,
.is-theme-hover--dark:hover label,
.is-theme-hover--dark:focus label,
.is-theme--light .theme--dark label,
.is-theme-hover--light:hover .theme--dark label,
.is-theme-hover--light:focus .theme--dark label,
.is-theme--dark ul li,
.is-theme--light .is-theme--dark ul li,
.is-theme-hover--dark:hover ul li,
.is-theme-hover--dark:focus ul li,
.is-theme--light .theme--dark ul li,
.is-theme-hover--light:hover .theme--dark ul li,
.is-theme-hover--light:focus .theme--dark ul li,
.is-theme--dark ol li,
.is-theme--light .is-theme--dark ol li,
.is-theme-hover--dark:hover ol li,
.is-theme-hover--dark:focus ol li,
.is-theme--light .theme--dark ol li,
.is-theme-hover--light:hover .theme--dark ol li,
.is-theme-hover--light:focus .theme--dark ol li,
.is-theme--dark blockquote,
.is-theme--light .is-theme--dark blockquote,
.is-theme-hover--dark:hover blockquote,
.is-theme-hover--dark:focus blockquote,
.is-theme--light .theme--dark blockquote,
.is-theme-hover--light:hover .theme--dark blockquote,
.is-theme-hover--light:focus .theme--dark blockquote {
color: #FFF;
}
.is-theme--dark blockquote:before,
.is-theme--light .is-theme--dark blockquote:before,
.is-theme-hover--dark:hover blockquote:before,
.is-theme-hover--dark:focus blockquote:before, .is-theme--light .theme--dark blockquote:before,
.is-theme-hover--light:hover .theme--dark blockquote:before,
.is-theme-hover--light:focus .theme--dark blockquote:before {
border-color: #FFF;
color: #FFF;
}
.is-theme--dark a:not(.button),
.is-theme-hover--dark:hover a:not(.button),
.is-theme-hover--dark:focus a:not(.button), .is-theme--light .theme--dark a:not(.button),
.is-theme-hover--light:hover .theme--dark a:not(.button),
.is-theme-hover--light:focus .theme--dark a:not(.button),
.is-theme--dark button.button--unstyled,
.is-theme-hover--dark:hover button.button--unstyled,
.is-theme-hover--dark:focus button.button--unstyled,
.is-theme--light .theme--dark button.button--unstyled,
.is-theme-hover--light:hover .theme--dark button.button--unstyled,
.is-theme-hover--light:focus .theme--dark button.button--unstyled, .cp-hero-banner__container.is-theme--dark .button-secondary,
.cp-hero-banner__container.is-theme-hover--dark:hover .button-secondary,
.cp-hero-banner__container.is-theme-hover--dark:focus .button-secondary, .is-theme--light .cp-hero-banner__container.theme--dark .button-secondary,
.is-theme-hover--light:hover .cp-hero-banner__container.theme--dark .button-secondary,
.is-theme-hover--light:focus .cp-hero-banner__container.theme--dark .button-secondary,
.is-theme--dark .button--background-white,
.is-theme-hover--dark:hover .button--background-white,
.is-theme-hover--dark:focus .button--background-white,
.is-theme--light .theme--dark .button--background-white,
.is-theme-hover--light:hover .theme--dark .button--background-white,
.is-theme-hover--light:focus .theme--dark .button--background-white {
color: #FFF;
}
.is-theme--dark .button,
.is-theme-hover--dark:hover .button,
.is-theme-hover--dark:focus .button, .is-theme--light .theme--dark .button,
.is-theme-hover--light:hover .theme--dark .button,
.is-theme-hover--light:focus .theme--dark .button {
color: violet;
}
.is-theme--dark .button-secondary,
.is-theme-hover--dark:hover .button-secondary,
.is-theme-hover--dark:focus .button-secondary, .is-theme--light .theme--dark .button-secondary,
.is-theme-hover--light:hover .theme--dark .button-secondary,
.is-theme-hover--light:focus .theme--dark .button-secondary {
border-color: #FFF;
color: #FFF;
}
.is-theme--dark .is-theme--light a:not(.button),
.is-theme--dark .is-theme--light button.button--unstyled, .is-theme--dark .is-theme--light.cp-hero-banner__container .button-secondary,
.is-theme--dark .is-theme--light .button--background-white {
color: violet;
}
.is-theme--dark .is-theme--light .button {
color: #FFF;
}
.is-theme--dark .is-theme--light .button-secondary {
border-color: violet;
color: violet;
}
.is-theme--dark .is-theme--light .theme--dark a:not(.button),
.is-theme--dark .is-theme--light .theme--dark button.button--unstyled, .is-theme--dark .is-theme--light .theme--dark.cp-hero-banner__container .button-secondary,
.is-theme--dark .is-theme--light .theme--dark .button--background-white {
color: #FFF;
}
.is-theme--dark .is-theme--light .theme--dark .button {
color: violet;
}
.is-theme--dark .is-theme--light .theme--dark .button-secondary {
border-color: #FFF;
color: #FFF;
}
.is-theme--light .is-theme--dark a:not(.button),
.is-theme--light .is-theme--dark button.button--unstyled, .is-theme--light .is-theme--dark.cp-hero-banner__container .button-secondary,
.is-theme--light .is-theme--dark .button--background-white {
color: #FFF;
}
.is-theme--light .is-theme--dark .button {
color: violet;
}
.is-theme--light .is-theme--dark .button-secondary {
border-color: #FFF;
color: #FFF;
}
.is-theme--light .is-theme--dark .theme--light a:not(.button),
.is-theme--light .is-theme--dark .theme--light button.button--unstyled, .is-theme--light .is-theme--dark .theme--light.cp-hero-banner__container .button-secondary,
.is-theme--light .is-theme--dark .theme--light .button--background-white {
color: violet;
}
.is-theme--light .is-theme--dark .theme--light .button {
color: #FFF;
}
.is-theme--light .is-theme--dark .theme--light .button-secondary {
border-color: violet;
color: violet;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"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