Add missing CSS

Add missing mixin
 - .label(sucess|waring|danger|info) and .alert-variant(), 
 - variables @alert(sucess|waring|danger|info)-(bg|border|text) 

Delete .alert-(success,info,warning,dange) coz I can't set it work
Don't embed gradient-ng too, for the same reason
This commit is contained in:
Stef 2021-06-01 01:59:27 +02:00 committed by GitHub
parent e7c879ed3a
commit 39726c35f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -49,6 +49,36 @@
@pagination-active-border: @spring-green;
@table-border-color: @spring-brown;
@alert-success-bg: @spring-light-grey;
@alert-success-border: @spring-light-grey;
@alert-success-text: @spring-green;
@alert-info-bg: @spring-light-grey;
@alert-info-border: @spring-light-grey;
@alert-info-text: @spring-green;
@alert-warning-bg: @spring-light-grey;
@alert-warning-border: orange;
@alert-warning-text: orange;
@alert-danger-bg: @spring-light-grey;
@alert-danger-border: red;
@alert-danger-text: red;
.alert-variant($background, $border, $color) {
color: $color;
@background: $background;
border-color: $border;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($color, 10%);
}
}
.table > thead > tr > th {
background-color: lighten(@spring-brown, 3%);
color: @spring-light-grey;
@ -177,6 +207,24 @@ table td.action-column {
margin-bottom: 0;
}
.label-info {
font-weight: bold;
}
.label-warning {
text-color: orange;
}
.label-danger {
text-color: red;
}
.label-success {
text-color: green;
}
.deployment-status-deployed {
.label-success;
}
@ -204,18 +252,6 @@ table td.action-column {
color: @spring-brown;
}
.alert-success {
.alert-variant(fade(@alert-success-bg, 70%); @alert-success-border; @alert-success-text);
}
.alert-info {
.alert-variant(fade(@alert-info-bg, 70%); @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant(fade(@alert-warning-bg, 70%); @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant(fade(@alert-danger-bg, 70%); @alert-danger-border; @alert-danger-text);
}
.myspinner {
animation-name: spinner;