##// END OF EJS Templates
ui: make copy content actions not use grey....
ui: make copy content actions not use grey. - we use this color for disabled elements. Those elements should have regular action colors

File last commit:

r3882:74da9073 default
r4100:0aa785c2 default
Show More
buttons.less
475 lines | 8.4 KiB | text/x-less | LessCssLexer
//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: @grey2;
background-color: white;
background-image: none;
border: none;
.border ( @border-thickness-buttons, @grey5 );
.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;
box-shadow: @button-shadow;
-webkit-box-shadow: @button-shadow;
a {
display: block;
margin: 0;
padding: 0;
color: inherit;
text-decoration: none;
&:hover {
text-decoration: none;
}
}
&:focus,
&:active {
outline:none;
}
&:hover {
color: @rcdarkblue;
background-color: @white;
.border ( @border-thickness, @grey4 );
}
.icon-remove {
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-active {
color: @rcdarkblue;
background-color: @white;
.border ( @border-thickness, @rcdarkblue );
}
}
.btn-default {
border: @border-thickness solid @grey5;
background-image: none;
color: @grey2;
a {
color: @grey2;
}
&:hover,
&.active {
color: @rcdarkblue;
background-color: @white;
.border ( @border-thickness, @grey4 );
a {
color: @grey2;
}
}
&:disabled {
.border ( @border-thickness-buttons, @grey5 );
background-color: transparent;
}
&.btn-active {
color: @rcdarkblue;
background-color: @white;
.border ( @border-thickness, @rcdarkblue );
}
}
.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 0;
// first item
&:first-of-type:not(:last-of-type) {
border-radius: @border-radius 0 0 @border-radius;
}
// middle elements
&:not(:first-of-type):not(:last-of-type) {
border-radius: 0;
border-left-width: 0;
border-right-width: 0;
}
// last item
&:last-of-type:not(:first-of-type) {
border-radius: 0 @border-radius @border-radius 0;
}
&:only-child {
border-radius: @border-radius;
}
}
}
.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;
opacity: 0.5;
}
}
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;
}
}
}
.button-links {
float: left;
display: inline;
margin: 0;
padding-left: 0;
list-style: none;
text-align: right;
li {
}
li.active {
background-color: @grey6;
.border ( @border-thickness, @grey4 );
}
}