/* ========================================================================== Settings ========================================================================== */ @import 'variables.less'; /* @baseline: @baseline; @button-color: @button-color; @button-primary-color: @button-primary-color; @button-info-color: @button-info-color; @button-success-color: @button-success-color; @button-warning-color: @button-warning-color; @button-danger-color: @button-danger-color; */ /* ========================================================================== Default ========================================================================== */ .btn{ .btn-s; background-clip: border-box !important; background-repeat: repeat-x; border: 1px solid rgba(0, 0, 0, 0.25); .border-box; .border-radius(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; display: inline-block; .gradient(@button-color, lighten(@button-color, 10%), @button-color); .phh; .pvn; .transition(background-position linear 0.1s); vertical-align: middle; color: #333; font-family: @body-font-family; text-decoration: none !important; text-shadow: rgba(255,255,255,0.75) 0 1px 0; &:hover{ background-position: 0 -15px; } } /* ========================================================================== Styles ========================================================================== */ .btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger{ color: #FFF !important; text-shadow: rgba(0,0,0,0.25) 0 -1px 0 !important; } .btn-primary{ .btn; .gradient(@button-primary-color, lighten(@button-primary-color, 10%), @button-primary-color); } .btn-info{ .btn; .gradient(@button-info-color, lighten(@button-info-color, 10%), @button-info-color); } .btn-success{ .btn; .gradient(@button-success-color, lighten(@button-success-color, 10%), @button-success-color); } .btn-warning{ .btn; .gradient(@button-warning-color, lighten(@button-warning-color, 10%), @button-warning-color); } .btn-danger{ .btn; .gradient(@button-danger-color, lighten(@button-danger-color, 10%), @button-danger-color); } /* ========================================================================== Sizes (Half = h, Single = s, Double = d) ========================================================================== */ .btn-h, .btn-half{ height: @baseline; font-size: @baseline * 0.6; line-height: @baseline; } .btn-s, .btn-single{ height: @baseline * 1.5; font-size: @baseline * 0.75; line-height: @baseline * 1.5; } .btn-d, .btn-double{ height: @baseline * 2; font-size: @baseline; line-height: @baseline * 2; }