/** * Button classes * * @date 26/04/2013 * @author splitfire - http://splitfire.fr * @version 1.1 * */ .btn { display: inline-block; padding: 6px 12px; margin:0 5px 0 0; line-height: 19px; border: none; // vertical-align: middle; cursor: pointer; color: #666666; text-decoration: none; font-size: 1em; font-weight: normal; text-align: center; border-radius : 2px; box-sizing : border-box; background-color: #F5F5F5; //background: -ms-linear-gradient((top, #F5F5F5, darken(#F5F5F5, 10%))); background : linear-gradient(top,#F5F5F5, darken(#F5F5F5, 10%)); &.disabled { cursor:default; opacity: .5; } &.bold { font-weight: bold; } } .btn:not(.disabled):hover, .btn:not(.disabled):focus { text-decoration: none; background-color: darken(#F5F5F5, 20%); //background: -ms-linear-gradient((top, #F5F5F5, darken(#F5F5F5, 20%))); background : linear-gradient(top,#F5F5F5, darken(#F5F5F5, 20%)); } .btn-full { width: 100%; } .btn-tiny { width: 50px; } .btn-small { width: 100px; } .btn-medium { width: 200px; } .btn-large { width: 300px; } .btn-wd-50 { width: 50%; } .btn-auto { width: 100%; } .btn-auto + .btn-auto { width: 50%; } .btn-big { font-size:28px; line-height:28px; font-weight: lighter; } /*.btn-primary // @todo A skin ! { color:#fff ; background-color: $infoColor; background: -ms-linear-gradient((top, $infoColor, darken($infoColor, 10%))); @include background(linear-gradient(top, $infoColor, darken($infoColor, 10%))); &:not(.disabled):hover, &:not(.disabled):focus { background-color: darken($infoColor, 20%); background: -ms-linear-gradient((top, $infoColor, darken($infoColor, 20%))); @include background(linear-gradient(top, $infoColor, darken($infoColor, 20%))) } }*/ .btn-info { color:#fff ; background-color: $infoColor; //background: -ms-linear-gradient((top, $infoColor, darken($infoColor, 10%))); background : linear-gradient(top, $infoColor, darken($infoColor, 10%)); &:not(.disabled):hover, &:not(.disabled):focus { background-color: darken($infoColor, 20%); //background: -ms-linear-gradient((top, $infoColor, darken($infoColor, 20%))); background : linear-gradient(top, $infoColor, darken($infoColor, 20%)); } } .btn-danger { color:#fff ; background-color:$dangerColor; //background: -ms-linear-gradient((top,$dangerColor,darken($dangerColor, 10%))); background : linear-gradient(top,$dangerColor,darken($dangerColor, 10%)); &:not(.disabled):hover, &:not(.disabled):focus { background-color:darken($dangerColor,20%); //background: -ms-linear-gradient((top,$dangerColor,darken($dangerColor, 20%))); background : linear-gradient(top,$dangerColor,darken($dangerColor,20%)); } } .btn-success { color: #FFFFFF ; background-color: $successColor; //background: -ms-linear-gradient((top,$successColor, darken($successColor, 10%))); background : linear-gradient(top,$successColor, darken($successColor, 10%)); &:not(.disabled):hover, &:not(.disabled):focus { background-color:darken($successColor, 20%); //background: -ms-linear-gradient((top,$successColor, darken($successColor, 20%))); background : linear-gradient(top,$successColor,darken($successColor, 20%)); } } .btn-warning { color:#fff ; background-color:$dangerColor; //background: -ms-linear-gradient((top,$warningColor,darken($warningColor, 10%))); background : linear-gradient(top,$warningColor,darken($warningColor, 10%)); &:not(.disabled):hover, &:not(.disabled):focus { background-color:darken($warningColor,20%); //background: -ms-linear-gradient((top,$warningColor,darken($warningColor, 20%))); background : linear-gradient(top,$warningColor,darken($warningColor,20%)); } }