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

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

pull/3697/head
Diego Smania 4 years ago
parent
3f6b505886
commit
2bca2ef341
2 changed files with 101 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      build/scss/_buttons.scss
  2. 80
      pages/UI/buttons.html

23
build/scss/_buttons.scss
Unescape 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
Unescape 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 -->

Write Preview
Loading…
Cancel
Save