Created
May 11, 2012 21:20
-
-
Save michaelparenteau/2662477 to your computer and use it in GitHub Desktop.
Compass Ribbon 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
| @mixin horiz-flag($color, $notch-color, $height, $notch-side) { | |
| @include box-shadow(0px 1px 1px rgba(0,0,0,0.35)); | |
| @include background-image(linear-gradient(lighten($color, 20%), darken($color, 10%))); | |
| @include inline-block; | |
| height: $height; | |
| line-height: $height; | |
| position: absolute; | |
| padding-#{$notch-side}: $height; | |
| @if $notch-side == left { | |
| right: -2px; | |
| padding-right: 10px; | |
| text-align: right; | |
| } @else { | |
| left: -2px; | |
| padding-left: 10px; | |
| } | |
| &:before { | |
| content: ''; | |
| display: block; | |
| height: 0; | |
| width: 0; | |
| border-style: solid; | |
| border-width: $height/2; | |
| border-color: transparent; | |
| border-#{$notch-side}-color: $notch-color; | |
| position: absolute; | |
| #{$notch-side}: -1px; | |
| top: 0; | |
| } | |
| } | |
| @mixin vert-flag($color, $notch-color, $width, $notch-side) { | |
| @include box-shadow(1px 0 1px rgba(0,0,0,0.35)); | |
| @include background-image(linear-gradient(lighten($color, 20%), darken($color, 10%))); | |
| @include inline-block; | |
| text-align: center; | |
| width: $width; | |
| position: absolute; | |
| padding-#{$notch-side}: $width; | |
| @if $notch-side == bottom { | |
| top: -2px; | |
| padding-top: 10px; | |
| } @else { | |
| bottom: -2px; | |
| padding-bottom: 10px; | |
| } | |
| &:before { | |
| content: ''; | |
| display: block; | |
| height: 0; | |
| width: 0; | |
| border-style: solid; | |
| border-width: $width/2; | |
| border-color: transparent; | |
| left: 0; | |
| border-#{$notch-side}-color: $notch-color; | |
| position: absolute; | |
| #{$notch-side}: -1px; | |
| } | |
| } | |
| // just an element to hold the flag | |
| .element { | |
| @include border-radius(8px); | |
| @include box-shadow(0 2px 3px rgba(0,0,0,0.1)); | |
| @include inline-block; | |
| width: 150px; | |
| height: 130px; | |
| background: #ebebeb; | |
| border: 1px solid #ccc; | |
| margin: 10px; | |
| position: relative; | |
| } | |
| // and then the flags... | |
| .horiz-flag { | |
| @include horiz-flag(#548ec1, #ebebeb, 40px, right); | |
| top: 10px; | |
| color: #fff; | |
| } | |
| .vert-flag { | |
| @include vert-flag(#911, #ebebeb, 50px, bottom); | |
| left: 10px; | |
| color: #fff; | |
| } |
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
| .element | |
| %span.horiz-flag ribbon text | |
| .element | |
| %span.vert-flag ribbon text |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Below is a screenshot of the ribbons using different colors. You need to use compass and scss for this to work.
Params are in this order: ribbon color, ribbon thickness, parent element background color(color of css triangle border), the side the notch is on
You can see the html/css version here in a jsfiddle or the haml/scss version in a codepen