Last active
August 29, 2015 14:23
-
-
Save r4j4h/b27ac4a01c0394a822b1 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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>Standard paragraph.</p> | |
<p class="page-specific-thing">Page specific paragraph.</p> | |
<div> | |
<p>Standard paragraph in a div.</p> | |
</div> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
</div> | |
<div class="callout"> | |
<p class="page-specific-thing">Page specific paragraph in a callout.</p> | |
</div> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="callout callout-alert"> | |
<p class="page-specific-thing">Page specific paragraph in an alert callout.</p> | |
</div> | |
<div class="alert callout"> | |
<p class="page-specific-thing">Page specific paragraph in an alert callout.</p> | |
</div> |
This file contains 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
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
/* Demonstration page CSS */ | |
/* Works with or without themes */ | |
// Import button component IPE definition mixins | |
//@import "../components/callout/extends"; | |
// start /components/callout/extends: | |
// Define minimal use of placeholder extend | |
@mixin define-callout-solo() { | |
.callout { | |
@extend %cmp-callout; | |
} | |
} | |
@mixin define-callout() { | |
/* Note that comments or styles inside a component's definition will appear | |
wherever people actually do their defining! */ | |
// So stick with these. | |
.callout { | |
@extend %cmp-callout; | |
&-alert, &.alert { | |
@extend %cmp-callout_alert; // For example, lets require that all callout components style an alert version | |
} | |
&-warning { | |
@extend %cmp-callout_warning !optional; | |
} | |
&-positive { | |
@extend %cmp-callout_positive !optional; | |
} | |
} | |
} | |
// end /components/callout/extends: | |
// Include the minimal callout components' IPE definitions | |
@include define-callout(); | |
.page-specific-thing { | |
color: orange; | |
} | |
/* Style the callout component by its IPE definition */ | |
%cmp-callout { | |
width: 80%; | |
margin: 1em auto; | |
border: 1px solid; | |
border-color: red; | |
.page-specific-thing { | |
text-decoration: underline; | |
} | |
// Can also include components by their IPE definitions! | |
> %cmp-callout { | |
width: 98%; | |
border-color: blue; | |
//border-bottom: none; | |
} | |
} | |
%cmp-callout_alert { | |
background-color: red; | |
} |
This file contains 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
/* Demonstration page CSS */ | |
/* Works with or without themes */ | |
/* Note that comments or styles inside a component's definition will appear | |
wherever people actually do their defining! */ | |
.page-specific-thing { | |
color: orange; | |
} | |
/* Style the callout component by its IPE definition */ | |
.callout { | |
width: 80%; | |
margin: 1em auto; | |
border: 1px solid; | |
border-color: red; | |
} | |
.callout .page-specific-thing { | |
text-decoration: underline; | |
} | |
.callout > .callout { | |
width: 98%; | |
border-color: blue; | |
} | |
.callout-alert, .callout.alert { | |
background-color: red; | |
} |
This file contains 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>Standard paragraph.</p> | |
<p class="page-specific-thing">Page specific paragraph.</p> | |
<div> | |
<p>Standard paragraph in a div.</p> | |
</div> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
</div> | |
<div class="callout"> | |
<p class="page-specific-thing">Page specific paragraph in a callout.</p> | |
</div> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="callout callout-alert"> | |
<p class="page-specific-thing">Page specific paragraph in an alert callout.</p> | |
</div> | |
<div class="alert callout"> | |
<p class="page-specific-thing">Page specific paragraph in an alert callout.</p> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment