Skip to content

Instantly share code, notes, and snippets.

@lupillow

lupillow/_mixins.scss

Forked from garyharan/_mixins.scss
Created May 28, 2021 02:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lupillow/10ef152f798698f3d465d44d1a94812b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lupillow/10ef152f798698f3d465d44d1a94812b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @garyharan garyharan revised this gist Dec 22, 2011. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -54,9 +54,9 @@
    }

    @mixin rounded($radius: 0.5em) {
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
    }

    @mixin gradient($from, $to) {
  2. @garyharan garyharan created this gist May 5, 2011.
    66 changes: 66 additions & 0 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    @mixin box-shadow($top, $left, $blur, $color, $inset: false) {
    @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
    } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
    }
    }

    @mixin text-field {
    display: inline-block;
    outline: none;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    @include rounded();
    @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2));
    }

    @mixin button($color: $red, $text_color: $white) {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    @include rounded();
    @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2));

    color: $text_color !important;
    font-weight: bold;
    border: solid 1px darken($color, 18%);
    background: $color;
    @include gradient(saturate($color, 15%), darken($color, 15%));

    &:hover {
    text-decoration: none;
    background: saturate($color, 10%);
    @include gradient(saturate($color, 5%), darken($color, 5%));
    }

    &:active {
    position: relative;
    top: 1px;
    color: saturate($color, 15%);
    @include gradient(saturate($color, 15%), lighten($color, 15%));
    }
    }

    @mixin rounded($radius: 0.5em) {
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    }

    @mixin gradient($from, $to) {
    background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
    background: -moz-linear-gradient(top, $from, $to);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
    }