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

fine tuning behavior of icon buttons - make them inherit more so that they work better on various background colors. This also changes flat to work on different backgrounds as well

Browse Source
This commit is contained in:
Kevin Ross 2016-01-12 17:49:53 -06:00
parent 6e01cf4ba9
commit fb779a0f1c
3 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/material-design/menus.md
View File

@ -16,7 +16,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %}
<!-- icon with buttons -->
<div class="dropdown">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
An <code>.mdb-btn-icon</code> with menu buttons
@ -29,7 +29,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- icon with links -->
<div class="dropdown">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
An <code>.mdb-btn-icon</code> with menu links
@ -42,7 +42,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- fab-sm -->
<div class="dropdown">
<button class="btn mdb-btn-fab mdb-btn-fab-sm btn-secondary dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-fab mdb-btn-fab-sm dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
An <code>.mdb-btn-fab-sm</code>
@ -54,7 +54,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- fab -->
<div class="dropdown">
<button class="btn mdb-btn-fab btn-secondary dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-fab dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
An <code>.mdb-btn-fab</code>
@ -66,7 +66,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- default btn -->
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="buttonMenu1">
@ -83,7 +83,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Lower left side
{% example html %}
<div class="dropdown open">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu" aria-labelledby="ll1">
@ -99,7 +99,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Lower right side
{% example html %}
<div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="lr1">
@ -115,7 +115,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Top left side
{% example html %}
<div class="dropdown open">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="tl1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="tl1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="tl1">
@ -131,7 +131,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Top right side
{% example html %}
<div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="tr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="tr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-top-right" aria-labelledby="tr1">
@ -152,7 +152,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %}
<div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw1">
@ -167,7 +167,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %}
<div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw2">

10
scss/mixins/_buttons.scss
View File

@ -33,12 +33,18 @@
}
}
// when it is an icon, kill the active bg on open dropdown
// when it is an icon, kill the active bg on open dropdown, but stabilize on hover
.open > &.dropdown-toggle.mdb-btn-icon {
color: inherit;
background-color: $background;
// leave hover on with the lighter focus color
&:hover {
background-color: $focus-background;
}
}
&.disabled,
&.disabled,
&:disabled {
&:focus,
&.focus {

2
scss/variables/bootstrap/_buttons.scss
View File

@ -6,7 +6,7 @@ $mdb-btn-margin-bottom: .3125rem !default; // 5px
// default btn with no specific type designation
$mdb-btn-color: $gray-dark !default;
$mdb-btn-bg: $body-bg !default; // #fff
$mdb-btn-bg: inherit !default; //$body-bg !default; // #fff
$mdb-btn-border: #ccc !default;
$mdb-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999