mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-27 12:04: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 bd177e26f0
commit 1ba984c2ec
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> <h3><small>flat - default - no class needed</small></h3>
<p class="bs-component"> <p class="bs-component">
<a href="javascript:void(0)" class="btn"><code>btn</code> only</a> <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-default">Default</a>
<a href="javascript:void(0)" class="btn btn-primary">Primary</a> <a href="javascript:void(0)" class="btn btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-success">Success</a> <a href="javascript:void(0)" class="btn btn-success">Success</a>
@ -521,7 +520,6 @@
<h3><small><code>.btn-raised</code></small></h3> <h3><small><code>.btn-raised</code></small></h3>
<p class="bs-component"> <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-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-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-raised btn-success">Success</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> <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> <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;"> <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 ">Middle</a>
<a href="javascript:void(0)" class="btn ">Right</a> <a href="javascript:void(0)" class="btn ">Right</a>
</div> </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>
<div class="bs-component" style="margin-bottom: 15px;"> <div class="bs-component" style="margin-bottom: 15px;">

31
less/_buttons.less
View File

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