Skip to content

Instantly share code, notes, and snippets.

@michaelparenteau

michaelparenteau/_ribbon.scss

Created May 12, 2012 08:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save michaelparenteau/2665259 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save michaelparenteau/2665259 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. michaelparenteau revised this gist May 12, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions _ribbon.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    // # Compass Ribbon Mixin

    // the mixin

    @mixin ribbon($color, $ribbon-thickness, $notch-color, $notch-side) {
  2. michaelparenteau created this gist May 12, 2012.
    82 changes: 82 additions & 0 deletions _ribbon.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,82 @@
    // the mixin

    @mixin ribbon($color, $ribbon-thickness, $notch-color, $notch-side) {
    @include background-image(linear-gradient(lighten($color, 20%), darken($color, 10%)));
    @include inline-block;
    position: absolute;
    padding-#{$notch-side}: $ribbon-thickness;
    @if $notch-side == left {
    height: $ribbon-thickness;
    line-height: $ribbon-thickness;
    right: -2px;
    padding-right: 10px;
    text-align: right;
    } @else if $notch-side == right {
    height: $ribbon-thickness;
    line-height: $ribbon-thickness;
    left: -2px;
    padding-left: 10px;
    } @else if $notch-side == bottom {
    text-align: center;
    width: $ribbon-thickness;
    top: -2px;
    padding-top: 10px;
    } @else {
    text-align: center;
    width: $ribbon-thickness;
    bottom: -2px;
    padding-bottom: 10px;
    }
    &:before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: $ribbon-thickness/2;
    border-color: transparent;
    border-#{$notch-side}-color: $notch-color;
    position: absolute;
    #{$notch-side}: -1px;
    }
    }

    // the implementation

    // the ribbon needs a container. We'll call it .box
    // this container needs to have position: as the ribbon
    // sits absolutely inside and is to left, top, etc..
    .box {
    @include border-radius(8px);
    @include box-shadow(0 2px 3px rgba(0,0,0,0.1));
    @include inline-block;
    width: 168px;
    height: 130px;
    background: #ebebeb;
    border: 1px solid #ccc;
    position: relative;
    margin-right: 20px;
    &:last-child {
    margin-right: 0;
    }
    }

    // now we'll add some classes to some spans inside out .box
    // cool right? you just call..
    // @include ribbon([ribbon color], [ribbon thickness], [parent background color], [notch side])
    // the mixin does the rest
    .horiz-ribbon {
    @include ribbon(#548ec1, 40px, #ebebeb, right);
    @include box-shadow(0px 1px 1px rgba(0,0,0,0.35));
    top: 10px;
    color: #fff;
    }

    // the rainbow of ribbons above are using this pattern below
    // with different single hex colors as the first param
    .vert-ribbon {
    @include ribbon(#900, 50px, #ebebeb, bottom);
    @include box-shadow(1px 0 1px rgba(0,0,0,0.35));
    left: 10px;
    color: #fff;
    }
    13 changes: 13 additions & 0 deletions boxes.haml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    .boxes
    .box
    %span.horiz-ribbon some text

    .big.box
    %span.vert-ribbon.red red
    %span.vert-ribbon.orange orange
    %span.vert-ribbon.yellow yellow
    %span.vert-ribbon.green green
    %span.vert-ribbon.blue blue
    %span.vert-ribbon.purple purple
    %span.vert-ribbon.grey grey
    %span.vert-ribbon.black black