Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/SassMeister-input-HTML.html

Last active November 13, 2019 19:08
Show Gist options
  • Save starryeyez024/9fe2f81c2f2a127b51bfc3d82ed4e065 to your computer and use it in GitHub Desktop.
Save starryeyez024/9fe2f81c2f2a127b51bfc3d82ed4e065 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class"wrapper">
<div class="box red--tint-1">
<h1 class="pfe-headline-3">red--tint-1 </h1>
</div>
<div class="box red">
<h1 class="pfe-headline-3">red </h1>
</div>
<div class="box red--shade-3">
<h1 class="pfe-headline-3">red--shade-3 </h1>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.5.4)
// ----
// Existing theme:
@import "https://static.redhat.com/libs/redhat/redhat-theme/2/advanced-theme.css";
// Red Hat font:
@import "https://static.redhat.com/libs/redhat/redhat-font/2/webfonts/red-hat-font.css";
// we would ideally add these colors to red hat theme
:root {
--pfe-theme--color--red: #EE0000;
--pfe-theme--color--red--tint-1: #F56D6D;
--pfe-theme--color--red--shade-3: #5F0000;
// update palette colors like this:
--pfe-theme--color--surface--accent: var(--pfe-theme--color--red);
}
// Use as needed
.red {
background: var(--pfe-theme--color--surface--accent); // already #E00
}
.red--tint-1 {
background: var(--pfe-theme--color--red--tint-1);
}
.red--shade-3 {
background: var(--pfe-theme--color--red--shade-3);
}
.pfe-headline-3 {
color: var(--pfe-theme--color--surface--accent--text);
}
/// FOR DEMO ONLY
.wrapper {
display: grid;
}
.box {
padding: 30px;
width: 350px;
}
Raw
SassMeister-output.css
@import "https://static.redhat.com/libs/redhat/redhat-theme/2/advanced-theme.css";
@import "https://static.redhat.com/libs/redhat/redhat-font/2/webfonts/red-hat-font.css";
:root {
--pfe-theme--color--red: #EE0000;
--pfe-theme--color--red--tint-1: #F56D6D;
--pfe-theme--color--red--shade-3: #5F0000;
--pfe-theme--color--surface--accent: var(--pfe-theme--color--red);
}
.red {
background: var(--pfe-theme--color--surface--accent);
}
.red--tint-1 {
background: var(--pfe-theme--color--red--tint-1);
}
.red--shade-3 {
background: var(--pfe-theme--color--red--shade-3);
}
.pfe-headline-3 {
color: var(--pfe-theme--color--surface--accent--text);
}
.wrapper {
display: grid;
}
.box {
padding: 30px;
width: 350px;
}
Raw
SassMeister-rendered.html
<div class"wrapper">
<div class="box red--tint-1">
<h1 class="pfe-headline-3">red--tint-1 </h1>
</div>
<div class="box red">
<h1 class="pfe-headline-3">red </h1>
</div>
<div class="box red--shade-3">
<h1 class="pfe-headline-3">red--shade-3 </h1>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment