未验证 提交 eff6d5a1 编写于 作者: D Daniel 提交者: GitHub

Merge pull request #3697 from Shidersz/add_light_dark_buttons_variants

Add new light and dark buttons variants to buttons page
......@@ -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);
}
}
}
}
......@@ -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 -->
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册