Show More
buttons.less
418 lines
| 7.2 KiB
| text/x-less
|
LessCssLexer
r1 | ||||
//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; | ||||
} | ||||
r1769 | &.no-margin { | |||
margin: 0 0 0 0; | ||||
} | ||||
r1 | } | |||
.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 ); | ||||
r1406 | background-color: transparent; | |||
r1 | } | |||
} | ||||
.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; | ||||
} | ||||
} | ||||
r1445 | .btn-approved-status { | |||
.border ( @border-thickness, @alert1 ); | ||||
background-color: white; | ||||
color: @alert1; | ||||
} | ||||
.btn-rejected-status { | ||||
.border ( @border-thickness, @alert2 ); | ||||
background-color: white; | ||||
color: @alert2; | ||||
} | ||||
r1 | .btn-sm, | |||
.btn-mini, | ||||
.field-sm .btn { | ||||
padding: @padding/3; | ||||
} | ||||
.btn-xs { | ||||
padding: @padding/4; | ||||
} | ||||
.btn-lg { | ||||
padding: @padding * 1.2; | ||||
} | ||||
r1030 | .btn-group { | |||
display: inline-block; | ||||
.btn { | ||||
float: left; | ||||
margin: 0 0 0 -1px; | ||||
} | ||||
} | ||||
r1 | .btn-link { | |||
background: transparent; | ||||
border: none; | ||||
padding: 0; | ||||
color: @rcblue; | ||||
&:hover { | ||||
background: transparent; | ||||
border: none; | ||||
color: @rcdarkblue; | ||||
} | ||||
r1192 | //disabled buttons | |||
//last; overrides any other styles | ||||
r1 | &:disabled { | |||
r1192 | opacity: .7; | |||
cursor: auto; | ||||
background-color: white; | ||||
r1 | color: @grey4; | |||
r1192 | text-shadow: none; | |||
r1 | } | |||
// 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: 150px; | ||||
} | ||||
// 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; | ||||
r1769 | border-radius: 0; | |||
r1 | background-color: transparent; | |||
r1769 | &.last-item { | |||
border: none; | ||||
padding: 0 0 0 0; | ||||
} | ||||
r1 | &:last-child { | |||
border: none; | ||||
r1769 | padding: 0 0 0 0; | |||
r1 | } | |||
&: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); | ||||
r1030 | ||||
r1 | &:focus { | |||
outline: 0; | ||||
} | ||||
r1030 | ||||
r1 | &:hover { | |||
&:extend(.btn-danger:hover); | ||||
} | ||||
r1030 | ||||
r1 | &.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; | ||||
} | ||||
} | ||||
} | ||||