mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +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 // color variations
&.btn-raised, &.btn-raised,
&.btn-fab { &.btn-fab,
.btn-group-raised & {
.background-variations(~".btn", ~"", @mdb-btn-background-color); .background-variations(~".btn", ~"", @mdb-btn-background-color);
} }
//--- //---
// btn-raised // btn-raised
&.btn-raised { &.btn-raised,
.btn-group-raised & {
&:not(.btn-link) { &:not(.btn-link) {
.shadow-2dp(); .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? // 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 // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
.generic-variations(~".btn", ~"", @mdb-btn-background-color, { .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: // Spec:
// - Raised Light/Light theme no hover. // - Raised Light/Light theme no hover.

6
sass/_buttons.scss
View File

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

45
testcase.html
View File

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