mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Resolves #764 btn-group-raised color variations not rendered

Browse Source
This commit is contained in:
Kevin Ross 2015-12-08 14:53:40 -06:00
parent 8b066e8bf9
commit 1b0e4b738f
3 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
less/_buttons.less
View File

@ -58,13 +58,15 @@
//--
// color variations
&.btn-raised,
&.btn-fab {
&.btn-fab,
.btn-group-raised & {
.background-variations(~".btn", ~"", @mdb-btn-background-color);
}
//---
// btn-raised
&.btn-raised {
&.btn-raised,
.btn-group-raised & {
&:not(.btn-link) {
.shadow-2dp();
@ -77,7 +79,8 @@
// FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
.generic-variations(~".btn", ~"", @mdb-btn-background-color, {
background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor); });
background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor);
});
// Spec:
// - Raised Light/Light theme no hover.

6
sass/_buttons.scss
View File

@ -60,13 +60,15 @@
//--
// color variations
&.btn-raised,
&.btn-fab {
&.btn-fab,
.btn-group-raised & {
@include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
}
//---
// btn-raised
&.btn-raised {
&.btn-raised,
.btn-group-raised & {
&:not(.btn-link) {
@include shadow-2dp();

45
testcase.html
View File

@ -40,27 +40,30 @@ Test case
-->
<div class="container">
<h4><mark>btn</mark></h4>
<a href="javascript:void(0)" class="btn"><code>btn</code></a>
<a href="javascript:void(0)" class="btn active"><code>.active</code></a>
<h4><mark>btn.btn-raised</mark></h4>
<a href="javascript:void(0)" class="btn btn-raised"><code>btn</code></a>
<a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a>
<h4><mark>btn.btn-default</mark></h4>
<a href="javascript:void(0)" class="btn btn-default"><code>btn</code></a>
<a href="javascript:void(0)" class="btn btn-default active"><code>.active</code></a>
<h4><mark>btn.btn-default.btn-raised</mark></h4>
<a href="javascript:void(0)" class="btn btn-raised btn-default"><code>btn</code></a>
<a href="javascript:void(0)" class="btn btn-raised btn-default active"><code>.active</code></a>
<h4><mark>btn.btn-primary.btn-raised</mark></h4>
<a href="javascript:void(0)" class="btn btn-raised btn-primary"><code>btn</code></a>
<a href="javascript:void(0)" class="btn btn-raised btn-primary active"><code>.active</code></a>
<mark>.btn-group-raised</mark>
<div class="btn-group btn-group-sm btn-group-justified btn-group-raised" role="group">
<label class="btn btn-primary active">
active
</label>
<label class="btn btn-primary">
unread
</label>
<label class="btn btn-primary">
starred
</label>
</div>
<mark>.btn.btn-raised</mark>
<div class="btn-group btn-group-sm btn-group-justified" role="group">
<label class="btn btn-primary btn-raised active">
active
</label>
<label class="btn btn-primary btn-raised ">
unread
</label>
<label class="btn btn-primary btn-raised">
starred
</label>
</div>
</div>
<!--