[REF] web: add btn-links variations
Create variations for btn-link with UI color classes. These btns appear as default text (muted necessary) and they will use an UI color on hover.
This commit is contained in:
@@ -108,9 +108,43 @@
|
||||
}
|
||||
|
||||
//== Buttons
|
||||
// Mixin to define variations for btn-links and muted btn-links
|
||||
.o-btn-link-variant(@color, @color-active) {
|
||||
text-transform: none;
|
||||
.o-hover-text-color(@default-color: @color, @hover-color: @color-active);
|
||||
|
||||
&, &:hover, &:focus, &:active, &.active {
|
||||
border-color: transparent;
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
&.text-muted, .text-muted {
|
||||
.o-hover-opacity();
|
||||
.o-hover-text-color(@default-color: @text-muted, @hover-color: @color-active);
|
||||
}
|
||||
}
|
||||
.btn-icon {
|
||||
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
|
||||
}
|
||||
.btn-link {
|
||||
font-weight: @btn-font-weight;
|
||||
|
||||
&.btn-default {
|
||||
.o-btn-link-variant(@text-color, @headings-color);
|
||||
}
|
||||
&.btn-success, &.text-success {
|
||||
.o-btn-link-variant(@text-color, @brand-success);
|
||||
}
|
||||
&.btn-warning, &.text-warning {
|
||||
.o-btn-link-variant(@text-color, @brand-warning);
|
||||
}
|
||||
&.btn-danger, &.text-danger {
|
||||
.o-btn-link-variant(@text-color, @brand-danger);
|
||||
}
|
||||
&.btn-info, &.text-info {
|
||||
.o-btn-link-variant(@text-color, darken(@brand-info, 20%));
|
||||
}
|
||||
}
|
||||
|
||||
//== Printing improvements
|
||||
@media print {
|
||||
|
||||
Reference in New Issue
Block a user