mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-25 19:14:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

#745 disabled buttons and button groups

Browse Source
This commit is contained in:
Kevin Ross 2015-11-24 14:54:42 -06:00
parent 76d49769ab
commit bea724ce70
2 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
bootstrap-elements.html
View File

@ -508,7 +508,6 @@
<h3><small>flat - default - no class needed</small></h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn"><code>btn</code> only</a>
<a href="javascript:void(0)" class="btn active"><code>.active</code></a>
<a href="javascript:void(0)" class="btn btn-default">Default</a>
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-success">Success</a>
@ -521,7 +520,6 @@
<h3><small><code>.btn-raised</code></small></h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a>
<a href="javascript:void(0)" class="btn btn-raised btn-default">Default</a>
<a href="javascript:void(0)" class="btn btn-raised btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-raised btn-success">Success</a>
@ -650,9 +648,12 @@
<h3><small><code>btn-lg.btn-block.btn-raised</code></small></h3>
<p class="bs-component">
<div class="bs-component">
<a href="javascript:void(0)" class="btn btn-default btn-lg btn-block btn-raised">Block level button</a>
</p>
<fieldset disabled>
<a href="javascript:void(0)" class="btn btn-default btn-lg btn-block btn-raised">Block level button disabled</a>
</fieldset>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
@ -662,6 +663,15 @@
<a href="javascript:void(0)" class="btn ">Middle</a>
<a href="javascript:void(0)" class="btn ">Right</a>
</div>
<h3><small>disabled <code>btn-group.btn-group-justified.btn-group-raised</code></small></h3>
<fieldset disabled>
<div class="btn-group btn-group-justified btn-group-raised">
<a href="javascript:void(0)" class="btn ">Left</a>
<a href="javascript:void(0)" class="btn ">Middle</a>
<a href="javascript:void(0)" class="btn ">Right</a>
</div>
</fieldset>
</div>
<div class="bs-component" style="margin-bottom: 15px;">

29
less/_buttons.less
View File

@ -62,6 +62,7 @@
&:not(.btn-link) {
.shadow-2dp();
&:hover {
// Spec:
@ -160,20 +161,36 @@
i.material-icons {
vertical-align: middle;
}
}
// Disabled text
// Spec:
// - light theme: Disabled text: 26% #000000
// - dark theme: Disabled text: 30% #FFFFFF
fieldset[disabled] &,
// Disabled buttons and button groups
.btn,
.input-group-btn .btn,
.btn-group {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
fieldset[disabled][disabled] &,
&.disabled,
&:disabled {
&:disabled,
&[disabled][disabled] {
// spec: light theme: Disabled text: 26% #000000
color: fade(#000000, 26%);
.theme-dark & {
// spec: dark theme: Disabled text: 30% #FFFFFF
color: fade(#FFFFFF, 30%);
}
background: transparent;
// no box-shadow on disabled
&.btn-raised,
&.btn-group-raised {
&,
&.active,
&:active,
&:focus:not(:active) {
box-shadow: none;
}
}
}
}