Contents

/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../_common";

/**
 *    <button type="button" class="button large round">Large Rounded Button</button>
 *    <a href="" class="button small pill">Small Pill Button</a>
 */

.button {
    @include reset-inline-block;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    font-weight: normal;
    line-height: normal;
    user-select: none;
    white-space: nowrap;
    @include size-medium;
    background: $gray;
    border: 1px solid $gray-dark;

    // Sizes
    &.small, .small & { @include size-small; }
    &.large, .large & { @include size-large; }

    // Shapes
    &.round { border-radius: $round; }
    &.pill { border-radius: $pill; }
    &.oval { border-radius: #{$oval-x} / #{$oval-y}; }
    &.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }

    // State
    @include disabled-state {
        cursor: not-allowed;
        pointer-events: none;
    }
}

// Reset browser styles
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
titon-toolkit-0.11.1	scss/toolkit/ui/button.scss
titon-toolkit-0.11.0	scss/toolkit/ui/button.scss