Skip to content

Instantly share code, notes, and snippets.

@juanger

juanger/button.scss

Last active December 11, 2015 09:48
Download ZIP

Revisions

  1. juanger revised this gist Jan 21, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions buttons.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,9 +15,9 @@
    <label class="select">
    <span>Select:</span>
    <select class="btn-grey">
    <option value="volvo">Option 1</option>
    <option value="saab">Option 2</option>
    <option value="mercedes">Option 3</option>
    <option value="audi">Option 4</option>
    <option value="one">Option 1</option>
    <option value="two">Option 2</option>
    <option value="three">Option 3</option>
    <option value="four">Option 4</option>
    </select>
    </label>
  2. juanger revised this gist Jan 21, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion buttons.css.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -65,7 +65,7 @@ input {
    width: 16px;
    }

    &.btn-grey + span::before, &.btn-blue + span::before, &.btn-black + span::before {
    &.btn-grey + span::before {
    @include border-radius(8px);
    }

  3. juanger revised this gist Jan 20, 2013. 1 changed file with 23 additions and 0 deletions.
    23 changes: 23 additions & 0 deletions buttons.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <label class="text">
    <span>Text Field:</span><input type="text" class="btn-grey" value="Edit me"/>
    </label>
    <input type="submit" class="btn-grey" value="Button"/>
    <input type="submit" class="btn-grey" value="Button" disabled="disabled"/>
    <label class="checkbox">
    <input type="checkbox" class="btn-grey" checked/><span>Checkbox</span>
    </label>
    <label class="radio">
    <input type="radio" name="radio" value="radio_1" class="btn-grey" checked/><span>Option 1</span>
    </label>
    <label class="radio">
    <input type="radio" name="radio" value="radio_2" class="btn-grey"/><span>Option 2</span>
    </label>
    <label class="select">
    <span>Select:</span>
    <select class="btn-grey">
    <option value="volvo">Option 1</option>
    <option value="saab">Option 2</option>
    <option value="mercedes">Option 3</option>
    <option value="audi">Option 4</option>
    </select>
    </label>
  4. juanger created this gist Jan 20, 2013.
    34 changes: 34 additions & 0 deletions button.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    @mixin button($bg-image,
    $color,
    $border-color,
    $bg-hover: linear-gradient(#e8e8e8, #d1cfcf),
    $color-hover: #555454,
    $border-color-hover: #bebdbd,
    $bg-disabled: linear-gradient(#CACACA, #ABABAB),
    $color-disabled: #EEE,
    $border-color-disabled: #bebdbd,
    $border-radius: 5px) {

    @include border-radius($border-radius);
    @include background-image($bg-image);
    @include single-box-shadow(#555, 0px, 1px, 2px);
    color: $color;
    border: 1px solid $border-color;

    &:hover {
    @include background-image($bg-hover);
    cursor: pointer;
    border: 1px solid $border-color-hover;
    }

    &[disabled="disabled"] {
    color: $color-disabled;
    cursor: default;
    @include background-image($bg-disabled);
    border: 1px solid $border-color-disabled;
    &:hover {
    @include background-image($bg-disabled);
    border: 1px solid $border-color-disabled;
    }
    }
    }
    97 changes: 97 additions & 0 deletions buttons.css.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,97 @@
    .btn-grey {
    @include button(linear-gradient(#F7F7F7, #DFDFDF), #555454, #bebdbd);
    }

    label {
    position: relative;

    span {
    position: relative;
    height: 16px;
    display: inline-block;
    margin: 2px;
    @include user-select(none);
    }
    }

    input {
    &[type="submit"] {
    padding: 4px 10px;
    @include border-radius(5px);
    }

    &[type="text"] {
    padding: 9px;
    @include border-radius(5px);
    @include single-box-shadow(none);
    border: 1px solid #CDCDCD;
    }

    &[type="checkbox"] {
    @include opacity(0);
    position: static\9; // fallback for IE < 9

    & + span::before {
    @include border-radius(2px);
    content: "";
    display: inline-block;
    width: 15px;
    height: 16px;
    margin-right: 5px;
    margin-top: -4px;
    vertical-align: middle;
    }

    &.btn-grey + span::before {
    @extend .btn-grey;
    @include border-radius(2px);
    }

    &:checked + span::after {
    content: "\2713\0020";
    font-size: 1em;
    position: absolute;
    top: 1px;
    left: 2px;
    color: #888;
    }
    }

    &[type="radio"] {
    @extend input[type="checkbox"];

    & + span::before {
    @include border-radius(8px);
    width: 16px;
    }

    &.btn-grey + span::before, &.btn-blue + span::before, &.btn-black + span::before {
    @include border-radius(8px);
    }

    &:checked + span::after {
    position: absolute;
    content: "";
    top: 11px;
    left: 6px;
    width: 4px;
    height: 4px;
    border: 1px solid #888;
    @include border-radius(6px);
    background-color: #888;
    }
    }
    }

    select {
    @include user-select(none);
    @include border-radius(5px);
    padding: 9px;
    @include single-box-shadow(none);
    border: 1px solid #CDCDCD;

    -webkit-appearance: button;
    -moz-appearance: button;
    text-overflow: ellipsis;
    white-space: nowrap;
    }