Skip to content

Instantly share code, notes, and snippets.

@michaelparenteau

michaelparenteau/compass-flags.scss

Created May 11, 2012 21:20
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. michaelparenteau revised this gist May 12, 2012. 1 changed file with 25 additions and 45 deletions.
    70 changes: 25 additions & 45 deletions compass-flags.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,48 +1,27 @@
    // the mixins...

    @mixin horiz-flag($color, $notch-color, $height, $notch-side) {
    @include box-shadow(0px 1px 1px rgba(0,0,0,0.35));
    @mixin ribbon($color, $ribbon-thickness, $notch-color, $notch-side) {
    @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 {
    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 {
    } @else if $notch-side == right {
    height: $ribbon-thickness;
    line-height: $ribbon-thickness;
    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 {
    } @else if $notch-side == bottom {
    text-align: center;
    width: $ribbon-thickness;
    top: -2px;
    padding-top: 10px;
    } @else {
    } @else {
    text-align: center;
    width: $ribbon-thickness;
    bottom: -2px;
    padding-bottom: 10px;
    }
    @@ -52,18 +31,17 @@
    height: 0;
    width: 0;
    border-style: solid;
    border-width: $width/2;
    border-width: $ribbon-thickness/2;
    border-color: transparent;
    left: 0;
    border-#{$notch-side}-color: $notch-color;
    position: absolute;
    #{$notch-side}: -1px;
    }
    }

    // an element to hold the flag
    // just an element to hold the ribbon

    .element {
    .box {
    @include border-radius(8px);
    @include box-shadow(0 2px 3px rgba(0,0,0,0.1));
    @include inline-block;
    @@ -75,16 +53,18 @@
    position: relative;
    }

    // and then the flags using the mixins...
    // and then the ribbons...

    .horiz-flag {
    @include horiz-flag(#548ec1, #ebebeb, 40px, right);
    .horiz-ribbon {
    @include ribbon(#548ec1, 40px, #ebebeb, right);
    @include box-shadow(0px 1px 1px rgba(0,0,0,0.35));
    top: 10px;
    color: #fff;
    color: #fff;
    }

    .vert-flag {
    @include vert-flag(#911, #ebebeb, 50px, bottom);
    .vert-ribbon {
    @include ribbon(#911, 50px, #ebebeb, bottom);
    @include box-shadow(1px 0 1px rgba(0,0,0,0.35));
    left: 10px;
    color: #fff;
    }
  2. michaelparenteau revised this gist May 11, 2012. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions compass-flags.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    // the mixins...

    @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%)));
    @@ -59,7 +61,7 @@
    }
    }

    // just an element to hold the flag
    // an element to hold the flag

    .element {
    @include border-radius(8px);
    @@ -73,7 +75,7 @@
    position: relative;
    }

    // and then the flags...
    // and then the flags using the mixins...

    .horiz-flag {
    @include horiz-flag(#548ec1, #ebebeb, 40px, right);
  3. michaelparenteau created this gist May 11, 2012.
    88 changes: 88 additions & 0 deletions compass-flags.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    @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;
    }
    5 changes: 5 additions & 0 deletions flags.haml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    .element
    %span.horiz-flag ribbon text

    .element
    %span.vert-flag ribbon text