maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[pages, scss]: Add new light and dark buttons variants to the buttons page and fix they style.

Browse source
This commit is contained in:
Diego Smania 2021-05-15 17:19:39 -03:00
parent 3f6b505886
commit 2bca2ef341
2 changed files with 101 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
build/scss/_buttons.scss
View file

@ -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
.btn-app {
@include border-radius(3px);
@ -142,13 +153,21 @@
@each $color, $value in $theme-colors-alt {
.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 {
.btn-outline-#{$color} {
@include button-outline-variant($value);
@if $color == dark {
@include button-outline-variant(darken($value, 20%));
} @else {
@include button-outline-variant($value);
}
}
}
}

80
pages/UI/buttons.html
View file

@ -1009,6 +1009,46 @@
<button type="button" class="btn btn-block btn-warning disabled">Warning</button>
</td>
</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>
</div>
<!-- /.card -->
@ -1158,6 +1198,46 @@
<button type="button" class="btn btn-block btn-outline-warning disabled">Warning</button>
</td>
</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>
</div>
<!-- /.card -->