github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #3697 from Shidersz/add_light_dark_buttons_variants 

Add new light and dark buttons variants to buttons page
pull/3701/head
Daniel 2021-05-16 03:14:39 +05:30 committed by GitHub
parent 3f6b505886 2bca2ef341
commit eff6d5a1c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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 -->