Last active
August 29, 2015 14:07
-
-
Save cimmanon/0b0c4793f58bc457c148 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
<ul class="bullets"> | |
<li class="bullet three-col-bullet"> | |
<div class="bullet-content"> | |
<h2>This needs to be one color</h2> | |
<p>some content</p> | |
</div> | |
</li> | |
<li class="bullet three-col-bullet"> | |
<div class="bullet-content"> | |
<h2>This is a second color</h2> | |
<p>content</p> | |
</div> | |
</li> | |
<li class="bullet three-col-bullet"> | |
<div class="bullet-content"> | |
<h2>Radisson Hotel Salt Lake City</h2> | |
<p>215 West South Temple<br> | |
$129 USD—standard room<br> | |
$139/$149 USD—triple/quad | |
</p> | |
</div> | |
</li> |
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
// ---- | |
// Sass (v3.3.14) | |
// Compass (v1.0.1) | |
// ---- | |
.bullets { | |
$icon-bullet-size: 3.5em; | |
$colors: | |
desaturate(blue, 30), | |
desaturate(green, 10), | |
desaturate(yellow, 30), | |
desaturate(red, 30), | |
desaturate(goldenrod, 30); | |
padding: 2em; | |
overflow: auto; | |
text-align: center; | |
@for $i from 1 to length($colors) { | |
li:nth-of-type(#{$i}) h2 { | |
$color-from-list: nth($colors, $i); | |
color: $color-from-list; | |
} | |
} | |
} |
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
.bullets { | |
padding: 2em; | |
overflow: auto; | |
text-align: center; | |
} | |
.bullets li:nth-of-type(1) h2 { | |
color: #2626d9; | |
} | |
.bullets li:nth-of-type(2) h2 { | |
color: #067a06; | |
} | |
.bullets li:nth-of-type(3) h2 { | |
color: #d9d926; | |
} | |
.bullets li:nth-of-type(4) h2 { | |
color: #d92626; | |
} |
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
<ul class="bullets"> | |
<li class="bullet three-col-bullet"> | |
<div class="bullet-content"> | |
<h2>This needs to be one color</h2> | |
<p>some content</p> | |
</div> | |
</li> | |
<li class="bullet three-col-bullet"> | |
<div class="bullet-content"> | |
<h2>This is a second color</h2> | |
<p>content</p> | |
</div> | |
</li> | |
<li class="bullet three-col-bullet"> | |
<div class="bullet-content"> | |
<h2>Radisson Hotel Salt Lake City</h2> | |
<p>215 West South Temple<br> | |
$129 USD—standard room<br> | |
$139/$149 USD—triple/quad | |
</p> | |
</div> | |
</li> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment