starryeyez024
/ pfe-broadcasted-function.scss
Last active
August 17, 2020 02:51
PFE broadcasted function
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Sass: | |
| $LOCAL-VARIABLES: ( | |
| Color: pfe-broadcasted(text), | |
| ); | |
| .pfe-my-component { | |
| color: pfe-local(Color); | |
| } | |
| // Compiled CSS: |
starryeyez024
/ pfe-set-broadcast-theme.scss
Last active
August 17, 2020 02:51
PFE set-broadcast-theme mixin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Sass: | |
| :host([pfe-variant="earth"][on="dark"]) { | |
| --pfe-tabs__panel--BackgroundColor: #{pfe-var(surface--darkest)}; | |
| @include pfe-set-broadcast-theme(dark); | |
| } | |
| // Compiled CSS: | |
| :host([pfe-variant="earth"][on="dark"]) { | |
| --pfe-tabs__panel--BackgroundColor: var(--pfe-theme--color--surface--darkest, #151515); | |
| --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff); |
starryeyez024
/ redefining_local_props.scss
Created
August 13, 2020 17:22
Redefining local CSS custom properties
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :host([pfe-priority="secondary"][pfe-color="base"]) { | |
| --pfe-cta--BackgroundColor: transparent; | |
| --pfe-cta--BorderColor: #{pfe-color(ui-base)}; | |
| --pfe-cta--Color: #{pfe-color(ui-base)}; | |
| --pfe-cta--BackgroundColor--hover: #{pfe-color(ui-base)}; | |
| --pfe-cta--BorderColor--hover: #{pfe-color(ui-base)}; | |
| --pfe-cta--Color--hover: #{pfe-color(ui-base--text)}; | |
| --pfe-cta--BackgroundColor--focus: #{$pfe-cta--BackgroundColor--focus}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| font-size: var(--pfe-theme--font-size, 16px)); | |
| ^ theme variable ^ fallback value |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This | |
| :root { | |
| --pfe-tabs--BorderColor: purple; | |
| } | |
| // Not this | |
| pfe-tab { | |
| --pfe-tabs--BorderColor: purple; | |
| } |
starryeyez024
/ empty_local_vars.scss
Last active
August 12, 2020 18:35
PFE | Empty local variables stack
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| font-size: var(--pf-cta--FontSize, var(--pf-global--font-size, 16px)); | |
| // ^ local variable ^ theme variable ^ fallback value | |
| // (empty) (empty) |
starryeyez024
/ SassMeister-input-HTML.html
Created
June 25, 2020 19:21
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="pf-color-black-100 swatch ">pf-color-black-100 </div> | |
| <div class="pf-color-black-150 swatch ">pf-color-black-150 </div> | |
| <div class="pf-color-black-200 swatch ">pf-color-black-200 </div> | |
| <div class="pf-color-black-300 swatch ">pf-color-black-300 </div> | |
| <div class="pf-color-black-400 swatch ">pf-color-black-400 </div> | |
| <div class="pf-color-black-500 swatch ">pf-color-black-500 </div> | |
| <div class="pf-color-black-600 swatch ">pf-color-black-600 </div> | |
| <div class="pf-color-black-600-alt swatch ">pf-color-black-600-alt</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (vundefined) | |
| // Compass (vundefined) | |
| // ---- | |
| $pfelements--gray: #797979 !default; | |
| $pfelements--gray-light: #d2d2d2 !default; | |
| $pfelements--gray-dark: #333 !default; | |
| $pfelements--orange: #fe460d !default; |
starryeyez024
/ SassMeister-input-HTML.html
Last active
December 10, 2019 16:35
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p>fdsa</p> |
starryeyez024
/ SassMeister-input-HTML.html
Last active
December 9, 2019 16:55
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <br/> | |
| <div class="single"><p>single</p></div> | |
| <div class="double"><p>double</p></div> | |
| <div class="test"><p>test</p></div> |