mirror of https://github.com/ColorlibHQ/AdminLTE
[pages, scss]: Add new light and dark buttons variants to the buttons page and fix they style.
Diego Smania
parent
3f6b505886
commit
2bca2ef341
|
|
@ -55,6 +55,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-outline-light {
|
||||||
|
color: darken($light, 20%);
|
||||||
|
border-color: darken($light, 20%);
|
||||||
|
|
||||||
|
&.disabled,
|
||||||
|
&:disabled {
|
||||||
|
color: darken($light, 20%);
|
||||||
|
border-color: darken($light, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Application buttons
|
// Application buttons
|
||||||
.btn-app {
|
.btn-app {
|
||||||
@include border-radius(3px);
|
@include border-radius(3px);
|
||||||
|
|
@ -142,13 +153,21 @@
|
||||||
|
|
||||||
@each $color, $value in $theme-colors-alt {
|
@each $color, $value in $theme-colors-alt {
|
||||||
.btn-#{$color} {
|
.btn-#{$color} {
|
||||||
@include button-variant($value, $value);
|
@if $color == dark {
|
||||||
|
@include button-variant(darken($value, 5%), lighten($value, 10%));
|
||||||
|
} @else {
|
||||||
|
@include button-variant($value, $value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $color, $value in $theme-colors-alt {
|
@each $color, $value in $theme-colors-alt {
|
||||||
.btn-outline-#{$color} {
|
.btn-outline-#{$color} {
|
||||||
@include button-outline-variant($value);
|
@if $color == dark {
|
||||||
|
@include button-outline-variant(darken($value, 20%));
|
||||||
|
} @else {
|
||||||
|
@include button-outline-variant($value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1009,6 +1009,46 @@
|
||||||
<button type="button" class="btn btn-block btn-warning disabled">Warning</button>
|
<button type="button" class="btn btn-block btn-warning disabled">Warning</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-light">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-light btn-lg">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-light btn-sm">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-light btn-xs">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-light btn-flat">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-light disabled">Light</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-dark">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-dark btn-lg">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-dark btn-sm">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-dark btn-xs">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-dark btn-flat">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-dark disabled">Dark</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<!-- /.card -->
|
<!-- /.card -->
|
||||||
|
|
@ -1158,6 +1198,46 @@
|
||||||
<button type="button" class="btn btn-block btn-outline-warning disabled">Warning</button>
|
<button type="button" class="btn btn-block btn-outline-warning disabled">Warning</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-light">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-light btn-lg">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-light btn-sm">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-light btn-xs">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-light btn-flat">Light</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-light disabled">Light</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-dark">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-dark btn-lg">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-dark btn-sm">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-dark btn-xs">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-dark btn-flat">Dark</button>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-block btn-outline-dark disabled">Dark</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<!-- /.card -->
|
<!-- /.card -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue