//BUTTONS button, .btn, input[type="button"] { -webkit-appearance: none; display: inline-block; margin: 0 @padding/3 0 0; padding: @button-padding; text-align: center; font-size: @basefontsize; line-height: 1em; font-family: @text-light; text-decoration: none; text-shadow: none; color: @grey4; background-color: white; background-image: none; border: none; .border ( @border-thickness-buttons, @grey4 ); .border-radius (@border-radius); cursor: pointer; white-space: nowrap; -webkit-transition: background .3s,color .3s; -moz-transition: background .3s,color .3s; -o-transition: background .3s,color .3s; transition: background .3s,color .3s; a { display: block; margin: 0; padding: 0; color: inherit; text-decoration: none; &:hover { text-decoration: none; } } &:focus, &:active { outline:none; } &:hover { color: white; background-color: @grey4; } .icon-remove-sign { display: none; } //disabled buttons //last; overrides any other styles &:disabled { opacity: .7; cursor: auto; background-color: white; color: @grey4; text-shadow: none; } &.no-margin { margin: 0 0 0 0; } } .btn-default { .border ( @border-thickness-buttons, @rcblue ); background-image: none; color: @rcblue; a { color: @rcblue; } &:hover, &.active { color: white; background-color: @rcdarkblue; .border ( @border-thickness, @rcdarkblue ); a { color: white; } } &:disabled { .border ( @border-thickness-buttons, @grey4 ); background-color: transparent; } } .btn-primary, .btn-small, /* TODO: anderson: remove .btn-small to not mix with the new btn-sm */ .btn-success { .border ( @border-thickness, @rcblue ); background-color: @rcblue; color: white; a { color: white; } &:hover, &.active { .border ( @border-thickness, @rcdarkblue ); color: white; background-color: @rcdarkblue; a { color: white; } } &:disabled { background-color: @rcblue; } } .btn-secondary { &:extend(.btn-default); background-color: white; &:focus { outline: 0; } &:hover { &:extend(.btn-default:hover); } &.btn-link { &:extend(.btn-link); color: @rcblue; } &:disabled { color: @rcblue; background-color: white; } } .btn-warning, .btn-danger, .revoke_perm, .btn-x, .form .action_button.btn-x { .border ( @border-thickness, @alert2 ); background-color: white; color: @alert2; a { color: @alert2; } &:hover, &.active { .border ( @border-thickness, @alert2 ); color: white; background-color: @alert2; a { color: white; } } i { display:none; } &:disabled { background-color: white; color: @alert2; } } .btn-approved-status { .border ( @border-thickness, @alert1 ); background-color: white; color: @alert1; } .btn-rejected-status { .border ( @border-thickness, @alert2 ); background-color: white; color: @alert2; } .btn-sm, .btn-mini, .field-sm .btn { padding: @padding/3; } .btn-xs { padding: @padding/4; } .btn-lg { padding: @padding * 1.2; } .btn-group { display: inline-block; .btn { float: left; margin: 0 0 0 -1px; } } .btn-link { background: transparent; border: none; padding: 0; color: @rcblue; &:hover { background: transparent; border: none; color: @rcdarkblue; } //disabled buttons //last; overrides any other styles &:disabled { opacity: .7; cursor: auto; background-color: white; color: @grey4; text-shadow: none; } // TODO: johbo: Check if we can avoid this, indicates that the structure // is not yet good. // lisa: The button CSS reflects the button HTML; both need a cleanup. &.btn-danger { color: @alert2; &:hover { color: darken(@alert2,30%); } &:disabled { color: @alert2; } } } .btn-social { &:extend(.btn-default); margin: 5px 5px 5px 0px; min-width: 160px; } // TODO: johbo: check these exceptions .links { .btn + .btn { margin-top: @padding; } } .action_button { display:inline; margin: 0; padding: 0 1em 0 0; font-size: inherit; color: @rcblue; border: none; border-radius: 0; background-color: transparent; &.last-item { border: none; padding: 0 0 0 0; } &:last-child { border: none; padding: 0 0 0 0; } &:hover { color: @rcdarkblue; background-color: transparent; border: none; } } .grid_delete { .action_button { border: none; } } // TODO: johbo: Form button tweaks, check if we can use the classes instead input[type="submit"] { &:extend(.btn-primary); &:focus { outline: 0; } &:hover { &:extend(.btn-primary:hover); } &.btn-link { &:extend(.btn-link); color: @rcblue; &:disabled { color: @rcblue; background-color: transparent; } } &:disabled { .border ( @border-thickness-buttons, @rcblue ); background-color: @rcblue; color: white; } } input[type="reset"] { &:extend(.btn-default); // TODO: johbo: Check if this tweak can be avoided. background: transparent; &:focus { outline: 0; } &:hover { &:extend(.btn-default:hover); } &.btn-link { &:extend(.btn-link); color: @rcblue; &:disabled { border: none; } } &:disabled { .border ( @border-thickness-buttons, @rcblue ); background-color: white; color: @rcblue; } } input[type="submit"], input[type="reset"] { &.btn-danger { &:extend(.btn-danger); &:focus { outline: 0; } &:hover { &:extend(.btn-danger:hover); } &.btn-link { &:extend(.btn-link); color: @alert2; &:hover { color: darken(@alert2,30%); } } &:disabled { color: @alert2; background-color: white; } } &.btn-danger-action { .border ( @border-thickness, @alert2 ); background-color: @alert2; color: white; a { color: white; } &:hover { background-color: darken(@alert2,20%); } &.active { .border ( @border-thickness, @alert2 ); color: white; background-color: @alert2; a { color: white; } } &:disabled { background-color: white; color: @alert2; } } }