|
.pretty-buttons(@color, @background, @text-shadow: none) { |
|
|
|
color: @color; |
|
#gradient > .vertical(lighten(@background, 5%), darken(@background, 5%), 0%, 100%); |
|
border-color: darken(@background, 10%); |
|
border-bottom-color: darken(@background, 20%); |
|
text-shadow: @text-shadow; |
|
.box-shadow(inset 0 1px 0 rgba(255, 255, 255, .1)); |
|
|
|
&:hover, |
|
&:focus, |
|
&:active, |
|
&.active { |
|
#gradient > .vertical(darken(@background, 0), darken(@background, 10%), 0%, 100%); |
|
border-color: darken(@background, 20%); |
|
color: @color; |
|
} |
|
|
|
&.disabled, |
|
&[disabled], |
|
fieldset[disabled] & { |
|
&, |
|
&:hover, |
|
&:focus, |
|
&:active, |
|
&.active { |
|
background-color: @background; |
|
border-color: darken(@background, 5%); |
|
} |
|
} |
|
} |
|
|
|
/* Example usage (uses Bootstrap's Less variables): |
|
|
|
.btn-default { |
|
.pretty-buttons(@btn-default-color, @btn-default-bg); |
|
} |
|
.btn-primary { |
|
.pretty-buttons(@btn-primary-color, @btn-primary-bg); |
|
} |
|
.btn-success { |
|
.pretty-buttons(@btn-success-color, @btn-success-bg); |
|
} |
|
.btn-info { |
|
.pretty-buttons(@btn-info-color, @btn-info-bg); |
|
} |
|
.btn-warning { |
|
.pretty-buttons(@btn-warning-color, @btn-warning-bg); |
|
} |
|
.btn-danger { |
|
.pretty-buttons(@btn-danger-color, @btn-danger-bg); |
|
} |
|
.btn-inverse { |
|
.pretty-buttons(white, #474949); |
|
} |
|
|
|
*/ |
Thanks !
In addition to psybaron and bertoost scss, to get it working out of the box you also need to import some boostrap scss definitions with something like:
But finally it seems better to use or start with bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_theme.scss
or bower_components/bootstrap/dist/css/bootstrap-theme.css
This tool is also nice for custom buttons: http://charliepark.org/bootstrap_buttons/ .